/***************************
MAIN 
***************************/
* {
  font-family: Open Sans, sans-serif;
}

html,body{
    overflow-x: hidden;
}

html {
  scroll-padding-top: 150px;
  scroll-behavior: auto;
}

main {
  margin-top: 150px;
}

@media only screen and (max-width: 1199px) {
	 html {
	  scroll-padding-top: 206px;
	}

	main {
	  margin-top: 206px;
	}
}

@media only screen and (max-width: 320px) {
	 html {
	  scroll-padding-top: 219px;
	}

	main {
	  margin-top: 219px;
	}
}

section {
  padding-bottom: 50px;
}

html a {
  text-decoration: none;
}

figure {
  border-left: 5px solid #eee;
  padding-left: 20px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/***************************
REUSEABLE CLASSES 
***************************/
.responsive-youtube {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
}

.responsive-youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.cal-foy {
  color: #4e5c28;
  text-transform: uppercase;
  font-weight: bolder;
}

.cal-lightblue {
  color: #009ddc;
}

.cal-blue {
  color: #073c79;
}

.cal-blue-h {
  color: #073c79;
  text-transform: uppercase;
  font-weight: bolder;
}

/***************************
BOOTSTRAP CHANGES 
***************************/
.btn-primary {
  background-color: #0055b8;
  /* border-color: #0055B8; */
}

@media only screen and (min-width: 1650px){
	html .d-xxxl-inline {
		display: inline!important;
	}
}


html .container-xxxl {
	display: flex;
	flex-wrap: inherit;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
	width: 100%;
	max-width: 1750px;
}

/***************************
SWIPER CHANGES 
***************************/
.swiper-pagination-bullet-active {
  background-color: #0055b8;
}

/***************************
SCROLLBAR 
***************************/

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #ffffff;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #008fd5;
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #0055b8;
}

/***************************
NAVIGATION 
***************************/

#top-nav {
  background-color: #0052a6;
}

#top-nav a {
  font-size: 14px;
}

#logo {
  margin-bottom: -12px;
  height: 60px;
}

@media screen and (max-width: 1199px) {
	#claspas-logo-center {
		width: 100%;
		text-align: center;
	}
	#logo {
	  margin-bottom: 0px;
	}
}

/* making dropdown items better to navigate*/
.multi-menu > li > .dropdown-item {
  padding: 0.75rem 1rem;
}

.dropdown-divider {
  margin: 0;
}

/* multi dropdown*/
.dropdown:hover > .multi-menu {
  display: block;
  margin-top: 0; /*remove the gap so it doesn't close*/
}


@media (min-width: 1200px) { 
	/* normal drop down */
	.dropdown:hover > .dropdown-menu {
	  display: block;
	  margin-top: 0; /*remove the gap so it doesn't close*/
	}
 }


/* remove border from menu item */
.dropdown-menu {
  border: none;
}

/* styles for multi layer dropdown */
.dropdown-menu li {
  position: relative;
}
.dropdown-menu .dropdown-submenu {
  display: none;
  position: absolute;
  width: 630px;
  border: black solid 2px;
  left: 100%;
}

@media only screen and (max-width: 1000px) {
  .multi-menu .dropdown-submenu {
    display: none !important;
  }
}

.dropdown-menu .dropdown-submenu-left {
  right: 100%;
  left: auto;
}
.dropdown-menu > li:hover > .dropdown-submenu {
  display: block;
}

@media only screen and (min-width: 1000px) {
  .dropdown-menu > li:hover > .dropdown-submenu.patio {
  display: flex !important;
}
}



/* multi nav styles */
.multi-menu ul {
  padding: 20px;
}

.multi-menu h2 {
  color: #0055b8;
  font-size: 20px;
}

.multi-menu ul a {
  padding-left: 0;
}

@media only screen and (max-width: 1200px) {
  #navbarSupportedContent > ul {
    margin-left: 0px;
  }
}

/***************************
HERO BANNER 
***************************/
#hero-banner {
  position: relative;
  z-index: 2;
  padding-bottom: 0px;
  
}

#hero-banner img {
  max-height: 100%;
  object-fit: cover;
}

#hero-banner header {
  position: absolute;
  top: 5%;
  left: 13vw;
  color: #000;
}

#hero-banner #ar-button {
  position: absolute;
  top: 40%;
  left: 70%;
}

