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-85: #9DE5F3;
	--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;
	padding: 0;
	margin: 0;
	
}


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);}


input::placeholder { color:var(--color-90); }




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);
}



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;
	padding: 0 2rem;
}

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


p{
	margin: 0 0 1rem 0;
}

.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;
}



.page{
	position: relative;
	display: flex;
	flex-direction: column;

	font-size: 16px;
	max-width: var(--page_width);
	min-height: calc(100vh - 3rem);
	margin: 3rem auto 0 auto;
	padding: 0 1rem;
	font-weight: 500;
	
	/* background-color: antiquewhite;  */
	
}





section{
	padding: 0 2rem 1rem 2rem;
	width: 100%;
	box-sizing: border-box;
	/* background-color: var(--color-99); */
}

.ad{
	flex: 1 0 auto; /* grows to fill remaining space */
	border: 1px solid rgba(0,0,255,.1);
	position: relative;
	min-height: 250px;

}

.ad div{
	position: absolute;
	background-color: cornflowerblue;
}


.adsbygoogle {
  display: block;
  width: 100%;
}


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

.nav{
	width: auto;
	box-sizing: border-box;
	color: var(--color-80);
	margin-bottom: 1rem;
	display: grid;
	gap: 1rem;
	grid-template-columns: auto auto;
	align-items: center;
}


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

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

.nav .breadcrumb{
	display: grid;
	gap: .5rem;
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	margin: 0;
	padding: 0;
	width: auto;
}

.nav .browse {
  text-align: right; /* doesn't affect grid alignment */
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: end; /* aligns items to the right */
  width: 100%; /* so it can push to the right */
}

.home{
	margin: 0;
	padding: 0;
	display: inline-block;
	height: 25px;
	width: 130px;
	background-image: url('/\*/img/emojifinder_wordmark_color.svg');
	background-repeat: no-repeat;
	background-position: center center;
}



.instructions{
	padding: 2rem;
	min-height: 20rem;
}

.instructions h3{
	margin: 0 0 .5rem 0;
	padding: 0;
}


.search_large {
  position: relative;
  width: 100%;
}

.search_large input {
  font-family: 'Graphik';
  font-weight: 600;
  font-size: 3.5rem;
  width: 100%;
  height: 8rem;
  padding: 2rem 9rem 2rem 2rem;
  border: 0.25rem solid var(--color-90);
  border-radius: 1.5rem;
  box-sizing: border-box;
  color: var(--color-40);
  outline: none;
  
  transition-property: padding;
  transition-duration: .5s;
  transition-timing-function: ease;
}

.search_large input:focus {
  border-color: var(--color-60);
  color:  var(--color-text);
  box-shadow: none;
}


.search_large.load input{
	padding-right: 12.25rem; /* space for button */
}


#search_button {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  width: 7rem;
  height: 6.5rem;
  border: none;
  border-radius: 0.75rem;
  box-sizing: border-box;
  background-color: var(--color-90);
  background-image: url('/\*/img/emojifinder_logo_black.svg?2');
  background-position: center;
  background-size: 4.5rem;
  background-repeat: no-repeat;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease;
}

#search_button:hover {
	background-size: 4.75rem;
	background-color: var(--color-85);
}

#search_button:active {
	background-size: 4.5rem;
	background-color: var(--color-80);
}


	/* #search_button {
	right: 0.5rem;
	width: 3.5rem;
	height: 3rem;
	border-radius: 0.5rem;
	background-size: 2rem;

}

#search_button:hover {
	background-size: 2.5rem;
} */


.hourglass{
	height: 3.5rem;
	width: 3.5rem;
	/* background-color: var(--color-90); */
	background-image: url('/\*/img/hourglass_lg.svg');
	background-position: center;
	background-size: 3.5rem;
	background-repeat: no-repeat;	position: absolute;
	top: 50%;
	right:8.5rem;
	transform: translateY(-50%) scale(.75) rotate(-45deg);
	opacity: 0; 
	transition-property: transform, opacity;
	transition-duration:  0.25s;
	transition-timing-function:  ease;


}


