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: 'Open sans', sans-serif; font-weight: 300;  font-size: 16px; line-height:auto; color:#000;  }

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


.wrapper { position: relative; width: 100%; min-height: 100%; background-color: #960202; background-image: url(../images/bgr.webp); background-repeat: repeat; background-position: center center;  }

.act { display: flex; flex-flow: column; align-items: center; justify-content: center; width: 400px; height: 240px; border-radius: 30px; position: absolute; margin-left: -200px; left: 50%; margin-top: -120px; top: 50%; background-image: url(../images/panel.png); background-repeat: no-repeat; background-position: center center; background-color: #fff; border: 10px solid #e1463b; z-index: 10; -webkit-box-shadow: 7px 7px 5px 0 rgba(0,0,0,0.4); box-shadow: 7px 7px 5px 0 rgba(0,0,0,0.4); }

.error { display: flex; flex-flow: column; align-items: center; font-weight: 600; justify-content: center; border-radius: 30px; width: 400px; height: 240px; position: absolute; margin-left: -200px; left: 50%; margin-top: -120px; top: 50%; /*background-color: rgba(255, 0, 0, 1);*/ background-color: #d7000a; border: 10px solid #e1463b;  color: #fff; background-image: url(../images/error.png); background-repeat: no-repeat; background-position: center center;  z-index: 20; text-align: center;   padding:  0 30px 0 30px; }
.error .base-error {  font-size: 40px; font-weight: 00; display: none;}
/*.error .text-error {  font-size: 30px; line-height: 1.2;  }*/

.close { display: block; width: 22px; height: 22px; background-image: url(../images/error-close.png); background-repeat: no-repeat; background-position: 0 0; padding: 0; margin: 0; position: absolute; top: 10px; right: 10px; opacity: 0.86; }
.close:hover { opacity: 1; }

.ready { display: flex; flex-flow: column; align-items: center; justify-content: center; width: 400px; height: 240px; border-radius: 30px; position: absolute; margin-left: -200px; left: 50%; margin-top: -120px; top: 50%;  background-color: #1b8b01; border: 10px solid #fceacf; background-image: url(../images/ready.png);  color: #fff; background-repeat: no-repeat; background-position: center center; font-weight: 600;  z-index: 20; text-align: center;   padding:  0 30px 0 30px; }
.ready-text {  font-size: 36px; line-height: 1.2; display: none; }




.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: 38px;  width: 100%; margin-top: -11px; margin-bottom: 15px; font-weight: 600; }
.form-input { width: 100%; height: auto; }
input[type='text'] { width: 68%; text-align: center; margin-right: 4%; border-radius: 10px; height: 60px; border: 3px solid #da8a17; font-weight: 400; background-color: #fff; float: left; font-size: 30px; padding: 3px 7px 0 7px; }
/*input[type='text'].error-answer { border: 4px solid #d10122; }*/
input[type='text']:focus { outline: none; }
a.check-num { display: flex; align-items: center; justify-content: center; width: 26%; height: 60px; border: 3px solid #e1463b; background-color: #e1463b; border-radius: 40px;  color: #fff; font-weight: 600; font-size: 25px; line-height: 1; margin: 0; padding: 0; float: right; text-align: center; text-decoration: none; padding-top: 5px; }
a.check-num:hover { text-decoration: none; color: #fff; background-color: #b11c11; border-color: #b11c11; }

input[type='text']::-webkit-input-placeholder {  color: grey; opacity: 0.7; font-size: 22px; }
input[type='text']:-ms-input-placeholder { color: grey; opacity: 0.7; font-size: 22px; }
input[type='text']::-moz-placeholder { color: grey; opacity: 0.7; font-size: 22px; }
input[type='text']:-moz-placeholder { color: grey;  opacity: 0.7; font-size: 22px; }

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

.putnoready { width: 100%; background-color: #f00; color: #fff; font-size: 23px; padding: 10px; line-height: 1.2; text-align: center; z-index: 110; position: relative; }
.putnoready a { color: #fff; text-decoration: underline; }
.putnoready a:hover; { color: #fff; text-decoration: none; }



@media (max-width: 991px) {
	.wrapper { -webkit-background-size: 700px; background-size: 700px; }
}

@media (max-width: 767px) {
	.wrapper { -webkit-background-size: 500px; background-size: 500px; }
}

@media (max-width: 470px) {
	.act { width: 90%; margin-left: 5%; left: 0; }
	.error, .ready { width: 90%; margin-left: 5%; left: 0; }
	input[type='text'] { font-size: 26px; width: 68%; margin-right: 2%; padding: 3px 6px 0 6px; }
	.form { padding: 0 14px 0 14px; }	
	a.check-num { width: 26%; }
	input[type='text']::-webkit-input-placeholder {   font-size: 21px; }
	input[type='text']:-ms-input-placeholder {  font-size: 21px; }
	input[type='text']::-moz-placeholder {  font-size: 21px; }
	input[type='text']:-moz-placeholder {  font-size: 21px; }
	.error .base-error { font-size: 38px; }
	.ready-text { font-size: 33px; line-height: 1.1; }
/*	.act { width: 90%; margin-left: 5%; left: 0; }*/
/*	.error, .ready { width: 90%; margin-left: 5%; left: 0; font-size: 30px; }*/
/*	.ready-text { font-size: 32px; }*/
	

/*	input[type='text'] { font-size: 27px; padding: 3px 7px 0 7px; width: 69%; margin-right: 4%; }*/
/*input[type='text'] {  width: 69%; }*/
	
/*	.form-text { font-size: 36px; }		*/
	/*input[type='text'] { font-size: 36px; padding-top: 8px; }
	a.check-num { padding-top: 25px; font-size: 36px; }	*/
/*	a.check-num { width: 27%;  }*/
}


@media (max-width: 360px) {	
	.act { width: 94%; margin-left: 3%;  }
	.error, .ready { width: 94%; margin-left: 3%; }	
	input[type='text'] { font-size: 24px; width: 71%; margin-right: 1%; padding: 3px 4px 0 4px; }
	.form { padding: 0 12px 0 12px; }	
	a.check-num { width: 26%; }
	input[type='text']::-webkit-input-placeholder {   font-size: 20px; }
	input[type='text']:-ms-input-placeholder {  font-size: 20px; }
	input[type='text']::-moz-placeholder {  font-size: 20px; }
	input[type='text']:-moz-placeholder {  font-size: 20px; }
	.ready-text { font-size: 30px;  }
	/*.act { width: 94%; margin-left: 3%; height: 210px; margin-top: -110px; }	
	.error, .ready { width: 94%; margin-left: 3%; height: 240px; margin-top: -120px; }	
	.error .base-error { font-size: 38px; }
	.ready-text { font-size: 32px; line-height: 1.1; }
	.error .text-error { font-size: 28px; line-height: 1.1;  }
	.form { padding: 0 17px 0 17px; }	
	.form-text { font-size: 34px; margin-bottom: 15px; margin-top: 0; }		
	input[type='text'] { font-size: 27px; padding-top: 5px; height: 80px; width: 64%; margin-right: 4%; }
	a.check-num { padding-top: 19px; font-size: 40px; height: 80px; width: 32%; }*/
}