/*
 * ADV — port of the live adventure-driven-vacations.com design
 * Source: adv_master (YOOtheme Warp 7 / UIkit 2), style "adv_new":
 *   - adv_master/css/custom.css           (ADV styling)
 *   - adv_master/styles/adv_new/css/theme.css (UIkit base)
 *   - adv_master/layouts/theme.php, page-frontpage.php (markup)
 *
 * Breakpoints follow UIkit 2 as used on live:
 *   small  < 768px  |  medium 768–959px  |  large >= 960px
 *
 * Loaded after GeneratePress + child style.css (see functions.php).
 */

/* =========================================================
   1. Base
   ========================================================= */

body {
    font-family: "Open Sans", sans-serif;
    font-size: 13px;
    line-height: 20px;
    font-weight: 400;
    color: #444444;
    background: #ffffff;
}

@media (min-width: 960px) {
    body {
        background: #ffffff url("../images/adv-background.gif") 0 0 no-repeat fixed;
    }
}

/* live (UIkit base): small screens hyphenate and break long words */
@media (max-width: 767px) {
    body {
        word-wrap: break-word;
        -webkit-hyphens: auto;
        hyphens: auto;
    }
}

a {
    color: #1fa2d6;
    text-decoration: none;
}

a:hover,
a:focus {
    color: #00c800;
    text-decoration: none;
}

