/* lobster-two-regular - latin */
@font-face {
  font-family: 'Lobster Two';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/lobster-two-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Lobster Two'), local('LobsterTwo'),
       url('../fonts/lobster-two-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lobster-two-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lobster-two-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lobster-two-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lobster-two-v12-latin-regular.svg#LobsterTwo') format('svg'); /* Legacy iOS */
}
/* lobster-two-700 - latin */
@font-face {
  font-family: 'Lobster Two';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/lobster-two-v12-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Lobster Two Bold'), local('LobsterTwo-Bold'),
       url('../fonts/lobster-two-v12-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lobster-two-v12-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lobster-two-v12-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lobster-two-v12-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lobster-two-v12-latin-700.svg#LobsterTwo') format('svg'); /* Legacy iOS */
}

html, body {
        height: 100%;
        margin: 0;
        padding: 0;
}

body {
        background-color: #0071c7;
        background-image: url('../images/background-sky.jpg');
        background-size: cover;
        box-sizing: border-box;
}

#wrapper {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        box-sizing: border-box;
        overflow: hidden;
}

#bottom {
        position: absolute;
        bottom: 15px;
        left: 15px;
        right: 15px;
        height: 60%;
        animation: rotate-bl 1.5s cubic-bezier(0.48, 0.46, 0.38, 1.49) 1s forwards;
        transform: rotate(90deg);
        transform-origin: bottom left;
        background-image: url('../images/klaus-und-lisa.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center bottom;
}

#aircraft {
        position: absolute;
        right: 0;
        top: 20%;
        width: 50%;
        height: 40%;
        background-image: url('../images/aircraft.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        transform: translateX(100%);
        animation: slide-r 1s cubic-bezier(0.48, 0.46, 0.38, 1.49) 2s forwards;
}

#border {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border: 15px solid #ff00d4;
        z-index: 900;
}

#text {
        font-family: 'Lobster Two';
        position: absolute;
        top: 20px;
        left: 20px;
        font-size: 1.5em;
        z-index: 800;
}

#text span {
        background-color: #fff;
        padding: 0.2em 0.8em;
        display: inline-block;
        float: left;
        clear: left;
}

@media (min-width: 600px) {
        #text {
                top: 10%;
                left: 10%;
                font-size: 3em;
        }
}

.rotate-bl {
	-webkit-animation: rotate-bl 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) reverse forwards;
	        animation: rotate-bl 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) reverse forwards;
}

/* ----------------------------------------------
 * Generated by Animista on 2020-8-23 15:12:35
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@keyframes rotate-bl {
  0% {
        transform: rotate(90deg);
        transform-origin: bottom left;
  }
  100% {
        transform: rotate(0deg);
        transform-origin: bottom left;
  }
}

@keyframes slide-r {
        0% {
                transform: translate(100%, 70%);
        }
        100% {
                transform: translate(20%, 0);
        }
}