/* ---- SITEWIDE ---- */

body{ 
	background-color: #e3e3e3;
}
.container{ 
	background-color: #fff;
}
.page-link {
    color: #333;
    background-color: #ffe07b;
    border: 1px solid #fddb69;
}
.page-item.active .page-link {
    background-color: #ffc107;
    border-color: #ffc107;
}
.page-link:hover {
    color: #0056b3;
    background-color: #e0a800;
    border-color: #d39e00;
}
.sub-nav .nav .nav-item .nav-link:hover {
	background-color: #e6e5e5;
	border-bottom: 5px solid #e6e5e5;
}
.sub-nav .nav .nav-item .nav-link {
	color: #333;
	font-weight: bold;
}
.sub-nav .nav .nav-item .active .fas {
	color: #f4a460;
}
.sub-nav .nav .nav-item .active .far {
	color: #f4a460;
}
.sub-nav .nav .nav-item .active {
	color: #1da1f2;
	background-color: unset;
	border-bottom: 5px solid #1da1f2;
}
.sub-nav .nav .nav-item .active:hover {
	background-color: #e6e5e5;
	border-bottom: 5px solid #1da1f2;
}
.yellowb {
    color: #333!important;
    background-color: #FFE080!important;
    border: 1px solid #fddb69!important;
    box-shadow: 0 0 1px rgba(0,0,0,.1)!important;
}
.yellowb:hover {
    border: 1px solid #deb74f!important;
    box-shadow: 0 1px 2px rgba(0,0,0,.2)!important;
}


/* ---- FOR NAV BAR SCROLLING ---- */
  @media (max-width: 576px) {
    .navbar-collapse {
      max-height: calc(100vh - 125px);
      overflow-y: auto;
    }
  }
}
navbar-expand-md {
  @media (max-width: 768px) {
    .navbar-collapse {
      max-height: calc(100vh - 125px);
      overflow-y: auto;
    }
  }
}
navbar-expand-lg {
  @media (max-width: 992px) {
    .navbar-collapse {
      max-height: calc(100vh - 125px);
      overflow-y: auto;
    }
  }
}
navbar-expand-xl {
  @media (max-width: 1200px) {
    .navbar-collapse {
      max-height: calc(100vh - 125px);
      overflow-y: auto;
    }
  }
}


























