/*==========  Non-Mobile First Method  ==========*/

.headerimage a.button.full {
    margin: 160px 0 !important;
}

#footer .templatera_shortcode .wpb_row {
    margin-left: -5px;
    margin-right: -5px;
}



/* Large Devices, Wide Screens */

@media only screen and (max-width: 1200px) {
    .headerimage a.button.full {
        margin: 10px 0 !important;
    }
    .kooka-list {
        column-count: 1 !important
    }
    .home .page-section .standard-section .span_12 {
        max-width: inherit;
    }
    #num_of_people div.individual_count {
        width: 100%;
        display: inline-block;
    }
}


/* Medium Devices, Desktops */

@media only screen and (max-width: 992px) {
    #num_of_people.vc_col-md-6 {
        width: 50% !important;
    }
    .accommodation_type_wrap.vc_col-md-6 {
        width: 50% !important;
        float: right;
    }
    .headerimage {
        background-position: top center;
        background-size: 150%;
        background-color: var(--main-color);
    }
    .search-panel .title-container {
        padding-left: 0;
    }
}


/* Small Devices, Tablets */

@media only screen and (max-width: 768px) {
    .ref-park-wrap .ref-park, .ref-park-acc {
        height: inherit;
        min-height: 200px;
    }
    .wdm-cabin-wrapper .ref-park-acc .catimage {
        width: 100%;
    }
    .row-reversed {
        display: block;
    }
    .topbarmenu {
        display: none;
    }
    #mobile-header .logo {
        margin-left: 10px !important;
    }
    #footer .latest-blog .blog-item .blog-pic img {
        height: 150px;
    }
    #mobile-header .logo {
        margin-top: -15px;
        margin-left: -20px;
    }
    .container.search-panel {
        width: 100% !important;
    }
    .kooka-list {
        column-count: 2 !important
    }
    .quote-container .portrait {
        height: 80px;
        width: 80px;
    }
    .quote-container .review-source {
        left: 18px;
        top: 80px;
    }
    .quote-container .quote {
        padding: 40px 0 40px 110px;
    }
    .list-parks .module-image-text-cta {
        height: inherit !important;
    }
    .list-parks .catimage {
        width: 100%;
        float: none;
        height: 200px !important;
    }
    .list-parks .module-content {
        min-height: 140px;
    }
    .list-parks .module-content .col-left, .list-parks .module-content .col-right {
        min-height: inherit;
    }
    .list-parks .module-content .button {
        padding: 10px 0px;
        font-size: 9px;
    }
    .headerimage {
        background-size: cover;
    }
    .search-panel .park-address {
        text-align: center;
    }
}


/* Extra Small Devices, Phones */

@media only screen and (max-width: 480px) {
    #num_of_people {
        width: 100%;
    }
    .kooka-list {
        column-count: 1 !important
    }
    #num_of_people.vc_col-md-6 {
        width: 100% !important;
    }
    .accommodation_type_wrap.vc_col-md-6 {
        width: 100% !important;
        float: none;
    }
    .list-parks .module-content .col-right {
        width: 100%;
        padding-left: 0;
    }
    .list-parks .module-content .col-left {
        width: 100%;
        border-bottom: 1px solid #e8e8e8;
        padding-bottom: 10px;
        border-right: none;
    }
    .list-parks .module-content {
        min-height: 80px;
    }
    .list-parks .module-content .button {
        width: 100%;
    }

    .container, .sixteen.columns {
        width: 300px !important;
    }

    #copyright .container, #copyright .sixteen.columns {
        width: 300px !important;
    }

    #tabs.container {
        width: 300px !important;
    }
    #footer .container {
        width: 300px !important;
    }
    .module-image-text-cta.module-version-transparent {
        margin-bottom: -30px;
    }
    .latest-blog.events-listing, .latest-blog.news-listing {
        margin-top: 20px;
    }
}


/* Custom, iPhone Retina */

@media only screen and (max-width: 320px) {
    .container, .sixteen.columns, #footer .container {
        width: 300px !important;
    }
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .latest-blog.events-listing .blog-item .eventdates span.eventdate::after {
        width: 100%;
        height: 10px;
        right: 0;
        -webkit-transform: skewX(-178deg);
        -moz-transform: skewX(-178deg);
        transform: skewY(-178deg);
        top: 17px;
    }
    .latest-blog.events-listing .blog-item .eventdates span.eventdate.datefrom::after {
        top: -6px;
        left: 0;
        -webkit-transform: skewX(2deg);
        -moz-transform: skewX(2deg);
        transform: skewY(2deg);
    }
    .latest-blog.events-listing .blog-item .eventdates span.eventdate {
        width: calc(100% - 10px);
        text-align: center;
    }
}