/* CSS Document */
html, body{ margin:0; padding:0; width:100%; font-family:"Courier New", Courier, monospace; background: linear-gradient(#bbb, #ddd); text-align: center;}
*{ margin:0; padding:0; }
.c_after:after{content:''; display: block; width: 100%; height: 0.002px; clear:both; }




#visu{  position:relative; float:right; z-index:1; max-width:90%; }
#imgs{ position: relative; margin: auto; width:100%;}
#imgs .layer{ position: absolute; top:0; left:0; width:100%}
#imgs .layer:first-child{ position: relative;}
#imgs .layer img{  width:100%}
#imgs img.filler{ width: 100%;}

#tools{ position: absolute; top: 0; left: 0; width: 100%; z-index:2;   }


#types{ position: relative; top: 0; width: 10%; max-width: 60px; float: left;}
#types a{ 
	display: block; background: linear-gradient(#6D00D9, #5900B2); 
	border-bottom: 1px solid rgba(0,0,0,.1);
	border-top: 1px solid rgba(255,255,255,.2);
	cursor: pointer;}
#types a:hover{ background: linear-gradient(#5900B2,#6D00D9); }

#types a img { width:100%; display: block; }
#types a i{ display: none;}
#types a.on{ background: #FFF; }
#types a img.black { display:none; }
#types a.on img { display:none; }
#types a.on img.black { display:block; }



#list {position: relative; z-index:3; max-width:20%; float: left; }
#list #lists{position: relative; overflow: auto; background: #FFF; line-height:0;}
#list .sub{ display:none; line-height: 0;}
#list .sub img{width: 100%; }
#list .sub a {position: relative; display: block; margin:0; padding:0; border-radius: 5px; cursor: pointer; z-index:1; overflow: hidden;}
#list .sub a:hover { box-shadow: 0 0 3px rgba(0,0,0,.4); transform: y-scale(1.1); z-index:2; }
#list u.close{
	position: absolute; top: 10px
	; right: -25px; z-index: -1;
	display: block;
	width: 50px; height: 30px; border-radius: 17px;
	background: #000; border: 2px solid #FFF; text-decoration: none; color: #FFF;font-size: 180%; text-align: right;
	line-height: 110%; font-weight: bold; padding-right: 4px;
	font-family:"Courier New", Courier, monospace; cursor:pointer;
}
#list u.close:hover{background: #C00;}
#list.off u.close{ display: none; }

#actions a{ background: linear-gradient(#222,#333);}
#actions a:hover{ background: linear-gradient(#333,#222);}
#actions .btn.save{ position: fixed; bottom:0; right:0; background: #FF0; border: none; border-radius: 10px 0 0 0;}
#actions .btn.save:hover{ transform: scale(1.1);}


#HKavatar{ max-width: 670px; background:url(images/fond.jpg) no-repeat;background-size: cover; position: relative; display: none;}

/* STEP 1 */
#HKgender{ position: relative; display:table;  width: 300px; margin: auto; font-family: Arial, Helvetica, sans-serif; font-size: 2em; }
#HKgender>div{ display:table-cell; vertical-align:middle; height: 100%; background:url(images/yodimis.png) no-repeat center center;}
#HKgender a{ display: block; text-align: center; border-radius: 5px; padding: 20px; margin: 0 0 10px 0; cursor: pointer; color: #FFF; text-shadow: 1px 1px 1px rgba(0,0,0,.2);
	font-weight: bold; width: 70%;}
#HKgender a.g{ float: left; background: #179ED8; margin-top: 200px; } #HKgender a.g:hover{ background: #1386B7;  }
#HKgender a.f{ float: right; background: #E95493;  } #HKgender a.f:hover{ background: #E4307C; }

#silentloader{ position: fixed; width:1px; height: 1px; top:0; left:0; overflow:hidden; z-index:-1;}