@charset "utf-8";
/* Orphaned Media 2.0 Ho */



/* PHONE SCREENS (max-hieght:550px)  */
@media screen and (max-width : 448px){
 .video-container {
  left: 0%;
  position: relative;
  width: 350px; /* Width of the iframe video */
  max-width: 350px;
  height: 250px; /* Height of the iframe video */
  justify-content: center; /* Center the container horizontally */
  align-items: center;
  background-color: transparent;
  margin: 0 20px;
  overflow: auto;
	overflow-y: scroll;
}

/* Custom scrollbar */
.video-container::-webkit-scrollbar {
  width: 10px;
  background-color: transparent;
}

.video-container::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 5px;
}

.video-container::-webkit-scrollbar-thumb:hover {
  background-color: #999;
}

.video-container::-webkit-scrollbar-thumb:active {
  background-color: #666;
}

.video-container .video-block {
  position: absolute;
  left: 0;
  width: 25px;
  background-color: #ccc;
  cursor: pointer;
  display: none; /* Initially hide the blocks */
}

.video-container .video-block.selected {
  background-color: red;
}

.video {
  position: absolute;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s, transform 0.5s;
  justify-content: center;
  display: flex;
  width: 100%; /* Match the width of the container */
  height: 100%; /* Match the height of the container */
}
	iframe {
		width: 100%;
		height: 100%;
	}
	
 /* actualy mobile stuff */
	main {
  		display: flex;
  		flex-direction: column;
  		align-self: center;
  		align-content: center;
  		justify-content: center;
 		width: auto;
		text-align: center;
		flex-wrap: wrap;
		height: auto;
		 margin-bottom: 12em;
	}
	body {
	display: block;
	height: 100%;
	width: auto;
	align-content: center;
	justify-content: center;
	align-items: center;
	background-color: rgba(79,79,79,1);	
	text-rendering: optimizeLegibility;
	flex-direction: column;
	overflow: auto;
}
	
	
	/* Videos Formatting*/	
.SkateClips {
		display: flex;
		justify-content: center;
		align-items: center;
		align-self: center;
		width: 100%;
		height: auto;
		flex-wrap: wrap;
	}
.SkateClipsTitle {
		display: flex;
		width: 250px;
		height: 80px;
		
	}
.GameClipsTitle {
		display: flex;
		font-size: 1em;
		justify-content: center;
		color: white;
		text-decoration: underline;
	}
.ImageTitleHolder {
		display: block;
		justify-content: center;
		padding-top: 7em;
	}
.TheVideos {
	display: flex;
	width: 100%;
	list-style-type: none;
	align-content: center;
	flex-wrap: wrap;
	text-decoration: none;
	text-decoration-line: none;
	justify-content: center;
}
.TheVideos2 {
	display: flex;
	width: 100%;
	list-style-type: none;
	flex-wrap: wrap;
	text-decoration: none;
	text-decoration-line: none;
	justify-content: center;

}
.TheVideos2 ul {
		display: flex;
		text-decoration: none;
	}
.TheVideos2 li {
		background-image: url("../images/BordersBGs/PhoneVidBorder.png");
		background-repeat: repeat-x;
		margin: 0em;
		border: 2px solid black;
		width: 150px;
		height: 180px;
		justify-content: center;
		align-content: center;
	}
	.TheVideos ul {
		display: flex;
		text-decoration: none;
		width: 100%;
		height: 100%;
	}
.TheVideos li {
	/*	background-image: url("../images/BordersBGs/PhoneVidBorder.png"); 		doesnt fit anymore*/
		background-repeat: repeat-x;
		margin: 0em;
		border: 2px solid black;
		width: 100%;
		height: 100%;
		justify-content: center;
		align-content: center;
	}
	.ListTitle {
	display: flex;
	text-rendering: optimizeLegibility;
	text-align: center;
	color: white;
	font-size: 2em;
	text-decoration: underline;
	width: 100%;
	height: auto;
	justify-content: center;
	}

