html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
strong{
    font-weight: bold;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

:root {
    --main-color: #123274;
    --main-color-light: #123274;
    --header-highlight: #212121;
    --light-0: rgb(220,220,220);
    --light-3: rgb(220,220,220);
    --dark-0: rgb(173, 173, 173);
    --dark-1: #fff;
    --lightblue: #a8bbca;


}

body {
    margin: 0;
    font-size: 16px;
}


body * {
    font-family: 'Poppins', 'sans-serif';
}
a{
    text-decoration: none;
}

header{
    position: fixed;
    z-index: 999;
    width:100%;
    top:0px;
    left:0px;
}
header {

    font-size: 0.7rem;
}
@media only screen and (min-width: 768px) {
    header {

        font-size: 1rem;
    }
}
@media only screen and (min-width: 1366px) {
    header {

        font-size: 1.2rem;
    }
}

header * {
    color: white;
    text-decoration: none;
}

header i {
    color: #fff;
}



header .bottom > div > a {

    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    gap: 0rem;
    margin-left:1em;
    flex-direction: column;

}
@media only screen and (min-width: 992px) {
    header .bottom > div > a {
        flex-direction: row;
    }
}
header .bottom > div > a i{
    margin-bottom:8px;
}
@media only screen and (min-width: 768px) {
    header .bottom > div > a i{
        margin-right: 8px;
    }
}
@media only screen and (min-width: 992px) {
    header .bottom > div > a i{
        margin-bottom:0px;
    }
}
@media only screen and (min-width: 1680px) {
    header .bottom > div > a i{
        margin-right: 15px;
    }
}

header .top{
    background-color:var(--header-highlight);
    padding:10px 15px;
    font-size:1em;
    justify-content: center;
    color:var(--dark-1);
    text-align: center;
    font-weight: bold;

}
@media only screen and (min-width: 768px) {
    header .top {
        padding:10px 90px;
        font-size: 0.9em;
    }
}
@media only screen and (min-width: 1680px) {
    header .top {
        font-size: 0.9em;
    }
}
header .top a{
    margin-left:5px;
}
header .bottom .btn{
    margin-left:40px;
    font-size: 0.8rem;
    text-align: center;
    padding: 7px 10px;

}
@media only screen and (min-width: 1680px) {
    header .bottom .btn{
        font-size: 1rem;
        padding: 14px 8px;
    }
}
@media only screen and (min-width: 1920px) {
    header .bottom .btn{
        font-size: 1rem;
        padding: 15px;
    }
}

header .bottom{
    padding:10px 10px;
    background-color: var(--main-color);
    display: flex;
    justify-content: space-between;
    align-items: center;

}
@media only screen and (min-width: 768px) {
    header .bottom {
        padding: 10px 50px;
    }
}
@media only screen and (min-width: 1680px) {
    header .bottom {
        padding: 10px 90px;
    }
}
header .bottom > div{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size:11px;

}
header .bottom > div:nth-child(1){
    justify-content: flex-start;
}
header .bottom > div:nth-child(2){
    justify-content: flex-end;
}
@media only screen and (min-width: 768px) {

    header .bottom > div:nth-child(1){


    }
    header .bottom > div:nth-child(2){

    }
}
@media only screen and (min-width: 768px) {
    header .bottom > div{
        font-size:14px;
    }
}
@media only screen and (min-width: 1680px) {
    header .bottom > div{
        font-size:16px;
    }
}
@media only screen and (min-width: 1920px) {
    header .bottom > div{
        font-size:19px;
    }
}

header .bottom #nhs{
    width:70px;
}
header .bottom #rooley{
    width:150px;
    margin-right:10px;
}
@media only screen and (min-width: 768px) {
    header .bottom #rooley{
        width:210px;
        margin-right:20px;
    }
}
@media only screen and (min-width: 1680px) {
    header .bottom #nhs{
        width:110px;
    }
    header .bottom #rooley{
        width:290px;
        margin-right:20px;
    }
}


body .hidden{
    transition: 400ms margin-top ease;
}
body.minimised .hidden{
    margin-top: -31px;
}
@media only screen and (min-width: 768px) {
    body.minimised .hidden{
        margin-top: -38px;
    }
}
/*
body.minimised .bottom{
    padding:5px 20px;
}
@media only screen and (min-width: 1680px) {
    body.minimised .bottom{
        padding:5px 90px;
    }
}

 */
