/*------------------------------------------------------------------*/


.gen__body{
    width: 100%;
    height: 100%;
    position: relative;
    float: left;    
    margin: 0px 0 50px 0 ;
} 


.gen__title{
    width: 100%;
    height: 50px;
    position: relative;
    float: left;
    }

.gen__title h1{
    font-size: 24pt;
    font-family: roboto;
    text-align: center;
    color: #9b3620;
    line-height: 50px;
    margin: 0 0 0 0;
    font-weight: 700;
   }

.gen__short-description{
    width: 100%;
    position: relative;
    float: left;
    
    font-family: roboto;
    text-align: left;
    font-size: 10pt;
	
	margin: 0 0 20px 0;
    padding-bottom: 20px;
    border-bottom: 2px solid #ffcc00;
}

.gen__settings-horisontal{
    width: 100%;
    position: relative;
    float: left;
    margin: 20px 0 50px 0;
    background: #eee;
}

.gen__settings-horisontal .title{
    width: 20%;
    float: left;
    
    
    font-size: 18pt;
    font-family: roboto;
    text-align: center;
    color: #414141;
    line-height: 70px;
    margin: 0 0 0 0;
    font-weight: 400;
}

.gen__settings-horisontal .setting{
    width: 18%;
    float: left;
    margin: 10px 0 0 10px;
}
.gen__settings-horisontal .sumbols{
    width: 20%;
}

.gen__settings-vert{
    width: 25%;
    height: 100%;
    position: relative;
    float: left;
	padding: 1%;
    margin: 0px 0 50px 0;
    background: #eee;
}

.gen__settings-vert .title{
    width: 100%;
    float: left;
    position: relative;
    
    font-size: 22pt;
    font-family: roboto;
    text-align: center;
    color: #414141;
    line-height: 50px;
    margin: 0 0 0 0;
    font-weight: 100;
}

.gen__settings-vert .setting{
    float: left;
    margin: 0px 0 10px 1%;
}
.gen__settings-vert .setting label.whiteLabel{
    font-size: 9pt;
	    top: 0.4rem;
}

.gen__settings-vert .setting label.whiteLabel2{
    font-size: 9pt;
	        top: -1.5rem;
}


.gen__settings-vert input.whiteInput{

    background-color: #fff!important;
    font-size: 1rem!important;
    margin: 0 0 15px 0!important;
    padding: 0 0 0 10px!important;
    box-shadow: none;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    transition: all .3s;
}

.st4  input.select-dropdown {
    position: relative;
    cursor: pointer;
	background-color: #fff!important;
    border: none;
    border-bottom: 1px solid #9e9e9e;
    outline: none;
    height: 3rem;
    line-height: 3rem;
    width: 100%;
    font-size: 1rem;
    margin: 0 0 15px 0;
    padding: 0 0 0 10px!important;
    display: block;
}



.gen__settings-vert .setting.st1,
.gen__settings-vert .setting.st2{
    width: 48%;
	padding: 0 5% 0px 0; 
}

.st1 label.active, .st2 label.active{
	    font-size: 0.7rem!important;
}	
.st5 [type="checkbox"]+label{
	font-size: 0.8rem;
}


.gen__settings-vert .setting.sumbols{
    width: 92%;
    margin: -20px 0% 0 1%;
}
.gen__settings-vert .setting.st4{
    width: 92%; 
}
.gen__settings-vert .setting.singleRadio{
    margin: 0 0 0 7%;
}

.settings-block{
	width: 100%;
    float: left;
    position: relative;
}

.gen__settings-vert .subtitle{
    width: 100%;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #818181;
	position: relative;
    float: left;
}

.gen__settings-vert label.active{
    -webkit-transform: translateY(-80%);
    -moz-transform: translateY(-80%);
    -ms-transform: translateY(-80%);
    -o-transform: translateY(-80%);
    transform: translateY(-80%);
    
}

.gen__settings-horisontal-divider{
	float: left;
	position: relative;
	width: 1px;
	height: 100%;
	margin: 0 10px 0 10px;
}


/*---------------------------------------*/

.middle-block{
    width: 100%;
    
    /*background: red;*/
    float: left;
    position: relative;
    margin: 20px 0 0 0;
}

.history{
    width: 25%;
    height: 100%;
    position: relative;
    float: left;
    background: #eee;
    overflow: hidden;
  
}

.history .title{
    width: 100%;
    float: left;
    position: relative;
    
    font-size: 22pt;
    font-family: roboto;
    text-align: center;
    color: #414141;
    line-height: 50px;
    margin: 0 0 0 0;
    font-weight: 100;
}

.history-results{
    width: 92%;
    height: 90%;
	min-height: 350px;
	max-height: 350px;
    position: relative;
    margin: 15px 0 0 5%;
    overflow-x: auto;
	font-size: 10pt;
}

.history-container{
    position: relative;
    width: 100%;
    height: 87.5%;
    overflow: hidden;
}

.history-res{ /* <div class="history-res"> */
	margin: 5px 0 5px 0;
	border-bottom: 1px solid black;
}


.history-results::-webkit-scrollbar{
    width:12px;
    border-radius: 5px;
    -webkit-transition: 1.4s;
		-moz-transition: 1.4s;
		-o-transition: 1.4s;
		-ms-transition: 1.4s;
		transition: 1.4s; 
}

.history-results::-webkit-scrollbar-thumb{
    border-width:1px 1px 1px 2px;
    border-color: #777;
    background-color: #aaa;
    border-radius: 5px;
    
    -webkit-transition: 1.4s;
		-moz-transition: 1.4s;
		-o-transition: 1.4s;
		-ms-transition: 1.4s;
		transition: 1.4s; 
}

.history-results::-webkit-scrollbar-thumb:hover{
    border-width: 1px 1px 1px 2px;
    border-color: #555;
    background-color: #2eb080;
    border-radius: 5px;
    
    	
	
}