::-moz-selection { background: #00c800; color: #ffffff; text-shadow: none; }
::selection      { background: #00c800; color: #ffffff; text-shadow: none; }

p {
    margin: 0 0 5px 0;
}

/* live (UIkit/Warp): images middle-aligned; WP alignment classes float at every width
   (GP turns .alignleft/.alignright into centred blocks below 768px) */
img {
    vertical-align: middle;
}

.alignleft {
    display: block;
    float: left;
    margin-right: 20px;
}

.alignright {
    display: block;
    float: right;
    margin-left: 20px;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Headings — low specificity on purpose so explicit block settings can still win */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 16px 0;
    font-family: "Open Sans", sans-serif;
    font-weight: 300;
    color: #444444;
    text-transform: none;
    letter-spacing: normal;
}

h1 { font-size: 30px; line-height: 30px; color: #3c3c3b; }
h2 { font-size: 27px; line-height: 30px; }
h3 { font-size: 17px; line-height: 30px; margin-top: 5px; margin-bottom: 10px; }
h4 { font-size: 16px; line-height: 22px; }

h2 > a       { color: #3c3c3b; }
h2 > a:hover { color: #00c800; }

/* Lists in content */
.entry-content ul:not([class]),
.entry-content ul.wp-block-list,
.entry-content ol:not([class]),
.entry-content ol.wp-block-list {
    margin: 20px 0;
    padding-left: 30px;
}

.entry-content li {
    margin: 0;
}

/* Horizontal rules: live UIkit hr = 20px 0. Homepage separators have inline margin-top:10px on live. */
hr {
    height: 0;
    margin: 20px 0;
    padding: 0;
    border: 0;
    border-top: 1px solid #dddddd;
    background: none;
    opacity: 1;
}

.entry-content hr.wp-block-separator,
.entry-content hr.wp-block-separator.has-css-opacity {
    height: 0;
    margin: 10px 0 20px 0;
    padding: 0;
    border: 0;
    border-top: 1px solid #dddddd;
    background: none;
    opacity: 1;
}

/* =========================================================
   2. Page frame
   ========================================================= */

.separate-containers .inside-article,
.one-container .site-content {
    background: transparent;
}

/* Front-page headline ("uvp") */
.entry-content h1.uvp {
    margin: 30px 0 16px 0;
    font-size: 180%;
    line-height: 30px;
    font-weight: 800;
    letter-spacing: normal;
    text-transform: uppercase;
    color: #3c3c3b;
}

@media (min-width: 960px) {
    .entry-content h1.uvp {
        font-size: 45px;
    }
}

/* Section titles */
.entry-content h2.title {
    margin: 0 0 16px 0;
    font-size: 27px;
    line-height: 30px;
    font-weight: 300;
    letter-spacing: normal;
    color: #444444;
}

/* "Book serious fun in Croatia" style heading */
.entry-content h2.adv-heading-strong {
    font-size: 27px;
    line-height: 30px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: normal;
    color: #444444;
}

/* Big green booking button (#RezdyBookingButton on live).
   In content: Buttons block, button class "adv-book-button", width 100%. */
#RezdyBookingButton,
#BookingButton,
.entry-content .wp-block-button.adv-book-button .wp-block-button__link {
    display: block;
    width: 100%;
    padding: 20px 0;
    border: 0;
    border-radius: 0;
    background-color: #00c800;
    color: #ffffff;
    font-family: "Open Sans", sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}

#RezdyBookingButton:hover,
#BookingButton:hover,
.entry-content .wp-block-button.adv-book-button .wp-block-button__link:hover,
.entry-content .wp-block-button.adv-book-button .wp-block-button__link:focus {
    background-color: #00c800;
    color: #ffffff;
}

.entry-content .wp-block-buttons:has(.adv-book-button) {
    margin: 0;
}

.entry-content .wp-block-button.adv-book-button {
    width: 100%;
    margin: 0;
}

/* =========================================================
   3. Header (Warp #navbar)
   ========================================================= */

.site-header {
    background: #3c3c3b url("../images/header.png") no-repeat;
}

.site-header .header-contact a,
.site-header .topbar a {
    color: #1fa2d6;
}

.site-header .header-contact a:hover,
.site-header .topbar a:hover {
    color: #00c800;
}

.adv-icon-envelope {
    display: inline-block;
    width: 20px;
    height: 17px;
    margin-left: 15px;
    vertical-align: -2px;
}

@media (min-width: 960px) {

    /* Fixed 110px bar, like live */
    .site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 110px;
        z-index: 9999;
    }

    .site {
        margin-top: 110px;
    }

    .site-header .inside-header {
        height: 110px;
        padding: 10px 0;
        max-width: 940px;
    }

    .site-header .site-logo img.header-image.is-logo-image {
        width: 244px;
        height: 90px;
        margin-left: 5px;
    }

    .site-header .header-menu {
        display: flex;
        flex-direction: column;
        height: 90px;
    }

    /* toolbar: Call us / email us */
    .site-header .topbar {
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        height: 45px;
        padding: 10px 0 0 0;
        overflow: visible;
    }

    .site-header .header-contact {
        display: flex;
        align-items: flex-start;
        gap: 4px;
        margin: 0;
        font-size: 17px;
        line-height: 30px;
        font-weight: 300;
    }

    .site-header .header-contact > * {
        white-space: nowrap;
    }

    /* menu row */
    .site-header .navigation {
        height: 45px;
        padding-top: 4px;
        align-items: flex-start;
        justify-content: flex-end;
    }

    .site-header .main-navigation .inside-navigation {
        padding: 0;
    }

    .site-header .main-navigation .main-nav > ul > li > a {
        height: 35px;
        margin-left: 5px;
        padding: 0 0 0 17px;
        font-family: "Open Sans", sans-serif;
        font-size: 27px;
        font-weight: 300;
        line-height: 45px;
        letter-spacing: -1px;
        color: #ffffff;
        background-color: transparent;
    }

    .site-header .main-navigation .main-nav > ul > li:not([class*="current-menu-"]):hover > a,
    .site-header .main-navigation .main-nav > ul > li:not([class*="current-menu-"]) > a:focus {
        color: #00c800;
        background-color: transparent;
    }

    .site-header .main-navigation .main-nav > ul > li[class*="current-menu-"] > a {
        color: #9d9d9c;
        background-color: transparent;
    }
}

/* =========================================================
   4. Tour & location cards (.uk-overlay / .overlay on live)
   ========================================================= */

.tour-box {
    display: block;
    position: relative;
    max-width: 100%;
}

.uk-thumbnail {
    display: inline-block;
    box-sizing: border-box;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

.tour-box .uk-thumbnail {
    display: block;
}

.uk-overlay {
    display: inline-block;
    position: relative;
    max-width: 100%;
    vertical-align: middle;
    overflow: hidden;
}

.tour-box .uk-overlay,
.adv_tour_block .uk-overlay {
    display: block;
    width: 100%;
}

.uk-overlay figure,
.uk-overlay .wp-block-image {
    margin: 0;
}

.uk-overlay figure > a {
    display: block;
}

/* live uses the "half" crop (620x400) for every card image */
.tour-box .uk-overlay img,
.adv_tour_block .uk-overlay img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 620 / 400;
    object-fit: cover;
    vertical-align: middle;
}

.uk-overlay .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    padding: 2px 0 0 0;
    box-sizing: content-box;
    line-height: 37px;
    background-color: rgba(0, 0, 0, 0.8);
}

.adv_tour_block .overlay > .gb-inside-container,
.adv_tour_block .overlay-content > .gb-inside-container {
    padding: 0;
}

/* tour card strip */
.adv-tour-lenta {
    margin-top: 3px;
    padding-right: 10px;
    text-align: right;
    line-height: 12px;
}

.entry-content h2.kockica,
h2.kockica {
    margin: 0;
    font-size: 16px;
    line-height: 16px;
    font-weight: 300;
    letter-spacing: normal;
    vertical-align: top;
    color: #ffffff;
    text-align: right;
}

.adv-tour-price {
    color: #00c800;
    font-size: 12px;
    line-height: 12px;
    vertical-align: top;
}

.adv-tour-sep {
    color: #7a7a7a;
    font-size: 10px;
    line-height: 12px;
    vertical-align: top;
}

.adv-tour-duration {
    color: #ffffff;
    font-size: 12px;
    line-height: 12px;
    vertical-align: top;
}

/* location card strip */
.entry-content .overlay-content h2.naslov {
    margin: 0 0 0 10px;
    font-size: 27px;
    line-height: 33px;
    font-weight: 300;
    letter-spacing: normal;
    color: #ffffff;
    text-align: left;
    vertical-align: bottom;
}

.entry-content .overlay-content h2.naslov a,
.entry-content .overlay-content h2.naslov a:hover {
    color: #ffffff;
}

/* =========================================================
   5. Proud members
   ========================================================= */

.gray-bg {
    margin-top: 30px;
    padding: 12px;
}

/* live (UIkit 2) is content-box: table width 100% + 2x12px padding */
.gray-bg.ordeni {
    box-sizing: content-box;
}

.ordeni {
    display: table;
    width: 100%;
    height: 100%;
    text-align: center;
}

.orden {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.orden > img {
    display: inline-block;
    vertical-align: middle;
}

/* live: 110x110 / 267x70, small screens 90x90 / 202x53 */
.orden > img.adv-member-uspa { width: 110px; height: 110px; }
.orden > img.adv-member-uhpa { width: 267px; height: 70px; }

@media (max-width: 767px) {
    .orden > img.adv-member-uspa { width: 90px; height: 90px; }
    .orden > img.adv-member-uhpa { width: 202px; height: 53px; }
}

/* =========================================================
   6. Plain card image (Gift Voucher card — no strip on live)
   ========================================================= */

.entry-content .wp-block-image.adv-card-image {
    margin: 0;
}

.entry-content .wp-block-image.adv-card-image a {
    display: block;
}

.entry-content .wp-block-image.adv-card-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 620 / 400;
    object-fit: cover;
}

/* =========================================================
   7. Sliders (Splide) — inc/adv-live-port.php
   ========================================================= */

/* arrows: both sliders show them only while hovered (live: arrowsNavAutoHide / bx opacity 0) */
.adv-slider .splide__arrow {
    position: absolute;
    z-index: 2;
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    transform: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.adv-slider:hover .splide__arrow,
.adv-slider .splide__arrow:focus-visible {
    opacity: 1;
}

.adv-slider .splide__arrow:hover,
.adv-slider .splide__arrow:focus {
    background: transparent;
}

.adv-slider .splide__arrow:disabled {
    opacity: 0;
    cursor: default;
}

.adv-slider .splide__arrow svg {
    display: none;
}

.adv-slider .splide__arrow::before {
    content: "";
    position: absolute;
    display: block;
}

/* hero arrows = RoyalSlider "universal" skin: 60px full-height zone, 32px sprite icon at 50% -> 100% */
.adv-hero-slider .splide__arrow {
    top: 0;
    width: 60px;
    height: 100%;
}

.adv-hero-slider .splide__arrow--prev { left: 0; }
.adv-hero-slider .splide__arrow--next { right: 0; }

.adv-hero-slider .splide__arrow::before {
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border-radius: 2px;
    background: url("../images/rs-universal.png") no-repeat;
    opacity: 0.5;
}

.adv-hero-slider .splide__arrow--prev::before { background-position: -64px -32px; }
.adv-hero-slider .splide__arrow--next::before { background-position: -64px -64px; }

.adv-hero-slider .splide__arrow:hover::before {
    opacity: 1;
}

/* post slider arrows = bxSlider + FontAwesome angle-left/right at 50px, white */
.adv-post-slider .splide__arrow {
    top: 50%;
    width: 38px;
    height: 52px;
    margin-top: -30px;
}

.adv-post-slider .splide__arrow--prev { left: 8px; }
.adv-post-slider .splide__arrow--next { right: 8px; }

.adv-post-slider .splide__arrow::before {
    top: 2px;
    left: 10px;
    width: 18px;
    height: 50px;
    background: no-repeat center / 100% 100%;
}

.adv-post-slider .splide__arrow--prev::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1536 640 1792'%3E%3Cpath fill='%23fff' transform='scale(1,-1)' d='M627 992q0 -13 -10 -23l-393 -393l393 -393q10 -10 10 -23t-10 -23l-50 -50q-10 -10 -23 -10t-23 10l-466 466q-10 10 -10 23t10 23l466 466q10 10 23 10t23 -10l50 -50q10 -10 10 -23z'/%3E%3C/svg%3E");
}

.adv-post-slider .splide__arrow--next::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1536 640 1792'%3E%3Cpath fill='%23fff' transform='scale(1,-1)' d='M595 576q0 -13 -10 -23l-466 -466q-10 -10 -23 -10t-23 10l-50 50q-10 10 -10 23t10 23l393 393l-393 393q-10 10 -10 23t10 23l50 50q10 10 23 10t23 -10l466 -466q10 -10 10 -23z'/%3E%3C/svg%3E");
}

/* live: div.bx-viewport { max-height: 444px !important } */
.adv-post-slider .splide__track {
    max-height: 444px;
}

/* hero: 940x400, fade */
.adv-hero-slider {
    margin: 0;
    background: #222222;
}

.adv-hero-slider .splide__slide a {
    display: block;
    height: 100%;
}

.adv-hero-slider .splide__slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* latest posts: 600 / 500 / 350 high, text centred */
.adv-post-slider .adv-post-slide {
    position: relative;
    background-color: #cccccc;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #ffffff;
}

.adv-post-slide-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 19.5px;
    box-sizing: border-box;
    text-align: center;
}

.adv-post-slide-inner {
    max-width: 600px;
    padding: 19.5px;
}

.adv-post-slide-cats,
.adv-post-slide-cats a,
.adv-post-slide-excerpt,
.adv-post-slide-excerpt p {
    margin: 0;
    color: #ffffff;
    font-size: 13px;
    line-height: 20px;
}

.adv-post-slide-cats a:hover {
    color: #00c800;
}

.entry-content h3.adv-post-slide-title {
    margin: 19.5px 0;
    font-size: 24px;
    line-height: 30px;
    font-weight: 300;
    color: #ffffff;
}

.entry-content h3.adv-post-slide-title a {
    color: #ffffff;
}

.entry-content h3.adv-post-slide-title a:hover {
    color: #00c800;
}

.adv-post-slide-excerpt {
    margin-top: 20px;
}

/* =========================================================
   8. Footer (live .tm-bottom / .tm-footer) — inc/adv-live-port.php
   ========================================================= */

/* live .tm-bottom margin-top: 20px (>= 960), 25px (<= 767), none in between */
.site-footer {
    margin-top: 0;
    background-color: #00c800;
    color: #ffffff;
}

@media (min-width: 960px) {
    .site-footer {
        margin-top: 20px;
    }
}

.adv-footer {
    padding: 15px 0 15px 0;
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    font-weight: 300;
    line-height: 20px;
    color: #ffffff;
}

.adv-footer-container {
    max-width: 940px;
    margin: 0 auto;
    box-sizing: border-box;
}

.adv-footer a {
    color: #ffffff;
}

.adv-footer a:hover {
    color: #71ea71;
}

/* Contact us | Skydiving Gift Voucher | Partners */
.adv-footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.adv-footer-links > li {
    position: relative;
    margin: 0;
}

.adv-footer-links > li + li {
    margin-left: 10px;
    padding-left: 10px;
}

.adv-footer-links > li + li::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    height: 10px;
    margin-top: -5px;
    border-left: 1px solid #dddddd;
}

