/****************************************************************
 *
 *  Name: Theme Styles
 *  Author: Samantha Pasch
 *  Author URI: http://www.samanthapasch.com/
 *  Description: CSS file for theme specific content. 
 *
****************************************************************/

/*===============================================================
 *
 *  1) WORDPRESS
 *  WordPress specific styles.
 *
===============================================================*/

/* A) Gutenberg Block Colours
=================================*/

.has-monte-black-color { color: #000000; }
.has-monte-dark-grey-color { color: #151515; }
.has-monte-mink-color { color: #0B0704; }
.has-monte-shiitake-color { color: #221C17; }
.has-monte-matsutake-color { color: #322921; }
.has-monte-bark-color { color: #3A2C23; }
.has-monte-briar-color { color: #372C1D; }
.has-monte-marmot-color { color: #3D2A12; }
.has-monte-stoat-color { color: #5B4437; }
.has-monte-clay-color { color: #685849; }
.has-monte-sand-color { color: #BDB1A1; }
.has-monte-limestone-color { color: #D6CCC0; }
.has-monte-honey-color { color: #605229; }
.has-monte-hive-color { color: #82744D; }
.has-monte-moss-color { color: #22240F; }
.has-monte-fern-color { color: #343720; }
.has-monte-grove-color { color: #393524; }
.has-monte-stone-color { color: #292B21; }
.has-monte-walnut-color { color: #382D0F; }
.has-monte-tourmaline-color { color: #593D08; }
.has-monte-goldenrod-color { color: #865F12; }
.has-monte-hosackia-color { color: #B89B60; }
.has-monte-agate-color { color: #E8D5AD; }
.has-monte-yarrow-color { color: #E6DDCA; }
.has-monte-gorse-color { color: #9B9680; }
.has-monte-enoki-color { color: #A7AB91; }
.has-monte-barley-color { color: #B6AF98; }
.has-monte-oat-color { color: #DBD5CC; }
.has-monte-oyster-color { color: #D4D4C5; }
.has-monte-toadstool-color { color: #DBD9D5; }
.has-monte-linen-color { color: #E6E4D5; }
.has-monte-milkweed-color { color: #E6E5E2; }
.has-monte-cotton-color { color: #FAFAF7; }
.has-monte-white-color { color: #FFFFFF; }

.has-monte-black-background-color { background-color: #000000; }
.has-monte-dark-grey-background-color { background-color: #151515; }
.has-monte-mink-background-color { background-color: #0B0704; }
.has-monte-shiitake-background-color { background-color: #221C17; }
.has-monte-matsutake-background-color { background-color: #322921; }
.has-monte-bark-background-color { background-color: #3A2C23; }
.has-monte-briar-background-color { background-color: #372C1D; }
.has-monte-marmot-background-color { background-color: #3D2A12; }
.has-monte-stoat-background-color { background-color: #5B4437; }
.has-monte-clay-background-color { background-color: #685849; }
.has-monte-sand-background-color { background-color: #BDB1A1; }
.has-monte-limestone-background-color { background-color: #D6CCC0; }
.has-monte-honey-background-color { background-color: #605229; }
.has-monte-hive-background-color { background-color: #82744D; }
.has-monte-moss-background-color { background-color: #22240F; }
.has-monte-fern-background-color { background-color: #343720; }
.has-monte-grove-background-color { background-color: #393524; }
.has-monte-stone-background-color { background-color: #292B21; }
.has-monte-walnut-background-color { background-color: #382D0F; }
.has-monte-tourmaline-background-color { background-color: #593D08; }
.has-monte-goldenrod-background-color { background-color: #865F12; }
.has-monte-hosackia-background-color { background-color: #B89B60; }
.has-monte-agate-background-color { background-color: #E8D5AD; }
.has-monte-yarrow-background-color { background-color: #E6DDCA; }
.has-monte-gorse-background-color { background-color: #9B9680; }
.has-monte-enoki-background-color { background-color: #A7AB91; }
.has-monte-barley-background-color { background-color: #B6AF98; }
.has-monte-oat-background-color { background-color: #DBD5CC; }
.has-monte-oyster-background-color { background-color: #D4D4C5; }
.has-monte-toadstool-background-color { background-color: #DBD9D5; }
.has-monte-linen-background-color { background-color: #E6E4D5; }
.has-monte-milkweed-background-color { background-color: #E6E5E2; }
.has-monte-cotton-background-color { background-color: #FAFAF7; }
.has-monte-white-background-color { background-color: #FFFFFF; }



/*===============================================================
 *
 *  2) GENERAL
 *  Root and global styles.
 *
===============================================================*/

:root {

    font-size: 100%;
    --vh: vh;
    --topbar-height: 4rem;
    --banner-height: 2.5rem;

}

img {
    pointer-events: none!important;
}

header {
    position: relative;
    margin: 1.25rem 0rem;    
}

@font-face {
    font-family: Belina;
    src: url('../typography/Belina-Bold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

.headline-accent-font {
    font-family: Belina;
    font-weight: normal;
    font-style: normal;
}


/*===============================================================
 *
 *  3) HERO IMAGES
 *  Hero Image styles.
 *
===============================================================*/

/* A) Hero Spacers
=================================*/

.hero-home-spacer {
    width: 0!important;
    height: var(--hero-home-bg-height)!important;
    margin: 0!important;
    padding: 0!important;
    vertical-align: middle!important;
}


.hero-single-spacer {
    width: 0!important;
    height: var(--hero-single-bg-height);
    margin: 0!important;
    padding: 0!important;
    vertical-align: middle!important;
}

.hero-page-spacer {
    width: 0!important;
    height: var(--hero-page-bg-height);
    margin: 0!important;
    padding: 0!important;
    vertical-align: middle!important;
}

/* Desktop */
@media (min-width: 1021px) {

    .desktop-hero-home-spacer {
        width: 0!important;
        /*height: calc( 80vh + 100px)!important;*/
        height: calc( 0vh + 0rem )!important;
        margin: 0!important;
        padding: 0!important;
        vertical-align: middle!important;
    }

}

/* Tablet */
@media (min-width: 768px) and (max-width: 1020px) {

    .tablet-hero-home-spacer {
        width: 0!important;
        /*height: calc( 80vh + 100px)!important;*/
        height: calc( 0vh + 0rem )!important;
        margin: 0!important;
        padding: 0!important;
        vertical-align: middle!important;
    }

}

/* Mobile */
@media (max-width: 767px) {

    .mobile-hero-home-spacer {
        width: 0!important;
        /*height: calc( 70vh + 100px)!important;*/
        height: calc( 0vh + 0rem )!important;
        margin: 0!important;
        padding: 0!important;
        vertical-align: middle!important;
    }

}


/* A) Hero Index
=================================*/

/* Desktop */
@media (min-width: 1021px) {

    #fp-featured-post .top-meta {
        padding-top: calc( var(--topbar-height) + 40px );
    }

    #fp-featured-post .bottom-meta {
        padding-top: calc( var(--topbar-height) + 0px);
    }

    #index-headline-opener .text-size-adjust > span {
        font-size: 5.75rem;
    }

}

/* Tablet */
@media (min-width: 768px) and (max-width: 1020px) {

    #fp-featured-post .top-meta {
        padding-top: calc( var(--topbar-height) + 40px );
    }

    #fp-featured-post .bottom-meta {
        padding-top: calc( var(--topbar-height) + 0px);
    }

    #index-headline-opener .text-size-adjust > span {
        font-size: 5.75rem; /*calc(5.016rem + (15.625 - 5.016) * ((100vw - 250px) / (1020 - 250)));*/
    }

}

/* Mobile */
@media (max-width: 767px) {

    #fp-featured-post .top-meta {
        padding-top: calc( var(--topbar-height) + 40px );
    }

    #fp-featured-post .bottom-meta {
        padding-top: calc( var(--topbar-height) + 0px);
    }

    #index-headline-opener .text-size-adjust > span {
        font-size: calc(2rem + (175 - 2) * ((100vw - 250px) / (1600 - 250)));
    }

}


/* B) Hero Journal
=================================*/

/* Desktop */
@media (min-width: 1021px) {

    #hero-page-journal-bg .top-meta {
        padding-top: calc( var(--topbar-height) + ( var(--topbar-height) + 30px) );
    }

    #hero-page-journal-bg .bottom-meta {
        padding-top: calc( var(--topbar-height) + 0px);
    }

    #hero-page-journal-bg .headline-accent-adjust > span:nth-child(1)  {
        position: relative;
        top: -0.25rem;
        margin-right: -0.375rem;
    }

}

/* Tablet */
@media (min-width: 768px) and (max-width: 1020px) {

    #hero-page-journal-bg .top-meta {
        padding-top: calc( var(--topbar-height) + ( var(--topbar-height) + 30px) );
    }

    #hero-page-journal-bg .bottom-meta {
        padding-top: calc( var(--topbar-height) + 0px);
    }

    #hero-page-journal-bg .headline-accent-adjust > span:nth-child(1)  {
        position: relative;
        top: -0.25rem;
        margin-right: -0.375rem;
    }

}

/* Mobile */
@media (max-width: 767px) {

    #hero-page-journal-bg .top-meta {
        padding-top: calc( var(--topbar-height) + ( var(--topbar-height) + 30px) );
    }

    #hero-page-journal-bg .bottom-meta {
        padding-top: calc( var(--topbar-height) + 0px);
    }

    #hero-page-journal-bg .headline-accent-adjust > span:nth-child(1)  {
        position: relative;
        top: -0.188rem;
        margin-right: -0.375rem;
    }

}


/* C) Enter Site
=================================*/

body #enter-site-cover .underline-scale-1-ltr::after,
body #enter-site-cover a.underline-scale-1-ltr::after,
body #enter-site-cover button.underline-scale-1-ltr::after {
    height: 0.25rem!important;
}


/*===============================================================
 *
 *  4) AD BANNER
 *  AD Banner styles.
 *
===============================================================*/



/*===============================================================
 *
 *  5) COOKIE CONSENT
 *  Cookie Consent Pop-up styles.
 *
===============================================================*/

#cookie-policy-notice {
    color: var(--cookies-colour);
    background-color: var(--cookies-bg);
    border-top-width: 0.063rem;
    border-top-style: solid;
    border-top-color: var(--cookies-border);
}

body .cookie-consent-font {
    font-family: var(--cookies-font);
    font-style: var(--cookies-style);
    font-weight: var(--cookies-weight);
    font-size: var(--cookies-size);
    text-transform: var(--cookies-transform);
    letter-spacing: var(--cookies-spacing);
}

body .cookie-consent-button-font {
    font-family: var(--cookies-button-font);
    font-style: var(--cookies-button-style);
    font-weight: var(--cookies-button-weight);
    font-size: var(--cookies-button-size);
    text-transform: var(--cookies-button-transform);
    letter-spacing: var(--cookies-button-spacing);
}



/*===============================================================
 *
 *  6) BRANDING & LOGOS
 *  Topbar Logo and Header Logo styles.
 *
===============================================================*/

/* A) Topbar Logo (Navigation)
=================================*/

#client-logo-small-img {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    max-width: var(--topbar-logo-img-width);
    height: var(--topbar-logo-img-height);
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.menu-topbar #client-logo-small-svg,
.menu-topbar .client-logo-small-svg {
  font-size: 1.125rem;
}

#client-logo-small-svg > svg g, #client-logo-small-svg > svg *,
#client-logo-small-svg > svg ~ g, #client-logo-small-svg > svg ~ *,
.client-logo-small-svg > svg g, .client-logo-small-svg > svg *,
.client-logo-small-svg > svg ~ g, .client-logo-small-svg > svg ~ * {
    fill: inherit!important;
}

#client-logo-small-svg,
.client-logo-small-svg {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    height: 100%;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

#client-logo-small-svg > svg,
.client-logo-small-svg > svg {
    max-width: var(--topbar-logo-svg-width);
    height: var(--topbar-logo-svg-height);
}

#client-logo-small-text > * {
    font-family: var(--topbar-logo-font);
    font-style: var(--topbar-logo-style);
    font-weight: var(--topbar-logo-weight);
    font-size: var(--topbar-logo-size);
    text-transform: var(--topbar-logo-transform);
    letter-spacing: var(--topbar-logo-spacing);
    vertical-align: middle!important;
}



/*===============================================================
 *
 *  7) FRONT PAGE
 *  Styles for the Front Page blocks and sections.
 *
===============================================================*/

/* A) Tattoos
=================================*/

/* Desktop */
@media (min-width: 1021px) {

    body [id*="fp-tattoo-item-"] .fp-tattoo-overlay {
        -webkit-transition: opacity 425ms ease-in-out 0ms;
        -moz-transition: opacity 425ms ease-in-out 0ms;
        -o-transition: opacity 425ms ease-in-out 0ms;
        transition: opacity 425ms ease-in-out 0ms;
        opacity: 0;
    }

    body [id*="fp-tattoo-item-"] .fp-tattoo-overlay:hover {
        opacity: 1;
        cursor: pointer;
    }

}

/* Tablet */
@media (min-width: 768px) and (max-width: 1020px) {

    body [id*="fp-tattoo-item-"] .fp-tattoo-overlay {
        -webkit-transition: opacity 425ms ease-in-out 3000ms;
        -moz-transition: opacity 425ms ease-in-out 3000ms;
        -o-transition: opacity 425ms ease-in-out 3000ms;
        transition: opacity 425ms ease-in-out 3000ms;
        opacity: 0;
    }

    body [id*="fp-tattoo-item-"] .fp-tattoo-overlay:hover {
        -webkit-transition-delay: 0ms;
        -moz-transition-delay: 0ms;
        -o-transition-delay: 0ms;
        transition-delay: 0ms;
        opacity: 1;
        cursor: pointer;
    }

}

/* B) Bookings
=================================*/

html body .text-animation-1.text-fade-in {
    -webkit-transition: opacity 1200ms ease-in-out 740ms;
    -moz-transition: opacity 1200ms ease-in-out 740ms;
    -o-transition: opacity 1200ms ease-in-out 740ms;
    transition: opacity 1200ms ease-in-out 740ms;
    opacity: 0;
}

html body .animated > .text-animation-1.text-fade-in {
    opacity: 1;
}

html body .text-animation-2.text-blur-in {
    -webkit-transition: opacity 125ms ease-in-out 0ms, filter 125ms ease-in-out 500ms;
    -moz-transition: opacity 125ms ease-in-out 0ms, filter 125ms ease-in-out 500ms;
    -o-transition: opacity 125ms ease-in-out 0ms, filter 125ms ease-in-out 500ms;
    transition: opacity 125ms ease-in-out 0ms, filter 125ms ease-in-out 500ms;
    opacity: 0;
}

html body .animated > .text-animation-2.text-blur-in {
    opacity: 1;
    -webkit-filter: blur(0px)!important;
    -moz-filter: blur(0px)!important;
    -ms-filter: blur(0px)!important;
    -o-filter: blur(0px)!important;
    filter: blur(0px)!important;
}

html body .text-animation-3.text-fade-in {
    -webkit-transition: opacity 1200ms ease-in-out 860ms;
    -moz-transition: opacity 1200ms ease-in-out 860ms;
    -o-transition: opacity 1200ms ease-in-out 860ms;
    transition: opacity 1200ms ease-in-out 860ms;
    opacity: 0;
}

html body .animated > .text-animation-3.text-fade-in {
    opacity: 1;
}

html body .text-animation-4.text-blur-in {
    -webkit-transition: opacity 125ms ease-in-out 0ms, filter 125ms ease-in-out 620ms;
    -moz-transition: opacity 125ms ease-in-out 0ms, filter 125ms ease-in-out 620ms;
    -o-transition: opacity 125ms ease-in-out 0ms, filter 125ms ease-in-out 620ms;
    transition: opacity 125ms ease-in-out 0ms, filter 125ms ease-in-out 620ms;
    opacity: 0;
}

html body .animated > .text-animation-4.text-blur-in {
    opacity: 1;
    -webkit-filter: blur(0px)!important;
    -moz-filter: blur(0px)!important;
    -ms-filter: blur(0px)!important;
    -o-filter: blur(0px)!important;
    filter: blur(0px)!important;
}

/* Desktop */
@media (min-width: 1021px) {

    body #fp-bookings .headline-accent-adjust > span:nth-child(1),
    body #fp-bookings .headline-accent-adjust > span:nth-child(3)  {
        position: relative;
        top: -0.25rem;
        margin-right: -0.375rem;
    }    

}

/* Tablet */
@media (min-width: 768px) and (max-width: 1020px) {

    body #fp-bookings .headline-accent-adjust > span:nth-child(1),
    body #fp-bookings .headline-accent-adjust > span:nth-child(3)  {
        position: relative;
        top: -0.25rem;
        margin-right: -0.375rem;
    }

}

/* Mobile */
@media (max-width: 767px) {

    body #fp-bookings .headline-accent-adjust > span:nth-child(1),
    body #fp-bookings .headline-accent-adjust > span:nth-child(3) {
        position: relative;
        top: -0.188rem;
        margin-right: -0.375rem;
    }

}


/* B) Available Flash
=================================*/

html body .flickity-prepped.flickity-enabled .flickity-page-dots {
    margin-top: 2.5rem!important;
}

body .flickity-prepped.flickity-enabled.slider-counter-ornament .flickity-page-dots li.dot::before {
    font-family: var(--tagline-font)!important;
    font-weight: 400!important;
    font-style: normal!important;
    font-size: 12px!important;
    content: counter(counter, decimal-leading-zero);
    color: var(--overlay-colour)!important;
}



/*===============================================================
 *
 *  8) CATEGORY & ARCHIVE PAGES
 *  Category and archive page styles.
 *
===============================================================*/

/* A) Archive Tattoos
=================================*/

/* Desktop */
@media (min-width: 1021px) {

    body #archive-tattoos .archive-tattoo-overlay {
        -webkit-transition: opacity 425ms ease-in-out 0ms;
        -moz-transition: opacity 425ms ease-in-out 0ms;
        -o-transition: opacity 425ms ease-in-out 0ms;
        transition: opacity 425ms ease-in-out 0ms;
        opacity: 0;
    }

    body #archive-tattoos .archive-tattoo-overlay:hover {
        opacity: 1;
        cursor: pointer;
    }

}

/* Tablet */
@media (min-width: 768px) and (max-width: 1020px) {

    body #archive-tattoos .archive-tattoo-overlay {
        -webkit-transition: opacity 425ms ease-in-out 3000ms;
        -moz-transition: opacity 425ms ease-in-out 3000ms;
        -o-transition: opacity 425ms ease-in-out 3000ms;
        transition: opacity 425ms ease-in-out 3000ms;
        opacity: 0;
    }

    body #archive-tattoos .archive-tattoo-overlay:hover {
        -webkit-transition-delay: 0ms;
        -moz-transition-delay: 0ms;
        -o-transition-delay: 0ms;
        transition-delay: 0ms;
        opacity: 1;
        cursor: pointer;
    }

}


/* B) Pagination
=================================*/

#archive-pagination ul.pagination li#pagination-prev,
#archive-pagination ul.pagination li#pagination-next {
    display: inline-flex;
    position: relative;
    flex: 1 2 0rem;
}

li#pagination-prev .pagination-prev span,
li#pagination-next .pagination-next span,
li.pagination-number a {
    font-size: 0.75rem!important;
    color: var(--primary-colour);
}

#archive-pagination ul.pagination li#pagination-prev {
    justify-content: flex-start;
}

#archive-pagination ul.pagination li#pagination-next {
    justify-content: flex-end;
}

#archive-pagination ul.pagination li#pagination-next .theme-arrow svg {
    width: 1.5rem;
    height:  auto;
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
    color: currentColor;
}

#archive-pagination ul.pagination li#pagination-prev .theme-arrow svg {
    width: 1.5rem;
    height:  auto;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    color: currentColor;
}

#archive-pagination ul.pagination .pagination-number {
    padding: 0rem 0.313rem;
    font-style: normal;
    font-weight: 400;
    font-size: 0.75rem;
    text-transform: uppercase;
    line-height: 1.4em;
    letter-spacing: 0em;
}

#archive-pagination ul.pagination .pagination-number a {
    color: var(--primary-colour);
    opacity: 0.6;
}

#archive-pagination ul.pagination .pagination-number.is-active {
    cursor: text;
}

#archive-pagination ul.pagination .pagination-number.is-active a {
    opacity: 1;
    pointer-events: none!important;
}

#archive-pagination ul.pagination .pagination-number:first-child {
    padding-left: 0rem;
}

#archive-pagination ul.pagination .pagination-number:last-child {
    padding-right: 0rem;
}



/*===============================================================
 *
 *  9) SINGLE POST CONTENT
 *  Styles for the Post Content, tags, comments, and share links.
 *
===============================================================*/



/*===============================================================
 *
 *  10) PAGE CONTENT
 *  Styles for the Pages Content and other custom page templates.
 *
===============================================================*/

/* A) Single Content
=================================*/

#single-page-loop #single-page-content {
    display: block; 
    position: relative;
    width: 100%;
}

#single-page-loop #single-page-content p {
    margin: 0rem auto 1rem auto;
}


/* B) About Page: About
=================================*/

#about-group .about-accordion-group > ul.about-accordion:nth-child(1) {
    margin-bottom: 1.25rem;
}

#about-group .about-accordion-group > ul.about-accordion:nth-child(2) {
    margin-bottom: 1.25rem;
}

#about-group li > h1 {
    border-bottom: 2px solid var(--primary-colour);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
}

#about-group li:nth-child(3) > h1 {
    cursor: default;
}

#about-group li > ul {
    margin-top: 1.25rem;
}

#about-group li > ul > p {
    margin-bottom: 1.25rem;
}

#about-group li.about-accordion-item > ul.about-accordion-submenu {
  padding-inline-start: 0px;
  max-height: 0;
  overflow: hidden;
  transition: ease;
  -webkit-transition-property: max-height;
  -moz-transition-property: max-height;
  -ms-transition-property: max-height;
  -o-transition-property: max-height;
  transition-property: max-height;
  -webkit-transition-duration: 445ms;
  -moz-transition-duration: 445ms;
  -ms-transition-duration: 445ms;
  -o-transition-duration: 445ms;
  transition-duration: 445ms;
  -webkit-transition-timing-function: cubic-bezier(.42,0,.58,1);
  -moz-transition-timing-function: cubic-bezier(.42,0,.58,1);
  -ms-transition-timing-function: cubic-bezier(.42,0,.58,1);
  -o-transition-timing-function: cubic-bezier(.42,0,.58,1);
  transition-timing-function: cubic-bezier(.42,0,.58,1);
}

/* E) Site Map
=================================*/

#single-page-map #map-index li,
#single-page-map #map-index li a {
    font-family: var(--body-font);
    font-style: normal;
    font-weight: var(--body-weight);
    font-size: var(--body-size);
    text-transform: none;
    letter-spacing: 0;
    color: var(--primary-colour);
}

/* Categories */
#single-page-map #map-index .map-children-group-1,
#single-page-map #map-index .map-children-group-2 {
    display: block;
    position: relative;
    width: 100%;
    padding-left: 1.875rem;
}

#single-page-map #map-index .posts-set-1,
#single-page-map #map-index .posts-set-2,
#single-page-map #map-index .posts-set-3 {
    display: block;
    position: relative;
    width: 100%;
    padding-left: 1.875rem;
}

#single-page-map #map-index .map-list-set-4 a {
    padding-left: 6px;
}

#single-page-map #map-index .map-index-item,
#single-page-map #map-index .map-list-set-1 {
    display: list-item;
    position: relative;
    width: auto;
    list-style: initial!important;
    list-style-type: disc!important;
    list-style-position: inside!important;
}

#single-page-map #map-index .map-list-set-2 {
    display: list-item;
    position: relative;
    width: auto;
    list-style: initial!important;
    list-style-type: circle!important;
    list-style-position: inside!important;
}

#single-page-map #map-index .map-list-set-3 {
    display: list-item;
    position: relative;
    width: auto;
    list-style: initial!important;
    list-style-type: square!important;
    list-style-position: inside!important;
}

#single-page-map #map-index .map-list-set-4 {
    display: list-item;
    position: relative;
    width: auto;
    list-style: initial!important;
    list-style-type: "▪"!important;
    list-style-position: inside!important;
}


/* Pages */
#single-page-map .pagenav ul {
    display: block;
    position: relative;
    width: 100%;
    padding-left: 1.875rem;
}

#single-page-map .pagenav > ul > li > ul > li > ul > li a {
    padding-left: 6px;
}

#single-page-map .pagenav {
    display: list-item;
    position: relative;
    width: auto;
    list-style: initial!important;
    list-style-type: disc!important;
    list-style-position: inside!important;
}

#single-page-map .pagenav > ul > li {
    display: list-item;
    position: relative;
    width: auto;
    list-style: initial!important;
    list-style-type: circle!important;
    list-style-position: inside!important;
}

#single-page-map .pagenav > ul > li > ul > li {
    display: list-item;
    position: relative;
    width: auto;
    list-style: initial!important;
    list-style-type: square!important;
    list-style-position: inside!important;
}

#single-page-map .pagenav > ul > li > ul > li > ul > li {
    display: list-item;
    position: relative;
    width: auto;
    list-style: initial!important;
    list-style-type: "▪"!important;
    list-style-position: inside!important;
}



/*===============================================================
 *
 *  9) NAVIGATION
 *  Style adjustments for the navigation menus.
 *
===============================================================*/

body .topbar-font {
    font-family: var(--topbar-font);
    font-style: var(--topbar-style);
    font-weight: var(--topbar-weight);
    font-size: var(--topbar-size);
    text-transform: var(--topbar-transform);
    letter-spacing: var(--topbar-spacing);
    line-height: 1.4em;
}


/* A) Mobile Menu Styles
=================================*/

/* Level 1: Parent */
body.slide-nav-css .menu-sidebar [id*="menu-accordion-menu"] .nav-parent-font {
    font-family: var(--mobile-font);
    font-style: var(--mobile-style);
    font-weight: var(--mobile-weight);
    font-size: var(--mobile-size);
    text-transform: var(--mobile-transform);
    letter-spacing: var(--mobile-spacing);
    line-height: 1.4em;
    color: var(--mobile-menu-colour);
}


/* Level 2: Parent > Children */
body.slide-nav-css .menu-sidebar [id*="menu-accordion-menu"] .nav-submenu-font {
    font-family: var(--mobile-sub-font);
    font-style: var(--mobile-sub-style);
    font-weight: var(--mobile-sub-weight);
    font-size: var(--mobile-sub-size);
    text-transform: var(--mobile-sub-transform);
    letter-spacing: var(--mobile-sub-spacing);
    line-height: 1.4em;
    color: var(--mobile-menu-colour);
}


/* Drawer Footer: Additional Links */
body.slide-nav-css .menu-sidebar .drawer-footer a.nav-links-font {
    font-family: var(--mobile-links-font);
    font-style: var(--mobile-links-style);
    font-weight: var(--mobile-links-weight);
    font-size: var(--mobile-links-size);
    text-transform: var(--mobile-links-transform);
    letter-spacing: var(--mobile-links-spacing);
    line-height: 1.4em;
    color: var(--mobile-menu-colour);
}


/* C) Transitions
=================================*/

/* C.1) Topbar Item Overlay Colours
/* Overlay to change on scroll.
=================================*/

html.on-page body.global-nav-css #main-navigation.fade-in > .menu-topbar,
html.on-post body.global-nav-css #main-navigation.fade-in > .menu-topbar,
html.on-index body.global-nav-css #main-navigation.fade-in > .menu-topbar,
body.global-nav-css #main-navigation.fade-in > .menu-topbar {
    -webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0)!important;
    -moz-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0)!important;
    box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0)!important;
}

html.on-post body.global-nav-css #main-navigation .topbar-wrapper,
html.on-index body.global-nav-css #main-navigation .topbar-wrapper {
    background-color: var(--primary-bg);
}

html.on-post body.global-nav-css #main-navigation .topbar-wrapper .topbar-font,
html.on-index body.global-nav-css #main-navigation .topbar-wrapper .topbar-font {
    color: var(--primary-colour);
    -webkit-transition: color 250ms ease 300ms;
    -moz-transition: color 250ms ease 300ms;
    -ms-transition: color 250ms ease 300ms;
    -o-transition: color 250ms ease 300ms;
    transition: color 250ms ease 300ms;
}

html.on-post body.global-nav-css #main-navigation .topbar-wrapper #client-logo-small-img,
html.on-index body.global-nav-css #main-navigation .topbar-wrapper #client-logo-small-img {
    -webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(131deg) brightness(104%) contrast(103%);
    -moz-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(131deg) brightness(104%) contrast(103%);
    -ms-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(131deg) brightness(104%) contrast(103%);
    -o-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(131deg) brightness(104%) contrast(103%);
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(131deg) brightness(104%) contrast(103%);
    -webkit-transition: filter 250ms ease 300ms;
    -moz-transition: filter 250ms ease 300ms;
    -ms-transition: filter 250ms ease 300ms;
    -o-transition: filter 250ms ease 300ms;
    transition: filter 250ms ease 300ms;
}

html.on-post body.global-nav-css #main-navigation .topbar-wrapper #client-logo-small-svg > svg,
html.on-index body.global-nav-css #main-navigation .topbar-wrapper #client-logo-small-svg > svg {
    fill: var(--primary-colour);
    -webkit-transition: fill 250ms ease 300ms;
    -moz-transition: fill 250ms ease 300ms;
    -ms-transition: fill 250ms ease 300ms;
    -o-transition: fill 250ms ease 300ms;
    transition: fill 250ms ease 300ms;
}

html.on-post body.global-nav-css #main-navigation .topbar-wrapper #client-logo-small-text,
html.on-index body.global-nav-css #main-navigation .topbar-wrapper #client-logo-small-text {
    color: var(--primary-colour);
    -webkit-transition: color 250ms ease 300ms;
    -moz-transition: color 250ms ease 300ms;
    -ms-transition: color 250ms ease 300ms;
    -o-transition: color 250ms ease 300ms;
    transition: color 250ms ease 300ms;
}


