/*
Project Name: Embarq Bristol
Author: Kubiak Creative
*/

/* .parallax-mirror {
    z-index: inherit !important;   
} */

/* -------------------------------------------------------------------------------------------------------- 
    DEFAULTS 
-------------------------------------------------------------------------------------------------------- */

:root {
    --deepblue:  #2A353C;
    --gold:      #B8916C;
    --blue:      #8AB8B0;
    --grey:      #333333;
    --pale:      #FAF8F0;
    --offwhite:  #FAFAFA;
    --marine:    #3f788c;    
}

html { 
    scroll-behavior: smooth;
    scroll-padding-top: 50px;
}

body {
    font-family: "Figtree", serif;
    font-optical-sizing: auto;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: auto;
    text-rendering: auto;
    font-size: 16px;
    color: var(--deepblue);
    padding-top: 65px
}

/* Small devices */
@media (min-width: 576px) {
    body { padding-top: 95px }
}

::selection {
    color: var(--pale);
    background: var(--gold);
}

@media (min-width: 1500px) {
    .container-xxxl {
        max-width: 1500px;
    }
}

.m-6            { margin: 5rem}
.me-6, .mx-6    { margin-right: 5rem }
.ms-6, .mx-6    { margin-left: 5rem }
.mt-6, .my-6    { margin-top: 5rem }
.mb-6, .my-6    { margin-bottom: 5rem }

.m-7          { margin: 7rem}
.me-7, .mx-7  { margin-right: 7rem }
.ms-7, .mx-7  { margin-left: 7rem }
.mt-7, .my-7  { margin-top: 7rem }
.mb-7, .my-7  { margin-bottom: 7rem }

.p-6            { padding: 5rem }
.pe-6, .px-6    { padding-right: 5rem }
.ps-6, .px-6    { padding-left: 5rem }
.pt-6, .py-6    { padding-top: 5rem }
.pb-6, .py-6    { padding-bottom: 5rem }

.p-7          { padding: 7rem}
.pe-7, .px-7  { padding-right: 7rem }
.ps-7, .px-7  { padding-left: 7rem }
.pt-7, .py-7  { padding-top: 7rem }
.pb-7, .py-7  { padding-bottom: 7rem }


blockquote {
    font-size: 1rem;
    font-style: italic;
    font-weight: 400;
    padding-top: 30px;
    position: relative;
}

@media (min-width: 768px) { 
    blockquote { font-size: 1.3rem; }
}

blockquote:before {
    content: '';
    width: 30%;
    height: 3px;
    background-color: var(--pale);
    position: absolute; 
    left: 0;
    top:10px
}

blockquote.gold:before {
    background-color: var(--gold);
}

.text-center blockquote:before {
    left:35%
}


/* -------------------------------------------------------------------------------------------------------- 
    COLOURS 
-------------------------------------------------------------------------------------------------------- */

.deepblue     { color: var(--deepblue) !important}
.gold         { color: var(--gold) !important}
.blue         { color: var(--blue) !important}
.grey         { color: var(--grey) !important}
.pale         { color: var(--pale) !important}
.offwhite     { color: var(--offwhite) !important}
.marine   { color: var(--marine) !important}

.bg-deepblue  { background-color: var(--deepblue) !important; color: var(--pale);}
.bg-gold      { background-color: var(--gold) !important; color: var(--pale);}
.bg-blue      { background-color: var(--blue) !important; color: var(--pale);}
.bg-grey      { background-color: var(--grey) !important; color: var(--pale);}
.bg-pale      { background-color: var(--pale) !important}
.bg-offwhite  { background-color: var(--offwhite)}
.bg-menu      {background-color:rgba(0, 0, 0, 0.5)}

.bg-deepblue a { 
    color:  var(--pale);
}

.bg-deepblue a:hover { 
    color:  var(--gold);
}

.bg-waves {
    background-image: url('/assets/img/waves.webp');
    background-size: cover;
}

.bg-gold.bg-waves {
    background-image: url('/assets/img/waves.webp');
    background-size: cover;
}


