/*
## These styles are made really simple
## Please do your own styling
*/


/* Slideshow spesifics */
@keyframes easyOut {
    from { opacity: 1}
    to {opacity: 0}
}
@keyframes kenBurns {
    from {
        transform: scale(1.1) rotate(0deg) translateX(20px) rotate(0deg);
    }
    to {
        transform: scale(1.1) rotate(360deg) translateX(20px) rotate(-360deg);
    }
}
.nooma-slide-gallery {
    width: 100%;
    position: relative;
    background: #eee;
    overflow: hidden;
    transform-style: preserve-3d;
    perspective: 1px;
    min-height: 100px;
}
.nooma-slide-gallery figcaption {
    position: absolute;
    bottom: 0;
    text-align: center;
    font-style: normal;
    background: rgba(0,0,0,0.7);
    padding: 5px 10px;
    color: #fff;
    font-size: 14px;
}

.nooma-slide-gallery > figure img {
    display: none;
}
.nooma-slide-gallery > figure {
    margin: 0;
    width: 100%;
    height: 0;
    padding-bottom: 67%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    overflow: hidden;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
}
.nooma-slide-gallery > .video-slide {
    padding: 0;
}
.nooma-slide-gallery > figure.slide-active {
    opacity: 1;
    z-index: 1;
    height: auto;
    position: relative;
}
.nooma-slide-gallery > figure.ken-burns {
    transition: opacity 1s, transform 1s;
    animation: kenBurns 19.9s linear;
    animation-iteration-count: infinite;
}
.nooma-slide-gallery > figure.slide-active.ken-burns:hover {
    animation-play-state: paused;
}
.nooma-slide-gallery .slide-nav {
    position: absolute;
    z-index: 9;
    top: calc(50% - 40px);
    left: 0;
    width: 100%;
    bottom: auto;
}
.nooma-slide-gallery .nav {
    cursor: pointer;
    width: 20px;
    height: 80px;
    display: block;
    position: absolute;
    top: 0;
}
.nooma-slide-gallery .nav-prev {
    left: 20px;
}
.nooma-slide-gallery .nav-next {
    right: 20px;
}
.nooma-slide-gallery .nav::after {
    pointer-events: none;
    position: relative;
    font-size: 80px;
    line-height: 80px;
    height: 20px;
    color: #fff;
    text-shadow: 1px 0 rgba(0,0,0,0.3), 0 -1px rgba(0,0,0,0.3), 0 1px rgba(0,0,0,0.3), -1px 0 rgba(0,0,0,0.3);
}
.nooma-slide-gallery .nav-prev::after {
   content: '\2039';
}
.nooma-slide-gallery .nav-next::after {
   content: '\203A';
}