.history-results::-webkit-scrollbar-track{
    border-width:0;
    border-radius: 5px;
    
    -webkit-transition: 1.4s;
		-moz-transition: 1.4s;
		-o-transition: 1.4s;
		-ms-transition: 1.4s;
		transition: 1.4s; 
}

.history-results::-webkit-scrollbar-track:hover{
    border-left: solid 1px #aaa;
    background-color: #eee;
    border-radius: 5px;

}



.advertisment{
    width: 100%;
    height: auto;
    position: relative;
    float: left;
    margin: 10px 0 0 0;
    /*background: #eee;*/
    -webkit-user-select: none;
    -moz-user-select: none;

}

.advertisment .block{
    width: 300px;
    height: auto;
    /*background: #a3a3a3;*/
    text-align: center;
	margin: 0 auto;
    font-size: 22pt;
    font-family: roboto;
    text-align: center;
    color: #414141;
    -webkit-user-select: none;
    -moz-user-select: none;
}

/*-------------------------------------------------------------------*/

.social-share .icon{
    width: 40px;
    height:  40px;
    position: relative;
    float: left;
    background: #e1e1e1;
    margin: 0 0 0 5px;
    cursor: pointer;
}

.social-share .icon.vk{background: url(../images/icons/vk.png) #6996c7;}
.social-share .icon.tw{background: url(../images/icons/tw.png) #28c3ff;}
.social-share .icon.fb{background: url(../images/icons/fb.png) #496194;}
.social-share .icon.ok{background: url(../images/icons/ok.png) #ff9c43;}

.buttons-share{
    width: 100%;
    height: 30px;
    position: relative;
    float: left;
	margin: 30px 0 0 0;
	text-align: center;
}

.buttons-share a{
    color: #414141;
    font-size: 10pt;
    position: relative;
	 display: inline-block;
    margin: 0px 0 0 0;
	cursor:  default;
}

.shairing-block-AfterGenerate a:hover{
	color:#f29120;
	cursor: pointer;
}

.buttons-share i{
    width: 18px;
    height: 18px;
    position: relative;
    float: left;
    margin: 0px 5px 0 5px;
    background: black;
	
}

#real-copy, #fake-copy{display:none;}

.buttons-share i.copy{
    width: 20px;
    height: 20px;
    background: url(../images/icons/save.svg);
	}

.buttons-share i.mail{
    width: 20px;
    height: 20px;
    background: url(../images/icons/email.svg);
}

.buttons-share i.link{
    width: 20px;
    height: 20px;
    background: url(../images/icons/link.svg);
}
.buttons-share i.save{
    width: 20px;
    height: 20px;
    background: url(../images/icons/download.svg);
}

#mail{margin: 0 0 0 7%;}

/*-------------------- /generate button -------------------------*/


.result-block{
    width: 50%;
    height: 100%;
    float:left;
    position: relative;
    margin: 0px 0 30px 0;
  /*background: #d458d0;*/

}

.result {
	position: relative;
	float: left;
	min-height: 400px;
    width: 100%;
    height: 80%;
    text-align: center;
    font-size: 45pt;
    font-family: roboto;
    text-align: center;
    overflow: hidden;
    color: #414141;
    margin: 0 0 10px 0;
    font-weight: 400;
}

.result span.res{
  width: 100%;
  height: 100%;
  overflow: auto;
  margin: auto;
  float: left;
  position: relative;
  top: 0px;
  left: 0; bottom: 0; right: 0;
  overflow: hidden;
  padding: 0 10% 30px 10%;
}





.twor{
	text-align: center;
    font-size: 60pt;
    font-family: roboto;
    line-height: 65pt;
    color: #414141;
    margin: 0 0 10px 0;
    font-weight: 400;
}


.threer{
	font-size: 45pt;
	line-height: 50pt;
}

.fourr{
	font-size: 30pt;
	line-height: 35pt;
}

.vertical-res{
 height: 100%!important;
 position: relative!important;
 float: left!important;

}




/*------------------------------------------------------------*/

.gen__button-block{
    width: 100%;
    position: relative;
    float: left;
    -webkit-user-select: none;
    -moz-user-select: none;
}

.gen__button{
    width: 305px;
    height: 50px;
    padding: 2px 0 0 2px;
    background: url(../images/button.svg) #fcd740 2px;
    position: relative;
    float: left;
    margin: 20px 0 5px 34.5%;
    border-radius: 10px;
    cursor: pointer;
    
    font-family: 'tt_roundsblack';
    color: #623315;
    font-size: 18pt;
    
   
    
    -webkit-user-select: none;
    -moz-user-select: none;

}

.bnt-text{
    width: 100%;
    line-height: 45px;
    border-radius: 5px;
    position: absolute;
    font-family: 'tt_roundsblack';
    color: #623315;
    font-size: 15pt;
    text-align: center;
    font-smooth: auto;
    
    -webkit-user-select: none;
    -moz-user-select: none;
    
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}

/*-------------------------------------------------*/

.pop-up{
	width: 480px;
	height: 310px;
	background: #fff;
	position: fixed;
	left: 30%;
	top: -1200px;
	z-index: 1;
	border: 5px #ffcc00 solid;
	
}

.pop-up-tog{
  margin: auto;
  position: fixed;
  top: 0px; left: 0px; bottom: 0; right: 0;

}

.pop-up__text{
	width: 80%;
	margin: 40px 10% 0 10%;
	font-family: roboto;
    font-weight: 300;
    font-size: 18pt;
	color: #414141;	
}

.share-result, .share-mail{
	width: 80%;
	height: 50px;
	padding: 10px 20px 10px 20px;
	margin: 20px 10% 20px 10%;
	background: #eee;
	
}
.share-copy{
	width: 80%;
	height: 100px;
	max-height: 100px;
	padding: 10px 20px 10px 20px;
	margin: 20px 10% 20px 10%;
	background: #eee;
}



.pop-up__close{
	width: 16px;
	height: 16px;
	margin: 10px 10px 0 0;
	background: url(../images/icons/del.png) no-repeat;
	cursor: pointer;
	float: right;
}

.copy_link{
	cursor: pointer;
	}

#sendMail{

}
	


/*-------------------------------------------*/

.color-gen__reuslt{
	width: 200px;
	height: 200px;
	float: left;
	position: relative;
	margin: 0 0 0 29%;
}

.color-res-text{
	width: 100%;
	position: relative;
	float: left;
}

.color_id{
	width: 100%;
	text-align: center;
	position: relative;
	float: left;
}

/*-----------------------------*/

.sharing{
	float: left;
	position: relative;
	margin: 0 0 0 27%;
	}



/*------------------------------*/

.divider-line{
	width: 100%;
	height: 2px;
	background: #ffcc00;
	position: relative;
	float: left;
	margin: 20px 0 20px 0;
}

.posy-back{
	width: 350px;
	height: 324px;
	position: relative;
	float: left;
	background: url(../images/pos-back.png);
	    margin: 0 0 0 34%;
}

.posy-img{
	width: 50%;
	position: relative;
	display: inline-block;
	background-size: 50%;
}

.posy-title{
	width: 100%;
	height: 30px;
	position: relative;
	float: left;

	
	text-align: center;
    font-size: 24pt;
    font-family: roboto;
    line-height: 30px;
    color: #414141;
    margin: 0 0 10px 0;
    font-weight: 600;
}
.posy-descr{
	width: 100%;
	position: relative;
	float: left;
}


/* ----------------------- QR -------------------*/
.qr-st{
	background:#fff;
	margin: 20px 0 20px 0;
	text-align:center;
}
.qr-img{
	width: 100%;
	float: left;
	position: relative;
	text-align: center;
}
.qr-img img{
	display: inline-block;
	padding: 20px;
	}
	
#saveLink{

}
	
.qr-img-default img{
	opacity:0.5;
	margin: 0 0 0 38%;
	}

.selectType{
    width: 20%;
    position: relative;
    display: inline-block;
}
.selectSize{
    width: 56%;
    position: relative;
    display: inline-block;
    margin: 0 0 0 5%;
}

.qr-forms{
	background: #eee;
	float: left;
    position: relative;
    width: 100%;
	padding: 10px;
}

.qr-forms .input-field label {
    top: 0px!important;}
	
	
.qr-forms .input-field label.active {
    font-size: 12pt!important;}

	
.qr-forms .sms-r label.text {
    top: 10px!important;}
	
	

/*--------------------- countries -----------------*/

.gen__settings-single{
	width: 100%;
	height: 50px;
	position: relative;
	float: left;
	background: red;
}


.choose-conitnent{
	float: left;
	position: relative;
	margin: 10px 0 50px 0;
}

/*-------------------------------------------------*/

	#result  p{
	margin: 25px 0 0 0;
    position: relative;
    display: inline-block;
	font-size: 20pt;
	
	}


/*-------------------------------------------------*/

.result-block-for-ResPage {
    width: 100%;
    height: 100%;
    position: relative;
	margin: 100px 0 90px 0;
	text-align:center;
}
.result-block-for-ResPage div{
	display: inline-block;
	float: none;
	margin: 0;
}

.result-block-for-ResPage .anecdot_res{
	width: 100%;
	font-size: 12pt;
}
.result-block-for-ResPage .like{display:none}
.result-block-for-ResPage  .answer_select{width:600px;display:inline-block;}
.result-block-for-ResPage  .q_answer{cursor:pointer;width:50%;float:left;font-size:18pt;font-weight:300;}
.result-block-for-ResPage  .correct_answer{color:green;font-weight:800;}
.result-block-for-ResPage  .question{width:100%;text-align:center;font-size:18pt;font-weight:300;}

.shairing-block{
width: 100%;
	position: relative;
	margin: 0px 0 50px 0;
	display: none;
	text-align: center;
	height: auto;
	float: left;
}

.shairing-block-AfterGenerate{
	display: block;
}
/*----------------------------------------------------*/

.normalText{font-size: 45pt;}
.normalText1{font-size: 40pt;}
.normalText2{font-size: 35pt;}
.normalText3{font-size: 30pt;}
.normalText4{font-size: 28pt;}
.normalText5{font-size: 24pt;}
.normalText6{font-size: 20pt;}
.normalText7{font-size: 18pt;}

.normalText8{font-size: 8pt;}


/*---------------------------------------------------*/


input.whiteInput, textarea.whiteInput {
	width: 98%!important;
    background-color: #fff!important;
    font-size: 1rem!important;
    margin: 0 0 15px 0!important;
    padding: 0 0 0 10px!important;
    box-shadow: none;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;

}


/*--------------- штрих-код -------------------*/

.barcodeData{
	width: 100%;
	height: 80px;
	position: relative;
	float: left;
}

#barcodeDescription {
    width: 100%;
    text-align: center;
    font-size: 22pt;
    color: #414141;
    margin: -80px 0 0 0;
}

