/* CSS Document */

body {
font-family: 'OpenSans-Regular local', sans-serif;
    font-size: 16px;
color: #eee;
        line-height: 24px;
        margin: 0px;
        background: #181818;

}



@font-face {
     font-family: 'OpenSans-Bold local';
     src: local('OpenSans-Bold'),
         url('/fonts/Open_Sans/OpenSans-Bold.ttf') format('woff2');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
}
 

@font-face {
     font-family: 'OpenSans-Regular local';
     src: local('OpenSans-Regular'),
         url('/fonts/Open_Sans/OpenSans-Regular.ttf') format('woff2');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
}



.container {
margin: 0 auto;
color: #eee;
}

.head {
margin: 0;
padding: 0px;

}

.head-logo {
margin: 20px 0px 40px 0px;
padding: 0px;
}
.head-logo .faq {
color: #181818;
}

#mylogo {
    margin: 40px 0px 20px 0px;
}

a {
    color: #fff;
}
a:hover {
    color: #ddd;
}


#sidebar {
    float: left;
    width: 260px;
    padding: 0px 20px 60px 20px;
    text-align: left;
}

#contenttext {
    padding: 7px 20px 40px 20px;
    text-align: left;
}



.subtitle {margin-top: 30px;}

.anschrift {
    margin: 20px 0px 60px 0px;
}

.content {
float: left;
    padding: 0px;
line-height: 26px;
    width: 100%;
}

.content p {
margin:0;
padding: 0px 0px 0px 0px;

}

.content img {
margin: 0px 0px 40px 0px;
}

H1 {
    font-size: 24px;
    color: #fff;
    line-height: 28px;
}
h2 {
    font-size: 22px;
    color: #eee;
}
h3 {
    font-size: 20px;
    color: #eee;
    margin: 0px 0px 6px 0px;
}

.impressum,
.datenschutz {
    margin-top: 400px;
    padding: 0px 40px;
}

/* NAVI */
.navi {
    margin-top: 60px;
}

.navi ul {
margin:0;
padding:0;
}

.navi ul li {
list-style: none;
font-size: 10px;
text-align: left;
margin: 0px 0px 0px 0px;
}

.navi ul li a:link,
.navi ul li a:visited {
color: #eee;
text-decoration: none;
}

.navi ul li a:hover {
color: #fff;
text-decoration: none;
}

.active {
color: #fff;
border-bottom: 1px solid #444;
}


#myBild {
    text-align: center;
    width: 250px;
}


#mylogo {

   -webkit-animation-delay: 3s;
    animation-delay: 3s;
    -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 3s; /* Firefox < 16 */
        -ms-animation: fadein 3s; /* Internet Explorer */
         -o-animation: fadein 3s; /* Opera < 12.1 */
            animation: fadein 3s;
}


.subtitle {
/*    transform: translatey(0px);
  animation: float 6s ease-in-out infinite;            
*/
}


@media only screen and (max-width: 1024px) {
    body {
        font-size: 18px;
    }
}


@media only screen and (max-width: 768px) {
    body {
        font-size: 18px;
        margin: 0px;
    }
    .container {
        margin: 0 auto;
        width: 100%;
        color: #eee;
    }
    .head-logo {
    padding: 0px;
        text-align: center;
    }
    #mylogo {

    }


    #sidebar {
    }

    #sidebar {
        display: none;
    }
    #sidebar-mobile {
    }

    #contenttext {
    }

    #myBild {
        text-align: center;
        width: 48%;
    }
    .navi {
        text-align: center;
    }
    .content {
        padding: 20px;
    }
}







@keyframes float {
  0% {
    text-shadow: 0 5px 15px rgba(0,0,0,0.6);
    transform: translatey(0px);
  }
  50% {
    text-shadow: 0 25px 15px rgba(0,0,0,0.2);
    transform: translatey(-5px);
  }
  100% {
    text-shadow: 0 5px 15px rgba(0,0,0,0.6);
    transform: translatey(0px);
  }
}


@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
    60% { transform: scale(1.1); }
    80% { transform: scale(1); }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}