@media only screen and (max-width: 1200px) {
	  #hero-banner #ar-button {
	  top: 30%;
	  left: 7vw;
	}
}

@media only screen and (max-width: 700px) {
	  #hero-banner #ar-button {
	  top: 8%;
	  left: 7vw;
	}
}


/***************************
BANNER 
***************************/

.banner img {
  min-height: 200px;
  max-height: 450px;
  width: 100%;
  object-fit: cover;
  object-position: 5% 0;
}

/***************************
SOCIAL SWIPER 
***************************/

.socialSwiper p {
  max-width: 300px;
  /* padding is being used to move pagination down */
  padding-bottom: 20px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: #0052a6;
}

/***************************
SERVICES 
***************************/
/* 
#cal-services h3 {
  color: #02a4d2;
  font-size: 20px;
  margin-bottom: 20px;
}

#cal-services p {
  margin-top: 20px;
  font-size: 16px;
  color: #000;
}

#cal-services .col a {
  border: solid #000 3px;
  display: block;
  padding: 25px;
  max-width: 400px;
  min-height: 400px;
} */

/***************************
HOME 
***************************/

.video-container {
  position: relative;
}

.video-content {
  position: absolute;
  top: 5%;
  left: 10%;
  max-width: 400px;
  padding: 20px;
}

#icon-menu {
  z-index: 5;
  bottom: 20%;
}
#icon-menu a,
#icon-menu div {
  position: relative;
  right: -135px;
  transition: 0.4s;
}

#icon-menu a:hover,
#icon-menu div:hover {
  right: 0px;
}
/***************************
PRODUCT 
***************************/

#product {
  background: url(/calspas-hot-tubs-img/calspas-hot-tubs-portable-swim-spas-for-sale-product-page-bg-1.jpg) fixed;
  background-size: cover;
}

#product-image {
  max-width: 400px;
}

.tab {
  border-bottom: 1px solid #0052A6;
  margin-bottom: 10px;
}

.tab div {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  padding: 14px 16px;
  transition: 0.3s;
  font-weight: bolder;
}

.tab div:hover {
  color: #fff;
  background: #0052A6;
  cursor: pointer;
}

.tab div.active {
  color: #fff;
  background: #0052A6;
}

.tabcontent {
  display: none;
  /* background: url(/calspas-hot-tubs-img/calspas-hot-tubs-portable-swim-spas-for-sale-product-page-bg-1.jpg) fixed; */
  background-size: cover;
  padding: 6px 12px;
  /*height: 985px;*/
  overflow: auto;
}

/* SPECIFICATIONS Tab */

#SPECIFICATIONS td,
#SPECIFICATIONS th {
  border-bottom: 1px solid #073c79;
  padding: 8px;
}

#SPECIFICATIONS tr:hover {
  background-color: #fff;
}

#SPECIFICATIONS td {
  font-weight: 500;
}

/* REVIEWS Tab */

/* https://codepen.io/Founts/pen/AJyVOr?editors=1100 */
.talk-bubble {
  margin: 20px 10px 40px 10px;
  display: inline-block;
  position: relative;
  width: 90%;
  height: auto;
  background-color: #fff;
}
.round {
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
}
.review-border {
  border: 2px solid #073c79;
}

.talktext {
  padding: 1em;
  text-align: left;
  line-height: 1.5em;
}

.tri-right.review-border.btm-left-in:before {
  content: " ";
  position: absolute;
  width: 0;
  height: 0;
  left: 30px;
  right: auto;
  top: auto;
  bottom: -40px;
  border: 20px solid;
  border-color: #073c79 transparent transparent #073c79;
}

.tri-right.btm-left-in:after {
  content: " ";
  position: absolute;
  width: 0;
  height: 0;
  left: 38px;
  right: auto;
  top: auto;
  bottom: -25px;
  border: 15px solid;
  border-color: #fff transparent transparent #fff;
}

#product-feature h3 {
  font-size: 20px;
  margin-bottom: 20px;
}

#product-feature p {
  margin-top: 20px;
  font-size: 16px;
}

#product-feature .col div {
  border: solid #000 2px;
  padding: 25px 25px 0px 25px;
  max-width: 400px;
  min-height: 600px;
}

/***************************
CATEGORY 
***************************/