.exmp-code{
	width: 100%;
    position: relative;
    float: left;
    opacity: 0.5;
    margin: -200px 0 0 0;
    text-align: center;
}

.testcode{
	width: 250px;
	height: 100px;
	background: url(../generator/barcode.bmp);

	position: relative;
	display: inline-block;
	margin: 0 0 0 -20px;
}
.testcode-descr{
    width: 100%;
    text-align: center;
    font-size: 22pt;
    color: #414141;
    margin: 0px 0 0 0;

}

.qst {
    font-size: 80pt!important;
    margin: 60px 0 0 -20px;
    position: absolute;
}


/*---------------- кличка животногу -----------------*/

.choseAnimal{
	width: 100%;
	height: 50px;
	position: relative;
	float: left;
	text-align: center;

}

.chosesex{
	width: 100%;
	height: 50px;
	position: relative;
	float: left;
	text-align: center;
}
/*------------ монетка -------------------*/

		.statistic{		 
		font-size: 18pt;
		font-family: roboto;
		text-align: center;
		color: #414141;		
		}


        .goup{
        animation: up 2s;
        position: absolute;
            margin: 250px 0 0 0;
        }
        
             
        @keyframes up { 
             0%  { margin: 250px 0 0 0;} 
            50%  { margin: 15px 0 0 0;} 
            100% {margin: 250px 0 0 0;}
        }
        
		.coin {
        width: 75px;
        height: 75px;
        background: url(../images/coin0.png); 
        position: relative;
		display: inline-block;		
    }
		
        .coin-up{
        background: url(../images/coin3.png); 
        animation: play 1s ease-in;
        animation-timing-function: steps(20, end);
        animation-iteration-count: 1;      
		animation-fill-mode: forwards;
        }
        
                
        .coin-down{
        background: url(../images/coin4.png); 
        animation: play 1s ease-in;
        animation-timing-function: steps(20, end);
        animation-iteration-count: 1;     
		animation-fill-mode: forwards;
        }
        
        .anim1-2{
        background-position: -1425px 0;
        }
        
        @keyframes play { 
             0%  { background-position:    0px 0;} 
            100%  { background-position: -1500px 0;}
        }

		.up-text{color:red;}
		.down-text{color:blue;}	

		
		.progress-block{
			width: 100%;
			position: relative;
			float: left;
			margin: 20px 0 0 0%;
			
			font-size: 20pt;

		}

		.coin-percent-up{
			float: left; 
			font-family: roboto;
			font-weight: 400;
			color: #414141;
			font-size: 10pt;
		}

		.coin-percent-down{
			float: right;  
				font-family: roboto;
			font-weight: 400;
			color: #414141;
			font-size: 10pt;
		}

	.progress-block .progress {
    height: 15px;   
	background: #e82a2c;
	border-radius: 10px;
	}

	.progress-block .progress .determinate{
	background: #3774f2;
	}

	/*------------------------ ball-8 ------------------------*/
	