/* END Videos Formatting */
	

.Holder {
		display: flex;
		width: 100%;
		height: auto;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		padding-top: 5.5em;
	}
	.Holder2{
		display: flex;
		width: 100%;
		flex-wrap: wrap;
	}
.Welcome {
	display: flex;
	align-content: center;
	justify-content: center;
	text-rendering: optimizeLegibility;
	text-align: center;
	color: white;
	font-size: 2em;
	flex-wrap: wrap;
	padding-top: 2.5em;
	
}
.Intro {
	display: inline-flex;
	align-content: center;
	justify-content: center;
	text-rendering: optimizeLegibility;
	color: white;
	font-size: 1em;
	flex-wrap: wrap;
	}
.Banner {
	display: block;
	opacity: 0%;
	width: 100%;
	}
.DaTop {
	display: inline-flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	width: 100%;
	height: auto;
	position: absolute;
	top: 0;
}
.DaBackground {
		display: flex;
		width: 100%;
		height: 100%;
		justify-content: center;
		flex-direction: column;
	}
.HomeMobile {
		display: none;
		opacity: 0%;
	}

	/* START NAV */
header {
	display: -flex;
	justify-content: center;
	align-items: center;
	height: auto;
	position: absolute;
	top: 0;
	width: 100%;
}
	
	nav {
	display: flex;
	height: auto;
	width: 100%;
	}
nav ul {
	display: inline-flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	align-self: center;
	position: relative;
	width: 100%; 
	height: auto;
	border: 0;
	
	}
nav li {
	display: inline-flex;
	width: 80px;
	height: 80px;
	}
nav li a {
	display: inline-flex;
	justify-content: center;
	text-align-last: center;
	}
	nav li a img {
	display: inline-flex;
	width: 80px;
	height: 80px;
	}
	
.Title {
	display: flex;
	text-rendering: optimizeLegibility;
	text-align: center;
	color: white;
	font-size: 1.5em;
	text-decoration: underline;
	width: 100%;
	height: auto;
	justify-content: center;

}
.Information {
	color: white;
	font-size: 1em;
	}
.SocialsContainer {
		display: flex;
		list-style-type: none;
		justify-content: center;	
	}
	.SocialsList {
		display: flex;
		justify-content: center;
		align-content: center;
		flex-wrap: wrap;
		width: 100%;
	}
	.SocialsList li{
		display: flex;
		font-size: 1.5em;
		width: 100%;
		margin-top: 2em;
		justify-content: center;
		text-align: center;
		margin-right: 2em;
	}
	.IconImage {
		display: flex;
	}
	.DaFooter {
	display: flex;
	justify-content: center;
	align-items: center;
	align-self: center;
	height: auto;
	position: absolute;
	bottom: 0;
	width: 100%;
	}
footer {
	display: flex;
	height: auto;
	width: 100%;
	align-self: center;
	bottom: 0;
	}
footer ul {
	display: inline-flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	align-self: center;
	position: relative;
	width: 100%; 
	height: auto;
	border: 0;
	}
footer li {
	display: inline-flex;
	width: 80px;
	height: 80px;
	}
footer li a {
	display: inline-flex;
	justify-content: center;
	text-align-last: center;
	}
	footer li a img {
	display: inline-flex;
	width: 80px;
	height: 80px;
	}
	
}


					/* 			----------------------------- 	END PHONE SCREEN FORMATTING 		-----------------------*/

												/* --------------------------------------------------*/
		
													/* -----Actual Page for Desktop widths ---------- */