#category .col > div {
  max-width: 400px;
  margin-bottom: 50px;
}

#category h3 {
  margin: 20px 0;
}

/* #category_woptions {
  max-width: 200px;
} */

/***************************
VIEW ALL SPAS 
***************************/

#view-all-spas .col > div {
  max-width: 400px;
  margin-bottom: 50px;
}

#view-all-spas h3 {
  margin: 20px 0;
}

#view-all-spas-nav {
  width: 225px;
  right: 0;
  top: 30%;
  z-index: 9898;
}

#view-all-spas-nav a {
  display: block;
  padding: 8px 10px;
  margin: 5px 0;
  background-color: #073c79;
  font-weight: bold;
  color: #fff;
}

#view-all-spas-nav a:hover {
  color: #009ddc;
}

/***************************
STEPS 
***************************/

#cal-steps .col > div {
  max-width: 300px;
  margin-bottom: 50px;
}

#cal-steps h3 {
  margin: 20px 0;
}

/***************************
WHY CAL SPAS 
***************************/

#why-cal-spas section img {
  width: 100%;
}

@media only screen and (max-width: 1000px) {
  #why-cal-spas section img {
    margin-bottom: 30px;
  }
}

#why-cal-spas h2 {
  font-size: 38px;
  margin: 20px 0 50px;
}

#why-cal-spas p {
  font-size: 20px;
}

/***************************
OWNERS MANUALS
***************************/

#owners-manuals a {
  color: #073c79;
  line-height: 23px;
}

/***************************
COMPANY OVERVIEW
***************************/

@media only screen and (max-width: 1000px) {
  #company-overview img {
    display: none;
  }
}

#company-overview span {
  font-weight: bolder;
}

/***************************
FOUNTAIN OF YOUTH
***************************/

@media only screen and (min-width: 1000px) {
  .foy-img-text {
    position: relative;
  }

  .foy-left {
    position: absolute;
    top: 25%;
    left: 0px;
    color: #fff;
    background-color: rgba(168, 191, 109, 0.78);
    padding: 20px;
    max-width: 60%;
  }

  .foy-left h2 {
    color: #fff;
  }

  .foy-right {
    position: absolute;
    top: 25%;
    right: 0px;
    text-align: end;
    padding: 20px 0px 20px 20px;
    max-width: 60%;
  }
}

/***************************
SALT FILTER
***************************/

#salt-filter .border {
  min-height: 380px;
  margin-bottom: 20px;
}

/***************************
SITEMAP
***************************/
#sitemap h3,
#sitemap h2 {
  color: #009ddc;
}

#sitemap ul {
  list-style-type: none;
}

#sitemap a {
  color: #073c79;
}

/***************************
CAL METRO 
***************************/
#cal-metro .row > .col {
  min-height: 425px;
}

#cal-metro .row > .col > a > img {
  height: 150px;
}

/***************************
STEPS  
***************************/
#steps .row > .col {
  min-height: 455px;
}

#steps .row > .col > a > img {
  max-height: 150px;
  max-width: 100%;
}

/***************************
Other Accessories  
***************************/
#accessories .row > .col {
  min-height: 640px;
}

#accessories .row > .col img {
  height: 150px;
}

.thumbImageChange > img {
  max-width: 75px; 
  max-height: 48.48px;
  margin-right: 5px;
  border: solid #808080 1px;
}

/***************************
VIDEOS 
***************************/

#videos .overlay-container {
  position: relative;
}

#videos img {
  display: block;
  width: 100%;
  height: auto;
}

#videos .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 0.5s ease;
  background-color: rgba(0, 0, 0, 0.5);
}

#videos .overlay-container:hover .overlay {
  opacity: 1;
}

/***************************
BLOG  
***************************/

#blog-nav #blog-active {
  background-color: #0055b8;
  color: #fff;
}

#blog-nav a {
  color: #000;
  font-size: 20px;
  font-weight: bold;
  padding: 20px 10px;
}

#blog-nav a:hover {
  background-color: #0055b8;
  color: #fff;
}

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

footer {
  border-top: solid 30px #0055b8;
}

#footer-nav h4 {
  margin-bottom: 20px;
}

#footer-nav ul {
  list-style: none;
  padding: 0;
}

#footer-nav a {
  color: #fff;
}
#footer-nav a:hover {
  color: #0055b8;
}

