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

    .sub .slider{
        padding-top: calc((100% / 16) * 5.5);
    }

}


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

    .sub .slider{
        padding-top: calc((100% / 16) * 6);
    }

}


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

    .header .inner,
    .main .slider .content,
    .sub .slider .content,
    .block1 .element1,
    .block1 .element2,
    .block1 .element3,
    .block1 .element4,
    .block2 .element1,
    .block1 .element5,
    .footer .inner{
        width: calc(100% - 100px);
    }

    .block1 .element2{
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .main .slider .content h1.head,
    .sub .slider .content h1.head{
        font-size: calc(80px / 1.05);
    }

    .block1 .gallery .item .overlay .zoom svg{
        width: 24px;
        height: 24px;
    }

    .header .menu{
        padding-right: 50px;
    }


}


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

    .block1 .element3 .part .tasting .item{
        flex-direction: column;
    }

    .block1 .element3 .part .tasting .item .line:nth-child(2){
        margin-left: 0;
        margin-right: auto;
        margin-top: 30px;
    }

    .block1 .element3 .part .tasting .item .line .button,
    .block1 .element3 .part .tasting .item .line .outofstock{
        margin-left: 0;
    }

}


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

    .header.homepage .inner .logo svg{
        height: 140px;
        transform: translateY(calc((140px / 2) + 20px));
    }

    .main .slider .content{
        top: calc(100px + 140px + 50px);
    }

    .block1 .element1 .part h2.head,
    .block1 .element3 .part h2.head,
    .block1 .element4 .part h2.head{
        font-size: calc(45px / 1.05);
    }

    .block1 .element4 .form_box .form_box .form{
        width: calc(100% - 180px - 60px);
        margin-left: 90px;
    }

    .block1 .element2 .item{
        width: calc((100% - 150px) / 3);
        margin-left: 75px;
    }   

}


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

    .block2 .terms{
        width: calc(100% - 100px);
    }

    .block1 .element4 .form_box .form{
        width: calc(100% - 60px);
        margin-left: 0;
        margin-top: 50px;
    }

    .sub .slider{
        padding-top: calc((100% / 16) * 7);
    }

}



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

    .main .slider .scroll, .sub .slider .scroll{
        width: 22px;
        height: 39px;
        bottom: 30px;
    }

    .sub .slider .content{
        top: calc(130px + 30px);
    }

    .main .slider .content h1.head,
    .sub .slider .content h1.head{
        font-size: calc(80px / 1.15);
    }

    .sub .slider .content p.text{
        font-size: calc(22px / 1.1);
        margin-top: 20px;
    }

    .block2 .element1{
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .block1 .element1{
        width: calc(100% - 50px);
        padding-top: 50px;
        padding-bottom: 50px;
        padding-right: 0;
        align-items: flex-start;
    }

    .block1 .element1 .part:nth-child(2){
        width: calc(60% - 100px);
        margin-left: 100px;
    }

    .block1 .element3 .part:nth-child(2){
        width: calc(60% - 100px);
    }

    .block1 .element3 .part:nth-child(1){
        margin-left: 100px;
    }

    .block1 .element3{
        width: calc(100% - 50px);
        padding-left: 0;
        padding-top: 50px;
        padding-bottom: 50px;
        align-items: flex-start;
    }

    .block1 .element3.same{
        width: calc(100% - 100px);
        padding-left: 50px;
        padding-right: 50px;
    }

    .block1 .element1 .part .navigate,
    .block1 .element3 .part .navigate{
        padding:10px;
        padding-left: 21px;
        padding-right: 21px;
        margin-right: 40px;
    }

    .block1 .element1 .part .navigate .icon,
    .block1 .element3 .part .navigate .icon{
        width: 23px;
        height: 23px;
    }

    .block1 .element1 .part .navigate .text,
    .block1 .element3 .part .navigate .text{
        font-size: 15px;
    }

    .block1 .element3 .part .tasting{
        width: calc(100% - 50px);
        margin-left: 50px;
    }

    .block2 .element1 .part .item .qtybox .addtocart,
    .block2 .element1 .part .item .qtybox .price{
        margin-left: 40px;
    }

    .block1 .element3 .part .tasting .item .line .button,
    .block1 .element3 .part .tasting .item .line .outofstock,
    .block2 .element1 .panel .button{
        padding: 10px;
        padding-left: 21px;
        padding-right: 21px;
    }

    .block1 .element3 .part .tasting .item .line .button .text,
    .block1 .element3 .part .tasting .item .line .outofstock .text,
    .block2 .element1 .panel .button .text,
    .block2 .element1 .part .item .qtybox .addtocart{
        font-size: 15px;
    }

    .block2 .element1 .panel,
    .block2 .element1 .cart_total,
    .block2 .element1 .products,
    .block2 .element1 .contactdata,
    .block2 .terms .part,
    .block1 .element4 .form_box .form .button-wrapper{
        margin-top: 40px;
    }

    .block2 .element1 .contactdata .group .box{
        width: 40%;
    }

    .block2 .element1 .contactdata .group .box:nth-child(2){
        width: calc(60% - 40px);
        margin-left: 40px;
    }

    .block2 .element1 .checkout .group .box{
        width: 40%;
    }

    .block2 .element1 .checkout .group .box:nth-child(2),
    .block2 .element1 .cart_total .part .box{
        width: calc(60% - 40px);
        margin-left: 40px;
    }

    .block2 .element1 .panel .submit_button{
        padding: 12px;
        padding-left: 20px;
        padding-right: 20px;
        font-size: 17px;
    }

    .block2 .terms{
        padding-top: 50px;
        padding-top: 50px;
    }

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

    .block1 .element4{
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .block1 .element4 .form_box .form .button-wrapper .submit_button{
        padding: 12px;
        padding-left: 20px;
        padding-right: 20px;
        font-size: 17px;
    }

    .block2 .toast .text{
        font-size: 17px;
    }

    .sub .slider .buttonbox .button,
    .main .slider .content .buttonbox .button{
        padding: 12px;
        padding-left: 20px;
        padding-right: 20px;
        font-size: 16px;
        margin-left: 40px;
    }

    .sub .slider .buttonbox .button .icon,
    .main .slider .content .buttonbox .button .icon{
        width: 23px;
        height: 23px;
    }

    .block1 .element1 .part:nth-child(1){
        width: 55%;
    }

    .block1 .element1 .part:nth-child(2){
        width: calc(45% - 100px);
    }

    .block1 .element1 .part .image{
        width: 100%;
        aspect-ratio: 3 / 4;
    }

    .block1 .element1 .part .image:nth-child(2){
        display: none;
    }

    .block1 .element3 .part:nth-child(1){
        width: 55%;
    }

    .block1 .element3 .part:nth-child(2){
        width: calc(45% - 100px);
    }

    .block1 .element3.same .part:nth-child(1),
    .block1 .element3.same .part:nth-child(2){
        width: calc((100% - 100px) / 2);
    }

    .block1 .element3.same .part:nth-child(2){
        margin-left: 100px;
    }

    .block1 .element3 .part .image{
        width: 100%;
        aspect-ratio: 3/4;
        margin: 0;
    }

    .block1 .element3 .part .image:nth-child(1){
        display: none;
    }

    .block1 .element1 .part h2.head, .block1 .element3 .part h2.head, .block1 .element4 .part h2.head{
        font-size: calc(45px / 1.1);
    }

    .block1 .element3#vstupenky .part:nth-child(1),
    .block1 .element3#vouchery .part:nth-child(1){
        width: calc(50% - 50px);
        margin-left: 50px;
    }

    .block1 .element3#vstupenky .part:nth-child(2),
    .block1 .element3#vouchery .part:nth-child(2){
        width: 50%;
    }

    .block1 .element3 .part .tasting .item .line:nth-child(2){
        margin-top: 20px;
    }

    .block1 .element3 .part .tasting .item{
        margin-top: 40px;
    }

    .block1 .element5{
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .footer .inner .foot1 .part .contact{
        width: 50%;
    }

    .footer .inner .foot1 .part .menu{
        width: 50%;
        margin-left: 75px;
    }

    .footer .inner .foot1 .logo{
        height: 90px;
        margin-right: 0;
        margin-left: 50px;
    }

    

 

}



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

    .sub .slider{
        padding-top: calc((100% / 16) * 8);
    }

    .main .slider .content h1.head,
    .sub .slider .content h1.head{
        font-size: calc(80px / 1.25);
    }

    .block1 .element2 .item .icon{
        height: 100px;
    }

    .block1 .element2 .item h3.head{
        font-size: calc(25px / 1.05);
    }

    .block1 .element4 .part{
        width: calc((100% - 75px) / 2);
        margin-left: 75px;
    }

    .block1 .element4 .form_box .form{
        width: calc(100% - 180px - 60px);
        margin-left: 90px;
        flex-direction: column;
        align-items: center;
    }

    .block1 .element4 .form_box .form .panel,
    .block1 .element4 .form_box .form .panel:nth-child(2){
        width: 100%;
        margin-left: 0;
    }

    .block1 .element4 .part p.description{
        width: 100%;
    }

}


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

    .block1 .element3 .part .tasting .item .line .additional{
        display: flex;
        flex-wrap: wrap;
    }

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

    .footer .inner .foot1{
        flex-direction: column-reverse;
    }

    .footer .inner .foot1 .logo{
        margin-left: 0;
    }

    .footer .inner .foot1 .part{
        margin-right: unset;
        margin-left: unset;
        width: 100%;
        margin-top: 50px;
    }

}


