.slider-pro { font-family: 'Open Sans', sans-serif; } /* 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: #00d1b2; font-family: 'Oswald', sans-serif; font-weight: 600; } #example1 .sp-thumbnail-description { font-size: 14px; color: #333; } @media (max-width: 860px) { #example1 .hide-medium-screen { display: none; } #example5 .sp-thumbnail-image-container { width: 100px; height: 62px!important; overflow: hidden; float: left; } } @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; } } /* Example 3 */ #example3 .sp-selected-thumbnail { border: 4px solid #000; } /* Example 4 */ #example4 .sp-slides-container { background-color: #F4F4F4; } #example4 h3 { margin: 0 0 10px 0; } #example4 p { margin: 0 0 30px 0; } #example4 .sp-thumbnail-container { width: 200px; height: 130px; overflow: hidden; margin-bottom: 10px; } #example4 .sp-image-text { background: rgba( 80, 80, 80, 0.5 ); color: #FFF; padding: 20px; } .links { text-align: center; margin-top: 10px; } /* Example 5 */ #example5 .sp-thumbnail-image-container { width: 100px; height: 80px; overflow: hidden; float: left; } #example5 .sp-thumbnail-image { height: 100%; } #example5 .sp-thumbnail-text { width: 170px; float: right; padding: 8px; background-color: #F0F0F0; -moz-box-sizing: border-box; box-sizing: border-box; } #example5 .sp-thumbnail-title { margin-bottom: 4px; /*text-transform: uppercase;*/ color: #ae4b84; font-weight: 400; font-family: 'Oswald', sans-serif; /*letter-spacing: 2px;*/ } #example5 .sp-thumbnail-description { font-size: 13px; color: #6d6969; /*letter-spacing: 1px;*/ } @media (max-width: 500px) { #example5 .sp-thumbnail { text-align: center; } #example5 .sp-thumbnail-image-container { display: none; } #example5 .sp-thumbnail-text { width: 120px; } #example5 .sp-thumbnail-title { font-size: 12px; text-transform: uppercase; } #example5 .sp-thumbnail-description { display: none; } }