@font-face{
	font-family:"Corbert W05 Bold";
	src:url("fonts/5987209/1fd709bd-e836-4b76-9a6b-8fced7a365c0.woff2") format("woff2"),url(".onts/5987209/ca94cb38-e8af-4ad5-a24c-ad1183974a1e.woff") format("woff");
}

body {
	margin: 0;
	background-color: #5F108C;
	color: #fff;
	font-family:"Corbert W05 Bold";
	font-size: 24px;
	line-height: 34px;
	overscroll-behavior: none;
	color: #ffffff;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

button {
	cursor: pointer;
	text-transform: uppercase;
}

#info {
	position: fixed;
	top: 0px;
	right: 0px;
	width: 98%;
	box-sizing: border-box;
	text-align: right;
}

#controls {
	position: fixed;
	padding: 12px 16px;
	top: 0px;
	width: 100%;
	height: 0px;
	box-sizing: border-box;
	text-align: left;
}

#overlay {
	position: fixed; /* Sit on top of the page content */
	display: none; /* Hidden by default */
	width: 100%; /* Full width (cover the whole page) */
	height: 100%; /* Full height (cover the whole page) */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5); /* Black background with opacity */
	z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
	cursor: pointer; /* Add a pointer on hover */
	font-size:2vw;
	font-family:"Corbert W05 Bold";
  }

#notSupported {
	width: 50%;
	margin: auto;
	background-color: #f00;
	margin-top: 20px;
	padding: 10px;
}

  #text, video{
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 32px;
	color: white;
	transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
  }

a, input, select {
	pointer-events: auto;
}

button
{
	border: 0;
	color: #000000;
	padding: 14px 16px;
	cursor: pointer;
	border-radius: 4px;
	font-family:"Corbert W05 Bold";
	position: relative;
	background-color: #FC9E2F;
	font-size: 24px;
	color: #000000;
	width: 150px;
	text-align: center;
	transition-duration: 0.4s;
	text-decoration: none;
	overflow: hidden;
	cursor: pointer;
}

button:hover {
	background-color: #DF2C5B;
	color: #ffffff;
  }

button:after {
	content: "";
	background: #f1f1f1;
	display: block;
	position: absolute;
	padding-top: 300%;
	padding-left: 350%;
	margin-left: -20px !important;
	margin-top: -120%;
	opacity: 0;
	transition: all 0.8s
  }

button:active:after {
	padding: 0;
	margin: 0;
	opacity: 1;
	transition: 0s
}

.dg.ac {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	z-index: 2 !important; /* TODO Solve this in HTML */
	font-family:"Corbert W05 Bold";
}

#renderCanvas {
  width: 100%;
  height: 100%;
  touch-action: none;
}

#textToSpeech {
  padding: 2.5px;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
}

#loadScreen {
	display: flex;
	position: fixed; /* Sit on top of the page content */
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-image: url('/images/load_screen.png');
	background-color: gray;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	background-size: contain;
	z-index: 9999;
  }

#loader {
	border: 16px solid #FC9E2F;
	border-radius: 50%;
	border-top: 16px solid #DF2C5B;
	width: 50px;
	height: 50px;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
	position: fixed;
  }

  @-webkit-keyframes spin {
	0% {
	  -webkit-transform: rotate(0deg);
	}
	100% {
	  -webkit-transform: rotate(360deg);
	}
  }

  @keyframes spin {
	0% {
	  transform: rotate(0deg);
	}
	100% {
	  transform: rotate(360deg);
	}
  }

#onboarding {
	position: fixed; /* Sit on top of the page content */
	display: none; /* Hidden by default */
	width: 100%; /* Full width (cover the whole page) */
	height: 100%; /* Full height (cover the whole page) */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	color: white;
	background-color: rgba(0,0,0,0.5); /* Black background with opacity */
	z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
	cursor: pointer; /* Add a pointer on hover */
	font-size:5vw;
	font-family:"Corbert W05 Bold";
	text-align: center;
}

.readAloudBtn{
	position: relative;
	width: 200px;
	margin-right: 1000px;
}

.readAloudBtn:hover{
	opacity: 50%;
}

