html{
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
	
	
	--color-10: #1A1400;
	--color-20: #113832;
	--color-30: #095B65;
	--color-40: #008099;
	--color-50: #00A0BF;
	--color-60: #00BFE5;
	--color-70: #40CFEB;
	--color-80: #7BDAED;
	--color-90: #BFEFF9;
	--color-95: #DFF7FC;
	--color-96: #E5F9FD;
	--color-97: #ECFAFD;
	--color-98: #F2FCFE;
	--color-99: #F9FDFE;
	--color-100: #FFF;
	
	--gray-10: #121516;
	--gray-20: #282E30;
	--gray-30: #3D4749;
	--gray-40: #536163;
	--gray-50: #68797C;
	--gray-60: #7E9093;
	--gray-70: #9EABAE;
	--gray-80: #BAC3C5;
	--gray-90: #DFE3E4;
	--gray-95: #F5F7F7;
	--gray-100: #FFF;
	
	--red-50: #F74525;

	--color-bg: var(--color-95);
	--color-text: var(--color-30);
	
	--page_width: 970px;
}

body{
	font-family: 'Graphik', 'Apple Color Emoji',  'AndroidEmoji', 'DejaVu Sans', Symbola, 'Everson Mono', Dingbats, 'Segoe UI Symbol', Quivira, SunExt-A, FreeSerif, Universalia, unifont; 
	font-style: normal;
	background-color: var(--color-bg);
	color:  var(--color-text);;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5rem;
	
}


input{
	-webkit-appearance: none;
	color:  var(--color-text);
	cursor: pointer;
}

::selection {color:var(--color-20); background:var(--color-70);}
::-moz-selection {color:var(--color-20); background:var(--color-70);}


input::selection {color:var(--color-20); background:var(--color-70);}
input::-moz-selection {color:var(--color-20); background:var(--color-70);}




button{
	font-size: 1rem;
	padding: .5rem 1rem;
	background-color: var(--color-60);
	border: 1px solid var(--color-60);
	color: var(--color-20);
	border: none;
	border-radius: .5rem;
	cursor: pointer;
	font-weight: 600;

}


button:hover{
	background-color: var(--color-50);
	border: 1px solid var(--color-70);

}

button.primary{
	color: var(--color-100);
	background-color: var(--color-40);
	border: 1px solid var(--color-40);

}

button.primary:hover{
	background-color: var(--color-30);
}


button.secondary{
	background-color: var(--color-90);
	border: 1px solid var(--color-70);
	color: var(--color-50);
}

button.secondary:hover{
	background-color: var(--color-90);
	border: 1px solid var(--color-50);
	color: var(--color-40);
}



.center{
	text-align: center;
}

.mid{
	font-weight: 600;
}

a, a:visited{
	color: var(--color-50);
	text-decoration: none;
}

a:hover{
	color: var(--color-10);
	text-decoration: underline;
}


section{
	margin-bottom: 1rem;
	width: 100%;
	/* background-color: var(--color-99); */
}

.side_by{
	display: grid;
	grid-template-columns: 1fr fit-content(5rem);
	gap: 2rem;
}

.breadcrumb{
	color: var(--color-80);
	margin-bottom: 3rem;
}


.breadcrumb .home{
	background-size: 1.25rem;
	background-repeat: no-repeat;
	background-position: left middle;
	padding: 0 0 0 1.75rem;
	background-image: url('/\*/img/emojifinder_logo.svg');
}

.breadcrumb a{
	color: var(--color-30);
	text-decoration: none;
	height: 1.25rem;
	display: inline-block;
	font-weight: 500;
}

.breadcrumb a:hover{
	color: var(--color-40);
	text-decoration: none;
}




#search{
	font-family: 'Graphik'; 

	font-weight: 600; 
	font-size: 5rem;

	position: fixed;
	display: block;
	top:0rem;
	left: 0rem;
	right:0rem;
	width: auto;
	height: 150px;
	max-width: 100%;
	box-sizing: border-box;

	padding: 1.75rem 2rem 1.75rem 2.25rem;
	margin:2rem 15rem 0 2rem;
	border:none;
	outline: none;
	color: var(--color-40);
	border-radius: 1rem;
	border: .25rem solid var(--color-90) ;
}

