/*https://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/comment-page-7/#comments*/

body {
    background-color: black;
    overflow-x:hidden;
    /*height: 100%;*/
    }


.sldrBtn {
            margin-right:4%;
            width:25px;
            height:auto;
          }


/* ------------------------- INDEX content  -------------------------------- */



.ports {
        width:40%;
        margin: 0 auto;
        text-align: center;
        margin-top:300px;
        z-index: 100;
        /*background-color:#9966ff;*/
        }


.jobtitel { text-decoration: none;
            font-family: 'Vidaloka', serif;
            font-variant: small-caps;
            color: white;
            font-size: 3.8em;
            }



/*------------- CONTAINER:  slideshow---------------------------*/

.cb-slideshow{
            position: fixed;
            top:0;                   /*hide this if you want content to push with nav*/
            left:50px;                /*hide this if you want content to push with nav*/
            width: 100%;
            height: 100%;
            /*z-index: -10;*/
            }

/*--------------------------SLIDES--------------------------------*/

.slide1, .slide2, .slide3 {
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            top: 0;
                            left: 0;
                            color: transparent;
                            background-size: cover;
                            background-position: 50% 50%;
                            background-repeat: no-repeat;
                            opacity: 0;
                            /*z-index: 0;*/
                             }

.overlap {
            -webkit-backface-visibility: hidden;
            -webkit-animation: imageAnimation 30s linear infinite 0s;
            -moz-animation: imageAnimation 30s linear infinite 0s;
            -o-animation: imageAnimation 30s linear infinite 0s;
            -ms-animation: imageAnimation 30s linear infinite 0s;
            animation: imageAnimation 30s linear infinite 0s;
        }

.fadeIn {
            -webkit-animation: fadeIn 2s ease; /* Safari 4.0 - 8.0 */
            animation: fadeIn 2s ease;
            }


.slide1 {
    background-image: url(../img/slider1.jpg);
    /*height:100%;*/
    }
.slide2{
    background-image: url(../img/slider3.jpg);
    -webkit-animation-delay: 10s;
    -moz-animation-delay: 10s;
    -o-animation-delay: 10s;
    -ms-animation-delay: 10s;
    animation-delay: 10s;
}
.slide3 {
    background-image: url(../img/slider2.jpg);
    -webkit-animation-delay: 20s;
    -moz-animation-delay: 20s;
    -o-animation-delay: 20s;
    -ms-animation-delay: 20s;
    animation-delay: 20s;
}


/*--------------------------ANIMATIONS --------------------------------*/

/* fade overlap */
@keyframes imageAnimation {
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    4% { opacity: 1;
         animation-timing-function: ease-out; }
    35% { opacity: 1 }
    38% { opacity: 0 }
    100% { opacity: 0 }
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1;}
}

/* fade in */
@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1;}
}



/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow {
	opacity: 1;
}



/*=============================================================================*/
/*--------------------MEDIA QUERIES--------------------------------------------*/
/*=============================================================================*/


/*****Tablets*/
@media (max-width: 700px) {

    .jobtitel {
                font-size: 3.5em;
                }
    }


@media (max-width: 600px) {

    .jobtitel {
        font-size: 2.5em;
    }
}


/*****Phone*/
@media (max-width: 400px) {

    .portBtn {
        width:95%;
    }

}

@media (max-width: 330px) {

    .portBtn {
        font-size: 1.4em;
    }

}


/*position of content vertical responsive*/

@media (max-height: 700px) {

    .ports {
            margin-top:250px;
           }
}

@media (max-height: 650px) {

    .ports {
             margin-top:100px;
    }


    .slide1, .slide2, .slide3 {
            background-position: 50% 35%;
            }
}


@media (min-width: 700px) {

    .sldrBtn {
        margin-right:1%;
        width:20px;
        height:auto;
    }
}

@media (min-width: 1600px) {

    .sldrBtn {
        margin-right:0.6%;
        width:20px;
        height:auto;
    }
}