@font-face { font-family: Proxima; src: url(../font/Proxima_Nova_Regular.ttf); font-display:swap; }
@font-face { font-family: ProximaSemi; src: url(../font/Proxima_Nova_Semibold.ttf); font-display:swap; }
@font-face { font-family: ProximaBold; src: url(../font/Proxima_Nova_Black.ttf); font-display:swap; }

* {margin:0; padding:0; border:none; box-sizing: border-box;}
body {color:#444; z-index:10; background:#E9EBEC; position:relative; line-height:1.3; font-family: 'Proxima', Verdana, Arial, sans-serif; font-size:21px;}
.container, h1{ max-width:1400px; margin:0 auto;}
.main .container{ background:#fff;}
h2, h3 {font-family: 'ProximaSemi', Verdana, Arial, sans-serif; color:#000;font-weight:500;}
h1{font-family: 'ProximaBold', Verdana, Arial, sans-serif; padding:32px 16px 0; font-size:1.5em; text-align: center; font-weight:700; color:#000;}

header{display:flex; flex-direction: row; flex-wrap: nowrap; align-items: center;}
.green {color:#6DB900;}
.green_bg {background:#6DB900; color:#fff; padding:0 4px; margin:0 4px;font-family: 'ProximaSemi', Verdana, Arial, sans-serif; font-weight:500;}
.ylw_button {background:#CC0000; color:#fff; padding: 10px 25px; font-size: 1.1em; font-family: 'ProximaSemi', Verdana, Arial, sans-serif; text-decoration: none; display:block; margin-bottom:16px;}
.ylw_button:hover, .ylw_button:focus {background:#000; color:#CC0000;}
.bld {font-family: 'ProximaBold', Verdana, Arial, sans-serif; font-weight:700;}
.logo {width:115px; fill:rgb(54,104,120);}
.wrap {padding: 38px;}
.text-top {}
.side {display:flex; flex-direction: row; flex-wrap: nowrap; align-items: center;}
.contacts {display:flex; flex-direction: row; align-items: center;}
.phones {display:flex; flex-direction: column; align-items: flex-start; white-space: nowrap;}
.phone {font-family: 'ProximaSemi', Verdana, Arial, sans-serif; font-size:1.4em; text-decoration:none; color:#000;font-weight:500;}
.descr {font-family: 'Proxima', Verdana, Arial, sans-serif; font-size:.7em; font-weight:400;}
.black_bg{background:#000;}
.images {display:flex; flex-direction: row; flex-wrap: nowrap; align-items: center;}
.image {padding:8px;}
.image img {width:100%;}
.compat {display:flex; flex-direction: row; flex-wrap: nowrap; align-items: start;}

.text-half {width:50%;}
.dblue_bg, footer {position:relative; background: rgb(54,104,120); background: -moz-linear-gradient(0deg, rgba(54,104,120,1) 0%, rgba(37,48,55,1) 100%); background: -webkit-linear-gradient(0deg, rgba(54,104,120,1) 0%, rgba(37,48,55,1) 100%);
background: linear-gradient(0deg, rgba(54,104,120,1) 0%, rgba(37,48,55,1) 100%); color:#fff; overflow: hidden; font-size:1.1em;}

.dblue_bg .wrap {padding: 16px 16px 16px 48px;}
.dblue_bg .corner{content:""; position:absolute; border-right:38px solid transparent; border-bottom:solid #fff;}
.mdl_list{display:grid; grid-template-columns: repeat(2, minmax(200px, 1fr)); grid-gap:16px 8px; padding:16px 0; justify-items: start; list-style: none;}
.mdl_list li {border-left:4px solid #CC0000; padding:0 16px;}

.icons {display:grid; grid-template-columns: repeat(3, minmax(250px, 1fr)); grid-gap:16px 8px; padding:38px 0; justify-items: start;}
.tech {display:grid; grid-template-columns: repeat(2, minmax(300px, 1fr)); grid-gap:16px 8px; padding:38px 0; justify-items: start; align-items: start;}
.item { display: flex; justify-content: flex-start; align-items: center; flex-direction: row;}
.tech .item { display: flex; justify-content: flex-start; align-items: start; flex-direction: row;}
.about {padding: 16px;}
.tech .about {padding: 0 16px 16px;}
.ylw_dot {border: 9px solid #CC0000}
.tech .ylw_dot {margin-top:4px}
.container p {padding:16px 0;}
.container h2 {padding:32px 0 0;}
.phIco {display:flex; flex-direction: row; flex-wrap: nowrap; align-items: center;}
.pi {margin:5px;}

footer .phone {color:#fff;}
footer .logo {fill:#fff;}

@media  (max-width:1200px) {	
	header{ flex-direction: column;}
}
@media (max-width:800px) {	
	body {font-size:19px;}
	.wrap, .dblue_bg .wrap {padding: 16px;}
	header{ flex-direction: column;}
	.contacts { flex-direction: column; font-size:.8em;}
	.images {flex-direction: column;}
	.compat {flex-direction: column;}
	.text-half {width:100%;}
	.mdl_list{grid-template-columns: repeat( 2, minmax(150px, 1fr)); padding:16px 0;}
	.dblue_bg .corner {display:none;}
	.icons, .tech { grid-template-columns:  minmax(250px, 1fr); grid-gap:16px 8px;}
	.dblue_bg, .side { font-size:1.4em;}
}