a{color:inherit; text-decoration: none}
	::-moz-selection { /* Code for Firefox */
  color: white;
  background: #FE6533;
}

::selection {
  color: white;
  background: #FE6533;
}
	:root{--webwidth:900px}
	.btn{color:#FE6533; transition: border .5s , padding 1s; text-decoration: none; border:0px solid  rgba(255,119,0,0); border-radius:30px; padding: 15px 5px; cursor: pointer}
	.btn:hover{border:1px solid rgba(255,119,0,1.00); border-radius: 100px; padding: 20px 40px}
	body{margin:0; padding:0; background: black; box-sizing: border-box; font-family: 'Montserrat', sans-serif; color: white; overflow-x: hidden;}
	div, *{position: relative}
	*{box-sizing: border-box}
	.absolute{position: absolute}
	.full{left:0;top:0;width:100%; height: 100%}
	.translatemiddle{left:50%; top:50%; transform: translate(-50% , -50%)}
		h1{font-weight: 600; font-size: 2.5em}
	h3{font-weight: 500; font-size: 1em; line-height: 1.5em}
	p{font-weight: 400; line-height: 2.2em; font-size: 1em}
	h2{font-size:2.2em}
	
	.txt{width: 100%; padding: 30px; max-width:var(--webwidth); margin: 200px auto }

	@media only screen and (min-width: 1000px) {
	.desktophide{display:none}
	h1{font-weight: 600; font-size: 4em;}
	h3{font-weight: 500; font-size: 1.6em}
		p{font-weight: 200}
	}
	
	/*cover*/
	
	#cover{overflow: hidden; position: relative}
	#cover video{min-height: 100%; min-width: 100%; }
	#logo{width:200px; left: 30px; top:30px; }
	#logo img{width:100%; filter:drop-shadow(0px 2px 24px black);}
	.black{position: absolute; left:0; top:0; width:100%; height: 100%; background: black; background: linear-gradient(0deg, rgba(0,0,0,0.21332282913165268) 0%, rgba(0,0,0,0.43461134453781514) 36%, rgba(0,0,0,0.4374124649859944) 62%, rgba(0,0,0,0.19931722689075626) 100%);}
	#lines{position: absolute; display: flex; width:100%; height:100%;justify-content: center;align-items:center; left: 0%; flex-direction: column}
	#gradient{background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 80%, rgba(0,0,0,1) 100%); position: absolute; width:100%; height: 100%; left:0;top:0}
	#menu {position: absolute; right:50%; transform: translateX(50%); bottom:30px; color:#FE6533; transition: color .5s; cursor: pointer}
	#menu:hover{color:white}
	
	.fullWidth{
		width: 100vw;
		display:flex;
		align-items: center; justify-content: center;
		margin: 200px auto;
		padding:30px;
		overflow:hidden
	}
    .vidcontainer{flex-direction: column;}
    .vids{display: flex;gap: 10px;flex-direction: column;}
    @media only screen and (min-width: 1000px) {
        
        .vids{flex-direction: row;}
    }
    .vids img{width: 850px; transition: all .5s; }
    .vid{cursor: pointer;}
    .vid:hover img{ opacity:.3;}
    .vid:hover .play{ opacity:1; }
    .vids .play{width:100%;height:100%;left:0;top:0; position: absolute;
    display:flex;align-items:center; justify-content:center; transition: all .5s;
    opacity: 0;
    }
		.intro{ flex-direction: column; }
	.introtext{max-width: 600px;}
	.introimg{width:100%; overflow: hidden}
	.introimg img{width:100%}
	
	
	@media only screen and (min-width: 1000px) {
		
		.intro{ flex-direction: row-reverse;}
		#menu {top:0px; right:30px; bottom:auto; transform: translateX(0%); }
		.introimg{width:500px; overflow: visible}
	}
	/*plug*/
	#plug{width:100vw; height:800px; display: flex; justify-content:center; align-items: center; background: linear-gradient(0deg, black 0%, #202020 100%); overflow: hidden}
	.left{display: flex; flex-direction:column; width: 80%; align-items: center}
	.left h2, .left p{padding-top:30px; padding-bottom: 30px}
	
		#cord{width:150%; display: flex; height: 40px;align-self: flex-end;  margin-right: 400px; }
	.usb{ height:100%;}
	.cord{height:100%; width:220%; background:url("img/kord.png") repeat-x; background-size: contain; }
	
	.right{ height: 100%; display:none}
	.right img{height: 100%}
	
		@media only screen and (min-width: 1000px) {
.left h2, .left p{width: 600px; padding: 30px}
		.right{display:flex}	
			#plug{justify-content: space-between}
			
	}
	
	/*lens*/
	
	#lens{width:100vw; height: 800px; display: flex; align-items: center; justify-content: center; overflow:hidden}
	.lensbg{background: url("img/lens.jpg") no-repeat; background-size: 500%; background-position: top center; }
	
	@media only screen and (min-width: 1000px) {
		.lensbg{background-size: 100%;background-position: center; }
	}
	
	
	
	/*grid*/
	#lehrer{ height: 900px; width: 100vw; overflow: hidden;overflow:hidden}
	
		#grid{position:relative; width:100vw; height: 100%; display: grid;grid-template-columns: auto auto auto auto; min-width: 1000px; left:50%; transform: translateX(-50%)}

		.img{background-size: cover; background-position: center; width: 100%; height: 100%}
		
		.img:nth-child(9) {
grid-row: 2 / 4; grid-column: 2 / 4
}
		
		.hl{display: flex; text-align: center; justify-content: flex-end; height: 300px; flex-direction: column; position: absolute; left:0;top:0; align-items: center; color: white; width: 100%}
	
	
	/*loader*/
	.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
	
	
	/*newpageloeader*/
	

	
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}