.adv-footer-links > li > a {
    display: block;
    padding: 8px 0;
    font-size: 12px;
    line-height: 20px;
}

/* social icons: dark green, white on hover.
   live: fixed 170px list, centred, icons left-aligned inside (footer: margin 0 385px; panel: 10px 105px 0) */
.adv-social-icons {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 170px;
    margin: 15px auto 0 auto;
    padding: 0;
    list-style: none;
}

.adv-social-icons li {
    margin: 0 6px 0 0;
}

.adv-social-icons li:last-child {
    margin-right: 0;
}

.adv-social-icons a {
    display: block;
    height: 28px;
    color: #006600;
}

.adv-social-icons a.adv-social-instagram {
    width: 29px;
    color: #006400;
}

.adv-social-icons a:hover,
.adv-social-icons a:focus {
    color: #ffffff;
}

.adv-social-icons svg {
    display: block;
}

.adv-footer hr {
    margin: 15px 0 0 0;
    border-top-color: #dddddd;
}

/* live: UIkit grid (margin-left -20px, columns padding-left 20px) */
.adv-footer-offices {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 15px 0 0 -20px;
    text-align: center;
}

.adv-footer-office {
    padding-left: 20px;
}

.adv-footer-office > div[itemprop="department"] div {
    margin: 0;
}

/* live: blue underlined links on green */
.adv-footer a.contact-links {
    font-size: 15px;
    font-weight: 400;
    text-decoration: underline;
    color: blue;
}

.adv-footer a.contact-links:hover {
    color: #ffffff;
}

.adv-footer .adv-copyright {
    margin: 26px 0 4px 0;
    font-size: 12px;
    font-weight: normal;
    text-align: center;
    color: #006600;
}

.adv-eu-logo {
    margin-top: 24px;
    text-align: center;
}

.adv-eu-logo img {
    display: block;
    width: 150px;
    height: auto;
    margin: 0 auto;
}

@media (max-width: 767px) {
    .adv-footer-container {
        padding: 0 10px;
    }
}

/* =========================================================
   9. Front page: small-screen hero
   ========================================================= */

/* live: slider + full-width button on >= 768px, photo with button on top below that */
.adv-mobile-hero {
    display: none;
}

@media (max-width: 767px) {
    .entry-content .adv-hero-slider,
    .entry-content .adv-book-desktop {
        display: none;
    }

    .entry-content .adv-mobile-hero {
        display: block;
        position: relative;
        margin: 0;
    }

    /* GP applies the content padding to group inner containers too */
    .entry-content .adv-mobile-hero > .wp-block-group__inner-container {
        padding: 0;
    }

    .entry-content .adv-mobile-hero .wp-block-image {
        margin: 0;
    }

    .entry-content .adv-mobile-hero img {
        display: block;
        width: 100%;
        height: auto;
    }

    .entry-content .adv-mobile-hero .wp-block-buttons {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 50px;
    }
}