#search:focus{
	-moz-box-shadow: none !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	outline:none;
	border: .25rem solid var(--color-60) ;

}

#search_button{
/* 	font-family: 'Graphik';  */
	font-weight: 600; 

	position: fixed;
	top:0rem;
	right:0rem;
	width: 12rem;
	height: 150px;
	border: none;
	box-sizing: border-box;
	text-align: center;
	font-size: 5rem;
	background-color: var(--color-80);

	background-image: url('/*/img/emojifinder_logo_color.svg');
	background-size: 6rem;
	background-position: center center;
	background-repeat: no-repeat;

	color: white;
	padding: 1.5rem 2rem 2rem 2.5rem;
	margin:2rem 2rem 0 2rem;

	border-radius: 1rem;
	
	transition: background-size .1s ease-in-out;
	
/* 	border:1px solid #00b8e5; */

}

#search_button:hover{
	background-size: 6.5rem;
	background-color: var(--color-60);
}


#search_button:active{
	background-color: var(--color-50);
}	


#spinner{
	z-index: 2;
	position: fixed;
	right: 16rem;
	top:2.5rem;
	background-color: white;
	height: 8.25rem;
	vertical-align: middle;
	line-height: 150px;
	font-size: 5rem;
	padding: 0 2rem;
	opacity: 0;
	pointer-events: none;
	margin-top: 1px;
}

#spinner.show{
	opacity: 1;
}

img.chromoji {
	font-size: 10rem;
}

.warn{
	color: #ee8600;
	font-size: 2rem;
	width: 100%;
	padding: 8rem 0;
}

.warn a{
	color: #c15800;
	font-weight: 600;
}


.instruct{
	color: var(--color-30);
	font-size: 2rem;
	line-height: 1.4em;
	width: auto;
	padding: 5rem 1rem;
	text-align: center;
	width: 50%;
	margin: 0 auto;
	font-weight: 500;

}



.message{
	color: var(--color-20);
	font-size: 2rem;
	line-height: 3rem;
	width: 100%;
	padding: 8rem 0;
}
.message .emoji{
	font-size: 4rem;
}

.message a, .instruct a{
	text-decoration: underline;
}

 
iframe{
	display: inline-block;
	vertical-align: top;
	margin: .5rem 0 .5rem 0;
}

.fb-like fb_iframe_widget{
	position: relative;
	top:.25rem;
}


#results{
	box-sizing: border-box;
	width: auto;
	margin: 0 0 0 0;
	padding: 0 2rem 10rem 2rem;
	position: relative;
	top:13rem;
	z-index: 100;
}


#results .result{
	transition-duration:1s;

    transition-property:opacity, top, transform;
	transition-timing-function: ease-out, cubic-bezier(.09,1.54,.54,.95), cubic-bezier(.09,1.54,.54,.95);
	transition-duration: .4s, 1s;
	position: relative;
	opacity: 1;
	top: 0;
    -ms-transform: scale(1); /* IE 9 */
    -webkit-transform: scale(1); /* Chrome, Safari, Opera */
    transform: scale(1);
  	font-size: 7.8rem;
	line-height: 1.25em;
	padding: 0;
	margin: 0 0 .5rem 0;
    width: 1.3em;
    border: none;
    text-align: center;
    display: inline-block;
    background:none;
    outline:0;
    
/*     font-family: 'AppleColorEmoji'; */
   }


#results .result:focus{
/* 		border: 1px solid rgba(0,0,0,.1); */

}


