html{
  height: 100%;
}

body {
height: 100%;
width:100%;
background-color:#f7f7f7;
background-color:#fff;
font-family: 'Raleway', sans-serif;
	font-size: 18px;
	font-weight: normal;
	color: #333;
	font-style: normal;
    line-height: 26px;
    position: relative;

}
	
p {
font-size: 18px;
}

.medium{
font-size:125%;
}

h1,h2,h3,h4,h5 {
color: #333;
font-family: 'Frank Ruhl Libre', serif;
overflow-wrap: break-word;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}
.center-text {
text-align: center;
}
.border { 
border:1px solid #efefef !important;
padding:5px;
min-height:200px;
}
[class*="col-"]:not(:last-child){ margin-bottom: 25px; }
.pink-bg {
background-color: #FF4F78;
border-color: #FF4F78;
}

.teal {
color:  #5cc8d6;
}

.pink {
color:  #FF4F78;
}
.blue {
color: #376884;
}
.blue-bg {
background-color: #376884;
border-color: #376884;

}
.wrapper,
#wrapper {
margin:0 auto;
max-width: 1800px;
}
.nopadding {
padding: 0px !important;
}

#header {
margin: 0; 
width:100%;
position:relative;
background-color: #fff; /* Used if the image is unavailable */
vertical-align: top;
height:380px;
background-image: url("/images/header/header-background-ocean.jpg"); /* The image used */

/** top left corner is 0% 0%. The right bottom corner is 100% 100%.**/
background-position: 100% 70%; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}

/**** PUT ABOVE VIDEO ***/

body#home #header{
position:absolute;
height:380px;
top:0;
left:0;
z-index:1000;
background-color:transparent;
background-image:none;  
}

#header #header-inner {
margin: 0 -15px;
padding-bottom: 0px;
padding-top: 10px;
color: #fff;
z-index: 1;
position: relative;
z-index: 9;
background-image: linear-gradient(to top, transparent 5%, #000 150%, #000 11%);
}

#header #inner{
opacity:0.9;
}

#header #header-top{
margin-top:15px;
padding:0;
border-bottom:.5px solid #f7f7f7;
}

#header #header-top .header-social a {
display: inline-block;
margin-left: 15px;
text-align: center;
color: #19b7b7;
}

#header #header-top .header-cta ul {
margin-right:20px;
}

#header #header-top .header-cta ul li {
    display: inline-block;
    margin-left: 30px;
color:white;
}

#header #header-top .header-cta ul li a{
color:white;
}

#header #header-top .header-cta ul li:first-child{margin-left: 0;}

#header #header-top .header-cta ul li:last-child{padding-right: 0; border-right: none;}

#header #header-top .header-cta ul li i {
display: inline-block;
margin-right: 5px;
position: relative;
top: 2px;
color: #fff;
background: #19b7b7;
width: 30px;
height: 30px;
text-align: center;
line-height: 31px;
border-radius: 50%;
font-size: 12px;
}

#header #header-middle {
border:0px solid white;
width:100%;
padding:0;
margin:0;
}

#header #header-middle nav{
color:white;
width:100%;
text-align: left;
margin:0;
padding:0;
}

#header #header-middle nav.bg-light{
background-color: transparent !important;
}

#header #header-middle nav img#logo {
max-width:200px;
margin: 10px 0 20px 55px;
}

#header #header-middle nav.navbar #collapsibleNavbar{
text-align:right;
position:relative;
}

#header #header-middle nav .navbar-toggler-icon {
    display: inline-block;
    width: 50px;
    height: 50px;
    vertical-align: middle;
    content: "";
    background: 100% no-repeat;
}

#header #header-middle nav  .navbar-light .navbar-toggler  {
    color: rgba(255,255,255, .5) !important;
    border-color: #fff !important;
}


#header #header-middle nav .navbar-nav{
border:0px solid red;
margin-left:150px;
}

#header #header-middle nav .navbar-nav li.nav-item {
margin-right:30px;
text-align: center;
}

#header #header-middle nav .navbar-nav .nav-item a.nav-link {
font-size: 20px;
color:white !important;
font-family: 'Frank Ruhl Libre', serif;
}


#header #header-bottom{
color:white !important;
text-align:center;
}

