html{color:#222;font-size:1em;line-height:1.4}::-moz-selection{background:var(--main);text-shadow:none;color:#fff;}::selection{background:var(--main);text-shadow:none;color:#fff;}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}.browserupgrade{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
:root {
  --main: #2696A8;
  --darker: #228797;
  --accent: #38A169;
  --white: #ffffff;
  --black: #4B5868;
  --grey: #f6f6f6;
}

body::-webkit-scrollbar {
  width: 11px;
}
body {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--black);
}
body::-webkit-scrollbar-track {
  background: var(--black);
}
body::-webkit-scrollbar-thumb {
  background-color: var(--accent);
  border-radius: 6px;
  border: 3px solid var(--accent);
}

html { box-sizing: border-box; font-size: 16px;} *, *:before, *:after { box-sizing: inherit; }
a{-webkit-transition:all 0.3s ease;
         -moz-transition:all 0.3s ease;
               -o-transition:all 0.3s ease;
                     transition: all .3s ease-in-out;
text-decoration: none;
color: var(--main); font-weight: 600;}
a img{-webkit-transition:all 0.3s ease;
         -moz-transition:all 0.3s ease;
               -o-transition:all 0.3s ease;
                     transition:all 0.3s ease;}
a:hover{color: var(--black);}
.smoothie{-webkit-transition:all 0.3s ease;
         -moz-transition:all 0.3s ease;
               -o-transition:all 0.3s ease;
                     transition:all 0.3s ease;}
h1,h2,h3,h4,h5,h6{margin: 0 0 10px 0; color: var(--main); font-weight: 600;}

