/*===========================================================================================================*/
@media (max-width: 1480px){

    .header .inner,
    .hero .inner,
    .experience .inner,
    .service .inner,
    .brands .inner,
    .about .inner,
    .contact .inner,
    .footer .inner,
    .galheader .inner{
        width: calc(100% - 80px);
    }

    .hero .inner .info{
        width: 60%;
    }

    .gallery.page .inner{
        width: calc(100% - 80px);
        gap: 40px;
    }

}



/*===========================================================================================================*/
@media (max-width: 1300px){

    .service .inner .items .item{
        padding-left: 50px;
        padding-right: 50px;
    }

}

/*===========================================================================================================*/
@media (max-width: 1280px){

    .terms{
        padding-bottom: 50px;
    }
    
    .terms .inner{
        width: calc(100% - 80px);
    }
}

/*===========================================================================================================*/
@media (max-width: 1200px){

    .header .inner .logo{
        height: calc(250px - 25px);
    }

    .hero .inner .info{
        height: calc(100% - 180px + 25px);
        margin-top: calc(180px - 25px);
    }

    .gallery .items .item{
        width: calc(100% / 5);
    }

    .gallery .items .item:nth-last-child(-n+2){
        display: none;
    }

}


/*===========================================================================================================*/
@media (max-width: 1150px){

    .header{
        height: 150px;
    }

    .header .inner .menu{
        flex-direction: column;
        align-items: flex-end;
        gap: 25px;
        justify-content: center;
    }
    
    .header .inner .menu .links{
        height: auto;
    }

    .hero .inner .info{
        width: 70%;
    }

    .service,
    .about,
    .contact{
        padding-top: 75px;
        padding-bottom: 75px;
    }

    .brands .inner .box{
        margin-left: 75px;
    }

    .about .inner .photo{
        margin-right: 75px;
    }

    .service .inner .items .item .type,
    .service .inner .items .item .box{
        margin-left: 75px;
    }

    .gallery.page{
        padding-bottom: 75px;
    }
}