#results .result:nth-child(1){ transition-delay: 0s; }
#results .result:nth-child(2){ transition-delay: .05s; }
#results .result:nth-child(3){ transition-delay: .1s; }
#results .result:nth-child(4){ transition-delay: .15s; }
#results .result:nth-child(5){ transition-delay: .2s; }
#results .result:nth-child(6){ transition-delay: .25s; }
#results .result:nth-child(7){ transition-delay: .3s; }
#results .result:nth-child(8){ transition-delay: .35s; }
#results .result:nth-child(9){ transition-delay: .4s; }
#results .result:nth-child(10){ transition-delay: .45s; }
#results .result:nth-child(11){ transition-delay: .5s; }
#results .result:nth-child(12){ transition-delay: .55s; }
#results .result:nth-child(13){ transition-delay: .6s; }
#results .result:nth-child(14){ transition-delay: .65s; }
#results .result:nth-child(15){ transition-delay: .7s; }
#results .result:nth-child(16){ transition-delay: .75s; }
#results .result:nth-child(17){ transition-delay: .8s; }
#results .result:nth-child(18){ transition-delay: .85s; }
#results .result:nth-child(19){ transition-delay: .9s; }
#results .result:nth-child(20){ transition-delay: 1s; }
#results .result:nth-child(21){ transition-delay: 1.05s; }
#results .result:nth-child(22){ transition-delay: 1.1s; }
#results .result:nth-child(23){ transition-delay: 1.15s; }
#results .result:nth-child(24){ transition-delay: 1.2s; }
#results .result:nth-child(25){ transition-delay: 1.25s; }
#results .result:nth-child(26){ transition-delay: 1.3s; }
#results .result:nth-child(27){ transition-delay: 1.35s; }
#results .result:nth-child(28){ transition-delay: 1.4s; }
#results .result:nth-child(29){ transition-delay: 1.45s; }
#results .result:nth-child(30){ transition-delay: 1.5s; }




#results.prepop .result{
	transition-duration:.1s;
	-webkit-transition-duration: .1s;
	transition-delay: 0s;
	top: 100px;
	opacity: 0;
    -ms-transform: scale(.5); /* IE 9 */
    -webkit-transform: scale(.5); /* Chrome, Safari, Opera */
    transform: scale(.5);
    top:50px;
}

#results .massive{
	font-size: 10rem;
}


.note{
	font-size: .75rem;
	line-height: 1rem;
	color: var(--gray-50);
	/* background-color: floralwhite; */
	display: block;
}

.emoji{
	line-height: 1.3em;
}



.emoji_grid{
	margin: 0 0 3rem 0;
}


.emoji_grid a{
	text-decoration: none;
}

.emoji_grid .item .emoji{
	display: grid;
	align-items: center;
	text-align: center;
	width: 2.5rem;
	height: 2.5rem;
	text-decoration: none;
	margin: 0;
	padding: .25rem;	
	/* background-color: antiquewhite; */
	
	
	transform: none;
	transition-duration: .25s;
	/* transition-delay: .05s; */
	transition-property: transform;
	transition-timing-function: ease-in-out;
	z-index: 999;
	text-decoration: none;
}













.emoji.sizeM{	font-size: 2rem;  line-height: 1.4em;}
.emoji.sizeL{	font-size: 3rem; line-height: 1.8em; }
.emoji.sizeXL{	font-size: 6rem;  }
.emoji.sizeXXL{	font-size: 10rem; 	line-height: 1.3em; }


	
.item{
	position: relative;
	display: inline-block;
	box-sizing: content-box-box;

}

.emoji_grid .item:hover{
	box-shadow: 0px 1rem 3rem rgba(0,0,0,.15);	
	border-radius: .5rem;
	background-color: var(--color-80);
	outline:.25rem solid var(--color-80);

}

.emoji_grid .item:hover .emoji.sizeM{
	transform: scale(1.25);
} 



.hover_card {
	  position: absolute;
	  /* bottom: 100%; */
	  margin: .5rem 0;
	  display: grid;
	  grid-template-rows: 12rem auto;
	  gap: 1.5rem;
	  left: -1rem;
	  z-index: 10;
	  background: white;
	  border: 1px solid #ccc;
	  padding: 1rem;
	  border-radius: 1.5rem;
	  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	  opacity: 0;
	  pointer-events: none;
	  transition-property:  opacity;
	  transition-duration:  .5s;
	  transition-timing-function:  ease;
	  transition-delay: 0s;
	  /* white-space: nowrap; */
	}
	
.item:hover .hover_card {
  opacity: 1;
  pointer-events: auto;
  transition-delay: .25s;
  transition-duration:  0.25s;

}

.hover_card.above{	bottom: 100%;	}
.hover_card.below{	top: 100%;	}


.hover_card .emoji.sizeXXL{
	background-color: var(--gray-90);
	display: grid;
	align-items: center;
	text-align: center;
	width: 12rem; 
	height: 12rem;
	border-radius: .5rem;
}

.hover_card h3{
	line-height: 1.3em;
	display: block;
	padding: 0;
	margin: 0 0 .25rem 0;
	/* background-color: bisque; */
}

