@charset "utf-8";

/* Hero jumbotron and video - ensure visible (override any legacy CSS) */
section.jumbotron.jumbotron-fluid {
  display: block !important;
  width: 100%;
  margin-bottom: 0;
}
section.jumbotron .embed-responsive.embed-responsive-16by9 {
  display: block !important;
  position: relative;
  width: 100%;
  padding: 0;
  overflow: hidden;
}
section.jumbotron .embed-responsive-16by9::before {
  display: block !important;
  content: "" !important;
  padding-top: 56.25% !important;
}
section.jumbotron .embed-responsive-16by9 iframe {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

#products{padding:0}
#productControls{margin-left:5pt;margin-bottom:10pt}
#products .imageheader{background:-webkit-linear-gradient(top,transparent,transparent),url(../images/backgrounds/swimming.jpg);background:linear-gradient(180deg,transparent,transparent),url(../images/backgrounds/swimming.jpg);background-repeat:no-repeat;background-position:center center;background-size:cover;height:100vh;max-height:auto}
#products .product-list{padding:0;margin:0;list-style:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap}
#products .product-list .product-item{position:relative;color:#fff;overflow:hidden;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out;opacity:.8}
#products .product-list .product-item .product-name{background:#549bff;color:#fff;font-weight:700;font-size:120%;text-align:center;position:absolute;bottom:0;width:100%;display:none;padding:5px 0}
#products .product-list .product-item:focus .product-name,#products .product-list .product-item:hover .product-name{display:block}
#products .product-list .product-item:focus,#products .product-list .product-item:hover{opacity:1;-webkit-transform:scale(1.3);transform:scale(1.3);z-index:1}
#products .product-list .product-item:focus .product-name,#products .product-list .product-item:hover .product-name{display:block;-webkit-animation:a 1s;animation:a 1s}

/* VP page layout: banner, title, steps, thumbnails container */
.vpbanner{overflow:hidden;margin:1rem 0}
.vpbanner::after{content:"";display:table;clear:both}
.vpbanner-left{float:left;width:180px;text-align:center}
.vpbanner-center{float:left;width:calc(100% - 400px);min-width:200px;text-align:center;padding:0 1rem}
.vpbanner-right{float:right;width:220px;padding-top:5px}
.exampleTitle{font-weight:700;font-size:1.75rem;margin:0.5rem 0;text-align:center;color:#FFA319}
.clearSpace{clear:both;height:1rem}
#threehundred{font-size:1.5rem;font-weight:700;text-align:center;margin:1rem 0;color:#1981FF}
.step{overflow:hidden;margin:1rem 0}
.step::after{content:"";display:table;clear:both}
#step-top-text{font-size:1.25rem;font-weight:700;text-align:center;margin-bottom:0.5rem}
.step-left{float:left;width:33%;padding-right:1rem}
.step-right{float:left;width:67%}
.step ul{margin:0;padding-left:1.25rem}
.examples{margin:1rem 0;clear:both}
#products .product-list .product-item{flex:0 0 33.333%;max-width:33.333%;padding:0.5rem;box-sizing:border-box}
#products .product-list .product-item img{width:100%;height:auto;display:block}
@media (max-width: 767px){
.vpbanner-left,.vpbanner-center,.vpbanner-right{float:none;width:100%;margin-bottom:1rem}
.step-left,.step-right{float:none;width:100%}
#products .product-list .product-item{flex:0 0 50%;max-width:50%}
}
@media (max-width: 480px){
#products .product-list .product-item{flex:0 0 100%;max-width:100%}
}