/* -------------------------------------------------------------------------------------------------------- 
    TYPOGRAPHY 
-------------------------------------------------------------------------------------------------------- */

h1, h2 {
    font-size: 2.4rem;
    line-height: 2.5rem;
    font-weight: 300;
    text-transform: uppercase;
}

h3 {
    font-size: 1.2rem;
    line-height: 1.3rem;
    font-weight: 500;
    text-transform: uppercase;
}

h4 {
    font-size: 1.4rem;
    line-height: 1.6rem;
    font-weight: 300;
}

h5 {
    font-size: 1rem;
    line-height: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
}

h5 {
    font-size: 1rem;
    line-height: 1.2rem;
    font-weight: 600;
}

h2 + p {
    margin-top: 40px;
}

a {
    color: var(--deepblue);
    text-decoration: none;
    transition: all 0.2s ease;
}

a.button {
    font-size: 90%;
    padding: 10px 30px;
    border-radius: 2px;
    color: var(--deepblue);
    background-color: var(--gold);
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    min-width: 220px;
    display: inline-block;
}

a.button:hover {
    color: var(--pale); 
}

.largex1 {
    font-size: 110% ;
}

.largex1 {
    font-size: 125% ;
}





/* medium devices */
@media (min-width: 768px) {

    h1, h2 {
        font-size: 3rem;
        line-height: 3.2rem;
    }

    .largex1 {
        font-size: 120% ;
    }

    .largex2 {
        font-size: 150% ;
    }
    
}




/* -------------------------------------------------------------------------------------------------------- 
    NAV 
-------------------------------------------------------------------------------------------------------- */

#header-bar.header-colour {
    background-color: var(--deepblue);
}
  
#header-bar .row,
#header-bar.scrolled .row {
    transition: all 0.25s ease;
}

#header-bar > .container-fluid {
    border-bottom: solid 1px var(--gold)
}

#header-bar .nav-logo {
    padding: 20px 20px 15px;
}

#header-bar .nav-logo.grow a {
    display: inline-block;
}

#header-bar .nav-logo.grow a:hover img {
    transform: scale(1.05);
}

#header-bar.scrolled .nav-logo a:hover img {
    transform: scale(1.05);
}

#header-bar .nav-logo img {
    height: 40px;
    transition: all 0.25s ease-in-out;
    width: auto !important;
}

#header-bar.scrolled .nav-logo img {
    height: 40px;
}

/* Small devices */
@media (min-width: 576px) {
    #header-bar .nav-logo img { height: 70px; }
    #header-bar.scrolled .nav-logo img { height: 50px; }
}


/* Hamburger button */
.hamburger {
    padding: 20px 20px 10px;
}

button .hamburger-box .hamburger-inner,
button .hamburger-box .hamburger-inner::before,
button .hamburger-box .hamburger-inner::after {
    background-color: var(--gold);
}

button.is-active .hamburger-box .hamburger-inner,
button.is-active .hamburger-box .hamburger-inner::before,
button.is-active .hamburger-box .hamburger-inner::after {
    background-color: var(--gold);
}

/* Menu list items */

.nav-menu{
    /* max-height:80vh; */
    overflow-y: scroll;
 }

.nav-menu h5 {
    font-size: 0.9rem;
}

.nav-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-top: 10px
}

.nav-menu ul li,
.nav-menu ul li a {
    color: var(--pale);
    text-decoration: none;
    margin-bottom: 2px;
    transition: all 0.2s;
}

/* .nav-menu ul li a::before {
    content: "-";
    margin-right: 10px;
} */

.nav-menu ul li a:hover {
    color: var(--gold);
}

.nav-menu .col.rule-left {
    border-left: solid 1px rgba(184, 144, 107, 0.5);
    padding: 8px 0 8px 25px;
    margin-top: 0px;
}

.stacked ul.mobile-nav-list {
    text-align: center;
}

.stacked ul.mobile-nav-list li a {
    font-size: 1.4rem;
    font-weight: 300;
}

