/*
* Template Name: Vann Groups Hua Hin
* Author: OBIZSOURCE
* Designed & Coding by : Gavin
*/
@media (min-width: 1440px) {

}

@media (max-width: 1440px) {
}

@media (max-width: 1280px) {
}

@media (max-width: 1200px) {
}

@media (max-width: 1024px) {
    /*-------------------------------------*/
    /* MAIN NAV FIX MENU */
    /*-------------------------------------*/
    .main_nav.fix_menu{
        height: 70px;
    }
    .main_nav.fix_menu .vaan_logo{
        position: absolute;
        left: 20px;
        bottom: 15px;
    }
    .main_nav.fix_menu .primary_menu{
        display: none;
        text-align: left;
    }
    .main_nav.fix_menu .vaan_logo{
        position: absolute;
        left: 20px;
        right: inherit;
        bottom: 15px;
    }
    .main_nav.fix_menu .vaan_logo .logo_fix{
        background-image: url("../images/icon/vanngroupsx150.svg");
        width: 150px;
        height: 40px;
    }
    .main_bigmenu{
        display: none!important;
    }

    /*-------------------------------------*/
    /* MAIN NAV */
    /*-------------------------------------*/
    .main_nav .primary_menu {
        display: none;
        height: 100vh;

    }
    .main_nav .primary_menu > li{
        -webkit-animation-duration: 0.8s;
        animation-duration: 0.8s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-timing-function: ease-in-out;
        animation-name: fadeInUp;
    }
    .main_nav .primary_menu > li:nth-child(1) {
        animation-delay: 0.3s;
    }

    .main_nav .primary_menu > li:nth-child(2) {
        animation-delay: 0.4s;
    }

    .main_nav .primary_menu > li:nth-child(3) {
        animation-delay: 0.5s;
    }

    .main_nav .primary_menu > li:nth-child(4) {
        animation-delay: 0.6s;
    }

    .main_nav .primary_menu > li:nth-child(5) {
        animation-delay: 0.7s;
    }

    .main_nav .primary_menu > li:nth-child(6) {
        animation-delay: 0.8s;
    }

    .main_nav .primary_menu > li:nth-child(7) {
        animation-delay: 0.9s;
    }

    .main_nav .primary_menu > li:nth-child(8) {
        animation-delay: 1s;
    }

    .main_nav .primary_menu > li:nth-child(9) {
        animation-delay: 1.3s;
    }

    .main_nav .primary_menu > li:nth-child(10) {
        animation-delay: 1.4s;
    }
    .main_nav .primary_menu > li:nth-child(11) {
        animation-delay: 1.5s;
    }
    .main_nav .primary_menu > li:nth-child(12) {
        animation-delay: 1.6s;
    }
    .main_nav .primary_menu > li:nth-child(13) {
        animation-delay: 1.7s;
    }

    .main_nav.active .vaan_logo {
        opacity: 0;
    }

    .main_nav.active .primary_menu {
        position: absolute;
        top: 70px;
        background-color: #fff;
        width: 100%;
        opacity: 1;
        display: block !important;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .main_nav .primary_menu .nav_link {
        padding: 0;
        font-weight: 600;
    }

    .main_nav .primary_menu .nav_link:after {
        left: 0;
    }

    .main_nav.active .primary_menu li {
        padding: 0 20px;
        display: block;
    }
    .main_nav.active .primary_menu li a {
        line-height: 50px;
        display: block;
    }
    .main_nav.active .primary_menu li .nav_sub li a {
        line-height: 20px;
    }
    .main_nav.active .primary_menu li .nav_sub li a .title_menu {
        font-size: 15px;
        line-height: 30px;
        color: #20548a !important;
        font-weight: 500;
    }
    .main_nav.active .primary_menu li .nav_sub li a .caption_menu {
        font-size: 12px;
        color: #909090 !important;
        font-weight: 300;
    }
    .main_nav.active .primary_menu li .nav_sub li a .item_img img{
        border-radius: 10px;
    }
    .main_nav.active .primary_menu li .nav_sub {
        margin: 0 0 20px 0;
    }
    .main_nav .primary_menu li {
        height: auto;
        padding: 5px 0;
        border-bottom: 1px solid #f3f3f3;
    }

    .main_nav .primary_menu .nav_sub,
    .main_nav .primary_menu .nav_sub .nav_sub_child {
        position: relative;
        width: 100%;
        top: 0;
        display: none;
    }

    .main_nav .primary_menu li:hover .nav_sub {
        display: none;
    }

    .main_nav .primary_menu .nav_sub:after,
    .main_nav .primary_menu .nav_sub .nav_sub_child:after {
        display: none;
    }

    .main_nav .primary_menu .nav_sub .nav_sub_child li {
        border-bottom: none;
        height: auto;
    }

    .main_nav .primary_menu .nav_sub .nav_sub_child {
        right: 0;
    }

    .main_nav .primary_menu .nav_sub:after {
        display: none;
    }

    .main_nav .primary_menu .nav_sub li {
        height: auto;
        padding: 5px !important;
        margin: 5px 0;
        border: none;
    }

    .main_nav .primary_menu .nav_sub li a {
        color: #000;
    }

    .main_nav .primary_menu .nav_sub li a:after {
        background-color: #000 !important;
    }

    .main_nav .primary_menu li:hover .nav_sub li {
        padding: 0 0 0 20px;
        margin: 5px 0;
        vertical-align: top;
        display: block;
        animation-name: none;
        animation-delay: inherit;

    }

    .main_nav .primary_menu li:hover .nav_sub li .nav_sub_child li {
        animation-name: none;
        padding: 0 0 0 10px;
        margin: 5px 0;
    }

    .main_nav .primary_menu .nav_booknow,
    .main_nav .primary_menu .nav_tel {
        display: none !important;
    }

    .main_nav .primary_menu .ico_dropdown {
        display: block;
    }
    .main_nav.nav_flip{
        display: none;
    }
    /*-------------------------------------*/
    /* MAIN NAV CHILD */
    /*-------------------------------------*/
    .main_nav.nav_child{
        top: 0;
        height: 70px;
        background-color: #fff !important;
        z-index: 9;
        transition: none !important;

    }
    .main_nav.nav_child .vaan_logo{
        bottom: 15px;
        width: auto;
        filter: none;
        -webkit-filter:none;
    }
    .main_nav.nav_child .primary_menu{
        height: 100vh;
    }
    .main_nav.nav_child .primary_menu li{
        height: auto;
    }
    .main_nav.nav_child .primary_menu .nav_link:after,
    .main_nav.nav_child .primary_menu .nav_sub li a:after{
        background-color: #000;
    }
    .main_nav.nav_child .primary_menu .nav_link{
        color: #606060;
        font-weight: 600;
    }
    .main_nav.nav_child .primary_menu .nav_sub,
    .main_nav.nav_child .primary_menu .nav_sub .nav_sub_child{
        top: 0;
    }
    .main_nav.nav_child .primary_menu .nav_sub li a,
    .main_nav.nav_child .primary_menu .nav_sub .nav_sub_child li a{
        color: #606060;

    }
    .main_nav.nav_child .primary_menu .nav_sub li,
    .main_nav.nav_child .primary_menu .nav_sub .nav_sub_child li{
        border-bottom: none;
    }
    .main_nav.nav_child .primary_menu .nav_sub:after,
    .main_nav.nav_child .primary_menu .nav_sub .nav_sub_child:after{
        background-color: #fff;

    }
    .main_nav.nav_child .primary_menu .nav_booknow,
    .main_nav.nav_child .primary_menu .nav_tel{
        display: block;
    }
    .main_nav .primary_menu .nav_lang .option_lang{
        top: 50px;
        right: inherit;
        left: 30px;
    }
    .main_nav .primary_menu .nav_lang .option_lang.active{
        animation: fadeInLeft 0.5s;
    }
    .main_nav .primary_menu .nav_lang.lang_inner{
        display: block !important;
    }


    /*-------------------------------------*/
    /* HEMBURGER */
    /*-------------------------------------*/
    .hamburger {
        display: block;
    }

    /*-------------------------------------*/
    /* SLIDESHOW */
    /*-------------------------------------*/
    .main_slideshow{
        margin-top: 70px;
    }
    .main_slideshow .box_slideshow .uk-slideshow-items{
        min-height: calc(40vh - 0px) !important;
    }
    .main_slideshow .box_slideshow h1 {
        font-size: 28px;

    }

    .main_slideshow .box_slideshow h3 {
        font-size: 20px;

    }

    .main_slideshow .box_slideshow .nav_slideshow {
        display: none;
    }

    /*-------------------------------------*/
    /* BOOKING MOBILE */
    /*-------------------------------------*/
    .booking_mobile {
        width: 100%;
        position: fixed;
        bottom: 0;
        z-index: 5;
        display: flex;
        box-shadow: rgba(0, 0, 0, 0.09) 0 0 10px;
    }

    .booking_mobile .mail,
    .booking_mobile .tel {
        position: relative;
        background: #fff;
        width: 25%;
        height: 50px;
        color: #606060;
        text-decoration: none;
        text-align: center;
        vertical-align: top;
        list-style: none;
        align-items: center;
        display: inline-flex;
        margin: 0;
        padding: 0;
        float: left;
        transition: all 0.6s;
    }

    .booking_mobile .mail .uk-icon,
    .booking_mobile .tel .uk-icon {
        margin: auto;
    }

    .booking_mobile .mail:hover,
    .booking_mobile .tel:hover {
        color: #123F6D;
    }

    .booking_mobile .tel:hover {
        transition: all .15s;
    }

    .booking_mobile .book label {
        margin: auto;
    }

    .booking_mobile .book .inline_center {
        font-variant: unicase;
    }

    .booking_mobile .book {
        background: #20548a;
        width: 50%;
        height: 50px;
        font-size: 18px;
        color: #fff;
        text-decoration: none;
        text-align: center;
        vertical-align: top;
        line-height: 0;
        list-style: none;
        align-items: center;
        display: inline-flex;
        margin: 0;
        padding: 0;
        float: left;
        transition: all 0.6s;
        cursor: pointer;
    }
    .booking_mobile .book span{
        color: #fff;
    }

    .booking_mobile .book:hover {
        background: #193c61;
    }

    /*-------------------------------------*/
    /* WRAPPER */
    /*-------------------------------------*/
    .common_wrapper .common_content .col_30,
    .common_wrapper .common_content .col_40,
    .common_wrapper .common_content .col_60,
    .common_wrapper .common_content .col_50 {
        width: 100%;
    }

    .common_wrapper .common_content .common_row {
        margin-top: 30px;
    }

    /*-------------------------------------*/
    /* WELCOME */
    /*-------------------------------------*/
    .common_wrapper.welcome_section .common_content .details_box {
        width: 100%;
        padding: 30px 0;
    }

    .common_wrapper.welcome_section .common_content .details_box .line {
        height: 30px;
    }

    /*-------------------------------------*/
    /* CONTENT */
    /*-------------------------------------*/
    .common_wrapper .common_content .common_row .main_hotel {
        margin: 30px 0;
    }
    .common_wrapper .common_content .common_row .main_hotel.col_child{
        margin: 0 0 30px;
    }
    .common_wrapper .common_content .common_row .main_hotel .base_detail{
        height: auto;
        display: block;
        margin-bottom: 30px;
    }
    .common_wrapper .common_content .common_row .main_hotel .hotel_detail,
    .common_wrapper .common_content .common_row .main_hotel .col_right .hotel_detail{
        padding: 0 30px;
        text-align: center;
    }

    .common_wrapper .common_content .common_row .main_hotel .hotel_detail hr {
        margin: 30px auto;
    }
    .common_wrapper .common_content .common_row .main_hotel .hotel_thumb .col_60.right .hotel_thumb{
        padding: 30px 0 0;
    }
    .common_wrapper .common_content .common_row .main_hotel .hotel_thumb{
        padding: 0 0 30px;
    }
    .common_wrapper .common_content .common_row .main_hotel .col_left .hotel_thumb{
        padding: 30px 0 0;
    }
    .common_wrapper .common_content .common_row .main_hotel .hotel_detail .font_large{
        font-size: 1.7rem;
    }
    .common_wrapper .common_content .common_row .main_hotel .hotel_thumb .hotel_caption {
        text-align: center;
    }
    .common_wrapper .common_content .common_row .main_hotel .hotel_thumb .hotel_caption.clone_{
        mix-blend-mode: initial;
        transform: initial !important;
        margin-top: 30px;
    }
    .common_wrapper .common_content .common_row .main_hotel .hotel_thumb .hotel_caption h5:after{
        width: 100px;
        background-color: #fff;
        margin: auto;
    }

    .common_wrapper .common_content .common_row .title_bottom {
        margin-bottom: 30px;
    }

    .common_wrapper .common_content .common_row .title_bottom h3 {
        text-align: center;
    }

    .common_wrapper .common_content .common_row .nav_slider {
        float: none;
        margin-right: auto;
        margin: auto;
        text-align: center;
        width: fit-content;
        padding-bottom: 30px;
    }

    .common_wrapper .common_content .common_row .amenities .base_amenities{
        width: 100%;
    }
    .common_wrapper .common_content .common_row .amenities .base_amenities .base_row:first-child{
        margin-top: 30px;
    }
    .common_wrapper .common_content .common_row .amenities .base_amenities .base_row:last-child{
        margin-bottom: 30px;
    }
    .common_wrapper .common_content .common_row .amenities .col_50:nth-child(1) .box_table{
        padding: 30px 0 0;
    }
    .common_wrapper .common_content .common_row .amenities .box_table{
        padding: 0;
    }

    /*-------------------------------------*/
    /* STANDARD SECTION */
    /*-------------------------------------*/
    .common_wrapper .common_content.standard_section .main_standard {
        padding: 0 30px;
    }
    .common_wrapper .common_content.standard_section img{
        height: auto;
    }
    .common_wrapper .common_content.standard_section .col_50:first-child {
        margin-bottom: 30px;
    }

    .common_wrapper .common_content.standard_section .main_standard .title_top {
        top: 30px;
        left: 30px;
    }

    .common_wrapper .common_content.standard_section .main_standard .title_rotate {
        bottom: 70px;
    }

    .common_wrapper .common_content.standard_section .main_standard .title_rotate h5 {
        font-size: 12px;
    }
    .common_wrapper .common_content .common_row .main_hotel .hotel_thumb .view_img{
        top: -80px;
        opacity: 1 ;
        z-index: 10;
    }
    .common_wrapper .common_content .common_row .nav_slider_arrow{
        top: 200px;
        border: none;
    }
    /*.common_wrapper .common_content .common_row .nav_slider_arrow ._arrow{*/
    /*    display: none;*/
    /*}*/
    /*.common_wrapper .common_content .common_row .nav_slider_arrow ._dot{*/
    /*    display: block;*/
    /*}*/
    /*-------------------------------------*/
    /* CONTENT INFO */
    /*-------------------------------------*/
    .info_parallax{
        display: none !important;
    }


    /*-------------------------------------*/
    /* CONTACT US */
    /*-------------------------------------*/
    .common_form .textarea_wrap{
        margin-top: 20px;
    }
    .common_form .field_wrap.fix_row{
        margin-top: 20px;
    }
    .common_form .field_wrap .uk-margin{
        margin: 0;
    }
    .common_form .field_wrap:nth-child(2) .uk-margin{
          margin-left: 20px;
      }
    .common_wrapper .common_content.contact_section .main_details .info_box {
        text-align: center;
        padding: 30px;
    }
    .common_wrapper .common_content.contact_section .main_details .info_box .info_wrap span{
        float: initial;
    }
    /*-------------------------------------*/
    /* GALLERY */
    /*-------------------------------------*/
    .common_wrapper .common_content.gallery_section .col_30_1,
    .common_wrapper .common_content.gallery_section .col_30_2,
    .common_wrapper .common_content.gallery_section .col_30_3{
        width: 100%;
    }

    /*-------------------------------------*/
    /* FOOTER SECTION */
    /*-------------------------------------*/
    .common_wrapper.common_footer .main_details {
        width: 100%;
        padding: 30px 0;
        display: inline-block;
    }
    .common_wrapper.common_footer_groups .main_details h3{
        margin: 0 0 30px 0 !important;
    }
    .common_wrapper.common_footer .main_details .details_box .info_box {
        text-align: center;
        padding: 0;
        border-left: none;
    }

    .common_wrapper.common_footer .main_details .details_box .info_box .info_wrap span {
        float: none;
    }
    .common_wrapper.common_footer .main_details .details_box .vaan_logo_footer{
        padding-top: 0;
    }

    .copyright {
        margin-bottom: 50px;
    }
    .copyright.copy_bt {
        margin-bottom: 0 !important;
    }

    .common_wrapper.common_footer_groups .col_30{
        width: 100%;
        display: block;
    }
    .common_wrapper.common_footer_groups .main_details .details_box{
        padding: 0 0 30px;
        text-align: center;
    }
    .common_wrapper.common_footer_groups .main_details .details_box span{
        float: initial;
    }
    .common_wrapper.common_footer_groups .main_logo .box_logo{
        text-align: center;
    }
    .common_wrapper.common_footer_groups .main_details{
        padding: 30px 30px 0;
    }
    .fix_mn_l{
        margin-left: auto;
    }
    .fix_mn_r{
        margin-left: auto;
    }


}

@media (max-width: 980px) {


}

@media (max-width: 768px) {

}

@media (max-width: 640px) {
    .common_wrapper .common_content .common_row .amenities .col_20{
        width: 50%;
    }
    .common_wrapper .common_content .common_row .amenities .base_amenities .box_amenities{
        padding: 15px 0;
    }
    .common_form .field_wrap:nth-child(2) .uk-margin{
        margin-left: 0;
        margin-top: 20px;
    }
    .common_form .field_wrap{
        width: 100%;
    }
    .common_form .field_wrap.fix_row:last-child{
        margin-top: 0;
    }
    .common_wrapper .common_content.gallery_section .box_img img{
        height: 300px;
    }
    .common_wrapper .common_content.slideinfo_wrapper .main_slider .uk-slider-items{
        min-height: calc(35vh) !important;

    }
    .main_slideshow .box_slideshow .uk-slideshow-items{
        min-height: calc(35vh - 0px) !important;
    }

}

@media (max-width: 414px) {
    .common_wrapper .common_content .common_row .nav_slider_arrow{
        top: 0;
    }
    .common_wrapper .common_content .common_row .nav_slider_arrow._navhome{
        top: -100px !important;
    }
    .common_wrapper .common_content .common_row .main_hotel .hotel_thumb img{
        height: 300px;
    }
}

@media (max-width: 320px) {
}