body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { font-family: 'Roboto', sans-serif, tahoma; font-weight: 400; font-size: 16px; line-height:auto; color:#454545;  }

/*body { padding-top: 30px; }*/
a, div, input, span  { box-sizing:border-box; background-repeat: no-repeat;  }
a { color:#34B1C4; text-decoration: underline; }
a:hover { color:#454545; text-decoration: underline; }
h1, h2, h3 {  text-align: center; font-weight: 300; color: #454545; }
h1 { font-size: 40px;  }
h2 { font-size: 44px; }
h3 { font-size: 24px; }
form { margin: 0; padding: 0; }
strong { font-weight: 500; }

* {
  margin: 0;
  padding: 0;
}


html, body { height: 100%; }


.standart-link a { text-decoration: underline; }

.admin-h1 { font-size: 24px; font-weight: 600; }
p.cookie { font-size: 12px; }
strong.warning { color: #f00; font-weight: 600; }



/* TASK */

.wrapper { position: relative; width: 100%; min-height: 100%; background-color: #64b8ca; background-image: url(../images/snow-texture.png); background-repeat: repeat; background-position: 0 0; }
/*.content { padding-bottom: 100px; }*/
.footer { position: absolute; z-index: 80; left: 0; bottom: 0; width: 100%; height: 100px; background-image: url(../images/footer-bgr.png); background-repeat: repeat-x; background-position: left bottom; }
.tree { width: 252px; height: 310px; z-index: 90; background-image: url(../images/tree.png); background-repeat: no-repeat; background-position: center bottom; left: 50%; margin-left: -126px; position: absolute; bottom: 0; }


.form { position: relative; max-width: 700px; width: 100%; margin: 0 auto 0; padding: 0 20px 0 20px; z-index: 100; }	
.form-text { text-align: center; color: #000; font-size: 44px; font-weight: 300; width: 100%; margin-bottom: 50px; padding-top: 34%; }
.form-input { width: 100%; height: auto; }
input[type='text'] { width: 75%; margin-right: 2%; height: 110px; border: 4px solid #00668d; background-color: #fff; border-radius: 10px; float: left; font-size: 40px; padding: 8px 20px 0 20px; font-weight: 300; }
input[type='text'].error-answer { border: 4px solid #d10122; }
input[type='text']:focus { outline: none; }
a.check-hand, a.check-house { display: block; width: 23%; height: 110px; border: 4px solid #00668d; background-color: #00668d; border-radius: 10px; color: #fff; font-size: 40px; line-height: 1; margin: 0; padding: 0; float: right; text-align: center; text-decoration: none; padding-top: 30px; }
a.check-hand:hover, a.check-house:hover { text-decoration: none; color: #fff; background-color: #004059; border-color: #004059; }

input[type='text']::-webkit-input-placeholder {  color: grey; opacity: 0.5; }
input[type='text']:-ms-input-placeholder { color: grey; opacity: 0.5; }
input[type='text']::-moz-placeholder { color: grey; opacity: 0.5; }
input[type='text']:-moz-placeholder { color: grey;  opacity: 0.5; }

.hidden-button { width: 1px; height: 1px; background-color: #f00; opacity: 0;  }

.error	{ display: none; width: 600px; height: auto; background-color: rgba(209, 1, 34, 0.78); border-radius: 10px; position: absolute; left: 50%; margin-left: -300px; margin-top: 20px; color: #fff; padding: 20px; text-align: center; font-size: 26px; z-index: 200; font-weight: 500; }

.content--porosenok-task {   }
.content--porosenok-text { padding-top: 50px; display: none;  }


.content--porosenok-text span { padding: 30px; background-color: rgba(255, 255, 255, 0.8); border-radius: 20px; display: block; text-align: left; width: 100%; max-width: 1100px; margin: 0 auto 0; z-index: 100; position: relative;
-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow:         5px 5px 2px 0px rgba(0, 0, 0, 0.5);
 }
.content--porosenok-text span p { font-size: 30px; color: #000; padding-bottom: 10px; }
.rat-text strong { font-weight: 600;  }

@media (max-width: 1140px) {
	.content--porosenok-text span { width: 80%;  margin: 0 0 0 10%; }
	.content--porosenok-text span p { font-size: 26px; }
}

@media (max-width: 991px) {

	.content--porosenok-text { padding-top: 20px; }
	.content--porosenok-text span { width: 80%;  margin: 0 0 0 10%; }
	.content--porosenok-text span p { font-size: 24px; }
}

@media (max-width: 768px) {
	.form-text { font-size: 40px; }	
	.error	{ width: 490px; margin-left: -245px; font-size: 22px; }

	.content--porosenok-text span { width: 90%;  margin: 0 0 0 5%; }
	.content--porosenok-text span p { font-size: 20px; }	
	
}


@media (max-width: 600px) {
	.form { padding: 0 15px 0 15px; }	
	.form-text { font-size: 40px; padding-top: 10%;  padding-top: 10%; }	
	input[type='text'] { height: 80px; }
	a.check-hand, a.check-house { height: 80px; padding-top: 18px; font-size: 40px; }	

	.content--porosenok-text span { padding: 20px;  }
	.content--porosenok-text span p { font-size: 18px; }
	
	
}


@media (max-width: 500px) {	
	.form-text { font-size: 38px; }	
	.error	{ width: 90%; margin: 20px 0 0 5%; left: 0; font-size: 18px; }	

	.content--porosenok-text span { width: 96%; margin-left: 2%;  padding: 15px; padding-top: 20px; }
	.content--porosenok-text span p { font-size: 16px; line-height: 1.1; }
}

@media (max-width: 400px) {	
	.form-text { font-size: 36px; }		
	input[type='text'] { font-size: 36px; padding-top: 8px; }
	a.check-hand, a.check-house { padding-top: 21px; font-size: 36px; }

	.content--porosenok-text span { padding: 10px;  padding-top: 20px; }
	.content--porosenok-text span p { font-size: 15px; }
	
}


@media (max-width: 360px) {	
	.form-text { font-size: 30px; }		
	input[type='text'] { font-size: 32px; padding-top: 5px; height: 70px; width: 70%; margin-right: 2%; }
	a.check-hand, a.check-house { padding-top: 18px; font-size: 32px; height: 70px; width: 28%; }
	.content--porosenok-text span p { font-size: 14px; }
}







@media (max-height: 991px) {
	.form-text { padding-top: 20%; }	
	.tree { height: 250px; -webkit-background-size: 200px; background-size: 200px; }	
}


@media (max-height: 700px) {
	.form-text {  margin-bottom: 30px; padding-top: 10%; }	
	.tree {  -webkit-background-size: 170px; background-size: 170px; }	
}

@media (max-height: 600px) {
	.form-text {  margin-bottom: 20px; padding-top: 6%; }	
	.tree { -webkit-background-size: 170px; background-size: 170px; }	
}

@media (max-height: 500px) {
	.form-text {  margin-bottom: 15px; padding-top: 20px; }	
	.tree { -webkit-background-size: 130px; background-size: 130px; }	
}

@media (max-height: 400px) {
	.form-text {  }	
	.tree { -webkit-background-size: 90px; background-size: 90px; }	
}

@media (max-height: 370px) {
	.form-text {  }	
	.tree { -webkit-background-size: 70px; background-size: 70px; }	
}


/* / TASK */



/* AF */
.wrapper--af { background-image: url(../images/brick-bgr.jpg); background-repeat: repeat; background-position: 0 0; }
.af { position: absolute; z-index: 110; left: 0; bottom: 0; width: 100%; height: 400px; background-image: url(../images/af.png); background-repeat: no-repeat; background-position: center bottom; }
.spider { width: 160px; height: 213px; background-image: url(../images/spider.png); background-repeat: no-repeat; background-position: 0 0; position: absolute; left: 0; top: 0; z-index: 20px; }
.af-text { width: 100%; max-width: 800px; background-color: #fff; border-radius: 20px; text-align: left;  margin: 0 auto 0; padding: 20px; padding-bottom: 20px; z-index: 100; position: relative;
	-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow:         5px 5px 2px 0px rgba(0, 0, 0, 0.5);
 }
.af-text p.af-text__true { font-size: 50px; border-bottom: 1px solid #000; margin-bottom: 22px; line-height: 1.2; font-weight: 600; }
.af-text p { color: #000; font-size: 22px; font-weight: 400; margin-bottom: 10px; }
.content--af { padding-top: 5%; padding-bottom: 370px; }


.main-h-af {  font-size: 80px; font-weight: 600; color: #fff; text-align: center; padding-top: 100px; text-shadow: 4px 4px 2px rgba(0, 0, 0, 1); line-height: 1.1; }

.link-list { padding: 30px; }

@media (max-width: 1200px) {

	.main-h-af { padding-top: 80px; }

	.af-text p.af-text__true { font-size: 40px; padding-bottom: 9px; }

	.content--af { padding-bottom: 350px; }
	.af { height: 350px; -webkit-background-size: auto 350px; background-size: auto 350px; }
}


/*@media (max-width: 1000px) {
	.content--af { padding-bottom: 320px; }
	.af { height: 350px; -webkit-background-size: auto 320px; background-size: auto 320px; }
}
*/

@media (max-width: 900px) {
	.main-h-af { padding-top: 60px; font-size: 60px; }

	.content--af { padding-bottom: 320px; }
	.af { height: 350px; -webkit-background-size: auto 320px; background-size: auto 320px; }
}

@media (max-width: 830px) {
	.main-h-af { padding-top: 70px; font-size: 70px; }

	.af-text { width: 94%; margin-left: 3%; padding: 20px; padding-bottom: 30px; }
	.content--af { padding-bottom: 370px; }
	.af { height: 400px; -webkit-background-size: auto 400px; background-size: auto 400px; }
}


@media (max-width: 768px) {	
	.main-h-af { padding-top: 70px; font-size: 60px; }

	.af-text { padding: 20px; }
	.af-text p { font-size: 22px; }	
	.content--af { padding-bottom: 370px; }
	.af { height: 400px; -webkit-background-size: auto 400px; background-size: auto 400px; }
}

@media (max-width: 650px) {	
	.main-h-af { padding-top: 70px; font-size: 50px; }	

	.af-text p { font-size: 22px; }	
	.content--af { padding-bottom: 350px; }
	.af { height: 380px; -webkit-background-size: auto 380px; background-size: auto 380px; }
}

@media (max-width: 600px) {		
	.af-text p.af-text__true { font-size: 34px; line-height: 1.1; padding-bottom: 5px; margin-bottom: 8px; }
	.af-text p { font-size: 21px; }
	.content--af { padding-bottom: 330px; }
	.af { height: 360px; -webkit-background-size: auto 360px; background-size: auto 360px; }
}

@media (max-width: 550px) {	
	.af-text p { font-size: 20px; }
	.content--af { padding-bottom: 310px; }
	.af { height: 340px; -webkit-background-size: auto 340px; background-size: auto 340px; }

}

@media (max-width: 500px) {	
	.af-text p { font-size: 19px; }
	.content--af { padding-bottom: 290px; }
	.af { height: 320px; -webkit-background-size: auto 320px; background-size: auto 320px; }
}

@media (max-width: 450px) {	
	.main-h-af { padding-top: 70px; font-size: 40px; }	

	.af-text p.af-text__true { font-size: 26px; }
	.af-text p { font-size: 19px; }
	.content--af { padding-bottom: 260px; }
	.af { height: 290px; -webkit-background-size: auto 290px; background-size: auto 290px; }
}

@media (max-width: 400px) {	
	.af-text p { font-size: 18px; }
	.content--af { padding-bottom: 240px; }
	.af { height: 270px; -webkit-background-size: auto 270px; background-size: auto 270px; }
}

@media (max-width: 370px) {	
	.af-text p { font-size: 17px; }
	.content--af { padding-bottom: 220px; }
	.af { height: 250px; -webkit-background-size: auto 250px; background-size: auto 250px; }
}




@media (max-height: 700px) {
	.main-h-af { padding-top: 70px;  padding-bottom: 50px; }	
}

@media (max-height: 600px) {
	.main-h-af { padding-top: 60px;  padding-bottom: 50px; }	
}

@media (max-height: 500px) {
	.main-h-af { padding-top: 60px; font-size: 50px; padding-bottom: 50px; }	
}

@media (max-height: 400px) {
	.main-h-af { padding-top: 30px; font-size: 50px; padding-bottom: 50px; }	
}

@media (max-height: 350px) {
	.main-h-af { padding-top: 30px; font-size: 34px; padding-bottom: 50px; }	
}




/*@media (max-width: 1200px) or (max-height: 700px ) {
	.content--af { padding-top: 20px; }	
	.af { height: 400px; -webkit-background-size: 340px; background-size: 340px; }	
}

@media (orientation: landscape) and (max-width: 1000px) {
	.af-text { width: 70%; margin-left: 28%; padding: 15px; padding-bottom: 5px; }
	.af-text p { font-size: 20px; }
	.af { background-position: left bottom; height: 400px; -webkit-background-size: 200px; background-size: 200px; }	
}


@media (orientation: portrait) {
	.af-text { width: 94%; margin-left: 3%; }		
	.af { background-position: center bottom; }	
}

@media (max-width: 1200px) {
	.content--af { padding-top: 20px; }
	.af-text p { font-size: 20px; }
	.af { height: 400px; -webkit-background-size: 200px; background-size: 200px; }	
}


@media (max-width: 900px) {
	.content--af { padding-top: 20px; }
	.af-text p { font-size: 18px; }
	.af { height: 400px; -webkit-background-size: 200px; background-size: 200px; }	
}

@media (max-width: 800px) {
	.content--af { padding-top: 10px; }
	.af-text p { font-size: 17px; margin-bottom: 4px; }
	.af { height: 400px; -webkit-background-size: 180px; background-size: 180px; }	
}

@media (max-width: 700px) {
	.content--af { padding-top: 10px; }
	.af-text p { font-size: 16px; }
	.af { height: 400px; -webkit-background-size: 170px; background-size: 170px; }	
}

@media (max-width: 600px) {
	.content--af { padding-top: 10px; }
	.af-text p { font-size: 15px; }
	.af { height: 400px; -webkit-background-size: 150px; background-size: 150px; }	
}


@media (max-width: 500px) {
	.content--af { padding-top: 10px; }
	.af-text p { font-size: 14px; }
	.af { height: 400px; -webkit-background-size: 150px; background-size: 150px; }	
}

@media (max-width: 400px) {	
	.af-text p { font-size: 14px; }
	.af { height: 400px; -webkit-background-size: 130px; background-size: 130px; }	
}*/



/* AF */