@media (max-width: 1400px){
    .menu li, .menu button {margin: 0 0 0 8px;}
}

@media (max-width: 1300px){
    .menu li a {font-size: 14px; letter-spacing: 0.05em;}
}

@media (max-width: 1200px){
    :root {
        --wrap: 770px;
        --section_padding: 120px 0; 
    }

    body {padding-top: 62px; }

    .hide_mob {display:none !important;}
	.show_mob {display:block !important;}

    /* tablet ima 8 stupaca u gridu umisto 12 */
    .w3t {width: calc(3 * 70px + 2 * 30px);}
    .w4t {width: calc(4 * 70px + 3 * 30px);}
    .w5t {width: calc(5 * 70px + 4 * 30px);}
    .w6t {width: calc(6 * 70px + 5 * 30px);}
    .w8t, .w10 {width: 100%;}
    /* .w8t {width: 100%;} */

    .booking {position: fixed; background: var(--greylite); top: 62px; left: 0; transform: translateX(-100%); width: 100%; height: calc(100% - 62px);}
    .booking.open {transform: translateX(0); }

    .booking .back {position: absolute; top: 30px; left: 30px; }

    .top_header .wrap {border-bottom: none; }

    .menu_holder {position: fixed; background: white; top: 62px; right: 0; transform: translateX(100%); width: 100%; height: calc(100% - 62px); overflow-y: auto;}
    .menu_holder.open {transform: translateX(0);}
        .menu_holder.open > a {display: none;}
        .top_header {display: block; }
        .top_header .logo {margin: 4px 0; }

    .menu_trigger {
        display: block; width: 62px; height: 62px; position: absolute; top: 0; right: -15px; 
        background-repeat: no-repeat; background-position: center center; background-image: url(../img/menu_trigger.svg);
    }
    .menu_trigger.open {background-image: url(../img/menu_close.svg);}

    .menu {width: 100%; }

    .menu > ul {display: block; }

    .menu li {display: block; margin: 0 24px; text-align: center; width: calc(100% - 48px); border-top: 1px solid var(--grey);}
    .menu li:first-child {border-top: none; margin: 24px 24px 0 24px;}
    
    .menu li a {display: block; color: var(--black); line-height: 120%; padding: 22px 32px; font-size: 16px; /*font-family: "Playfair Display", serif;*/ }
    
    .menu .buttlike {padding: 22px 32px; height: auto; } 

    .menu li a:hover,
    .menu li.active a {color: var(--primary); background-color: transparent; }
    
    .menu li ul,
    .menu li:hover ul {
        display: none;
        width: 100%; max-width: 100%; position: static; padding: 0 0 15px 0;
    }
    
    .menu li.hasSub.open ul {display: block; }
        
    .menu li ul li {display: block; margin: 0; border: none; width: 100%; }

    .menu li li:first-child {margin: 0; }
    
    .menu li ul li a {display: block; padding: 10px 15px; line-height: 120%; height: auto; color: var(--black);}
    
    .menu li.active li a {background: transparent; color: var(--black); }
    
    .menu li ul li a:hover,
    .menu li ul li.active a {background: transparent; color: var(--primary); }

    .menu_holder.alt {
        position: static;
        background: var(--black);
        transform: translateX(0);
        width: calc(100% + 40px);
        margin: 0 -20px; 
        height: calc(100% - 62px);
    }
    .alt .menu > ul {text-align: left; white-space: nowrap; }
    .alt .menu {width: 100%; overflow-x: auto; white-space: nowrap;}

    .booking {
        display: flex; align-items: flex-end; height: calc(100% - 62px); overflow-y: auto; padding: 30px; 
        /* background-repeat: no-repeat; background-position: right 50px; background-image: url(../img/logoWdecoration.svg); */
    }

    .booking_trigger {display: inline-block; line-height: 62px; position: absolute; top: 0; left: 0; color: black; font-size: 10px; text-transform: uppercase;}

    .booking .wrap { flex-direction: column; justify-content: flex-end; width: 100%; max-width: 500px;  }

    .bitem {width: 100%; padding: 24px 0 0 0; display: flex; }

    .bitem h4 {font-size: 34px; line-height: 94%;}

    .booking input[type=text], .booking select { width: 100%; background: transparent; }

    .bitem button, .bitem button + a {flex-grow: 1; text-align: center;}

    .hero_owl_item { height: calc(100vh - 62px);    }

    .hotel_box_card {width: 282px; }

    .hotel_box {padding-bottom: 250px; }

    .hotel_box .buttons {flex-direction: column; justify-content: center; align-items: center;}

    .pecat {width: 115px; height: auto; top: 0;  }

    .pecat.right { right: 30px;}
    .pecat.left { left: 30px;}

    .banner_txt_content { width: 60%;  }

    #sync2 {display: none; }

    .icon_cards {flex-wrap: wrap; gap: 30px;}
    .icon_cards .card {width: calc(50% - 15px); }
}

