@font-face {
    font-family: Halloween;
    src: url("../fonts/black-and-white-picture-cyrillic.otf") format("opentype");
}


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: 'Halloween', 'Open Sans', sans-serif;  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;  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: #64b8ca; background-image: url(../images/mys-bgr.jpg); background-repeat: no-repeat; background-position: center center;  }

.act { display: flex; flex-flow: column; align-items: center; justify-content: center; width: 400px; height: 240px; position: absolute; margin-left: -200px; left: 50%; margin-top: -120px; top: 50%; background-color: rgba(198, 122, 254, 0.7); border-radius: 30px;  border: 4px solid #382455; z-index: 10; }

.error { display: flex; flex-flow: column; align-items: center; justify-content: center; 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-radius: 30px;  border: 4px solid #950108;  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: 46px; 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.8; }
.close:hover { opacity: 1; }

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




.form { position: relative; max-width: 700px; width: 100%; margin: 0 auto 0; padding: 0 40px 0 40px; z-index: 100; }	
.form-text { text-align: center; color: #000; font-size: 46px;  width: 100%; margin-top: -7px; margin-bottom: 15px; }
.form-input { width: 100%; height: auto; }
input[type='text'] { width: 58%; text-align: center; margin-right: 4%; height: 90px; border: 3px solid #382455; background-color: #fff; border-radius: 10px; float: left; font-size: 56px; padding: 8px 20px 0 20px; }
input[type='text'].error-answer { border: 4px solid #d10122; }
input[type='text']:focus { outline: none; }
a.check-num { display: block; width: 36%; height: 90px; border: 4px solid #382455; background-color: #382455; 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: 26px; }
a.check-num: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;  }

.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: 1800px) {
	.wrapper { -webkit-background-size: 1800px; background-size: 1800px; }
}

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

@media (max-width: 470px) {
	.act { width: 90%; margin-left: 5%; left: 0; }
	.error, .ready { width: 90%; margin-left: 5%; left: 0; font-size: 30px; }
	.ready-text { font-size: 44px; }
	.error .base-error { font-size: 42px; }
	input[type='text'] { font-size: 50px; padding: 8px 14px 0 14px; }
	.form { padding: 0 30px 0 30px; }	
	.form-text { font-size: 44px; }		
	/*input[type='text'] { font-size: 36px; padding-top: 8px; }
	a.check-num { padding-top: 25px; font-size: 36px; }	*/
}


@media (max-width: 360px) {	
	.act { width: 94%; margin-left: 3%; height: 220px; margin-top: -110px; }	
	.error, .ready { width: 94%; margin-left: 3%; height: 240px; margin-top: -120px; }	
	.error .base-error { font-size: 48px; }
	.ready-text { font-size: 36px; line-height: 1.1; }
	.error .text-error { font-size: 28px; line-height: 1.1;  }
	.form { padding: 0 17px 0 17px; }	
	.form-text { font-size: 42px; margin-bottom: 7px; margin-top: 0; }		
	input[type='text'] { font-size: 52px; padding-top: 5px; height: 80px; width: 60%; margin-right: 4%; }
	a.check-num { padding-top: 19px; font-size: 40px; height: 80px; width: 36%; }
}