*{
    margin: 0;
    padding: 0;
    background-color: #2f2f2f;
    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
}

h1{
    font-size: 2.5rem;
    font-family: 'Montserrat';
    font-weight: normal;
    color: #444;
    text-align: center;
    margin: 2rem 0;
}

.main {
    margin-top: 5vh;
    height: 70vh;
    width: 100vw;
    position: relative;
}
.d1 {
    position: absolute;
    background-image: url(https://www.net-atelier.de/css_animated_backgroundphoto/_imagefiles/IMAG0134.jpg);
    background-size: 2700px 1500px;

    height: 30vh;
    width: 15vw;

    background-position: 0 50%;

    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.8);
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    animation: dd1 10s 1, dd12 10s 1;
    animation-delay: 4s, 14s;
}
.d2 {
    position: absolute;
    background-image: url(https://www.net-atelier.de/css_animated_backgroundphoto/_imagefiles/IMAG0134.jpg);
    background-size: 2700px 1500px;

    height: 50vh;
    width: 25vw;

    background-position: -10vw 50%;
    left: 10vw;

    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    animation: dd2 10s 2;
    animation-delay: 4s;
}
.d3 {
    position: absolute;
    background-image: url(https://www.net-atelier.de/css_animated_backgroundphoto/_imagefiles/IMAG0134.jpg);
    background-size: 2700px 1500px;
    overflow: hidden;

    height: 70vh;
    width: 40vw;
    left: 35vw;
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.8);
    background-position: -35vw 50%;

    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    animation: dd3 10s 2;
    animation-delay: 4s;
}
.d4 {
    position: absolute;
    overflow: hidden;
    background-image: url(https://www.net-atelier.de/css_animated_backgroundphoto/_imagefiles/IMAG0134.jpg);
    background-size: 2700px 1500px;

    height: 80vh;
    width: 25vw;
    left: 70vw;
    background-position: -70vw 50%;

    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    animation: dd4 10s 2;
    animation-delay: 4s;
}

@keyframes dd1 {
    0% {
    }
    50% {
        width: 95vw;
    }
}
@keyframes dd12 {
    0% {
    }
    50% {
        background-position: Calc(0vw - 40px) 50%;
    }
}
@keyframes dd2 {
    0% {
    }
    50% {
        background-position: Calc(-10vw - 40px) 50%;
    }
}
@keyframes dd3 {
    0% {
    }
    50% {
        background-position: Calc(-35vw - 40px) 50%;
    }
}
@keyframes dd4 {
    0% {
    }
    50% {
        background-position: Calc(-70vw - 40px) 50%;
    }
}