/* Change colour on scroll. */
html.on-post body.global-nav-css #main-navigation.fade-in .topbar-wrapper .topbar-font,
html.on-index body.global-nav-css #main-navigation.fade-in .topbar-wrapper .topbar-font {
    color: var(--primary-colour);    
}

html.on-post body.global-nav-css #main-navigation.fade-in .topbar-wrapper #client-logo-small-img,
html.on-index body.global-nav-css #main-navigation.fade-in .topbar-wrapper #client-logo-small-img {
    -webkit-filter: invert(0%) sepia(0%) saturate(19%) hue-rotate(342deg) brightness(83%) contrast(104%);
    -moz-filter: invert(0%) sepia(0%) saturate(19%) hue-rotate(342deg) brightness(83%) contrast(104%);
    -ms-filter: invert(0%) sepia(0%) saturate(19%) hue-rotate(342deg) brightness(83%) contrast(104%);
    -o-filter: invert(0%) sepia(0%) saturate(19%) hue-rotate(342deg) brightness(83%) contrast(104%);
    filter: invert(0%) sepia(0%) saturate(19%) hue-rotate(342deg) brightness(83%) contrast(104%);
}

html.on-post body.global-nav-css #main-navigation.fade-in .topbar-wrapper #client-logo-small-svg > svg,
html.on-index body.global-nav-css #main-navigation.fade-in .topbar-wrapper #client-logo-small-svg > svg {
    fill: var(--primary-colour);    
}

