@charset "UTF-8";
* {
    margin: 0;
    padding: 0;
}
html {width: 100%; overflow-x: hidden;}
body {width: 100%; background: #1A1A1A; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 300; color: #FFF; overflow: hidden;}
html.fixed {overflow: hidden !important;}
body * {box-sizing: border-box; position: relative; z-index: 1;}
jdiv {box-sizing: content-box; position: static;}





img.yandex_metrika {position: absolute; left: -999px;}
        

        
    body.light-theme {background: #fafafa; color: #363636; transition: 0.4s;}
    body.light-theme a {color: #FBB024;}
    body.light-theme header logo svg {fill: #363636;}
    body.light-theme .grid_item {color: #363636; border: 1px solid #363636;}






        
        

        

        

        


        


            
    .section_grid span {color: #FFF !important;}
    section#otherwise {z-index: 3;}

    .table {width: 100%; overflow-y: hidden; overflow-x: scroll; border-radius: 4px;}
    .table table {width: 100%; overflow: hidden; font-size: 24px; font-weight: 300; font-style: normal;}
    .table table tr th {background: #FCCF3F; color: #1A1A1A; text-decoration: none;}
    .table table tr td {border-left: 1px solid #e6e6e6; background: #f8f8f8; border-right: 1px solid #fff; border-bottom: 4px solid #e6e6e6; color: #000; text-decoration: none;}
    
    .table table tr * {padding: 10px 16px 10px 16px;}
    .table table tr td:first-child {border-left: none;}
    .table table tr td:last-child {border-right: none;}

    .workspace {width: 100%; padding: 0 24px; display: flex; flex-direction: column; gap: 44px; margin: 0 auto; transition: 0.4s; z-index: 12; overflow: hidden;}
    .tariff_services, .text {display: flex; flex-direction: column; gap: 44px;}
    
    a {color: #FCCF3F;}

    h1 {text-transform: uppercase; font-weight: 900; font-size: 36px; margin: 0 0 0px 0;}
    h2 {text-transform: uppercase; font-weight: 900; font-size: 36px; margin: 0 0 0px 0;}
    h3 {text-transform: uppercase; font-weight: 900; font-size: 36px; margin: 0 0 0px 0;}
    h4 {text-transform: uppercase; font-weight: 900; font-size: 32px; margin: 0 0 0px 0;}

    blockquote {margin-left: 10px; padding-left: 20px; display: flex; flex-direction: column; gap: 44px; font-style: italic; border-left: 3px solid #FBB024;}
    svg.declensions_map {z-index: -1; margin: -300px 0 -400px 0; fill: #3f3f3f;}

    p {font-size: 24px; font-weight: 300; font-style: normal;}
    ul {font-size: 24px; margin: 0 0 36px 56px;}
    

    header {width: 100%; position: fixed; overflow: hidden; z-index: 99; transition: 0.4s;}
    header .workspace {margin: 36px auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; flex-direction: row;}

    header.active {background: rgba(26, 26, 26, 0.9); box-shadow: 0px 0px 22px -6px rgba(26, 26, 26, 0.6);}
    header.active .workspace {width: 100% !important; margin: 16px auto;}
    header.active logo svg {height: 24px;}
    header.active logo span {display: none;}
    header.active nav a {color: #FFF;}
    header.active nav a:hover {color: #FCCF3F;}
    header.active burger::before, header.active burger::after {background: #FFF;}
    header.active geo {padding: 8px 18px; color: #FFF; border-color: #FFF;}
    header.active geo:hover {color: #1A1A1A; background: #FFF;}

    header nav {display: none; flex-wrap: wrap; align-items: center; gap: 24px; font-weight: 500;}
    header nav a {color: #1A1A1A; transition: 0.4s; text-decoration: none;}
    header nav a:hover {color: #FFF; text-decoration: underline;}
    
    
    header.light nav a {color: #FFF;}
    header.light nav a:hover {color: #FCCF3F;}
    header.light burger::before, header.light burger::after {background: #FFF;}
    

    header logo svg {fill: #FFFFFF; fill-rule: evenodd; height: 32px; margin: 0; transition: 0.4s;}
    header logo span {font-size: 14px; display: block;}

    header burger {width: 30px; height: 14px; display: block; cursor: pointer; transition: 0.4s;}
    header burger::before, header burger::after {content: ''; width: 100%; height: 2px; position: absolute; display: block; background: #FFF; transition: 0.4s;}
    header burger::before {top: 0;}
    header burger::after {bottom: 0;}

    header burger.nav::before {transform: rotate(45deg); top: 4px; transition: 0.4s;}
    header burger.nav::after {transform: rotate(-45deg); bottom: 8px; transition: 0.4s;}

    header geo {display: none; color: #1A1A1A; border: 1px solid #1A1A1A; border-radius: 47px; cursor: pointer; padding: 12px 24px; transition: 0.4s;}
    header geo:hover, header geo.active {color: #FFF; background: #1A1A1A;}

    navi {width: 100%; height: 100%; opacity: 0; position: fixed; overflow: hidden; z-index: 0; background: rgba(26, 26, 26, 0.95); transition: 0.4s;}
    navi h2 span {color: #FBB024;}
    navi.active {opacity: 1; z-index: 98; transition: 0.4s;}
    navi .workspace {width: 100%; margin: 128px auto; display: flex; flex-wrap: nowrap; flex-direction: column;}
    navi .workspace .child {display: flex; gap: 44px; width: 100%;flex-direction: column;}
    navi .child:first-child {display: none;}
    
    navi h2 {font-size: 44px;}
    
    navi .child:last-child {gap: 24px;}
    navi ul.child {list-style-type: none; margin: 0 !important; padding: 0 !important;}
    navi ul.child ul {list-style-type: none; margin: 16px 0 0 16px !important; padding: 0 !important;}
    navi ul.child ul li {margin: 16px 0 0 0 !important; padding: 0 !important;}
    navi ul.child li {list-style-type: none; margin: 0 !important; padding: 0 !important; text-transform: uppercase; font-weight: 900; font-size: 24px;}
    navi ul.child li a {color: #FFF;}
    navi ul.child li a:hover {color: #FCCF3F;}
    
    

    geography {width: 100%; height: 100%; opacity: 0; position: fixed; overflow: hidden; z-index: 0; background: rgba(26, 26, 26, 0.95); transition: 0.4s;}
    geography.active {opacity: 1; z-index: 98; transition: 0.4s;}
    geography .workspace {width: 100%; margin: 128px auto; display: flex; flex-wrap: wrap; gap: 64px; flex-direction: column; justify-content: space-between;}
    geography h2 {text-transform: uppercase; font-weight: 900; font-size: 44px; margin: 0 0 0 0;}
    geography h2 span {color: #FBB024;}

    geography ul {margin: 0; display: flex; flex-wrap: wrap; flex-direction: column; font-size: 18px;}
    geography ul li {display: block; width: 25%;}
    geography ul li a {color: #FFF;}
    
    ul.declensions_list {margin: 0; display: flex; flex-wrap: wrap; flex-direction: row; font-size: 18px;}
    ul.declensions_list li {width: 50%; display: block;}
    ul.declensions_list li a {color: #FFF;}
    
    
    .banner_txt {font-size: 24px; font-weight: 500; font-style: normal; margin-bottom: 44px;}
    
    
    .text span {color: #FBB024;}
    .text b, .text strong {color: #FBB024;}
    
    .presentation_text {font-size: 24px; font-weight: 500; font-style: normal;}
    .presentation_text.after_icon_set {color: #9e9e9e;}
    .presentation_text span {color: #FBB024;}
    .presentation_text b {color: #FBB024;}
    .presentation_text s {color: #FCCF3F;}
    
    .im_not_mobile {display: none;}
    
    
    .button {display: flex; cursor: pointer; justify-content: center; align-items: center; text-decoration: none; font-weight: 500; font-size: 24px; border: 4px solid rgba(255, 255, 255, 0.45); border-radius: 47px; width: 100%; transition: 0.45s; overflow: hidden; position: relative; background: #1A1A1A; color: #FFFFFF;}
    .button div {padding: 12px 24px; text-align: center;}
    
    
    
    
    
    
    
    .buttons {width: 100%; display: flex; align-items: center; gap: 16px; flex-direction: column; justify-content: space-between;}
    .buttons .button {transition: 0.45s;}
    .buttons .button:first-child:hover div {background-image: repeating-linear-gradient(45deg, #FB8222, #FB8222 20px, #FB8C32 20px, #FB8C32 40px); animation: candies 3s linear infinite; transition: 0.45s; background-size: 400% 100%; width: 100%; height: 100%;}
    .buttons .button:last-child:hover div {background-image: repeating-linear-gradient(45deg, #FBB024, #FBB024 20px, #FBB83C 20px, #FBB83C 40px); animation: candies 3s linear infinite; transition: 0.45s; background-size: 400% 100%; width: 100%; height: 100%;}
    @keyframes candies {
        0% {background-position: 100% 50%;}
        100% {background-position: 50% 100%;}
    }
    
    
    /* banner */
    section#banner {width: 100%;}
    
    section#banner .presentation {display: flex; flex-direction: column; gap: 44px; width: 100%; padding: 880px 0 0 0; z-index: 5;}
    
    section#banner h2 {text-transform: uppercase; font-weight: 900; font-size: 76px; margin: 0;}
    section#banner h2 span {display: none;}

    section#banner .presentation_text {width: 100%; padding: 0; z-index: 5;}
    
    section#banner .presentation_portfolio {height: 80px; display: flex; gap: 0px;}
    section#banner .presentation_portfolio div:first-child {width: 80%; position: relative;}
    section#banner .presentation_portfolio div:last-child {width: 120%; padding: 20px 0 0 0;}
    
    section#banner .presentation_portfolio div img {width: 80px; height: 80px; border-radius: 80px; border: 2px solid #FFF; position: absolute;  top: 0; background: #1A1A1A; object-fit: cover; background-size: cover;}
    
    section#banner .presentation_portfolio div:first-child a:nth-child(n+3) {display: none;}
    
    section#banner .presentation .advantages {display: flex; flex-direction: column; justify-content: space-between; gap: 16px; align-items: center;}
    section#banner .presentation .advantages div {width: 100%; display: flex; gap: 16px; align-items: center;}

    .businessman {width: 600px; position: absolute; z-index: 10; top: 100px; right: -100px;}
    .businessman img {width: 600px; opacity: 1;}
    
    /* .businessman {width: 400px; position: absolute; z-index: 10; top: 100px; right: -100px;} */
    /* .businessman img {width: 400px; opacity: 1;} */
    /* banner */
    
    
    
    
    
    

    
    
    
    

    

    input[type="text"], input[type="password"], textarea, select {border: none; display: block; background: none; outline: none; -webkit-appearance: none; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 300;}
    input[type="text"], input[type="password"], select, textarea {width: 100%; color: #FFF; border: 1px solid #FFF; border-radius: 56px; height: 56px; padding: 0 24px; transition: 0.4s;}
    textarea {border: 1px solid #3F3F3F; border-radius: 6px; padding: 24px; height: 400px;}
    
    
    
    breadcrumbs {display: block; z-index: 9; padding: 140px 0px 60px 0px;}
    ul#breadcrumbs {
        list-style-type: none;
        margin: 0;
    }
    #breadcrumbs li {
      display: inline-block;
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      color: #ACACAC;
    }
    #breadcrumbs li:not(:last-child)::after {
      content: ' — ';
      margin-right: 4px;
    }
    
    
    
    .section_grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); grid-gap: 44px;}
    
    
    
    
    .grid_item {width: 100%; position: relative; text-decoration: none; color: #FFF; height: 340px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #FFFFFF; transition: 0.4s; overflow: hidden;}
    .grid_item img {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: 0.4s;}
    
    .grid_item .rectangle {display: block; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition-property: transform; transition-duration: 1s; transition: 0.3s;}
    
    .grid_item h4 {position: relative; z-index: 2; font-weight: 700; font-size: 24px; text-transform: uppercase;}
    
    .grid_item.blog_item h4 {z-index: 0;}
    .grid_item.blog_item .section_grid_item_description {z-index: 0;}
    .grid_item.blog_item .section_grid_item_footer {z-index: 0;}
    
    
    .grid_item.product_item {padding: 24px; height: auto !important; gap: 24px;}
    .grid_item.product_item img {width: calc(100% + 48px) !important; height: 340px !important; position: relative; margin: -24px 0 0 -24px;}
    
    .product_item .product_buttons {display: flex; gap: 1px; position: absolute; top: 16px; right: 16px; z-index: 2;}
    .product_item .product_button_price {background: #1A1A1A; border-radius: 24px 0 0 24px; display: block; padding: 6px 8px 6px 16px;}
    .product_item .product_button_rent {background: #1A1A1A; border-radius: 0px 24px 24px 0; display: block; padding: 6px 16px 6px 8px;}
    

    .grid_item .section_grid_item_description {position: relative;
    z-index: 2;
    font-weight: 300;
    font-size: 16px;
    line-height: 20px;}
    
    .grid_item .section_grid_item_description p {font-size: 16px; margin: 0;}
    
    .grid_item .section_grid_item_footer {position: relative;
    z-index: 2;
    font-weight: 900;
    font-size: 18px;
    text-transform: uppercase;
    text-decoration: none;
        color: #FB8222;
    }
    .grid_item .section_grid_item_footer s {color: #FCCF3F;}
    
    .grid_item.blog_item:hover h4 {z-index: 2;}
    .grid_item.blog_item:hover .section_grid_item_description {z-index: 2;}
    .grid_item.blog_item:hover .section_grid_item_footer {z-index: 2;}
    
    .grid_item:hover * {color: #FFF !important;}
    .grid_item:hover .rectangle {opacity: 1; z-index: 2; transition: 0.3s;}
    
    .grid_item.light:hover * {color: #000 !important;}
    .grid_item.light:hover .rectangle {opacity: 1; z-index: 2; transition: 0.3s;}
    
    
    
    section#portfolio .section_grid {display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: 0; justify-content: center; margin: 44px auto;}
    section#portfolio .grid_item {border: none;}
    
    .grid_item .rectangle.black {background: #1A1A1A;}
    .grid_item:hover .rectangle.black {opacity: 0.8;}
    
    /*
    .b_1 a .b3_back {background: #1A1A1A; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: 0.3s; z-index: 2;}
    .b_1 a:hover .b3_back {opacity: 0.6; transition: 0.3s;}
    */
    
    
    
    
    
    .swiper {z-index: 47; margin: 60px auto;}
    .swiper-wrapper {height: auto;}
    .grid_item.swiper-slide {width: 340px; border-left: none;}
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    section {width: 100%; margin: 0 auto 60px auto;}
    section section {width: 100%; margin: 60px auto;}
    
    section.services {color: #1A1A1A !important;}
    section.services .presentation_text span {color: #1A1A1A;}
    
    section.blog {color: #1A1A1A !important;}
    section.blog .presentation_text a {color: #1A1A1A;}
    
                            
    section#tariffs {z-index: 3;}
    .tariff_services h3 {display: block; padding: 24px; border: 1px solid #FFF; text-transform: uppercase; font-weight: 900; font-size: 24px;}
    
    
    
    section#portfolio_item .presentation_text {margin-bottom: 44px;}
    section#portfolio_item .text:first-child {margin-top: 44px;}
    section#portfolio_item img {width: 100%;}
    
    
    
    
    .pulse_1 {
        width: 600px;
        top: 100px;
        right: -100px;
        position: absolute;
        margin: 0px auto 0px auto;
        z-index: 3;
        animation: pulse_1 7s linear infinite;
    }
    .pulse_1 img {
        width: 600px;
        animation: rotation_1 20s linear infinite;
        opacity: 0.8;
    }
    @keyframes pulse_1 {
        0% {transform: scale(.84);}
        50% {transform: scale(1.1);}
        100% {transform: scale(.84);}
    }
    @keyframes rotation_1 {
        0% {transform:rotate(0deg);}
        100% {transform:rotate(-360deg);}
    }
    
    .pulse_2 {
        width: 800px;
        top: 0px;
        right: -200px;
        position: absolute;
        z-index: 2;
        margin: 0px auto 0px auto;
        animation: pulse_2 10s linear infinite;
    }
    .pulse_2 img {
        width: 800px;
        animation: rotation_2 10s linear infinite;
        opacity: 0.8;
    }
    @keyframes pulse_2 {
        0% {transform: scale(.90);}
        50% {transform: scale(1.1);}
        100% {transform: scale(.90);}
    }
    @keyframes rotation_2 {
        0% {transform:rotate(60deg);}
        100% {transform:rotate(420deg);}
    }
    
    .pulse_3 {
        width: 1000px;
        top: -100px;
        right: -300px;
        position: absolute;
        z-index: 1;
        margin: 0px auto 0px auto;
        animation: pulse_3 10s linear infinite;
    }
    .pulse_3 img {
        width: 1000px;
        animation: rotation_3 15s linear infinite;
        opacity: 1;
    }
    @keyframes pulse_3 {
        0% {transform: scale(.94);}
        50% {transform: scale(1.1);}
        100% {transform: scale(.94);}
    }
    @keyframes rotation_3 {
        0% {transform:rotate(137deg);}
        100% {transform:rotate(497deg);}
    }
    
    .pulse_4 img {
        width: 800px;
        animation: rotation_1 10s linear infinite;
        opacity: 0.8;
    }
    .pulse_4 {
        width: 800px;
        top: 0px;
        left: -200px;
        position: absolute;
        z-index: 2;
        margin: 0px auto 0px auto;
        animation: pulse_1 10s linear infinite;
    }
    
    .pulse_5 img {
        width: 1000px;
        animation: rotation_2 15s linear infinite;
        opacity: 1;
    }
    .pulse_5 {
        width: 1000px;
        top: -100px;
        left: -300px;
        position: absolute;
        z-index: 1;
        margin: 0px auto 0px auto;
        animation: pulse_3 10s linear infinite;
    }
    
    
    
    
    
    .lower_wave::before{
        z-index: 13;
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        background-repeat: repeat;
        height: 10px;
        background-size: 20px 20px;
        background-image: radial-gradient(circle at 10px -5px, transparent 12px, #1A1A1A 13px);
    }
    .lower_wave::after{
        z-index: 13;
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        background-repeat: repeat;
        height: 15px;
        background-size: 40px 20px;
        background-image: radial-gradient(circle at 10px 15px, #1A1A1A 12px, transparent 13px);
    }
    .upper_wave::before{
        z-index: 13;
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        background-repeat: repeat;
        height: 10px;
        background-size: 20px 20px;
        background-image: radial-gradient(circle at 10px -5px, transparent 12px, #1A1A1A 13px);
        transform: scale(1,-1);
    }
    .upper_wave::after{
        z-index: 13;
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        background-repeat: repeat;
        height: 15px;
        background-size: 40px 20px;
        background-image: radial-gradient(circle at 10px 15px, #1A1A1A 12px, transparent 13px);
        transform: scale(1,-1);
    }
    
    
    section#bonus {background: #FCCF3F; background: repeating-radial-gradient(circle, #FCCF3F, #FCCF3F 60px, #FCD659 60px, #FCD659 120px); overflow: hidden;}
    
    section#bonus .presentation {display: flex; flex-direction: column; gap: 44px; width: 100%; padding: 0px 0 0 0; z-index: 5;}
    section#bonus h3 {color: #FEF5D7;}
    section#bonus h3 span {color: #FB8222;}
    
    section#bonus .workspace {padding: 64px 24px;}
    section#bonus .businessman {display: none;}
    section#bonus .button {background: none !important;}
    


    footer {
        width: 100%;
        overflow: hidden;
        padding: 0 0 64px 0;
        text-align: center;
    }
    footer .workspace {
        align-items: center;
    }
    footer a.footer_logo_link {display: block; align-self: center;}
    footer div {
        width: 100%;
    }
    
    
    
    .promo {margin: 44px 0 44px 0;}
    .promo img {width: 100%; height: 280px; object-fit: cover;}
    section#blog-article section#bonus {margin: 44px 0 44px 0;}
    
    
    .share {background: #75c1ff; margin: 100px 0 0 0;}
    .share .workspace {padding: 44px 0;}
    .share .ya-share2 * {text-align: center;}
    
    navi .share {background: none; margin: 0;}
    navi .share .ya-share2 * {text-align: left;}
    
    .ya-share2__item {margin: 0 10px 0 0 !important;}
    .ya-share2__item:last-child {margin: 0 !important;}
    .ya-share2__item:nth-child(5) {margin: 0 !important;}
    .ya-share2__item:nth-child(n+6) {display: none !important;}
        
    
    
    .contacts_grid {
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        transition: 0.4s;
        gap: 44px;
    }
    .contacts_grid div {
        width: 100%;
    }
    #map {
        height: 340px;
        overflow: hidden;
        border: 12px solid #FCCF3F;
        border-radius: 4;
    }
    

    @media(min-width: 576px) {
        
        blockquote {margin-left: 60px; padding-left: 40px;}
        svg.declensions_map {margin: -600px 0 -400px 0;}
        
        ul.declensions_list {flex-direction: row;}
        ul.declensions_list li {width: 25%;}
        
        h1 {font-size: 90px;}
        h2 {font-size: 90px;}
        h3 {font-size: 60px;}
        .workspace {padding: 0 44px;}
        
        .contacts_grid {flex-direction: row;}
        #map {height: 400px;}
        
        .promo img {width: 100%; height: 660px; object-fit: cover;}
        
        .ya-share2__item:nth-child(5) {margin: 0 10px 0 0 !important;}
        .ya-share2__item:nth-child(n+6) {display: inline-block !important;}
        
        footer {padding: 0 0 64px 0; text-align: left;}
        footer div {width: 380px;}
        footer .workspace {
            flex-direction: row;
            align-items: flex-start;
            flex-wrap: wrap;
        }
        footer a.footer_logo_link {margin-left: auto; align-self: flex-end;}
        
        .presentation_text {font-size: 36px;}
        
        section#banner h2 {font-size: 90px;}
        .businessman {right: 0px;}
        
        .pulse_1 {right: 100px;}
        .pulse_2 {right: 0px;}
        .pulse_3 {right: -100px;}
        
        .buttons, section#banner .presentation_portfolio {width: 480px; flex-direction: row;}
        
        section#banner .presentation_portfolio div {width: 100% !important;}
        section#banner .presentation_portfolio div:first-child a {display: block !important;}
        
        section#banner .presentation .advantages {gap: 44px; flex-direction: row;}
        
        .grid_item {padding: 44px; height: 408px;}
        .grid_item.swiper-slide {width: 408px;}
        
        .grid_item.product_item {padding: 36px;}
        .grid_item.product_item img {width: calc(100% + 72px) !important; height: 408px !important; margin: -36px 0 0 -36px;}
        
        section {margin: 0 auto 120px auto;}
        section section {width: 100%; margin: 120px auto;}
        
        section.services {color: #FFFFFF !important;}
        section.services .presentation_text span {color: #FBB024;}
        
        section.blog {color: #FFFFFF !important;}
        section.blog .presentation_text a {color: #FBB024;}
        
        section#portfolio .section_grid {grid-template-columns: repeat(3, 1fr);}
        
        section#bonus .businessman {display: block;}
        section#bonus .workspace {padding: 96px 44px;}
        section#bonus .presentation {width: 80%;}
        
        geography ul {flex-direction: row;}
        navi .workspace {flex-direction: row;}
        navi .child:first-child {display: flex;}
        
    }
    @media(min-width: 768px) {
        header geo {display: block;}
        section#banner .presentation {width: 440px; padding: 160px 0 0 0;}
        section#banner .presentation_text {width: 320px;}
        section#banner .presentation_text span {color:#FFF;}
        header burger::before, header burger::after {background: #1A1A1A;}
        header.light burger::before, header.light burger::after {background: #FFFFFF;}
        /* .grid_item img {height: 408px;} */
        breadcrumbs {padding: 160px 0px 60px 0px;}
        
        .grid_item h4 {font-size: 30px;}
        
    }
    @media(min-width: 992px) {
        header logo svg {height: 36px; margin: 0 0 4px 0;}
        header logo svg path.mult {fill: #FBB024;}
        header logo svg path.zavod {fill: #FFF;}
        section#banner h2 span {display: inline;}
        section#banner .presentation {width: 580px;}
        section#banner .presentation_text {width: 440px;}
    }
    @media(min-width: 1200px) {
        header nav {display: flex;}
        header geo {color: #FFF; border-color: #FFF;}
        header geo:hover {color: #1A1A1A; background: #FFF;}
        section#banner .presentation_text span {color:#FBB024;}
        section#banner .presentation_text {width: 100%;}
    }
    @media(min-width: 1400px) {
        .workspace {width: 1400px;}
        header.active {width: 100%;}
        section#banner .presentation {width: 640px;}
    }
    
    
    #modal {opacity: 0; width: 100%; height: 100%; display: flex; flex-direction: column; gap: 24px; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; z-index: 0; transition: 0.4s;}
    #modal.active {opacity: 1; z-index: 99; transition: 0.4s;}
    #modal .layout {width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #1A1A1A; opacity: 0.95;}
    #modal .container {width: 400px; z-index: 99; padding: 0 36px; position: relative; display: flex; flex-direction: column; gap: 24px; justify-content: center; align-items: center;}
    
    #modal .container .content {position: relative; display: flex; flex-direction: column; gap: 24px; justify-content: center; align-items: center;}
    
    #modal h4, #modal span {text-align: center;}
    #modal img {width: 44px;}
    #modal img.preloader {width: auto; height: 44px;}
    
    #modal .button {background: #FFF; color: #1A1A1A;}
    #modal .button:hover {background: #FCCF3F; color: #1A1A1A;}
    
    #modal .cross {width: 30px; height: 14px; z-index: 99; display: block; cursor: pointer; transition: 0.4s;}
    #modal .cross::before, #modal .cross::after {content: ''; width: 100%; height: 2px; position: absolute; display: block; background: #FFF; transition: 0.4s;}
    #modal .cross::before {top: 0; transform: rotate(45deg); top: 4px; transition: 0.4s;}
    #modal .cross::after {bottom: 0; transform: rotate(-45deg); bottom: 8px; transition: 0.4s;}
    
    @media(min-width: 576px) {
        #modal .container {padding: 36px; border: 1px solid #3F3F3F; border-radius: 24px;}
        #modal .cross {position: absolute; top: -14px; right: -30px;}
    }
    
    
    
    


#subd {width: 100%; position: relative; overflow-y: hidden; overflow-x: scroll;}
        
        .swipe {position: absolute; opacity: 0.4; top: 12px; left: 12px; width: 48px; border: none; z-index: 99;}
    
        #devices {width: 1312px; margin: 0 auto; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; position: relative;}
        
        #devices .iPhone {width: 144px; height: 294px; background: url(/extore/frontend/themes/multzavod/design/iPhone.svg) center top no-repeat; background-size: contain;}
        #devices .iPhone .screen {width: 128px; height: 225px; margin: 36px auto 0 auto;}
        #devices .iPhone .screen iframe {display: block; width: 512px; height: 900px; border: none;
        -moz-transform: scale(0.25, 0.25);
        -webkit-transform: scale(0.25, 0.25);
        -o-transform: scale(0.25, 0.25);
        -ms-transform: scale(0.25, 0.25);
        transform: scale(0.25, 0.25);
        -moz-transform-origin: top left;
        -webkit-transform-origin: top left;
        -o-transform-origin: top left;
        -ms-transform-origin: top left;
        transform-origin: top left;}
        
        #devices .iMac {width: 757px; height: 598px; background: url(/extore/frontend/themes/multzavod/design/iMac.svg) center top no-repeat; background-size: contain;}
        #devices .iMac .screen {width: 723px; height: 408px; margin: 23px auto 0 auto;}
        #devices .iMac .screen iframe {display: block; width: 1540px; height: 868px; border: none;
        -moz-transform: scale(0.47, 0.47);
        -webkit-transform: scale(0.47, 0.47);
        -o-transform: scale(0.47, 0.47);
        -ms-transform: scale(0.47, 0.47);
        transform: scale(0.47, 0.47);
        -moz-transform-origin: top left;
        -webkit-transform-origin: top left;
        -o-transform-origin: top left;
        -ms-transform-origin: top left;
        transform-origin: top left;}
        
        #devices .iPad {width: 280px; height: 388px; background: url(/extore/frontend/themes/multzavod/design/iPad.svg) center top no-repeat; background-size: contain;}
        #devices .iPad .screen {width: 244px; height: 348px; margin: 20px auto 0 auto;}
        #devices .iPad .screen iframe {display: block; width: 488px; height: 696px; border: none;
        -moz-transform: scale(0.5, 0.5);
        -webkit-transform: scale(0.5, 0.5);
        -o-transform: scale(0.5, 0.5);
        -ms-transform: scale(0.5, 0.5);
        transform: scale(0.5, 0.5);
        -moz-transform-origin: top left;
        -webkit-transform-origin: top left;
        -o-transform-origin: top left;
        -ms-transform-origin: top left;
        transform-origin: top left;}



        .icons_block {display: grid; gap: 40px;}
        .icon_item {width: 100%; display: flex; gap: 16px;}
        .icon_item img {width: 80px;}
        .icon_item .description {display: flex; flex-direction: column; gap: 8px;}
        .icon_item h4 {font-size: 18px;}
        .icon_item h4 span {color: #FCCF3F;}
        
        @media(min-width: 576px) {
        }
        @media(min-width: 768px) {
            .icons_block {grid-template-columns: 1fr 1fr; padding: 40px 0;}
        }
        @media(min-width: 992px) {
            .swipe {opacity: 0;}
            .icon_item h4 {font-size: 22px;}
        }
        @media(min-width: 1200px) {
            .icon_item h4 {font-size: 18px;}
            .icons_block {grid-template-columns: 1fr 1fr 1fr;}
        }
        @media(min-width: 1400px) {
            .icon_item h4 {font-size: 22px;}
        }