html, body { height: 100%; } #simple-slider { overflow: hidden; position: relative; width: 100%; height: 100%; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; background-color: black; } .simple-slide { background-position: center center; background-repeat: no-repeat; position: absolute; width: 100%!important; height: 100%!important; top: 0; z-index: 1; opacity: 0; -ms-filter: ‘alpha(opacity=0)’; -webkit-background-size: cover!important; -moz-background-size: cover!important; -o-background-size: cover!important; background-size: cover!important; } .simple-slide-content-wrapper { height: 100%; } .simple-slide-content { padding: 35px; position: relative; width: 650px; text-align: center; top: 35%; margin: 0 auto; border: 10px solid rgba(255, 255, 255, 0.3); } .simple-slide-content h2 { color: white!important; font-size: 80px; font-weight: 800; letter-spacing: -0.06em; margin: 10px; text-align: center; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5); text-transform: uppercase; } .simple-slide-content p { color: white!important; font-size: 28px; font-weight: 300; line-height: 1.4em; margin: 0; text-align: center; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5); text-transform: none; } .fader_controls .prev, .fader_controls .next { position: absolute; height: 80px; line-height: 55px; width: 50px; font-size: 100px; text-align: center; color: #fff; top: 50%; left: 0; z-index: 4; margin-top: -25px; cursor: pointer; opacity: .7; transition: all 150ms; } .fader_controls .prev:hover, .fader_controls .next:hover { opacity: 1; } .fader_controls .next { left: auto; right: 0; } .pager-list { position: absolute; width: 100%; height: 40px; line-height: 40px; bottom: 0; text-align: center; z-index: 4; padding: 0; margin: 0; } .pager-list li { display: inline-block; width: 15px; height: 15px; margin: 0 7px; background: #fff; opacity: .7; text-indent: -9999px; border-radius: 999px; cursor: pointer; transition: all 150ms; } .pager-list li:hover, .pager-list li.active { opacity: 1; } @media screen and (max-width: 1160px) { .simple-slide-content { bottom: 0; padding: 50px 0; } .simple-slide-content h2, .simple-slide-content p { text-align: center; } .simple-slide-content a.button { margin-top: 30px; float: none; } } @media screen and (max-width: 960px) { #simple-slider { margin-top: -60px; } .simple-slide { padding: 0; } #simple-slider .fader_controls { display: none; } } @media screen and (max-width: 680px) { .simple-slide-content { width: 100%; margin-left: 0; left: inherit; height: auto; } .simple-slide-content h2, .simple-slide-content p { font-size: 20px; } }