/*------------ Walbusch | Agentur2 GmbH ------------*/

@charset "utf-8";

/*------------ format definitions ------------*/

.logo_120x600 {
    width: 114px;
    left: 3px;
    top: 20px;
}
.cta_120x600 {
    width: 110px;
    left: 5px;
    bottom: 15px;
}
.textbox_120x600 {
    width: 110px;
    left: 0px;
    bottom: 65px;
    -webkit-animation-name: textbox-links;
    animation-name: textbox-links;
}

/*--------------*/

.logo_160x600 {
    width: 150px;
    left: 5px;
    top: 20px;
}
.cta_160x600 {
    width: 150px;
    left: 5px;
    bottom: 15px;
}
.textbox_160x600 {
    width: 140px;
    left: 0px;
    bottom: 65px;
    -webkit-animation-name: textbox-links;
    animation-name: textbox-links;
}

/*--------------*/

.logo_230x230 {
    width: 115px;
    left: 15px;
    top: 15px;
}
.cta_230x230 {
    width: 120px;
    left: 10px;
    bottom: 10px;
}
.textbox_230x230 {
    width: 130px;
    left: 0px;
    bottom: 40px;
    -webkit-animation-name: textbox-links;
    animation-name: textbox-links;
}

/*--------------*/

.logo_300x250 {
    width: 120px;
    left: 15px;
    top: 15px;
}
.cta_300x250 {
    width: 120px;
    left: 20px;
    bottom: 10px;
}
.textbox_300x250 {
    width: 140px;
    left: 0px;
    bottom: 45px;
    -webkit-animation-name: textbox-links;
    animation-name: textbox-links;
}

/*--------------*/

.logo_300x600 {
    width: 250px;
    left: 25px;
    top: 20px;
}
.cta_300x600 {
    width: 150px;
    left: 75px;
    bottom: 15px;
}
.textbox_300x600 {
    width: 240px;
    left: 0px;
    bottom: 65px;
    -webkit-animation-name: textbox-links;
    animation-name: textbox-links;
}

/*--------------*/

.logo_728x90 {
    width: 160px;
    left: 15px;
    top: 33px;
}
.cta_728x90 {
    width: 120px;
    right: 10px;
    bottom: 10px;
}
.textbox_728x90 {
    height: 80px;
    left: 210px;
    top: 0px;
    -webkit-animation-name: textbox-oben;
    animation-name: textbox-oben;
}

/*--------------*/

.logo_600x300 {
    width: 235px;
    left: 15px;
    top: 15px;
}
.cta_600x300 {
    width: 170px;
    right: 15px;
    bottom: 15px;
}
.textbox_600x300 {
    width: 250px;
    left: 0px;
    bottom: 40px;
    -webkit-animation-name: textbox-links;
    animation-name: textbox-links;
}

/*--------------*/

.logo_700x500,
.logo_640x480 {
    width: 240px;
    left: 20px;
    top: 20px;
}
.cta_700x500,
.cta_640x480 {
    width: 170px;
    right: 15px;
    bottom: 15px;
}
.textbox_700x500,
.textbox_640x480 {
    width: 260px;
    left: 0px;
    bottom: 90px;
    -webkit-animation-name: textbox-links;
    animation-name: textbox-links;
}

/*--------------*/

.logo_860x250,
.logo_800x250 {
    width: 235px;
    left: 15px;
    top: 20px;
}
.cta_800x250,
.cta_860x250 {
    width: 170px;
    right: 15px;
    bottom: 15px;
}
.textbox_860x250,
.textbox_800x250 {
    width: 250px;
    left: 0px;
    bottom: 15px;
    -webkit-animation-name: textbox-links;
    animation-name: textbox-links;
}

/*------------ standard ------------*/

