@charset "utf-8";
/* CSS Document */

html, body {margin:0; padding:0; max-width:100%; scroll-behavior: smooth;
}

	@font-face {
    font-family: 'Dienstag';
    src: url('/fonts/DienstagMedium.woff2') format('woff2'),
        url('/fonts/DienstagMedium.woff') format('woff'),
		url('/fonts/DienstagMedium.eot') format('eot');
    font-weight: 700;
    font-style: normal;
	}

#header {position:fixed; width: 100%; top: 0;
min-height:18vw; background-color:#f2f2f2; border-bottom: 2px solid #566eb4;z-index:1600;
  }
  
#header img {max-height:18vw; }
.logo {position:relative; left: 0; max-height:18vw; background-color:#f2f2f2; z-index:1600; float:left;  }
.logo img{display:none;}
.logotxt {position:relative; float:left; max-height:18vw; font-family:'Montserrat', Verdana, Geneva, sans-serif; font-size:5.5vw; color:#000000; font-weight: normal; letter-spacing: -.1vw; line-height:1.0; margin-top: 6vw; margin-left:2vw; font-weight:300; }
.nav-container {position:relative; max-height:18vw; background-color:#000000; z-index:1600; float:right; text-align:right;}
.nav-container img {height:100%; width:auto;}

#container {position:fixed; width:100%; height: 100%;left:0; top:0; margin: 0;
z-index:-1;}

@media (orientation: landscape) {
  #container .vert img {display: none;}
    #container .horz img {position:fixed; max-width: 100%; z-index:-1;}
	  .logotxt .vert {display: none;}
}

@media (orientation: portrait) {
  #container .vert img {position:fixed; height: 190vw; width: auto; overflow:hidden; z-index:-1;}	
  #container .horz img {display: none;}
  .logotxt .horz {display: none;}

  }
 
  #myVideo {
 position: fixed;
  right: 0;
  bottom: 0;
max-width: 105%;
  min-height: 160vw;
  overflow:hidden;}
  
  .content {background: transparent;
  backdrop-filter: blur(12px); width:100%; height:100%; margin-top:130vw;  z-index:2;}
  .headline {text-align:right; background: rgba(255, 255, 255, 0.4);
  height:100%; width:100%;  border-top: 2px solid #BF202F;
  border-bottom: 2px solid #BF202F;}
  
  .boxes {
 display: flex;
  flex-wrap: wrap; /* Allow boxes to wrap to the next line */
  gap: 1rem; 
}

.box, .boxx, .boxa {
  flex: 1 1 calc(100% - 1rem); /* Each box takes up roughly 1/3 of the container */
  box-sizing: border-box;         /* Ensure padding and borders are included in the width */
}

.box2 {
  flex: 0 1 calc(25% - 1rem); /* Each box takes up roughly 1/3 of the container */
  box-sizing: border-box;         /* Ensure padding and borders are included in the width */
}

.box img, .box2 img, .boxx img, .boxa img {
  width: 100%;
  height: auto;
  display: block;
}
    
h1 {text-align:left; font-family:'Dienstag', Verdana, Geneva, sans-serif; font-size:9vw; color:#000000; font-weight: normal; letter-spacing: -.2vw; line-height:1.0; margin: 1.2vw 2vw; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);}
h2 {text-align:left; font-family:'Dienstag', Verdana, Geneva, sans-serif; font-size:6vw; color:#000000; font-weight: normal; letter-spacing: -.1vw; line-height:1.0; margin: 1.2vw 2vw; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);}
h3 {text-align:left; font-family:'Dienstag', Verdana, Geneva, sans-serif; font-size:5vw; color:#000000; font-weight: normal; letter-spacing: -.1vw; line-height:1.0; margin: 1.2vw 2vw; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);}
p {text-align:left; font-family:'Montserrat',Verdana, Geneva, sans-serif; font-size:5vw; color:#000000; font-weight: normal; line-height:1.1; margin: 1.2vw 2vw;text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);}
a:link {color: #000000; text-decoration:none;}
a:hover {color: #353535; text-decoration: underline;}
a:visited {color: #000000; text-decoration:none;}
ul {list-style-type: none;}

br {clear:both;}
.iframe-container {
        position: relative;
        padding-bottom: 56.25%; /* For a 16:9 aspect ratio (56.25% = 9/16) */
        overflow: hidden; 
    }
    .iframe-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
		background-color:transparent;
    }
.element
  {	width:20%;
	min-height:4.2vw;
	margin:.8vw auto;
	background: transparent;
  backdrop-filter: blur(12px); z-index:2;
					  }
					.element2
  {	width:100%;
	min-height:4.2vw;
	margin:0 auto 3vw auto;
background: transparent;
  backdrop-filter: blur(12px); z-index:2; clear:both;}  
					  	  
					  					
.element h1 {text-align:center;}
					  .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
      z-index: 1000;
      display: none;
    }
    .menu {
      position: fixed;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(15px);
	  
      padding: 20px;
      box-sizing: border-box;
      z-index: 1500;
      transition: left 0.2s ease;
    }
    .menu.active {
      left: 0;
    }
    .menu ul {
      list-style: none;
      padding: 0;
      margin: 30vw 0 0 0;
	 
    }
    .menu ul li {
      margin-bottom: 5.5vw;
    }
    .menu ul li a {
        text-decoration: none;
      width:20%;
	min-height:4vw;
	z-index:2;
	border-bottom:2px solid #BF202F;
	text-align:left; font-family:'Dienstag', Verdana, Geneva, sans-serif; font-size:7vw; color:#f2f2f2; font-weight: normal; letter-spacing: -.1vw; line-height:1.0; margin: .8vw .8vw;
    }
    .hamburger {
      position: fixed;
      top: 5vw;
      right: 6vw;
      cursor: pointer;
      z-index: 2000;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 9vw;
      height: 6.5vw;
    }
    .hamburger div {
      width: 100%;
      height: 2px;
      background-color: #000;
      transition: all 0.3s ease;
    }
    .hamburger.active div:nth-child(1) {
      transform: rotate(45deg) translate(50%, 50%);
    }
    .hamburger.active div:nth-child(2) {
      opacity: 0;
    }
    .hamburger.active div:nth-child(3) {
      transform: rotate(-45deg) translate(50%, -50%);
    }
	#footer {position:fixed; bottom: 0; left: 0; width: 100%; max-height:6vw; background-color:#000000; z-index:1600;
  }