#askQuestion{
	position: fixed ; /* Sit on top of the page content */
	display: none; /* Hidden by default */
	width: 100%; /* Full width (cover the whole page) */
	height: 100%; /* Full height (cover the whole page) */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	justify-content: center;
	background-color: rgba(0,0,0,0.5); /* Black background with opacity */
	z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
	cursor: pointer; /* Add a pointer on hover */
	font-size:1.5vw;
	font-family:"Corbert W05 Bold";
	}

	/* POPUP STYLING */

	#liveStreamingBox{
		position: absolute;
		z-index: 2;
		top: 86px;
		width: 100%;
		height: 700px;
	}

.pop-container {
	display: grid;
	grid-template-columns:
    1fr 1fr;
	grid-template-rows:
    1fr auto auto auto auto auto;
	grid-template-areas:
    'popHeader popHeader'
    'popPic popVid'
    'popText popText'
	'popTitle2 popTitle2'
	'popPic2 popVid2'
    'popText2 popText2';
	/* grid-auto-rows: minmax(100px, auto); */
	gap: 5px;
	}

.pop-container > div {
	text-align: center;
	}
.popHeader { grid-area: popHeader;
		min-height: 150px; }	
.popPic { grid-area: popPic; }
.popCentrePic { grid-area: 2 / 1 / 2 / 3;}
.tech2 { grid-area: 4 / 1 / 5 / 3;}
.popVideo { grid-area: popVid; }
.popText { grid-area: popText; }
.popTitleDiv2 { grid-area: popTitle2; }
.popPic2 { grid-area: popPic2; }
.popVideo2 { grid-area: popVid2; }
.popText2 { grid-area: popText2; }
.popText {
		color: black;
		font-size: 35px;
		padding: 10px;	
	}
	.popText2 {
		color: black;
		font-size: 35px;
		padding: 10px;	
	}

#popHeaderBackground{
	position: absolute;
	left: 0;
	width: 100%;
}
#popLogoDiv{
	position:absolute;
	margin: 20px 0px 0px 10px;
	width: 15%;
	min-width: 130px;
	/* background-color: #70CC72; */
	border-right: 1px solid rgba(255, 255, 255, 0.5);
	z-index: 1;
}
 #popTitleDiv{
	 position: relative;
	 margin: 20px auto 0px 140px;
	 width: 30%;
	 min-width: 200px;
 	 z-index: 1;
 }
 #popTitleText{
	 font-size: 20px;
 }

 #techLine{
	width: 100%;
	color: black;
 }

 #popTitleDiv2{
	position: relative;
	margin: 50px auto;
	text-decoration: underline;
	width: 30%;
	min-width: 200px;
	 z-index: 1;
}
#popTitleText2{
	font-size: 20px;
	color: black;
	text-align: center;
}

 #popCloseDiv{
	 position: absolute;
	 right: 24px;
	 top: 25px;
	 width: 100px;
	 color: #5F0F8C;
	 font-size: 33px;
 }
#popCloseTutton{
	position: relative;
	margin: 0px 0px 0px 30%;
	float: left;
}
 #popCloseCross{
	position: relative;
	margin: 14px 0px 0px 10px;
	float: left;
	width: 12px;
 }

#popLogo{
	width: 80%;
	
}

.popUpImage{
		position: relative;
		margin-top: 50px;
		width: 50%;
		
	}

.popUpContainer {
		position: absolute; /* Sit on top of the page content */
		display: none; /* Hidden by default */
		width: 100%; /* Full width (cover the whole page) */
		height: 100%; /* Full height (cover the whole page) */
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,0.8); /* Black background with opacity */
		z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
		cursor: pointer; /* Add a pointer on hover */
		font-size:3vw;
		font-family:"Corbert W05 Bold";	
		overflow: scroll;
	}

	::-webkit-scrollbar {
		width: 10px;
	  }

	.outerPop {
		position: relative;
		width: 80%;
		height: auto;
		margin: 40px auto 0px auto;
		background-color: rgba(255, 255, 255, 1);
	}

	.helpContent{
		position: absolute;
		left: 0; 
		right: 0; 
		margin-left: auto; 
		margin-right: auto; 
		width: 90%;
		height: 800px;
		color: black;
		line-height: normal;
		text-align: justify;
		margin: 0 auto;
		font-size:3vw;
		background-color: rgba(255, 255, 255, 0.9);
		justify-content: center;	
		text-emphasis-color: #000;
		box-shadow: -4px 4px 5px rgba(0, 0, 0, 0.3);
		border-radius: 5px;
		padding: 20px 30px;
		text-align: justify;
		scroll-behavior: auto;
		overflow: scroll;
	}
	