@media (max-width: 1200px) and (orientation: landscape){
    .booking {display: block;}
}

@media (max-width: 800px){
    :root {
        --wrap: calc(100% - 40px);
        --section_padding: 100px 0; 
    }

    h1, .h1 {font-size: 32px; line-height: 94%; margin-bottom: 48px;}
    h2, .h2 {font-size: 26px; line-height: 94%; margin-bottom: 40px;}

    .w3, .w4, .w6, .w8, .w10, .w3t, .w4t, .w5t, .w6t, .w8t {width: 100%; text-align: center;}
   
    header {padding: 0 20px;}
    .booking {padding: 20px;}
    .menu li {margin: 0 20px; width: calc(100% - 40px); }
    .menu li:first-child {margin: 24px 20px 0 20px;  }

    .booking .back {position: absolute; top: 20px; left: 20px; }

    .bitem:first-child {padding: 48px 0 0 0;}

    .split_txt {column-count: 1; column-gap: 0; }

    .hotel_boxes {flex-direction: column; gap: 30px;}

    .hotel_box_card {width: 370px;}

    .hotel_box {padding-bottom: 160px; }

    .hotel_box .buttons {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .cards {flex-direction: column; gap: 24px; }

    .card_img, 
    .reverse .card_img { order: 1; }
    .card, 
    .reverse .card { order: 2; }

    .pecat { right: 40px;}
    .reverse .pecat { right: 40px; left: auto; transform: translate(50%, -50%);}

    .banner_content {flex-direction: column; align-items: flex-start; gap: 30px;  }

    .title_block h2 {
        margin: 0 30px 0 0;
        white-space: wrap;
    }

    .banner_txt_content {width: 100%;  }

    .banner_txt {flex-direction: column; gap: 24px; justify-content: flex-start; align-items: flex-start;}

    .testimonials {flex-direction: column;}

    .footer_top,
    .footer_center,
    .footer_bottom {flex-direction: column; align-items: flex-start; gap: 30px;  }

    .footer_center .w4:nth-child(2) {order: 3;  }
    .footer_center .w4:nth-child(3) {order: 2; }

    footer .align_right {text-align: center;}
    footer .footer_bottom .align_right {text-align: center;}

    .footer_bottom {text-align: center;  }

    .footer_bottom li {margin: 0 8px; }

    .images_list {flex-direction: column;}
    .images_list img {width: 100%; height: auto; }

    .acc_desc {flex-direction: column;}

    .info {flex-direction: column;}

    .pager { gap: 4px;  }

    .menu2_holder {padding-left: 20px; padding-right: 20px;}

    .article_txt figure {margin: 80px 0; }

    blockquote {padding: 0 0 0 30px;}

    .contacts {flex-direction: column; gap: 54px; }

    section section {padding-top: 80px;}  

    .popup_gallery a {width: 100%;  }

    .cjenik {flex-direction: column;}
    .cjenik_item {width: 100%}

    /* .accordion_content {padding-left: 0 !important;} */

}

@media (max-width: 600px){
    .icon_cards .card {width: 100%; }
}

@media (max-width: 500px){
    .hotel_box_card {width: 282px;}
    .hotel_box {padding-bottom: 250px; }
    .hotel_box .buttons {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .cards {flex-direction: column; gap: 24px; }
}

@media (max-width: 400px){
    .hotel_box {padding-bottom: 320px; }
    .button_holder {gap: 15px; }
        .top_header .logo  {width: 90px; margin: 10px 0; }
}