/**
 * @file
 * Visual styles for Startup Growth's product image banner.
 */

 div.product-image-carousel li div.slotholder div.tp-bgimg {
  width:55% !important;
  background-position: bottom center !important;
  
 }
 div.product-image-carousel li.banner-slide-left div.slotholder div.tp-bgimg {
  margin-left:45% !important;
 }
 div.product-image-carousel li.banner-slide-right div.slotholder div.tp-bgimg {
  margin-right:45% !important;
 }
 
 div.product-image-carousel li .overlay-caption {
  width:45%;
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  padding:2% 8%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  color:#1c1c1c;
 }

 div.product-image-carousel li.banner-slide-right .overlay-caption {
    right:0;
    left:55%;
 }
 div.product-image-carousel li .overlay-caption.slide-bg-white {
  background-color: #fff;
  color:#1c1c1c;
 }
 div.product-image-carousel li .overlay-caption.slide-bg-black {
  background-color: #1c1c1c;
  color:#fff;
 }
 div.product-image-carousel li .overlay-caption .logo-section img { 
  width: 225px;
  height: auto;
  top: 0;
 }
 div.product-image-carousel li .overlay-caption .logo-section {
  margin-bottom: 25px;
 }
 div.product-image-carousel li .overlay-caption h2 {
  margin:0 0 25px 0;
  font-size:28px;
 }
 div.product-image-carousel li .overlay-caption div.description {
  font-size:14px;
 }
 div.product-image-carousel li .overlay-caption .prod-banner-button {
  display: block;
  padding: 10px 6px;
  border-radius: 30px;
  border: 1px solid #1c1c1c;
  background-color: #1c1c1c;
  color: #fff;
  min-width: 200px;
  text-align: center;
  width: fit-content;
  margin-top: 40px;
  font-size: 12px;
  text-transform: uppercase;
  font-weight:bold;
 }
 div.product-image-carousel li .overlay-caption .prod-banner-button:hover {
  background-color: transparent;
  color: #1c1c1c;
 }
 div.product-image-carousel li .overlay-caption.slide-bg-black .prod-banner-button {
  border: 1px solid #aaa;
  background-color: #aaa;
  color: #1c1c1c;
 }
 div.product-image-carousel li .overlay-caption.slide-bg-black .prod-banner-button:hover {
  background-color: transparent;
  color:#aaa;
 }
 div.product-image-carousel .tparrows {
  color:#1c1c1c;
  background-color: transparent;
 }

 div.product-image-carousel .tparrows.tp-arrows-black:before {
  color:#1c1c1c !important;
 }
 div.product-image-carousel .tparrows.tp-arrows-white:before {
  color:#fff !important;
 }
 div.product-image-carousel .tp-bullets.tp-bullets-black .tp-bullet {
  background-color: #1c1c1c;
  border:2px solid #1c1c1c;
 }
 div.product-image-carousel .tp-bullets.tp-bullets-black .tp-bullet.selected {
  border:2px solid #1c1c1c;
  background-color: transparent;
 }
 div.product-image-carousel .tp-bullets.tp-bullets-white .tp-bullet {
  background-color: #fff;
  border:2px solid #fff;
 }
 div.product-image-carousel .tp-bullets.tp-bullets-white .tp-bullet.selected {
  border:2px solid #fff;
  background-color: transparent;
 }

 @media (max-width:768px) {
  div.slideshow-product-image-banner, div.product-image-carousel {
    height: 550px !important;
  }
  div.product-image-carousel div.slotholder {
    height:40% !important;
  }
  div.product-image-carousel li .overlay-caption .logo-section img { 
    width: 150px;
   }
  div.product-image-carousel div.overlay-caption {
    position:absolute;
    top:40%;
    height:60%;
    padding:10px 20px;
    width:100%;
    left: 0 !important;
  }
  div.product-image-carousel li .overlay-caption .logo-section, div.product-image-carousel li .overlay-caption h2, div.product-image-carousel li .overlay-caption .prod-banner-button {
    margin-bottom:15px;
  }
  div.product-image-carousel li div.slotholder div.tp-bgimg, div.product-image-carousel li.banner-slide-left div.slotholder div.tp-bgimg, div.product-image-carousel li.banner-slide-right div.slotholder div.tp-bgimg {
    width:100% !important;
    margin:0 !important;
   }
   div.product-image-carousel li .overlay-caption div.description {
    font-size: 12px;
   }
   div.product-image-carousel li .overlay-caption h2 {
    font-size:24px;
   }
   div.product-image-carousel li .overlay-caption .prod-banner-button {
    margin-top:20px !important;
   }
   div.product-image-carousel .tparrows.tp-leftarrow {
    top:40% !important;
    left:-5% !important;
   }
   div.product-image-carousel .tparrows.tp-rightarrow {
    top:40% !important;
    left:105% !important;
   }
   div.product-image-carousel .tp-bullets {
    top:103% !important;
   }
 }