.ball {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  position: relative;
  background: url(../images/ball.png);
  background-size: cover;
}

.ball .shadow {
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
-webkit-transform: rotateX(90deg) translateZ(-150px);
-moz-transform: rotateX(90deg) translateZ(-150px);
-ms-transform: rotateX(90deg) translateZ(-150px);
-o-transform: rotateX(90deg) translateZ(-150px);
transform: rotateX(90deg) translateZ(-170px) translateX(-150px);
z-index: -1;
}

.stage {
  width: 300px;
  height: 300px;
  position: relative;
  float: left;
  margin: 80px 0 50px 0;
  -webkit-perspective: 1200px;
  -moz-perspective: 1200px;
  -ms-perspective: 1200px;
  -o-perspective: 1200px;
  perspective: 1200px;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective-origin: 50% 50%;
  -ms-perspective-origin: 50% 50%;
  -o-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}

.ball #eight {
  width: 150px;
  height: 150px;
  margin: 50%;
  background: white;
  border-radius: 50%;
  -webkit-transform: translateX(-220px) translateY(-80px);
  position: absolute;
}
.ball #eight:before {
  content: "8";
  display: block;
  position: absolute;
  text-align: center;
  height: 130px;
  width: 130px;
  left: 50px;
  margin-left: -40px;
  top: 65px;
  margin-top: -40px;
  color: black;
  font-family: Arial;
  font-size: 90px;
  line-height: 104px;
}

.ball-resoult{
    width: 150px;
    height: 150px;
    margin: 50%;
    border-radius: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    position: absolute;
    background: black;
    overflow: hidden;
    
}



        @keyframes rot-smoke { 
             0%  {transform: rotate(0deg);}             
            50% {transform: rotate(360deg);}  
            100%  {transform: rotate(360deg);}
        }



.ball-resoult .smoke {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: url(../images/ball-hole2.png);
    background-size: cover;
    animation: rot-smoke 60s infinite linear;
    overflow: hidden;

}
#answer{
    display:none;
}

.ball-resoult #answer{
    width: 150px;
    height: 150px;
    background: url(../images/farm3.png);
    background-size: cover;
    position: absolute;
    padding: 40px 0 0 0;
    margin: -150px 0 0 0px;
    display:block;
    
    text-align: center;
    line-height: 18px;
    transform: scale(0);
    font-size: 12pt;
    
}
.ball-resoult .a-animation{
    animation: answer ease 0.5s;
    animation-fill-mode: forwards;
    
    color: #414141;
    font-weight: 400;
    text-align: center;
}

.dasdas{
    transform: scale(1)!important;
	    font-weight: 400;
}



     @keyframes answer { 
            0%  {transform: scale(0);}                       
            100%  {transform: scale(1);}
        }



.ball-shake{
    animation: shake-ball 1s ease-out;
    animation-iteration-count: 1;
}

 @keyframes shake-ball {
            0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
            10% { -webkit-transform: translate(-1px, -2px) rotate(-8deg); }
            20% { -webkit-transform: translate(-3px, 0px) rotate(8deg); }
            30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
            40% { -webkit-transform: translate(1px, -1px) rotate(8deg); }
            50% { -webkit-transform: translate(-1px, 2px) rotate(-8deg); }
            60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
            70% { -webkit-transform: translate(2px, 1px) rotate(-8deg); }
            80% { -webkit-transform: translate(-1px, -1px) rotate(8deg); }
            100% { -webkit-transform: translate(1px, -2px) rotate(0deg); }
        }


.contrrr{
    width: 300px;
    display: inline-block;

}

.ballp20{padding:10px 20px 0 20px!important;}
.ballp30{padding:10px 30px 0 30px!important;}

/*-----------------------------------------*/