html.on-post body.global-nav-css #main-navigation.fade-in .topbar-wrapper #client-logo-small-text,
html.on-index body.global-nav-css #main-navigation.fade-in .topbar-wrapper #client-logo-small-text {
    color: var(--primary-colour);    
}


/* C.2) Topbar Item Colours
/* No transition on scroll.
=================================*/

html.on-page body.global-nav-css #main-navigation .topbar-wrapper .topbar-font {
    color: var(--primary-colour);    
}

html.on-page body.global-nav-css #main-navigation .topbar-wrapper #client-logo-small-img {
    -webkit-filter: invert(0%) sepia(0%) saturate(19%) hue-rotate(342deg) brightness(83%) contrast(104%);
    -moz-filter: invert(0%) sepia(0%) saturate(19%) hue-rotate(342deg) brightness(83%) contrast(104%);
    -ms-filter: invert(0%) sepia(0%) saturate(19%) hue-rotate(342deg) brightness(83%) contrast(104%);
    -o-filter: invert(0%) sepia(0%) saturate(19%) hue-rotate(342deg) brightness(83%) contrast(104%);
    filter: invert(0%) sepia(0%) saturate(19%) hue-rotate(342deg) brightness(83%) contrast(104%);
}

html.on-page body.global-nav-css #main-navigation .topbar-wrapper #client-logo-small-svg > svg {
    fill: var(--primary-colour);    
}