.search_large.load input{
  padding-right: 12.25rem;
}



.search_large.load .hourglass{
  opacity: 1; 
  transform: translateY(-50%) scale(1)  rotate(0deg);

}


#nudge{
	display: block;
	font-size: 1rem;
	width: auto;
	margin: 0;
	padding: 0rem 2rem;
	font-weight: 600;
	color: var(--color-30);
	height: 1px;
	position: relative;
	top: -.5rem;
	/* box-sizing: border-box; */
	transition-duration: .5s;
	transition-property: height, opacity, top, padding;
	transition-timing-function: ease;
	opacity: 0;
	/* background-color: antiquewhite; */
	/* overflow: hidden; */
	pointer-events: none;
}


#nudge.show{
	top: 0rem;
	padding: 1rem 2rem;

	height: 1.25rem;
	opacity: 1;
	
	/* background-color: rgb(255, 203, 133); */


}


#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;
}





.message{
	color: var(--color-20);
	font-size: 2.5rem;
	line-height: 2.75rem;
	width: 100%;
	padding: 8rem 0;
}

.message .emoji{
	display: inline-block;
		/* font-size: 4rem; */
	margin-bottom: 2rem;
	transition-property: transform, top, opacity;
	transition-duration: .25s, .5s, .25s;
	transition-timing-function: cubic-bezier(.5,2,.5,1), cubic-bezier(.5,2,.5,1), linear;
	transform: rotate(0deg) scale(1);
	position: relative;
	top:0;
	transform-origin: center center;
	/* background-color: beige; */

}

#results.prepop .message .emoji{
	top: 1rem;
	transform: rotate(45deg) scale(.75);
	transition-duration: .001s;
	opacity: 0;

}



.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{
	text-align: center;
	box-sizing: border-box;
	width: 100%;
	margin: 2rem 0 1rem 0;
	padding:0;
	position: relative;
	z-index: 100;
}

#results .result_holder {
	position: relative;
	display: inline-grid;
	perspective: 1000px;
	cursor: pointer;
}

#results .result_holder:hover {
	z-index: 1000;
	cursor: pointer;
}

#results .result {
	/* Layout */
	display: inline-grid;
	position: relative;
	align-items: center;
	text-align: center;
	gap:0;
	box-sizing: border-box;

	
	/* Size & Spacing */
	width: 11rem;
	height: 11rem;
	margin: 0rem;
	padding: 0;
	top:0;
	
	/* Appearance */
	background: none;
	border: none;
	border-radius: 1.5rem;
	outline: 0;
	z-index: 100;
	
	perspective: 1000px;
	transform-style: preserve-3d;
	cursor: pointer;

}


#results .result .emoji {

	position: relative;

	/* Typography */
	font-family: 'AppleColorEmoji';
	font-size: 8rem;
	line-height: 11.5rem;
	
	/* Transform */
	transform: rotate(0deg);
	/* Transitions */
	transition-delay: 0;
	transition-duration: .5s, .5s, .5s;
	transition-property: opacity, top, transform;
	transition-timing-function: ease-out, cubic-bezier(.5,1.5,.5,1), cubic-bezier(.5,1.5,.5,1);
	
	/* State */
	opacity: 1;
	top: 0;
	text-shadow: none;

}








/* these are duplicated below for devices that support hover */
#results .result.force_hover{
	background-color: var(--color-90);
	z-index: 1000;
} 

#results .result.force_hover .result_instruct, #results .result.force_hover .result_more{
	opacity: 1;
	bottom:.5rem;
}


#results .result.force_hover .holder .emoji{
	top:-2rem;
	transform: scale(1.1) rotate(10deg);
	z-index: 1000;

}






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




#results.prepop .result .emoji{
	position: relative;
    transform: rotate(-45deg);
	opacity: 0;
    top:100px;
	transition-property: opacity, top, transform;
	transition-delay: 0s;
	transition-duration: .1s;
}




