/* You can type here any CSS code that will be loaded both on your admin and front-end pages.
Let us help you by giving a few exmaple CSS classes: */

/* Front-end sliders & preview */

.ls-container { /* The slider itself */

}

.ls-slide { 

}

.ls-slide #yourID {

}

.ls-slide .yourClass {

}

/* Side color of 3D objects */
.ls-3d-box div { background: #777; }

/* Hotfix for titles in thumbnails */
#layerslider_3 .ls-thumbnail {
  top: auto;
}

#layerslider_3 .ls-thumbnail-inner {
  padding-top: 0;
}

.ls-thumbnail-wrapper  span.ls-hotfix-slidetitle {
    position: absolute;
    color: white;
    left: 0px;
    top: calc(50% - 10px);
    text-align: center;
    width: 100%;
    font-size: 1.1em;
    font-family: "Open Sans";
    font-weight: bold;
}

#layerslider_3 .ls-thumbnail-slide {
    background-color: #00703c;
    height: 60px !important;
}

#layerslider_3 .ls-thumbnail-slide a {
    transition: background-color 1s ease-in-out;
    height: 60px !important;
}

#layerslider_3 .ls-thumbnail-slide .ls-hotfix-active {
    background-color: #006435;
}

#layerslider_3 .sliderContentContainer p {
  white-space: initial !important;
}

#layerslider_3 .ls-slide .ls-bg {
  object-fit: contain;
}

/* Responsive */
@media (max-width: 768px) {
  .page-id-18054 .ls-wp-fullwidth-container,
  .page-id-18054 .ls-wp-fullwidth-helper {
    height: 355px !important;
  }

  #layerslider_3 .ls-inner,
  #layerslider_3 .ls-slide  {
    height: 165px !important;
  }

  #layerslider_3 .ls-slide .ls-bg,
  #layerslider_3 .ls-slide.ls-animating .ls-bg {
    height: 100% !important;
    width: 100% !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    object-fit: cover;
  }

  #layerslider_3 .ls-slide .ls-l {
    padding: 0 !important;
    width: 100% !important;
  }

  #layerslider_3 .sliderContentContainer h1 {
    margin-bottom: 0;
  }

  #layerslider_3 .sliderContentContainer p {
    font-size: 10px;
  }

  #layerslider_3 .sliderContentContainer .button {
    padding: 9px 15px;
  }

  #layerslider_3 .ls-nav-next,
  #layerslider_3 .ls-nav-prev {
    display: none;
  }

  #layerslider_3 .ls-thumbnail {
    width: 100% !important;
  }

  #layerslider_3 .ls-thumbnail-slide {
    width: 100%;
  }

  #layerslider_3 .ls-thumbnail-slide a {
    width: 100% !important;
    display: block;
  }

  #layerslider_3 .ls-thumbnail-slide {
    height: auto !important;
  }

  #layerslider_3 .ls-thumbnail-slide a {
    height: 45px !important;
  }

  #layerslider_3 .ls-thumbnail-slide .ls-hotfix-slidetitle {
    font-size: 15px;
  }
}