.slider-pro {
    font-family: 'Open Sans', Arial;
}

/* Example 1 */

#example1 .sp-thumbnail {
  width: 100%;
  padding: 8px;
  background-color: #F0F0F0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#example1 .sp-thumbnail-title {
  margin-bottom: 5px;
  text-transform: uppercase;
  color: #333;
}

#example1 .sp-thumbnail-description {
  font-size: 14px;
  color: #333;
}

@media (max-width: 860px) {
  #example1 .hide-medium-screen {
    display: none;
  }
}

@media (max-width: 640px) {
  #example1 .sp-layer {
    font-size: 12px;
  }

  #example1 .hide-small-screen {
    display: none;
  }
}

@media (max-width: 500px) {
  #example1 .sp-thumbnail {
    text-align: center;
  }

  #example1 .sp-thumbnail-title {
    font-size: 12px;
    text-transform: uppercase;
  }

  #example1 .sp-thumbnail-description {
    display: none;
  }
}



/* custom 1 */

#topSlider{
  max-width: 100% !important;
  position: relative;
}

.sp-mask.sp-grab{
  max-height: 600px !important;
  overflow: hidden !important;
}

.sp-mask.sp-grabbing{
  max-height: 600px !important;
  overflow: hidden !important;
}

.sp-thumbnail{
  position: relative;
}

.sp-thumbnail .sp-thumbnail-title{
  position: absolute;
  z-index: 1;
  background-color: #000;
  color: #fff;
  font-size: 11px;
  padding: 3px 10px;
}

.sp-thumbnail img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:after{
  border-bottom: 13px solid #fff;
}

.sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:before{
  border-bottom: 5px solid #fff;
}


@media screen and (max-width:768px) {
  .sp-thumbnail-container{
    height: 80px !important;
  }

  .sp-thumbnail .sp-thumbnail-title{
    display: none;
  }
}