/* =========================================================
   10. Small screens (< 960px) — live breakpoint for the toggle/off-canvas
   GP: generate_menu_plus_settings[mobile_menu_breakpoint] = 959, slideout side = left
   ========================================================= */

@media (max-width: 959px) {

    /* header bar: static, 102px, header.svg (live #navbar) */
    .site-header {
        position: static;
        height: 102px;
        background: #3c3c3b url("../images/header.svg") no-repeat;
    }

    .site-header .inside-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        height: 102px;
        max-width: none;
        padding: 0;
    }

    .site-header .site-logo img.header-image.is-logo-image {
        width: 244px;
        height: 90px;
        margin: 5px 0 0 5px;
    }

    .site-header .header-menu {
        height: 102px;
    }

    .site-header .topbar {
        display: none !important;
    }

    .site-header .navigation {
        height: 102px;
        align-items: stretch;
        padding: 0;
    }

    /* toggle: FA bars 24px, white, 36x102 box, 10px from the right edge */
    .site-header .main-navigation .menu-toggle,
    .site-header .mobile-menu-control-wrapper .menu-toggle {
        height: 102px;
        margin: 0 10px 0 0;
        padding: 0 15px 0 0;
        font-size: 24px;
        line-height: 102px;
        color: #ffffff;
        background: transparent;
    }

    .site-header .menu-toggle .gp-icon svg.adv-icon-bars {
        width: 0.857em;
        height: 1em;
        top: 0.125em;
    }

    /* live keeps the bars icon while the panel is open (GP swaps to a close icon) */
    .site-header .mobile-menu-control-wrapper.toggled .menu-toggle .icon-menu-bars svg.adv-icon-bars {
        display: block;
    }

    .site-header .mobile-menu-control-wrapper.toggled .menu-toggle .icon-menu-bars svg:not(.adv-icon-bars) {
        display: none;
    }

    .site-header .mobile-menu-control-wrapper,
    .site-header .mobile-menu-control-wrapper .menu-bar-items {
        background: transparent;
    }

    /* page */
    .site {
        margin-top: 10px;
    }

    /* 768-959: GP uses the desktop content padding (0), live has 0 10px (.uk-container) */
    .separate-containers .inside-article {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* footer: links + social icons are large-screen only on live */
    .adv-footer .adv-footer-links,
    .adv-footer .adv-social-icons {
        display: none;
    }

    .adv-footer .adv-footer-offices + hr,
    .adv-footer hr {
        margin-top: 15px;
    }

    .adv-footer span > hr:first-child {
        margin-top: 0;
    }

    .adv-footer-container {
        padding: 0 10px;
    }

    /* ---- off-canvas panel (live .uk-offcanvas-bar) ---- */
    #generate-slideout-menu.slideout-navigation {
        top: 102px;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        height: auto;
        padding: 0;
        background: #3c3c3b;
        box-shadow: none;
    }

    #generate-slideout-menu.offside--left {
        left: 0;
        transform: translate3d(-100%, 0, 0);
    }

    #generate-slideout-menu.offside--left.is-open {
        transform: translate3d(0, 0, 0);
    }

    #generate-slideout-menu .inside-navigation {
        display: block;
        padding: 0;
    }

    .slideout-overlay {
        background: transparent !important;
    }

    .slideout-overlay .slideout-exit,
    #generate-slideout-menu .slideout-exit {
        display: none;
    }

    /* search */
    .adv-offcanvas-search {
        display: flex;
        align-items: flex-start;
        height: 35px;
        margin: 20px 15px 0 15px;
    }

    .adv-offcanvas-search-icon {
        flex: 0 0 28px;
        margin-top: 1px;
    }

    #generate-slideout-menu .adv-offcanvas-search-field {
        width: 288px;
        max-width: calc(100% - 38px);
        height: 30px;
        margin: 0 10px 0 0;
        padding: 0 30px;
        border: 0;
        border-radius: 3px;
        background: rgba(0, 0, 0, 0.2);
        color: #cccccc;
        font-family: "Open Sans", sans-serif;
        font-size: 13px;
    }

    #generate-slideout-menu .adv-offcanvas-search-field::placeholder {
        color: #999999;
    }

    /* menu: 20px items, 1px #ededed rules (GP slideout adds margin-bottom: 40px to .main-nav) */
    #generate-slideout-menu .main-nav {
        margin: 0;
    }

    #generate-slideout-menu .main-nav ul {
        margin: 0;
        padding: 0;
        font-family: "Open Sans", sans-serif;
        font-size: 20px;
        line-height: 25px;
    }

    #generate-slideout-menu .main-nav ul li {
        float: none;
        width: 100%;
        padding-left: 15px;
        border-top: 1px solid #ededed;
        box-sizing: border-box;
    }

    #generate-slideout-menu .main-nav ul li:last-child {
        border-bottom: 1px solid #ededed;
    }

    #generate-slideout-menu .main-nav ul li a {
        display: block;
        padding: 5px 0;
        font-size: 20px;
        font-weight: 400;
        line-height: 25px;
        letter-spacing: normal;
        color: #ffffff;
        background: transparent;
    }

    #generate-slideout-menu .main-nav ul li a:hover,
    #generate-slideout-menu .main-nav ul li a:focus {
        color: #ffffff;
        background: #404040;
    }

    #generate-slideout-menu .main-nav ul li[class*="current-menu-"] > a {
        color: #ffffff;
        background: #1a1a1a;
    }

    /* social icons: grey (live *_grey.svg / tiktok_gray.svg), white on hover.
       live .uk-panel: content-box (35px + 1px border) and a clearfix ::before (display:table),
       which stops the list's 10px top margin from collapsing into the panel's */
    .adv-offcanvas-social {
        box-sizing: content-box;
        height: 35px;
        margin: 10px 0 20px 0;
        padding-left: 10px;
        border-bottom: 1px solid #3c3c3b;
    }

    .adv-offcanvas-social::before {
        content: " ";
        display: table;
    }

    /* GP hides every ul inside .main-navigation at this breakpoint */
    #generate-slideout-menu .adv-offcanvas-social ul.adv-social-icons {
        display: flex;
        margin: 10px auto 0 auto;
    }

    .adv-offcanvas-social .adv-social-icons a {
        color: #8d8d8d;
    }

    .adv-offcanvas-social .adv-social-icons a.adv-social-instagram {
        width: 31px;
        color: #8d8d8d;
    }

    .adv-offcanvas-social .adv-social-icons a:hover,
    .adv-offcanvas-social .adv-social-icons a:focus {
        color: #ffffff;
    }
}