body .bottom img{
    transition: 400ms all ease;
}
body.minimised .bottom #nhs {
    width:80px;
}

body{

    padding-top:95px;
    transition:400ms all ease;
}
@media only screen and (min-width: 768px) {
    body {
        padding-top: 117px;
    }
}
@media only screen and (min-width: 1680px) {
    body {
        padding-top: 135px;
    }
}
body.minimised{
    padding-top:60px;
}




hr {
    color: var(--light-3);
    border-top: none;
}

h1 {
    color: var(--main-color);
    font-weight: 900;
    text-align: center;
    font-size: 1rem;

}
@media only screen and (min-width: 768px) {
    h1{
        font-size: 3rem;
    }
}
@media only screen and (min-width: 1366px) {
    h1{
        font-size: 4rem;
    }
}

h2 {
    font-weight: bold;
    text-align: center;
    font-size: 1.5rem;

}

@media only screen and (min-width: 768px) {
    h2{
        font-size: 1.7rem;
    }
}
@media only screen and (min-width: 1366px) {
    h2{
        font-size: 2rem;
    }
}
h3 {
    font-weight: bold;
    text-align: center;
    font-size: 1.5rem;

}

@media only screen and (min-width: 768px) {
    h3{
        font-size: 1.7rem;
    }
}
@media only screen and (min-width: 1366px) {
    h3{
        font-size: 2rem;
    }
}
.grid-wrapper {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
    max-width: 1024px;
    margin: 0 auto;
    margin-top: 1rem;
    position: relative;
    margin-bottom: 10rem;
}
@media only screen and (min-width: 768px) {
    .grid-wrapper {
        margin-top: 5em;
    }
}

.grid-wrapper > div {
    padding: 1rem 0rem;
}
@media only screen and (min-width: 768px) {
    .grid-wrapper > div {
        padding: 1rem;
    }
}

.grid-wrapper .appointment-wrapper {
    grid-column: span 1 / span 1;
}
.opening-hours{
    background:#d1d5d7;
}
.grid-wrapper .opening-hours-wrapper > ul {
    display: block !important;
    list-style-type: none;
    padding: 0 1rem;
    background-color: var(--main-color-light);
    font-size: 0.9em;
    color: white;
}

.grid-wrapper .opening-hours-wrapper > ul > li {
    padding: 1.2em 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

}



.grid-wrapper .opening-hours-wrapper .contact-info {
    text-align: center;
}

.grid-wrapper .opening-hours-wrapper .contact-info .person-circle {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--dark-1);
    color: white;
    margin: 1rem auto;
}

.grid-wrapper .opening-hours-wrapper .contact-info > ul {
    display: block !important;
    list-style-type: none;
    padding: 0;
}

.grid-wrapper .opening-hours-wrapper .contact-info > ul li {
    margin: 0.3rem 0;
}

.grid-wrapper .opening-hours-wrapper .contact-info > ul * {
    color: var(--dark-1);
    text-decoration: none;;
}

.grid-wrapper .opening-hours-wrapper > ul > li:not(:last-child) {
    border-bottom: 1px solid white;
}

.grid-wrapper .opening-hours-wrapper > ul > li span:nth-child(2) {
    text-align: center;
}
.grid-wrapper .opening-hours-wrapper > ul > li span:nth-child(3) {
    text-align: right;
    white-space: nowrap;
}

.grid-wrapper .google-maps iframe {
    width: 100%;
    min-height: 32rem;
}

footer {
   width:100%;
    padding: 1.5rem;
    background-color: var(--main-color);
}

footer > div {
    max-width: 1024px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
}

footer * {
    color: #fff;
    font-size: 0.8rem;
    text-decoration: none;

}
@media only screen and (min-width: 768px) {
    footer * {
        font-size: 1.2rem;

    }
}

@media only screen and (min-width: 600px) {
    .grid-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .grid-wrapper .appointment-wrapper {
        grid-column: span 2 / span 2;
    }
}



/*****************************************/

.main-opening-banner{
    width:100%;
    position: relative;
    font-size:0px;
    overflow: hidden;
}

.main-opening-banner:after{
    position: absolute;
    content: "";
    right: -2%;
    top: -24%;
    width: 48%;
    /* background: red; */
    height: 150%;
    box-shadow: 0 0 0 9999px rgba(209,213,215,1);
    border-radius: 50%;
    z-index: 1;
}

.main-opening-banner .heading{
    margin:0px 0px 5px 0px;
    text-align: left;
}
@media only screen and (min-width: 768px) {
    .main-opening-banner .heading {
        margin: 0px 0px 15px 0px;
    }
}