* {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}
div {
    position: absolute;
    width: 100%;
    height: 100%;
}
img {
    position: absolute;
    text-decoration: none;
    border: 0px
}
#body {
    top: 0px;
    left: 0px;
    overflow: hidden;
    z-index: 1;
}
#rahmen {
    border: 1px solid #555555;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    opacity: 0.5;
    filter: alpha(opacity=50);
    z-index: 10000;
}
#logo {
    z-index: 9001;
}
#cta {
    z-index: 9000;
}
.cta-rot {
    -webkit-animation-name: cta-rot;
    animation-name: cta-rot;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@-webkit-keyframes cta-rot {
    0%,
    50%,
    52%,
    56%,
    100% {
        background: #800311;
    }
    51%,
    53% {
        background: #d46370;
    }
}
@keyframes cta-rot {
    0%,
    50%,
    52%,
    56%,
    100% {
        background: #800311;
    }
    51%,
    53% {
        background: #d46370;
    }
}
.cta-blau {
    -webkit-animation-name: cta-blau;
    animation-name: cta-blau;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@-webkit-keyframes cta-blau {
    0%,
    50%,
    52%,
    56%,
    100% {
        background: #00294b;
    }
    51%,
    53% {
        background: #6699cc;
    }
}
@keyframes cta-blau {
    0%,
    50%,
    52%,
    56%,
    100% {
        background: #00294b;
    }
    51%,
    53% {
        background: #6699cc;
    }
}
.cta-hellblau {
    -webkit-animation-name: cta-hellblau;
    animation-name: cta-hellblau;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@-webkit-keyframes cta-hellblau {
    0%,
    50%,
    52%,
    56%,
    100% {
        background: #6699cc;
    }
    51%,
    53% {
        background: #bfffff;
    }
}
@keyframes cta-hellblau {
    0%,
    50%,
    52%,
    56%,
    100% {
        background: #6699cc;
    }
    51%,
    53% {
        background: #bfffff;
    }
}
#textbox {
    background: white;
    background: -webkit-linear-gradient(150deg, rgba(255, 255, 255, .8) 30%, rgba(255, 255, 255, 1), rgba(255, 255, 255, .8) 70%);
    background: linear-gradient(-60deg, rgba(255, 255, 255, .8) 30%, rgba(255, 255, 255, 1), rgba(255, 255, 255, .8) 70%);
    z-index: 8000;
}
@-webkit-keyframes textbox-links {
    0%,
    70% {
        opacity: 1;
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
        box-shadow: 0 0 0px white;
    }
    73%,
    90% {
        opacity: 0;
        -webkit-transform: translate(-100px, 0px);
        transform: translate(-100px, 0px);
        box-shadow: 0 0 0px white;
    }
    92% {
        opacity: 1;
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
        box-shadow: 0 0 50px white;
    }
    96%,
    100% {
        box-shadow: 0 0 0px white;
    }
}
@keyframes textbox-links {
    0%,
    70% {
        opacity: 1;
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
        box-shadow: 0 0 0px white;
    }
    73%,
    90% {
        opacity: 0;
        -webkit-transform: translate(-100px, 0px);
        transform: translate(-100px, 0px);
        box-shadow: 0 0 0px white;
    }
    92% {
        opacity: 1;
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
        box-shadow: 0 0 50px white;
    }
    96%,
    100% {
        box-shadow: 0 0 0px white;
    }
}
@-webkit-keyframes textbox-rechts {
    0%,
    70% {
        opacity: 1;
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
        box-shadow: 0 0 0px white;
    }
    73%,
    90% {
        opacity: 0;
        -webkit-transform: translate(100px, 0px);
        transform: translate(100px, 0px);
        box-shadow: 0 0 0px white;
    }
    92% {
        opacity: 1;
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
        box-shadow: 0 0 50px white;
    }
    96%,
    100% {
        box-shadow: 0 0 0px white;
    }
}
@keyframes textbox-rechts {
    0%,
    70% {
        opacity: 1;
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
        box-shadow: 0 0 0px white;
    }
    73%,
    90% {
        opacity: 0;
        -webkit-transform: translate(100px, 0px);
        transform: translate(100px, 0px);
        box-shadow: 0 0 0px white;
    }
    92% {
        opacity: 1;
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
        box-shadow: 0 0 50px white;
    }
    96%,
    100% {
        box-shadow: 0 0 0px white;
    }
}

@-webkit-keyframes textbox-oben {
    0%,
    70% {
        opacity: 1;
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
        box-shadow: 0 0 0px white;
    }
    73%,
    90% {
        opacity: 0;
        -webkit-transform: translate(0px, -100px);
        transform: translate(0px, -100px);
        box-shadow: 0 0 0px white;
    }
    92% {
        opacity: 1;
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
        box-shadow: 0 0 50px white;
    }
    96%,
    100% {
        box-shadow: 0 0 0px white;
    }
}

@keyframes textbox-oben {
    0%,
    70% {
        opacity: 1;
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
        box-shadow: 0 0 0px white;
    }
    73%,
    90% {
        opacity: 0;
        -webkit-transform: translate(0px, -100px);
        transform: translate(0px, -100px);
        box-shadow: 0 0 0px white;
    }
    92% {
        opacity: 1;
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
        box-shadow: 0 0 50px white;
    }
    96%,
    100% {
        box-shadow: 0 0 0px white;
    }
}
a {
    z-index: 50000;
    cursor: pointer;
}