/*------------------------------------------------------------------------------------------------------------*/
@media (max-width: 900px){
    
    .block1 .element1 .part:nth-child(2){
        width: calc(45% - 50px);
        margin-left: 50px;
    }

    .block1 .element3 .part:nth-child(2){
        width: calc(45% - 50px);
    }

    .block1 .element3 .part:nth-child(1){
        margin-left: 50px;
    }

    .block1 .element2 .item{
        width: calc((100% - 100px) / 3);
        margin-left: 50px;
    }

    .block1 .element2 .item p{
        font-size: calc(16px / 1.05);
    }

    .block1 .element1 .part .image,
    .block1 .element3 .part .image{
        aspect-ratio: 3 / 5;
    }

    .sub .slider .content p.text{
        font-size: calc(22px / 1.15);
    }

    .block2 .element1 .part .item .qtybox .price{
        margin-left: 0;
    }

    .block2 .element1 .checkout .group .box,
    .block2 .element1 .checkout .group .box:nth-child(2){
        width: 100%;
        margin-left: 0;
    }

    .block2 .element1 .checkout .group .box:nth-child(2){
        margin-top: 30px;
    }

    .block2 .element1 .cart_total .part{
        flex-direction: column;
    }

    .block2 .element1 .cart_total .part h3.head,
    .block2 .element1 .cart_total .part .box{
        width: 100%;
        margin-left: 0;
    }

    .block2 .element1 .cart_total .part .box{
        margin-top: 30px;
    }

    .block2 .element1 .contactdata .group .box{
        width: 100%;
    }

    .block2 .element1 .contactdata .group .box:nth-child(2){
        width: 100%;
        margin-top: 30px;
        margin-left: 0;
    }

    .block2 .element1 .paymentdata .part .block .line-wrapper .line{
        flex-direction: column;
        align-items: unset;
    }

    .block2 .element1 .paymentdata .part .block .line-wrapper .line .status,
    .block2 .element1 .paymentdata .part .block .line-wrapper .line .button{
        margin-left: 0;
        margin-right: auto;
        margin-top: 10px;
    }
    
    .block2 .element1 .paymentdata .part .block .line-wrapper .line .info{
        margin-left: 0;
        margin-right: auto;
        margin-top: 5px;
    }

    .block1 .element3.same .part:nth-child(1),
    .block1 .element3.same .part:nth-child(2){
        width: calc((100% - 50px) / 2);
    }

    .block1 .element3.same .part:nth-child(2){
        margin-left: 50px;
    }

    .footer .inner .foot{
        flex-direction: column-reverse;
        align-items: unset;
    }

    .footer .inner .foot .terms{
        margin-left: 0;
        margin-right: auto;
    }

    .footer .inner .foot .copy{
        margin-top: 20px;
    }   

}



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

    .sub .slider{
        padding-top: calc((100% / 16) * 9);
    }

    .main .slider .content h1.head, .sub .slider .content h1.head{
        font-size: calc(80px / 1.4);
    }

    .block1 .element1,
    .block1 .element3{
        width: calc(100% - 100px);
        flex-direction: column;
        padding-right: 50px;
        padding-left: 50px;
    }

    .block1 .element1 .part:nth-child(1),
    .block1 .element3 .part:nth-child(1){
        width: 100%;
        margin-left: 0;
    }

    .block1 .element1 .part:nth-child(2),
    .block1 .element3 .part:nth-child(2){
        width: 100%;
        margin-left: 0;
        margin-top: 40px;
    }

    .block1 .element1 .part .image,
    .block1 .element3 .part .image{
        width: calc((100% - 40px) / 2);
        aspect-ratio: 3 / 4;
    }

    .block1 .element1 .part .image:nth-child(2),
    .block1 .element3 .part .image:nth-child(2){
        display: block;
        margin-left: 40px;
    }

    .block1 .element3 .part .image:nth-child(1){
        display: block;
        aspect-ratio: 3 / 4;
    }

    .block1 .element3#vstupenky .part:nth-child(1),
    .block1 .element3#vouchery .part:nth-child(1){
        width: 100%;
        margin-left: 0;
    }

    .block1 .element3#vstupenky .part:nth-child(2),
    .block1 .element3#vouchery .part:nth-child(2),
    .block1 .element3 .part .tasting{
        width: 100%;
        margin-left: 0
    }

    .block1 .element3 .part .tasting .item{
        flex-direction: row;
    }

    .block1 .element3 .part .tasting .item .line:nth-child(2){
        margin-top: 0;
        margin-left: 40px;
        margin-right: 0;
    }

    .block1 .element4 .form_box .form{
        width: calc(100% - 60px);
        margin-left: 0;
    }

    .block1 .gallery .item{
        width: calc(100% / 3);
        aspect-ratio: 1 / 1;
    }

    .block1 .element4{
        flex-direction: column;
    }

    .block1 .element4 .part{
        width: 100%;
    }

    .block1 .element4 .part:nth-child(2){
        margin-left: 0;
        margin-top: 40px;
    }

    .sub .slider .buttonbox{
        bottom: 40px;
    }

    .block1 .element5 .tasting{
        flex-direction: column;
    }

    .block1 .element5 .tasting .item{
        width: calc(100% - 60px);
        height: auto;
        float: left;
        display: flex;
        flex-direction: column;
        padding: 30px;
        align-items: flex-start;
        background: #FFF;
        box-shadow: 0px 0px 50px rgba(22, 25, 54, .15);
        margin-top: 40px;
        cursor: pointer;
        border-radius: 15px;
        text-decoration: none;
    }

    .block1 .element5 .tasting .item:first-child{
        margin-top: 0;
    }

    .block1 .element5 .tasting .item .line{
        width: auto;
        height: auto;
        float: left;
        margin-left: 0;
        margin-right: auto;
        margin-top: 0;
        display: flex;
        flex-direction: column;
        align-items: unset;
    }

    .block1 .element5 .tasting .item .line:nth-child(2){
        margin-top: 30px;
    }

    .block1 .element5 .tasting .item .line h4.head{
        width: auto;
        height: auto;
        float: left;
        font-family: interbold;
        font-size: 18px;
        color: #3c4343;
        margin: 0;
        line-height: 1.3;
        font-weight: normal;
    }

    .block1 .element5 .tasting .item .line h5.headline{
        width: auto;
        height: auto;
        float: left;
        font-family: interregular;
        font-size: 14px;
        color: #8a8e8e;
        font-weight: normal;
        margin: 0;
        margin-top: 5px;
    }

    .block1 .element5 .tasting .item .line p.description{
        width: auto;
        height: auto;
        float: left;
        font-family: interregular;
        font-size: 14px;
        color: #8a8e8e;
        margin: 0;
        margin-top: 10px;
        line-height: 1.5;
    }

    .block1 .element5 .tasting .item .line p.description.main{
        margin-top: 20px;
        font-family: interitalic;
        padding-left: 20px;
        border-left: 1px solid #dbdcdc;
    }

    .block1 .element5 .tasting .item .line p.description.additional{
        margin-top: 20px;
    }

    .block1 .element5 .tasting .item .line .button{
        width: auto;
        height: auto;
        float: left;
        background: #91202C;
        padding: 20px;
        padding-top: 10px;
        padding-bottom: 10px;
        border: 2px solid #91202C;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        transition: 250ms ease-in-out;
        cursor: pointer;
        margin-left: 0px;
        border-radius: 10px;
    }

    .block1 .element5 .tasting .item .line .button:hover{
        background: transparent;
    }

    .block1 .element5 .tasting .item .line .button .icon{
        width: 22px;
        height: 22px;
        float: left;
    }

    .block1 .element5 .tasting .item .line .button .icon svg{
        width: 100%;
        height: 100%;
        float: left;
        stroke: #f2ebde;
        transition: 250ms ease-in-out;
        stroke-width: 2px;
    }

    .block1 .element5 .tasting .item .line .button:hover .icon svg{
        stroke: #91202C;
    }

    .block1 .element5 .tasting .item .line .button .text{
        width: auto;
        height: auto;
        float: left;
        margin-left: 15px;
        font-family: intersemibold;
        font-size: 16px;
        color: #f2ebde;
        transition: 250ms ease-in-out;
    }

    .block1 .element5 .tasting .item .line .button:hover .text{
        color: #91202C;
    }

    .block1 .element5 .tasting .item .line .additional{
        width: auto;
        height: auto;
        float: left;
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px 20px;
    }

    .block1 .element5 .tasting .item .line .additional .element{
        width: auto;
        height: auto;
        float: left;
        display: flex;
        align-items: center;
    }

    .block1 .element5 .tasting .item .line .additional .element .icon{
        width: 20px;
        height: 20px;
        float: left;
    }

    .block1 .element5 .tasting .item .line .additional .element .icon svg{
        width: 100%;
        height: 100%;
        float: left;
        stroke: #a5a9a9;
        stroke-width: 1.75px;
    }

    .block1 .element5 .tasting .item .line .additional .element .text{
        width: auto;
        height: auto;
        float: left;
        font-family: interregular;
        font-size: 14px;
        color: #8a8e8e;
        margin-left: 10px;
    }

    .block1 .element3.same{
        flex-direction: column;
    }

    .block1 .element3.same .part,
    .block1 .element3.same .part:nth-child(1),
    .block1 .element3.same .part:nth-child(2){
        width: 100%;
        margin-left: 0;
    }

}



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

    .block2 .element1 .part .item{
        align-items: flex-start;
    }

    .block2 .element1 .part .item .qtybox{
        flex-direction: column;
        align-items: flex-end;
    }

    .block2 .element1 .part .item .qtybox .price{
        flex-basis: unset;
    }

    .block2 .element1 .part .item .qtybox .addtocart,
    .block2 .element1 .part .item .qtybox .price{
        margin-left: 0;
    }

    .block2 .element1 .part .item .qtybox .addtocart{
        margin-top: 20px;
    }

    .block2 .element1 .part .item .line{
        flex-basis: unset;
    }

    .block2 .element1 .part .item .qtybox.cart{
        flex-direction: column-reverse;
    }

    .block2 .element1 .part .item .qtybox .amount{
        margin-top: 20px;
    }

    .block2 .element1 .part .item .trash{
        align-self: center;
    }

}


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

    .block2 .element1 .paymentdata{
        flex-direction: column;
    }

    .block2 .element1 .paymentdata .part{
        width: calc(100% - 60px);
        border-right: none;
    }

    .block2 .element1 .paymentdata .part:nth-child(2){
        margin-top: 40px;
    }

    .block2 .element1 .paymentdata .part .block .line-wrapper .line{
        flex-direction: row;
        align-items: center;
    }

    .block2 .element1 .paymentdata .part .block .line-wrapper .line .status,
    .block2 .element1 .paymentdata .part .block .line-wrapper .line .button,
    .block2 .element1 .paymentdata .part .block .line-wrapper .line .info{
        margin-left: auto;
        margin-right: 0;
        margin-top: 0;
    }

    .block1 .element2{
        flex-direction: column;
    }

    .block1 .element2 .item{
        width: 100%;
        margin-left: 0;
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:"icon head" "icon text";
        margin-top: 40px;
    }

    .block1 .element2 .item:first-child{
        margin-top: 0;
    }

    .block1 .element2 .item .icon{
        grid-area: icon;
    }

    .block1 .element2 .item h3.head{
        grid-area: head;
        margin-top: 0;
        text-align: left;
        margin-left: 40px;
    }

    .block1 .element2 .item p{
        grid-area: text;
        text-align: left;
        margin-left: 40px;
    }

    .block2 .element1 .products .product{
        flex-direction: column;
        align-items: flex-start;
    }

    .block2 .element1 .products .product .pricebox{
        width: 100%;
        margin-top: 10px;
    }

    .block2 .element1 .products .product .pricebox .amount{
        margin-left: 0;
        margin-right: 0;
    }

    .block2 .element1 .products .product .pricebox .price.semi{
        margin-left: 0;
        margin-right: auto;
    }

    .block2 .element1 .products .product .pricebox .price{
        margin-right: 0;
        flex-basis: unset;
    }

    .block2 .element1 .products .product.total{
        flex-direction: row;
    }

    .block2 .element1 .products .product.total .pricebox{
        width: auto;
        margin-top: 0;
    }

    .footer .inner .foot1 .part .menu{
        margin-left: 50px;
    }

}

