* { background-repeat: no-repeat; background-position: center center; box-sizing: border-box; }
body { margin: 0px; padding: 0px; width: 100%; height: auto; background-color: #ffffff; color: #000000; font-family: MontserratLight; font-size: 100%; line-height: 1.5; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
a { color: #000000; text-decoration: none; font-weight: normal; }
ul, ol { padding: 0px; margin: 0px; }
li { list-style-type: none; vertical-align: top; }
h1, h2, h3, h4, h5, h6 { padding: 0px 10px 10px 0px; margin: 0px; font-size: 100%; font-weight: normal; color: #000000; }
fieldset { padding: 0px; margin: 0px; border: none; }
input, textarea, select { font-size: 90%; background: transparent; border: solid #000000 1px; padding: 5px; color: #000000; box-sizing: border-box; font-family: MontserratLight; }
input[type=text], input[type=password]  { height: 30px; }
input[type=button], input[type=submit] { cursor: pointer; background-color: #000000; color: #ffffff; padding: 10px 20px 10px 20px; }
select { height: 30px; padding-right: 30px; background-image: none; background-repeat: no-repeat; background-position: right 10px center; }
p { padding: 0px 0px 20px 0px; margin: 0px; font-family: MontserratLight, sans-serif;}
strong { font-weight: normal; font-family: MontserratBold; }
table { border-spacing: 0px; }
td, th { padding: 0px; text-align: left; vertical-align: top; }
.hidden { display: none; }
.spacer { clear: both; height: 0px;  display: none;}
#openinghours {display: none;}


@font-face { font-family: RoboConReg; src: url("/library/fonts/Roboto/RobotoCondensed-Regular.otf") format("opentype"); }
@font-face { font-family: RoboConlight; src: url("/library/fonts/Roboto/RobotoCondensed-Light.otf") format("opentype"); }
@font-face { font-family: MontserratLight; src: url("/library/fonts/Montserrat/Light.otf") format("opentype"); }
@font-face { font-family: MontserratBold; src: url("/library/fonts/Montserrat/Bold.otf") format("opentype"); }



:root{
    --light-blue: #9acccb;
    /* --blue: #359997; */
    --blue: #2F8987;
    --dark-blue:#349896;
    --light-grey: #FAFAFA;
    --pink: #cc1973;
}

a {color: var(--blue);}
a:hover {color: var(--dark-blue);}

h1, h2, h3, h4 {font-family: RoboConReg, sans-serif;font-weight: 700;}

img {max-width: 100%;height: auto;}


/*********************************************************************************/
/*Header*/
/*********************************************************************************/

.blueheader {background: var(--blue);padding: 16px;}
.blueheader .util_textbox .content {display: flex; justify-content: space-between; align-items: center;}
.blueheader p, .blueheader a {font-family: RoboConLight, sans-serif;color: white;font-size: 14px;letter-spacing: 1.2px;font-weight: 500;}
.blueheader p{padding-bottom: 0;}
.blueheader .util_textbox i {margin-right: 10px;}

.whiteheader {background-color: white;}
.whiteheader .items {display: flex; justify-content: space-between;align-items: center;}
.whiteheader .headerlogo img {width: 240px; height: auto;}

.whiteheader .headermenu ul{display: flex;justify-content: space-between;padding: 40px 0px; }
.whiteheader .headermenu a {color: var(--blue);font-weight: 600; padding-bottom: 4px;transition: color 0.3s ease-in-out;}
.whiteheader .headermenu li.selected a, .whiteheader .headermenu a:hover { border-bottom: solid 3px var(--blue);}
.whiteheader .headermenu li {font-size: 12px; font-family: 'Open Sans', sans-serif; text-transform: uppercase;letter-spacing: 1.5px; line-height: 0;}


@media( min-width: 1108px){

    .layoutheader {position: sticky; top: 0; z-index: 49;}
    .layoutheader .toggle {display: none;} 

    .blueheader .items {display: flex; justify-content: center;}
    .blueheader .util_textbox {width: 900px; }
    .whiteheader .headermenu li {margin-right: 20px;}

    .whiteheader .headermenu li:last-child a {border: 2px solid #359997; padding-bottom: 5px; padding: 5px;}
    .whiteheader .headermenu li:last-child:hover a {background-color: var(--blue); color: white;}
}

@media (max-width: 1107px){

    .layoutheader .toggle i{font-size: 35px; color: white;}

    .layoutheader .toggleoff ul{display:none;}
    .layoutheader .toggleon ul{display:block; position: absolute; top: 288px; width: 100%; background-color: var(--light-blue); z-index: 50; text-align: center; padding: 20px 0;}
    .layoutheader .toggleon li{padding:18px;}
    .layoutheader .toggleon a{text-decoration: none;color: white;font-size: 18px; text-transform: capitalize; font-family: RoboConReg; font-weight: 500;}

    .blueheader .util_textbox{margin: 10px auto;}
    .blueheader .util_textbox .content {display: flex;flex-direction: column;gap: 5px;}
    .blueheader .util_textbox p{text-align: center;}

    .whiteheader .items{justify-content: center;flex-direction: column;}
    .whiteheader .headerlogo img{padding: 10px 0;}
    .whiteheader .headermenu {background-color: var(--blue); width: 100%; text-align: center; padding: 5px 0;}
   
}

@media (max-width:478px){
    .layoutheader .toggleon ul{top: 308px;}
}


/*********************************************************************************/
/*Common*/
/*********************************************************************************/

.std_contentpage .pagecontent{ display: flex; flex-direction: column; align-items: center; justify-content: center;text-align: center; margin: 40px auto; padding: 20px;}
.util_textbox_inner h2{color: var(--blue); font-size: 25px; text-transform: uppercase;}

/* Page titles */

.warmwelcomecont .titletxt, .pagetitle{font-weight: 700;font-size: 40px;color: #359997;background-color:var(--light-grey);height: 170px;width: 100%;padding: 0 10px;display: flex;justify-content: center;align-items: center;text-align: center;}

/* Buttons */
.menusbanner a, .finbars a, .hiring a{padding: 12px 20px;  text-transform: uppercase;text-decoration: none;font-size: 20px;font-family: RoboConReg, sans-serif;border: 3px solid var(--dark-blue);transition: 0.3s ease-in-out;}
.menusbanner a{background: #FFFFFF;}
.menusbanner a:hover{color: #FFFFFF;background: var(--blue);}
.finbars a{color: #FFFFFF;background-color: #d34728;border: 3px solid black;}
.finbars a:hover{background-color: #ab3a21;}
.hiring a{color: #FFFFFF;background: var(--blue);}
.hiring a:hover{background-color: var(--dark-blue);}

/* Carousels */

.feat_carousel{position: relative;overflow: hidden;}
.carousel{position: relative;overflow: hidden;max-width: 2000px;height: auto;margin: 0px auto;}
.carousel ul { width: 20000em; position: relative; }
.carousel li { float: left; text-align: center;}


/* Text boxes with images */
.contentblock{background-color: white; padding: 20px 0;display: flex; justify-content: center; align-items: center;}
.contentblock .util_textbox_inner h2, .warmwelcomecont .util_textbox_inner h2, .seeinside h2, .homegallery h2 {color: #359997; font-size: 30px; margin-bottom: 25px; padding: 0;}
.contentblock .util_textbox_inner, .seeinside {display: flex;align-items: center;width: 90%;margin: 20px auto;}
.contentblock .content, .contentblock .imageleft, .contentblock .imageright, .seeinside .introduction, .seeinside .util_customhtml{width: 50%;}
.contentblock .imageleft, .contentblock .imageright{display: flex; justify-content: center; align-items: center;}
.contentblock .content, .seeinside .introduction{padding: 0 60px;}

.contentblock {background-size: cover; }

.christmas{min-height: 600px;}
.christmas .content{width: 100%; }

.seeinside {padding: 40px 20px; margin: 40px auto;width: 100%;}
.seeinside .introduction a{color:var(--pink)}

.finbars{margin-bottom: 40px;}

@media (max-width: 1050px){

    .contentblock .util_textbox_inner, .seeinside{flex-direction: column;gap:40px}
    .contentblock .util_textbox_inner, .contentblock .content,.seeinside, .seeinside .introduction{width: 100%;}
    .contentblock .imageleft, .contentblock .imageright{width: 90%;}
    .contentblock .content, .seeinside .introduction{padding: 0 20px;}
}

@media (max-width: 800px){
    .google-virtual-tour iframe{width: 600px;}
}

@media (max-width: 600px){
    .google-virtual-tour iframe{width: 400px;}
}

@media (max-width: 400px){
    .google-virtual-tour iframe{width: 300px;}
}


/*********************************************************************************/
/*Home*/
/*********************************************************************************/

.home, .menus{background-color: var(--light-grey);}

/* Warm welcome */

.warmwelcomecont{background-color: white;}
.warmwelcomecont .items {width:90%; margin: 0px auto;padding: 40px 0; display: flex; justify-content: center; align-items: center; gap:40px}
.warmwelcomeimages {width: 50%;}
.warmwelcomeimages img {width: 100%; height: auto;}
.warmwelcometext {width: 40%;}

@media (max-width: 1050px){

    .warmwelcomecont .titletxt{font-size: 32px;height: 100px;}
    .warmwelcomecont .items {flex-direction: column;}
    .warmwelcomecont .items, .warmwelcometext{width: 100%;}
    .warmwelcomeimages{width: 90%;}
    .warmwelcometext{padding: 20px;}
}

/* Menu banner and button */

.menusbanner{ padding-top: 40px;display: flex; justify-content: center; align-items: center;}
.menusbanner .content{max-width: 500px;margin: 0 auto;padding: 40px 0 0 0;display: flex;flex-direction: column;justify-content: center;align-items: center;}
.menusbanner .content h2{color: #359997;font-size: 40px; margin-bottom: 40px;}

/* Menu cards */

.menucards{background-color: white; padding: 40px 0; margin: 40px auto;}
.menucards .items{width: 90%;margin:0 auto;display: flex;justify-content: center;align-items: start;}

.menucards .util_textbox{width: 23%; margin: 15px; font-size: 14px;}
.menucards .util_textbox h2 {color: #359997;font-size: 24px;margin-bottom: 20px;text-transform: uppercase;text-align: center;}
.menucards .util_textbox_inner img{width: 100%;height: auto;margin-bottom: 20px;}

@media (max-width: 1050px){
    .menucards .items{flex-wrap: wrap;}
    .menucards .util_textbox{ width: 44%;}
}

@media (max-width: 600px){
    .menucards .util_textbox{ width: 100%;}
}

/* Home events */
.homevents .util_textbox_inner {text-align: center; padding-bottom: 50px;}
.homevents .util_textbox_inner img {max-width: 400px; width: 100%;}




/* Home gallery */

.homegallery{ display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 0; margin-bottom: 40px;}
.homegallery .carousel{max-width: 1200px;}
.homegallery ul li{width: 280px !important; height: 280px; background-size: cover;  margin-right: 20px;}

@media (max-width: 1200px){
    .homegallery ul li{width: 200px !important; height: 200px; margin: 0 5px}
}

/*********************************************************************************/
/*Footer*/
/*********************************************************************************/

.footertop .items{display: flex;align-items: center;background-color:#ECECEC;padding: 40px 20px;}
.surv_standard {width: 40%;}
.feat_googlemap {width: 60%;}

.surv_standard { background: white; padding: 1rem 3%; margin: 0 2%;}
.surv_standard h2 {font-size: 20px; text-transform: uppercase; color: var(--blue); font-weight: 700; font-family: RoboConReg, sans-serif; padding: 10px 0 0 0; margin: 16px 0px;}
.surv_standard p { color: #666666; line-height: 150%; font-weight: 600; padding: 0px ; margin: 16px 0px;}
.surv_standard .contactinfo {color: var(--blue); font-weight: 800;}
.surv_standard .label {display: none;}
.surv_standard input {width: 100%;color: #666666;border: 0;font-size: .875rem;padding: 8px 12px; background: #ECECEC;font-family: 'Open Sans', sans-serif; height: 35px;}
.surv_standard textarea {width: 100%;color: #666666;border: 0;font-size: .875rem;padding: 0.5rem 2%;background: #ECECEC;font-family: 'Open Sans', sans-serif; height: 206px;}
.surv_standard .input {margin: 12px 0px;}
.surv_standard .buttons input {background: var(--blue);text-decoration: none;color: #FFFFFF;text-transform: uppercase;padding: 10px 5px;margin: 1em 0;border: 0;font-size: 1rem;letter-spacing: 2px; width: 116px; height: 40px; transition: background-color ease-out .5s;}
.surv_standard .buttons input:hover {background:var(--pink);}
.surv_standard .confirm p{color: var(--pink)}

.surv_standard .darktext{color: #133534;}

.footerbottom, .layoutcredits, .beachshore { text-align: center; margin: 20px 0;}
.footerbottom{ margin: 40px 0;}
.layoutcredits, .beachshore{ color: #999999; font-size: 90%;}

@media (max-width: 1050px){
    .footertop .items{flex-direction: column; gap:20px; padding: 40px 10px;}
    .surv_standard, .feat_googlemap {width: 100%;}
    .surv_standard{padding: 20px;}
}


/*********************************************************************************/
/*Menus page*/
/*********************************************************************************/

.util_tabbed{background-color: white;}

.util_tabbed .ui-tabs-nav{display: flex; align-items: center; justify-content: center;flex-wrap: wrap; padding: 20px 0;}
.util_tabbed .ui-tabs-nav li{display: block;border: solid 2px #666666;padding: 10px;margin: 10px 5px; width: fit-content;}
.util_tabbed .ui-tabs-nav li:hover{border: solid 2px var(--pink)}
.util_tabbed .ui-tabs-nav li a, .util_tabbed .ui-tabs-nav li:hover a{color:var(--dark-blue);}

.util_tabbed .util_textbox_inner{padding: 0px 10px 20px 10px;}
.util_tabbed .content{display: flex; align-items: center; justify-content: center; text-align: center;}
.util_tabbed .imagebottom{max-width: 1000px; height: auto; margin: 0 auto; }


/*********************************************************************************/
/*What's on page*/
/*********************************************************************************/

.whatson{ width: 80%; margin: 40px auto; border: solid 1px var(--blue); background-color: var(--light-grey);}

.pagecontent, .whatson .util_textbox_inner{display: flex;justify-content: center;flex-direction: column; align-items: center;text-align: center;}
.whatson .pagecontent {margin: 0;}
.whatson .pagecontent_inner > h2:first-child, .whatson .pagecontent_inner > h3:first-child{padding-top: 0;}
.whatson .pagecontent h2{font-weight: 700;font-size: 35px;color: var(--blue);padding: 40px 10px 10px 10px;}
.whatson .pagecontent h3{padding: 20px;}


.whatson .util_textbox_inner{border-top: 2px solid #9acccb68; margin:40px 60px 0 60px; padding-top: 40px; }
.whatson .util_textbox_inner .titletxt{color:var(--blue); font-size: 26px; text-transform: uppercase; padding-bottom: 20px;}

.whatson .util_textbox_inner img{padding: 20px 0; max-width: 500px; width: 100%;}

@media (max-width: 1050px){
    .whatson{ width: 95%;}
    .whatson .util_textbox_inner{margin:40px 20px 0 20px;}
}


/*********************************************************************************/
/*Gallery page*/
/*********************************************************************************/

.feat_gallery{background-color: white; padding: 40px 0;}
.feat_gallery ul{max-width: 1800px; margin:0 auto; padding: 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap:15px}
.feat_gallery li{width: 300px; height: 300px;cursor: pointer;}
.feat_gallery li .front, .feat_gallery li .back {width:300px;height:300px;background-size: cover;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-o-backface-visibility: hidden;-ms-backface-visibility: hidden;backface-visibility: hidden !important;transition:all .6s;position:absolute;z-index: -0;}

@media (max-width: 1300px){
    .feat_gallery li, .feat_gallery li .front, .feat_gallery li .back  { width:230px; height:230px;}
}

@media (max-width: 500px) {
    .feat_gallery li, .feat_gallery li .front, .feat_gallery li .back  { width:190px; height:190px;}
}

@media (max-width: 415px) {
    .feat_gallery li, .feat_gallery li .front, .feat_gallery li .back  { width:140px; height:140px;}
}


/*********************************************************************************/
/*We're hiring page*/
/*********************************************************************************/

.careers .content{ display: flex; flex-direction: column; align-items: center; justify-content: center;text-align: center; margin: 40px auto; padding: 20px;}
.careers .util_textbox_inner .content{border: 4px solid var(--blue); padding: 20px; width: 50%;}

@media (max-width: 1050px){
    .careers .util_textbox_inner .content{ width: 90%;}
}