@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;
}
/* POPUP */
.qAndaOverlay {
	position: fixed;
	top: 0;
	z-index: 1;
	height: 100%;
	width: 100%;
	display: none;
}

#qAndaOverlayHeader{
	position:fixed;
	height: 150px;
	width: 100%;
	background-color: #7EDBD4;
}

#searchPanel {
	position: absolute;
	left: 0px;
	z-index: 2;
}

#searchPanelBackground{
	position: fixed;
	width: 85%;
	height: 100px;
}

#searchPanelLogo {
	position: relative;
	float: left;
	width: 160px;
	margin: 10px;
}

#askTheAvatar{
	position: relative;
	float: left;
	margin: 30px;
	font-size: 15px;
}

#searchBar {
	position: relative;
	float: left;
	margin: 25px auto;
}

#qaSearchBar {
	border-radius: 20px;
	border: white 1px solid;
	width: 300px;
	padding: 8px;
}

#closePanel{
	position: fixed;
	right: 0px;
	width: 15%;
	z-index: 2;
}

#closePanelBackground{
	width:100%;
	height: 77px;
}

#popUpCloseText{
	position: relative;
	float: left;
	margin: -65px 0px 0px 20px;
	color: #5F108C;
	font-size: 19px;
}

#popUpClosePng{
	position: relative;
	float: left;
	margin: -53px 0px 0px 80px;
	width: 15px;
}

 #pumenuItem1{
	position: relative;
	float: left;
	background-color: #7EDBD4;
	width: 30%;
	height: 100%;
 }

 #menuText{
	position: absolute;
	bottom: 0px;
	right: 30px;
	color: #5F0F8C;
	letter-spacing: 1px;
	font-size: 14px;
 }

#pumenuItems{
	position: relative;
	width: 60%;
	height: 100%;
	float: left;	
}

 .qaTags{
	text-decoration: none;
	color: #5F0F8C;
	font-size: 15px;
    display:inline-block;
	margin: 103px 5px 0px 1%;
	width: 13%;
	text-align: center;
	background-color: #ebebeb;
	border-radius: 10px;
	box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.8);

}

 #qContainer{
	position: relative;
	top: 150px;
	float: right;
	height: 80%;
	width: 50%;
	overflow-y: scroll;
	scroll-behavior: auto;
 }

 .queTab01{
	position: relative;
	margin: 70px auto;
	width: 90%;
	padding-bottom: 30px;
	background-color:#1A1A17;
	border-radius: 25px;
	text-align: center;
 }

 .qpng{
	position:absolute;
	left: 10px;
	height: 50px;
	width: 50px;
	margin: 23px;	
 }

 .queText {
	position: relative;
	font-size: 16px;
	padding-top: 30px;
	padding-left: 40px;
	margin: 0px auto;
	width: 60%;
	text-align: left;
	line-height: 24px;
 }

 #dropDown{
	position: absolute;
	display: none;
	top: 110px;
	left: 20px;
	width: 35px;
	opacity: 60%;
 }

 #ButtonforTag{
	padding: 8px;
	border-radius: 50px;
 }

 ::-webkit-scrollbar {
	width: 10px;
  }
  /* Track */
  ::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px grey; 
	border-radius: 5px;
	display: none;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.1); 
	border-radius: 10px;
  }
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
	background: #5F0F8C; 
  }
@media screen and (max-width: 700px){
	#qContainer{
		position: relative;
		margin: 175px auto;
		display: block;
		height: 80%;
		width: 100%;
		overflow-y: scroll;
		scroll-behavior: auto;
	 }
	 #popUpClosePng{
		display: none;
	}
	
	 .queTab01{
		position: relative;
		margin: 20px auto;
		width: 90%;
		height: 100px;
		background-color:#1A1A17;
		border-radius: 25px;
		text-align: center;
	 }
}

 @media screen and (max-width: 1011px) {
	#searchBar {
		position: fixed;
		right: 10px;
		top: 70px;
	}
	#popUpCloseText{
		position: relative;
		float: left;
		margin: -65px 0px 0px 13px;
		color: #5F108C;
		font-size: 19px;
	}
	#qContainer{
		top: 180px;
	 }
	
	.queText {
		font-size: 15px;
		padding-top: 20px;
		padding-left: 40px;
		margin: 0px 0px 0px 53px;
		width: 60%;
		text-align: justify;
		line-height: 22px;
	 }
	
	#qaSearchBar {
		border-radius: 20px;
		border: #5F0F8C 1px solid;
		width: 300px;
		padding: 8px;
		background-color: #5F0F8C;
		color: white;	
	}

	#qaSearchBar::placeholder {
		color: white;
	}
	
	#pumenuItems {
		display: none;
		position: absolute;
		top: 150px;
		width: 200px;
		background-color: #7EDBD4;
		height: auto;
		border-radius: 0px 0px 10px 10px;
	}

	#pumenuItem1{
		position: relative;
		width: 100%;
		width: 200px;	
	 }

	#menuText{
		display: none;
	 }

	 #dropDown{
		display: block;	
	 }

	 .qaTags{
		position: relative;
		margin: 0px auto;
		border-top: #5F0F8C 1px solid;
		border-right: none ;
		width: 100%;
	 }
}

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:5vw;
	font-family:"Corbert W05 Bold";
  }

	#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";
		}

  #helpText{
	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;
	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:3vw;
	font-family:"Corbert W05 Bold";
  }

  .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;
}

#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;
}

#orangeButton
{
	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;
}

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

  #orangeButton: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
  }

  #orangeButton: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;
}

.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);
	 }

	 .mute {
		 background-color: #999999;
		 width: 80px;
		 height: 80px;
		 margin: 10px;
		 opacity: 50%;
	 }

	 .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;}

	  .sub_cc {
		font-family: Consolas, Menlo, Roboto Mono,
		DejaVu Sans Mono, inherit;
		font-weight: normal;
		font-size: 3vmin;
		color: white;
		background: black;
		position: fixed;
		top: 150px;
		padding: 15px;
		width: 100%;

		/* transform: translate(-10%, -50%); */
		animation-delay: 6.5s;
		-webkit-animation-duration: 1s;animation-duration: 1s;
		-webkit-animation-fill-mode: both;animation-fill-mode: both;
	 }

	 @-webkit-keyframes fadeOut {
		0% {opacity: 1;}
		100% {opacity: 0;}
	 }

	 @keyframes fadeOut {
		0% {opacity: 1;}
		100% {opacity: 0;}
	 }

	 .fadeOut {
		-webkit-animation-name: fadeOut;
		animation-name: fadeOut;
	 }

	 #nav-button {
		 position: fixed;
		 width: 85px;
		 right: 80px;
		 bottom: 145px; 
	 }

	 /* NAV STYLING */


	 #outNavContainer{
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.9);
		display: none;
	}
	 #navContainer {
		position: absolute;
		z-index: 1;
		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;
	 }