@media screen and (min-width:449px) {
.video-container {
  left: 35%;
  position: relative;
  width: 640px; /* Width of the iframe video */
  max-width: 640px;
  height: 360px; /* Height of the iframe video */
  display: flex;
  justify-content: center; /* Center the container horizontally */
  align-items: center;
  background-color: transparent;
  margin: 0 20px;
  overflow: auto;
	overflow-y: scroll;
}

/* Custom scrollbar */
.video-container::-webkit-scrollbar {
  width: 10px;
  background-color: transparent;
}

.video-container::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 5px;
}

.video-container::-webkit-scrollbar-thumb:hover {
  background-color: #999;
}

.video-container::-webkit-scrollbar-thumb:active {
  background-color: #666;
}

.video-container .video-block {
  position: absolute;
  left: 0;
  width: 25px;
  background-color: #ccc;
  cursor: pointer;
  display: none; /* Initially hide the blocks */
}

.video-container .video-block.selected {
  background-color: red;
}

.video {
  position: absolute;
  top: 0;
  opacity: 0;
  transition: opacity 0.5s, transform 0.5s;
  justify-content: center;
  display: flex;
  width: 100%; /* Match the width of the container */
  height: 100%; /* Match the height of the container */
}
iframe {
  width: 100%;
  height: 100%;
}
.video-block {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 24px;
  background-color: rgba(0, 0, 0, 0.5);
  transform: translate(0%, 0%);
}
.video-block.dragging {
  user-select: none;
}
body {
  background-color: rgba(79, 79, 79, 1);
  display: block;
  justify-content: center;
  align-items: center;
  align-content: center;
  width: auto;
  height: 100%;
  overflow: auto;
}

main {
  display: flex;
  flex-direction: column;
  align-self: center;
  align-content: center;
  justify-content: center;
  width: auto;
  margin-bottom: 12em;
  height: auto;
}
.DaBackground {
		display: block;
		background-image: url("../images/BordersBGs/BGReels.png");
		background-repeat: repeat-x;
	}
	
	
	/* Video Formatting and borders*/
	.SkateClips {
		display: block;
		justify-content: center;
	}
	.SkateClips img {
		display: flex;
		justify-content: center;
		width: 450px;
		height: 80px;
	}
	.ImageTitleHolder {
		display: flex;
		justify-content: center;
		margin-bottom: 15em;
	}
	.TheVideos {
	display: flex;
	width: 100%;
	list-style-type: none;
	align-content: center;
	flex-wrap: wrap;
	text-decoration: none;
	text-decoration-line: none;
	justify-content: center;

}

	.TheVideos ul {
			text-decoration: none;
	}
.TheVideos li {
		background-image: url("../images/BordersBGs/border.png");
		background-repeat: repeat-x;
		margin: 0em;
		border: 2px solid black;
		width: 560px;
		height: 345px;
		justify-content: center;
		align-content: center;
	}
.TheVideos2 {
	display: flex;
	width: 100%;
	list-style-type: none;
	align-content: center;
	flex-wrap: wrap;
	text-decoration: none;
	text-decoration-line: none;
	justify-content: center;

}
.TheVideos2 ul {
			text-decoration: none;
	}
.TheVideos2 li {
		background-image: url("../images/BordersBGs/border.png");
		background-repeat: repeat-x;
		margin: 0em;
		border: 2px solid black;
		width: 560px;
		height: 345px;
		justify-content: center;
		align-content: center;
	}


.GameClipsTitle {
		display: flex;
		font-size: 2.5em;
		justify-content: center;
		color: white;
		text-decoration: underline;
	}


.vidborder {
	display: block;
	align-items: center;
	justify-content: center;
	color: white;
	width: 100%;
	height: 1px;
	line-height: 0px;

}
	.ListTitle {
	display: flex;
	text-rendering: optimizeLegibility;
	text-align: center;
	color: white;
	font-size: 2.5em;
	text-decoration: underline;
	width: 100%;
	height: auto;
	justify-content: center;
	padding-right: 2em;
	}
	iframe {
		width: 560px;
		height: 315px;
		padding-top: 1em;
	}
	/* END Video Formatting*/