/* ---- PROFILE PAGE LIKE DISLIKE ---- */

		.wrapper {
			margin: 20px auto;
			width: 100%;
			text-align: center;
		}
		.hash-vote {
			width: 100%;
			display: inline-block;
			position: relative;
			margin:0;
			padding:0;
			line-height: 1.7;
		}
		.hash-vote li {
			list-style: none;
			display: inline-block;
			text-align: center;
		}
		.hash-vote li a {
			text-decoration: none;
			color:#000;
			font-size: 24px;
			font-weight: bold;
			padding:0 10px;
			position: relative;
		}
		.hash-vote li a i {
			font-size: 24px;
			color:#fff;
			z-index: 0;
    		position: relative;
		}
		.hash-like {
			border-radius: 6px 0 0 6px;
			border-left:1px solid #9cc63f;
			border-right: 0;
			background: #c9e257; /* Old browsers */
			background: -moz-linear-gradient(left,  #c9e257 0%, #ffffff 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(left,  #c9e257 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to right,  #c9e257 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9e257', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */


		}
		.hash-dislike {
			border-radius: 0 6px 6px 0;
			border-right:1px solid #d75c63;
			border-left:0;
			margin-left: -4px;
			/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,db747c+100 */
			background: #db747c; /* Old browsers */
			background: -moz-linear-gradient(30deg,  #ffffff 0%, #db747c 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(30deg,  #ffffff 0%,#db747c 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(30deg,  #ffffff 0%,#db747c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#db747c',GradientType=1 ); /* IE6-9 */
		}
		.hash-like a {
			float:right;
			border:1px solid #962823;
			border-radius: 6px 0 0 6px;
			background: #73932d;
		}
		.hash-like a:hover {
		    background: #5b7522;
    		border-color: #547114;
		}
		.hash-dislike a  {
			float:left;
			border:1px solid #e58289;
			border-radius: 0 6px 6px 0;
			background: #ad3534; /* Old browsers */
			background: -moz-linear-gradient(top,  #c85d64 0%, #b94648 50%, #a12925 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(top,  #c85d64 0%,#b94648 50%,#a12925 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to bottom,  #c85d64 0%,#b94648 50%,#a12925 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c85d64', endColorstr='#a12925',GradientType=0 ); /* IE6-9 */
		}
		.hash-dislike a:hover {
		    background: #ad3534;
    		border-color: #e58289;
		}
		.hash-like a:before,
		.hash-dislike a:before {
			content:'';
			height: 50%;
			width:100%;
			position: absolute;
			left:0;
			top:0;
			background: rgba(255,255,255,0.2);
			border-radius: 0 6px 6px 0;
			z-index: 0;
		}
		.hash-like a:before {
			border-radius: 6px 0px 0px 6px;
		}
		.hash-vote li em {
			font-weight: bold;
			font-size: 24px;
		    font-style: normal;
		    display: inline-block;
		    padding: 0 30px;
		}
		.vote-thanks {
		    position: absolute;
		    left: 50%;
		    top: 0;
		    height: 100%;
		    background: #2e627d;
		    font-size: 11px;
		    text-transform: uppercase;
		    color: #fff;
		    padding: 0px 10px;
		    border-radius: 6px;
		    z-index: 9999999;
		    display: none !important;

		    -moz-transform: translate(-50%, 0);
		    -webkit-transform: translate(-50%, 0);
		    -ms-transform: translate(-50%, 0);
		    -o-transform: translate(-50%, 0);
		    transform: translate(-50%, 0);
		}
		.vote-thanks.active {
			display: inline-block !important;
		}


/* ---- PROFILE PAGE IMAGE THUMB ICONS ---- */
.deletePhoto {
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 1;
    color: #fff;
    text-shadow: 1px 1px #000;
}
.deletePhoto:hover {
    color: #FF0000;
    text-shadow: 1px 1px #000;
}
.editPhoto {
    position: absolute;
    left: 5px;
    bottom: 5px;
    z-index: 1;
    color: #fff;
    text-shadow: 1px 1px #000;
}
.editPhoto:hover {
    color: #008000;
    text-shadow: 1px 1px #000;
}



/* ---- PROFILE PAGE LIKES ME ---- */
.like-headline {
    color: red;
    font-size: 2em!important;
}
#like-info-2 {
    text-align: center;
    font-family: 'Shadows Into Light Two', cursive;
    margin-top: .5em;
}





/* ---- SEARCH PAGE OPTIONS CANVAS ---- */

.bs-canvas-overlay {
   opacity: 0;
   z-index: -1;
}

.bs-canvas-overlay.show {
   opacity: 0.85;
   z-index: 1100;
}

.bs-canvas {
   top: 0;
   width: 0;
   z-index: 1110;
   overflow-x: hidden;
   overflow-y: auto;
}

.bs-canvas-left {
   left: 0;
}

.bs-canvas-right {
   right: 0;
}

.bs-canvas-anim {
   transition: all .4s ease-out;
   -webkit-transition: all .4s ease-out;
   -moz-transition: all .4s ease-out;
   -ms-transition: all .4s ease-out;
}




/* ---- LEGAL PAGES ---- */
.legal h1 {
    font-size: 3em;
    margin-bottom: 1em;
    font-family: 'Open Sans',sans-serif;
    font-weight: bold;    
}
.legal h2 {
    border-bottom: 2px solid #1da1f2;
    font-size: 2.5em;
    margin-top: 3em;
    margin-bottom: .5em;
    font-family: 'Open Sans',sans-serif;
    font-weight: bold;
}
.legal h3 {
    font-size: 1.75em;
    margin-top: 2.25em;
    margin-bottom: .35em;
    font-family: 'Open Sans',sans-serif;
    font-weight: bold;
}
.legal h4 {
    margin-top: 1.5em;
    text-transform: uppercase;
    font-weight: bold;
    font-family: 'Open Sans',sans-serif;    
}
.legal p {
	font-family: 'Open Sans',sans-serif;
}
.legal {
	margin-top: 3rem!important;
	margin-bottom: 10rem!important;
}










/* ---- SEARCH PAGE FOR RESULTS FOR DIFF SCREEN SIZES-- */
	.search-card {
		width: 144px;
		margin: 10px 10px;
	}
	.search-card img {
		width: 144px;
		height: 192px;
	}
	.search-card h5 {
		font-size: .7rem;
	}
	.search-card p {
		font-size: .6rem;
	}
 @media only screen and (min-width: 576px) {
	.search-card {
		width: 150px;
	}
	.search-card img {
		width: 150px;
		height: 200px;
	}
	.search-card h5 {
		font-size: .7rem;
	}
	.search-card p {
		font-size: .6rem;
	}
}
@media only screen and (min-width: 768px) {
	.search-card {
		width: 150px;
	}
	.search-card img {
		width: 150px;
		height: 200px;
	}
	.search-card h5 {
		font-size: .7rem;
	}
	.search-card p {
		font-size: .6rem;
	}
}
@media only screen and (min-width: 992px) {
	.search-card {
		width: 210px;
	}
	.search-card img {
		width: 210px;
		height: 280px;
	}
	.search-card h5 {
		font-size: 1.1rem;
	}
	.search-card p {
		font-size: .9rem;
	}
}
@media only screen and (min-width: 1200px) {
	.search-card {
		width: 255px;
	}
	.search-card img {
		width: 255px;
		height: 340px;
	}
	.search-card h5 {
		font-size: 1.3rem;
	}
	.search-card p {
		font-size: 1.1rem;
	}
}