/* using examples from https://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/ */
/* using modernizr https://modernizr.com */

.navigation
{
    position: absolute;
    z-index: 11;
    top: 50vh;
    -webkit-transform: translatey(-50%);
    -moz-transform: translatey(-50%);
    -ms-transform: translatey(-50%);
    transform: translatey(-50%);
    
    height: 300px;
    width: 50vw;
    left: 0;
    right: 0;
    bottom: 0;

    margin-right: auto;
    margin-left: auto;
    padding: 0;
    text-align: center;
    vertical-align: middle;
}

.mainscreen-navigation
{
    list-style-type: none;
    font-family: Montserrat;
    font-size: medium;
    vertical-align: middle;
    text-align: center;
    margin: 0;
    padding: 0;
}

.mainscreen-navigation a:link 
{
    color: var(--Aufnahmsweise-3-rgba);
    text-decoration: none;
}

.mainscreen-navigation a:visited 
{
    color: var(--Aufnahmsweise-3-rgba);
    text-decoration: none;
}

.mainscreen-navigation a:hover 
{
    color: var(--Aufnahmsweise-3-rgba);
    text-decoration: underline;
}

.mainscreen-navigation a:active 
{
    color: var(--Aufnahmsweise-5-rgba);
    text-decoration: none;
    text-decoration: underline;
}

.logo {
    height: 250px;
    z-index: 12;
}

.cb-slideshow,
.cb-slideshow:after { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0; 
}

.cb-slideshow:after { 
    content: '';
    background-color: rgba(35, 53, 89, 0.65)
}

.cb-slideshow div{
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0px;
    left: 0px;
    color:transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;

    animation-name: imageAnimation;
    animation-duration: 36s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-play-state: running;
    /*animation: imageAnimation 36s linear infinite 0s; */
}
/* added by modernizr, show last slide-show image of css animations are not supported */
.no-cssanimations .cb-slideshow div {
    opacity:1; 
}

.cb-slideshow div:nth-child(1) { 
    background-image: url(../images/portfolio/bg-1s.jpg);
}

.cb-slideshow div:nth-child(2) { 
    background-image: url(../images/portfolio/bg-2s.jpg);
    animation-delay:6s;
}

.cb-slideshow div:nth-child(3) { 
    background-image: url(../images/portfolio/bg-3s.jpg);
    animation-delay:12s;
}

.cb-slideshow div:nth-child(4)  { 
    background-image: url(../images/portfolio/bg-4s.jpg);
    animation-delay:18s;
}
.cb-slideshow div:nth-child(5)  { 
    background-image: url(../images/portfolio/bg-5s.jpg);
    animation-delay:24s;
}

.cb-slideshow div:nth-child(6) { 
    background-image: url(../images/portfolio/bg-6s.jpg);
    animation-delay:30s;
}

/*
Now, let’s have a look at the slideshow animation. 
Each span will have an animation time of 36 seconds. 
In those 36 seconds we will change the opacity from 0 to 1 when the animation reaches 8%. 
And then this opacity gets kept until 17% are reached. When reaching 25% the opacity should 
already be 0 again and stay like that until the end.

Now, why those values? 
We want each image to be visible for 6 seconds and we know that at the end of a cycle, 
we want the first image to show again. We have 6 images, so we will need 36 seconds for a whole cycle to finish. 
Now, we need to “time” the opacity values accordingly. Knowing that our second image will start animating at 6 seconds, 
we need to know at what percentile of the animation this will require the first image to fade out. 
Dividing 6 by 36 gives us 0.166… which would be 16% for our keyframe step. 
Now, because we don’t want our image to just fade all the time, we’ll define an inbetween step, 
which we’ll set at half of what we calculated, i.e. 8%. 
That’s the point that we want to show the image completely and we only want to start fading it out at 17%, 
making it disappear completely at 25%. 


@keyframes imageAnimation { 
    0% { opacity: 0; animation-timing-function: ease-in; }
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}*/

@keyframes imageAnimation { 
    0% { opacity: 0; }
    8% { opacity: 1;  }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

/* Smaller devices */
/*
@media screen and (max-width: 1140px) { 
    .cb-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) { 
    .cb-slideshow li div h3 { font-size: 80px }
}*/