.roulette{
    width: 516px;
    height: 516px;
    position: relative;
    overflow: hidden;
	    display: inline-block;
}

.res-yu{
    width: 3px;
    height: 250px;
    position: absolute;
	margin: 250px 250px 250px 255px;
    z-index: 1;
    background: #ffcc00;

}

.roll{
    width: 516px;
    height: 516px;
    background: url(../images/rul.svg);
    background-size: contain;
   -webkit-transition: cubic-bezier(0,0,0.58,1) 3s;
      -moz-transition: cubic-bezier(0,0,0.58,1) 3s;
        -o-transition: cubic-bezier(0,0,0.58,1) 3s;
           transition: cubic-bezier(0,0,0.58,1) 3s;
}
.roulette-resoult{
	display: inline-block;
	height: 60px;
	font-size: 60pt;
	line-height:60px;
	font-family: roboto;
    font-weight: 800;
}

/*-----------------------------------------------*/

.anecdot{
	text-align: center;
}

.anecdot .result-block {
    width: 80%;
    display: inline-block;
    float: none;
	font-weight: 400;
}

.anecdot .result-block pre{
	width: 100%;
	    word-break: break-word;
}

/*-------------------------------------------*/

.like_container{
	width: 100%;
	position: relative;
	text-align: center;
	float: left;
}

.like{
    width: 150px;
    height: 45px;
    border-radius: 5px;
    border: 1px #bfbfbf solid;   
    overflow: hidden;
    text-align: center;
    line-height: 45px;
    cursor: pointer;
	display: inline-block;
	
	margin: 10px 0 0 0;
}


.like.liked{
    border: 1px #ffac33 solid;
}



.like .heart {
    width: 70px;
    height: 50px;
   

    display: inline-block;
    margin: 0px 0 0 0;
    background: url(../images/gen-like.png) no-repeat 0px 0; 
}

.like .liked {
  background-position: -3519px 0!important;
  transition: background 1.5s steps(55)!important;
}


/*--------------------------------------------*/

.country-title{
	font-size: 30pt;
	font-weight: 800;

}

.country-description{
	text-align: left;
	width: 80%;
	font-size: 12pt;
	font-weight: 400;
	margin: 0 10% 0 10%;
	
}
/*------------------------------------------*/

.city{
	text-align: center;
}
.city .result-block{
	width: 100%;
	display: inline-block;
		font-weight:400;
}

/*-----------------------------------*/
.quote-main{
	text-align: center;
}
.quote-main .result-block{
	width: 100%;
	display: inline-block;
}

.quote-main .shairing-block{
	margin: 70px 0 0 0;
}

.quote-main #result {
		display: inline-block;
}

.quote{
width: 100%;
float: left;
position: relative;
	text-align: left;
	width: 80%;
	font-size: 14pt;
	font-weight: 400;
	margin: 0 10% 0 10%;
	font-family: roboto;
}

.quote:before{
	content: '"';
    font-size: 105pt;
    font-weight: 800;
    position: absolute;
    color: #414141;
    opacity: 0.1;
    margin: -50px 0 0 -60px;
}

.quote:after{
	content: '"';
    font-size: 105pt;
    font-weight: 800;
    position: absolute;
    color: #414141;
    opacity: 0.1;
    margin: -50px 0 0 10px;
}

.quote-author{
	width: 100%;
	height: 50px;
	text-align: right;
	font-size: 22pt;
	font-weight: 800;
	float: left;
	position: relative;
	margin: 0px 0 0 0;
	}

.no-result{
	font-size: 120pt;
	font-weight: 400;
}

/*----------------------------*/

.card-count{
	width:25%;
	display: inline-block;
	text-align:center;
}
/*------------- lot -----------------*/

.add_player{
	 width: 305px;
    height: 50px;
    padding: 2px 0 0 2px;
    position: relative;
    float: left;
    margin: 20px 0 5px 0%;
    border-radius: 10px;
    cursor: pointer;
    
    font-family: 'tt_roundsblack';
    color: #414141;
    font-size: 18pt;

}

/*-------------- bones --------------*/


.bones .alert{
	font-size: 16pt;
    font-family: roboto;
    text-align: center;
    color: #9b3620;
    line-height: 50px;

}

