/* GLOBAL STYLES
-------------------------------------------------- */
body,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.tooltip,
.popover {
  font-family: Verdana;
}

a {
	color:rgb(0,175,195);
}

#special  {  	
  height: 8rem;
  top: 4rem;
  font-size: 3rem;
  opacity: .7;
  border-top: solid  rgb(0,175,195) 3px; 
  color: #960074
}

h2 {
	/*color: #960074;*/
	color: rgb(0,175,195);
}

.marketing h3 {
	/*color: #960074;*/
	color: rgb(0,175,195);
}
/* Padding below the footer and lighter body text */


body {
  padding-top: 0rem;
  padding-bottom: 3rem;
  color: #5a5a5a;
  max-width: 100%;  
  overflow-x:hidden;
}

.btn-secondary {
	background-color:rgb(0,175,195);
}
.navbar, .btn-primary  {
  background-color:  rgb(0,175,195);
  border-color:  rgb(0,175,195);
}

.btn-outline-primary {
  color: #960074;
  border-color: #960074);
}

.btn-outline {
	border-color: #960074;
	color: #960074;
}

.btn-primary  {
	background-color: #960074;
	border-color: #960074;
}


/* CUSTOMIZE THE COVER-IMAGE BACKGROUND
---------------- ---------------------------------- */

.elitebg {
	position:absolute;
	top: 2%;
	left:0;
	width:100%;
	height:100vh;
	background-image: url(../images/hero.jpg);
	background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
 //*animation: mymove 8s reverse;*//
	z-index:-1000;
}


/* Standard syntax */

@keyframes mymove {
  0% {
            transform: scale(1.0);
            -webkit-transform: scale(1.0);
        }
        100% {
            transform: scale(1.5);
            -webkit-transform: scale(1.5);
        }
    }



.v-header {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  height: 100vh;  
  max-width: 100%;
  overflow:hidden;
  -webkit-box-align:center; 
     -ms-flex-align:center; 
        align-items:center;
}

.cover-text {
   top: 70%;
   z-index: 2;

}

.cover-text h3 {
   font-size: 5rem; 
   font-weight:700; 
   color: #960074	
}

#features {
	width: 200px;
}

/*  CATEGORY CARD SELECTION
---------------------------------------------------*/
.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: hand;
  background: rgb(0,175,195);
  color: white;
}

.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0; 
}

.hovereffect img {
  display: block;
  position: relative;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, -webkit-transform 0.35s;
  -o-transition: opacity 0.35s, transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
}

.hovereffect:hover img {
  opacity: 0.4;
  -webkit-transform: translate3d(0,0,0);
          transform: translate3d(0,0,0);
}

.hovereffect h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  padding: 0.5rem;
  font-size: 35px;
  font-weight: bold;
  overflow: hidden; 
  background-color: rgba(0,175,195,.8);
}

.hovereffect h5 {
  color: #FFF;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, -webkit-transform 0.35s;
  -o-transition: opacity 0.35s, transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
  -webkit-transform: translate3d(-100%,0,0);
          transform: translate3d(-100%,0,0);
}

.hovereffect:hover h5 {
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
          transform: translate3d(0,0,0);		 
}


.hovereffect h4 {
  position: absolute;
  top: 30%;
  color: #FFF;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, -webkit-transform 0.35s;
  -o-transition: opacity 0.35s, transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
  -webkit-transform: translate3d(-100%,0,0);
          transform: translate3d(-100%,0,0);
}

.hovereffect:hover h4 {
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
          transform: translate3d(0,0,0);
}


.hovereffect p:after {
  position: absolute;
  top: 55px;
  left: 0;
  width:100%;
  height: 2px;
  background: #fff;
  content: '';
  -webkit-transition: -webkit-transform 0.35s;
  transition: -webkit-transform 0.35s;
  -o-transition: transform 0.35s;
  transition: transform 0.35s;
  transition: transform 0.35s, -webkit-transform 0.35s;
  -webkit-transform: translate3d(100%,0,0);
          transform: translate3d(100%,0,0);
}

.hovereffect:hover p:after {
  -webkit-transform: translate3d(0,0,0);
          transform: translate3d(0,0,0);
}


/* CATEGORY PAGES
-------------------------------------------------- */
.cover-image-garden  {
    background-image: url(../images/garden-spas/garden-spa-banner.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.cover-image-island  {
    background-image: url(../images/island-spas/island-spa-banner.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.cover-image-south-seas  {
    background-image: url(../images/south-seas-spas/south-seas-banner.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.cover-image-elite  {
    background-image: url(../images/elite-spas/elite-banner.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.cover-image-swim-spa  {
    background-image: url(../images/swim-spas/swim-spa-banner.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.cover-image-accessories  {
    background-image: url(../images/accessories/accessories-banner.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.cover-image-hot-tubs  {
    background-image: url(../images/hot-tubs-banner.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.cover-image-gallery  {
    background-image: url(../images/accessories/accessories-banner.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.cover-image-inground-swim-spa  {
	background-image: url(../images/swim-spas/swim-spa-inground.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.cover-image-why-us  {
	background-image: url(../images/why-us-andy-and-christina.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.cover-image-offers  {
    background-image: url(../images/offers.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}



/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carouselImage */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}

/* FEATURETTES
------------------------- */

.featurette-divider {
  margin: 3rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;
}

/* PARALLAX REVIEWS
--------------------------------------------------*/

.parallax {
    /* The image used */
    background-image: url("../images/reviews-background.jpg");

    /* Set a specific height */
    height: 750px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

  } 

/*----------------GALLERY FORM---------------*/
.blueimp-gallery > .description {
  position: absolute;
  width: 300px;
  bottom: 25px;
  left: 10px;
  color: red;
  display: none;
}
.blueimp-gallery-controls > .description {
  display: block;
}



/* BOTTOM FOOTER 
--------------------------------------------------*/


  #bottomNav {
  visibility: hidden;
   }

/* CONTACT FORM STYLING
-------------------------------------------------- */

.form-group {
  max-width: 650px;
}

#fname  {
	opacity: 0;
}




/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {

  /* Bump up size of carousel content */

  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }

}


@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}


@media (max-width: 760px) {

  /* Adjust size of background image & text image for mobile*/
.elitebg {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	background-image: url(../images/mobile-background.jpg);
	background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
 //*animation: mymove 8s reverse;*//
	z-index:-1000;
}

.cover-text {
   top: 50%;
   z-index: 2;

}

.cover-text h3 {
   font-size: 2rem;
   z-index: 2;
}

 .carousel-item h3 {
	 font-size: 1rem;	 
 } 
 
 
  .hovereffect h2 {
  font-size: 25px;
  }
  
  .parallax {
    /* The image used */
    background-image: url("../images/reviews-background-480w.jpg");

    /* Set a specific height */
    height: 750px;
    /* Create the parallax scrolling effect */
    background-attachment: scroll;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


  
  /* Display properties for phone number on mobile*/
  #feature-title  {
	  font-size: 3rem;
  }

  #bottomNav {
  visibility: visible;  
  }
  
  #callUs  {
  display: none;
  }
 
  h1 {
  font-size: 1.5rem;
  }
  
  #special h2 {	   
  font-size: 1rem;
  }
  
  #special  {  	
  height: 20rem;
  top: 3.5rem;
  padding-left: 2rem;
  }
   
  #specialButton {
  transform: scale(.7);
  margin-left: 0;
  }	  
  
 
}

@media (min-width: 768px) {
  .flex-md-equal > * {
    -ms-flex: 1;
    -webkit-box-flex: 1;
    flex: 1;
  }

}