/*******************************************
    FRITH DIMENSION
    VERSION 2.0
    DEVELOPED 16/10/2024
    JUSTIN KERCHER / APOLLO INTERNET MEDIA
********************************************/

:root { 
    --lt-grey: #BDC1C8; 
    --md-grey: #4E4F56; 
    --black: #000; 
    --gold: #c5a65c; 
    --lt-gold: #daddb0;
    --silver: #E4E1DD;
    --brown: #312509
}

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');

/*******************************************
    CONVENIENCE
*******************************************/

html, body { background-color: #000; }
html, body, form { min-height: 100vh; color: #fff; }
form { display: flex; flex-direction: column; }
#site-wrap { flex: 1 0 auto; }
#site-footer { flex-shrink: 0; }

body { font-family: "Lato", sans-serif; font-weight: 300; font-style: normal; font-size: 17px; line-height: 1.6; background-color: var(--silver); 
      background: #000 url(../images/layout/bg.png) no-repeat center; background-size: cover; background-attachment: fixed;  }

h1, .h1, h2, .h2, h3, .h3 { font-weight: 300; }
header h1 { margin: 0px; }

h1 .badge { font-size: 16px !important; }
header > h1 { margin-bottom: 1rem; }

sub, h1 small { color: var(--gold); font-size: 24px; }

h3 { color: var(--gold);  }
h3 small { display: block; color: #fff; margin-top: 0.2rem; }

/*h1, .h1 { text-transform: uppercase; }*/

a { color: var(--gold); }
    a:hover { color: var(--lt-gold); }

.alert a { color: inherit; text-decoration: underline; }

/*******************************************
    CLASSES
*******************************************/
.bg-gold { background-color: rgba(264,197,116, 0.3); }
.bg-black { background-color: var(--black); }

.bg-lt-grey { background-color: var(--lt-grey); }

.text-white { color: #fff; }
.text-gold { color: var(--gold); }

/* Background overlay */
.overlay { position: relative; }
    .overlay :first-child { position: relative; z-index: 1; }
    .overlay:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.4); z-index: 1; }

/* Parallax */
.bg-parallax { position: relative; background-size: cover; background-position: center; min-height: 600px; overflow: hidden; }

/* Image wraps */
.img-wrap { position: relative; background: url(../images/layout/preloader.png) center center no-repeat; overflow: hidden; }
.img-wrap { min-width: 100%; }
    .img-wrap img { width: 100%; aspect-ratio: 1/1; object-fit: cover; z-index: 1; position: relative; }
    .img-wrap.c4by3 img { aspect-ratio: 4/3; }
    .img-wrap.c16by9 img { aspect-ratio: 16/9; }

/* Image Borders */
.border-tr { position: relative; }
    .border-tr:before { content: ""; width: 40%; height: 40%; position: absolute; right: -1rem; top: -1rem; border: solid 3px var(--black); z-index: 0; opacity: inherit }

.border-bl { position: relative; margin-bottom: 3rem; }
    .border-bl:after { content: ""; width: 40%; height: 40%; position: absolute; left: -1rem; bottom: -1rem; background: var(--md-grey); z-index: 0; opacity: inherit }

.border-br { position: relative; }
    .border-br:before { content: ""; width: 80%; height: 80%; position: absolute; right: -1rem; bottom: -1rem; border: solid 3px var(--black); z-index: 0; opacity: inherit }

.img-wrap.oversize { height: 100%; }
    .img-wrap.oversize img { min-height: 100%; }


/* Tick List */
ul.tick-list, ul.arrow-list { margin: 15px 0px; padding: 0px; }
    ul.tick-list > li, ul.arrow-list > li { padding-left: 20px; position: relative; display: block; margin: 5px 0px; }
        ul.tick-list > li:before, ul.arrow-list > li:before { content: "\f058"; color: var(--gold); position: absolute; top: 5px; left: 0px; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.box ul.tick-list > li:before { color: inherit; }

ul.tick-list > li, ul.arrow-list > li { margin: 0px; }
    ul.arrow-list > li:before { content: "\f105"; color: var(--blue); }

ul.tick-list.tri-col { column-count: 2; -webkit-column-count: 2; }

/* Buttons */
.button { display: inline-block; padding: 1rem 2rem; background-color: var(--gold); color: #fff; text-decoration: none !important; border: 0px none; border-collapse: collapse; transition: all 0.5s ease-in-out; }
    .button:hover { background-color: var(--md-grey); color: #fff; text-decoration: none; }

.social { font-size: 1.8rem; color: inherit; }

/* Alternate columns */
.alt-cols .content { padding: 3rem; }

/* Product Links */
.product-box { display: flex; width: 100%; flex-direction: column; position: relative; overflow: hidden; color: inherit; text-decoration: none !important; height: 100%; }
    .product-box img { transition: all 0.5s ease-in-out; }
    .product-box:hover img { transform: scale(1.05); }
    .product-box .content { margin-top: 1rem; display: flex; flex-direction: column; flex: 1 1 auto; overflow: hidden; text-align: left; }
    .product-box .price { display: flex; align-self: baseline; font-size: 1.5rem; }

    .product-box .date, .article-listing-item .date { background-color: #fff; display: block; position: absolute; bottom: 0px; left: 0px; width: 80px; padding: 0.25rem; text-align: center; color: var(--gold); border-top: solid 4px var(--gold); z-index: 100; }
        .product-box .date span, .article-listing-item .date span { display: block; }
        .product-box .date .month, .article-listing-item .date .month { text-transform: uppercase; }
        .product-box .date .day, .article-listing-item .date .day { font-size: 3.0em; line-height: 50px; }
        .product-box .date .year, .article-listing-item .date .year { }

    .product-box h3 { font-size: 1.3rem; margin-bottom: 0px; }



    .product-box.for-sale:before, .product-box.available:before { content: "For Sale"; position: absolute; top: 1rem; right: 0px; padding: 0.5rem; color: #fff; background-color: var(--gold); z-index: 100 }
        .product-box.available:before { content: "Spaces Available"; }
    .product-box.sold:before, .product-box.fully-booked:before { content: "Sold"; position: absolute; top: 1rem; right: 0px; padding: 0.5rem; color: #fff; background-color: #9e0000; z-index: 100 }
        .product-box.fully-booked:before { content: "Fully Booked"; }
        
    /* Product images */
    .productMainImage a[data-fancybox] { display: block; position: relative; }
    .productMainImage a[data-fancybox]:before, .gallery-image a:before { content: "\f002"; display: inline-block; position: absolute; top: 1rem; right: 1rem; color: #fff; z-index: 100; font: normal normal normal 3rem/1 FontAwesome; font-size: 2rem; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
        .productMainImage a[data-fancybox]:after, .gallery-image a:after { content: "Click to Enlarge"; font-size: 0.8rem; color: #fff; padding: 0.5rem; background-color: var(--md-grey); position: absolute; left: 0px; bottom: 15px;  }
        .price { font-size: 2rem; }
    #purchase-control .controls { padding: 0px; }

    /* Gallery */
    .gallery .gallery-image a { border: 0px none; overflow: hidden; background: url(../images/ajax-loader.png) center center no-repeat; padding-top: 75%; }
    .gallery .gallery-image.overlay a:before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 1; }
    .gallery .gallery-image a:hover { transform: none; -webkit-transform: none; -moz-transform: none; -o-transform: none; }

    .gallery .gallery-image a img { transition: all 0.5s ease-in-out; z-index: 0; object-fit: cover; max-width: none !important; max-height: none !important; width: 100%; height: 100%; }
    .gallery .gallery-image a:hover img { transform: translate(-50%, -50%) scale(1.1); }
    .gallery .gallery-image a span { z-index: 2; padding-left: 15px; padding-right: 15px; }

    .gallery .gallery-image a:hover { background-color: transparent !important; }

/* Owl */
.owl-carousel { padding-left: 3rem; padding-right: 3rem; }
.owl-nav { position: absolute; top: 50%; left: 0px; right: 0px; transform: translateY(-50%); }
    .owl-nav .owl-prev { position: absolute; top: 50%; left: 0px; transform: translateY(-50%); }
    .owl-nav .owl-next { position: absolute; top: 50%; right: 0px; transform: translateY(-50%); }

.owl-stage { display: flex; }
.owl-item { display: flex; flex: 1 0 auto; }

/* Product page */
.product #site-content >  section:nth-child(even) { background-color: rgba(264,197,116, 0.3); }

/*******************************************
    LAYOUT
*******************************************/
#site-header { color: #fff; }
    #site-header #site-tel { display: flex; flex-direction: row; align-items: center; font-size: 1.5rem; color: #fff; }
    #site-header #site-nav { }
    #site-header #site-logo { display: inline-block; max-width: 200px; }
    #site-header a { color: inherit; text-decoration: none !important; }
        #site-header a:hover { color: var(--gold); }

#site-banner { position: relative; }    
    #site-banner a { text-decoration: none !important; }

        #site-banner a > video { width: 100%; height: 100%;  object-fit: cover; }

    #site-banner > img { position: absolute; width: 150px; top: 45px; left: 50%; transform: translateX(-50%); z-index: 100; }
    #site-banner .carousel-item { overflow: hidden; }
        #site-banner .carousel-item:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.4); z-index: 0; }
    #site-banner .carousel-item { background-position: center; background-size: cover; }

    #site-banner .carousel-caption { text-align: left; }
        #site-banner .carousel-caption .h1 { color: #fff; }
        #site-banner .carousel-caption img { filter: grayscale(100%) brightness(500%) contrast(100%); }

    #site-banner .carousel-item .button { margin-top: 1rem; }

#site-footer { border-top: solid 1px var(--gold); }
#site-footer a, #site-legal a { color: inherit !important; }

#site-footer address { padding-left: 15px; position: relative; }
    #site-footer address > i { position: absolute; top: 5px; left: -10px; }
#site-footer #accreditations img { max-width: 200px; width: 100%; }

#site-footer .subscribe-form span:not([class]) { position: absolute; display: none; }
#site-footer .subscribe-form span[style^="visibility: visible"] + input { border-color: red; color: red; }

#cart-contents #lblCartSubTotal { font-size: 2rem; }
#checkout .card:last-child .next-button { display: none; }



/*******************************************
    OVERRIDES
*******************************************/

/* Navbar toggle for BS4 */
.icon-bar { width: 22px; height: 2px; background-color: #fff; display: block; transition: all 0.2s; margin-top: 4px }
.navbar-toggler.collapsed .icon-bar { background-color: var(--gold) }
    

.navbar { padding: 0px; }
.navbar-toggler { border: none; background: transparent !important; margin-top: 1px; position: absolute; top: -40px; right: 0px; outline: 0; }
    .navbar-toggler .top-bar { transform: rotate(45deg); transform-origin: 10% 10%; }
    .navbar-toggler .middle-bar { opacity: 0; }
    .navbar-toggler .bottom-bar { transform: rotate(-45deg); transform-origin: 10% 90%; }
    .navbar-toggler.collapsed .top-bar { transform: rotate(0); }
    .navbar-toggler.collapsed .middle-bar { opacity: 1; }
    .navbar-toggler.collapsed .bottom-bar { transform: rotate(0); }


.dropdown-menu { background-color: #000; border: solid 1px var(--gold); border-radius: 0px; color: #fff; }
    .dropdown-menu .dropdown-item:hover { background-color: var(--gold); color: #fff !important; }

.nav-link.disabled { color: rgba(255,255,255,0.8); }

.nav-tabs .nav-link { color: #fff !important; }

/* BS4 Form Controls */
.form-group { position: relative; }
.form-control { height: 50px; border-radius: 0px; }

#cookiebar { position: fixed; bottom: 0; left: 0; right: 0; top: auto; }

.breadcrumb { border: 0px; background: transparent; padding: 0px; }
.breadcrumb-item + .breadcrumb-item::before { color: inherit; }
    .nav-tabs { border-color: var(--gold); }
.nav-tabs .nav-link:hover { border-color: var(--gold); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { background-color: var(--gold); color: #fff; border-color: var(--gold); }

.product-details .cart-row .controls { background-color: transparent; border: none !important; }
.product-details .cart-row .product-price { font-weight: 400; margin: 1rem 0; }

.card { background-color: #000; border-color: var(--md-grey); border-radius: 0px; }
.card-header { background-color: var(--md-grey); color: #fff; }
    .card-header .btn-link { color: inherit !important; }

.badge-primary { background-color: var(--gold); }
.badge-danger { background-color: #9e0000 ; }
 .btn-primary, .nav-pills .nav-link.active { background-color: var(--gold) !important; border-color: var(--gold) !important; }
    .btn-primary:hover { background-color: var(--md-grey); border-color: var(--md-grey); }

.page-item .page-link { background-color: var(--md-grey); border-color: var(--gold); color: #fff; }
.page-item.active .page-link { background-color: var(--gold); border-color: var(--gold); }


/*******************************************
    MEDIA QUERIES
*******************************************/

@media (max-width: 991px) { #site-banner img { display: block !important; max-width: 100%; }
    #site-banner .carousel-item { background: var(--black) !important; }
    #site-banner .carousel-caption { position: relative; left: 0; right: 0; bottom: auto; top: auto; }

    .quick-bar {
        position: absolute;
        top: -37px;
        right: 70px;
    }
}


@media (min-width: 768px) {
    /* Banner */
    #site-banner > img { transform: none; width: auto; left: auto; right: 45px; }
}

@media (min-width: 992px) {
    /* Classes */
    .bg-parallax { background-attachment: fixed; }
    .owl-nav { margin-left: -3rem; margin-right: -3rem; }
    .owl-carousel { padding-left: 0px; padding-right: 0px; }

    /* Alternative Columns */
    .alt-cols:nth-child(odd) > aside { order: 1; }
    .alt-cols:nth-child(odd) .content { padding-left: 0px; }
    .alt-cols:nth-child(event) .content { padding-right: 0px; }

    /* Layout */
    #site-header #site-logo { max-width: 100%; }
    #site-banner .caption p { max-width: 50%; }
    #site-banner .carousel-item { height: 600px; max-height: 600px; }
    #site-banner .carousel-caption { bottom: 0; left: 50%; right: auto; top: auto; transition: all 0.5s ease-in-out; 
                                     animation: banner-caption 2s ease-in-out forwards; }

        #site-banner .carousel-caption .h1 { font-size: 3.5rem; }
            #site-banner .carousel-caption .h1 + p { max-width: 50%; }

    #site-header #site-nav .nav-link { padding-left: 1rem; padding-right: 1rem; }

    /* Banner */
    #site-banner .carousel-item { background-attachment: fixed; background-size: 110%; background-position: center center; background-repeat: no-repeat; animation: banner-image-zoom 4s ease-in-out forwards; }

    .tick-list { column-count: 2; }

    /* Scroll in */

    #site-content p:not(.accordion p), #site-content h1, #site-content h2, #site-content h3 { opacity: 0; }

    .come-in.come-in-bottom, p.come-in:not(.accordion p), h1.come-in, h2.come-in, h3.come-in { transform: translateY(150px); animation: come-in-bottom 1.2s ease forwards; animation-delay: 0.5s; opacity: 0; }

    .come-in.come-in-left { transform: translateX(-200vw); animation: come-in-left 1.2s ease forwards; opacity: 0; }

    .come-in.come-in-right { transform: translateX(200vw); animation: come-in-right 1.2s ease forwards; opacity: 0; }

    .box-links .come-in.shape:before { animation: come-in-opacity 1.2s ease-in-out forwards; animation-delay: 1.2s; }

    /* BS Colours */
    .alert-info { background-color: var(--brown); border-color: var(--brown); color: #fff;  }
    .come-in-bottom p, .come-in-bottom h1, .come-in-bottom h2, .come-in-bottom h3,
    .come-in-left p, .come-in-left h1, .come-in-left h2, .come-in-left h3,
    .come-in-right p, .come-in-right h1, .come-in-right h2, .come-in-right h3 { opacity: 1 !important; animation: none !important; transform: none !important; }
}

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

/*********************************************
    KEYFRAMES
*********************************************/
@keyframes banner-image-zoom {
    from { background-size: auto 300%; }
    to { background-size: auto 200%; }
}

@keyframes banner-caption {
    from { transform: translate(-50%, 300px); opacity: 0; }
    to { transform: translate(-50%, -50%); opacity: 1; }
}


/* come in from bottom */
@keyframes come-in-bottom {
    to { transform: translateY(0); opacity: 1; }
}

@keyframes come-in-left {
    to { transform: translateX(0); opacity: 1; }
}

@keyframes come-in-right {
    to { transform: translateX(0); opacity: 1; }
}

@keyframes come-in-opacity {
    to { opacity: 1; }
}