/*--------------- КАМЕНЬ НОЖНИЦЫ БУМАГА ЯЩЕРИЦА СПОК -------------------*/

   .gamefield{
            width: 100%;
            max-width: 600px;
            height: auto;
            border-radius: 50%;
            position: relative;
            display: inline-block;
            text-align: center;
    
        }
        .player{
            width: 300px;
            height: 100px;      
            position: absolute;        
            border: 3px solid #ffcc00;
            display: none;
        }
        
        .mode{
            display: inline-block;
        }
        .gamefield .input-field{
        margin: 20px;
        }

        .gamefield .you{
        bottom: 120px;
        left: 150px;
        text-align: center;
        }
        .game-res{
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: #edeaea;
            z-index: 1;
        }
        
        .winner-cir{
            border: 1px solid #3be25f;
            background: #3be25f;
        }
        .loser-cir{
            border: 1px solid #ea6565;
            background: #ea6565;
        }
        
        .game-res img{
			/*animation: imgcome 1s;*/
			margin: 15px 0 0 0;
            max-width: 70%;            
        }
		 /*     
        @keyframes imgcome { 
            0% {transform: scale(0,5);}
            100% {transform: scale(1);}
            
        }*/
        
		
		
        /*------------------------*/
        .one .game-res{
            bottom: -70px;
            right: -70px;
        }
        .two .game-res{
        bottom: -70px;
        left: -70px;
         }
        .three .game-res{
        top: -70px;
        left: -70px;
        }
        .four .game-res{
        top: -70px;
        right: -70px;
         }
        .you .game-res{
        position: absolute;
        top: -100px;
        left: 100px;
         }
		/*-----------------------*/
        .field2 .one{
			margin: 40px 0 0 150px;
			display: block;
            
        }

		.field2  .one .game-res {
		bottom: -70px;
		right: 95px;
	}
		
		
        .field2 .you{
             display: block;
        }
		 
		 
        /*-----------------------*/
        .field3 .one{
              margin: 70px 0 0 -100px;
              display: block;
            
        }
        .field3 .two{
              margin: 70px 0 0 400px;
              display: block;            
        }
        .field3 .you{
             display: block;
        }
        /*-----------------------*/
        .field4 .one{
              margin: 170px 0 0 -150px;
              display: block;            
        }
        
        .field4 .two{
              margin: 40px 0 0 320px;
              display: block;            
        }
        .field4 .three{
              margin: 310px 0 0 460px;
              display: block;            
        }
        .field4 .you{
             display: block;
        }
        /*-----------------------*/
        .field5 .you{
             display: block;
        }
        
        .field5 .one{
             margin: 70px 0 0 -100px;
             display: block;
        }
        .field5 .two{
             margin: 70px 0 0 400px;
             display: block;
        }
        .field5 .three{
             margin: 340px 0 0 450px;
             display: block;
        }
        .field5 .four{
             margin: 340px 0 0 -150px;
             display: block;
        }
        /*-----------------------*/
        .smcr{
            display: inline-block;
            width: 300px;
            height: 300px;
            background: rgba(85, 96, 230, 0.18);
            margin: 150px;
            border-radius: 50%;        
            opacity: 1;
            z-index: 0;
            position: relative;
            text-align: center;
        }
        
        
        .winner{
            width: 150px;
            height: 150px;
            background: #fff;
            border-radius: 50%;
            display: inline-block;
            margin: 75px 0 0 0;
            background: #fff;
            text-align: center;
           
            transform: rotate(0deg);
           -webkit-transition: all 1.5s;
              -moz-transition: all 1.5s;
                -o-transition: all 1.5s;
                   transition: all 1.5s;
        }
        
        #winnerName {
            font-size: 18pt;
            font-family: roboto;
            font-weight: 300;
            color: #414141;
            z-index: 1;
            width: 50%;
            margin: auto;
            position: absolute;
            top: 50%; left: 50%;
            -webkit-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
                transform: translate(-50%,-50%);
            
        }
        .playersCount{
            width: 100%;
            display: inline-block;
        }
        
        .yourVote {
            width: 100%;
            height: auto;
            background: #eee;
            position: relative;
            float: left;
            text-align: center;
          
        }
        
        .yourVote .chosse{
        width: 16%;
        height: 100%;
        text-align: center;
        position: relative;
        display: inline-block;        
        }
        
        .yourVote .icon{
            width: 75px;
            height: 75px;
            display: inline-block;
        }
        .yourVote .icon img{
            max-width: 100%;
            height: auto;
              cursor: pointer;
        }
        .button-r{
            width: 100%;
            height: auto;
            text-align: center;
            position: relative;
            float: left;
        }
        .button-r input{
            width: 250px;
            height: 50px;
            background: #ffcc00;
            margin: 20px;
            border: none;
        }
        .oo-players{
            text-align: center;
            width: 100%;
        }
        .oo-mode{
            text-align: center;
            width: 100%;
        }
        .dsp-none{display: none!important;}
		.dsp-b{display: block!important;}
		
        .red{background: red;}
		
		 #asdasd{
            width: 100px;
            float: left;
            background: green;
            color: #fff;
            padding: 20px;
             font-family: roboto;
            position: relative;
        }
	    .smalll{
			font-size: 10pt;
		}
        .win{background:#38b727;}
        .lose{background:#f24015;}
        .drew{background:#ffcc00;}

	/*----------------------------------------*/
	
		.phrase .settings{
		width: 100%;
		height: auto;
		background: #eee;
		position: relative;
		float: left;

	}
	.phrase .settings input[type="text"]{
		width: 100%;
		float: left;	
	}      
	.phrase .settings textarea {
		width: 20%;
		margin: 2.5%;
		height: auto;
		padding: 10px 2%;
		position: relative;
		background: #fff;
		float: left;
		resize: none;
		white-space: nowrap;
	}

	.phrase #result{
		width: 100%;
		background: #eee;
		height: auto;
		position: relative;
		margin: 10px 0 0 0;
		padding: 10px;
	}

	.phrase #plus{
		width: 50px;
		height: 30px;	
		background: red;
		float: left;
		position: relative;
		border-radius: 0 10px 10px 0;
		background: #47b13e;
	}
	.phrase #minus{
		width: 50px;
		height: 30px;	
		background: blue;
		float: left;
		position: relative;
		border-radius: 10px 0 0 10px;
		background: #db4040;
	}
	.phrase #tx_count{float: left;}
	.phrase .main_s{
		width: 100%;
		height: auto;
		position: relative;
		float: left;
		background: #eee;
	}
	.phrase .count_links{
		width: 15%;
		height: auto;	
		text-align: left;
		float: left;
		position: relative;
		margin: 25px 0 0 20px;
	}
	.phrase .count_links span{
		width: 100%;
		height: auto;
		float: left;
		position: relative;		
	}
	.phrase .link{
		width: 45%;
		float: left;
		position: relative;
		margin: 25px 0 0 30px;
	}
	.phrase .txta_count #tx_count{
		width: 50px;
		height: 30px;
		position: relative;
		float: left;	
		text-align: center;
		line-height: 30px;		
	}
	.phrase .txta_count .name{
		color:#9e9e9e;
		font-size: 0.8rem;
		margin: -5px 0 10px 0;
	}
	.phrase .txta_count{
		width: 17%;
		position: relative;
		float: left;
		margin: 18px 0 0 20px;
	}
	
   .phrase .cancel{
		width: 13%;
		height: 50px;
		cursor: pointer;
		position: relative;
		float: left;
		background: url(../images/del.png) no-repeat 50px 20px;
		margin: 35px 0 0 15px;
		font-size: 10pt;
		font-weight: 500;
	}
	.phrase .cancel span{
		width: 150px;
		position: absolute;
		margin: 60px 0 0 -35px;
		display: none;
	}

	/*-------------------------*/
	
	.nicknames_body .lang_sel,
	.nicknames_body .let_nick,
	.nicknames_body .let_count,
	.nicknames_body .nick_count{
	width: 19%;
	float: left;
	margin: 0 0.5% 0 0.5%;
	}