html.on-page body.global-nav-css #main-navigation .topbar-wrapper #client-logo-small-text {
    color: var(--primary-colour);    
}



/*===============================================================
 *
 *  11) SUBSCRIBE
 *  Subscribe/Newsletter pop-up styles.
 *
===============================================================*/

body .subscribe-text-colour,
body form .subscribe-text-colour > input,
body form .subscribe-text-colour > input::placeholder {
    color: var(--subscribe-text-colour);
}

body .subscribe-bg-colour {
    background-color: var(--subscribe-bg-colour);
}


/* A) JetPack Subscribe
=================================*/

#form-subscribe .wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline .wp-block-jetpack-subscriptions__form, 
#form-subscribe .wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline form {
    display: -webkit-box!important;
    display: -moz-box!important;
    display: -ms-flexbox!important;
    display: -webkit-flex!important;
    display: flex!important;
    -webkit-flex-flow: row wrap!important;
    -ms-flex-flow: row wrap!important;
    flex-flow: row wrap!important;
    position: relative!important;
    width: 100%!important;
    border-bottom-width: 0.063rem!important;
    border-bottom-style: solid!important;
    border-color: var(--subscribe-text-colour)!important;
}

#form-subscribe .wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline:not(.wp-block-jetpack-subscriptions__use-newline) .is-not-subscriber .wp-block-jetpack-subscriptions__form-elements {
    display: -webkit-box !important;
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-flex-flow: row wrap !important;
    -ms-flex-flow: row wrap !important;
    flex-flow: row wrap !important;
    position: relative!important;
    width: 100%!important;
}