@media only screen and (min-width: 992px) {
    .main-opening-banner .heading {
        margin: 0px 0px 25px 0px;
    }
}

.main-opening-banner img{
    width: 100%;
    min-height: 151px;

}
@media only screen and (min-width: 768px) {
    .main-opening-banner img{
        object-fit: cover;
    }
}
.main-opening-banner p{
    margin:0px 0px 15px 0px;
    font-size:0.7rem;
    max-width: 60%;
    line-height:1rem;
    color: var(--main-color);
}

@media only screen and (min-width: 768px) {
    .main-opening-banner p{
        max-width: 70%;
        margin:0px 0px 20px 0px;
        font-size:0.9rem;
        line-height:1rem;
    }
}
@media only screen and (min-width: 992px) {
    .main-opening-banner p{

        margin:0px 0px 50px 0px;
        font-size:2rem;
        line-height:2rem;
    }
}
@media only screen and (min-width: 1366px) {
    .main-opening-banner p{
        font-size:2rem;
    }
}

.main-opening-banner .cta{
    display: flex;

}
.main-opening-banner .cta .btn{
    margin-right: 20px; ;
}
.btn{
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    border-radius: 20px;
    color:#fff;
    transition:400ms ease all;
    font-size: 1rem;
    padding:10px 12px;
    border:2px solid rgba(0,0,0,0.4);
    -webkit-appearance: none;
}
@media only screen and (min-width: 768px) {
    .btn{
        font-size: 1rem;
        padding:12px 14px;
    }
}
@media only screen and (min-width: 992px) {
    .btn{
        font-size: 1.2rem;
        padding:15px 20px;
    }
}
@media only screen and (min-width: 1366px) {
    .btn{
        font-size: 1.2rem;
        padding:15px 20px;
    }
}
.btn.fit{
    width:fit-content;
}
.btn.center{
    justify-content: center;
}
.btn:hover{
    opacity:0.8;
    transform: scale(1.05);

}

.btn.orange{
    background-color:var(--header-highlight);


}

.btn.blue{
    background-color:var(--main-color);

}
.main-opening-banner .intro{
    position: absolute;
    top:50%;
    left:20px;
    transform:translateY(-50%);
    z-index:10;
}

@media only screen and (min-width: 768px) {
    .main-opening-banner .intro{
        left:67px;
    }
}

@media only screen and (min-width: 1680px) {
    .main-opening-banner .intro{
        left:110px;
    }
}
@media only screen and (min-width: 2000px) {
    .main-opening-banner .intro{
        left:10%;
    }
}
.open-img{
    width:100%;
    height:100%;
    background-size: contain;
    object-fit: contain;
}

.banner-offer{
    background-color:var(--main-color);
    color:#fff;
    border-radius: 20px;
    border:6px solid var(--header-highlight);
}
@media only screen and (min-width: 768px) {
    .banner-offer{
        z-index: 99;
    }
}


.banner-offer .inside{
    text-align: center;
    display: flex;
    padding:20px;
    flex-direction: column;
}
.banner-offer .inside p {

}
@media only screen and (min-width: 768px) {
    .banner-offer .inside p {
        margin:0px;
        line-height: 100%;
    }
}
.banner-offer .inside a {
    margin:0px;
}
@media only screen and (min-width: 768px) {
    .banner-offer .inside{
        padding:10px;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;

    }
}

.banner-offer.centered-content p{
    font-weight: bold;
    font-size:18px;
    gap:20px;
}
@media only screen and (min-width: 1366px) {
    .banner-offer.centered-content p {
        font-size: 25px;
    }
    .banner-offer .inside{
        padding:20px;
    }
}
.banner-offer.centered-content a{

}

/************* FIND US ************/
.find-us .block{
    padding:30px 25px;
    position: relative;

}
@media only screen and (min-width: 768px) {
    .find-us .block {
        padding: 70px 40px;
    }
}
@media only screen and (min-width: 1920px) {
    .find-us .block{
        padding:115px 0px;
    }
}

.find-us:before,
.find-us:after{

    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;

}
.find-us:before{
    z-index: -1;
    background:rgba(0,0,0,0.05);
}

.find-us #hours-container{
    justify-content: center;
    align-items: center;
    display: flex;
}
@media only screen and (min-width: 996px) {
    .find-us #hours {
        padding-left: 30px;
    }
}