#results .result .result_instruct {
	opacity: 0;
	align-items: center;
	text-align: left;
	font-family: 'Graphik';
	font-size: .8rem;
	line-height: 1rem;
	/* border-radius: 1rem; */
	color: var(--color-50);
	display: block;
	position: absolute;
	width: auto;
	height: auto;
	bottom:0rem;
	left:.5rem;
	transition-property: bottom, background, color, transform;
	transition-duration: .25s;
	transition-timing-function: ease;

	transform-origin: center center;
	transform-style: preserve-3d;

	background: none;
	padding: .5rem .75rem;
	border-radius: 1rem;
	z-index: 2000;
	
}


#results .result_instruct.strong{
	font-weight: 600;
	background-color: var(--color-60);
	color: var(--color-30);
	animation: popfly 1.5s forwards;
	
}

@keyframes popfly {
  0% {
	animation-timing-function: ease;
	transform: translateX(0) translateY(0) translateZ(0) rotate(0deg);
	box-shadow: 0px 0px 0px rgba(0,0,0,0);
  }
  25%{
	animation-timing-function: ease;
	transform: translateX(0) translateY(0px) translateZ(30px);
	box-shadow: 0px 15px 15px rgba(0,0,0,.15);
	background-color: var(--color-70);
	color: var(--color-30);


  }
  100% {
	transform: translateX(0) translateY(0) translateZ(0) rotate(0deg);
	box-shadow: 0px 0px 0px rgba(0,0,0,0);
	background-color: var(--color-90);
	color: var(--color-50);



  }
}




#results .result .result_more {
	z-index: 100;
	width: 2rem;
	height: 2rem;
	bottom:1rem;
	right:.5rem;
	background-image: url('/\*/img/info-circle.svg?2');
	background-color: var(--color-85);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 1.3rem 1.3rem;
	opacity: 1;
	position: absolute;
	border-radius: 1rem;
	opacity: 0;
}

#results .result .result_more:hover {
	background-image: url('/\*/img/info-circle_dark.svg?2');
	background-color: var(--color-80);
}


#results .result:hover .emoji{
	z-index: 1000;
	/* transform: scale(1.2); */
}

#results .result .holder{
	position: relative;
	transition-property: top, transform;
	transition-duration: .25s;
	transition-timing-function: ease;
	top: 0;
	transform: scale(1);
	z-index: 1000;
	pointer-events: none;

}




.result .menu{
	position: absolute;
	display: inline-block;
	background-color: var(--color-100);
	color: var(--color-text);
	pointer-events: none;
	opacity: 0;
	z-index: 10000;
	display: grid;
	box-shadow: 0px 1rem 3rem rgba(0,0,0,.15);
	border-radius: .5rem;
	width: 15rem;
	text-align: left;
	overflow: hidden;
	padding: .5rem 0;
}

.menu.below{
	top: 0;
}
.menu.above{
	bottom: 0;
}
.menu.left{
	right: 0;
}
.menu.right{
	left: 0;
}


.result .menu div{
	margin: 0;
	padding: .5rem 1rem;	
}


.result .menu .menu_title{
	font-weight: 600;
	color: var(--gray-60);
}

.result .menu .option:hover{
	color: var(--color-20);
	background-color: var(--color-90);
}


#results .result .menu .option:active{
	transform: scale(1.1) rotate(10deg);
}


.result .menu.show{
	opacity: 1;
	pointer-events: auto;
}

#toast {
  position: fixed;
  bottom: -2rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(9, 91, 101, 0.85);
  color: white;
  padding: 1rem 2rem;
  border-radius: 1rem;
  font-size: 1rem;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition-property:  opacity, bottom; 
  transition-duration: 0.3s;
  transition-timing-function: ease;
  z-index: 9999;
}

#toast.show {
  opacity: 1;
  bottom: 1rem;
  pointer-events: auto;
}

#toast a{
	text-decoration: none;
	color:	var(--color-80);
}


#toast a:hover{
	text-decoration: underline;
	color:	var(--color-70);
}

.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;
	padding: 0 1.5rem;

}


