@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');

.air{
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
}
.plane{
    z-index: 3;
    position: absolute;
    width: 30%;
    height: 80%;
    top: 10%;
    left: 35%;
    animation: animation_plane 2s ease-in;
    animation-timing-function: linear;
    transform: rotate(77.5deg)
}
.air_ueberschrift{
    z-index: 4;
    top: 35%;
    left: 30%;
    color: white;
    font-size: 6vmin;
    position: absolute;
    font-family: 'Source Sans Pro', sans-serif;
    border-style: solid;
    background-color: rgb(0, 0, 0);
    padding: .5%;
    animation: animation_ueberschrift 2s ease-in;
    animation-timing-function: linear;
}
@keyframes animation_ueberschrift {
    10%{
        left:-60%;
    }
    20%{
        left:-50%;
    }
    30%{ 
        left:-40%;
       }
    40%{ 
        left:-30%;
    }
    50%{
        left:-20%;
    }
    60%{
        left:-10%;
    }
    70%{
        left: 0%;
    }
    80%{
        left: 10%;
    }
    90%{
        left:20%;
    }
    100%{
        left:30%;
    }    
}
@keyframes animation_plane_bg1 {
    10%{
        left: -10%;
    }
    20%{
        left: 0%;
    }
    30%{ 
        left: 10%;
       }
    40%{ 
        left: 20%;
    }
    50%{
        left: 30%;
    }
    60%{
        left: 40%;
    }
    70%{
        left: 50%;
    }
    80%{
        left:60%;
    }
    90%{
        left:70%;
    }
    100%{
        left:80%;
    }    
}
@keyframes animation_plane {
    10%{
        left:-55%;
    }
    20%{
        left:-45%;
    }
    30%{ 
        left:-35%;
       }
    40%{ 
        left:-25%;
    }
    50%{
        left:-15%;
    }
    60%{
        left:-5%;
    }
    70%{
        left: 5%;
    }
    80%{
        left:15%;
    }
    90%{
        left:25%;
    }
    100%{
        left:35%;
    }    
}
@keyframes animation_bg {
    10%{
        left:-75%;
    }
    20%{
        left:-65%;
    }
    30%{ 
        left:-55%;
       }
    40%{ 
        left:-45%;
    }
    50%{
        left:-35%;
    }
    60%{
        left:-25%;
    }
    70%{
        left: -15%;
    }
    80%{
        left: -5%;
    }
    90%{
        left: 5%;
    }
    100%{
        left:15%;
    }    
}
@keyframes animation_einleitung {
    10%{
        left:-65%;
    }
    20%{
        left:-55%;
    }
    30%{ 
        left:-45%;
       }
    40%{ 
        left:-35%;
    }
    50%{
        left:-25%;
    }
    60%{
        left:-15%;
    }
    70%{
        left: -5%;
    }
    80%{
        left: 5%;
    }
    90%{
        left: 15%;
    }
    100%{
        left: 25%;
    }    
}
@keyframes plane_bg2 {
    10%{
        left:-100%;
    }
    20%{
        left:-80%;
    }
    30%{ 
        left:-60%;
       }
    40%{ 
        left:-40%;
    }
    50%{
        left:-20%;
    }
    60%{
        left: 0%;
    }
    70%{
        left: 20%;
    }
    80%{
        left: 40%;
    }
    90%{
        left: 60%;
    }
    100%{
        left: 80%;
    }    
}
@keyframes plane_bg3 {
    10%{
        left:-65%;
    }
    20%{
        left:-55%;
    }
    30%{ 
        left:-45%;
       }
    40%{ 
        left:-105%;
    }
    50%{
        left:-85%;
    }
    60%{
        left:-65%;
    }
    70%{
        left: -45%;
    }
    80%{
        left: -25%;
    }
    90%{
        left: -5%;
    }
    100%{
        left: 15%;
    }    
}
.plane_bg{
    position: absolute;
    z-index: 2;
    width: 100px;
    height: 115px;
    top: 20%;
    left: 15%;
    animation: animation_bg 2.5s ease-in;
    animation-timing-function: linear;
}
.plane_bg1{
    position: absolute;
    z-index: 5; 
    width: 230px;
    height: 245px;
    top: 70%;
    left: 80%;
    animation: animation_plane_bg1 3s ease-in;
    animation-timing-function: linear;
}
.air_einleitung{
    z-index: 5;
    position: absolute;
    font-family: 'Source Sans Pro', sans-serif;
    border-style: solid;
    background-color: rgb(0, 0, 0);
    padding: .5%;
    top: 76%;
    left: 25%;
    color: white;
    width: 50%;
    animation: animation_einleitung 3s ease-in;
    animation-timing-function: linear;
}
h4{
    color: turquoise;
    font-size: 5vmin;
}
.air_wo{
    z-index: 5;
    position: absolute;
    top: 110%;
    left: 5%;
    font-size: 3vmin;
    color: white;
    font-family:'Source Sans Pro', sans-serif;
    right: 5%; 
    text-align: center;
}
.air_simulation{
    z-index: 5;
    position: absolute;
    top: 170%;
    left: 5%;
    font-size: 3vmin;
    color: white;
    font-family:'Source Sans Pro', sans-serif;
    right:5%;
    text-align: center;
}
.remote_tower{
    z-index: 5;
    position: absolute;
    top: 200%;
    left: 5%;
    font-size: 3vmin;
    color: white;
    font-family:'Source Sans Pro', sans-serif;
    right:5%;
    text-align: center;
}
.ende{
    top:2700px;
}
.plane_bg2{
    z-index: 4;
    position: absolute;
    top: 20%;
    left: 80%;
    transform: rotate(89deg);
    height: 13%;
    animation: plane_bg2 2.5s ease-in;
    animation-timing-function: linear;
}
.plane_bg3{
    z-index: 4;
    position: absolute;
    top: 60%;
    left: 15%;
    transform: rotate(89deg);
    height: 13%;
    animation: plane_bg3 2.5s ease-in;
    animation-timing-function: linear;
}