@media only screen and (min-width: 1366px) {
    .find-us #hours {
        padding-left: 60px;
    }
}

.find-us h2{
    text-align: left;
    color: var(--main-color);
    margin-bottom:30px;
    position: relative;
    width: fit-content;
}
@media only screen and (min-width: 768px) {
    .find-us h2 {
        margin-bottom: 40px;
    }
}
@media only screen and (min-width: 1366px) {
    .find-us h2 {
        margin-bottom: 40px;
    }
}
@media only screen and (max-width: 992px) {
    .find-us #hours h2 {
        margin-top: 30px;
    }
}

.find-us h2:after{
    position: absolute;
    content: "";
    border-bottom: 2px solid var(--main-color);
    width:100%;
    bottom:-10px;
    left:0px;
}

.opening-hours:before,
.opening-hours:after{
    content:"";
    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    pointer-events: none;
}




.map p,
.gallery p:not(:last-child),
.find-us p:not(:last-child) {
    margin-bottom:25px;
}
.gallery p,
.find-us p{

    line-height: 130%;
    font-size:0.8em;
}
@media only screen and (min-width: 768px) {
    .find-us p{
        font-size:0.9em;
        margin-bottom:20px;

    }
}
@media only screen and (min-width: 1366px) {
    .find-us p{
        font-size:1em;
        margin-bottom:30px;
        padding-right:20%;

    }
}
@media only screen and (min-width: 1680px) {
    .find-us p {
        margin-bottom: 1em;
        font-size: 1.2em;
    }
}

#contact-us{
    background:#fff;
}
.find-us p i{
    margin-top:15px;
    margin-right:10px;
    color:#000;
}
.find-us p a{
    color:#000;
}
.find-us iframe{
    width:100%;
}
#hours ul li{
    justify-content: space-between;
    font-weight: bold;
}
#hours ul li span{
    font-weight: normal;

}
@media only screen and (min-width: 996px) and (max-width: 1366px){
    #hours ul li span {
        margin-top:5px;

    }
}

@media only screen and (min-width: 550px) {
    #services > ul >li:nth-child(odd),
    #hours ul li:nth-child(odd) {
        padding-right: 50px;
    }

    #services > ul >li:nth-child(even),
    #hours ul li:nth-child(even) {
        padding-left: 50px;
    }
}
#hours ul,
#services > ul{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 1.5rem;
    font-size: 0.8em;
}
@media only screen and (min-width: 768px) {
    #hours ul,
    #services > ul{
        font-size: 0.9em;
    }
}
@media only screen and (min-width: 1366px) {
    #hours ul,
    #services > ul{
        font-size: 1em;
    }
}
@media only screen and (min-width: 1680px) {
    #hours ul,
    #services > ul{
        font-size: 1.15em;
    }
}
#hours ul li,
#services ul li{
    flex: 0 0 100%;
    display: flex;

}
@media only screen and (min-width: 550px) {
    #hours ul li,
    #services > ul >li{
        flex: 0 0 50%;
        display: flex;

    }
}
@media only screen and (min-width: 992px) {
    #hours ul li,
    #services > ul >li{
        flex-direction: column;

    }
}
@media only screen and (min-width: 1366px) {
    #hours ul li,
    #services > ul >li{
        flex-direction: row;

    }
}
#hours ul li i,
#services ul li i{
    margin-right:10px;
}
#services ul li span{
    line-height: 130%;
}


/************ Appointment **********/

.form-set{
    padding-top:50px;
}

#appointment-information label{

}
.appointment-wrapper > .container{
    padding:0px;
}
.appointment-wrapper label{
    font-weight: bold;
    color: var(--main-color);
    margin-bottom:20px;
    margin-top:10px;
}
.appointment-wrapper .steps ul{
    justify-content: space-evenly;
}
.appointment-wrapper .steps ul li,
.appointment-wrapper .steps ul li .title{

}
.appointment-wrapper .steps ul li .title{
    border-radius: 50%;
    font-weight: bold;

}
.appointment-wrapper .steps ul li .title i:before{
  font-size:20px;
}

.appointment-wrapper .steps1 input{
    cursor: pointer;
    float:left;
    width: 20%;
    font-size:20px;
    padding: 5px;
    border-radius: 0px;

}