/*===========================================================================================================*/
@media (max-width: 1100px){

    .hero .photo .overlay{
        background: linear-gradient(
            90deg,
            rgba(22, 24, 28, 1) 0%,
            rgba(22, 24, 28, 0.9) 15%,
            rgba(22, 24, 28, 0.7) 27%,
            rgba(22, 24, 28, 0.5) 42%,
            rgba(22, 24, 28, 0.3) 60%,
            rgba(22, 24, 28, 0.12) 80%,
            rgba(22, 24, 28, 0) 100%
        );
    }

    .brands .inner{
        flex-direction: column;
    }

    .brands .inner p.text{
        text-align: center;
    }

    .brands .inner .box{
        margin-left: 0;
        margin-top: 30px;
    }

    .service .inner .items .item{
        display: grid;
        grid-template-columns: 10% 1fr;
        column-gap: 75px;
        row-gap: 20px;
    }

    .service .inner .items .item .number{
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .service .inner .items .item .type{
        grid-column: 2;
        grid-row: 1;
        margin-left: 0; /* nahrazeno column-gap výše, takže margin-left už není potřeba */
    }

    .service .inner .items .item .box{
        grid-column: 2;
        grid-row: 2;
        margin-left: 0; /* stejně tak i tady */
    }

}

/*===========================================================================================================*/
@media (max-width: 980px){

    .hero .photo{
        width: 55%;
    }

    .hero .inner .info{
        width: 75%;
    }

    .hero .inner .info p.sub{
        width: 75%;
    }

    .experience .inner .box{
        gap: 100px;
    }

    .service .inner .items{
        margin-top: 75px;
    }

    .about .inner{
        align-items: flex-start;
    }

    .about .inner .photo{
        width: 250px;
        height: 250px;
    }

    .contact .inner .box .item{
        flex-direction: column;
    }

    .contact .inner .form{
        width: 100%
    }

    .contact .inner .form .group .box{
        width: calc(45% - 25px);
    }

    .contact .inner .form .group .box:nth-child(2){
        width: calc(55% - 25px);
    }

    .gallery.page .inner .block .images .image{
        width: calc(100% / 4);
    }
}

/*===========================================================================================================*/
@media (max-width: 950px){

    .galheader{
        height: 150px;
    }

    .galheader .inner .menu{
        flex-direction: column;
        align-items: flex-end;
        gap: 25px;
        justify-content: center;
    }
    
    .galheader .inner .menu .links{
        height: auto;
    }

    .terms,
    .gallery.page{
        padding-top: calc(100px - 30px);
    }
}

/*===========================================================================================================*/
@media (max-width: 900px){

    .header{
        height: 120px;
    }
    
    .header .inner .menu .links{
        display: none;
    }

    .gallery .items .item{
        width: calc(100% / 4);
    }

    .gallery .items .item:nth-last-child(-n+4){
        display: block;
    }

}


/*===========================================================================================================*/
@media (max-width: 850px){

    .hero .inner .info .tagline{
        margin-top: 50px;
    }

    .hero .inner .info .buttons{
        margin-bottom: 50px;
    }

    .hero .inner .info h1.main{
        font-size: calc(70px / 1.1);
        margin-top: 40px;
    }

    .hero .inner .info p.sub{
        width: 80%;
    }

    .experience,
    .service, 
    .about, 
    .contact,
    .brands{
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .experience .inner .box{
        gap: 75px;
    }

    .service .inner .items{
        margin-top: 50px;
    }

    .contact .inner .box{
        gap: 50px;
    }

    .contact .inner .box .item .text{
        font-size: 17px;
    }

    .gallery.page{
        padding-bottom: 50px;
    }

}


/*===========================================================================================================*/
@media (max-width: 800px){

    .header .inner .logo{
        height: calc(250px - 50px);
    }

    .hero .inner .info{
        height: calc(100% - 180px + 50px);
        margin-top: calc(180px - 50px);
    }

    .experience .inner .box{
        gap: 50px;
    }

    .footer .inner .copy .line{
        flex-direction: column;
    }

    .footer .inner .copy .line .text:nth-child(2){
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }

}


/*===========================================================================================================*/
@media (max-width: 775px){

    .hero .inner .info{
        width: 85%;
    }

    .hero .photo .overlay{
        background: linear-gradient(
            90deg,
            rgba(22, 24, 28, 1) 0%,
            rgba(22, 24, 28, 0.9) 23%,
            rgba(22, 24, 28, 0.7) 36%,
            rgba(22, 24, 28, 0.5) 50%,
            rgba(22, 24, 28, 0.3) 68%,
            rgba(22, 24, 28, 0.12) 88%,
            rgba(22, 24, 28, 0) 100%
        );
    }
    
    .about .inner{
        flex-direction: column;
    }

    .about .inner .photo{
        margin-right: 0;
        margin-bottom: 30px;
    }

    .service .inner .intro h2.text,
    .about .inner .intro h2.text,
    .contact .inner .intro h2.text{
        font-size: calc(40px / 1.1);
    }

    .hero .inner .info p.sub,
    .experience .inner .tagline,
    .service .inner .intro p.text,
    .brands .inner p.text,
    .about .inner .intro p.text,
    .contact .inner .intro p.text{
        font-size: calc(18px / 1.05);
    }

    .experience .inner .box .item .tag{
        text-align: center;
    }

    .experience .inner .box{
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px 50px;
    }

    .service .inner .items .item .type h3.name{
        font-size: calc(30px / 1.1);
    }

    .contact .inner .intro h2.text{
        text-align: center;
    }

    .contact .inner .form .group{
        display: flex;
        flex-direction: column;
    }

    .contact .inner .form .group .box{
        width: 100% !important;
    }

    .contact .inner .form .group .box:nth-child(2){
        margin-left: 0;
        margin-top: 30px;
    }

    .contact .inner .box{
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px 50px;
    }

    .terms .inner h1.head{
        font-size: calc(30px / 1.1);
    }

}

/*===========================================================================================================*/
@media (max-width: 700px){

    .hero .inner .info{
        width: 90%;
    }

    .hero .inner .info h1.main{
        font-size: calc(70px / 1.15);
    }

    .hero .photo .overlay{
        background: linear-gradient(
            90deg,
            rgba(22, 24, 28, 1) 0%,
            rgba(22, 24, 28, 0.9) 28%,
            rgba(22, 24, 28, 0.75) 41%,
            rgba(22, 24, 28, 0.55) 55%,
            rgba(22, 24, 28, 0.35) 73%,
            rgba(22, 24, 28, 0.17) 100%
        );
    }

    .service .inner .items .item{
        padding-left: 0;
        padding-right: 0;
    }

    .contact .inner .form .terms{
        padding-left: 30px;
        padding-right: 30px;
        text-align: center;
    }

    .galheader{
        height: 120px;
    }

    .galheader .inner .menu .links{
        display: none;
    }

    .terms,
    .gallery.page{
        padding-top: 100px;
    }
}


/*===========================================================================================================*/
@media (max-width: 650px){

    .hero .inner .info{
        width: 100%;
    }

    .hero .inner .info h1.main{
        font-size: calc(70px / 1.2);
    }

    .hero .inner .info p.sub{
        width: 90%;
    }

    .service .inner .intro h2.text{
        text-align: center;
    }

    .service .inner .items .item{
        grid-template-columns: 12% 1fr;
        column-gap: 50px;
    }

    .brands .inner .box{
        gap: 50px;
    }

    .brands .inner .box .logo{
        height: calc(50px / 1.1);
    }

    .brands .inner .box .logo:nth-child(1){
        height: calc(40px / 1.1);
    }

    .brands .inner .box .logo:nth-child(3){
        height: calc(70px / 1.1);
    }

    .gallery .items .item{
        width: calc(100% / 3);
    }

    .gallery .items .item:nth-child(-n+3){
        display: none;
    }

    .gallery.page .inner .block .images .image{
        width: calc(100% / 3);
    }

}

/*===========================================================================================================*/
@media (max-width: 600px){

    .header .inner .menu{
        display: none;
    }

    .hero .inner .info h1.main{
        font-size: calc(70px / 1.35);
    }

}


/*===========================================================================================================*/
@media (max-width: 550px){

    .hero .inner .info h1.main{
        font-size: calc(70px / 1.5);
        margin-top: 30px;
    }

    .footer .inner{
        flex-direction: column;
        align-items: flex-start;
    }

    .footer .inner .terms{
        margin-left: 0;
        margin-right: auto;
        margin-top: 10px;
    }

    .footer .inner .terms .item{
        margin-left: 0;
        padding-left: 0;
    }

    .galheader .inner .menu{
        display: none;
    }

}


/*===========================================================================================================*/
@media (max-width: 500px){

    .hero .photo{
        width: 100%;
        opacity: 0.8;
    }

    .hero .photo .overlay{
        background: linear-gradient(
            90deg,
            rgba(22, 24, 28, 1) 0%,
            rgba(22, 24, 28, 0.8) 38%,
            rgba(22, 24, 28, 0.7) 48%,
            rgba(22, 24, 28, 0.6) 73%,
            rgba(22, 24, 28, 0.5) 100%
        );
    }

    .hero .inner .info .tagline{
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    .hero .inner .info h1.main{
        font-size: calc(70px / 1.6);
        margin-top: 20px;
    }

    .hero .inner .info .buttons{
        flex-direction: column;
        margin-left: 0;
        margin-right: auto;
    }

    .hero .inner .info .buttons .button{
        text-align: center;
    }

    .brands .inner .box{
        flex-direction: column;
        gap: 40px;
    }

    .contact .inner .box{
        flex-direction: column;
        align-items: flex-start;
    }

    .contact .inner .box .item{
        flex-direction: row;
    }

    .contact .inner .form .button-wrapper{
        width: 100%;
        padding-left: 30px;
        padding-right: 30px;
        box-sizing: border-box;
        margin-top: 0;
    }

    .contact .inner .form .button-wrapper .loading,
    .contact .inner .form .button-wrapper .message_alert{
        width: calc(100% - 2px - 60px);
    }

    .contact .inner .form .button-wrapper .message_alert{
        margin-left: 30px;
    }

    .contact .inner .form .group .box .input-wrapper{
        flex-wrap: wrap;
    }

    .contact .inner .form .group .box .input-wrapper.dialcode .dial{
        border-radius: 5px 0 0 0;
        border-bottom: none;
        height: calc(51px - 1px);
    }

    .contact .inner .form .group .box .input-wrapper.dialcode .prefix{
        border-radius: 0 5px 0 0;
        border-bottom: none;
        height: 51px;
        border-right: 1px solid #2d2f32;
    }

    .contact .inner .form .group .box .input-wrapper.dialcode .number{
        flex-basis: 100%;
    }

    .contact .inner .form .group .box .input-wrapper.dialcode .number .input{
        border-radius: 0 5px 5px 5px;
    }

    .contact .inner .form .group .box .input-wrapper.dialcode .dial .dropdownmenu{
        top: calc(61px - 10px);
    }

    .gallery.page .inner .block .images .image{
        width: calc(100% / 2);
    }

}

/*===========================================================================================================*/
@media (max-width: 450px){

    .hero .inner .info h1.main{
        font-size: calc(70px / 1.7)
    }

    .hero .inner .info p.sub{
        width: 100%;
    }

    .service .inner .items .item{
        grid-template-columns: 20% 1fr;
        column-gap: 30px;
    }

    .service .inner .items .item .number{
        grid-row: 1;
    }

    .service .inner .items .item .box{
        grid-column: 1 / 3;
    }

    
}

/*===========================================================================================================*/
@media (max-width: 430px){

    .jumpup{
        right: 30px;
        bottom: 30px;
    }

    .experience, .service, .about, .contact, .brands{
        padding-bottom: 40px;
        padding-top: 40px;
    }

    .header .inner,
    .hero .inner,
    .experience .inner, 
    .service .inner,
    .brands .inner,
    .about .inner,
    .contact .inner,
    .footer .inner,
    .galheader .inner,
    .gallery.page .inner{
        width: calc(100% - 60px);
        padding-left: 30px;
        padding-right: 30px;
    }

    .gallery.page{
        padding-top: calc(100px - 10px);
    }

    .gallery.page .inner{
        gap: 30px;
    }

    .header .inner .logo{
        height: calc(250px - 50px - 25px - 15px);
    }

    .hero .inner .info{
        height: calc(100% - 180px + 50px + 25px + 15px);
        margin-top: calc(180px - 50px - 25px - 15px);
    }

    .hero .inner .info h1.main{
        font-size: calc(70px / 1.85)
    }

    .hero .inner .info .tagline p.text{
        font-size: calc(12px / 1.1);
    }

    .hero .inner .info .buttons{
        margin-right: unset;
    }

    .hero .inner .info .tagline{
        margin-top: 40px;
    }

    .hero .inner .info .buttons{
        margin-bottom: 40px;
    }

    .service .inner .intro h2.text, .about .inner .intro h2.text, .contact .inner .intro h2.text{
        font-size: calc(40px / 1.2);
    }

    .gallery .button{
        width: calc(100% - 60px);
        margin-left: 30px;
        margin-right: 30px;
        text-align: center;
        bottom: 40px;
    }

    .gallery .items .item{
        width: calc(100% / 2);
    }

    .gallery .items .item:nth-child(-n+6){
        display: none;
    }

    .terms{
        padding-bottom: 40px;
    }

    .terms .inner{
        width: calc(100% - 60px)
    }

    .gallery.page{
        padding-bottom: 40px;
    }

}

/*===========================================================================================================*/
@media (max-width: 380px){

    .hero .inner .info h1.main{
        font-size: calc(70px / 1.95)
    }

}