.hover_card .info{
	/* background-color: whitesmoke; */
	/* padding-top: .25rem; */
	align-items: center;
}
	

/* .emoji.zoom{
	transform: none;
	transition-duration: .25s;
	transition-delay: .05s;
	transition-property: transform;
	transition-timing-function: ease-in-out;
	z-index: 999;

}
*/



.right{
	float: right;
	
}

.twitter-share-button{
	position: relative;
}


#credit{
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 100%;
	padding: 0 2rem 2rem 2rem;
	box-sizing: border-box;
	z-index: 100;
	font-size: 1rem;
	font-weight: 500;
	pointer-events: none;
	background-color: var(--color-95);
}

#credit a{
	pointer-events: initial;
	text-decoration: none;
}

#tools{
	float: right;
	pointer-events: initial;

}

.fitzer, .gender_select{
	margin: 1rem 0 0 0;
	padding: 0;
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 2rem;
	border: 3px solid var(--color-95);
	background-color:var(--color-95);
}


.fitzer:hover{
	border:3px solid var(--color-70);
}


#fitz, #gender{
	display: inline-block;
}

.gender_select{
	text-align: center;
}

.gender_select.on{
	background-color: var(--color-40);
}

.fitzer.on{
	border:3px solid var(--color-40);
}

.gender_select:hover{
	border:3px solid var(--color-70);
	/* background-color: var(--color-60); */
}


.gender_select .icon{
	width: 1.5rem;
	height: 1.5rem;
	background-size: 1rem;
	background-position: center center;
	background-repeat: no-repeat;	
}





.gender_select.on .icon{
	filter:invert();
}




#fitz a, #fitz a:hover{
	text-decoration: none;	
}

#fitz-0{ background-color: #FFCF43; }
#fitz-1{ background-color: #F9DCBE; }
#fitz-2{ background-color: #DFBB97; }
#fitz-3{ background-color: #BE8F6B; }
#fitz-4{ background-color: #9A6440; }
#fitz-5{ background-color: #59453A; }



#holder{
	position: absolute;
	top:0px;
	right:0px;
	width: 10px;
	opacity: 0;
	
}

#tooltip{
	position: absolute;
	left: 0px;
	top: -500px;
	background-color: white;
	color: #00a3bf;
	padding: .8rem 1rem;
	border-radius: .25rem;
	min-width: 5rem;
	text-align: center;
	box-sizing: border-box;
	border:1px solid rgba(0,0,0,.1);	
	box-shadow: 0px 3px 10px rgba(0,0,0,.1);
	z-index: 10000;
}

#tooltip .butt{
	background-color: #00a3bf;
	color:white;
	border-radius: 4px;
	display: inline-block;
	width: 1.2rem;
	height: 1.2rem;
	text-align: center;
	margin-right: .25rem;
}

