@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap');


.webgl-content * {border: 0; margin: 0; padding: 0}
.webgl-content 
{
	
    position: absolute; 
    top: 70%; left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%);
}

.webgl-content .logo, .progress {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.webgl-content .logo {background: url('progressLogo.Light.png') no-repeat center / contain; width: 154px; height: 130px;}
.webgl-content .progress {height: 18px; width: 141px; margin-top: 90px;}
.webgl-content .progress .empty {background: url('progressEmpty.Light.png') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block;}
.webgl-content .progress .full {background: url('progressFull.Light.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;}

.webgl-content .logo.Dark {background-image: url('progressLogo.Dark.png');}
.webgl-content .progress.Dark .empty {background-image: url('progressEmpty.Dark.png');}
.webgl-content .progress.Dark .full {background-image: url('progressFull.Dark.png');}

.webgl-content .footer 
{
	margin-top: 5px; 
	height: 38px; 
	line-height: 38px; 
}
.webgl-content .footer .webgl-logo,.fullscreen {height: 100%; display: flex; background: transparent center no-repeat;}




.collapsible {
	background-color: #525f6b;
	color: #ffffff;
	cursor: pointer;
	padding: 18px;
	width: 100%;
	border-radius: 0px;
	text-align: center;
	font-family: Montserrat;
	font-size: 20px;
	justify-content: center;
	transition: 0.5s;
	
  }
  
  /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
  .active, .collapsible:hover {
	background-color: rgba(135, 206, 250, 0.7);
  }
  
  /* Style the collapsible content. Note: hidden by default */
  .instruct 
  {
	padding: 0 18px;
	background-color: rgba(136, 180, 207, 0.25);
	color: #ffffff;
	font-family: 'Poppins';
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-in
  }



body
{
	background-image: linear-gradient(to right, #3a4b5c 15%, #2c3e50 15%, #2c3e50 85%,#3a4b5c 85%);
}

/* The sidebar menu */
.sidenav {
	list-style-type: square; color: white ;
	height: 100%; /* Full-height: remove this if you want "auto" height */
	width: 160px; /* Set the width of the sidebar */
	position: fixed; /* Fixed Sidebar (stay in place on scroll) */
	z-index: 1; /* Stay on top */
	top: 0; /* Stay at the top */
	left: 0;
	overflow-x: hidden; /* Disable horizontal scroll */
	padding-top: 0px;
  }
  
  /* The navigation menu links */
  .sidenav a {
	padding: 15px 0px 50px 0px;
	
	text-decoration: none;
	font-size: 25px;
	color: #ffffff;
	display: block;
	font-family: Montserrat;
	transition: 0.3s;
  }
  
  /* When you mouse over the navigation links, change their color */
  .sidenav a:hover {
	color: #000000;
  }


.logo 
{
	text-align: center;
	font-size: 15px;
	color: #ecf0f1;
	font-size: 55px;
	font-family: 'Poppins';
	font-stretch: expanded;
}