.iframeContent {
		width: 90%;
		max-width: 500px;
		height: 300px;
	}

	#alexa {
		padding-top: 100px;
	}
	

	@media only screen and (max-width: 1149px){
		#popCloseTutton{
			display: none;
		}
		#popCloseCross{
			position: absolute;
			right: 0px;
			top: -15px;
			float: left;
			width: 20%;
			z-index: 1;
		 }
	}
@media only screen and (max-width: 650px) {
	.pop-container {
		display: grid;
		grid-template-columns:
		1fr;
		grid-template-rows:
		1fr auto auto auto;
		grid-template-areas:
		'popHeader'
		'popVid'
		'popText'
		'popTitle2'
		'popVid2'
		'popText2';
		/* grid-auto-rows: minmax(100px, auto); */
		gap: 5px;
		}

		.outerPop {
			width: 100%;
			min-width: 90px;
		}

		#popCloseTutton{
			display: none;
		}

		#popCloseTutton{
			display: none;
		}
		 #popCloseCross{
			position: absolute;
			right: 0px;
			top: -15px;
			float: left;
			width: 20%;
			z-index: 1;
		 }

		 #popHeaderBackground{
			position: absolute;
			left: 0;
			width: 100%;
			height: 100px;
			z-index: 1;
		}

		.popUpImage{

			display: none;
		}

		.popPic{
			position: absolute;
			background-image: linear-gradient(to top, rgba(255,0,0,0), rgb(88, 37, 130)); 
			width: 100%;
			height: 220px;
		}
		.popVideo{
			margin-top: 10px;
			width: 110%;
		}

		.popCentrePic{
			position: relative;
			margin: -140px 0px 0px 0px;
			background-image: linear-gradient(to top, rgba(255,0,0,0), rgb(88, 37, 130)); 
			width: 100%;
			height: 220px;
		}
}

