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

html, body {margin:0; padding:0; min-height: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; top: 0; left: 0; width: 100%; max-height:6vw; background-color:#f2f2f2; z-index:5000; border-bottom: 1px solid #BF202F;
  }
.logo {position:relative; left: 0; max-width:5.5vw; max-height:5.5vw; background-color:#f2f2f2; z-index:5000; float:left;  }
.logo img{max-height:5vw;}
.logotxt {position:relative; float:left; max-height:5.5vw; font-family:'Montserrat', Verdana, Geneva, sans-serif; font-size:1.5vw; color:#f2f2f2; font-weight: 300; letter-spacing: -.1vw; line-height:0.9; margin-top: 1.9vw; }
.nav-container {position:relative; right: 0; width: 23%; max-height:5.5vw; background-color:#000000; z-index:5000; float:right; text-align:right;}
.nav-container img {height:100%; width:auto;}

#container {position:fixed; width:100%; left:0; top:-6vw; margin: 0;}


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

}

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

  }
  
 
  #myVideo {
 /* position: fixed;
  right: 0;
  bottom: 0;*/
  min-width: 100%;
  min-height: 100%;
}

.content {
  background: transparent;
  width: 100%;
  padding-top: 30vw; /* Adjust spacing without using large margins */
  z-index: 1400; /* Ensure content appears above the video */
  position: relative; /* Proper positioning context */
  text-align: center; /* Center align the content */
}
 .headline {
  background: rgba(255, 255, 255, 0.4); /* Add contrast for visibility */
  width: 100%;
  height:100%;
    backdrop-filter: blur(12px);
  padding: 1vw 0; /* Add padding for spacing */
  position: relative;
  z-index: 1800; /* Place above all other content */
  border-top: 1px solid #BF202F;
  border-bottom: 1px solid #BF202F;
}
 
 .boxes {
	 margin:0 8vw;
 display: flex;
  flex-wrap: wrap; /* Allow boxes to wrap to the next line */
  gap: 1rem;       /* Optional: adds spacing between boxes */
}

.box {
	 
 flex: 0 1 calc(33.333% - 1rem); /* Each box takes up roughly 1/3 of the container */
  box-sizing: border-box;         /* Ensure padding and borders are included in the width */
  border: 1px solid #BF202F;
  flex-wrap: wrap;
}
.boxa {
	 
 flex: 0 1 calc(24.5% - 1rem); /* Each box takes up roughly 1/4 of the container */
  box-sizing: border-box;         /* Ensure padding and borders are included in the width */

  flex-wrap: wrap;
  }

.boxx {
	 
 flex: 0 1 calc(66.667% - 1rem); /* Each box takes up roughly 2/3 of the container */
  box-sizing: border-box;         /* Ensure padding and borders are included in the width */
  border: 1px solid #BF202F; 
  flex-wrap: wrap;
}
.boxxx {
	 
 flex: 0 1 calc(100% - 1rem); /* Each box takes up roughly all of the container */
  box-sizing: border-box;         /* Ensure padding and borders are included in the width */
  border-top: 1px solid #BF202F; 
  flex-wrap: wrap;
}

.box2 {
	 
 flex: 0 1 calc(12.5% - 1rem); /* Each box takes up roughly 1/8 of the container */
  box-sizing: border-box;         /* Ensure padding and borders are included in the width */
  border: 1px solid #BF202F; 
  flex-wrap: wrap;
}

.box img, .box2 img, .boxx img, .boxa img {
  width: 100%;
  height: auto;
  display: block;
}
 
