html,
body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
}

.canteen-logo {
	max-width: 55%;
	position: fixed;
	margin: auto;
	left: 0;
	right: 0;
	text-align: center;
	top: 38%;
	width: 100%;
	z-index: 1;
}

/* New Opening Text */
.opening-text {
	position : fixed;
	bottom : 0;
	left : 40px;
	padding: 40px;
	z-index: 10;
	color : white;
	font-size: 18px;
	line-height: 24px;
	font-weight: bold;
	text-align: center;
}

@media screen and (min-width: 400px) {
	.opening-text {
		font-size : 21px;
		line-height : 28px;
	}	
}

@media screen and (min-width: 1000px) {
	.opening-text {
		font-size : 29px;
		line-height : 38px;
	}	
}

@media screen and (min-width: 1500px) {
	.opening-text {
		font-size : 38px;
		line-height : 48px;
	}	
}

@media screen and (min-width: 2000px) {
	.opening-text {
		font-size : 50px;
		line-height : 64px;
	}	
}

@media screen and (max-width: 768px) {
	.opening-text {
		left : 0px;
		padding : 15px;
	}	
}

.opening-text a {
	color : white;
}

.Loop {
  position: relative;
  height: 100%;
  overflow: auto;
}

section {
  position: relative;
  text-align: center;
  height: 100vh;
}

.video-background {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

.video-background iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
}

@-moz-document url-prefix() {
	.video-background iframe {
  	height: 101vh;
	}
}

@media (min-aspect-ratio: 16/9) {
  .video-background iframe {
    /* height = 100 * (9 / 16) = 56.25 */
    height: 56.25vw;
  }
}
@media (max-aspect-ratio: 16/9) {
  .video-background iframe {
    /* width = 100 / (9 / 16) = 177.777777 */
    width: 177.78vh;
  }
}

/*.scroll-panel {
	background-size: cover !important;
	height: 101vh;
	background-position: 50% 0 !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  overflow: hidden;
}*/

::scrollbar {
  display: none;
}

/*********menu toggle*********/

.navbar-header {
	width: 100%;
	background-color: transparent; 
  display: block;
  position: relative;
	height: 0; 
}

.bar {
	background-color: white !important;
}

#content-block {
	position: relative;
	overflow: hidden;
}

.parallax-slide {
	position: relative;
	height: 100vh;
}

.parallax-clip {
	height: 100%;
	position: absolute;
	width: 100%;
	left: 0px;
	top: 0px;
	/*clip: rect(auto, auto, auto, auto);*/
}

.fixed-parallax {
	background-size: cover !important;
	height: 101vh;
	background-position: 50% 0 !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  overflow: hidden;
	/* -webkit-transform: translateZ(0); /* necessary for iOS! */
}


@media only screen and (hover: none) and (pointer: coarse) and (max-width: 767px){
	html,
	body {
	  height: 100% !important;
	  overflow: hidden !important;
	  overscroll-behavior-x: none;
	  overscroll-behavior-y: none;
	}

.fixed-parallax {
	position: relative;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-size: cover !important;
	background-position: 50% 0 !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
	/* -webkit-transform: translateZ(0); /* necessary for iOS! */
}


	.canteen-logo {
		top: 40%;
		max-width: 85%;
	}

/*	.scroll-panel {
    background-attachment: scroll !important;
    background-position: center !important;
	}*/

	@supports (-webkit-touch-callout: none) {
		.parallax-clip {
			clip: rect(auto, auto, auto, auto) !important;
		}
		.fixed-parallax {
			position: fixed;
			background-attachment: unset !important;
			-webkit-transform: translateZ(0) !important; /* necessary for iOS! */
		}
		.Loop {
			overflow: scroll;
		  -webkit-overflow-scrolling: touch;
		}
	}

	@supports (-webkit-overflow-scrolling: touch) {
		.parallax-clip {
			clip: rect(auto, auto, auto, auto) !important;
		}
		.fixed-parallax {
			position: fixed;
			background-attachment: unset !important;
			-webkit-transform: translateZ(0) !important; /* necessary for iOS! */
		}

		.Loop {
			overflow: scroll;
		  -webkit-overflow-scrolling: touch;
		}
	}

}


@media only screen and (hover: none) and (pointer: coarse) and (min-width: 768px){
	html,
	body {
	  height: 100% !important;
	  overflow: hidden !important;
	  overscroll-behavior-x: none;
	  overscroll-behavior-y: none;
	}

.fixed-parallax {
	position: relative;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-size: cover !important;
	background-position: 50% 0 !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
	/* -webkit-transform: translateZ(0); /* necessary for iOS! */
}

	.canteen-logo {
		top: 35%;
		max-width: 79%;
	}

/*	.scroll-panel {
    background-attachment: scroll !important;
    background-position: center !important;
	}*/

	@supports (-webkit-touch-callout: none) {
		.parallax-clip {
			clip: rect(auto, auto, auto, auto) !important;
		}
		.fixed-parallax {
			position: fixed;
			background-attachment: unset !important;
			-webkit-transform: translateZ(0) !important; /* necessary for iOS! */
		}
		.Loop {
			overflow: scroll;
		  -webkit-overflow-scrolling: touch;
		}
	}

	@supports (-webkit-overflow-scrolling: touch) {
		.parallax-clip {
			clip: rect(auto, auto, auto, auto) !important;
		}
		.fixed-parallax {
			position: fixed;
			background-attachment: unset !important;
			-webkit-transform: translateZ(0) !important; /* necessary for iOS! */
		}

		.Loop {
			overflow: scroll;
		  -webkit-overflow-scrolling: touch;
		}
	}
}

@media only all and (max-width: 767px) { 
	html,
	body {
	  height: 100% !important;
	  overflow: hidden !important;
	  overscroll-behavior-x: none;
	  overscroll-behavior-y: none;
	}

.fixed-parallax {
	position: relative;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-size: cover !important;
	background-position: 50% 0 !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
	/* -webkit-transform: translateZ(0); /* necessary for iOS! */
}


	.canteen-logo {
		top: 40%;
		max-width: 85%;
	}

/*	.scroll-panel {
    background-attachment: scroll !important;
    background-position: center !important;
	}*/

	@supports (-webkit-touch-callout: none) {
		.parallax-clip {
			clip: rect(auto, auto, auto, auto) !important;
		}
		.fixed-parallax {
			position: fixed;
			background-attachment: unset !important;
			-webkit-transform: translateZ(0) !important; /* necessary for iOS! */
		}
		.Loop {
			overflow: scroll;
		  -webkit-overflow-scrolling: touch;
		}
	}

	@supports (-webkit-overflow-scrolling: touch) {
		.parallax-clip {
			clip: rect(auto, auto, auto, auto) !important;
		}
		.fixed-parallax {
			position: fixed;
			background-attachment: unset !important;
			-webkit-transform: translateZ(0) !important; /* necessary for iOS! */
		}

		.Loop {
			overflow: scroll;
		  -webkit-overflow-scrolling: touch;
		}
	}
}