.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; } } /* Example 3 */ .example3 .sp-thumbnails-container { margin-top: 4px; } .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: 5px; text-transform: uppercase; color: #333; } .example5 .sp-thumbnail-description { font-size: 14px; color: #333; } @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; } }