@media (max-width: 1600px) {
    h1 {font-size: 95px;}
}

@media (max-width: 1400px) {
    h1 {font-size: 88px;}
    .see {margin: 20px 0 0 0;}
}

@media (max-width: 1200px) {
    h1 {font-size: 77px;}
}

@media (max-width: 1000px) {
    header {display: flex; align-items: center; height: 106px;}
    header .container {align-items: center; width: 100%;}
    .sigla {top: initial; width: 140px;}
    .sigla:before {display: none;}
    .sigla img {display: flex;}
    nav {
        position: absolute; top: 90px; right: 0; z-index: 10;
        width: 200px;
        background: #fff;       
        border-radius: 0 0 5px 5px;
        max-height: 0;
        padding: 0 20px;
        overflow: hidden;
        transition: all 0.5s;
        border: 0;
        margin-right: 0;
    }
    nav.active {
        max-height: 325px; 
        padding: 20px; 
        /*border: 1px solid #E8E3DB; border-top: 0;*/
    }


    nav ul {display: block; width: 100%;}
    nav li {display: block;}
    nav a {
        display: block;
        padding: 10px 0;
        text-transform: uppercase;
        font-size: 15px;
        border-bottom: 1px solid var(--border2);
    }
    .lang {position: static; margin: 15px 0 0 0;}
    
    .but-mobil {
        position: relative;
        display: flex; flex-wrap: wrap;
        justify-content: center; align-items: center;
        width: 60px; height: 60px;
        border: 1px solid #E8E3DB;
        border-radius: 5px;
        cursor: pointer;
    }
    .but-mobil em {
        position: absolute; left: 14px;
        display: flex; width: 30px; height: 3px;
        border-radius: 100px;
        background: var(--secondary);
        transition: all 0.5s;
    }
    .but-mobil em:nth-of-type(1) {top: 18px;}
    .but-mobil em:nth-of-type(2) {top: 28px;}
    .but-mobil em:nth-of-type(3) {top: 38px;}

    .but-mobil.active em:nth-of-type(1) {transform: rotate(45deg); top: 29px;}
    .but-mobil.active em:nth-of-type(2) {opacity: 0;}
    .but-mobil.active em:nth-of-type(3) {transform: rotate(-45deg); top: 29px;}

    .hero {display: flex; flex-wrap: wrap; padding: 60px 0;}
    .mini {order: 10;}
    h1 {order: 20; font-size: 58px;}
    .hero .text {order: 30; width: 100%; float: none;}

    .grid-col2 {grid-template-columns: repeat(1, 1fr);}

    .acordeon {padding: 0; margin-top: 80px;}
    .acordeon .left {display: none;}
    .acordeon .right {width: 100%;}
    .linie {display: block; padding: 0;}
    .linie h4 {
        position: relative;
        display: block;
        font: 500 32px/1 inter;
        color: var(--inactive-link);
        padding: 40px 50px 40px 0;
        border-bottom: 2px solid var(--border1);
    }
    .linie:first-child h4 {border-top: 2px solid var(--border1);}
    .linie h4:after {
        content: "";
        position: absolute; top: 50%; right: 0; transform: translateY(-50%);
        display: flex; justify-content: center; align-items: center;
        width: 28px; height: 28px;
        background: var(--inactive-link);
        transform-origin: center;
        -webkit-mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-image: url(../img/arrow_forward_ios_24dp_1F1F1F_FILL0_wght300_GRAD0_opsz24.svg);
        transition: all 0.5s;
    }
    .linie h4.active {color: var(--secondary); border-bottom: 2px solid var(--secondary);}
    .linie h4.active:after {transform: rotate(90deg); margin-top: -10px;}
    .linie .text {display: none; padding: 40px 0 0 0;}

    .independent .container {padding: 60px 0;}
    .independent .left {
        width: 100%;
        border-bottom: 1px solid #DEDACE;
        padding: 0 0 40px 0; margin: 0 0 40px 0;
    }
    .independent .right {width: 100%;}
    .black-banner {padding: 60px 16px;}
    .black-banner h3 {font-size: 32px;}
    hr {display: none;}

}


@media (max-width: 768px) {
    footer .container {
        grid-template-columns: repeat(1, 1fr);
        padding: 60px 0;
    }
    footer .left {text-align: center; margin-bottom: 60px;}
    .sigla-footer {margin: 0 auto 32px auto;}
}

@media (max-width: 576px) {
    header .container {padding: 0px 16px;}
    .hero {padding: 60px 16px;}
    .banner .desk {display: none;}
    .banner .mob {display: flex;}
    .banner img {height: 54vw; object-fit: cover;}
    .continut {padding: 40px 16px; margin: 16px;}
    .independent {padding: 0 16px;}
    .font24 {font-size: 18px;}
    .font24 br {display: none;}
    footer .container {padding: 60px 16px;}
    footer .right a {margin: 8px 0 32px 0;}
}

@media (max-width: 450px) {
    h1 {font-size: 13vw;}
}