.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: 8rem;  }
.emoji.sizeXXL{	font-size: 10rem; 	line-height: 1.3em; }


	
.item{
	position: relative;
	display: inline-grid;
	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%; */
	display: grid;
	grid-template-rows: 12rem auto;
	gap: 1rem;
	margin: 0 0;
	padding: 1rem;
	
	left: -1rem;
	z-index: 1000;
	background: white;
	border: 1px solid #ccc;
	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; */
}

#results .hover_card{
	grid-template-rows: fit-content(1rem)  fit-content(1rem);
	left: 0rem;
	width: calc(100% - 2rem);
}

.item:hover .hover_card, .result:hover .hover_card {
	position: absolute;
	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;
	
}


#footer{
	flex-shrink: 0;
	display: flex;
	align-items: flex-end;   /* vertical alignment */
	justify-content: flex-start; /* horizontal alignment */
	width: 100%;
	padding: 1rem 0;
	box-sizing: border-box;
	font-size: 1rem;
	font-weight: 500;
	position: relative;
}

.footer_content{
	display: block;
	gap: .5rem;
	grid-auto-flow: column;
	/* grid-auto-columns: max-content; */
	margin: 0;
	padding: 0;
	width: 100%;
}


.footer_content * {
	display: inline-block;
	width: auto;
	margin-right: .5rem;	
}


#tools{
	position: fixed;
	display: block;
	bottom: .5rem;
	right: .5rem;
	pointer-events: initial;
	background-color: var(--color-90);
	padding: .5rem;
	border-radius: calc(1.25rem + 3px);
	width: auto;
	height: auto;
	z-index: 1000;
	line-height: .1;

}

.tool{
	margin: 4px 0 4px 4px;
	padding: 0;
	display: inline-block;
	position: relative;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 2rem;
	/* border: 3px solid var(--color-90); */
	background-color:var(--color-95);
	cursor:pointer;
	box-shadow: inset 0 0 1px 1px rgba(0,0,0,.15);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 1rem 1rem;
	transition-property: transform;
	transition-duration: .2s;
	transition-timing-function: ease;

}

.tool.on{
	/* border: 3px solid var(--color-50); */
	box-shadow:0px 0px 0px 1.5px rgba(255,255,255,1),  0px 0px 0px 4px var(--color-50), 0 5px 3px 0px rgba(0,0,0,.1);
	z-index: 1001;
}

.tool:hover{
	transform: scale(1.33);
}

/* #tools:hover .tooltip{
	opacity: 1;
	pointer-events: auto;
	top:-2rem;
} */



.tooltip {
	position: absolute;
	display: inline-block;
	top: 0;
	opacity: 0;
	pointer-events: none;
	width: auto;
	height: auto;
	white-space: nowrap; /* Prevent line breaks */
	background-color: var(--color-100);
	color: var(--color-30);
	padding: 1.25rem .75rem 1rem .75rem;
	border-radius: 0.5rem;

	transition-property: top, left, opacity;
	transition-duration: 0.25s, .25s, .5s;
	transition-timing-function: ease;
	transition-delay: 0.25s, 0s, .25s;
}

.tooltip.on {
	opacity: 1;
	pointer-events: auto;
	top: -3rem;
}


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

#fitz{
	margin-right:.5rem;
}

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





#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; }
#gender-0{background-image: url('/\*/img/gender-0.svg');}
#gender-m{background-image: url('/\*/img/gender-m.svg');}
#gender-f{background-image: url('/\*/img/gender-f.svg');}


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




#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;
} */



/* 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: .5s;
	/* transition-delay: .05s; */
	transition-property: transform;
	transition-timing-function: ease;

}


.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%;
}






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


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