#footer-icons img {
  max-width: 100px;
}

@media only screen and (min-width: 1200px) {
  #footer-nav .col:not(:first-child) {
    border-left: solid 1px #fff;
  }
}

@media only screen and (max-width: 1200px) {
  #footer-nav .col {
    padding-bottom: 20px;
  }
}

/***************************
TEST Headers
***************************/

#dealer-locator {
	max-width: 90%;
	margin: 0 auto;
	
}

/* black trans  */
/* #hero-banner header {
  padding: 20px;
  color: white;
  border-radius: 25px;
  background: rgba(0, 0, 0, 0.7);
  transform: skewX(-10deg);
} */

/* graditent right  */
/* #hero-banner header {
  padding: 20px;
  color: white;
  border-radius: 25px;
  background: rgb(255, 255, 255);
  background: linear-gradient(
    287deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(0, 85, 184, 1) 100%
  );
} */

/* graditent top left  */
/* #hero-banner header {
  padding: 20px;
  border-radius: 25px;
  color: #fff;
  background: linear-gradient(
    340deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(0, 85, 184, 1) 100%
  );
  transform: skewX(-10deg);
} */

/**** NEW ADDING ********/
@media only screen and (max-width: 766px) {
  .brochureform {
    height: 1300px;
  }
  .quoteform {
    height: 1300px;
  }
  .dealerform {
    height: 1250px;
  }
  .tradeform {
    height: 1500px;
  }
  .contactform {
    height: 1300px;
  }
   .designform {
    height: 1650px;
  }
}
@media only screen and (min-width: 767px) and (max-width: 1100px) {
  .brochureform {
    height: 750px;
  }
  .quoteform {
    height: 750px;
  }
  .dealerform {
    height: 1250px;
  }
  .tradeform {
    height: 1500px;
  }
  .contactform {
    height: 1300px;
  }
   .designform {
    height: 1650px;
  }
}

@media only screen and (min-width: 1101px) {
  .brochureform {
    height: 750px;
  }
  .quoteform {
    height: 750px;
  }
  .dealerform {
    height: 1000px;
  }
  .tradeform {
    height: 850px;
  }
  .contactform {
    height: 650px;
  }
   .designform {
    height: 1050px;
  }
}
/***************************
ANIMATIONS
***************************/
#hero-banner #new-model-img {
  position: absolute;
  top: 8%;
  left: 60%;
}
#hero-banner #new-model-img img {
  width: 83%;
}


#hero-banner #chill-star {
	position: absolute;
	top: 8%;
	left: 74%;
	animation: pulse 2s infinite;
	width: 180px;
}

@keyframes pulse {
  0% {
	transform: scale(0.95);
  }

  50% {
	transform: scale(1.1);
  }

  100% {
	transform: scale(0.95);
  }
}


#spa-picker {
        background-color: #f5f5f5;
        min-height: 100vh;
      }
      .spa-option {
        background-color: #fff;
      }
      .option {
        cursor: pointer;
        max-width: 50px;
      }
      .option:hover {
        background-color: #f5f5f5;
      }

	.option1 {
        cursor: pointer;
        
      }
	  .option1 img{
        max-width: 50px;
        
      }
	  
	   .option1 p , .option p{
        font-size: 13px;
        
      }
	  
      .option1:hover {
        background-color: #f5f5f5;
      }
     .product-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}

.thumbnail-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: 500px;
}

.thumbnail-container:empty {
    display: none !important;
}



.thumbnail-image {
    flex: 0 0 auto;
    transition: transform 0.3s ease;
    width: 75px;
    height: 75px;
    margin: 5px;
    border: black 2px solid;
}

    .thumbnail-image:hover {
        transform: scale(1.1);
        cursor: pointer;
    }
	.color-box {
		
		cursor: pointer;
	}
	
	.color-box img {
    border: transparent 3px solid;
}
	
	.color-box img:hover {
    border: #178ff5 3px solid;
}

.color-box.active img {
    border: red 3px solid;
}
	
#shellLayer {
    position: absolute;
    top: 0;    
    left: 0;   
    
    
}
#cabLayer {
    position: absolute;
    top: 0;    
    left: 0;   
    
    
}
#cornerLayer {
    position: absolute;
    top: 0;    
    left: 0;   
    
    
}