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

.sliderpro-wrapper {
  padding: 5px;
  border-top-left-radius: 0;
  margin:0;
}

/*Issue: when slider pro is located inside the Bootstrap tab-content, 
the slider doesn't resize properly inside the tab-content!
Solution:; Boostrap has this css code * {box-sizing: border-box},
so we need to override the code for slider */

.slider-pro,
.slider-pro * {
  box-sizing: content-box;
}


#easylist-item-details .sliderpro-wrapper{
  max-height: 495px;
  overflow:hidden;
}

#easylist-item-details .sp-thumbnails {
  width: 80px;
  max-height: 480px;
}

/*Ad Detail SliderPro*/

#easylist-sliderpro .sp-thumbnail-image-container {
  width: 90px;
  height: 68px;
  overflow: hidden;
  float: left;
}

#easylist-sliderpro .sp-thumbnail-image {
  height: 100%;
  width:100%;
}

#easylist-sliderpro .sp-thumbnail-text {
  width: 170px;
  float: right;
  padding: 8px;
  background-color: #F0F0F0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

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

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

@media (max-width: 500px) {
  #easylist-sliderpro .sp-thumbnail {
    text-align: center;
  }
  #easylist-sliderpro .sp-thumbnail-text {
    width: 120px;
  }
  #easylist-sliderpro .sp-thumbnail-title {
    font-size: 12px;
    text-transform: uppercase;
  }
  #easylist-sliderpro .sp-thumbnail-description {
    display: none;
  }
}

/*Homepage SliderPro*/

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

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

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

#esylist-search-sliderpro .sp-buttons {
  position: absolute;
  bottom: 10px;
  text-align: right;
  right: 10px;
}

#esylist-search-sliderpro .sp-buttons .sp-button {
  width: 5px!important;
  height: 5px!important;
}

@media (max-width: 860px) {
  #easylist-item-details .sliderpro-wrapper{
    max-height: 695px!important;
    overflow:hidden;
  }
  #esylist-search-sliderpro .hide-medium-screen {
    display: none;
  }
  #easylist-sliderpro .sp-thumbnail-image-container {
    width: 100px;
    height: 71px;
  }
  #easylist-item-details .sliderpro-wrapper{
    max-height: auto;
  }
  #easylist-item-details .sp-thumbnails {
    width: auto;
    max-height: auto;
  }
}

@media (max-width: 640px) {
  #esylist-search-sliderpro .sp-layer {
    font-size: 12px;
  }
  #esylist-search-sliderpro .hide-small-screen {
    display: none;
  }
}

@media (max-width: 500px) {
  #esylist-search-sliderpro .sp-thumbnail {
    text-align: center;
  }
  #esylist-search-sliderpro .sp-thumbnail-title {
    font-size: 12px;
    text-transform: uppercase;
  }
  #esylist-search-sliderpro .sp-thumbnail-description {
    display: none;
  }
}

@media (max-width: 460px) {
  #esylist-search-sliderpro .sp-buttons {
    display: none;
  }
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {  
  #esylist-search-sliderpro {
    max-width:710px!important;
    max-height:533px;
  }
}

@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : landscape) {
   #esylist-search-sliderpro {
    max-width:700px!important;
    max-height:525px;
  }
}



















/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */