/* Prepare for the slider. */ .fullscreen-slider { .wrapper { position: relative; } #masthead { position: absolute; top: 0; z-index: 999; } #content { max-height: 100%; min-height: 100%; max-width: 100%; min-width: 100%; display: block; height: 100vh; width: 100vw; padding: 0; margin: 0; } #colophon { position: absolute; bottom: 0; margin-top: 0; z-index: 999; } #colophon .container { margin: 0 1em; width: auto; max-width: 100%; } } /* Reset slider. */ .flexslider, .featured-posts, .featured, .featured a { margin: 0; padding: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; overflow: hidden; position: relative; } .flex-container a:hover, .flex-slider a:hover, .flex-container a:focus, .flex-slider a:focus { outline: none; } .slides, .slides > li, .flex-control-nav, .flex-direction-nav { margin: 0; padding: 0; list-style: none; } .flex-pauseplay span { text-transform: capitalize; } /* Responsive slider images. */ .featured { background-size: cover!important; background-repeat: no-repeat!important; background-position: center!important; } /* Base styles. */ .flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; } .flexslider .slides img { width: 100%; display: block; } html[xmlns] .flexslider .slides { display: block; } * html .flexslider .slides { height: 1%; } .flex-direction-nav { *height: 0; } .flex-direction-nav a { overflow: hidden; text-decoration: none; display: block; width: 40px; height: 40px; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: $color__slider-navigation-arrows; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .flex-direction-nav a:before { font-family: "Genericons"; font-size: 40px; display: inline-block; content: '\f430'; color: $color__slider-navigation-arrows; } .flex-direction-nav a.flex-next:before { content: '\f429'; } .flex-direction-nav .flex-prev { left: -5rem; } .flex-direction-nav .flex-next { right: -5rem; text-align: right; } .flexslider:hover .flex-direction-nav .flex-prev { opacity: 0.8; left: 1rem; } .flexslider:hover .flex-direction-nav .flex-prev:hover { opacity: 1; } .flexslider:hover .flex-direction-nav .flex-next { opacity: 0.8; right: 1rem; } .flexslider:hover .flex-direction-nav .flex-next:hover { opacity: 1; } .flex-viewport { height: 100%; transition: all 1s ease; } ul.slides { max-width: none; } /* Slide post content. */ .featured-hentry-wrap { position: absolute; bottom: 10rem; margin: 0 1rem; } .slider-header, .slider-excerpt, .slider-link { max-width: 620px; max-width: 35.625rem; margin: 1rem 0; } .slider-header h2 a, .slider-excerpt p, .slider-link a { padding: 0.25em 0.5em; background: $color__background-slider-content; } .slider-excerpt, .slider-link { @include font-size(0.875); } .slider-excerpt { display: none; // Hide on small screens. } /* Slide post content on slides with slide animation. */ .featured-hentry-wrap.slide-animation { opacity: 0; transform: translate(-800px,0); transition: all 1s ease-in-out; } .flex-active-slide .featured-hentry-wrap.slide-animation { opacity: 1; transform: translate(0,0); } /* Only one featured post. */ .single-featured-post ul.featured-posts li.featured { display: block; } /* No featured posts. */ #no-featured-content { display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; .no-results { padding: 2em 6%; background: $color__background-slider-content; } } @media screen and (min-width: $breakpoint-medium) { .featured-hentry-wrap { bottom: 5rem; } .slider-excerpt { display: block; } }