.sticky {
	-webkit-box-shadow: #DDD 0px 1px 2px;
	position: relative;
	background-color: #F4F39E;
	border-color: #DEE184;
	color: #000000;
	text-align: center;
	margin: 2.5em 0px;
	padding: 1.5em 1em;
	-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
	box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
	width: 250px;
	font-family: 'Indie Flower', cursive;
	font-family: 'Give You Glory', cursive;
	font-family: 'The Girl Next Door', cursive;
	font-family: 'Gloria Hallelujah', cursive;
  }
  .post-it {
	display: table;
	margin: 5em auto 0;  
  }
  .taped {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
  }
  .sticky.taped:after {
	display: block;
	content: "";
	position: absolute; 
	width: 110px;
	height: 30px;
	top: -21px;
	left: 30%;    
	border: 1px solid #fff;
	background: rgba(254, 254, 254, .6);
	-webkit-box-shadow: 0px 0 3px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 0 3px rgba(0,0,0,0.1);
	box-shadow: 0px 0 3px rgba(0,0,0,0.1);  
  }
  
  .note { 
  -webkit-box-shadow: #DDD 0px 1px 2px;
	position: relative;
	background-color: #F4F39E;
	border-color: #DEE184;
	text-align: center;
	margin: 1.5em auto;
	padding: 1.5em 1em;
	-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
	box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	-o-transform: rotate(2deg);
	-ms-transform: rotate(2deg);
	transform: rotate(2deg);
	width: 250px;
	font-size: 1em;
  }
  .note:after {
	display: block;
	content: "";
	position: absolute; 
	width: 110px;
	height: 30px;
	top: -21px;
	left: 30%;    
	border: 1px solid #fff;
	background: rgba(254, 254, 254, .6);
	-webkit-box-shadow: 0px 0 3px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 0 3px rgba(0,0,0,0.1);
	box-shadow: 0px 0 3px rgba(0,0,0,0.1);  
  }
  
  .grid-container {
	  display: grid;
	  grid-template-columns: auto auto auto auto;
	  padding: 10px;
	  grid-column-gap: 5px;
	  grid-row-gap: 5px;
	  width: 100%;
	}
  
	.center {
		margin: auto;
		width: 50%;
		border: 3px solid green;
		padding: 10px;
	  }
	 
	 @media screen and (max-width: 700px) {
		body {
		   padding: 0px 0 0 0;
		   width: 100%
		}
	 }
	 
	 a {
		color: inherit;
	 }
	 
	 .menu-item,
	 .menu-open-button {
		background: #000000;
		border-radius: 100%;
		width: 80px;
		height: 80px;
		margin-left: -40px;
		position: absolute;
		color: #FFFFFF;
		text-align: center;
		line-height: 80px;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		-webkit-transition: -webkit-transform ease-out 200ms;
		transition: -webkit-transform ease-out 200ms;
		transition: transform ease-out 200ms;
		transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
	 }
	 
	 .menu-open {
		display: none;
	 }
	 
	 .menu-open:checked + .menu-open-button .line-1 {
		-webkit-transform: translate3d(0, 0, 0) rotate(45deg);
		transform: translate3d(0, 0, 0) rotate(45deg);
	 }
	 
	 .menu-open:checked + .menu-open-button .line-2 {
		-webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
		transform: translate3d(0, 0, 0) scale(0.1, 1);
	 }
	 
	 .menu-open:checked + .menu-open-button .line-3 {
		-webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
		transform: translate3d(0, 0, 0) rotate(-45deg);
	 }
	 
	 .menu {
		position:fixed;
		top: 50;
		bottom: 150px;
		left: 150px;
		right: 0;
		width: 80px;
		height: 80px;
		text-align: left;
		box-sizing: border-box;
		font-size: 26px;
		z-index: 1;
	 }
	 
	 
	 /* .menu-item {
		transition: all 0.1s ease 0s;
	 } */
	 
	 .menu-item:hover {
		background: #EEEEEE;
		color: #3290B1;
	 }
	 
	 .menu-item:nth-child(3) {
		-webkit-transition-duration: 180ms;
		transition-duration: 180ms;
	 }
	 
	 .menu-item:nth-child(4) {
		-webkit-transition-duration: 180ms;
		transition-duration: 180ms;
	 }
	 
	 .menu-item:nth-child(5) {
		-webkit-transition-duration: 180ms;
		transition-duration: 180ms;
	 }
	 
	 .menu-item:nth-child(6) {
		-webkit-transition-duration: 180ms;
		transition-duration: 180ms;
	 }
	 
	 .menu-item:nth-child(7) {
		-webkit-transition-duration: 180ms;
		transition-duration: 180ms;
	 }
	 
	 .menu-item:nth-child(8) {
		-webkit-transition-duration: 180ms;
		transition-duration: 180ms;
	 }
	 
	 .menu-item:nth-child(9) {
		-webkit-transition-duration: 180ms;
		transition-duration: 180ms;
	 }
	 
	 .menu-open-button {
		z-index: 2;
		-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
		transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
		-webkit-transition-duration: 400ms;
		transition-duration: 400ms;
		-webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
		transform: scale(1.1, 1.1) translate3d(0, 0, 0);
		cursor: pointer;
		box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
	 }
	 
	 .menu-open-button:hover {
		-webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
		transform: scale(1.2, 1.2) translate3d(0, 0, 0);
	 }
	 
	 .menu-open:checked + .menu-open-button {
		-webkit-transition-timing-function: linear;
		transition-timing-function: linear;
		-webkit-transition-duration: 200ms;
		transition-duration: 200ms;
		-webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
		transform: scale(0.8, 0.8) translate3d(0, 0, 0);
	 }
	 
	 .menu-open:checked ~ .menu-item {
		-webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
		transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
	 }
	 
	 .menu-open:checked ~ .menu-item:nth-child(3) {
		transition-duration: 180ms;
		-webkit-transition-duration: 180ms;
		-webkit-transform: translate3d(0.08361px, -104.99997px, 0);
		transform: translate3d(0.08361px, -104.99997px, 0);
	 }
	 
	 .menu-open:checked ~ .menu-item:nth-child(4) {
		transition-duration: 280ms;
		-webkit-transition-duration: 280ms;
		-webkit-transform: translate3d(90.9466px, -52.47586px, 0);
		transform: translate3d(90.9466px, -52.47586px, 0);
	 }
	 
	 .menu-open:checked ~ .menu-item:nth-child(5) {
		transition-duration: 380ms;
		-webkit-transition-duration: 380ms;
		-webkit-transform: translate3d(90.9466px, 52.47586px, 0);
		transform: translate3d(90.9466px, 52.47586px, 0);
	 }
	 
	 .menu-open:checked ~ .menu-item:nth-child(6) {
		transition-duration: 480ms;
		-webkit-transition-duration: 480ms;
		-webkit-transform: translate3d(0.08361px, 104.99997px, 0);
		transform: translate3d(0.08361px, 104.99997px, 0);
	 }
	 
	 .menu-open:checked ~ .menu-item:nth-child(7) {
		transition-duration: 580ms;
		-webkit-transition-duration: 580ms;
		-webkit-transform: translate3d(-90.86291px, 52.62064px, 0);
		transform: translate3d(-90.86291px, 52.62064px, 0);
	 }
	 
	 .menu-open:checked ~ .menu-item:nth-child(8) {
		transition-duration: 680ms;
		-webkit-transition-duration: 680ms;
		-webkit-transform: translate3d(-91.03006px, -52.33095px, 0);
		transform: translate3d(-91.03006px, -52.33095px, 0);
	 }
	 
	 .menu-open:checked ~ .menu-item:nth-child(9) {
		transition-duration: 780ms;
		-webkit-transition-duration: 780ms;
		-webkit-transform: translate3d(-0.25084px, -104.9997px, 0);
		transform: translate3d(-0.25084px, -104.9997px, 0);
	 }
	 
	 .orange {
		background-color: #FC9E2F;
		box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
		text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
	 }
	 
	 .pink:hover {
		color: #FF79B8;
		text-shadow: none;
	 }

	 .pink {
		background-color: #f89cc7;
		box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
		text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
	 }

	 .black:hover {
		color: #cccccc;
		text-shadow: none;
	 }

	 .black {
		background-color: #999999;
		box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
		text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
	 }
	 
	 .orange:hover {
		color: #f7c184;
		text-shadow: none;
	 }
	 
	 .green {
		background-color: #70CC72;
		box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
		text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
	 }
	 
	 .green:hover {
		color: #70CC72;
		text-shadow: none;
	 }
	 
	 .red {
		background-color: #DF2C5B;
		box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
		text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
	 }
	 
	 .red:hover {
		color: #DF2C5B;
		text-shadow: none;
	 }
	 
	 .purple {
		background-color: #5F108C;
		box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
		text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
	 }
	 
	 .purple:hover {
		color: #C49CDE;
		text-shadow: none;
	 }

	 .info {
		background-color: #999999;
		box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
		text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
	 }
	 
	 .info:hover {
		color: #999999;
		text-shadow: none;
	 }
	 
	 .lightblue {
		background-color: #62C2E4;
		box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
		text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
	 }
	 
	 .lightblue:hover {
		color: #62C2E4;
		text-shadow: none;
	 }

	 h1{
		font-size:100%;
		font-weight:normal;
	  }
	  h2,p{
		font-size:50%;
		font-weight:normal;
	  }
	  ul,li{
		list-style:none;
	  }
	  ul{
		overflow:hidden;
		padding:3em;
	  }
	  ul li a{
		text-decoration:none;
		color:#000;
		background:#ffc;
		display:block;
		height:10em;
		width:10em;
		padding:1em;
		-moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
		-webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
		box-shadow: 5px 5px 7px rgba(33,33,33,.7);
		-moz-transition:-moz-transform .15s linear;
		-o-transition:-o-transform .15s linear;
		-webkit-transition:-webkit-transform .15s linear;
	  }
	  ul li{
		margin:1em;
		float:left;
	  }
	  ul li h2{
		font-size:100%;
		font-weight:bold;
		padding-bottom:10px;
	  }
	  ul li p{
		font-size:100%;
	  }
	  ul li a{
		-webkit-transform: rotate(-6deg);
		-o-transform: rotate(-6deg);
		-moz-transform:rotate(-6deg);
	  }
	  ul li:nth-child(even) a{
		-o-transform:rotate(4deg);
		-webkit-transform:rotate(4deg);
		-moz-transform:rotate(4deg);
		position:relative;
		top:5px;
		background:#cfc;
	  }
	  ul li:nth-child(3n) a{
		-o-transform:rotate(-3deg);
		-webkit-transform:rotate(-3deg);
		-moz-transform:rotate(-3deg);
		position:relative;
		top:-5px;
		background:#ccf;
	  }
	  ul li:nth-child(5n) a{
		-o-transform:rotate(5deg);
		-webkit-transform:rotate(5deg);
		-moz-transform:rotate(5deg);
		position:relative;
		top:-10px;
	  }
	  ul li a:hover,ul li a:focus{
		box-shadow:10px 10px 7px rgba(0,0,0,.7);
		-moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
		-webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
		-webkit-transform: scale(1.25);
		-moz-transform: scale(1.25);
		-o-transform: scale(1.25);
		position:relative;
		z-index:5;
	  }
	  ol{text-align:center;}
	  ol li{display:inline;padding-right:1em;}
	  ol li a{color:#fff;}


  .header1{
	width:100%;
	height:67px;
	background: #5F108C;
	padding: 0.5em;
  }
  .header2{
	width:100%;
	height:30px;
	background:#C49CDE;
	padding: 0.5em;
  }
  	  /* NEW EPG */

	#epgOverlay{
		position: fixed; /* Sit on top of the page content */
		display: none; /* Hidden by default */
		width: 100%; /* Full width (cover the whole page) */
		height: 100%; /* Full height (cover the whole page) */
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		cursor: pointer;
		background-color: rgba(0,0,0,.4);
	}

	  #epgContainer {
		  position:absolute;
		  width: 100%;
		  height: 600px;
		  background-image: linear-gradient(#f0dffa, white);
		  border-left: #FA9E30 4px solid;
		  border-bottom: #5F0F8C 4px solid;
		  border-top: #5F0F8C 4px solid;
		  overflow-y:scroll;
	  }

	  #epgHeader {
		position:fixed;
		width: 100%;
		min-height: 100px;
		background-color: #f0f5fb;
		border-radius: 0px 0px 20px 20px;
		box-shadow: 1px 1px 1px 1px #2e2e2e;
		z-index: 1;
	}

	#aaEpgLogoDiv {
		position: relative;
		margin-right: 10px;
		float: left;
		height: 80px;
		width: 200px;
		background-color: #5F0F8C;
		border-radius: 0px 0px 30px 0px;
		box-shadow: 1px 1px 1px 1px #636363;
	}

	.charLogo {
		position: absolute;
		margin: 20px 0px 0px 13px;
		width: 110px;
	}

	#TvGuideText {
		position: absolute;
		right: 0px;
		top: 10px;
		width: 80px;
		font-size: 15px;
		text-align: center;
		line-height: 15px;
		letter-spacing: 2px;
		color: white;
	}

	#epgGenreContainer {
		position: relative;
		height: 100%;
	}

	.genre {
		position: relative;
		float: left;
		text-align: center;
		display: inline-block;
		background-color: #707070;
		border-radius: 20px;
		padding: 5px 20px;
		line-height: 3px;
		margin-right: 5%;
		margin-left: 5px;
		margin-top: 5px;
		margin-bottom: 5px;
		color: white;
	}

	.picGenre {
		position: relative;
		float: left;
		width: 200px;
		background-color: #707070;
		border-radius: 20px;
		margin-right: 5%;
		margin-top: 5px;
	}

	#slBwLogo {
		width: 100%;
		margin-bottom: -6px;
	}

	#cvBwLogo {
		width: 50%;
		margin: 5px 45px;
	}

	.genreText {
		font-size:13px;
	}

	#epgContentContainer {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		width: 100%;
		top: 140px;	
		gap: 10px;
		margin-top: 150px;
	}

	#epgContentContainer > div {
		text-align: center;
		padding: 0px;
		height: 250px;
		width: 250px;
		margin:20px;
		border-radius: 40px;
	}

	#noContentMessage {
		position: absolute;
		margin-left: auto;
		margin-right: auto;
		left: 0;
		right: 0;
		text-align: center;
		top: 300px;
	}

	#noContentText {
		font-size: 20px;
		color: rgb(100, 100, 100);
	}

	#tagArrow {
		width: 50px;
	}

	 .epgThumbnail {
	    position: relative;
		border-radius: 10px 10px 0px 0px;
		margin: auto;
		bottom: -25px;
		width: 250px;
		/* height: 250px; */
		z-index: 0;
	}

	.playPic {
		position: absolute;
		bottom: 10px;
		left: 77px;
		width:100px;
		opacity: 0;

	}
	
	 .clickMe {
		position: absolute;
		width: 250px;
		height: 250px;
		top: 0;
		z-index: 0;
		border-radius: 40px;
	}
	.clickMe:hover {
		background-color: rgb(95, 16, 140, 0.95);
	} 

	 .tabText{
		position: absolute;
		width: 92%;
		height:60px;
		color: whitesmoke;
		bottom: -19px;
		line-height: 18px;
		padding: 10px;
		font-size: 14px;
		background-color: rgb(95, 16, 140);
		border-radius: 0px 0px 40px 40px;
	} 
	
	.invisibleTabText{
		position: relative;
		top: 0;
		transition: top ease 1s;
		color: whitesmoke;
		z-index: 1;
		line-height: 18px;
		padding: 10px;
		font-size: 14px;
		opacity: 0;
	}

	.clickMe:hover .invisibleTabText {
		opacity: 1;
		top: 60px;
	}

	.clickMe:hover .playPic{
		opacity: 1;
	
	}

	.clickMe:hover .tabText {
		opacity: 0;
	}

  	.videoTab {
		position: relative;
		background-color: rgb(124, 61, 160);
		border-radius: 25px;
		color: white;
  }