@media (min-width: 960px) {
    .adv-offcanvas-search,
    .adv-offcanvas-social {
        display: none;
    }
}

@media (max-width: 767px) {

    /* live: h1 24px / h2 20px on small screens (global rules, custom.css) */
    h1 {
        font-size: 24px;
        line-height: 25px;
    }

    h2,
    .entry-content h2,
    .entry-content h2.title,
    .entry-content h2.adv-heading-strong,
    .entry-content .overlay-content h2.naslov {
        font-size: 20px;
        line-height: 30px;
    }

    .adv-tour h2.h2greybox {
        line-height: 24px;
    }

    .entry-content .overlay-content h2.naslov {
        line-height: 33px;
    }

    /* live small-screen headline: 180%, line-height 25px, inline margin-top 5px */
    .entry-content h1.uvp {
        margin-top: 5px;
        line-height: 25px;
    }

    .site-footer {
        margin-top: 25px;
    }

    .adv-footer-offices {
        grid-template-columns: 1fr;
        row-gap: 0;
    }
}

/* =========================================================
   11. Tour page — single-tour.php + template-parts/tour/single.php
   live: adv_master/layouts/single-tour.php + css/custom.css (tour rules)
   ========================================================= */

/* title: 60px/600/-2px only >= 960 on live (custom.css .fat-bitch); below it is the normal h1 */
@media (min-width: 960px) {
    h1.fat-bitch {
        font-size: 60px;
        line-height: 60px;
        font-weight: 600;
        letter-spacing: -2px;
    }
}

@media (max-width: 767px) {
    h1.fat-bitch {
        font-size: 24px;
        line-height: 25px;
    }
}

/* uk-grid (margin-left -20px, columns padding-left 20px), 2/3 + 1/3 from 960px */
.adv-tour-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -20px;
}

.adv-tour-col-main,
.adv-tour-col-side {
    box-sizing: border-box;
    width: 100%;
    padding-left: 20px;
}

/* data-uk-grid-margin: stacked columns get 25px top margin */
.adv-tour-col-side {
    margin-top: 25px;
}

@media (min-width: 960px) {
    .adv-tour-col-main { width: 66.6667%; }
    .adv-tour-col-side { width: 33.3333%; margin-top: 0; }
}

/* slider (live RoyalSlider "universal", 900x600, bullets bottom-right) */
.adv-tour-slider {
    background: #222222;
}

.adv-tour-slider .splide__slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.adv-tour-slider .splide__arrow {
    top: 0;
    width: 60px;
    height: 100%;
}

.adv-tour-slider .splide__arrow--prev { left: 0; }
.adv-tour-slider .splide__arrow--next { right: 0; }

.adv-tour-slider .splide__arrow::before {
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border-radius: 2px;
    background: url("../images/rs-universal.png") no-repeat;
    opacity: 0.5;
}