h1 {
  font-family: 'Dienstag', Verdana, Geneva, sans-serif;
  font-size: 4vw;
  text-align: right; /* Ensure the headline is to the right */
  color: #000000; /* Black text */
  font-weight: normal;
  letter-spacing: -0.2vw;
  line-height: 1.0;
  margin: 0 2vw .6vw 2vw; /* Remove conflicting margins */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Text shadow for visibility */
}
h2 {font-family:'Dienstag', Verdana, Geneva, sans-serif; font-size:2.5vw; text-align: right; /* Ensure the headline is to the right */ color:#000000; font-weight: normal; letter-spacing: -.1vw; line-height:1.0; margin: .6vw 2vw; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);}
h3 {font-family:'Dienstag', Verdana, Geneva, sans-serif; font-size:2vw; text-align: left; /* Ensure the headline is to the right */ color:#000000; font-weight: normal; letter-spacing: -.1vw; line-height:1.0; margin: .6vw 2vw; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);}
.box h2, .boxx h2, .boxa h2 {font-family:'Dienstag', Verdana, Geneva, sans-serif; font-size:2.3vw; text-align: left; /* Ensure the headline is to the right */ color:#000000; font-weight: normal; letter-spacing: -.1vw; line-height:1.0; margin: .8vw; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);}
.box h3, .boxx h3 {font-family:'Dienstag', Verdana, Geneva, sans-serif; font-size:1.6vw; text-align: left; /* Ensure the headline is to the right */ color:#f2f2f2; font-weight: normal; letter-spacing: -.1vw; line-height:1.0; margin: .8vw; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);}
.boxa h3 {font-family:'Dienstag', Verdana, Geneva, sans-serif; font-size:1.4vw; text-align: left; /* Ensure the headline is to the right */ color:#f2f2f2; font-weight: normal; letter-spacing: -.1vw; line-height:1.0; margin: .8vw; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);}
p {text-align:left; font-family:'Montserrat', Verdana, Geneva, sans-serif; font-size:1.25vw; color:#000000; font-weight:; line-height:1.0; margin: .8vw 8vw; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); font-weight:200;}
.box p, .boxx p {text-align:left; font-family:'Montserrat', Verdana, Geneva, sans-serif; font-size:1.25vw; color:#000000; line-height:1.0; margin: .8vw; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); font-weight:300;}
.boxa p {text-align:left; font-family:'Montserrat', Verdana, Geneva, sans-serif; font-size:1vw; color:#000000; line-height:0.9; margin: .8vw; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); font-weight:300;}
a:link {color: #000000; text-decoration:underline;}
.boxa a:link {color: #000000; text-decoration:none;}
a:hover, .boxa 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:42px;
	margin:8px auto;
	background: transparent;
  backdrop-filter: blur(12px); z-index:2;
  border-right:1px solid #BF202F;
	border-bottom:1px solid #BF202F;
					  }
					.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: 3000;
      display: none;
    }
    .menu {
      position: fixed;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
background: transparent;
  backdrop-filter: blur(15px);
	  text-shadow: 1.5px 1.5px 4px rgba(0, 0, 0, 0.4);
      padding: 20px;
      box-sizing: border-box;
            transition: left 0.2s ease; z-index: 3000;
    }
    .menu.active {
      left: 0;
    }
    .menu ul {
      list-style: none;
      padding: 0;
      margin: 10vw 0 0 0;
	 
    }
    .menu ul li {
      margin-bottom: 1.9vw;
    }
    .menu ul li a {
      text-decoration: none;
      width:20%;
	min-height:42px;
	z-index:2;
	border-bottom:2px solid #BF202F;
	text-align:left; font-family:'Dienstag', Verdana, Geneva, sans-serif; font-size:2.6vw; color:#f2f2f2; font-weight: normal; letter-spacing: -.1vw; line-height:1.0; margin: 1.2vw .8vw;
    }
    .hamburger {
      position: fixed;
      top: 1.5vw;
      right: 2.5vw;
      cursor: pointer;
      z-index: 3000;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 3vw;
      height: 2.5vw;
    }
    .hamburger div { 
      width: 100%;
      height: 2px;
      background-color: #000;
      transition: all 0.25s 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 {width: 100%; max-height:6vw; background-color:#000000;   }