html{overflow-x:hidden;}
body {
  margin: 0;
  padding: 0;
/*  Background fallback in case of IE8 & down, or in case video doens't load, such as with slower connections  */
 background:#000;
}


h1,h2,h3{font-family: 'dosisregular',Arial;}

a, a .main,a .sub{transition:color 0.5s;outline:0 !important;color:#e74d0c;}
a:hover,.nav-content a:hover .sub,.nav-content a:hover .main{color:#999 !important;transition:color 0.5s;}

p{margin-bottom:20px;color:#e74d0c;  font-family: 'dosisregular';}


video#backgroundvid { 
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background-size: cover;  
}

.second-page-content, .imprint-page-content,.privacy-page-content,.video-page-content{background:white;transition:right 0.5s,opacity 0.5s;opacity:0;width:431px;position:fixed;height:711px;top:50px;right:-230px;}
.second-page-content.active,.imprint-page-content.active,.privacy-page-content.active,.video-page-content.active{padding:40px 20px;background:white;transition: right 0.5s,opacity 0.5s;opacity:1;width:391px;height:711px;position:fixed;z-index:2;top:50px;right:50px;}
.close,.impressum,.privat,.close-video{position:absolute;top:20px;right:20px;width:30px;height:30px;border-radius:50%;}
.imprint-page-content.active {z-index:4;overflow-y:auto;overflow-x:hidden;}
.imprint-page-content.active a,.privacy-page-content.active a{word-break:break-all;}
.privacy-page-content.active {z-index:5;overflow-x:hidden;overflow-y:auto;}
/* Nav */

nav{background:url('../img/nav-bg.png') 0 0 no-repeat transparent;width:431px;height:315px;position:fixed;;z-index:1;top:50px;right:50px;}
.nav-content a {text-decoration: none !important;}
.nav-content a .main,.nav-content.second .main a{font-family: 'dosisregular',Arial;font-size:38px;text-transform: uppercase; color:#e74d0c;padding:0px 15px;text-decoration: none;line-height:1;letter-spacing:2px;}
.nav-content.second .main a{font-family: 'dosislight',Arial;}
.nav-content a .sub,.nav-content.second .sub a{font-family: 'HoeflerTitling-SemiboldItalic',Arial;font-size:32px;color:#e74d0c;text-indent: 105px;display: block;line-height:1;letter-spacing:2.5px;}
.first{position:relative;top:10px;}
.second{position:relative;top:54px;}
.third{position:relative;top:94px;}
.dsgvo-menu { padding: 10px;
        position: absolute;
        right: 40px;
        bottom: 50px;
        background: none;
        border: none;
        outline: none !important;z-index:101;cursor:pointer;
      }
      .dsgvo-menu-wrapper a{font-family: 'dosisregular',Arial;font-size:38px;margin-right:10px;text-transform: uppercase; color:#e74d0c;padding:5px 15px;background:#fff;text-decoration: none;line-height:1;letter-spacing:2px;} 
.dsgvo-menu-wrapper {z-index:1;position:absolute;bottom:55px;right:-700px;transition: 1s ease-in-out;}
.dsgvo-menu-wrapper.active{position:absolute;bottom:55px;right:100px;transition: 1s ease-in-out;z-index:1;}
.dsgvo-menu span{ display: block;
        width: 30px;
        height: 2px !important;
        background: #fff;margin-bottom:5px;
        transition: 300ms ease-in-out;
        position: relative;
         transform: rotate(0deg);
        top: 0;
        opacity: 1;
      }

.dsgvo-menu.active span {
   opacity: 1;
   transform: rotate(-45deg);
   transition: 300ms ease-in-out;
   top:6px;
  
}


 .dsgvo-menu.active span:nth-child(2) {
        opacity:0;
        transition: 300ms ease-in-out;
    }

    .dsgvo-menu span:nth-child(2) {
        transform: rotate(0deg);
        top: 0px;
    }

  

     .dsgvo-menu.active span:nth-child(3) {
        opacity: 1;
          transform: rotate(45deg);
           top:-7px;

    }





/* -----
SVG Icons - svgicons.sparkk.fr
----- */

.svg-icon {
  width: 1.5em;
  height: 1.5em;
}

.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
  fill: #e74d0c;
  transition:fill 0.5s;
}

.svg-icon:hover path{
  fill:#999 !important;
  transition:fill 0.5s;
}


.svg-icon circle {
  stroke: #e74d0c;
  stroke-width: 1;
}



/* Fonts */



@font-face {
    font-family: 'dosislight';
    src: url('../fonts/dosis-light-webfont.woff2') format('woff2'),
         url('../fonts/dosis-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'dosisregular';
    src: url('../fonts/dosis-regular-webfont.woff2') format('woff2'),
         url('../fonts/dosis-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
  font-family: 'HoeflerTitling-SemiboldItalic';
  src: url('../fonts/HoeflerTitling-SemiboldItalic.eot');
  src: url('../fonts/HoeflerTitling-SemiboldItalic.eot?#iefix') format('embedded-opentype'),
    url('../fonts/HoeflerTitling-SemiboldItalic.woff2') format('woff2'),
    url('../fonts/HoeflerTitling-SemiboldItalic.woff') format('woff'),
    url('../fonts/HoeflerTitling-SemiboldItalic.ttf') format('truetype'),
    url('../fonts/HoeflerTitling-SemiboldItalic.svg#HoeflerTitling-SemiboldItalic') format('svg');
  font-weight: normal;
  font-style: normal;
}

@media only screen and (max-width:767px) and (orientation: portrait){
nav {background-size: contain;width:auto;max-width:100%;right:0;top:20px;position:relative;}
body{margin:0 20px;}
.nav-content a .main, .nav-content.second .main a{font-size:28px;}
.nav-content a .sub, .nav-content.second .sub a{font-size:20px;text-indent: 80px;}
.dsgvo-menu {right:20px;bottom:20px;}
h1 {font-size:20px;}
h1 {font-size:16px;}
}

@media only screen and (max-width:340px) and (orientation: portrait){
.first{position:relative;top:6px;}
.second{position:relative;top:30px;}
.third{position:relative;top:53px;}
.nav-content a .sub, .nav-content.second .sub a{font-size:20px;text-indent: 68px;}
}
@media only screen and (min-width:341px) and (max-width:374px) and (orientation: portrait){
.first{position:relative;top:8px;}
.second{position:relative;top:42px;}
.third{position:relative;top:78px;}
}
@media only screen and (min-width:375px) and (max-width:414px) and (orientation: portrait){
.first{position:relative;top:10px;}
.second{position:relative;top:50px;}
.third{position:relative;top:90px;}
}
@media only screen and (min-width:414px) and (max-width:767px) and (orientation: portrait){
.first{position:relative;top:12px;}
.second{position:relative;top:60px;}
.third{position:relative;top:110px;}
.nav-content a .sub, .nav-content.second .sub a{font-size:20px;text-indent: 95px;}
}
@media only screen and (max-width:767px){
.second-page-content.active,.imprint-page-content.active,.privacy-page-content.active{width:auto;max-width:431px;height:auto;position:absolute;z-index:2;margin:20px;top:0px;right:0px;}
.dsgvo-menu-wrapper.active a,.dsgvo-menu-wrapper a {font-size:20px;display:block;margin-bottom:5px;}
.dsgvo-menu-wrapper,.dsgvo-menu-wrapper.active{bottom:20px;}
}

@media only screen and (max-width:767px) and (orientation: landscape){
nav{position:absolute;margin-bottom:30px;}
}
@media only screen and (max-width:500px) and (orientation: landscape){
nav{right:0;left:25px;}
}