#form-subscribe #subscribe-form-jetpack #subscribe-email {
    display: -webkit-inline-box!important;
    display: -moz-inline-box!important;
    display: -ms-inline-flexbox!important;
    display: -webkit-inline-flex!important;
    display: inline-flex!important;
    -webkit-flex: 1 1 auto!important;
    -ms-flex: 1 1 auto!important;
    flex: 1 1 auto!important;
    -webkit-flex-flow: column nowrap!important;
    -ms-flex-flow: column nowrap!important;
    flex-flow: column nowrap!important;    
    position: relative!important;
    height: 100%!important;
    padding-bottom: 3px!important;
}

#form-subscribe #subscribe-form-jetpack #subscribe-email input {
    width: 100%!important;
    padding: 0rem!important;
    font-family: var(--tagline-font)!important;
    font-style: var(--tagline-style)!important;
    font-weight: var(--tagline-weight)!important;
    font-size: var(--tagline-size)!important;
    text-transform: var(--tagline-transform)!important;
    letter-spacing: var(--tagline-spacing)!important;
    line-height: 1em!important;
    color: var(--subscribe-text-colour)!important;
    border: none!important;
    -webkit-border-radius: 0!important;
    -moz-border-radius: 0!important;
    border-radius: 0!important;
    box-shadow: none!important;
    background-color: transparent!important;
    text-indent: 0px!important;
}

