/* Custom CSS */

h1,
h2,
#overview > p {
    color: #333333;
}
body {
    background-color: #f4eee7 !important;
    font-family: "Raleway", sans-serif;
    font-size: 18px;
}
a.menu-link {color:#ffffff;font-size: 1.1rem;}
a.menu-link:hover {color: #1abbbc;}

.is-expanded-menu .menu-link {color: #1abbbc;}


#header-wrap > div > div > nav.primary-menu.order-lg-1.col-lg-5.px-0 .is-expanded-menu .menu-link {color: #1abbbc;}
#logo {
    padding-top: 0.5rem;
}
.primary-menu + .primary-menu {
    border-top: none;
}
#header-wrap > div > div > nav.primary-menu.order-lg-1.col-lg-5.px-0 > ul > li > a { color: #ffffff!important; font-size: 1.1rem; }
#header-wrap > div > div > nav.primary-menu.order-lg-1.col-lg-5.px-0 > ul > li > a:hover { color: #1abbbc!important;}

#header-wrap > div > div > nav.primary-menu.order-lg-3.col-lg-5.px-0 > ul > li > a { color: #ffffff!important; font-size: 1.1rem; }
#header-wrap > div > div > nav.primary-menu.order-lg-3.col-lg-5.px-0 > ul > li > a:hover { color: #1abbbc!important;}

#header-wrap > div > div > nav.primary-menu.order-lg-1.col-lg-5.px-0 > ul > li > a {
      font-family: "Raleway", sans-serif;
}

#header-wrap {
    background-color: transparent !important;
    border-bottom: none !important;
}
.is-expanded-menu .sticky-header #header-wrap {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #F6CA94 !important;
    padding: 0.5rem 0;
}


.emphasis-title h1,
.emphasis-title .h1,
.emphasis-title h2,
.emphasis-title .h2 {
    color: #1abbbc;
    text-shadow:
        0 0 10px #ffffff,
        0 0 20px #ffffff,
        0 0 30px #ffffff;
    font-weight: 400;
    text-transform: none;
    font-size: var(--cnvs-emphasis-title-font-size);
    letter-spacing: -2px;
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
}
#slider > div > div.vertical-middle > div > div > h2 > span > span {
    font-family: "Courgette", cursive !important;
    font-weight: 400;
    font-style: normal;
}

h1.videotitle {
    color: #ffffff;
    text-shadow:
        0 0 10px #1abbbc,
        0 0 20px #1abbbc,
        0 0 30px #1abbbc;
}

.text-rotater {
    opacity: 0;
    animation: fadeIn 1s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#title h1 {
    color: #666666;
}
.sandgradient,
#content {
    background: linear-gradient(to bottom, #f4eee7, #ffffff);
}

#intro,
.intro {
    background: linear-gradient(to bottom, #b9dcc6, #ffffff);
}
.company-heading {
    background: linear-gradient(to bottom, #f4eee7, #f6cb94);
}

.callout {
    background-color:#FFC98B;
    padding:1em;
}
.center-vertical {
    display: flex;
    align-items: center;
    justify-content: center; 
    height: 100%; 
}
#mobiletabs {display: none;}
.tab-content {
    padding: 0.5rem;
}
.iconlist li {
    font-size: 18px;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--bs-nav-tabs-link-active-color);
    background-color: #f7f2ec;
    border-color: var(--bs-nav-tabs-link-active-border-color);
}

#photos {
    background: linear-gradient(to bottom, #ffffff, #b9dcc6);
    padding-bottom: 2em;
}

#location {
    padding: 0;
    margin: 0;
}
h2.address {
    color:#1abbbc;}

#sandbg > div > div > div.col-12.col-lg-auto.text-center.text-lg-end > div > h4,
#sandbg > div > div > div.col-12.col-lg-auto.text-center.text-lg-end > div > ul > li,
#sandbg > div > div > div.col-12.col-lg-auto.text-center.text-lg-start > p {
    color: #333333;
}

#footer {
    --cnvs-copyrights-link-color: var(--cnvs-contrast-500);
    position: relative;
    background-color: #b9dcc6;
    border-top: none !important;
}

h3.contactus {
    color: #333337 !important;
    text-decoration: underline;
    margin-bottom: .5em;
}

#sandbg {
    width: 100%;
    height: 459px;
    background-image: url("/images/sand-nobg.webp") !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.copyrights-menu {
    text-align: left;
}
.copyright-links a {
    color: #333333;
    text-decoration: underline!important;
    font-size: 1.2rem;
}
.copyright-links a:hover {
    color: #ffffff;}
p.copyright {
    font-size: 0.8em;
}

/*media queries*/

/*ipad portrait*/
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
 
  #header-wrap > div > div {
          flex-wrap: nowrap;
      }
    .col-lg-5 {
        flex: 0 0 auto;
        width: 41%;
    }
 #header-wrap > div > div > nav.primary-menu.order-lg-1.col-lg-5.px-0 .is-expanded-menu .menu-link {color: #1abbbc;}
}
 /* iPads in landscape mode */
@media only screen 
  and (min-device-width: 780px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) {
 
 .col-lg-5 {
        flex: 0 0 auto;
        width: 41%;
    }
      #header-wrap > div > div {
          flex-wrap: nowrap;
      }
  #header-wrap > div > div > nav.primary-menu.order-lg-1.col-lg-5.px-0 .is-expanded-menu .menu-link {color: #1abbbc;}
}

/*mobile*/
@media only screen and (max-width: 480px) {

#header-wrap > div > div > nav.primary-menu.order-lg-1.col-lg-5.px-0 > ul > li > a { color: #1abbbc!important; text-align: center; font-size: 1.1rem; }
#header-wrap > div > div > nav.primary-menu.order-lg-1.col-lg-5.px-0 > ul > li > a:hover { color: #ffffff;}

#header-wrap > div > div > nav.primary-menu.order-lg-3.col-lg-5.px-0.primary-menu-active > ul > li > a > div { color: #1abbbc!important; text-align: center; font-size: 1.1rem; }
#header-wrap > div > div > nav.primary-menu.order-lg-3.col-lg-5.px-0.primary-menu-active > ul > li > a > div { color: #ffffff;}
#section-about > div > h2 {font-size: 20px!important;}
h2.welcome {font-size: 2.5rem;}
h1.videotitle  {font-size: 1.5rem;}
.iconlist li {
    font-size: 16px!important;
}
    .iconlist {--cnvs-iconlist-gutter: 0rem!important;}
    #beachtabs {display: none;}
    #mobiletabs {display: inline; }
    #sandbg > div > div > div.col-12.col-lg-auto.text-center.text-lg-start > img {margin-top:2rem!important; margin-bottom: 1rem!important; }
    .copyright-links {
    margin-top: 0.1rem!important;
    
}
    .copyrights-menu {
    text-align: center;
}
    #sandbg > div > div > div.col-12.col-lg-auto.text-center.text-lg-end.footercontact {
            padding-bottom: 0;
    }
}