/*--------------------------------------------------------
    # RolePlay Nick
  -------------------------------------------------------*/
        .rp_nick{
            width: 100%;
            height: 550px;
            position: relative;
            float: left;
			background: url(http://img09.deviantart.net/6589/i/2013/025/4/5/a_journey_begun_by_denmanrooke-d5j55qz.jpg);
			background-position: 50px -49px;
			background-size: cover;
			
			border-radius: 15px;
			overflow:hidden;
        }
        
        .rp_nick .settings{
            width: auto;
            height: 100%;
            float: left;
            position: relative;
        }
/*--------------------------------------------------------
    # RolePlay Nick - Game Select
  -------------------------------------------------------*/
        .rp_nick .game_select{
            width: 100px;
			height: 100%;
			background: #eee;
            float: left;
            position: relative;
			margin-top: 0px!important;
            
        }
        .rp_nick .game{
            width: 100px;
            height: 104px;
            float: left;
            position: relative;
            background: #eee;
            cursor: pointer;
        }
		 .rp_nick .game label{
		 padding-left: 0px!important;
		 position: absolute!important;
		 margin: 10px 0 0 10px;
		 z-index:0;
		 }
		
        .rp_nick .game:hover, .rp_nick .game_active{background: #cecece;}
        .rp_nick .game .icon{
            width: 100px;
            height: 100px;
            position: absolute;
            background: url(../images/rpnick_icons_main.png) no-repeat;
            background-position: 0px 0px;
			margin: -20px 0 0 -20px;
			z-index:1;
        }
        .rp_nick .game:nth-child(2) .icon{background-position: 0px -200px;}
        .rp_nick .game:nth-child(4) .icon{background-position: 0px -300px;}
        .rp_nick .game:nth-child(3) .icon{background-position: 0px -400px;}
        .rp_nick .game:nth-child(5) .icon{background-position: 0px -100px;}

/*--------------------------------------------------------
    # RolePlay Nick - Game Settings
  -------------------------------------------------------*/
.rp_nick .settings{
	width: 30%;
	height: 100%;
	float: left;
    position: relative;
}  
 
.rp_nick .middle_block{
width: 40%;
height: 100%;
position: relative;
float: left;
} 

.rp_nick .GameSettings{
    width: 30%;
    float: left;
    position: relative;
    background: #fff;
}
.rp_nick .GameSettings .icon{
    width: 80px;
    height: 80px;
    position: relative;
    display: inline-block;    
    margin: 4px 0 0 0px;
    cursor: pointer;
    font-family: roboto;
    top: 0px!important;
	left: 0px!important;
	padding-left: 0px!important;
    -webkit-transition: .5s ease;
    transition: .5s ease;
	z-index: 1;
}
.rp_nick .GameSettings  label {color: #9e9e9e;}
.rp_nick .GameSettings [type="radio"]:not(:checked)+label:before {
    border-radius: 0;
    border: none;
	z-index: 0;
}
.rp_nick .GameSettings [type="radio"]:checked+label:after {
    border-radius: 50%;
    border: none;
    background-color: transparent;
    z-index: 0;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
.rp_nick .res_window{
    width: 90%;
    height: 250px;
    position: relative;
    margin: 20px 0 0 10%;
	border-radius: 10px;
	background: #eee;

}
.rp_nick  #sex{
	width: 100%;
	height: 50px;
	text-align: center;
	position: absolute;
	bottom: 0px;
}
.rp_nick  #sex .input-field{
	width: 50%;
	display: inline-block;
	margin: 0!important;
	float: left;
}

  
  
 .rp_nick #result {
	width: 100%;
	height: auto;
	position: relative;
	float: left;
	text-align:center;
	top: 40px;
 }
 
.rp_nick #result .text{
	width: 100%;
	height: auto;
	margin: 0 auto;
	font-size: 25pt;
}
.rp_nick #result .like{
	background: #fff;
}

  
.rp_nick .icon_active, .rp_nick .icon_selected{opacity: 1!important;}
.rp_nick .icon_not_active{opacity: .3;}
.rp_nick .race_name{
    width: 100%;
    background: #fff;
    position: absolute;
    bottom: -10px;
    z-index: 2;
    text-align: center;
}
.rp_nick .races_block{
    overflow: hidden;
    -webkit-transition: 1s ease;
    transition: 1s ease;
    display: none;
	background: #fff;
    padding: 0 0 20px 0;
}
.rp_nick .wow_races{width: 200px;}
.rp_nick .wow_races .alliance, .wow_races .horde{
    width:100px;
    float: left;
    text-align: center;
}

.rp_nick .alliance .icon{background: url(../images/alliance_icons_w.jpg);}
.rp_nick .alliance .icon:nth-child(1) {background-position: 0px 0px;}
.rp_nick .alliance .icon:nth-child(2) {background-position: 0px 80px;}
.rp_nick .alliance .icon:nth-child(3) {background-position: 0px 160px;}
.rp_nick .alliance .icon:nth-child(4) {background-position: 0px 240px;}
.rp_nick .alliance .icon:nth-child(5) {background-position: 0px 320px;}
.rp_nick .alliance .icon:nth-child(6) {background-position: 0px 400px;}

