@charset "UTF-8";
/* This is a CSS file */

/* Hi Thomas, Andrea and Anni, in this animations-sheet ive chosen to prioritize individual control, hence the similar classes. */
/* Graphical design slide */
.slider1 {
    width: 100%;
    overflow: hidden;
    display: flex;
}

.sliderwrapper1 {
    height: 100%;
    display: flex;
    animation: slide3items 13s infinite;
    -webkit-animation: slide3items 13s infinite;
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}

.sliderwrapper1 img {
    object-fit: contain;
}

/* Photography slide */
.slider2 {
    width: 100%;
    overflow: hidden;
    display: flex;
}

.sliderwrapper2 {
    height: 100%;
    display: flex;
    animation: slide3items 16s infinite;
    -webkit-animation: slide3items 16s infinite;
    animation-delay: 3s;
    -webkit-animation-delay: 3s;
}

.sliderwrapper2 img {
    object-fit: cover;
}


/* Storytelling slide */
.slider3 {
    width: 100%;
    overflow: hidden;
    display: flex;
}

.sliderwrapper3 {
    height: 100%;
    width: 100%;
    display: flex;
    animation: slide3items 10s infinite;
    -webkit-animation: slide3items 10s infinite;
    animation-delay: 6s;
    -webkit-animation-delay: 6s;
}

.sliderwrapper3 img {
    object-fit: cover;
}

@keyframes slide3items {
    0%{
        transform: translateX(0%);
    }
    30%{
        transform: translateX(0%);
    }
    33%{
        transform: translateX(-100%);
    }
    60%{
        transform: translateX(-100%);
    }
    66%{
        transform: translateX(-200%);
    }
    95%{
        transform: translateX(-200%);
    }
    100%{
        transform: translateX(0%);
    }
}

@-webkit-keyframes slide3items{
    0%{
        -webkit-transform: translateX(0%);
    }
    30%{
        -webkit-transform: translateX(0%);
    }
    33%{
        -webkit-transform: translateX(-100%);
    }
    60%{
        -webkit-transform: translateX(-100%);
    }
    66%{
        -webkit-transform: translateX(-200%);
    }
    95%{
        -webkit-transform: translateX(-200%);
    }
    100%{
        -webkit-transform: translateX(0%);
    }
}