.adv-tour-slider .splide__arrow--prev::before { background-position: -64px -32px; }
.adv-tour-slider .splide__arrow--next::before { background-position: -64px -64px; }
.adv-tour-slider .splide__arrow:hover::before { opacity: 1; }

.adv-tour-slider .splide__pagination {
    position: absolute;
    right: 10px;
    bottom: 12px;
    left: auto;
    z-index: 3;
    display: block;
    width: 20%;
    margin: 0;
    padding: 0;
    line-height: 15px;
    text-align: right;
    transform: none;
}

.adv-tour-slider .splide__pagination li {
    display: inline-block;
    box-sizing: content-box;
    width: 15px;
    height: 15px;
    margin: 0;
    padding: 0 3px;
    line-height: 15px;
    vertical-align: baseline;
}

.adv-tour-slider .splide__pagination__page {
    display: block;
    width: 12px;
    height: 12px;
    margin: 0;
    padding: 0;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: transparent;
    opacity: 1;
    transform: none;
    box-sizing: border-box;
}

.adv-tour-slider .splide__pagination__page.is-active {
    background: #bbbbbb;
    transform: none;
}

@media (max-width: 767px) {
    .adv-tour-slider .splide__pagination {
        display: none;
    }
}

/* teaser */
#adv-tour-teaser,
.adv-tour-teaser {
    padding: 10px;
    background-color: rgba(170, 170, 170, 0.2);
    font-family: "Open Sans", sans-serif;
    font-size: 13px;
    line-height: 17px;
    color: #3c3c3b;
}

/* sidebar info boxes */
.adv-tour-info {
    width: 100%;
}

#adv-tour-activities,
#adv-price-duration,
#adv-book-now,
.adv-tour-activities,
.adv-price-duration {
    padding: 3px 10px;
    border-bottom: 1px solid #ffffff;
    background-color: rgba(170, 170, 170, 0.2);
}

ul.adv-tour-activity-icons {
    height: 50px;
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.adv-tour-activity-icons > li {
    float: left;
    width: 50px;
    height: 50px;
    margin: 0 5px 0 0;
    background-size: 50px 50px;
}

#activities-skydiving,           .adv-activity-skydiving           { background-image: url("../images/icons/activity_skydiving.svg"); }
#activities-rock-climbing,       .adv-activity-rock-climbing       { background-image: url("../images/icons/activity_climbing.svg"); }
#activities-motorcycling,        .adv-activity-motorcycling        { background-image: url("../images/icons/activity_motorcycle.svg"); }
#activities-wilderness-survival, .adv-activity-wilderness-survival { background-image: url("../images/icons/activity_wildernes_survival.svg"); }
#activities-kayaking,            .adv-activity-kayaking            { background-image: url("../images/icons/activity_kayaking.svg"); }
#activities-scenic-flight,       .adv-activity-scenic-flight       { background-image: url("../images/icons/activity_scenic_flight.svg"); }
#activities-sailing,             .adv-activity-sailing             { background-image: url("../images/icons/activity_sailing.svg"); }
#activities-scuba-diving,        .adv-activity-scuba-diving        { background-image: url("../images/icons/activity_scuba_diving.svg"); }
#activities-acrobatic-flight,    .adv-activity-acrobatic-flight    { background-image: url("../images/icons/activity_acrobatic_flight.svg"); }

#adv-price-duration,
.adv-price-duration {
    font-size: 17px;
    font-weight: 300;
}

#adv-price-duration > ul,
.adv-price-duration > ul {
    height: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#adv-price-duration > ul > li,
.adv-price-duration > ul > li {
    float: left;
    margin: 0 25px 0 0;
}

#adv-tour-short {
    font-size: 12px;
    font-weight: normal;
}

.adv-book-button-wrap {
    margin-bottom: 7px;
    background-color: #00c800;
}

#RezdyBookingButton-sold-out {
    display: block;
    width: 100%;
    padding: 20px 0;
    border: 0;
    border-radius: 0;
    background-color: red;
    color: #ffffff;
    font-family: "Open Sans", sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    pointer-events: none;
}

/* day plan */
.adv-tour h2.h2greybox {
    margin: 20px 0 10px 0;
    padding: 0 10px;
    background-color: rgba(170, 170, 170, 0.2);
    font-size: 17px;
    line-height: 30px;
    font-weight: 300;
}

@media (max-width: 767px) {
    .adv-tour h2.h2greybox {
        line-height: 24px;
    }
}

.adv-tour h3.tour-subtitle {
    font-size: 14px;
    font-weight: 600;
}

.adv-tour h3.tour-subtitle::before {
    content: "\2022";
    margin-right: 5px;
    color: #00c800;
    font-size: 32px;
    vertical-align: bottom;
}

.adv-tour-day-desc {
    margin: 10px 0 15px;
}

.adv-tour-day-note p {
    margin-top: 5px;
    font-size: 10px;
}

.adv-tour-day-note p::before {
    content: "* ";
}

