/* saira-100 - latin */

@font-face {
    font-family: "Saira";
    font-style: normal;
    font-weight: 100;
    src: local("Saira Thin"), local("Saira-Thin"), url("../fonts/saira-v3-latin-100.woff2") format("woff2"),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url("../fonts/saira-v3-latin-100.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* saira-200 - latin */

@font-face {
    font-family: "Saira";
    font-style: normal;
    font-weight: 200;
    src: local("Saira ExtraLight"), local("Saira-ExtraLight"), url("../fonts/saira-v3-latin-200.woff2") format("woff2"),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url("../fonts/saira-v3-latin-200.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* saira-300 - latin */

@font-face {
    font-family: "Saira";
    font-style: normal;
    font-weight: 300;
    src: local("Saira Light"), local("Saira-Light"), url("../fonts/saira-v3-latin-300.woff2") format("woff2"),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url("../fonts/saira-v3-latin-300.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* saira-regular - latin */

@font-face {
    font-family: "Saira";
    font-style: normal;
    font-weight: 400;
    src: local("Saira Regular"), local("Saira-Regular"), url("../fonts/saira-v3-latin-regular.woff2") format("woff2"),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url("../fonts/saira-v3-latin-regular.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* saira-500 - latin */

@font-face {
    font-family: "Saira";
    font-style: normal;
    font-weight: 500;
    src: local("Saira Medium"), local("Saira-Medium"), url("../fonts/saira-v3-latin-500.woff2") format("woff2"),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url("../fonts/saira-v3-latin-500.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* saira-600 - latin */

body, html {
    height: 100%;
    color: #fff;
    font-family: "Saira", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif !important;
    background: #263056 url(/img/bg2.jpg) repeat top center;
    /* Full height */
    height: 100%;
    width: 100%;
    /* Center and scale the image nicely */
}
#header__tilt {
    position: relative;
    top: -30px;
    z-index: 10;
    width: 100%;
    transform: skewY(-1deg);
    animation: 4s ease-in 0s 1 slideInFromTop;
    background: #292d4f;
}
@keyframes move-twink-back {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -1000px 500px;
    }
}
@-webkit-keyframes move-twink-back {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -1000px 500px;
    }
}
@-moz-keyframes move-twink-back {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -1000px 500px;
    }
}
@-ms-keyframes move-twink-back {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -1000px 500px;
    }
}
@keyframes move-twink-back {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -10000px 5000px;
    }
}
@-webkit-keyframes move-twink-back {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -10000px 5000px;
    }
}
@-moz-keyframes move-twink-back {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -10000px 5000px;
    }
}
@-ms-keyframes move-twink-back {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -10000px 5000px;
    }
}
.stars, .twinkling {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}
.stars {
    z-index: 0;
    background: #263056 url(/img/stars.png) repeat top center;
}
.twinkling {
    z-index: 1;
    -webkit-animation: move-twink-back 200s linear infinite;
    -moz-animation: move-twink-back 200s linear infinite;
    -ms-animation: move-twink-back 200s linear infinite;
    -o-animation: move-twink-back 200s linear infinite;
    animation: move-twink-back 200s linear infinite;
    background: transparent url(/img/twinkle.png) repeat top center;
    opacity: 1;
}
#header__tilt__reset {
    position: relative;
    top: 3vh;
    z-index: 19;
    height: 110px;
    transform: skewY(1deg);
}
div.video {
    position: relative;
    margin: 2%;
    top: 10vh;
    margin: auto;
    text-align: center;
}
.toptext {
    position: relative;
    top: 0;
    margin: auto;
    text-align: center;
    font-size: 5vh;
    color: #e5aa70;
}
.bottomtext {
    position: relative;
    top: 10vh;
    margin: auto;
    text-align: center;
    font-size: 3vh;
    color: #f4f0ec;
    width: 60%;
    font-weight: 200;
}
img.alogo {
    height: 4vh;
    position: relative;
    top: 1vh;
}
@-webkit-keyframes wiggle {
    0% {
        -webkit-transform: rotate(28deg);
    }
    50% {
        -webkit-transform: rotate(20deg);
    }
    100% {
        -webkit-transform: rotate(28deg);
    }
}
/* firefox */

@-moz-keyframes wiggle {
    0% {
        -moz-transform: rotate(28deg);
    }
    50% {
        -moz-transform: rotate(20deg);
    }
    100% {
        -moz-transform: rotate(28deg);
    }
}
/* anyone brave enough to implement the ideal method */

@keyframes wiggle {
    0% {
        transform: rotate(28deg);
    }
    50% {
        transform: rotate(20deg);
    }
    100% {
        transform: rotate(28deg);
    }
}
.muetze {
    position: relative;
    height: 6vh;
    top: -1vh;
    left: -2vh;
    transform: rotate(20deg);
    -webkit-animation: wiggle 2.5s infinite;
    -moz-animation: wiggle 2.5s infinite;
    animation: wiggle 2.5s infinite;
}