#form-subscribe #subscribe-form-jetpack #subscribe-submit {
    display: -webkit-inline-box!important;
    display: -moz-inline-box!important;
    display: -ms-inline-flexbox!important;
    display: -webkit-inline-flex!important;
    display: inline-flex!important;
    -webkit-flex: 0 1 auto!important;
    -ms-flex: 0 1 auto!important;
    flex: 0 1 auto!important;
    -webkit-flex-flow: column nowrap!important;
    -ms-flex-flow: column nowrap!important;
    flex-flow: column nowrap!important;
    position: relative!important;
    width: auto!important;
    height: 100%!important;
    margin-top: 0!important;
    margin-left: 0.625rem!important;
    margin-bottom: 0!important;
    margin-right: 0!important;
}

#form-subscribe #subscribe-form-jetpack #subscribe-submit button {
    position: relative;
    width: auto!important;
    text-align: center;
    padding: 0!important;
    margin: 0!important;
    font-family: var(--tagline-font)!important;
    font-style: var(--tagline-style)!important;
    font-weight: var(--tagline-weight)!important;
    font-size: var(--tagline-size)!important;
    text-transform: var(--tagline-transform)!important;
    letter-spacing: var(--tagline-spacing)!important;
    line-height: 1.4em!important;
    color: var(--subscribe-text-colour);
    border-radius: 0!important;
    border-width: 0rem!important;
    border-style: solid!important;
    border-color: transparent!important;
    background-color: transparent!important;
    opacity: 1!important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
}

