/*!
 * Theme Title, -
 * @version 0.0.1
 * @date 2020-10-07, 19:16
 */
 .horst,.logo{
     -webkit-transform:translateX(-50%)
    }
    @font-face{
        font-family:'Droid Serif';
        font-style:normal;
        font-weight:400;
        src:local('Droid Serif'),local('DroidSerif'),url(https://fonts.gstatic.com/s/droidserif/v6/0AKsP294HTD-nvJgucYTaJ0EAVxt0G0biEntp43Qt6E.ttf) format('truetype')
    }
    @font-face{
        font-family:'Droid Serif';
        font-style:normal;
        font-weight:700;
        src:local('Droid Serif Bold'),local('DroidSerif-Bold'),url(https://fonts.gstatic.com/s/droidserif/v6/QQt14e8dY39u-eYBZmppwZ_TkvowlIOtbR7ePgFOpF4.ttf) format('truetype')
    }
    a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{
        margin:0;
        padding:0;
        border:0;
        font:inherit;
        vertical-align:baseline
    }
    blockquote,hr,q{
        margin:27.9px 0
    }
    address,p:first-child{
        margin:0 0 13.95px
    }
    body,h1,h2,h3,h4,h5,h6{
        font-family:"Droid Serif",Helvetica,Arial,sans-serif
    }
    cite,em{
        font-style:italic
    }
    article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
        display:block
    }
    ol,ul{
        list-style:none
    }
    blockquote,q{
        quotes:none;
        border-left:2px solid #CCC;
        color:#484848;
        padding-left:13.95px
    }
    blockquote:after,blockquote:before,q:after,q:before{
        content:'';
        content:none
    }
    table{
        border-collapse:collapse;
        border-spacing:0
    }
    body{
        background-color:#bfc5c5;
        letter-spacing:0;
        color:#222;
        font-size:18px;
        line-height:27.9px;
        -webkit-font-smoothing:antialiased;
        margin-bottom:100px;
        overflow:hidden
    }
    h1,h2,h3,h4,h5,h6{
        text-rendering:optimizeLegibility;
        font-weight:700;
        margin-top:1em;
        line-height:1.25em
    }
    h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child{
        margin-top:0
    }
    h1{
        font-size:40.5px;
        font-weight:400
    }
    .info-trigger,strong{
        font-weight:700
    }
    h2{
        font-size:36px
    }
    h3,h4,h5,h6{
        font-size:27px;
        margin:13.5px 0
    }
    p{
        margin:27.9px 0 13.95px
    }
    a{
        color:#3c9dc5;
        text-decoration:none
    }
    a:hover{
        color:#3d9dc5
    }
    a:active,a:focus{
        color:#3d9dc5;
        outline:0
    }
    hr{
        border-bottom:1px solid #CCC;
        border-left:none;
        border-right:none;
        border-top:none
    }
    img{
        margin:0;
        max-width:100%
    }
    abbr,acronym{
        border-bottom:1px dotted #CCC;
        cursor:help
    }
    #container,.info,html{
        cursor:pointer
    }
    address{
        display:block
    }
    hgroup{
        margin-bottom:13.95px
    }
    del{
        color:#484848
    }
    cite{
        color:#626262;
        display:block;
        margin-top:13.95px
    }
    cite:before{
        content:'\2014 \00A0'
    }
    code,pre{
        font-family:monospace;
        background-color:#CCC;
        color:#333;
        font-size:.8em;
        padding:6px
    }
    sub,sup{
        font-size:.66em;
        position:relative
    }
    code,tt,var{
        margin:0 3px
    }
    pre{
        overflow:auto
    }
    sub{
        top:.37em
    }
    sup{
        top:-.37em
    }
    .preloader{
        display:none;
        visibility:hidden;
        width:1px;
        height:1px;
        overflow:hidden
    }
    #container{
        position:absolute;
        width:100%;
        height:100%;
        background-image:url(../img/back.jpg);
        background-size:cover;
        background-position:center bottom;
        background-repeat:no-repeat
    }
    .horst,.tuba{
        background-position:left center;
        position:absolute;
        background-repeat:no-repeat
    }
    .logo{
        width:60%;
        min-width:260px;
        max-width:425px;
        height:auto;
        position:absolute;
        z-index:0;
        left:50%;
        transform:translateX(-50%);
        top:50px
    }
    @-webkit-keyframes troet{0%{left:calc(50% + 20px)}100%{left:calc(50% + 10px)}}
    @keyframes troet{0%{left:calc(50% + 20px)}100%{left:calc(50% + 10px)}}
    .tuba{
        background-image:url(../img/tuba.png);
        background-size:contain;
        width:450px;
        height:250px;
        bottom:130px;
        left:calc(50% + 20px);
        margin-left:-250px;
        margin-top:-125px;
        z-index:99;
        -webkit-transform:rotate(80deg) translate(-350px) rotate(0);
        transform:rotate(80deg) translate(-350px) rotate(0)
    }
    .tuba.active{
        -webkit-animation:troet 50ms steps(4) infinite;
        animation:troet 50ms steps(4) infinite
    }
    .tuba.flip{
        -webkit-transform:rotate(80deg) translate(-350px) rotate(0);
        transform:rotate(80deg) translate(-350px) rotate(0)
    }
    .horst{
        width:403px;
        height:343px;
        bottom:0;
        left:50%;
        transform:translateX(-50%);
        background-image:url(../img/horst.png);
        background-size:806px 343px
    }
    .horst.active{
        background-position:right center
    }
    .hair{
        width:383px;
        height:303px;
        overflow:hidden;
        position:absolute;
        bottom:120px;
        left:calc(50% - 6px);
        -webkit-transform:translateX(-50%);
        transform:translateX(-50%)
    }
    @-webkit-keyframes jitter{0%{-webkit-transform:translateX(-375px);transform:translateX(-375px)}100%{-webkit-transform:translateX(375px);transform:translateX(375px)}}
    @keyframes jitter{0%{-webkit-transform:translateX(-375px);transform:translateX(-375px)}100%{-webkit-transform:translateX(375px);transform:translateX(375px)}}
    @-webkit-keyframes idle{0%{background-position:0 -562px}100%{background-position:0 -1687px}}
    @keyframes idle{0%{background-position:0 -562px}100%{background-position:0 -1687px}}
    @-webkit-keyframes start{0%{background-position:0 0}100%{background-position:0 -562px}}
    @keyframes start{0%{background-position:0 0}100%{background-position:0 -562px}}
    .hair .hair-wrapper{
        width:750px;
        height:280px;
        overflow:hidden
    }
    .hair.active .hair-wrapper,.hair.start .hair-wrapper{
        -webkit-animation:jitter .2s steps(2) infinite;
        animation:jitter .2s steps(2) infinite
    }
    .hair.start .hair-sprite{
        -webkit-animation:start .4s steps(2) infinite;
        animation:start .4s steps(2) infinite
    }
    .hair.active .hair-sprite{
        -webkit-animation:idle .4s steps(2) infinite;
        animation:idle .4s steps(2) infinite
    }
    .hair .hair-sprite{
        position:absolute;top:0;left:0;height:280px;width:750px;background-image:url(../img/angle_01.png);
        background-position:0 0;
        background-repeat:no-repeat;
        opacity:.1
    }
        .curtain,.hair .hair-sprite:first-child{
            opacity:1
        }
        .eyes{
            width:403px;
            height:343px;
            position:absolute;
            bottom:0;
            left:50%;
            -webkit-transform:translateX(-50%);
            transform:translateX(-50%);
            z-index:0
        }
        .eyes .eye{
            width:23px;
            height:23px;
            position:absolute;
            top:106px;
            left:143px;
            background-image:url(../img/eye.png);
            background-size:contain; 
            background-position:center center;
            background-repeat:no-repeat
        }
        .eyes .eye.right{
            left:190px
        }
        .curtain{
            position:fixed;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background-color:#bfc5c5;
            z-index:9999
        }
        .curtain img,.info-trigger{
            display:block;
            position:absolute
        }
        .curtain img{
            left:50%;
            top:50%;
            -webkit-transform:translateX(-50%) translateY(-50%);
            transform:translateX(-50%) translateY(-50%)
        }
        .info-trigger{
            bottom:0;
            right:0;
            width:45px;
            height:45px;
            line-height:45px;
            font-size:30px;
            color:#fff;
            border:1 solid px;
            text-align:center;
            z-index:9980
        }
        .info{
            display:none;
            position:fixed;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background-color:rgba(191,197,197,.94);
            padding:25%;
            z-index:9990
        }
        .info-text{
            width:50%;
            color:#fff;
            font-style:normal
        }