::-webkit-input-placeholder {  color: #d9f9ff; }
:-moz-placeholder {   color: #d9f9ff;  }
::-moz-placeholder {    color: #d9f9ff;  }
:-ms-input-placeholder {     color: #d9f9ff;  }



.page{
	font-size: 16px;
	max-width: var(--page_width);
	margin: 3rem auto 0 auto;
	padding: 0 2rem 10rem 2rem;
	
	font-weight: 500;
	
}


h1{
	font-size: 4.5rem;
	line-height: 5rem;
	font-weight: 600;
	letter-spacing: -1%;
	margin: 0 0 2rem 0;
}


h2{
	font-size: 2.5rem;
	line-height: 3rem;
	font-weight: 600;
	margin: 0 0 1rem 0;
}

h3{
	font-size: 1.5rem;
	font-weight: 600;
}




/* EMOJI DETAILS */

.feature{
	width: 20rem;
	height: 20rem;
	border-radius: 1rem;
	background-color: var(--color-98);

	position: relative;
	cursor: pointer;
	
}
.feature .emoji{
	font-size: 10rem;
	line-height: auto;
	width: 20rem;
	height: 20rem;
	display: grid;
	align-items: center;
	justify-self: center;
	text-align: center;
	transform: none;
	transition-duration: .25s;
	/* transition-delay: .05s; */
	transition-property: transform;
	transition-timing-function: ease-in-out;

}


.feature:hover{
	background-color: var(--color-99);
}

.feature:hover .emoji{
	transform: scale(1.1);
}


.feature .feature_instruct{

	font-size: 1rem;
	line-height: 1rem;
	color: var(--gray-80);
	position: absolute;
	bottom: 0px;
	width: 100%;
	display: inline-block;
	padding-bottom: 1rem;
	text-align: center;
	
}


.feature:hover .feature_instruct{
	color: var(--color-40);
	bottom: .25rem;
}



.sub{
	margin-top: 5rem;
	font-size: .75rem;
	line-height: 1.5rem;
	color: var(--color-50);
	font-weight: 400;
	letter-spacing: 1%;
}

@media (max-width:1024px){
	.instruct{
		width: 75%;
	}
}


	
@media (max-width : 768px){

	body{
		-webkit-text-size-adjust: none;
		width: auto;
	}    


	#tools{
		float: none;
	}


	#search{
		padding: 1;
		margin:1rem 6.5rem 0 1rem;
		font-size: 2rem;
		padding: 1rem;
		height: 70px;
		border-radius: .75rem;

	}

	#search_button{
		margin:1rem 1rem 0 1rem;
		font-size: 2rem;
		padding: 1rem;	
		width: 5rem;
		background-size: 2.5rem;
		height: 70px;
		border-radius: .75rem;

	}

	#search_button:hover, #search_button:active{
		background-size: 3rem;
	}
	

	#results{
		min-height: 4rem;
		width: auto;
		margin: .5rem 0 4rem 0;
		padding-left: 0;
		padding-right: 0;
	}
	

	#results .result{
		margin: 0 1.5rem 5rem 1.5rem;
		padding: 0 0;
		border-radius: 0;
		width: 2.25rem;
		line-height: .5rem;
		font-size: 2rem;
		transform: scale(2.5);
	}
	
	
	.message{
		padding: 0px 1px 1px 1px;
		width: auto;
		line-height: 4rem;
		font-size: 2rem;

	}
	
	.message .emoji{
		display: inline-block;
		line-height: 3rem;
		font-size: 2rem;
		transform: scale(2);
		position: relative;
		margin-bottom: 2rem;
		top: 1rem;
		
	}	

	#credit{
		width: 100%;
		padding: 1rem 1rem 1rem 1rem;
		margin-top: 1rem;
	}


	
	
	.instruct{
		padding: 0rem 2rem 2rem 2rem;
		text-align: center;
		width: auto;
		font-size: 1.5rem;
	}
	
	#spinner{
		display: none!important;
	}

}



 /* COOKIE BANNER */
 
#cookie-banner{
	 position: fixed;
	 bottom: 0;
	 left:0;
	 right:0;
	 background-color: var(--color-90);
	 color: var(--color-20);
	 z-index: 1000;
 }
 
 .cookie_inner{
	 margin: 2rem auto;
	 max-width: var(--page_width);
	 display: grid;
	 gap:1rem;
	 grid-template-columns: 1fr fit-content(3rem)  fit-content(3rem);
	 align-items: center;
 }


.cookie_inner a{
	color: var(--color-40);
	text-decoration: underline;
}

@media (max-width : 450px){
	.cookie_inner{
		margin: .5rem 1rem;
	
	}


}

@media (max-width : 450px){
	
	.fitzer, .gender_select{
		margin-top: 0;
	}
	
	.message{
		font-size: 1.5rem;
		padding: 0rem 1rem 1rem 1rem;
		width: auto;
	}
	
	#results{
		top: 8rem;
	}
	



}


#gender-0 .icon{
	background-image: url('/\*/img/gender-0.svg');
}

#gender-m .icon{
	background-image: url('/\*/img/gender-m.svg');
}

#gender-f .icon{
	background-image: url('/\*/img/gender-f.svg');
}


@font-face {
	font-family: 'Graphik';
	src: url('/\*/fonts/Commercial_Graphik/Graphik-Medium-Web.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-stretch: normal;
}

@font-face {
	font-family: 'Graphik';
	src: url('/\*/fonts/Commercial_Graphik/Graphik-Regular-Web.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-stretch: normal;
}

@font-face {
	font-family: 'Graphik';
	src: url('/\*/fonts/Commercial_Graphik/Graphik-Light-Web.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
}