@charset "utf-8";
/* CSS Document */
/* width */
/* ultrapulp stuff: */
.BGvid {
	position: fixed;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	z-index: -2;
	transition: filter 0.5s ease;
  }
  .track-video-landscape{
	position: fixed;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	z-index: -2;
  }
  .track-video-portrait{
	position: fixed;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	z-index: -2;
  }
  .BGvidFX {
	position: fixed;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	z-index: -1;
	transition: filter 0.5s ease;
	filter: hue-rotate(-90deg);
  }


  .UPbutton {
	margin: auto;
	display: block;
	padding-bottom: 10px;
	  max-width: 100%; /* Ensure the image doesn't exceed the container width */
 	 max-height: 100%;
  }
  .MENUbutton {
	margin: auto;
	display: block;
	padding-bottom: 10px;
	  max-width: 80px;
 	 max-height: 80px;
  }
  

  .content{
	width: 200px;
	margin-top: 50%;
	margin: auto;
	text-align: center;
  }

  .center-container {
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh; /* Full viewport height */
  }
  .left-container{
		margin-left: 10px;
		margin-top: 10px;
		z-index: 2;
		float: left;
		justify-content: left;
		align-items: left;
		height: 100vh; /* Full viewport height */
  }
  .tracks-space{
	display: flex;
	flex-wrap: nowrap;
  }
  .tracks-space > div{
	width: 50%;
	align-items: center;
  }
  .track-container {
	width: 50%;
	float: left;
  }
  .track-video {
	
	position:relative;
	justify-content: center;
	align-items: center;
	height: 100vh;
  }
  
  /* Use a media query to add a breakpoint at 800px: */
  @media screen and (max-width: 800px) {
	.left, .main, .right {
	  width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
	}
	
	.MENUbutton {
		padding-bottom: 5px;
		  max-width: 40px;
		  max-height: 40px;
	  }
  }


  .UPbutton:hover {
	z-index: 5;
	animation: shake 0.42s both;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
  }
  .MENUbutton:hover {
	z-index: 5;
	animation: shake 0.35s both;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
  }
  
  @keyframes shake {
	10%, 90% {
	  transform: translate3d(-2px, 1, 0);
	}
	
	20%, 80% {
	  transform: translate3d(3px, 6, 0);
	}
  
	30%, 50%, 70% {
	  transform: translate3d(-4px, -4px, 0);
	}
  
	40%, 60% {
	  transform: translate3d(3px, 3px, 0);
	}
  }

  body{
	overflow: hidden;
	margin: 0;
	height: 100%;
  }

  .video-container {
	display: flex;
	height: 100vh;
	width: 100vw;
	flex-direction: row;
  }
  
  .video-wrapper {
	flex: 1;
	position: relative;
	overflow: hidden;
  }
  
  video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 50%;
	max-height: 110%;
	
	object-fit: cover; /* Ensures cropping but no stretching */
  }

  @media screen and (max-width: 1800px){
	video {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		min-width: 50%;
		max-height: 100%;
		
		object-fit: cover; /* Ensures cropping but no stretching */
	  }
  }
  @media (max-width: 960px) {
	.video-container {
	  flex-direction: column; /* Stack videos vertically */
	}
	video {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		min-width: 100%;
		min-height: 100%;
		object-fit: cover; /* Ensures cropping but no stretching */
		transition: 0.3s ease;
	  }
	  
  	.track-video-landscape{
		display: none;
 	 }
	 

  }
  
  @media (min-width: 961px){

	.track-video-portrait{
		display: none;
 	 }
  }
  
  #vid1on,#vid2on{
	opacity: 0%;
	transition: 0.15s;
  }
  #vid1off,#vid2off{
	opacity: 100%;
	transition: 0.15s;
  }
  #vid1on:hover,#vid2on:hover{
	opacity: 100%;	
	transition: 0.15s;
  }
  #vid1off:hover,#vid2off:hover{
	opacity: 0%;
	transition: 0.15s;
  }
  


/* old stuff: */