.appointment-wrapper #top-section{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border:1px solid #000;
    border-bottom:none;
}
.appointment-wrapper #month-placeholder{
    float:left;
    width: 60%;
    font-size:20px;
    text-align: center;
}
.appointment-wrapper .title1{
    border-radius: 0px;
}
.appointment-wrapper .steps  .icon{
    padding-bottom:5px;
}
.appointment-wrapper .icon,
.appointment-wrapper .title_text{
    font-size:11px;
}

.appointment-wrapper .form-group li a span.title1{
    width:64px;
    padding:10px 0px;
    display: flex;
    border-top:1px solid #000;
    border-right:1px solid #000;
    background:#fff;
    color:#000;
}
.appointment-wrapper .form-group li:last-child a span.title1{
    /*width:55px;*/
}
.appointment-wrapper .form-group li:first-child a span.title1{
    border-left:1px solid #000;
}
.appointment-wrapper .form-group .steps1 ul.last li a span.title1{
    border-bottom:1px solid #000;
}
.appointment-wrapper li.current a span.title1{
    background:var(--main-color);
    color:#fff;
}

.appointment-wrapper li.disabled a span.title1{
    background:rgba(248,248,248,0.8);
}
.appointment-wrapper li.current a span.title1:hover{
    background-color:var(--header-highlight);
    color:var(--main-color);
}
/* Hides Just Day */
/*
.appointment-wrapper li a span.title1 .title_text{
    display: none;
}
*/



/* Hides everything but date */
.appointment-wrapper li a span.title1 .title_text{
    display: none;
}

.appointment-wrapper li a span.onerow{
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.appointment-wrapper li a span.onerow .icon{
    /*margin-right: 5px;*/
}
.appointment-wrapper .days li:last-child{
    border-right:1px solid black;

}
.appointment-wrapper .days li{
    text-align: center;

    width:85px;
    border-top:1px solid black;
    border-left:1px solid black;
    padding:4px 0px;
}
.appointment-wrapper .days li:last-child{
    margin-right:0px;
}


.appointment-wrapper .form-select li.current a[href] span.title1{
    background:none;
    border:1px solid black;
    color: var(--main-color);
    padding: 5px;
    margin: 8px 0px;

}
.appointment-wrapper .form-select li.current a.timeSelected,
.appointment-wrapper .form-select li.current a.timeSelected span,
.appointment-wrapper .form-select li.current a[href] span.title1:hover{
    background-color:var(--header-highlight) !important;
    color:var(--main-color);
}

.appointment-wrapper .form-select li.current a[href] .icon{
    font-size: 20px;
}
.appointment-wrapper .step-heading,
.appointment-wrapper .step-number{
    font-weight: bold;
}
.appointment-wrapper .step-heading{
    margin-bottom:30px;
    width: 100%;
}


.appointment-wrapper .form-select ul li{
    justify-self: left;
}

.appointment-wrapper h3{
    text-align: left;
    color: var(--main-color);
    margin-bottom:40px;
    position: relative;
    width: fit-content;
}
.appointment-wrapper h3:after{
    position: absolute;
    content: "";
    border-bottom: 2px solid var(--main-color);
    width:100%;
    bottom:-10px;
    left:0px;
}

#signup-form-p-3 .form-group{
    width:100%;
    display: flex;
    max-width: initial;
}
#signup-form-p-3 .step-heading{
        color:black;
}
#signup-form-p-3 #gdpr_consent{
    margin-top:30px;
}

#imgWait{

    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%) scale(2) ;
    z-index: 9;

}
#loading{
    align-items: center;
    position: absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:100px;
    height:100px;
    display: none;

    font-size:8px;
}
.lds-default {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;

}
.lds-default div {
    position: absolute;
    width: 7px;
    height: 7px;
    background: #000;
    border-radius: 50%;

    animation: lds-default 1.2s linear infinite;
}
.lds-default div:nth-child(1) {
    animation-delay: 0s;
    top: 37px;
    left: 66px;
}
.lds-default div:nth-child(2) {
    animation-delay: -0.1s;
    top: 22px;
    left: 62px;
}
.lds-default div:nth-child(3) {
    animation-delay: -0.2s;
    top: 11px;
    left: 52px;
}
.lds-default div:nth-child(4) {
    animation-delay: -0.3s;
    top: 7px;
    left: 37px;
}
.lds-default div:nth-child(5) {
    animation-delay: -0.4s;
    top: 11px;
    left: 22px;
}
.lds-default div:nth-child(6) {
    animation-delay: -0.5s;
    top: 22px;
    left: 11px;
}
.lds-default div:nth-child(7) {
    animation-delay: -0.6s;
    top: 37px;
    left: 7px;
}
.lds-default div:nth-child(8) {
    animation-delay: -0.7s;
    top: 52px;
    left: 11px;
}
.lds-default div:nth-child(9) {
    animation-delay: -0.8s;
    top: 62px;
    left: 22px;
}
.lds-default div:nth-child(10) {
    animation-delay: -0.9s;
    top: 66px;
    left: 37px;
}
.lds-default div:nth-child(11) {
    animation-delay: -1s;
    top: 62px;
    left: 52px;
}
.lds-default div:nth-child(12) {
    animation-delay: -1.1s;
    top: 52px;
    left: 62px;
}
@keyframes lds-default {
    0%, 20%, 80%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
}





