/**
 * @file
 * Visual styles for Startup Growth's hero video banner.
 */
 .video-banner {
  position: relative;
  margin-top:15px;
 }
 .video-banner .col-md-12 {
  padding-left:0;
  padding-right:0;
 }
 .overlay-section {
  position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    padding:20px 20px 20px 200px;
 }
 .overlay-content-section h2 {
  color:#fff;
 }
 .overlay-content-section p {
  color:#fff;
 }
 .overlay-content-section .hero-button, .overlay-logo-section .hero-button {
  display: block;
    padding: 10px 6px;
    border-radius: 30px;
    border: 1px solid #aaa;
    background-color: #aaa;
    color: #1c1c1c;
    min-width: 200px;
    text-align: center;
    width: fit-content;
    margin-top: 40px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight:bold;
 }
 .overlay-content-section .hero-button:hover, .overlay-logo-section .hero-button:hover {
  background-color: transparent;
  color: #fff;
 }

 div.hero-video-carousel .tp-bullets .tp-bullet {
  background-color: #1c1c1c;
  border:2px solid #1c1c1c;
 }
 div.hero-video-carousel .tp-bullets .tp-bullet.selected {
  border:2px solid #1c1c1c;
  background-color: transparent;
 }
 div.hero-video-carousel .tparrows {
  color:#1c1c1c;
  background-color: transparent;
 }

 div.hero-video-carousel .tparrows:before {
  color:#fff !important;
 }
.overlay-section.overlay-mobile {
  display:none;
}
.overlay-section.overlay-desktop {
  display:flex;
}
 @media (min-width:768px) and (max-width:991px) {
  .overlay-section {
    padding-left:40px;
    width:45%;
  }
}
 @media (max-width:767px) {
  div.slideshow-hero-video-banner, div.hero-video-carousel {
    height: 500px !important;
  }
  div.hero-video-carousel li div.slotholder {
    position: relative !important;
  }
  div.hero-video-carousel li.slide-with-overlay div.slotholder {
     height:50% !important;
  }
  .overlay-section {
    position:relative;
    width: 100%;
    height:50%;
    padding-left:20px;
    /*background-color: #1c1c1c;*/
  }
  .overlay-section.overlay-mobile {
    display:flex;
  }
  .overlay-section.overlay-desktop {
    display:none;
  }
  .overlay-content-section h2 {
    margin:0;
    font-size:28px;
  }
  .overlay-content-section .hero-button {
    margin-top:15px;
  }
  .overlay-logo-section .hero-button {
    margin-top:30px;
  }
  div.hero-video-carousel .tp-bullets .tp-bullet {
    background-color: #fff;
    border:2px solid #fff;
   }
   div.hero-video-carousel .tp-bullets .tp-bullet.selected {
    border:1px solid #fff;
    background-color: transparent;
   }
 }