.full-height {
    height: calc(100vh - 90px);
}


/* Small devices */
@media (min-width: 576px) { 
    .nav-menu ul { margin-top: 30px; }
    .nav-menu .col.rule-left { margin-top: 30px; }
    .stacked ul.mobile-nav-list li a { font-size: 3rem; }
 }
 

 

 /* -------------------------------------------------------------------------------------------------------- 
    HERO HOMEPAGE 
-------------------------------------------------------------------------------------------------------- */

.ms-slide {
    background-size: cover;
}


.video-height {
    height: 50vh;
    min-height: 400px;
}

@media (min-width: 992px) {
    .video-height {
        min-height: 600px;
    }
}

@media (min-width: 992px) {
    .video-height {
        height: 80vh;
    }
}

@media (min-width: 1200px) {
    .video-height {
        height: 90vh;
    }
}

.down-arrow {
    display: none;
    position: absolute;
    font-size: 2.5em;
    color: var(--pale);
    z-index: 99;
    top: calc(100% - 80px);
    left: calc(50% - 20px);
    animation: jumpInfinite 1.5s infinite;
}

@keyframes jumpInfinite {
    0%      { margin-top: 0; }
    50%     { margin-top: 20px; }
    100%    { margin-top: 0; }
}


@media (min-width: 768px) {
.down-arrow {
    display: inline;
  }
}

/* -------------------------------------------------------------------------------------------------------- 
    PARALLAX 
-------------------------------------------------------------------------------------------------------- */

.linebreak {
    display: block;
}

.parallax-window {
    background: transparent;
} 

.parallax-window.full-width {
    min-height: 500px;
}

.parallax-window.half-width {
    height: 500px;
} 

#hero .parallax-window.full-width {
    min-height: 75vh;
}

@media (min-width: 992px) { 
    .parallax-window.full-width { min-height: 800px; }
    .parallax-window.full-width.slim { min-height: 600px; } 
    .parallax-window.half-width { height: 50vw; max-height: 700px; } 
    #hero .parallax-window.full-width { min-height: 75vh; }
}


/* -------------------------------------------------------------------------------------------------------- 
    INFOGRAPHICS 
-------------------------------------------------------------------------------------------------------- */

.spec-icon {
    text-align: center;
}

.spec-icon .icon {
    max-width: 130px;
    margin-bottom:10px;
}

.spec-icon p {
    font-size: 1rem;
}

.esg-stat {
    text-align: center;
}

.esg-stat img {
    max-width: 150px;
}

.esg-stat img.icon.height-100 {
    height: 100px !important;
    max-width: auto;
}

.esg-stat .rule {
    position: relative;
    padding-bottom: 40px;
    margin-bottom: 10px;
}

.esg-stat .rule::after {
    content: '';
    width: 30%;
    height: 3px;
    background-color: var(--pale);
    position: absolute; 
    left: 35%;
    bottom:10px
}

@media (min-width: 768px) { 
    .esg-stat { text-align: left }
    .esg-stat .rule::after { left: 0;
    }
}


/* -------------------------------------------------------------------------------------------------------- 
    TABLE / ACCOMMODATION TABS 
-------------------------------------------------------------------------------------------------------- */

.table {
    --bs-table-hover-bg: rgba(184, 145, 108, 0.15);
}

table {
    color: var(--deepblue);
    font-weight: 300;
    font-size: 1rem;
}

table thead th {
    text-transform: uppercase;
    background-color: var(--gold) !important;
    color: var(--deepblue);
    font-weight: 500;
}

table tr.total td,
table tr.total th {
    color: var(--gold);
    font-weight: 500;
}

table th {
    font-weight: 500;
}

.table>:not(caption)>*>* {
    border-bottom: solid 1px var(--gold);
    padding: .7rem .5rem;
    background-color: transparent;
}



ul.nav-tabs > li.nav-item button.nav-link {
    color: var(--deepblue);
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 1px;
    font-weight: 500;
    padding: 0 40px 10px;
    margin-bottom: 10px;
    position: relative;
    transition: all 0.4s ease;
    border: none !important
}