.gallery .container-fluid{
    padding:6px;
    position: relative;
}


.gallery .img{
    width:100%;
    height:0px;
    padding:calc(25% - 8px);

}
.over:before{
    content:"";
    width:100%;
    height:100%;

    position: absolute;
    top:0;
    left:0;
    transition:400ms ease all;
    pointer-events: none;
}
.over.light:before{
    background:linear-gradient(90deg,rgba(0,0,0,0.5),rgba(0,0,0,.3),rgba(0,0,0,.3));
    z-index:2;
}
.over.dark:before{
    background:rgba(0,0,0,0.4);
}
.gallery .img > div > div:after{

}
.gallery .img > div > div:hover:after{
    background:rgba(0,0,0,0.1);
}
.gallery .img > div > div:hover p{
    transform: translateY(0);

}
.gallery .img > div{
    background-size: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    padding: 10px;

}
.gallery .img > div > div{
    background-size: cover;
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden;   border-radius: 5%;

}
.gallery .img > div > div p{
    background:rgba(0,0,0,0.3);
    width:100%;
    margin:0px;
    color:#fff;
    position: relative;
    z-index:9;
    padding:15px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height:75px;
    transition:400ms ease all;
    transform: translateY(100%);
}


.maxwidth{
    max-width:1366px;
    margin-left:auto !important;
    margin-right:auto !important;
}

.carousel{
    width:100%;
    overflow: hidden;
}
.carousel p,
.carousel .heading{
    color:#fff;
}


.carousel .heading{
    font-weight: 900;
    text-align: left;
    font-size: 0.9rem;

}
@media only screen and (min-width: 500px) {
    .carousel .heading{
        font-size: 1.5rem;
    }
}
@media only screen and (min-width: 768px) {
    .carousel .heading{
        font-size: 1.5rem;
    }
}
@media only screen and (min-width: 992px) {
    .carousel .heading{
        font-size: 2rem;
    }
}
@media only screen and (min-width: 1366px) {
    .carousel .heading{
        font-size: 2.5rem;
    }
}
@media only screen and (min-width: 1680px) {
    .carousel .heading{
        font-size: 3.5rem;
    }
}



.carousel .btn{
    font-size: 0.6rem;
    padding:8px 10px;
}
@media only screen and (min-width: 768px) {
    .carousel .btn{
        font-size: 0.8rem;
        padding:10px 12px;
    }
}
@media only screen and (min-width: 992px) {
    .carousel .btn{
        font-size: 1rem;
        padding:15px 20px;
    }
}
@media only screen and (min-width: 1366px) {
    .carousel .btn{
        font-size: 1.2rem;
        padding:15px 20px;
    }
}

.carousel .slick-dots{
    bottom: 0px;


}
@media only screen and (min-width: 768px) {
    .carousel .slick-dots{
        right:5%;
        width:fit-content;
    }
}
@media only screen and (min-width: 992px) {
    .carousel .slick-dots{
        bottom: 25px;
    }
}

.carousel ul.slick-dots li button:before{
   font-size:10px;
}
@media only screen and (min-width: 992px) {
    .carousel ul.slick-dots li button:before{
        font-size:20px;
    }
}
.carousel.slick-dotted.slick-slider{
    margin-bottom:0px;
    padding-bottom:30px;
}
@media only screen and (min-width: 992px) {
    .carousel.slick-dotted.slick-slider{
        padding-bottom:0px;
    }
}