/* small screen epg */
  @media only screen and (max-width: 510px) {
	#epgContentContainer > div {
		text-align: center;
		padding: 0px;
		height: 250px;
		width: 90%;
		margin:20px;
		border-radius: 40px;
	}
	.playPic {
		left: 177px;
	}
	.epgThumbnail {
	    position: relative;
		border-radius: 10px 10px 0px 0px;
		margin: auto;
		bottom: -4px;
		width: 250px;
		/* height: 250px; */
		z-index: 0;
	}
	.clickMe {
		position: absolute;
		width: 104%;
		height: 250px;
		top: 0;
		z-index: 0;
		border-radius: 40px;
	}
	.clickMe:hover {
		width: 100%;
	} 
	.clickMe:hover .invisibleTabText {
		opacity: 1;
		top: 40px;
	}

	.clickMe:hover .tabText {
		opacity: 0;
	}
}

 /* NAV STYLING */

 #nav-button {
	position: fixed;
	width: 85px;
	right: 80px;
	bottom: 145px; 
	
}
#outNavContainer{
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.9);
	display: none;
	z-index: 10;
}
 #navContainer {
	position: absolute;
	z-index: 11;
	left: 50%;
	transform: translate(-50%, 0);
	width: 87%;
	height: 560px;
	border-radius: 0px 0px 20px 20px;
	box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.3);
	/* NICE GRADIENT */
	background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgb(106, 41, 118) 35%, rgb(255, 255, 255) 100%);
	/* background-image: linear-gradient(to bottom, rgb(241, 237, 221) , #f1efe5); */
 }

 #navHeader {
	 width: 100%;
	 height: 130px;
 }

 #navCloseButton {
	 margin: 20px;
 }

 #navWelcome {
	text-align: center;
	font-size: 20px;
	color: rgb(223, 223, 223);
}


 #navTiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	width: 100%;
	height: 400px;
	top: 140px;	
	gap: 20px;
	margin-top: 10px;
	overflow-x: auto;	
}

