@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap&subset=cyrillic');

* {box-sizing: border-box; border: none; outline: none; margin: 0; padding: 0; resize: none; text-decoration: none; color: #25547e; font-family: 'Open Sans', sans-serif;}
input[type="submit"] {cursor: pointer;}

body {padding-top: 140px;}

header {position: fixed; top: 0; left: 0; width: 100%; background: #f9f9f9; z-index: 999;}
header > div {max-width: 1200px; margin: 0 auto; display: flex; align-items: center; padding: 20px;}
header .logo {}
header .logo img {display: block; height: 100px;}
header .hcont {flex: 1; padding-left: 50px;}
header .hcont .namecomp {font-size: 22px; font-weight: 700;}
header .hcont > div {margin-top: 5px;}
header .hcont > div a {font-size: 15px;}
header .callback {background: #6693bd; color: #fff; text-transform: uppercase; font-size: 14px; font-weight: 600; padding: 15px 40px; border-radius: 8px; border-bottom: 3px solid #26537d; position: relative; top: 0;}
header .callback:hover {background: #26537d; cursor: pointer; border-bottom: 0px solid #6693bd; top: 2px;}

.menu {max-width: 1200px; margin: 0 auto; display: flex; padding: 20px;}
.menu .mtitle {color: #fff; width: 300px; background: #3c92d0; font-size: 30px; font-weight: 600; padding: 50px; line-height: 36px; display: flex; align-items: center; margin-bottom: 10px;}
.menu nav {display: flex; flex-wrap: wrap; justify-content: flex-end;}
.menu nav > span {width: 48.8%; display: flex; background: #fdc746; color: #333; align-items: center; padding: 15px 20px; margin: 0 0 10px 10px;}
.menu nav > span:nth-child(odd) {margin-left: 0;}
.menu nav > span i {color: #333; font-size: 30px; margin-right: 15px;}
.menu nav > span span {color: #333; font-size: 18px; font-weight: 600;}
.menu nav > span:hover {cursor: pointer; background: #26547e;}
.menu nav > span:hover i {color: #fff;}
.menu nav > span:hover span {color: #fff;}

.about {max-width: 1200px; margin: -5px auto 0; display: flex; padding: 0 20px 20px;}
.about img {width: 300px;}
.about div {background: #3c92d0; flex: 1; padding: 20px 30px;}
.about div p {color: #fff; line-height: 32px;}

.logos {max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 20px;}
.logos > div {width: 30%; margin-bottom: 30px;}
.logos > div .img {width: 100%; height: 150px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px;}
.logos > div .img img {display: block; max-width: 100%; max-height: 100%;}
.logos > div .title {display: block; text-align: center; color: #000;}

.cont {max-width: 1200px; margin: 0 auto; padding: 0 20px}
.cont > div {margin-top: 40px; position: relative; display: flex;}
.cont > div .idc {position: absolute; width: 100%; top: -160px; left: 0;}
.cont > div > img {width: 300px;}
.cont > div .cblock {flex: 1; padding: 20px 30px;}
.cont > div .cblock .title {display: block; font-size: 20px; font-weight: 600; color: #fff;}
.cont > div .cblock p {color: #fff; font-size: 13px; margin-top: 15px;}

.cont > div.bgblue .cblock {background: #3c92d0;}
.cont > div.bggreen .cblock {background: #6fb743;}
.cont > div.bgorange .cblock {background: #fdc746;}

.cblock ul {margin: 10px 0 0 20px;}

.reviews {max-width: 1200px; margin: 0 auto; padding: 20px;}
.reviews .title {display: block; text-align: center; text-transform: uppercase; font-size: 30px; font-weight: 600; margin: 40px 0 40px;}
.reviews > div {display: flex; flex-wrap: wrap;}
.reviews > div a {display: block; width: 25%}
.reviews > div a img {display: block; width: 100%;}

footer {background: #333; margin-top: 30px; border-top: 5px solid #1f1f1f;}
footer > div {max-width: 1200px; margin: 0 auto; padding: 20px; display: flex; justify-content: space-between;}
footer > div span {color: #fff; font-size: 14px;}
footer > div div {display: flex;}
footer > div div a {color: #fff; font-size: 14px; margin-left: 50px;}

.pu {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: none; justify-content: center; align-items: center;}
.pu.show {display: flex;}
.pubg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5);}
.pucont {position: relative; background: #fff; border-radius: 6px; width: 460px;}
.pucont i {position: absolute; top: 24px; right: 25px; font-size: 20px; cursor: pointer; color: #000;}
.pucont .title {display: block; font-size: 20px; padding: 20px 30px; border-bottom: 1px solid #eae7e7;}
.pucont form {padding: 20px 30px; height: 275px;}
.pucont form label {padding: 0 5px; color: #787878; font-size: 13px; position: relative; bottom: -9px; left: 11px; background: #fff;}
.pucont form input[type="text"] {display: block; width: 100%; border: 1px solid #b7b3b3; font-size: 18px; border-radius: 3px; padding: 10px 15px; margin-bottom: 20px;}
.pucont form input[type="submit"] {position: relative; top: 0; background: #fdc746; color: #2d2d2d; font-size: 14px; padding: 10px 45px; display: block; margin: 0 auto; border-radius: 5px; border-bottom: 3px solid #d2a02a; font-weight: 600;}
.pucont form input[type="submit"]:hover {border-bottom: 0px solid #d2a02a; top: 3px; background: #d2a02a; color: #fff;}

.error-input {border-color: red!important;}

.thx {display: block; text-align: center; font-size: 20px; margin-bottom: 20px;}
.thx span {display: block; font-size: 30px; margin-bottom: 20px;}

::-webkit-input-placeholder {color: #454545;}
:-moz-placeholder {color: #454545; opacity:  1;}
::-moz-placeholder {color: #454545; opacity:  1;}
:-ms-input-placeholder {color: #454545;}

.callback,
.menu nav > span,
.menu nav > span i,
.menu nav > span span,
input[type="submit"],
input[type="text"],
.anim {
	-moz-transition: 0.3s all ease;
	-o-transition: 0.3s all ease;
	-webkit-transition: 0.3s all ease;
	transition: 0.3s all ease;
}

.clear {clear: both;}





@media (max-width: 800px){
	.cont > div {flex-direction: column;}
	.cont > div > img {width: 100%;}
	.logos > div {width: 100%;}
	.about {flex-direction: column;}
	.menu {flex-direction: column; width: 100%;}
	.menu .mtitle {width: 100%; text-align: center; padding: 20px 0 20px 20px; line-height: 34px; font-size: 24px;}
	.menu nav > span {width: 100%; margin-left: 0;}
	.about div {flex-direction: column; padding: 20px;}
	.about > img {width: 100%;}
	header {position: relative;}
	header > div {flex-direction: column; text-align: center;}
	body {padding-top: 0;}
	header .hcont {padding-left: 0; margin: 20px 0;}
	header .hcont .namecomp {font-size: 14px;}
	.reviews > div a {width: 50%;}
	footer > div {flex-direction: column; text-align: center;}
	footer > div div {flex-direction: column;}
	footer > div div a {margin-left: 0; margin-top: 10px;}
	.cont > div .idc {top: -20px;}
	.pucont {width: 90%;}
	.about div p {line-height: 20px;}
	.about div ul {margin: 20px;}
	.cont > div .cblock {padding: 20px;}
}

@media (max-width: 320px){
	.menu .mtitle {font-size: 20px;}
}