#header #header-bottom h1{
font-size: 58px;
    margin-bottom: 25px;
    line-height: 1;
    color: #fff;
    text-shadow: 0px 0px 5px #000;
}

#header #header-bottom ul li ,
#header #header-bottom ul li a {
    font-size: 18px;
    color: #fff;
    font-weight: 600;
    text-shadow: 0px 0px 5px #000;
}


h1 {
font-weight: bold;
}

h2 {
font-weight: bold;
color: #000;
}

#home-img-container {
position: relative;
overflow-x:hidden;
}

.text-left {
text-align: left;
}



#topVideo {
position:relative;
margin:0 auto;
display: block;
max-width: 1800px;
width: 100%;
height: 700px;
max-height: 700px;
overflow:auto;
background-color:white;
/*
position:absolute;
top:0;
left:0
*/
}

.video-foreground {
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.video-foreground #videoDiv {
  position: absolute;
  top:-100%;
  left: 0;
  width: 100%;
  height: 300%;
  pointer-events: none;
border:0px solid blue;
overflow:hidden;
}


#overlay {
width:100%;
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    text-align: center !important;
    color: white;
    font-size: 175%;
}

#overlay #overlay-inner{
position:relative;
margin:20px auto 45px auto;
}

#overlay h1 {
    color:  #fff;
    font-size: 57px;
    text-align: center !important;
text-shadow: 2px 2px 4px #333;
}

#overlay h3{
color:white;
font-size: 40px;
margin: 0px;
text-shadow: 0px 0px 5px #000;
}

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

#content{
margin:0 auto;
padding:0;
width:100%;
border:0px solid red;
} 

#content .inner,
#content .padding{
max-width:1200px;
margin: 20px auto;
padding:20px;
}


#content .btn.ss-btn {
    background-color: #19b7b7;
    box-shadow: 2.5px 4.33px 15px 0px rgba(0, 0, 0, 0.15);
    color: #FFF;
    padding: 10px 20px;
    text-transform: uppercase;
width:250px;
margin:20px 10px;
}


/**** HOME ******/
body#home #home-welcome {
margin:30px auto;
text-align:center;
max-width:80%;
}

body#home #home-welcome h5#welcome-to{
color:  #5cc8d6;
font-size: 30px;
}

body#home #content #home-welcome h2{
font-size: 50px;
margin-bottom: 0 !important;
}

body#home #home-welcome #learn-more {
display:block;
margin:25px auto;
text-align:center;
    background-color: #19b7b7;
    box-shadow: 2.5px 4.33px 15px 0px rgba(0, 0, 0, 0.15);
    color: #FFF;
    padding: 10px 20px;
    text-transform: uppercase;
width:250px;
}

body#home #about-owner {
max-width:1200px;
margin:30px auto;
padding:20px;
}

body#home #about-owner .img {
    padding: 10px;
    box-shadow: 0px 0px 8px #a7a7a7;
    border-radius: 10px;
width: 100%;
height: auto;
object-fit: cover;
/**
height: 470px;
object-position: 70%;
**/
}

body#home #about-owner #contact-button{
margin:20px auto;
display:block;
}

body#home #properties-listing{
margin:20px auto;
border:1px solid #ccc;
//overflow:hidden;
display:flex;
flex-direction: row;
flex-wrap:wrap;
align-items:stretch;
border:0px solid red;
justify-content: space-evenly
}

body#home #properties-listing .item{
padding:0 10px 10px 10px !important;
text-align:center;
line-height:150%;
flex-basis: auto;
border:0px solid red;
}

body#home #properties-listing .item img{
height:350px;
max-height:350px;
properties-listing:cover;
}


/***** THE RESORT ******/


body#the-resort #content .row#resort{
margin:30px auto;
text-align:left;
max-width:1200px;
}

body#the-resort #content .row#resort img{
display:block;
margin:0 auto 30px auto;
object-fit: cover;
border:1px solid #eee;
background-color:white;
padding: 10px;
box-shadow: 0px 0px 8px #a7a7a7;
border-radius: 10px;
}

body#the-resort #content #resort ul#amenities li{
width: 45%;
    background: #e9e9e9;
    padding: 5px 10px;
    border-radius: 10px;
    margin: 8px;
    box-shadow: 0px 0px 5px #a7a7a7;
}

