/**
 * @file
 * Visual styles for Startup Growth's hero image banner.
 */
 .image-banner {
  position: relative;
  margin-top:15px;
}
.image-banner .col-md-12 {
  padding-left:0;
  padding-right:0;
}

.logo-image{
width:250px;
height:auto;	 
}

.tp-bgimg.defaultimg {
  background-position:bottom center !important;
}

.overlay-section-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  display: flex;
  align-items: center;
  padding:20px 20px 20px 100px;
}
.overlay-section-image.overlay-section-mobile {
display:none;
}
.overlay-section-image.overlay-section-desktop {
display:flex;
}
.overlay-section-image.overlay-1 {
background-color: rgba(0,0,0,0.5);
}
.overlay-content-section-image h2 {
margin:0 0 25px 0;
  font-size:28px;
}

.overlay-content-section-image .descp{
font-size: 14px;
}
.overlay-content-section-image .hero-button-image-main, .overlay-logo-section-image .hero-button-image-main {
display: block;
padding: 10px 6px;
border-radius: 30px;
width: 200px;
text-align: center;
width: fit-content;
margin-top: 0px;
font-size: 12px;
text-transform: uppercase;
font-weight:bold;
border: 1px solid #aaa;
background-color: #aaa;
color: #fff;
}
.overlay-section-image .hero-button-image-main:hover {
border: 1px solid #fff;
background-color:transparent;
color: #fff;	
}

.overlay-section-image.black h2, .overlay-section-image.black .descp {
color:#1c1c1c;
}
.overlay-section-image.white h2, .overlay-section-image.white .descp {
color:#fff;
}
.overlay-section-image.black .hero-button-image-main {
border: 1px solid #aaa;
background-color: #aaa;
color: #1c1c1c;
}
.overlay-section-image.black .hero-button-image-main:hover {
border: 1px solid #1c1c1c;
background-color:transparent;
color: #1c1c1c;
}
.overlay-section-image.black .hero-button-image-main {
color: #1c1c1c;
border: 1px solid #aaa;
background-color: #aaa;
}

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

div.hero-image-carousel .tparrows {
color:#1c1c1c;
background-color: transparent;
}

div.hero-image-carousel .tparrows:before {
color:#1c1c1c !important;
}

div.hero-image-carousel .tparrows.tp-arrows-black:before {
color:#1c1c1c !important;
}
div.hero-image-carousel .tparrows.tp-arrows-white:before {
color:#fff !important;
}
div.hero-image-carousel .tp-bullets.tp-bullets-black .tp-bullet {
background-color: #1c1c1c;
border:2px solid #1c1c1c;
}
div.hero-image-carousel .tp-bullets.tp-bullets-black .tp-bullet.selected {
border:2px solid #1c1c1c;
background-color: transparent;
}
div.hero-image-carousel .tp-bullets.tp-bullets-white .tp-bullet {
background-color: #fff;
border:2px solid #fff;
}
div.hero-image-carousel .tp-bullets.tp-bullets-white .tp-bullet.selected {
border:2px solid #fff;
background-color: transparent;
}
@media (min-width:768px) and (max-width:991px) {
.overlay-section-image {
  padding-left:40px;
  width:45%;
}
}
@media (max-width:767px) {
div.slideshow-hero-image-banner,div.rev_slider {
  height: 500px !important;
}
div.hero-image-carousel li div.slotholder {
  position: relative !important;
  object-fit: cover;
  
}
div.hero-image-carousel li.slide-with-overlay div.slotholder {
  height:40% !important;
}

.overlay-section-image {
  position:absolute;
  top:40%;
  height:60%;
  padding:10px 20px;
  width:100%;
  left: 0 !important;
}

.overlay-section-image.overlay-section-mobile {
  display:flex;
}
.overlay-section-image.overlay-section-desktop {
  display:none;
}

.logo-image{
width: 180px; 
}
.tparrows{
 top: 40%;
}

 div.hero-image-carousel li .overlay-section-image .logo-section, div.hero-image-carousel li .overlay-caption-image h2 {
  margin-bottom:15px;
}
.path-frontpage {
  div.hero-image-carousel li .overlay-section-image h2 {
    font-size:30px;
    margin-bottom:15px;
   }

}
 div.hero-image-carousel li .overlay-section-image div.descp {
  font-size: 12px;
 }
 div.hero-image-carousel li .overlay-section-image h2 {
  font-size:24px;
  margin-bottom:15px;
 }
 div.hero-image-carousel li .overlay-section-image .hero-button-image-main {
  margin-top:15px !important;
 }
 div.hero-image-carousel .tparrows.tp-leftarrow {
  top:40%;
  left:-5%;
 }
 div.hero-image-carousel .tparrows.tp-rightarrow {
  top:40%;
  left:105%;
 }
 div.hero-image-carousel .tp-bullets {
  top:102% !important;
 }
}