@media (hover: hover) {
	
	#results .result:hover{
		background-color: var(--color-90);
		z-index: 1000;
	} 
	
	#results .result:hover .result_instruct,  #results .result:hover .result_more{
		opacity: 1;
		bottom:.5rem;
	}
	
	#results .result:active{
		background-color: var(--color-85);
	}
	
	
	#results .result:active .holder{
		transform: translateZ(100px);
	}
	
	#results .result:hover .holder .emoji{
		top:-2rem;
		transform: scale(1.1) rotate(10deg);
		z-index: 1000;
	
	}
	
	#results .result:active .holder .emoji{
		transform: scale(.95) rotate(-10deg);
		z-index: 1000;
	}
	
	/* #results .result:hover{
		background-color: green;
		z-index: 1000;
	}  */
}


@media (max-width : 450px){
}

@media (max-width : 450px){
	
	.cookie_inner{
		grid-template-columns: 1fr 1fr;

	}
	.cookie_inner span{
		width: 100%;	
		grid-column: 1 / span 2
	}

	.cookie_inner button{
		grid-row: 2 / span 1;
	}
	
	
	.page{
		margin: 1rem auto 1rem auto;			
	}
	
	.page.has_banner{
		margin: 1rem auto 6rem auto;
	}

	
	section{
		padding: 0 0rem 1rem 0rem;
	}

	.nav{
		padding-bottom: 0rem;
	}

	.search_large {
		margin-bottom: 1rem;
	}
	

	
	.search_large input {
		font-size: 2rem;
		height: 4rem;
		padding: 1rem 4rem 1rem .75rem;
		border-radius: 1rem;

	}

	.search_large.load input{
	  padding-right: 6rem;
	}
	
	
	.hourglass{
		height: 3.5rem;
		width: 3rem;
		background-size: 2rem;
		right:3.75rem;
	}


	.instructions{
		padding: 0;
	}

	.message{
		font-size: 1.5rem;
		padding: 0rem 1rem 1rem 1rem;
		width: auto;
	}


	#results .result {
		width: 7rem;
		height: auto;
	}
	
	
	
	#results .result .emoji {
		font-size: 5rem;
		line-height: 7rem;
	}
	
	#results .result .result_instruct, 	#results .result .result_more  {
		display: block; 
		width: auto;    /* fill parent grid cell */
		max-width: 100%;
		box-sizing: border-box;
		overflow-wrap: break-word;
		text-align: center;
		padding: 0.5rem 0;
		position: relative;
		left: inherit;
		right: inherit;
		margin: 0 .5rem 0 .5rem;

	}
	
	#results .result .result_instruct{
		margin-bottom: .25rem;
	
	}

	#results .result .holder{
		margin-bottom: -2rem;
	}
	
	.cookie_inner{
		margin: .5rem 1rem;
	}

	.footer_content{
		grid-auto-flow: dense;

	}

}


#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;
}




.emoji-wrapper {
	position: absolute;
	animation: arc-fade 1s ease-in-out forwards;
	pointer-events: none;
	z-index: 101;
	user-select: none;
	-webkit-user-select: none; /* Safari */
	-moz-user-select: none;    /* Firefox */
	-ms-user-select: none;     /* IE10+ */
}

.emoji-burst {
	display: grid;
	align-items: center;
	text-align: center;
	font-size: 5rem;
	line-height: 1.4em;
	display: inline-block;
	width: 5rem;
	height:5rem;
	margin: -2.5rem 0 0 -2.5rem;
	/* background-color: gray; */
	transform: translate(0, 0) rotate(0deg);
	animation: spin-drift 1.75s cubic-bezier(0, .75, 0.45, 1) forwards;
	/* animation: spin-drift 1s linear forwards; */
	overflow: visible;
	user-select: none;
}

/* Wrapper arcs up and fades out */
@keyframes arc-fade {
  0% {
	animation-timing-function: ease-out;
	transform: translateY(0);
	opacity: 1;
  }
  50% {
	animation-timing-function: ease-in;
	transform: translateY(-100px);
	opacity: 1;
  }
  100% {
	transform: translateY(0);
	opacity: 0;
  }
}

/* Emoji itself drifts in both X and Y, and rotates */
@keyframes spin-drift {
  0% {
	transform: translate(0, 0) rotate(0deg);
  }
  100% {
	transform: translate(var(--x), var(--y)) rotate(var(--rot));
  }
}