/* --- Home page (SITE-212) ------------------------------------------------
   Extracted verbatim from the inline <style> block that used to sit in
   views/index.ejs, and linked from that same position so the cascade order
   relative to essentials.css / layout.css / style.css is unchanged.

   Deliberately NOT folded into the site-wide css/style.css: these rules are
   page-scoped. The body font override and the .owl-carousel-2 hero rules are
   inline on only a handful of views, so promoting them to style.css would
   restyle the ~30 pages that never opted in. Rules that style.css already
   defines identically (.mobile-mb-0/-10/-15, .mobile-pl-0, .remove-before,
   .remove-after) were dropped here rather than duplicated, as were utilities
   with no matching class in the home markup (.mobile-mt-125, .mobile-mb-30,
   .lets-start) and an empty landscape media block.
   -------------------------------------------------------------------------- */

body {
    font-family: "Google Sans", arial, sans-serif !important;
    letter-spacing: 0.25px !important;
}

.calousel_ltr {
    direction: initial;
}

.owl-wrapper {
    margin: 0 auto !important;
    width: fit-content !important;
}

.logo-center {
    text-align: -webkit-center !important;
}

.owl-carousel-2 > div {
    display: inline-block;
    background-color: #547698;
}

.owl-carousel-2 div img {
    width: 100%;
}

.owl-carousel-2 div .textoverlay {
    position: absolute;
    color: #FFF;
    font-size: 12px;
    display: block;
    width: 100%;
    height: 100%;
    margin-top: 10%;
    z-index: 500;
}

.owl-nav {
    background: transparent !important;
}

.owl-prev {
    display: inline-grid !important;
    width: 30px !important;
    height: 30px !important;
}

.owl-next {
    display: inline-grid !important;
    width: 30px !important;
    height: 30px !important;
}

.width-15p {
    width: 15% !important;
}

/* The hero lines were both <h4>s before they became an <h1> + <h2>, so the page
   has one logical outline. Their appearance must not change with the tag, and
   two site-wide rules make that non-automatic: style.css styles `.h1, h2, h3…`
   — a CLASS for h1, not the element — so a real <h1> falls back to the theme's
   Open Sans 600, and essentials.css sets `letter-spacing: normal` on h4 but not
   on h1/h2. Pin both lines to exactly what the <h4>s rendered. Font size and
   margins are already fixed by the fs-30 / mb-0 / mt-30 / mb-14 utilities. */
#slider .header-sub-title {
    font-family: "Google Sans", Arial, sans-serif;
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: normal;
}

/* Event rows are built in public/js/index.js (eventItem). These replace the
   inline style="" attributes that used to be baked into that HTML string. */
.home-event-item {
    width: 100% !important;
}

.home-event-divider {
    margin-bottom: 10px;
    /*border-top: #eee 1px solid;*/
}

.home-event-cta {
    line-height: 1.3;
    font-size: 13px !important;
    height: 30px !important;
}

@media only screen and (max-width: 768px) {
    /* layout.css ships mobile rules for `#slider h1` and `#slider h2` — sizes,
       line heights and an 80px top margin — that never applied while the hero
       lines were <h4>s. Now that they are an <h1> + <h2> those rules would kick
       in below 768px and resize the hero, so restore what the <h4>s rendered:
       20px (the .fs-mobile-20 value), line-height 1.5, centring inherited from
       .logo-center, and the 30px top margin from .mt-30. The selectors are
       deliberately more specific than the theme's, including the
       `#header.transparent + #slider h1` margin rule. */
    #slider h1.header-sub-title,
    #slider h2.header-sub-title {
        text-align: inherit;
        font-size: 20px !important;
        line-height: 1.5 !important;
    }

    #header.transparent + #slider h1.header-sub-title {
        margin-top: 30px !important;
    }

    .owl-carousel-2 div .textoverlay {
        margin-top: 20% !important;
    }

    .owl-nav {
        display: none !important;
    }

    .mobile-pt-20 {
        padding-top: 20px !important;
    }

    .mobile-pt-40 {
        padding-top: 40px !important;
    }

    .mobile-pb-20 {
        padding-bottom: 20px !important;
    }

    .mobile-mb-20 {
        margin-bottom: 20px !important;
    }

    .mobile-mt-10 {
        margin-top: 10px !important;
    }

    .mobile-mt-15 {
        margin-top: 15px !important;
    }

    .mobile-width-100p {
        width: 100% !important;
    }
}

@media only screen and (min-device-width: 480px)
and (max-device-width: 968px)
and (orientation: landscape) {

    .owl-carousel-2 div .textoverlay {
        margin-top: 7% !important;
    }

    #toTop {
        display: inline !important;
    }

}