body#the-resort #content #myFancyBox{
background-color: #e1e1e1;
background-color: #ece4e4;;
max-width:1200px;
margin:30px auto;
padding:20px 0;
}

body#the-resort #content #myFancyBox flex{
    display: flex;
flex-wrap: wrap;
flex-direction: row;
    justify-content: center;
align-items: stretch;
align-content: stretch 
}

body#the-resort #content #myFancyBox #flex div{
margin: 15px;
background-color: transparent;
text-align: center;
width: 30%;
}

body#the-resort #content #myFancyBox #flex div img{
object-fit: cover !important;
}

.carousel-caption{
background-color:white;
padding:7px;
color:black;
opacity:.8;
}


/**** STORE ***/

body#store #summary-results.flex-container div{ 
background-color: white;
box-shadow: 0px 0px 8px #a7a7a7;
position: relative;
}

body#store #summary-results.flex-container div .summary-main-image{ 
max-width:350px;
}
body#store form#summary-search {
padding:12px 0 0 0;
background: #ddd;
}
body#store form#summary-search #submit {
    background-color: #19b7b7;
    box-shadow: 2.5px 4.33px 15px 0px rgba(0, 0, 0, 0.15);
    color: #FFF;
    padding: 6px 20px;
    text-transform: uppercase;
margin:0 10px;
}

body#store-details .buy-button{
background-color: #FF4F78;
background-color: #19b7b7;
box-shadow: 2.5px 4.33px 15px 0px rgba(0, 0, 0, 0.15);
color: #FFF;
padding:6px;
color:white;
}

body#store-details .padding{
box-shadow: 0px 0px 8px #a7a7a7;
max-width:1200px;
margin: 20px auto;
padding:20px;
}


body#store-details .buy-button{
}

/**** PROPERTIES *****/

body#gallery-slides img{
height:300px !important;
width:auto;
border:1px solid red;
}

body#guests-guide #content ul{
margin:20px 0px;
display:block;
}

body#guests-guide #content ul li{
padding-bottom:7px;
}

body#guests-guide #content ul li.space{
line-height:35px;
}

body#guests-guide img#header-image{
background-size: contain;
display:block;
width:100%;
height:auto;
max-height:200px;
}

body#guests-guide img.left-img{
border-radius:5px;
display:block;
margin-bottom:25px;
}

body#guests-guide #attractions-flex{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: flex-start;
align-content:flex-start;
}

body#guests-guide #attractions-flex div{
text-align:center;
border-radius:10px;
background-color: #f1f1f1;
width: auto;
min-width: 200px;
max-width: 300px;
min-height:100px;
padding: 10px;
margin: 10px;
text-align: center;
}

body#guests-guide #attractions-flex div img{
border-radius:5px;
object-fit: cover;
max-width: 100%
}

body#contact #contact-info{
background-color: #2b2d42;
margin:0 auto;
padding:20px 0;
color: #c3c5d3;
border:0px solid red;
width:100%;
}

body#contact #contact-info .row{
max-width:1200px;
margin:20px auto;
}

body#contact #contact-info a:link {
  color: #c3c5d3;
}

body#contact #contact-info a:visited {
  color: #c3c5d3;;
}

body#contact #contact-info a:hover {
  color: white
}

body#contact #contact-info a:active {
  color: #c3c5d3;;
}

body#contact #contact-info h5 {
    display:inline; 
    font-size: 20px;
    margin-bottom: 15px !important;
    color: #19b7b7;
font-weight:bold;
}

body#contact #contact-info .row div{
    padding: 0 15px;
line-height: 28px;
    padding-bottom: 10px;
}

body#contact #contact-info  .row .f-cta-icon {
    float:left;
margin-right:20px;
}

body#contact #contact-info  .row .f-cta-icon i{
    height: 80px;
    width: 80px;
    text-align: center;
    line-height: 78px;
    background: #19b7b7;
    border-radius: 50%;
    color: #fff;
    font-size: 28px;
    margin-bottom: 30px;
}

body#contact .padding h2{
margin:20px auto;
text-align:center;
font-size:50px;
}  

body#contact #myAllForm{
margin:30px auto;
}

body#contact form#myAllForm label{
font-weight:bold;
color:black;
}