#form-subscribe #subscribe-form-jetpack #subscribe-submit button:hover {
    background-color: transparent!important;
    border-color: transparent;!important;
    color: var(--subscribe-text-colour)!important;
    opacity: 1!important;
}



/*===============================================================
 *
 *  12) FOOTER
 *  Styles for elements within the Footer.
 *
===============================================================*/

/* A) Credits
=================================*/

#footer-credits {
   -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html body #credits-wrap,
html body #copyright-credits,
html body #copyright-credits a {
    display: inline-block!important;
    opacity: 1!important;
    visibility: visible!important;
}


/* B) Social Feed
=================================*/

#data-carousel {
    position: relative;
    overflow: hidden;
}

#data-carousel * {
    white-space: nowrap;
}

#data-carousel-inner {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

#data-carousel[data-direction="left"] [data-carousel-content="loop"] {
    -webkit-animation-name: carousel-left;
    -moz-animation-name: carousel-left;
    -ms-animation-name: carousel-left;
    -o-animation-name: carousel-left;
    animation-name: carousel-left;
}

[data-carousel-content="loop"] {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
   -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -ms-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
    will-change: transform;
}

#data-carousel-item {
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
}

.data-carousel-image {
    width: 200px;
    height: 200px;
    margin: 10px;
}

.data-carousel-image > [data-carousel-height] > div {
    height: 100%;
}

