123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183 |
- /* Full Screen jQuery Content Slider <https://github.com/jacobxperez/full-screen-jquery-content-slider>
- * Copyright (C) 2020 Jacob Perez <jacobxperez@gmx.com>
- * Licensed under the Apache License, Version 2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- ------------------------------------------------------------------------------*/
- /* Reset
- ------------------------------------------------------------------------------*/
- * {
- box-sizing: border-box;
- margin: 0;
- padding: 0;
- border: 0 none;
- font-size: inherit;
- font-family: inherit;
- line-height: inherit;
- text-align: inherit;
- vertical-align: baseline;
- background-color: transparent;
- color: inherit;
- outline: 0;
- }
- audio,
- canvas,
- embed,
- iframe,
- img,
- object,
- svg,
- video {
- display: block;
- height: auto;
- max-width: 100%;
- width: 100%;
- vertical-align: middle;
- }
- summary {
- display: list-item;
- }
- body,
- html {
- height: 100%;
- }
- html {
- font-size: 100%;
- }
- body {
- overflow: auto;
- font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Nimbus Sans L", "Liberation Sans", FreeSans, sans-serif;
- font-weight: 400;
- line-height: 1.5;
- text-align: left;
- color: #555;
- background-color: #fff;
- }
- /* Content Slider
- ------------------------------------------------------------------------------*/
- .slider {
- position: relative;
- width: 100%;
- height: 100%;
- overflow: hidden;
- background-color: #555;
- }
- .slide {
- position: absolute;
- top: 0;
- left: 0;
- display: none;
- width: 100%;
- height: 100%;
- overflow: hidden;
- }
- .slide img {
- position: absolute;
- top: 0;
- left: 0;
- display: block;
- width: 100%;
- height: 100%;
- cursor: default;
- }
- .slide-content {
- position: absolute;
- bottom: 20%;
- width: 100%;
- text-align: center;
- color: #fff;
- text-shadow: 0 .125em .3125em rgba(0, 0, 0, 0.6), 0 0 .3125em rgba(0, 0, 0, 0.5);
- }
- .slide-title {
- font-size: 10vw;
- }
- .slider-nav {
- position: absolute;
- top: 50%;
- right: 0;
- width: 100%;
- z-index: 10;
- }
- .next-slide,
- .prev-slide {
- position: absolute;
- display: inline-block;
- width: 3.125rem;
- height: 3.125rem;
- line-height: 3.125;
- margin: 0;
- border: .125rem solid white;
- backface-visibility: hidden;
- background-color: rgba(0, 0, 0, 0.3);
- color: white;
- overflow: hidden;
- cursor: pointer;
- z-index: 20;
- transition: all .3s ease-in-out 0s;
- -webkit-user-select: none;
- user-select: none;
- }
- .prev-slide {
- left: 2%;
- }
- .next-slide {
- right: 2%;
- }
- .next-slide:hover,
- .prev-slide:hover {
- background-color: rgba(0, 0, 0, 0.6);
- }
- .next-slide::before,
- .prev-slide::before {
- position: absolute;
- top: 33%;
- display: inline-block;
- width: .8125rem;
- height: .8125rem;
- content: "";
- border-left: .25rem solid white;
- border-top: .25rem solid white;
- backface-visibility: hidden;
- }
- .prev-slide::before {
- transform: rotate(-45deg);
- right: 25%;
- }
- .next-slide::before {
- transform: rotate(135deg);
- left: 25%;
- }
- @media screen and (max-width: 42.5em) {
- .next-slide,
- .prev-slide {
- display: none;
- }
- }
- @media screen and (max-width: 61.25em) {
- .slider {
- max-height: 57.95918367vw;
- }
- }
- @media screen and (min-height: 61.25em) {
- .slider {
- max-height: 57.95918367vw;
- }
- }
|