ul.nav-tabs > li.nav-item button.nav-link:hover {
    color: var(--gold);
}

ul.nav-tabs > li.nav-item button.nav-link.active {
    color: var(--gold);
    background-color: transparent;
}

ul.nav-tabs > li.nav-item button.nav-link:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background-color: var(--gold);
    transition: width .3s;
}

ul.nav-tabs > li.nav-item button.nav-link.active:after,
ul.nav-tabs > li.nav-item button.nav-link:hover:after {
    width: 100%;
}

ul.nav-tabs > li.nav-item,
ul.nav-tabs > li.nav-item button.nav-link {
    width: 100%;
    display: block;
} 


@media (min-width: 992px) { 
    ul.nav-tabs > li.nav-item,
    ul.nav-tabs > li.nav-item button.nav-link {
        width: auto;
        display: inline-block;
    } 

    ul.nav-tabs > li.nav-item button.nav-link {
        padding: 0 40px 20px;
        margin-bottom: 0px;
    }
}


ul.floor-key {
    list-style-type: none;
}

ul.floor-key li {
    position: relative;
    display: block;
    margin-bottom: 5px;
}

ul.floor-key li:before {
    content: '';
    position: absolute;
    top: 4px;
    left: -25px;
    width: 15px;
    height: 15px;
}

ul.floor-key li.cycle:before        { background-color: #BDD4D0;}
ul.floor-key li.showers:before      { background-color: #7E9BAB;}
ul.floor-key li.lockers:before      { background-color: #F5DCCF;}
ul.floor-key li.parking:before      { background-color: #E8E7E9;}
ul.floor-key li.ev:before           { background-color: #C6C5C9;}
ul.floor-key li.drying:before       { background-color: #FED899;}
ul.floor-key li.available:before    { background-color: #8AB8B0;}
ul.floor-key li.let:before          { background-color: #E1D1C1;}

ul.floor-key li.size:before,
ul.floor-key li.entrance:before,
ul.floor-key li.monument:before,
ul.floor-key li.coffee:before {
    font-family: 'Font Awesome 6 Pro';
    font-weight: 400;
    top:0;
    color: var(--gold);
}

ul.floor-key li.size { font-size: 1.15rem; margin-bottom:15px; font-weight: 500;}
ul.floor-key li.size:before         { content: '\f065'; }
ul.floor-key li.entrance:before     { content: '\f061'; }
ul.floor-key li.monument:before     { content: '\f5a6'; }
ul.floor-key li.coffee:before       { content: '\f7b6'; }


/* -------------------------------------------------------------------------------------------------------- 
    LOCATION / MAP 
-------------------------------------------------------------------------------------------------------- */


ol.amenities {
    padding-left: 20px;
    margin-bottom: 40px;
}

ol.amenities li {
    padding-left: 10px;
}

ol.amenities li::marker {
    font-weight: 500;
}

ol.bars li::marker { color: var(--blue) !important; }
ol.food li::marker { color: var(--deepblue) !important; }
ol.cafes li::marker { color: var(--gold) !important; }
ol.hotels li::marker { color: var(--marine) !important; }


.map-image {
    position: relative;
}

.map-image .location-circle {
    width: 30vw;
    height: 30vw;
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 2;
}

.map-image .location-circle a img {
    transition: all 0.25s ease;
}

.map-image .location-circle a img:hover {
    transform: scale(1.1);
}

@media (min-width: 792px) { 
    .map-image .location-circle {
        width: 15vw;
        height: 15vw;
        bottom: 50px;
        left: 50px;
    }
}

/* -------------------------------------------------------------------------------------------------------- 
    CAROUSELS AMENITEIS & TRAIN 
-------------------------------------------------------------------------------------------------------- */


#gallery .splide__arrows button {
    border: none;
    width: 50px;
    height: 50px;
    font-size: 0;
    position: relative;
    color: var(--pale);
    transition: all 0.25s ease;
}

#gallery .splide__arrows button.splide__arrow--prev { background-color: var(--gold) }
#gallery .splide__arrows button.splide__arrow--prev:hover { background-color: rgba(184, 145, 108, 0.75) }
#gallery .splide__arrows button.splide__arrow--next { background-color: var(--deepblue) }
#gallery .splide__arrows button.splide__arrow--next:hover { background-color: #555555}

#gallery .splide__arrows button:after {
    font-family: 'Font Awesome 6 Pro';
    font-size: 30px;
    font-weight: 400;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#gallery .splide__arrows button.splide__arrow--prev:after { content: '\f060';}
#gallery .splide__arrows button.splide__arrow--next:after { content: '\f061';}




/*TRAIN TIME TEXT */

#traintimes .splide__arrows button:after {
    font-family: 'Font Awesome 6 Pro';
    font-size: 30px;
    font-weight: 400;
    position: absolute;
    top: 50%;
    left: 50%; 
    transform: translate(-50%, -50%);
}

#traintimes .splide__arrow { background-color: transparent; }
#traintimes .splide__arrow svg { display: none } 
.splide__arrow:disabled { opacity: 0; }

#traintimes .splide__arrows button.splide__arrow--prev:after { content: '\f060';}
#traintimes .splide__arrows button.splide__arrow--next:after { content: '\f061';}

#traintimes .splide__arrows button.splide__arrow--prev { left: 0px; }
#traintimes .splide__arrows button.splide__arrow--next { right:  0px;}

#traintimes .splide__arrow {
    bottom: -60px;
    top: inherit
}

#travel h3 {
    font-size: 2rem;
    line-height: 2.1rem;
    font-weight: 300;
}
#travel .station h3 {   
    font-size: 1.8rem;
    line-height: 1.9rem;
    color: var(--deepblue);
    margin-bottom: 10px;
}
#travel .station p {
    margin-bottom: 5px;
    padding-left: 10px;
}

#travel .station p.time {
    color: var(--deepblue);
    border-left: solid 3px var(--deepblue);
    padding-bottom:10px;
    margin-bottom: 0;
}

.bottom-line {
    border-bottom: solid 3px var(--deepblue)
}

@media (min-width: 650px) { 
    #traintimes .splide__arrows button.splide__arrow--prev { left: -50px; }
    #traintimes .splide__arrows button.splide__arrow--next { right:  -30px;}
    #traintimes .splide__arrow {
        bottom: inherit;
        top: 50%;
    }
}