p{margin: 0 0 10px 0;}
strong{font-weight: 800; color: var(--main);}
img, iframe{max-width: 100%;}
body{background: #f2f2f2; font-size: 18px;}
.container{width: 100%; max-width: 1920px; margin: 0 auto; font-family: 'Poppins', "Segoe UI", sans-serif; font-weight: 400; color: #222; box-shadow: 0 30px 90px rgba(0,0,0,0.25), 0 7px 20px rgba(0,0,0,0.05); /*background: url(../img/space.jpg) center center no-repeat; background-size: cover; background-attachment: fixed;*/ position: relative; z-index: 4;}

.spacecontainer{background: url(../img/space.jpg) center center no-repeat; background-size: cover; background-attachment: fixed;}


@keyframes move-background{from{-webkit-transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(1000px,0,0)}}@-webkit-keyframes move-background{from{-webkit-transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(1000px,0,0)}}@-moz-keyframes move-background{from{-webkit-transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(1000px,0,0)}}@-webkit-keyframes move-background{from{-webkit-transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(1000px,0,0)}}.background-container{position:fixed;top:0;left:0;bottom:0;right:0}.stars{background:#000 url(../img/stars.png) repeat;position:absolute;top:0;bottom:0;left:0;right:0;display:block;z-index:0}.twinkling{width:10000px;height:100%;background:transparent url(../img/twinkling.png) repeat;background-size:1000px 1000px;position:absolute;right:0;top:0;bottom:0;z-index:2;-moz-animation:move-background 70s linear infinite;-ms-animation:move-background 70s linear infinite;-o-animation:move-background 70s linear infinite;-webkit-animation:move-background 70s linear infinite;animation:move-background 70s linear infinite}.clouds{width:10000px;height:100%;background:transparent url(../img/clouds_repeat.png) repeat;background-size:1000px 1000px;position:absolute;right:0;top:0;bottom:0;z-index:3;-moz-animation:move-background 150s linear infinite;-ms-animation:move-background 150s linear infinite;-o-animation:move-background 150s linear infinite;-webkit-animation:move-background 150s linear infinite;animation:move-background 150s linear infinite}



.header{width: calc(100%); max-width: 1920px; padding: 0; position: sticky; top: 0px; z-index: 50000; transition: all 0.3s ease; background: var(--main);}

.flexheader{display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center; width: 100%; max-width: 1024px; margin: 0 auto;}

.logoholder{order: 1; margin-right: 40px; padding: 10px 0;}
.logo{}


.navigation{display: flex; justify-content: flex-start; flex-wrap: wrap; order: 2; flex-grow: 0; outline: 0px solid red; align-items: center; margin: 0; padding: 0;}
.navlink{color: #e6fffa; font-size: 16px; font-weight: 400; position: relative; padding:30px 10px; margin-right: 0px;}

.navlink:hover{color: var(--white); background: var(--darker);}
.current{color: var(--white); background: var(--darker);}


.menu{background-color:transparent;border:none;cursor:pointer;display:flex;padding:0}.line{fill:none;stroke:var(--white);stroke-width:6;transition:stroke-dasharray 600ms cubic-bezier(.4,0,.2,1),stroke-dashoffset 600ms cubic-bezier(.4,0,.2,1)}.line1{stroke-dasharray:60 207;stroke-width:6}.line2{stroke-dasharray:60 60;stroke-width:6}.line3{stroke-dasharray:60 207;stroke-width:6}.opened .line1{stroke-dasharray:90 207;stroke-dashoffset:-134;stroke-width:6}.opened .line2{stroke-dasharray:1 60;stroke-dashoffset:-30;stroke-width:6}.opened .line3{stroke-dasharray:90 207;stroke-dashoffset:-134;stroke-width:6}


/* ==========================================================================
   CONTENT
   ========================================================================== */





.maincontent{width: 100%; max-width: 1024px; margin: 20px auto; min-height: 100vh; background: #fff; padding: 20px; position: relative; z-index: 4;}


.homeheader{background: var(--accent); padding: 10px; text-align: center;}
.homeheader h1{color: #fff; font-size: 24px; font-weight: 600; margin: 0;}
.homeheader {color: #fff; margin-bottom: 20px;}

.greentext p{margin: 10px 0 0; font-size: 16px;}

.homesplit{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; padding: 0;}
.homesplitleft{width: calc(50% - 20px);outline: 0px solid red;}
.homesplitright{width: calc(50% - 20px); padding-left: 0px; font-size: 18px;outline: 0px solid red; line-height: 24px;}


.videoholder{width:100%}
video{width:100%!important;height:auto!important}
.embed-container{position:relative;padding-bottom:56.25%;padding-top:0;height:0}
.embed-container iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}
.embed-container video{position:absolute;top:0;left:0;width:100%;height:100%;border:none}


.getstarted{width: 100%; display: block; margin: 20px 0 10px; padding: 40px; background: url(../img/landing_bg.jpg) center center no-repeat; background-size: cover; text-align: center; position: relative;border-radius: 5px;}
.getstartedcover{position: absolute; content: ''; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0); z-index: 2;transition: all 0.3s ease;}
.getstartedheader{font-size: 24px; margin-bottom: 20px; font-weight: 600; color: #fff; position: relative; z-index: 5;}
.getstartedbody{font-size: 18px; margin-bottom: 0px; font-weight: 400; color: #fff; position: relative; z-index: 5;}
.getstarted:hover .getstartedcover{background: rgba(0,0,0,0.5);}

.storygridholder{width: 100%; padding: 0;}

.storygrid{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 10px; padding: 0;}
.storygriditem{background: #fff; padding: 10px; min-height: 150px; z-index: 10; position: relative; overflow: hidden; display: block; border-radius: 5px;}
.storygridtitle{color: #fff; z-index: 5; font-weight: 600; font-size: 16px; position: relative;}
.storygridimage{position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; transition: all 0.3s ease;}
.storygridimage img{width: 100%; height: 100%; object-fit: cover;}
.storygriditem:hover .storygridimage{transform: scale(1.1,1.1);}
.storygridcover{position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; transition: all 0.3s ease; background: rgba(0,0,0,0.1);}
.storygriditem:hover .storygridcover{background: rgba(0,0,0,0.5);}


.videogridholder{width: 100%; padding: 0;}

.videogrid{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 10px; padding: 0;}
.videogriditem{background: #fff; padding: 10px; min-height: 200px; z-index: 10; position: relative; overflow: hidden; display: block; border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;}
.videogriditem:hover{box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;}
.videogridtitle{color: var(--black); text-align: center; z-index: 5; font-weight: 600; font-size: 14px; position: relative;}
.videogridimage{position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; transition: all 0.3s ease; background: url(../img/play.png) center center no-repeat;}
.videogriditem:hover .videogridimage{transform: scale(1.1,1.1);}
.videogridcover{display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; transition: all 0.3s ease; background: rgba(0,0,0,0.1);}
.videogriditem:hover .videogridcover{background: rgba(0,0,0,0.5);}

.resourcegridholder{width: 100%; padding: 10px; background: #f6f6f6;}

.resourcegridtext{padding: 20px 0;}
.resourcetext{padding: 20px;}

.resourcegrid{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 40px; padding: 0;}
.resourcegriditem{background: #fff; padding: 0px; z-index: 10; position: relative; overflow: hidden; display: block; border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; height: 120px;}
.resourcegriditem:hover{box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;}
.resourcegridtitle{color: var(--black); z-index: 5; position: relative; width: calc(100% - 150px); padding: 20px;}
.resourcegridimage{z-index: 2; transition: all 0.3s ease; width: 150px; height: 100%; overflow: hidden;}
.resourcegridimage img{width: 100%; height: 100%; object-fit: cover;}
.resourcegriditem:hover .resourcegridimage img{transform: scale(1.1,1.1);}
.resourcegridcover{display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; transition: all 0.3s ease; background: rgba(0,0,0,0.1);}
.resourcegriditem:hover .resourcegridcover{background: rgba(0,0,0,0.5);}

.resourcetitle{font-weight: 600; font-size: 16px; }
.resourcedescription{font-weight: 400; font-size: 13px; }

.downloadword a{font-size: 14px; color: #fff;}
.resourcelinks{margin-bottom: 10px;}
.resourcelinks a{font-size: 14px; color: #fff;}
.resourcelinks span{font-size: 14px; color: #fff; margin: 0 10px;}
.resourcelinks a:hover{color: var(--black);}
.downloadword a:hover{color: var(--black);}
/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer{width: 100%; background: #fff;}
.innerfooter{width: 100%; margin: 0 auto; max-width: 1024px; padding: 10px 0;}
.footerlink{text-align: center; font-size: 16px; margin-bottom: 20px;}

.footerlogos{width: 100%; padding: 10px 0; display: flex; justify-content:space-around; flex-wrap: wrap; align-content: center;}
.eachfooterlogo{margin: 0 10px;}
.eachfooterlogo img{height: 40px; width: auto;}
.eachfooterlogo:hover img{opacity: 0.5;}



/* ==========================================================================
   STORIES
   ========================================================================== */

.storytime{width: 100%; padding: 0;}
.fullwidthimage{width: 100%; height: auto; margin-bottom: 20px;}
.fullwidthimage img{width: 100%;}
.thestory{width: 100%; padding: 0;}

.wrapleftimage{max-width: 50%; float: left; margin: 0 20px 20px 0;}
.wraprightimage{max-width: 50%; float: right; margin: 0 0 20px 20px;}

.splitstory{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap;}
.splitstoryimage{width: 49%;}
.splitstorytext{width: 49%;}

.storiestags{font-size: 12px; padding-top: 20px;}

/* ==========================================================================
   MOSAIC
   ========================================================================== */
.mosaicbreadcrumbs{margin-bottom: 20px;}
.bclink{font-size: 22px; font-weight: 800;}
.bclink:hover{}
.mosaiccontent{width: 100%; padding: 0; margin: 0 auto; position: relative;}


.mosaicpanelh2{font-weight: 700; margin-bottom: 20px;}
.bodyh{margin: 30px 0 20px 0; font-weight: 500; letter-spacing: 0px;}

.mosaicheader{font-size: 22px; margin-bottom: 10px;}
.mainheader{color: var(--main);}
.accentheader{color: var(--accent);}
.thinheader{font-weight: 300;}
.thickheader{font-weight: 800;}

.singleimage{width: 100%; margin:40px auto; display: flex; justify-content: flex-start; flex-wrap: wrap;}
.singleimage img{width: 100%;}
.halfsingleimagewidth img{width: 50%;}

.centersingleimagealign{justify-content: center;}
.rightsingleimagealign{justify-content: flex-end;}
.leftsingleimagealign{justify-content: flex-start;}

.tabsection{margin: 40px 0;}


.newsimagecontent{width:100%; margin: 40px auto; outline: 0px solid red;box-shadow: 0 30px 90px rgba(0,0,0,0.25), 0 7px 20px rgba(0,0,0,0.05);}

.accordionholder{width: 100%; margin: 40px auto;}

.azfilter{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 20px;}


.expander{width: 50%; text-align: center; font-size: 14px; position: relative; display: flex;  justify-content: center; align-items: center;}
.expander a{color: #fff; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.openall{background: var(--main); background: linear-gradient(to bottom, #EA8096 0%, #EA5E96 100%);}
.closeall{box-shadow:inset 0 10px 20px rgba(0,0,0,.2); background: linear-gradient(to bottom, #EA8096 0%, #EA5E96 100%);}
.closeall:hover{color: #fff;transform: translateY(1px);}
.openall:hover{box-shadow:inset 0 10px 20px rgba(0,0,0,.2) color: #fff;transform: translateY(1px);}

.field{width: 50%; border:1px solid rgba(26,26,26,0.2); padding: 10px; }
.field:focus{outline: 1px solid rgba(26,26,26,0.3);}


.thedetails{padding: 20px; display: block;}
.innerdetails{background: #fff; color: var(--main); font-size: 16px; padding: 20px; border: 1px solid #ececec; border-radius: 4px;}

.detailsearch{margin-bottom: 10px; /*box-shadow: 0 5px 15px rgba(0,0,0,0.25), 0 4px 10px rgba(0,0,0,0.05); */ border-radius: 5px; background: #f2f2f2;border-left: 15px solid var(--main);}
.detailsbooking{background: #fff;}
.summaryimage{width: 32px; display: none;}
.summarytext{width: calc(100% - 120px); }
.summaryicon{width: 20px; text-align: center;}
.summarytitle{width: calc(100% - 30px);}
.summaryarrow{transition: all 0.3s; width: 20px; margin-left: 10px; color: var(--main);}
details[open] summary .summaryarrow {
 transform: rotate(-180deg);
}

summary{display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; padding: 20px; outline: none; color: var(--black); font-size: 16px; cursor: pointer; transition: all 0.3s ease; }
summary:hover{}
summary::-webkit-details-marker {display: none;}

summary img{width: 32px; margin-right: 20px;}

.accordionheader{font-weight: 700; color: var(--main);}
/*
.mosaiccontent a:hover{transform: translateY(-3px); display:inline-block}
*/
@keyframes open {
  0% {opacity: 0; margin-left: -20px}
  100% {opacity: 1; margin-left: 0px}
}
details[open] summary ~ * {
  animation: open .5s ease-in-out;
}

.mosaictable td{padding: 10px 10px 10px 0;}
  



/* ==========================================================================
   MODAL
   ========================================================================== */

.modal{position:fixed;top:0;left:0;display:flex;align-items:center;justify-content:center;height:0vh;background-color:transparent;overflow:hidden;transition:background-color 0.25s ease;z-index:1200001}.modal.open{position:fixed;width:100%;height:100vh;background-color:rgba(0,0,0,.5);transition:background-color 0.25s}.modal.open>.content-wrapper{transform:scale(1)}.modal .content-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:80%;max-width:1000px;margin:0;padding:2.5rem;background:#f7f7f7;border-radius:.3125rem;box-shadow:0 0 2.5rem rgba(0,0,0,.5);transform:scale(0);transition:transform 0.25s;transition-delay:0.15s;max-height:90vh;overflow:auto}.modal .content-wrapper .close{position:absolute;top:.5rem;right:.5rem;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:none;background-color:transparent;font-size:1.5rem;transition:0.25s linear;cursor:pointer}.modal .content-wrapper .close:before,.modal .content-wrapper .close:after{position:absolute;content:'';width:1.25rem;height:.125rem;background-color:#000}.modal .content-wrapper .close:before{transform:rotate(-45deg)}.modal .content-wrapper .close:after{transform:rotate(45deg)}.modal .content-wrapper .close:hover{transform:rotate(360deg)}.modal .content-wrapper .close:hover:before,.modal .content-wrapper .close:hover:after{background-color:tomato}.modal .content-wrapper .modal-header{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;margin:0;padding:0 0 1.25rem}.modal .content-wrapper .modal-header h2{font-size:1.5rem;font-weight:700;color:var(--main)}.modal .content-wrapper .modal-content{position:relative;display:flex;flex-wrap:wrap;width:100%;padding:0}.modal .content-wrapper .modal-content p{font-size:.875rem;line-height:1.75;width:100%}.modal .content-wrapper .modal-footer{position:relative;display:flex;align-items:center;justify-content:flex-start;width:100%;margin:0;padding:1.875rem 0 0}.modal .content-wrapper .modal-footer .action{position:relative;margin-right:.625rem;padding:.625rem 1.25rem;border:none;background-color:slategray;border-radius:.25rem;color:#fff;font-size:1rem;font-weight:600;text-transform:uppercase;overflow:hidden;z-index:1}.modal .content-wrapper .modal-footer .action:before{position:absolute;content:'';top:0;left:0;width:0%;height:100%;background-color:rgba(255,255,255,.2);transition:width 0.25s;z-index:0}.modal .content-wrapper .modal-footer .action:first-child{background-color:var(--main)}.modal .content-wrapper .modal-footer .action:last-child{background-color:var(--darkergrey,#13001D)}.modal .content-wrapper .modal-footer .action:hover:before{width:100%}

.gallerycontent{box-shadow: 0 30px 90px rgba(0,0,0,0.25), 0 7px 20px rgba(0,0,0,0.05); width:calc(100% - 80px); margin: 40px auto;}




/* ==========================================================================
   GDPR
   ========================================================================== */


.sitemapul{}
.sitemapul ul{padding: 10px 0 0 20px; margin-bottom: 20px;}
.sitemapul li{margin-bottom: 5px;}


/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
@media only screen and (min-width: 1920px) {}

@media only screen and (min-width: 1024px) {.navigation{display: flex!important;}.ham{display: none; order: 4;}}
@media only screen and (max-width: 1024px) {
   
    .header{ align-items: center; z-index: 501; padding: 10px 20px;}
    .flexheader{justify-content: space-between;}
    .logoholder{order: 1;}
    .ham{display: block; order: 3; margin-right: 0px;}
    .fillbg{}
    
    .navigation{display: none; width: 100%; height: auto; text-align: right; padding: 20px 0; order: 4;}
    .navlink{display: block; width: 100%; margin: 0; font-size: 18px; margin-bottom: 20px; padding: 0;}
    ul.primary li:hover ul { display: none;}
    .navlink i{display: none;}
    .navlink:hover{background: none;}

    .homesplitleft{width: 100%; margin-bottom: 20px;}
    .homesplitright{width: 100%;}
}
@media only screen and (max-width: 1024px) {


}


@media only screen and (max-width: 800px) {
    .container{width: 100%; margin: 0 auto;}
    .storygrid{grid-template-columns: 1fr 1fr;}
    .videogrid{grid-template-columns: 1fr 1fr;}
    .resourcegrid{grid-template-columns: 1fr;}
    .wraprightimage{float: none; max-width: 100%; width: 100%; margin: 0 0 20px 0;}
    .wrapleftimage{float: none; max-width: 100%; width: 100%; margin: 0 0 20px 0;}
    .wraprightimage img{width: 100%;}
    .wrapleftimage img{width: 100%;}
    .modal .content-wrapper{width: 100%;}
    .eachfooterlogo{margin: 0 10px 10px;}
}

@media only screen and (max-width: 500px) {
.storygrid{grid-template-columns: 1fr;}
    .videogrid{grid-template-columns: 1fr;}
    
}


.hidden{display:none!important}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sr-only.focusable:active,.sr-only.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;white-space:inherit;width:auto}.invisible{visibility:hidden}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}@media print{*,*:before,*:after{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}pre{white-space:pre-wrap!important}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}}