/*

#FFB80A - yellow
#002666 - blue

#123285 - link
#0080FC - link hover


*/

@import url('https://fonts.googleapis.com/css?family=Ubuntu:300,400,700&subset=cyrillic');

body {background: #252d35; font-size: 17px; font-family: 'Ubuntu', sans-serif; font-weight:400; color:#adb4bb;}


a {color:#DDB973; transition: all .1s;}
a:hover {color:#F2DBAE; transition: all .1s; text-decoration: none;}


.h1, h1, .h2, h2, .h3, h3, .h4, h4, .h5, h5 {font-weight:400; margin-top:0; line-height: 1.3; color:#f1f3f5;}


.h1, h1 {font-size: 40px; margin-bottom: 30px;}
.h2, h2 {font-size: 36px; margin-bottom: 40px;}
.h3, h3 {font-size: 25px; margin-bottom: 20px;}
.h4, h4 {font-size: 22px; margin-bottom: 18px;}
.h5, h5 {font-size: 20px; margin-bottom: 15px;}


h1.xl {font-size: 48px; line-height: 1.2;}

p {font-size: 18px; line-height:1.4; margin-bottom:17px;}
p.lead {font-size: 24px; margin-bottom:24px;}

.v-gradient {
background: #1C2126;
background: url(../img/lines.svg) center center no-repeat, -moz-linear-gradient(top, #1C2126 0%, #495663 50%, #252d35 100%);
background: url(../img/lines.svg) center center no-repeat, -webkit-linear-gradient(top, #1C2126 0%, #495663 50%, #252d35 100%);
background: url(../img/lines.svg) center center no-repeat, linear-gradient(to bottom, #1C2126 0%, #495663 50%, #252d35 100%);
background-size: cover;
    
}


.content-area ul, .content-area ol {padding:0 0 20px 20px;}
.content-area li {font-size:17px; line-height:1.2; margin-bottom:15px;}


.btn {font-weight: 400;}
a.btn-yellow, .btn-yellow, .bg-blue a.btn-yellow {background: #FFB80A; color:#111;}
a.btn-yellow:hover, .btn-yellow:hover, .btn-yellow:active, a.btn-yellow:active, .bg-blue a.btn-yellow:hover  {background: #e7a400; color:#111;}


a.btn-blue, .btn-blue, .bg-blue a.btn-blue {background: #2a4e6f; color:#fff;}
a.btn-blue:hover, .btn-blue:hover, .btn-blue:active, a.btn-blue:active, .bg-blue a.btn-blue:hover  {background: #356a9a; color:#fff;}

.limiter {max-width: 1500px; margin:0 auto; padding:20px 40px;}

.bg-l-grey {background:#F2F2F2;}

.upper {text-transform: uppercase;}
.shadow-text {text-shadow: 1px 1px 2px rgba(0,0,0,.4);}
.shadow-box {box-shadow: 1px 1px 2px rgba(0,0,0,.3);}
.shadow {box-shadow: 1px 1px 2px rgba(0,0,0,.3);}
.bg-cover {background-repeat:no-repeat; background-size:cover; background-position: center center;}
.bg-multiply {background-blend-mode: multiply;}

.frame-blue {padding: 30px; border: solid 2px #59CDFF;}


.index-bg {background-image: url(../img/mps-453-pk.jpg), linear-gradient(80deg, rgba(24,43,57,1) 0%, rgba(22,27,31,1) 100%); background-blend-mode: multiply; background-size: cover; background-position: center; background-repeat: no-repeat;}
.inner-bg {background-blend-mode: multiply; background-size: cover; background-position: center; background-repeat: no-repeat;}

.gradient-box {
    background: linear-gradient(80deg, rgba(24,43,57,1) 0%, rgba(22,27,31,1) 100%); box-shadow:0 0 20px rgba(0,0,0,.3);

}


.content-box-shadow {box-shadow:0 0 40px rgba(0,0,0,.5);}

.mobile-navbar {padding: 10px; background:#0d1215; position:relative;}
.mobile-navbar .nav-toggle .burger {display:block; padding: 6px 5px; width: 32px; height: 32px; border: solid 1px #444; position:relative; background: none;}
.mobile-navbar .nav-toggle .burger span {display:block; height:4px; margin-bottom: 4px; background: #666; animation: all 200ms;}
.mobile-navbar .nav-toggle .burger span:last-child {margin: 0;}

.mobile-navbar .nav-toggle .burger.x span.bar-3 {display:none;}

.mobile-navbar .nav-toggle .burger.x span.bar-1 {transform: rotate(45deg)  translateY(5px)  translateX(6px); animation: all 200ms;}
.mobile-navbar .nav-toggle .burger.x span.bar-2 {transform: rotate(-45deg); animation: all 200ms;}
.mobile-navbar .logo {font-size: 18px; line-height: 32px; text-align: center;}
.mobile-navbar .phone {display: flex; flex-wrap: nowrap;}
.mobile-navbar .phone a {display: flex; flex-wrap: nowrap;}
.mobile-navbar .phone span {font-size: 24px; display: block; line-height: 32px; margin-left:15px;}
.mobile-navbar .phone i {width: 32px; display: block; height: 32px; border-radius: 16px; border: solid 1px #444; background: url(../img/phone.svg) center center no-repeat; background-size: 20px;}
.mobile-navbar .bar {}

.mobile-navbar nav {padding-top: 20px; margin-bottom:10px;}
.mobile-navbar nav ul {list-style: none; margin:0; padding:0;}
.mobile-navbar nav ul li {position: relative;}
.mobile-navbar nav ul li a {display:block; margin-right: 32px; padding: 10px 0;}
.mobile-navbar nav li.parent span.toggler {display: block; position: absolute; border: solid 1px #444; font-size:20px; color:#777; width: 24px; line-height: 24px; text-align: center; height: 24px; right:0; top:10px; cursor: pointer;}

.mobile-navbar nav li.parent span.toggler.open {background: #ddd; color: #000;} 
.mobile-navbar nav ul ul {display: none; padding-left:20px;}

.mobile-navbar .nav-content .nav-footer {border-top: solid 1px #ddd; padding-top:20px; padding-bottom: 10px; }

.page-top .logo-block {margin-bottom:50px;}
.page-top .logo {margin-top:-72px; background: #161b1f; padding: 15px 20px; box-shadow: 5px 5px 15px rgba(0,0,0,.3);}


.main-menu > ul {padding:0; margin:0; display: flex; justify-content: space-between; list-style: none; position:relative; z-index:20;}
.main-menu ul li a {display:inline-block; padding: 8px 12px; font-size: 20px; text-transform: uppercase;}
.main-menu > ul > li > a:hover, .main-menu > ul > li:hover > a  {background:#0d1215;}

.main-menu span.toggler {display:none;}

.main-menu ul li.level1 {position:relative; }
.main-menu ul li.level1 > ul {position:absolute; display:none; padding: 20px; background:#0d1215; width: 400px; list-style: none; margin:0;}
.main-menu ul li.level1 > ul li a {text-transform: none; padding:0;}
.main-menu li.level2 {margin-bottom: 20px;}
.main-menu li.level2:last-child {margin-bottom:0;}
.main-menu li.level3 a {font-size: 18px;}

.main-menu ul li.level1:hover > ul {display: block;}



.breadcrumb {background: none; padding:0;}
.breadcrumb li {margin-bottom:0;}
.breadcrumb li.separator {margin:0 8px; color:#999;}


.landing-cover {padding:100px 0 ;}
.h-top {padding:20px 0 20px 0;}
.h-bottom {padding: 15px 0;}

.frame {position: relative; padding: 40px 40px 40px 40px;}
.frame .frame-border {position: absolute; top:0; bottom:0; left:0; width:200px; border:solid 4px #DDB973; border-right:none;}
.frame .frame-border .top-p, .frame .frame-border .bot-p {position: absolute; top:0; right:0; width:4px; height: 20px; background:#DDB973;}
.frame .frame-border .bot-p {bottom:0; top:auto;}

.frame h1 {font-size: 48px; margin-bottom: 10px;}
.frame .info {position: relative; z-index: 10;}

.t-frame {padding: 50px; background: rgba(28,33,38,0.5); box-shadow: 0 0 20px rgba(89,205,255,.5);}
.series-box {padding: 30px; background: rgba(28,33,38,0.5);}

.series a {display: block;}
.series a.img {display: flex; justify-content: center; width:130px; height: 130px; margin:0 auto 15px auto;}



.address {position:relative;}
.address .call-icon {display:block; width:48px; height:48px; position:absolute; top:0px; right:0; background:url(../img/phone-blue.svg) center center no-repeat; background-size:contain;}

.rub {display: inline-block; white-space: nowrap;}

.modal-dialog.modal-custom {max-width: 355px;}
.modal-dialog.modal-custom .modal-content {background:#2b3540; }
.modal-dialog.modal-custom .modal-header  {position: relative;}
.modal-dialog.modal-custom .modal-header .modal-title  {}
.modal-dialog.modal-custom .modal-header .close {position: absolute; background: #c30; color: #fff; right:6px; top: 6px; padding: 10px;}
.modal-dialog.modal-custom .modal-header .close span {display: block;}
.modal-custom .modal-content  {padding:10px;}


.card-model {background:#2b3540; box-shadow: 3px 3px 5px rgba(0,0,0,.2);}

.specs table {background: none; width: 100%;}
.specs table td {background: none; padding: 8px 8px 8px 0; font-size: 16px; color:#c3c5c7; border-bottom: solid 1px #36414c;}
.specs table tr > td {width:66%;}

.model-preview {background:#303942; padding:15px; border: solid 1px #36414c;}
.model-preview.active {background:#424e5a;  border:solid 1px #5c6d7d;}



.gallery-item {display: block; margin:0 1px 1px 0;}

.model-desc p {font-size: 20px; font-weight: 300;}

.catalog-menu ul {list-style:none; margin:0; padding:0;}
.catalog-menu ul ul {margin-left:20px; margin-bottom: 20px;}
.catalog-menu li {font-size: 20px;}
.catalog-menu ul ul li {font-weight: 300;}
.catalog-menu ul ul li.active a {color:#fff;}


.technology .h3 {position: relative; padding-bottom: 30px;}
.technology .h3:after {content:""; position:absolute; bottom: 0; left:0; width: 200px; background:#59CDFF; height:3px; display: block;}

.technology .t-image {height: 300px;}
.technology .t-image img {max-height: 100%; max-width:100%;}


.icon-item {position: relative; padding:0 0 10px 50px; min-height: 80px;}
.icon-item i {display:block; position:absolute; top:8px; left:0; width: 36px; height:36px; background-position: center center; background-repeat: no-repeat; background-size: contain;}
.icon-item span {display:block; padding-top: 5px; font-size: 21px; font-weight: 300;}
.icon-item.icon-1 i {background-image:url(../img/shield-tick.svg);}

.category-box {padding:40px;}

footer {background:#161d23;}
footer .logo {max-width: 240px;}

/* 2023 */

.index-grid {display: grid; gap:0; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; width: 100%; min-height:100vh; margin-bottom:50px;
    grid-template-areas: 
    "sidebar slider slider"
    "sidebar slider slider"
    "sidebar promo-r promo-l"; }

.index-grid__sidebar { grid-area: sidebar; background-color: #34393E; padding: 30px; display: flex; flex-direction: column; justify-content: space-between;}
.index-grid__sidebar .logo {max-width: 360px;}
.index-grid__sidebar .site-title h1 {line-height: 1.1;}
.index-grid__slider {grid-area: slider; background-color: #34393E; display: flex; position: relative; padding-top: 60px; align-items: flex-end;}
.index-grid__slider .swiper {height: 100%;}
.index-grid__slider .main-menu {background-color: rgba(0,0,0,.3); padding: 10px 30px; position: absolute; top:0; left:0; right:0;}
.index-grid__promo-left { grid-area: promo-r; background-color: #F15642;}
.index-grid__promo-right { grid-area: promo-l; background-blend-mode: multiply;}

.index-grid .swiper-slide {background-position: center; background-repeat: no-repeat; background-size: cover; display: flex; flex-direction: column-reverse;position:relative;}

.index-grid .swiper-slide:before {background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); display: block; content: ""; position: absolute; left:0; right:0; top:0; bottom:0;}

.index-grid .swiper-slide-text {padding: 50px; position: relative; z-index: 10; max-width: 75%;}

.item-category-compact {display: flex;}
.item-category-compact .image {margin-right: 20px;}
.item-category-compact .image img {display: block;}
.item-category-compact .title {font-size: 24px; margin-bottom: 10px;  line-height: 1.1;}
.item-category-compact .subcat ul {display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin:0;}
.item-category-compact .subcat ul li {margin: 0 10px 3px 0;}
.item-category-compact .subcat ul li a {display: inline-block; color: #FFF; font-size: 16px; font-weight: 300;}
.item-category-compact .subcat ul li a:hover {color: #DDB973;}


.news {position: relative; padding: 30px;}
.news-title {font-size: 32px; color: #fff; line-height: 1; margin-bottom: 25px;}
.news-list {display: flex;}
.news-list__item {margin-right:20px; padding-right: 20px; border-right: solid 1px  #fff;}
.news-list__item a {display: block; margin-bottom: 15px;}
.news-list__item span {display: block; font-size: 13px; color:rgba(255,255,255,.8);}
.news-list__item:last-child {margin-right:0; padding-right: 0; border-right: none;}


.item-project {min-height: 450px;}

.niche {padding: 30px;}
.niche-list ul {display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin:0;}
.niche-list ul li {margin: 0 3px 3px 0;}
.niche-list ul li a {display: inline-block; padding: 10px 15px; color: #fff; border-radius: 5px; background-color: rgba(0,0,0,.2);}
.niche-list ul li a:hover {background-color: rgba(0,0,0,.4);}

.gallery {display: flex; flex-wrap: wrap;}
.gallery a {display: inline-block; margin:0 1px 1px 0;}
.gallery a img {display: inline-block;}


@media (max-width: 1400px) {
    .site-title h1 {font-size: 28px;}
    .item-category-compact .title {font-size: 21px;}
    .item-category-compact .image img {width:90px;}
    .item-category-compact .subcat ul li {line-height: 1.1 ;}
    .item-category-compact .subcat ul li a {line-height: 1.1 ;}
}


@media (max-width: 1200px) {

}

@media (max-width: 992px) {
    .index-grid {display: block;  height:auto}
    .index-grid .swiper-slide-text {max-width: 80%;}


}

@media (max-width: 768px) {



}
    



@media (max-width: 576px) {

    
    
    .mobile-navbar .phone span {display: none;}
    .frame {padding:20px;}
    .frame .frame-border {display: none;}
    .page-top.limiter {padding: 0;}
    .limiter {padding: 20px;}
    .frame h1 {font-size: 2rem;}

    h2, .h2 {font-size: 24px;}
    h3, .h3 {font-size: 20px;}
    p {font-size: 16px;}
    .index-bg.p40 {padding:10px;}
    .inner-bg.p40 {padding:10px;}
    .index-bg .pv15, .inner-bg .pv15  {padding:0;}
    .index-bg .btn, .inner-bg .btn {display: block; margin-bottom: 15px;}
    .inner-bg .info {padding:0 20px;}
    .btn-lg {font-size: 16px;}
    .page-top .logo-block {margin-bottom:0;}
    .page-top .logo {margin:0;}
    .series .text {font-size: 15px;}
    .category-box {height:auto;}
    .technology .t-image {height: auto;}
    .category-box {padding:20px;}
    .t-frame {padding:20px;}
    p.lead {font-size: 20px;}
    .specs table td, .breadcrumb li {font-size: 14px;}

    .index-grid__sidebar .site-title h1 {font-size: 2rem;}
    .index-grid {display:block; height:auto;}
    .index-grid .swiper-slide {min-height:60vh; height: auto;}
    .index-grid .swiper-slide-text {max-width: 100%;}
    .index-grid__sidebar .logo {max-width: 220px;}

    .item-category-compact {flex-direction: column;}

}

@media (max-width: 320px) {
    
    
    
}