/************* FIND US ************/
#alt-about-us{
    border-color: #fff;
    border-style: solid;

    border-width:  40px 20px 20px 20px;
}
@media only screen and (min-width: 768px) {
    #alt-about-us {
        border-width: 60px 35px 35px 35px;
    }
}
@media only screen and (min-width: 992px) {
    #alt-about-us {
        border-width: 60px 35px 35px 35px;
    }
}
@media only screen and (min-width: 1680px) {
    #alt-about-us {
        border-width: 95px 60px 60px 60px;
    }
}
#alt-about-us .block{
    padding:30px 36px; 
    position: relative;

}
@media only screen and (min-width: 768px) {
    #alt-about-us .block {
        padding: 55px 75px;
    }
}
@media only screen and (min-width: 1920px) {
    #alt-about-us .block{
        padding:85px 15px;
    }
}

#alt-about-us{
    background: #d1d5d7;
}
#alt-about-us h2 span{
    background: #d1d5d7;
}
#alt-our-services{
    background: #fff;
}
#alt-our-services .inner{

}
#alt-our-services h2 span{
    background: #fff;
}
.centered-content {
    width: 100%;
}
.bap{

    margin:40px auto;
}
@media only screen and (min-width: 768px) {
    .bap{
        max-width: 80%;
        margin:70px auto 30px;
    }
}
@media only screen and (min-width: 1366px) {
    .bap{
        margin:90px auto 40px;
    }
}
.bap span{
    background:#fff;
}
.centered-content .inner{

    padding:30px 15px;
    margin:0px auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;


}
.read-more-anchor{
    text-decoration: underline;
    padding-top:20px;
    cursor: pointer;
}
.centered-content .inner .readmore {
    overflow: hidden;
    justify-content: inherit;
    align-items: inherit;
    display: inherit;
    flex-direction: inherit;
    transition: all 1000ms ease;
  
}
@media only screen and (max-width: 767px) {
    .centered-content .inner .readmore {
        max-height: 190px;
        position: relative;

    }
    .centered-content .inner .readmore:after {
        content:"";
        position: absolute;
        bottom:0px;
        left:0px;
        width:100%;
        height:50px;
        background: rgb(209, 213, 215);
        background: linear-gradient(180deg, rgba(209, 213, 215, 0) 0%, rgba(209, 213, 215, 1) 100%);
        pointer-events: none; 
    }

    .centered-content .inner .readmore.open{
        max-height:900px;
    }
    .centered-content .inner .readmore.open + .read-more-anchor{
        display: none;
    }
    .centered-content .inner .readmore.open:after{
        opacity: 0;
    }
}
@media only screen and (min-width: 767px) {
    .centered-content .inner{
        padding:30px 15px;
        justify-content: center;
    }
    .read-more-anchor{
        display: none;
    }

}
@media only screen and (min-width: 1366px) {
    .centered-content .inner{
        padding:50px 15px;
    }
}
.centered-content h2{
    margin-bottom:30px;
    position: relative;
    color:var(--main-color);
    width:100%;

}
@media only screen and (min-width: 768px) {
    .centered-content h2{
        margin-bottom:40px;
    }
}
@media only screen and (min-width: 1680px) {
    .centered-content h2{
        margin-bottom:60px;
    }
}
.centered-content .btn{
    margin-top:1em;
}
.centered-content h2 span{
    position: relative;
    z-index: 2;
    padding:0px 25px;

}
.centered-content h2:before{
    position: absolute;
    top:50%;
    left:50%;
    transform: translateX(-50%);
    width: 50%;
    height:2px;
    background: var(--dark-1);
    content:"";
    z-index: 1;
}
.centered-content p{
    margin-bottom:1em;
    font-size: 0.9em;
    line-height:1.3em;
}
@media only screen and (min-width: 768px) {
    .centered-content p {
        font-size: 1em;
        line-height:1.7em;
    }
}
@media only screen and (min-width: 1680px) {
    .centered-content p {
        margin-bottom: 1em;
        font-size: 1.13em;
    }
}