body#contact form#myAllForm .form-control {
background-color:#eee;
}



/****** FAQS *******/

body#faqs {
background-color:white;
}

body#faqs #content h2{
font-size:50px;
}

body#faqs #content #accordionExample{
max-width:1000px;
margin: 20px auto;
}

body#faqs #content #accordionExample .card-header .btn{
font-size:25px;
}

body#faqs #content #accordionExample .card-body{
background-color:white;
}

body#faqs #content #accordionExample .card-body em{
font-size:23px;
line-height:34px;
}

/****** ACTIVITES *******/

body#home #blog ,
body#activities #blog {
margin:0px auto;
position:relative;
max-width:1200px;
padding:60px 0;
}

body#home #blog{
padding:60px 20px;
} 

body#home #blog .single-post2,
body#activities #blog .single-post2 {
    overflow: hidden;
    box-shadow: 0px 0px 8px #a7a7a7;
    border-radius: 10px;
}

body#home #blog .blog-thumb2,
body#activities #blog .blog-thumb2 {
    /*overflow: hidden;*/
    width: 100%;
    height: 450px;
object-fit: cover;
}

body#home #blog .blog-thumb2 img,
body#activities #blog .blog-thumb2 img{
    height: 450px;
object-fit: cover;
max-width: 100%;
transition: all 0.3s ease-out 0s;
}

body#home #blog .blog-content2,
body#activities #blog .blog-content2 {
    background: #fff;
    padding: 10px 10px;
    position: relative;
    z-index: 1;
    width: 90%;
    margin: auto;
    margin-top: -115px;
    margin-bottom: 15px;
    box-shadow: 0px 0px 8px #a7a7a7;
    border-radius: 10px;
text-align:center;
}

body#home #blog .blog-content2 a,
body#activities #blog .blog-content2 a{
color:black;
text-decoration: none;
}

body#home #blog #other ,
body#activities #blog #other{
margin:20px auto; 
}

body#home #blog #other .btn.ss-btn,
body#activities #blog #other .btn.ss-btn {
    background-color: #19b7b7;
    box-shadow: 2.5px 4.33px 15px 0px rgba(0, 0, 0, 0.15);
    color: #FFF;
    padding: 20px 30px;
    text-transform: uppercase;
width:300px;
margin:10px 10px;
}





/*********/

#search-form{
border-radius:7px;
border:1px solid #ddd;
margin:20px auto;
padding:13px 10px 10px 7px;;
background-color:#ddd;
}

#search-form button#submit{
background-color:#55b5b6;
color:white;
}


/****** PROPERTIES *******/

#properties-listing .item {
width:45%;
box-shadow: 0px 0px 8px #7a7a7a;
max-width:600px;
margin-bottom:30px;
}
#properties-listing .item img{
max-width:100%;
}

#properties-listing .item .summary{
margin:10px auto;
}

#properties-listing .item h2.name{
color:  #5cc8d6;
font-weight:bold;
margin-bottom:0px;
font-size:30px;
}

#properties-listing .item .amenities{
margin:15px auto;
text-align:center;
font-size:125%;
}

#properties-listing .item .amenities li{
margin-right:20px;
}

#properties-listing .item .more-info{
background-color:  #5cc8d6;
color:white;
}

body#property-details #content #property {
margin:0 auto;
width:100%;
}

body#property-details #content #top-images {
margin: 20px auto;
padding:20px;
background: #e9e9e9;
}

body#property-details #content #top-images img{
border-radius:8px;
object-fit: cover;
width:90%
}

body#property-details #div-left {
    padding: 10px;
    max-width: 100%;
}

body#property-details #content #top-images #myFancyBox #flex{
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
justify-content: flex-start;
align-items: center;
align-items: stretch;
align-content:center;
align-content: flex-start; 
align-content: stretch;
}

body#property-details #content #myFancyBox #flex .item{
  max-width: 35%;
  padding: 0;
margin:0; 
}

body#property-details #content #myFancyBox #flex .item img{
margin: 2px;
padding:4px;
height:auto;
height:100px;
width:100px;
border-radius:8px;
object-fit: cover;
}

body#property-details #content #details-amenities{
    display: flex;
flex-wrap: wrap;
flex-direction: row;
    justify-content: center;
align-items: stretch;
align-content: stretch
}