/* Included / Excluded / Budget (uk-grid, uk-width-large-1-N) */
.adv-tour-info-grid {
    display: flex;
    flex-wrap: wrap;
    margin-left: -20px;
}

.adv-tour-info-col {
    box-sizing: border-box;
    width: 100%;
    padding-left: 20px;
}

.adv-tour-info-col + .adv-tour-info-col {
    margin-top: 25px;
}

@media (min-width: 960px) {
    .adv-tour-info-cols-2 .adv-tour-info-col { width: 50%; }
    .adv-tour-info-cols-3 .adv-tour-info-col { width: 33.3333%; }
    .adv-tour-info-col + .adv-tour-info-col { margin-top: 0; }
}

#adv-tour-info ul {
    margin: 20px 0 0 0;
    padding-left: 30px;
}

/* UIkit: nested lists have no margin */
#adv-tour-info ul ul,
.adv-tour-day-desc ul ul {
    margin: 0;
}

/* sidebar sections */
.adv-tour h2.sidebar {
    margin: 20px 0 16px 0;
    line-height: 20px;
}

.adv-tour-places {
    padding: 10px;
    background-color: rgba(170, 170, 170, 0.2);
}

.adv-tour-places ul.adv-tour-articles {
    margin: 0 0 20px 0;
    padding: 0;
    list-style: none;
}

/* =========================================================
   12. Post grids — [adv_tours_grid] + page-tours-grid.php
   live: wc-shortcodes [wc_posts layout="masonry"] + box/content-excerpt.php,
         layouts/page-vacations.php (#system)
   ========================================================= */

/* live custom.css: #system 0 on small screens, 20px from 768px */
.adv-system-page #system {
    margin-top: 0;
}

@media (min-width: 768px) {
    .adv-system-page #system {
        margin-top: 20px;
    }
}

/* wc-shortcodes: .wc-shortcodes-posts / .wc-shortcodes-post-box (+ inline width/margin from posts.js) */
.adv-posts-grid {
    position: relative;
}

.adv-posts-grid > .adv-grid-item {
    box-sizing: border-box;
    margin: 0 0 20px 0;
    padding: 0;
    background-color: #ffffff;
}

/* card (box/content-excerpt.php) */
.adv-tour-list .adv-tour-thumbnail img {
    display: block;
    width: 100%;
    height: auto;
}

.adv-tour-title {
    padding: 10px;
    border-bottom: 1px solid #ffffff;
    background-color: rgba(170, 170, 170, 0.2);
}

.adv-tour-title h2 {
    margin: 0;
    font-family: "Open Sans", sans-serif;
    font-weight: 300;
}

/* =========================================================
   13. Pages — page-live.php (live layouts/page.php) and the UIkit grid
   used inside live page content (contact details, etc.)
   live: warp theme.css (UIkit 2 grid) + custom.css (20px gutter)
   ========================================================= */

/* UIkit 2: [class*='uk-width-'] */
[class*='uk-width-'] {
    box-sizing: border-box;
    width: 100%;
}

.uk-width-1-1 { width: 100%; }

@media (min-width: 768px) {
    .uk-width-medium-1-1 { width: 100%; }
    .uk-width-medium-1-2,
    .uk-width-medium-2-4,
    .uk-width-medium-3-6,
    .uk-width-medium-5-10 { width: 50%; }
    .uk-width-medium-1-3,
    .uk-width-medium-2-6 { width: 33.333%; }
    .uk-width-medium-2-3,
    .uk-width-medium-4-6 { width: 66.666%; }
}

/* UIkit 2 float grid; live custom.css sets the gutter to 20px */
.uk-grid::before,
.uk-grid::after {
    content: " ";
    display: table;
}

.uk-grid::after {
    clear: both;
}

.uk-grid {
    margin: 0 0 0 -20px;
    padding: 0;
    list-style: none;
}

.uk-grid + .uk-grid {
    margin-top: 25px;
}

.uk-grid > [class*='uk-width-'] {
    margin: 0;
    padding-left: 20px;
    float: left;
}

.uk-grid > [class*='uk-width-'] > :last-child {
    margin-bottom: 0;
}

.uk-grid > .uk-grid-margin {
    margin-top: 25px;
}

/* UIkit's own large-screen gutter is more specific than custom.css, so it wins on live */
@media (min-width: 1220px) {
    .uk-grid:not(.uk-grid-preserve) { margin-left: -35px; }
    .uk-grid:not(.uk-grid-preserve) > [class*='uk-width-'] { padding-left: 35px; }
    .uk-grid:not(.uk-grid-preserve) + .uk-grid { margin-top: 35px; }
    .uk-grid:not(.uk-grid-preserve) > .uk-grid-margin { margin-top: 35px; }
}

/* page-live.php: <header style="margin-bottom:20px"><h1 class="fat-bitch"> */
.adv-live-page .adv-live-page-header {
    margin-bottom: 20px;
}

.adv-live-page .adv-live-page-header h1 {
    margin: 0 0 16px 0;
}