.rp_nick .horde .icon{background: url(../images/horde_icons_w.jpg);}
.rp_nick .horde .icon:nth-child(1) {background-position: 0px 0px;}
.rp_nick .horde .icon:nth-child(2) {background-position: 0px 80px;}
.rp_nick .horde .icon:nth-child(3) {background-position: 0px 160px;}
.rp_nick .horde .icon:nth-child(4) {background-position: 0px 240px;}
.rp_nick .horde .icon:nth-child(5) {background-position: 0px 320px;}
.rp_nick .horde .icon:nth-child(6) {background-position: 0px 400px;}

.rp_nick .gw_races{width: 100px;}

.rp_nick .gw_races .icon{background: url(../images/gw2_icons.jpg);}
.rp_nick .gw_races  .icon:nth-child(1){background-position: 0px 0px;}
.rp_nick .gw_races  .icon:nth-child(2){background-position: 0px 160px;}
.rp_nick .gw_races  .icon:nth-child(3){background-position: 0px 240px;}
.rp_nick .gw_races  .icon:nth-child(4){background-position: 0px 320px;}
.rp_nick .gw_races  .icon:nth-child(5){background-position: 0px 400px;}



.gta_races{width: 200px;}
.gta_races .icon{background: url(../images/gta_flags.jpg);}
.gta_races .icon:nth-child(1) {background-position: 0px 0px;}
.gta_races .icon:nth-child(2) {background-position: 83px 0px;}
.gta_races .icon:nth-child(3) {background-position: 0px 250px;}
.gta_races .icon:nth-child(4) {background-position: 83px -80px;}
.gta_races .icon:nth-child(5) {background-position: 0px 170px;}
.gta_races .icon:nth-child(6) {background-position: 83px 170px;}
.gta_races .icon:nth-child(7) {background-position: 0px 90px;}

/*--------------------------------------------------------
    # RolePlay Nick - History
  -------------------------------------------------------*/

.rp_nick .history{
    width: 24%;
    height: 90%;
    overflow-y: auto;
    background: #eee;
	border-radius: 10px;
    float: right;
    margin: 2%;
}

.rp_nick .history span{
    width:90%;
	padding: 0 5%;
	height:auto;
	float: left;
	position: relative;
}

/*-----------------------------------------------------------
	# Film Generator
-----------------------------------------------------------*/
.film_group{
    width: 20%;
    height: auto;
    float: left;
    position: relative;
}

.film {
	width: 100%!important;
	height: auto!important;
    margin: 10px 0 0 0!important;
    float: left!important;
    position: relative!important;
}

.film img{
    width: 20%!important;
    float: left!important;
    position: relative!important;
    margin: 0 20px 0 0!important;
}
.film .name{
    width: 75%!important;
    position: relative!important;
    float: left!important;
    font-size: 24pt!important;
    margin: 0!important;
}
.film .genre, .film .director, .film .descripion{
    width: 75%!important;
    position: relative!important;
    float: left!important;
    font-size: 13pt!important;
    margin: 0 0 10px 0!important;
}
/*-----------------------------------------------------------
	# Name Generator
-----------------------------------------------------------*/

.namefio fieldset{
    width: 15%;
    border: none;
    height: 250px;
    float: left;
    position: relative;
	margin-top: 22px;
}
.namefio fieldset p{
	width: 100%;
	float: left;
	position: relative;
	margin: 0 0 0 0px;
}



.namefio .iteration_count{
	width: 25%;
	float: left;
	position: relatvie;
	height: 250px;
}
.namefio .choose_country{
	width: 50%;
	height:auto;
	height: 250px;
	margin: 22px 2% 0 2% ;
	float: left;
	position: relatvie;
}
.sex_settings{
	width: 20%;
	float: left;
	position: relatvie;
}

.namefio #result{
	width: 100%;
	height: auto;
	position: relative;
	float: left;
}

.number_alert{
	width: 100%;
	height: auto;
	position: relative;
	float: left;
	color: red!important;
	margin: 0 0 20px 0;
}
.true_valid{
	border-bottom: 1px solid #4CAF50!important;
    box-shadow: 0 1px 0 0 #4CAF50!important;
}

/*-----------------------------------------------------------
	# Sign Generator
-----------------------------------------------------------*/


		.sign{text-align:center;}
		
		.sign .SignGen_container{
            width: 600px;
            height: auto;
            position: relative;
			display: inline-block;
            margin: 20px 0 0 20px;
        }
		.sign .SignResultContainer{
			margin: 300px 0 0 0;
		}	

		#sign_generator_textInit{
		font-family: 'kobzar_ksregular';
		font-size: 0.000001pt;
		color: #fff;

		}
        .sign canvas {
            outline: 1px solid black;
        } 

		.mainCanvas{
			width: 98%;
			position: absolute;
			cursor: pointer;
			top: 107px;
			left: 1%;
		}
		
		.sign  .smallCanvas{
			width: 48%;
			margin: 1%;
			float: left;
			position: relative;
			cursor: pointer;
		}
		 		
		
		.sign  .smallCanvas:hover{
			outline: 2px #ffcc00 solid;			
		}
             
        .sign .settings{
			width: 100%;
			height: auto;
            position: relative;
            float: left;
			background: #eee;
			padding: 25px 10px 0px 10px;
        }
		
		 .sign .settings .input-field{
			width: 48%;
			float: left;
			margin: 0 1% 0 1%;
		 }
		
		
		

        .sign .res-container{
        width: 605px;
        height: auto;
        margin: 30px 0 0 0px;
        background: #eee;
         position: relative;
        float: left;
        }
        .sign #names_result{
            width: 250px;
            height: 250px;
            position: fixed;
            top: 40px;
            right: 10px;
            background: #886cd6;
        }
        
        .sign #chosen_sign{
            width: 250px;
            height: 150px;
            position: fixed;
            top: 290px;
            right: 10px;
            background: #fa9a16;
        }
		.sign .grid{
			position: absolute;
			width: 600px;
			height: 300px;
			background: url(../images/grid.png);
		}