body#property-details #content #details-amenities div{
width: 45%;
    background: #e9e9e9;
    padding: 5px 10px;
    border-radius: 10px;
    margin: 15px ;
    box-shadow: 0px 0px 5px #a7a7a7;
}

/****** FOOTER *******/

#footer{
margin:0 auto;
padding:0;
width:100%;
min-height:400px;
/**
padding:20px 20px 100px 20px;
margin:30px -15px 0 -15px;
**/
clear:both;
color: #c3c5d3; 
background: linear-gradient(to left, #000000ab, #000000ab),
url("/images/footer/footer-bg.jpg");
background-position: 100%;
}

#footer h2{
color:white;
margin-bottom: 30px;
    position: relative;
    padding-bottom: 10px;
font-size:24px !important;
font-weight:bold;
border-bottom:1px solid #bc986b;
}

#footer a:link {
  color: #c3c5d3; 
}

/* visited link */
#footer a:visited {
  color: #c3c5d3;;
}

/* mouse over link */
#footer a:hover {
  color: white 
}

/* selected link */
#footer a:active {
  color: #c3c5d3;;
}

#footer i{
width: 30px;
    height: 30px;
    color: #19b7b7;
    line-height: 40px;
	/**
    background: #3763eb;
    color: #fff !important;
    text-align: center;
    vertical-align: center;
    border-radius: 0;
    background-color: #19b7b7;
	**/
}

#footer i .fa-solid{
padding-bottom:8px;
}

#footer .f-contact ul,
#footer .footer-link ul{
margin: 0px;
padding: 0px;
list-style-type:none
}

#footer .footer-link ul li{
margin-bottom:10px;
}

#footer .qr-footer img{
max-width:150px;
}

#footer .btn-default{
background-color: #19b7b7 !important;
padding:3px 10px;
color:white;
}





@media only screen and (max-width : 1100px) {

        #header #header-middle nav .navbar-nav{
        border:0px solid red;
        margin-left:30px;
        }

        #header #header-middle nav .navbar-nav li.nav-item {
        margin-right:15px;
        }
}


@media only screen and (max-width : 992px) {

        #header{
        overflow:auto;
        }

        .navbar-light .navbar-toggler {
        margin-right:25px;
        background-color:#eee;
        color: rgba(0, 0, 0, .9) !important;
        border-color: rgba(255, 255, 255, .9) !important;
        }

        #header #header-top{
        margin-top:0px;
        border-bottom:0 solid #f7f7f7;
        }

        #header #header-middle nav img#logo {
        max-width:200px;
        margin: 10px 0 20px 20px;
        }

	#topVideo {
        max-height: 500px;
        overflow:hidden;
	}

        .property-img {
        display: block;
        margin: 15px auto;
        float: none!important;
        }
}


/* Medium Devices, Desktops */
@media only screen and (max-width : 768px) {

        #header img#logo{
        max-width:150px;
	position:absolute;
	top:2%;
	left:50%;
	transform:translate(-50%,-2%);
	/**
	border:1px solid red;
        max-width:150px;
	text-align: center !important;
        margin:0 auto;
        display:block !important;
        **/
	}

	#header {
	height:280px;	
	}
	#header #header-bottom{
	margin-top:90px;
	}

	#header #header-bottom h1{
	font-size: 45px;
	}

        body#the-resort #content #resort ul#amenities li{
        width: 85%;
        }

        body#the-resort #content #myFancyBox #flex div{
        width: 96%;
        }

        #properties-listing .item {
        width:100%;
	max-width:90%;
        }

        body#home #property-flex-container  div{
        min-height:200px;
        }

	#header #header-middle nav .navbar-collapse .navbar-nav{
	background-color:#bbb;
	border-radius:7px;
	width:90%
	}

	#topVideo {
        max-height: 345px;
        }

        #topVideo h1 {
        font-size: 37px;
        display:inline;
        }

        #overlay {
	font-size: 125%;
    	left: 50%;
	top: 80%;
    	transform: translateY(-70%) translateX(-50%);
	}
        
	#overlay #overlay-inner{
	margin-top:60px;
	border-top:red;
	}
}

@media only screen and (max-width : 500px) {

	#overlay #overlay-inner h3{
	display:none;
	}
}