#navTiles > div {
	text-align: center;
	padding: 0px;
	height: 250px;
	width: 250px;
	margin:20px;
	border-radius: 40px;
}

.navTileImg{
	width: 100%;
	border-radius: 40px;
	box-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4);

}

.navTileDescription{
	position: absolute;
	left: 49%;
	transform: translate(-50%, 0);
	bottom: -12px;
	font-size: 14px;

}

.navTileDescriptionDiv{
	position: relative;
	margin-top: -72px;
	z-index: -1;
	height:100px;
	width: 250px;
	background-image: linear-gradient(to right, rgb(82, 43, 108) , rgb(136, 81, 172));
	border-radius: 0px 0px 40px 40px;
	box-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4);
}

#close-nav-button{
	position: fixed;
	z-index: 10;
	width: 50px;
	right: 20px;
	bottom: 20px;
	
	
}

#navTiles > div:hover .navTileDescriptionDiv {
	margin-top: -60px;    
	transition: margin-left .5s;
	-moz-transition: margin-left .5s; /* Firefox 4 */
	-webkit-transition: margin-top .5s; /* Safari and Chrome */
	-o-transition: margin-left .5s; /* Opera */
}

@media screen and (max-width: 700px) {

	#navTiles > div {
		position: relative;
		width: 80%;
		margin:10px 50px 200px 50px;
	}

	.navTileDescriptionDiv{
		width: 100%;
	}
	
 }

 .helpPageIcon{
	margin:10px;
}