.data-carousel-image:hover .data-carousel-overlay {
    opacity: 1;
}

.data-carousel-image .data-carousel-overlay {
    opacity: 0;
    background-color: rgba(0, 0, 0, .6);
    -webkit-transition: opacity 460ms ease 0s;
    -moz-transition: opacity 460ms ease 0s;
    -o-transition: opacity 460ms ease 0s;
    transition: opacity 460ms ease 0s;
}

/*#footer-carousel .data-carousel-image .data-carousel-overlay span.data-carousel-icon::before {
    position: relative;
    content: "\f16d";
    font-family: "Font Awesome 5 Brands"; 
    font-weight: 400;
    color: var(--overlay-colour);
    font-size: 2rem;
}*/

.data-carousel-image .data-carousel-overlay .data-carousel-icon {
    fill: var(--overlay-colour);
    width: 1.75em;
    height: 1.75em;
}

@-webkit-keyframes carousel-left {
    0% { -webkit-transform: translateZ(0); }
    100% {-webkit-transform: translate3d(-100%,0,0); }
}

@-moz-keyframes carousel-left {
    0% { -moz-transform: translateZ(0); }
    100% { -moz-transform: translate3d(-100%,0,0); }
}

@-ms-keyframes carousel-left {
    0% { -ms-transform: translateZ(0); }
    100% { -ms-transform: translate3d(-100%,0,0); }
}

@-o-keyframes carousel-left {
    0% { -o-transform: translateZ(0); }
    100% { -o-transform: translate3d(-100%,0,0); }
}

@keyframes carousel-left {
    0% { transform: translateZ(0); }
    100% { transform: translate3d(-100%,0,0); }
}