|
|
@-webkit-keyframes spinAround{ |
|
|
from |
|
|
{ |
|
|
-webkit-transform:rotate(0);transform:rotate(0) |
|
|
} |
|
|
to |
|
|
{ |
|
|
-webkit-transform:rotate(359deg); |
|
|
transform:rotate(359deg)} |
|
|
} |
|
|
|
|
|
@keyframes spinAround{ |
|
|
from |
|
|
{ |
|
|
-webkit-transform:rotate(0); |
|
|
transform:rotate(0) |
|
|
} |
|
|
to |
|
|
{-webkit-transform:rotate(359deg); |
|
|
transform:rotate(359deg)} |
|
|
} |
|
|
.slider{ |
|
|
position:relative; |
|
|
width:100%} |
|
|
.slider-container{ |
|
|
display:flex; |
|
|
flex-wrap:nowrap; |
|
|
flex-direction:row; |
|
|
overflow:hidden; |
|
|
-webkit-transform:translate3d(0,0,0); |
|
|
transform:translate3d(0,0,0); |
|
|
min-height:100%} |
|
|
.slider-container.is-vertical{flex-direction:column} |
|
|
.slider-container |
|
|
.slider-item{flex:none} |
|
|
.slider-container |
|
|
.slider-item |
|
|
.image.is-covered img{ |
|
|
-o-object-fit:cover; |
|
|
object-fit:cover; |
|
|
-o-object-position:center center; |
|
|
object-position:center center; |
|
|
height:100%; |
|
|
width:100%} |
|
|
.slider-container |
|
|
.slider-item |
|
|
.video-container{height:0;padding-bottom:0;padding-top:56.25%;margin:0;position:relative} |
|
|
.slider-container |
|
|
.slider-item |
|
|
.video-container.is-1by1, |
|
|
.slider-container |
|
|
.slider-item |
|
|
.video-container.is-square{padding-top:100%}.slider-container |
|
|
.slider-item |
|
|
.video-container.is-4by3{padding-top:75%}.slider-container |
|
|
.slider-item |
|
|
.video-container.is-21by9{padding-top:42.857143%}.slider-container |
|
|
.slider-item .video-container embed,.slider-container .slider-item .video-container iframe,.slider-container .slider-item |
|
|
.video-container object{position:absolute;top:0;left:0;width:100%!important;height:100%!important} |
|
|
.slider-navigation-next, |
|
|
.slider-navigation-previous{ |
|
|
display:flex; |
|
|
justify-content:center; |
|
|
align-items:center; |
|
|
position:absolute; |
|
|
width:42px; |
|
|
height:42px; |
|
|
background:#fff center center no-repeat; |
|
|
background-size:20px 20px; |
|
|
border:1px solid #fff; |
|
|
border-radius:25091983px; |
|
|
box-shadow:0 2px 5px #3232321a; |
|
|
top:50%; |
|
|
margin-top:-20px; |
|
|
left:0; |
|
|
cursor:pointer; |
|
|
transition:opacity .3s,-webkit-transform .3s;transition:transform .3s,opacity .3s;transition:transform .3s,opacity .3s,-webkit-transform .3s} |
|
|
.slider-navigation-next:hover, |
|
|
.slider-navigation-previous:hover{-webkit-transform:scale(1.2);transform:scale(1.2)} |
|
|
.slider-navigation-next.is-hidden,.slider-navigation-previous.is-hidden{display:none;opacity:0} |
|
|
.slider-navigation-next svg,.slider-navigation-previous svg{width:25%} |
|
|
.slider-navigation-next{left:auto;right:0;background:#fff center center no-repeat;background-size:20px 20px} |
|
|
.slider-pagination{ |
|
|
display:none; |
|
|
justify-content:center; |
|
|
align-items:center; |
|
|
position:absolute; |
|
|
bottom:0; |
|
|
left:0; |
|
|
right:0; |
|
|
padding:.5rem 1rem; |
|
|
text-align:center} |
|
|
.slider-pagination |
|
|
.slider-page{background:#83CBEB;width:10px;height:10px;border-radius:25091983px;display:inline-block;margin:0 3px;box-shadow:0 2px 5px #3232321a;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;cursor:pointer} |
|
|
.slider-pagination .slider-page.is-active,.slider-pagination |
|
|
.slider-page:hover{-webkit-transform:scale(1.4);transform:scale(1.4)}@media screen and (min-width:800px){.slider-pagination{display:flex}} |
|
|
.hero.has-carousel{position:relative}.hero.has-carousel+.hero-body,.hero.has-carousel+.hero-footer,.hero.has-carousel+ |
|
|
.hero-head{z-index:10;overflow:hidden}.hero.has-carousel |
|
|
.hero-carousel{position:absolute;top:0;left:0;bottom:0;right:0;height:auto;border:none;margin:auto;padding:0;z-index:0} |
|
|
.hero.has-carousel .hero-carousel .slider{width:100%;max-width:100%;overflow:hidden;height:100%!important;max-height:100%;z-index:0} |
|
|
.hero.has-carousel .hero-carousel .slider .has-background{max-height:100%}.hero.has-carousel .hero-carousel .slider .has-background |
|
|
.is-background{-o-object-fit:cover;object-fit:cover;-o-object-position:center center;object-position:center center;height:100%;width:100%} |
|
|
.hero.has-carousel .hero-body{margin:0 3rem;z-index:10} |