/* -------------------------------------------------------------------------------------------------------- 
    GALLERY 
-------------------------------------------------------------------------------------------------------- */

.gallery-box-container {
    overflow: hidden;
    border: solid 1px var(--pale);
}

.gallery-box {
    height: 45vw;
    background-size: cover;
    background-position: center;
    width: 100%;
    transition: transform 1s ease;
    display: block;
}

.gallery-box:hover {
    transform: scale(1.1);
}

@media (min-width: 992px) { 
    .gallery-box { height: 30vw; }
}

@media (min-width: 992px) { 
    .gallery-box { height: 30vw; }
}

@media (min-width: 2000px) { 
    .gallery-box { height: 25vw; }
}

.fancybox__caption {
    font-size: 1.2rem;
}
 
/* -------------------------------------------------------------------------------------------------------- 
    FOOTER 
-------------------------------------------------------------------------------------------------------- */


footer .footer-logo.grow a:hover img {
    transform: scale(1.05);
}

footer .footer-logo img {
    height: 40px;
    transition: all 0.25s ease-in-out;
    width: auto !important;
}

/* Small devices */
@media (min-width: 576px) {
    footer .footer-logo img { height: 70px; }
}

.agent-logo {
    height: 70px;
    width: auto;
    margin: 20px 0;
}


#footnote ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#footnote ul li {
    display: inline;
}

#footnote ul li a {
    display: inline-block;
    padding: 0 10px 0 20px;
    border-left: solid 1px rgba(184, 144, 107, 0.5)
}

#footnote ul li:first-of-type a {
    border-left: none;
    padding-left: 0; 
}