@media (max-width: 700px){

    .block2 .element1 .part .item{
        flex-direction: row;
        flex-wrap: wrap;
    }

    .block2 .element1 .part .item.total{
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .block2 .element1 .part .item.total .line{
        flex-basis: unset;
    }

    .block2 .element1 .part .item .line{
        flex-basis: 100%;
    }

    .block2 .element1 .part .item .qtybox.cart,
    .block2 .element1 .part .item .qtybox{
        flex-direction: row;
        margin-left: 0;
        margin-top: 20px;
        flex-basis: calc(100% - 24px - 30px);
        align-items: center;
    }

    .block2 .element1 .part .item .qtybox{
        flex-basis: 100%;
    }

    .block2 .element1 .part .item .trash{
        margin-top: 20px;
    }

    .block2 .element1 .part .item .qtybox.cart .amount{
        margin-top: 0;
    }

    .block2 .element1 .part .item .qtybox .price{
        margin-left: 0;
        margin-right: auto;
    }

    .block2 .element1 .part .item .qtybox.cart .price{
        margin-left: auto;
        margin-right: 0;
    }

    .block2 .element1 .part .item .qtybox .addtocart{
        margin-top: 0;
        margin-left: auto;
        margin-right: 0;
    }

    .block2 .element1 .checkout .group{
        padding-top: 30px;
        padding-bottom: 30px;
    }

}

@media (max-width: 680px){

    .sub .slider{
        padding-top: calc((100% / 16) * 10);
    }

    .footer .inner .paymentinfo{
        flex-direction: column;
    }

    .footer .inner .paymentinfo .text{
        margin-right: 0;
    }

    .footer .inner .paymentinfo .icons{
        margin-top: 10px;
    }

}

@media (max-width: 650px){

    html.pre-scrolled .header .inner .logo svg,
    .header .inner .logo svg{
        height: 85px;
    }

    .header .inner .socials{
        left: 40px;
    }

    .header .inner .burger{
        right: 40px;
    }

    .header .inner .cart{
        right: 130px;
    }

    .main .slider .content h1.head,
    .sub .slider .content h1.head{
        font-size: calc(80px / 1.5);
    }

    .sub .slider{
        padding-top: calc((100% / 16) * 12);
    }

    .sub .slider .content{
        top: calc(130px + 20px);
    }

    .footer .inner .foot1 .part{
        flex-direction: column;
    }

    .footer .inner .foot1 .part .contact{
        width: 100%;
    }

    .footer .inner .foot1 .part .menu{
        width: 100%;
        margin-left: 0;
        margin-top: 40px;
    }

}


@media (max-width: 575px){

    .header{
        height: 110px;
    }

    .block2{
        margin-top: 110px;
    }
    
    .sub .slider .content{
        top: calc(110px + 20px);
    }

    .header .inner .burger{
        width: 40px;
    }

    .header .inner .cart{
        left: 40px;
    }

    html.pre-scrolled .header .inner .logo svg,
    .header .inner .logo svg{
        height: 70px;
    }

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

    .header .inner,
    .main .slider .content,
    .sub .slider .content,
    .block1 .element1,
    .block1 .element2,
    .block1 .element3,
    .block1 .element4,
    .block2 .element1,
    .block1 .element5,
    .footer .inner,
    .block2 .terms{
        width: calc(100% - 80px);
        padding-left: 40px;
        padding-right: 40px;
    }

    .block1 .element1,
    .block1 .element3,
    .block1 .element2,
    .footer .inner,
    .block2 .element1,
    .block1 .element4,
    .block2 .terms{
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .header .menu{
        width: calc(100% - 80px);
        padding: 40px;
        padding-top: 100px;
    }

    .header .menu .line{
        padding-right: 36px;
    }

    .sub .slider{
        padding-top: calc((100% / 16) * 14);
    }

    .main .slider .content h1.head, .sub .slider .content h1.head{
        font-size: calc(80px / 1.65);
    }

    .block1 .element1 .part .image,
    .block1 .element3 .part .image{
        width: calc((100% - 30px) / 2);
    }

    .block1 .element1 .part .image:nth-child(2),
    .block1 .element3 .part .image:nth-child(2){
        margin-left: 30px;
    }

    .sub .slider .content p.text{
        font-size: calc(22px / 1.2);
    }

    .block1 .element1 .part h2.head,
    .block1 .element3 .part h2.head,
    .block1 .element4 .part h2.head,
    .block2 .element1 h2.head,
    .block2 .terms h1.head{
        font-size: calc(45px / 1.2);
    }

    .block1 .element3 .part .tasting .item{
        flex-direction: column;
        align-items: flex-start;
    }
    
    .block1 .element3 .part .tasting .item .line:nth-child(2){
        margin-left: 0;
        margin-top: 20px;
    }

    .block2 .element1 .part .item .qtybox{
        width: 100%;
        flex-direction: row;
        margin-left: 0;
        margin-top: 20px;
        align-items: center;
    }

    .block2 .element1 .part .item .qtybox .addtocart{
        margin-left: auto;
        margin-right: 0;
        margin-top: 0;
    }

    .block2 .element1 .paymentdata{
        margin-top: 40px;
    }

    .sub .slider .buttonbox{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .sub .slider .buttonbox .button{
        margin-left: 0;
    }

    .sub .slider .buttonbox .button:nth-child(2){
        margin-top: 20px;
        display: none;
    }

    .block1 .element3.same{
        width: calc(100% - 80px);
        padding-left: 40px;
        padding-right: 40px;
    }

    .block1 .element5{
        padding-top: 40px;
        padding-bottom: 40px;
    }

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

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

    .block2 .toast.show{
        max-width: calc(100% - 80px - 60px);
        transform: translate(-50%, calc(130px + 40px - 30px));
    }

}

@media (max-width: 550px){

    .header .menu{
        width: 100%;
    }

    .block1 .element4 .form_box .form .panel .input-wrapper .input,
    .block2 .element1 .checkout .group .box .input-wrapper .input,
    .block2 .element1 .contactdata .group .box .input-wrapper .input{
        height: 52px;
        font-size: 16px;
    }

    .block1 .element4 .form_box .form .panel .input-wrapper.amount .minus,
    .block1 .element4 .form_box .form .panel .input-wrapper.amount .plus{
        height: 52px;
    }

    .block1 .element4 .form_box .form .panel .input-wrapper .label,
    .block2 .element1 .checkout .group .box .input-wrapper .label{
        font-size: 16px;
    }

    .block1 .element4 .form_box .form .panel .input-wrapper.dialcode .dial,
    .block2 .element1 .checkout .group .box .input-wrapper.dialcode .dial,
    .block2 .element1 .contactdata .group .box .input-wrapper.dialcode .dial{
        flex-basis: calc(100px - 2px - 15px);
        height: calc(52px - 2px);
    }

    .block1 .element4 .form_box .form .panel .input-wrapper.dialcode .prefix,
    .block2 .element1 .checkout .group .box .input-wrapper.dialcode .prefix,
    .block2 .element1 .contactdata .group .box .input-wrapper.dialcode .prefix{
        width: 70px;
        height: 52px;
        font-size: 16px;
        border-radius: 0;
        border-right: none;
    }

    .block1 .element4 .form_box .form .panel .input-wrapper.dialcode .number,
    .block2 .element1 .checkout .group .box .input-wrapper.dialcode .number,
    .block2 .element1 .contactdata .group .box .input-wrapper.dialcode .number{
        flex-basis: calc(100% - 100px - 30px - 80px + 25px + 30px + 20px);
        margin-left: 0;

    }

    .block1 .element4 .form_box .form .panel .input-wrapper.dialcode .number .input,
    .block2 .element1 .checkout .group .box .input-wrapper.dialcode .number .input,
    .block2 .element1 .contactdata .group .box .input-wrapper.dialcode .number .input{
        flex-basis: 100%;
        border-radius: 0 5px 5px 0;
    }

    .block1 .element4 .form_box .form .panel .input-wrapper.dialcode .dial .dropdownmenu,
    .block2 .element1 .checkout .group .box .input-wrapper.dialcode .dial .dropdownmenu{
        top: calc(51px + 0px);
    }

    .block1 .element4 .form_box .form .panel .input-wrapper .check,
    .block2 .element1 .checkout .group .box .input-wrapper .check{
        width: 24px;
        height: 24px;
        right: 14px;
    }

    .block1 .element4 .form_box .form .panel .input-wrapper .input:focus + .label,
    .block1 .element4 .form_box .form .panel .input-wrapper .input:not(:placeholder-shown) + .label,
    .block2 .element1 .contactdata .group .box .input-wrapper .input:not(:placeholder-shown) + .label{
        font-size: 12px;
    }

    .block2 .element1 .checkout .group .box .toggle-wrapper .toggle{
        width: calc(80px - 10px);
        height: calc(36px - 4px);
    }

    .block2 .element1 .checkout .group .box .toggle-wrapper .toggle .switch{
        width: calc(36px - 4px - 10px);
        height: calc(36px - 4px - 10px);
    }

    .block2 .element1 .checkout .group .box .toggle-wrapper .toggle.on .switch{
        transform: translateX(38px);
    }

    .block2 .element1 .checkout .group .box .toggle-wrapper .text{
        font-size: 16px;
    }

    .block1 .element4 .form_box .form .panel .input-wrapper .textarea{
        font-size: 16px;
    }

    .block1 .element4 .form_box .form .panel .input-wrapper.dialcode .dial .icon,
    .block2 .element1 .checkout .group .box .input-wrapper.dialcode .dial .icon{
        width: 25px;
        height: 19px;
    }

    .block1 .element4 .form_box .form .panel .input-wrapper.dialcode .dial .dropdownmenu .item .name,
    .block2 .element1 .checkout .group .box .input-wrapper.dialcode .dial .dropdownmenu .item .name{
        font-size: 12px;
    }

    .block1 .element4 .form_box .form .panel .input-wrapper.dialcode .dial .dropdownmenu .item .flag,
    .block2 .element1 .checkout .group .box .input-wrapper.dialcode .dial .dropdownmenu .item .flag{
        width: 18px;
        height: 14px;
    }

    .block2 .element1 .checkout .group .box .input-wrapper.city{
        width: 100%;
    }

    .block2 .element1 .checkout .group .box .input-wrapper.zipcode{
        width: 100%;
        margin-left: 0;
    }


}


@media (max-width: 525px){

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

}

@media (max-width: 500px){

    .sub .slider{
        padding-top: calc((100% / 16) * 15);
    }

    .block1 .element4 .form_box .form .panel .input-wrapper .time-picker{
        grid-template-columns: repeat(4, 1fr)
    }

    .block1 .element4 .form_box .form .panel .input-wrapper.amount .minus,
    .block1 .element4 .form_box .form .panel .input-wrapper.amount .plus{
        width: 60px;
        margin-left: 0;
        margin-right: 0;
    }

    .block1 .element4 .form_box .form .panel .input-wrapper.amount .minus{
        margin-left: 0;
        margin-right: auto;
        border-radius: 5px 0 0 5px;
    }

    .block1 .element4 .form_box .form .panel .input-wrapper.amount .plus{
        margin-right: 0;
        margin-left: auto;
        border-radius: 0 5px 5px 0;
    }

    .block1 .element4 .form_box .form .panel .input-wrapper.amount .input{
        width: calc(100% - 60px - 60px);
        border-left: none;
        border-right: none;
        border-radius: 0;
    }

    .block2 .element1 .cart_total .part .box .pricebox{
        flex-direction: column;
        align-items: flex-start;
    }

    .block2 .element1 .cart_total .part .box .pricebox .price{
        margin-left: 0;
        margin-right: auto;
        margin-top: 5px;
    }

    .block2 .element1 .checkout .group .box .input-wrapper,
    .block2 .element1 .contactdata .group .box .input-wrapper,
    .block1 .element4 .form_box .form .panel .input-wrapper{
        flex-wrap: wrap;
    }

    .block1 .element4 .form_box .form .panel .input-wrapper.dialcode .number,
    .block2 .element1 .checkout .group .box .input-wrapper.dialcode .number,
    .block2 .element1 .contactdata .group .box .input-wrapper.dialcode .number{
        flex-basis: 100%;
    }

    .block1 .element4 .form_box .form .panel .input-wrapper.dialcode .prefix,
    .block2 .element1 .contactdata .group .box .input-wrapper.dialcode .prefix,
    .block2 .element1 .checkout .group .box .input-wrapper.dialcode .prefix{
        border-right: 1px solid #dbdbdb;
        border-radius: 0 5px 0 0;
        border-bottom: none;
        height: 51px;
    }

    .block1 .element4 .form_box .form .panel .input-wrapper.dialcode .dial, 
    .block2 .element1 .contactdata .group .box .input-wrapper.dialcode .dial, 
    .block2 .element1 .checkout .group .box .input-wrapper.dialcode .dial{
        border-radius: 5px 0 0 0;
        border-bottom: none;
    }

    .block1 .element4 .form_box .form .panel .input-wrapper.dialcode .number .input, 
    .block2 .element1 .checkout .group .box .input-wrapper.dialcode .number .input, 
    .block2 .element1 .contactdata .group .box .input-wrapper.dialcode .number .input{
        border-radius: 0 5px 5px 5px;
    }

    .block2 .element1 .checkout .group .box .input-wrapper.company_id,
    .block2 .element1 .checkout .group .box .input-wrapper.company_vat{
        width: 100%;
        margin-left: 0;
    }

}

@media (max-width: 480px){

    .scanner .inner{
        width: calc(100% - 80px);
        margin-left: 40px;
        margin-right: 40px;
        margin-bottom: 40px;
        margin-top: 40px;
    }

    .scanner .inner .box .video-wrapper{
        aspect-ratio: 1 / 1;
    }

}


@media (max-width: 475px){

    .sub .slider .content p.text{
        font-size: calc(22px / 1.3);
    }

    .block1 .element4 .form_box .form .panel .input-wrapper.dialcode .input,
    .block2 .element1 .contactdata .group .box .input-wrapper.dialcode .input,
    .block2 .element1 .checkout .group .box .input-wrapper.dialcode .input{
        flex-basis: calc(100% - 100px - 0px - 80px + 10px + 15px + 10px + 10px);
    }

    .block1 .element4 .form_box .form .panel .input-wrapper.dialcode .label,
    .block2 .element1 .contactdata .group .box .input-wrapper.dialcode .label,
    .block2 .element1 .checkout .group .box .input-wrapper.dialcode .label{
        left: calc(231px - 30px - 10px - 15px - 10px - 10px);
    }

    .block1 .element4 .form_box .form .panel .input-wrapper.dialcode .dial .dropdownmenu .item .flag,
    .block2 .element1 .checkout .group .box .input-wrapper.dialcode .dial .dropdownmenu .item .flag{
        width: 15px;
        height: 12px;
    }

    .block2 .element1 .paymentdata .part .block .line-wrapper .line{
        flex-direction: column;
        align-items: flex-start;
    }

    .block2 .element1 .paymentdata .part .block .line-wrapper .line .status,
    .block2 .element1 .paymentdata .part .block .line-wrapper .line .button,
    .block2 .element1 .paymentdata .part .block .line-wrapper .line .info{
        margin-left: 0;
        margin-right: auto;
    }

    .block2 .element1 .paymentdata .part .block .line-wrapper .line .info{
        margin-top: 5px;
    }

    .block2 .element1 .paymentdata .part .block .line-wrapper .line .status,
    .block2 .element1 .paymentdata .part .block .line-wrapper .line .button{
        margin-top: 10px;
    }

    .block2 .element1 .checkout .group .box .toggle-wrapper{
        flex-direction: column;
        align-items: flex-start;
    }

    .block2 .element1 .checkout .group .box .toggle-wrapper .text{
        margin-left: 0;
        margin-top: 10px;
    }


}

@media (max-width: 460px){

    .sub .slider{
        padding-top: calc((100% / 16) * 16);
    }

    .block2 .element1 .part .item .qtybox.cart, .block2 .element1 .part .item .qtybox{
        flex-direction: column;
        align-items: flex-start;
    }

    .block2 .element1 .part .item .qtybox .addtocart{
        margin-left: 0;
        margin-right: auto;
        margin-top: 20px;
    }

    .block2 .element1 .part .item .qtybox.cart .price{
        margin-left: 0;
        margin-right: auto;
        margin-top: 20px;
    }

    .block2 .element1 .part .item .trash{
        margin-top: 0;
    }

    .header .menu .menu-scroll .line{
        padding-right: 0;
    }

}

@media (max-width: 435px){

    .header.homepage .inner .logo svg{
        height: 120px;
        transform: translateY(calc((120px / 2) + 20px));
    }

    .sub .slider{
        padding-top: calc((100% / 16) * 17);
    }

    .main .slider .content h1.head, .sub .slider .content h1.head{
        font-size: calc(80px / 1.8);
    }

    .block2 .element1 .part .item .qtybox{
        flex-direction: column;
    }

    .block2 .element1 .part .item .qtybox .addtocart{
        margin-left: 0;
        margin-right: auto;
        margin-top: 20px;
    }

    .block2 .element1 .part .item.total,
    .block2 .element1 .products .product.total{
        flex-direction: column;
    }

    .block2 .element1 .part .item .line,
    .block2 .element1 .products .product.total .line{
        margin-left: auto;
        margin-right: 0;
    }

    .block2 .element1 .part .item .sum,
    .block2 .element1 .products .product.total .pricebox .price{
        margin-top: 10px;
    }

    .block2 .element1 .panel{
        flex-direction: column;
        align-items: flex-start;
    }

    .block2 .element1 .panel .submit_button{
        width: 100%;
        margin-top: 30px;
    }

    .block2 .element1 .panel .button.forward{
        margin-top: 30px;
    }

    .block2 .element1 .panel .button{
        width: 100%;
        justify-content: center;
    }

    .block1 .element4 .form_box .form .panel .input-wrapper .time-picker{
        grid-template-columns: repeat(3, 1fr)
    }

}


@media (max-width: 400px){

    .sub .slider{
        padding-top: calc((100% / 16) * 18);
    }

    .block1 .element2 .item{
        display: flex;
    }

    .block1 .element2 .item h3.head{
        margin-left: 0;
        margin-top: 25px;
    }

    .block1 .element2 .item p{
        margin-left: 0;
        text-align: center;
    }

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

    .footer .inner .foot .terms .item{
        border: none;
        margin-left: 0;
        padding-left: 0;
        margin-top: 5px;
    }

    .footer .inner .foot .terms .item:first-child{
        margin-top: 0;
    }
        
}

@media (max-width: 380px){

    .sub .slider{
        padding-top: calc((100% / 16) * 19);
    }

    .block1 .element1 .part .image, .block1 .element3 .part .image{
        width: 100%;
    }

    .block1 .element1 .part .image:nth-child(2), .block1 .element3 .part .image:nth-child(2){
        margin-left: 0;
        margin-top: 30px;
    }

    .block1 .element4 .form_box .form .panel .input-wrapper.amount{
        flex-wrap: wrap;
    }

    .block1 .element4 .form_box .form .panel .input-wrapper.amount .input{
        order: 1;
        width: 100%;
        border: 1px solid #dbdcdc;
        border-radius: 5px 5px 0 0;
    }

    .block1 .element4 .form_box .form .panel .input-wrapper.amount .minus{
        order: 2;
        width: 50%;
        border-radius: 0 0 0 5px;
        border-top: none;
    }

    .block1 .element4 .form_box .form .panel .input-wrapper.amount .plus{
        order: 3;
        width: 50%;
        border-radius: 0 0 5px 0;
        border-top: none;
        border-left: none;
    }

    .block2 .element1 .products .product .pricebox{
        flex-wrap: wrap;
    }

    .block2 .element1 .products .product .pricebox .price{
        width: 100%;
        margin-top: 10px;
    }

    .block2 .element1 .products .product .pricebox .price.semi{
        margin-left: auto;
        margin-right: 0;
        margin-top: 0;
    }

}

@media (max-width: 340px){

    .sub .slider{
        padding-top: calc((100% / 16) * 21);
    }

    .main .slider .content p.text{
        font-size: calc(22px / 1.1);
    }

    .header.homepage .inner .logo svg{
        height: 100px;
        transform: translateY(calc((100px / 2) + 20px));
    }

    .block1 .element1 .part h2.head,
    .block1 .element3 .part h2.head,
    .block1 .element4 .part h2.head,
    .block2 .element1 h2.head,
    .block2 .terms h1.head{
        font-size: calc(45px / 1.3);
    }

    .block1 .element4 .form_box .form .panel .input-wrapper .time-picker{
        grid-template-columns: repeat(2, 1fr)
    }

}