#alt-our-services ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0px -10px;
}
#alt-our-services ul li{
    width:calc(50% - 20px);

    position: relative;
    overflow: hidden;
    height:150px;
    border-radius: 10px;
    padding:10px;
    margin:10px;
    border:1px solid var(--header-highlight);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: 400ms all ease;
    background-size:cover;
    filter:grayscale(100%);
    background-position: center;
}
#alt-our-services ul li.alwaysOn {
    filter:none !important;
}
#alt-our-services ul li.alwaysOn .book-now {
    opacity: 1 !important;
    display: block !important;

}
@media only screen and (min-width: 768px) {
    #alt-our-services ul li {
        width: calc(33.3% - 20px);
    }
}
@media only screen and (min-width: 1366px) {
    #alt-our-services ul li {
        width: calc(25% - 20px);
    }
}
#alt-our-services ul li.notgrey{
    filter:grayscale(0%);
}
#alt-our-services ul li > * {
    color: #fff;
    z-index: 9;
}
#alt-our-services ul li:hover{
    transform:scale(1.1);
    filter:grayscale(0%);
}
#alt-our-services ul li p{
    color:#000;
    margin:0px;
    font-weight: bold;
    line-height: 120%;
}
#alt-our-services ul li:hover:before{
    background:rgba(0,0,0,0.3);
}
#alt-our-services ul li:not(.notgrey) .book-now{
    opacity: 0;
    display: none;
}
#alt-our-services ul li:hover .book-now{
    opacity: 1;
    display: flex;
}
#alt-our-services ul li:hover > *:not(.book-now){

}
#alt-our-services ul li i{
    margin-bottom:15px;


}
#alt-our-services ul li span{


}
#alt-our-services ul li .book-now{
    background: var(--header-highlight);
    padding: 7px 20px;
    border-radius: 10px;
    margin-top: 20px;
    color:#fff;
    font-weight: bold;
    line-height: 105%;

}
@media only screen and (min-width: 1366px) {
    #alt-our-services ul li .book-now{
        font-size:18px;
    }
}




input, select {
    box-sizing: border-box;
    display: block;
    width: 100%;
    border: 1px solid #ebebeb;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    font-size: 16px;
    padding: 15px 20px;
}






.cookie {
    width: 150px;
    cursor: pointer;
    height: 150px;
    background-color: #d2a679; /* Base cookie color */
    border-radius: 50%; /* Makes it circular */
    position: relative;
    background: radial-gradient(circle at 50% 50%, #e0b07f, #d2a679 50%, #c69b6b 100%);
    box-shadow: inset -5px -5px 15px rgba(0, 0, 0, 0.3); /* Inner shadow for depth */
    transform:scale(0.35);
    transform-origin: bottom right;
}
.cookie:hover{
    opacity:0.6;
}

    /* Chocolate chips using ::before */
.cookie::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 30%;
    width: 18px;
    height: 18px;
    background-color: #8b5a2b; /* Chocolate chip color */
    border-radius: 50%;
    box-shadow:
            30px 10px 0px 3px #8b5a2b,
            -30px 20px 0px 3px #8b5a2b,
            -10px 70px 0px 2px #8b5a2b,
            50px -10px 0px 2px #8b5a2b;
}




#configure-cookies{
    position: fixed;
    bottom:10px;
    right:10px;
    border-radius: 50%;

}
.cookie-consent-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--main-color);;
    color: #fff;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;

}
.cookie-consent-bar .buttons {
    flex-direction: row;
    display: flex;
}
@media only screen and (max-width: 500px) {
    .cookie-consent-bar {
        flex-direction: column;
    }
    .cookie-consent-bar .buttons {
        margin-top: 30px;
    }
}

.cookie-consent-bar button {
    margin: 0 5px;
    padding: 10px 20px;
    background-color: #fff;
    border: none;
    cursor: pointer;
}
.configure-panel h2{
    color:#fff;
}
.configure-panel label{
    color:#fff;
    margin: 10px 0;
    font-weight: bold;
    width:250px;
}
.configure-panel {
    position: fixed;

    left: 5%;
    top:25%;
    width: 90%;
    height:auto;

    background-color: var(--main-color);
    color: #333;
    padding: 50px;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    z-index: 1000;
}
@media only screen and (min-width: 768px) {
    .configure-panel {
        top: 50%;
        left: 50%;
        width: 50%;
        height:auto;
        transform:translate(-50%,-50%);
    }
}
.configure-panel input{
    width:30px;
    height:30px;
}
.configure-panel h2 {
    margin-top: 0;
    margin-bottom:20px;
}
.configure-panel .panel-container{
    display: flex;
    flex-direction: column;
    width:100%;
}

#save-button{
    margin-top:30px;
}
.configure-panel .panel-container + .panel-container{
    margin-top:30px;
}
.configure-panel .panel-options{
    display: flex;
}

.configure-panel .panel-options p{
    color:#fff;
    font-size:12px;
}
@media only screen and (min-width: 768px) {
    .configure-panel .panel-options p{
        font-size:14px;
    }
}

.configure-panel button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #333;
    color: #fff;
    border: none;
    cursor: pointer;
}