/*
---------------------------------
    Toxilab Pages
    Version: 2020-07-16
--------------------------------- */

	#header {
	  position: fixed;
	  top: 0;
	  right: 0;
	  left: 0;
	  height: 100px;
	  margin: 0;
	  background-color: var(--baseColor);
	  overflow: visible;
	  z-index: 100;
	}
	
	#headerMenu {
		position: relative;
		margin: auto;
		margin-top: 5px;
		width: 100%;
    max-width: 1500px;
		height: 90px;
		overflow: hidden;
		text-align: center;
	}



	#workspace {
    position: relative;
		margin: auto;
		margin-top: 60px;
		width: 100%;
		min-height: calc(100vh - 120px);
		padding: 0;
		padding-bottom: 50px;
    text-align: center;
    /* border: 1px dotted #888; */
    z-index: 1;
	}

	#workspaceWrap {
	  padding-bottom: 240px;    /* Footer + LowBar height */
	}

	.contentWrap {
    position: relative;
		margin: auto;
		width: 100%;
		text-align: center;
    max-width: 1500px;
	}

	#footer {
		position: absolute;
	  bottom: 40px;
		width: 100%;
		min-height: 200px;
		padding-top: 40px;
		background-color: var(--baseColor);
		text-align: center;
		color: var(--baseText);
		overflow: hidden;
	}
	
	#lowBar {
		position: absolute;
	  bottom: 0;
		width: 100%;
		min-height: 30px;
		padding-top: 8px;
		border-top: 2px solid #666;
		background-color: #333;
		text-align: center;
		color: var(--baseText);
		font-size: 14px;
		overflow: hidden;
	}



	.video-container {
	  position: relative;
	  padding-bottom: 56.25%; /*16:9*/
	  padding-top: 30px; 
	  height: 0; 
	  overflow: hidden;
	}
	 
	.video-container iframe,
	.video-container object,
	.video-container embed {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	}

	.panorama {
		position: fixed;
		top: 100px;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: -1;
	}
	
	/* --- PRIMARY NAVIGATION BAR --- */
	#container {
		position: absolute;
		text-align: center;
		top: 5px;
		left: 22vw;
		width: 48vw;
		max-width: 1100px;
		/* transform:translateX(50%); */
		/* border: 1px solid #00ff00; */
		z-index: 999;
	}			
				
	#navInner {
		position: relative;
		display: inline-block;
		height: 48px;
		margin: auto;
		margin-top: 20px;
		margin-bottom: 20px;
		text-align: left;
		/* border: 1px solid #ff00ff; */
	}	
						
	nav {
		/* margin: 50px 0; */
		background-color: var(--baseColor);
	}

	nav ul {
		padding: 0;
	  margin: 0;
		list-style: none;
		position: relative;
	}
		
	nav ul li {
		display:inline-block;
		background-color: var(--baseColor);
	}

	nav a {
		display:block;
		padding:0 10px;	
		color: var(--baseText);
		font-size:22px;
		line-height: 48px;
		text-decoration:none;
		transition: color 300ms ease-out, background-color 300ms ease-out;				
	}

	li > a:only-child:hover {
		color:var(--themeColor1);
	}

	nav ul li ul li a { 
		font-size: 18px;
	}

	nav ul li ul li a:hover { 
		color: var(--themeColor1);
		background-color: #0e0e0f; 
	}

	/* Hide Dropdowns by Default */
	nav ul ul {
		display: none;
		position: absolute; 
		top: 48px; /* the height of the main nav */
	}
		
	/* Display Dropdowns on Hover */
	nav ul li:hover > ul {
		display:inherit;
	}
		
	/* Fisrt Tier Dropdown */
	nav ul ul li {
		width:220px;
		float:none;
		display:list-item;
		position: relative;
	}

	/* Second, Third and more Tiers	*/
	nav ul ul ul li {
		position: relative;
		top:-48px; 
		left:220px;
	}
	
	/* Change this in order to change the Dropdown symbol */
	nav ul li > a:after { content:  ' \2304'; color:#666; }
	nav ul li > a:only-child:after { content: ''; }			
	nav ul ul li > a:after { content:  ' ...'; color:#666; }
	nav ul ul li > a:only-child:after { content: ''; }			


	/*-- FONTAWESOME ICONS -- */
	#footer li .faIcon .fab {
		font-size: 24px;
		width: 24px;
		height: 24px;
	}

	#footer li .faIcon {
		display: inline-block;
		font-size: 24px;
		width: 24px;
		height: 24px;
		margin-right: 5px;
	}
	
	/* --- FOOTER NAVIGATION --- */

	#footer ul {
	  list-style-type: none;
	  margin: auto;
	  padding: 0;
	}
	#footer ul li {
	  display: inline-block;
	  vertical-align: top;
	  text-align: left;
	  color: var(--baseText);
	  font-size: 18px;
	  font-weight: 400;
	  padding: 0;
	  margin-right: 10px;
	  width: 20%;
	  height: 24px;
	}
	#footer ul li a:link, 
	#footer ul li a:visited {
	  text-decoration: none;
	  color: var(--baseText);
	  padding: 5px;
	}
	#footer ul li a:hover {
	  color: var(--baseText);
	}	
	#footer ul li ul li {
	  display: block;
	  width: 100%;
	  height: 24px;
	  vertical-align: top;
	  color: #888;
	  font-size: 14px;
	  font-weight: 400;
	  padding: 0px;
	  margin: auto;
	  margin-top: 10px;
	  margin-right: 10px;
	}	
	
	#footer ul li ul li a:link, 
	#footer ul li ul li a:visited {
	  text-decoration: none;
	  color: #888;
	  padding: 5px;
	}
	#footer ul li ul li a:hover {
	  color: var(--baseText);
	}		
	
	/* Change this in order to change the Dropdown symbol */
	#footer li > a:after { content:  ''; color:#666; }
	#footer li > a:only-child:after { content: ''; }			



	/* --- USER SETTINGS DROPDOWN --- */
	#settingsMenu {
		position: fixed;
		top: -1000px;
		right: 10px;
		width: 240px;
		min-height: 200px;
		padding: 10px;
		text-align: center;
		background-color: rgba(255,255,255,0.8);
		border-radius: 5px;
		border: 1px solid #808080;
				
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -o-transition-duration: 0.3s;		
		z-index: 2;
	}

	#settingsMenu h1,
	#settingsMenu h2,
	#settingsMenu h3,
	#settingsMenu h4,
	#settingsMenu h5 {
		text-align: left;
	}
	

	ul.userSettings,
	ul.userSettings ul {
		margin: 0;
		text-align: left;
	}

	ul.userSettings li {
		list-style-type: none;
		padding: 0 0 0 20px;
		color: var(--baseColor);
		font-size: 14px;
		line-height: 18px;
		font-weight: 600;
	}

	ul.userSettings li a {
		text-decoration: none;
		color: var(--baseColor);
	}

	ul.userSettings li a:hover {
		text-decoration: underline;
		color: #3066BE;
	}


	hr {
		width: 100%;
		border-top: 1px dotted #333;
		margin: 20px 0px 5px 0px;
	}
	
	



	/* --- MOBILE MENU --- */
	#mobileMenu {
		position: absolute;
		display: none;
		top: 16px;
		left: 10px;
		width: 50px;
		text=align: center;
		cursor: pointer;
	}

	#mobileMenu .hamburger {
		margin: auto;
		width: 30px;
		text-align: center;		
	}

	#mobileMenu .hamburger .onebar {
		position: relative; 
		background-color: #909090; 
		border-radius: 5px;
		width: 100%; 
		height: 4px; 
		margin-auto;
		margin-bottom: 5px;
	}

	#mobileSlide {
    position: absolute;
    display: none;
    top: 2px;
    left: -500px;
    min-height: 300px;
    width: 300px;
    padding: 20px;
    background-color: var(--baseColor);
    border: 1px solid #0e0e0f;
    border-radius: 0px 10px 10px 0px;
    transition: all 0.5s;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    z-index: 100;
	}

	#mobileSlide ul,
	#mobileSlide ul ul {
		margin: 0;
		text-align: left;
	}

	#mobileSlide ul li {
		list-style-type: none;
		padding: 0 0 0 20px;
		color: var(--baseText);
		font-size: 20px;
		line-height: 30px;
		font-weight: 600;
	}

	#mobileSlide ul li a {
		text-decoration: none;
		color: var(--baseText);
	}

	#mobileSlide ul li a:hover {
		text-decoration: none;
		color: #3066BE;
	}

	#mobileSlide li > a:after { content:  ''; color:#666; }
	#mobileSlide li > a:only-child:after { content: ''; }			












	
	/* --- COOKIE WARNING --- */
	#cookieAlert {
    position: fixed;
    display: block;
    min-height: 20px;
    width: 100%;
    min-width: 300px;
    padding: 10px 0px 10px 0px;
    top: -200px;
    left: 0;
    text-align: center;
    background-color: #333;
    color: var(--baseText);
    font-size: 14px;
    border-radius: 4px;
    transition: all 1s;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    border: 1px solid #000;
    z-index: 999;		
	}

	.cookieMsg {
		display: inline-block;
		margin: auto;
		vertical-align: top;
		width: 80%;
		max-width: 1200px;
		min-width: 190px;
		font-size: 14px;
		color: var(--baseText);
		text-align: left;
	}

	.cookieCtrl {
		display: inline-block;
		margin: auto;
		vertical-align: top;
		margin-left: 10px;
		width: 150px;
		text-align: left;
	}

	#formPrompt {
    color: var(--baseColor);
    font-size: 18px;
    text-align: left;
    margin-bottom: 20px;
	}

	#webform {
    position: absolute;
    display: block;
    height: 300px;
    width: 300px;
    padding: 20px;
    left: calc(50% - 170px);
    background-color: #aaa;
    border-radius: 30px;
    margin: 0 auto;
    top: -320vh;
    transition: all 1s;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    border: 1px solid #0e0e0f;
    z-index: 100;
	}

	.cancelBtn {
    float: right;
    height: 32px;
    width: 32px;
    margin-right: 5px;
    color: var(--baseText);
    border-radius: 50%;
    background-color: var(--themeColor1);
    font-size: 24px;
    line-height: 32px;
    padding: 0;
    text-align: center;
    cursor: pointer;
	}

	.msgNormal {
	    color: #008000;
	    font-size: 18px;
	    font-weight: bold;
	    background-color: #CCFFDD;
	    left: 0;
	    right: 0;
	    padding: 10px;
	    overflow: auto;	
	    text-align: center;			
	    border-radius: 32px;
	}
	.msgError {
	    color: #800000;
	    font-size: 18px;
	    font-weight: bold;
	    background-color: #FFCCDD;
	    left: 0;
	    right: 0;
	    padding: 10px;
	    overflow: auto;	
	    text-align: center;			
	    border-radius: 32px;
	}