.Holder {
		justify-content: center;
		width: 450px;
		display: block;
		flex-direction: column;
		text-align: center;
		margin-left: 40%;
	
	}
		.Holder a{
		color: cornflowerblue;
	}
	.Holder a:visited {
		color: cornflowerblue;
	}
.Welcome {
	display: inline-flex;
	flex-wrap: wrap;
	text-rendering: optimizeLegibility;
	text-align: center;
	color: white;
	font-size: 2.5em;
	text-decoration: underline;
	width: 100%;
	height: 30px;
	justify-content: center;
}
.Intro {
	display: inline-flex;
	flex-wrap: wrap;
	text-align: center;
	color: white;
	font-size: 1.5em;
	width: 350px;
	justify-content: center;
	align-self: center;
	}

img {
	display: inline-block;
}
.DaTop {
	display: flex;
	align-content: center;
	align-items: center;
	background-image: url("../images/BordersBGs/BGTEST.png");
	background-repeat: no-repeat;
	width: 100%;
}
.DaBottom {
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	width: 100%;
	padding-top: 10%;
	bottom: 0;
	background-color: transparent;
	}
	
	/*  -------------------------THE NAVIGATION BAR ----------------  */
header {
	
	display: block;
	justify-content: center;
	align-items: center;
	width: 100%;
	flex-direction: row;	
}
nav {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	position: absolute;
	top: 0;
}
ul {
	list-style-type: none;
	
}
nav ul {
	
	display: flex;
	list-style-type: none;
	justify-content: center;
	text-decoration-color: white;
}


nav li {
	
	width: 10em;
	height: 10em;
	text-transform: uppercase;
	font-size: 1em;
}
nav li a {
	display: flex;
	justify-content: center;
	position: relative;
	font-family: "Westwood LET";
	font-size: 1.5em;
	text-align-last: center;
}	
nav a {
	color: white;
	font-family: "Westwood LET";

	
}
nav a:visited {
	color: white;
	font-family: "Westwood LET";

}
	
.Title {
	display: inline-block;
	text-rendering: optimizeLegibility;
	text-align: center;
	color: white;
	font-size: 2.5em;
	text-decoration: underline;
	width: 100%;
	height: 0px;
}
.Information {
	padding-top: 1em;
	color: whitesmoke;
	font-size: 1.5em;
	}
	
	
.SocialsContainer {
		display: flex;
		list-style-type: none;
		justify-content: center;	
	}
.SocialsList {
		display: flex;
		justify-content: center;
		align-content: center;
		flex-wrap: nowrap;
		width: 100%;
	
	}
.SocialsList li{
		display: flex;
		font-size: 1.5em;
		width: 100%;
		margin-top: 2em;
		justify-content: center;
		text-align: center;
		margin-right: 2em;
		flex-wrap: wrap; 
		color: whitesmoke;
	}
	.SocialsList a {
	color: whitesmoke;
	text-decoration: none;
	}
	.SocialsList a:visited {
	color: whitesmoke;
	text-decoration: none;
	}
	
	
	.IconImage {
		display: flex;
	}
	
	
	/* FOOTER */
	.DaFooter {
	display: flex;
	justify-content: center;
	align-items: center;
	align-self: center;
	height: auto;
	position: absolute;
	bottom: 0;
	width: 100%;
	}
.TimeStamp {
	display: flex;
	width: auto;
	height: auto;
	align-content: center;
	justify-content: center;
	}
footer {
	display: block;
	justify-content: center;
	align-items: center;
	width: 100%;
	flex-direction: row;
	bottom: 0;
	padding-top: 5em;
	}
footer ul {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	position: absolute;
	border: 0;
	}
footer li {
	display: flex;
	width: 10em;
	height: 10em;
	}
footer li a {
	display: flex;
	justify-content: center;
	position: relative;
	text-align-last: center;
	}
		/* END FOOTER */
	
}