/* NotoSans Font Licence */
/*
Copyright 2004 Google Corporation.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

@font-face {
	font-family: 'regularfont';
	src: url('fonts/NotoSans-Regular.woff2');
	src: local('Noto Sans Regular'), local('NotoSans-Regular'),
		url('fonts/NotoSans-Regular.woff2') format('woff2'),
		url('fonts/NotoSans-Regular.woff') format('woff'),
		url('fonts/NotoSans-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'headerfont';
	src: url('fonts/NotoSans-Bold.woff2');
	src: local('Noto Sans Bold'), local('NotoSans-Bold'),
		url('fonts/NotoSans-Bold.woff2') format('woff2'),
		url('fonts/NotoSans-Bold.woff') format('woff'),
		url('fonts/NotoSans-Bold.ttf') format('truetype');
}


html{
/* set to defaults */
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	/*vertical-align: baseline;*/
	/*background: transparent;*/
	font-family: regularfont;

	overflow-x: hidden;

	height: 100%;
}

body{
	background-color: #000;
	color: #f1f1f1;
	margin: 0;

	width: 100%;
	height: 100%;
	
	
}
a{
	text-decoration: none;
	color: inherit;
}
.inner-shadow{
	box-shadow: inset 0px 10px 8px -10px #222,
				inset 0px -10px 8px -10px #222;
}
p{
	margin-top: 0;
	letter-spacing: 1px;
	font-size: 22px;
}
heavy{
	font-family: headerfont;
	border-bottom: #f1f1f1 solid 3px;
	font-size: 26px;
	/*background-color: #f1f1f1;
	color: #111111;
	padding: 0 4px;*/
}
.float-right{
	float: right;
}
.float-left{
	float: left;
}
.flex-space-between{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	list-style: none;
}
.align-left{
  text-align: left;
}
.align-center{
  text-align: center;
}
.align-right{
  text-align: right;
}
.container{
	width: 100%;
	display: inline;
	text-align: left;
	margin: auto;
}
.inner-container{
	width: 70%;
	height: 100%;
	margin: auto;
}
@media screen and (max-width: 1080px){
	.inner-container{
		width: 80%;
	}
  .align-left{
    text-align: center;
  }
  .align-center{
    text-align: center;
  }
  .align-right{
    text-align: center;
  }
}
@media screen and (max-width: 720px){
	.flex-space-between:not(#footer-information-container){
		display: block;
	}
}



.background-light{
	background-color: #3C3C3C;
	color: #000;
}
.background-light-v{
	background-color: #f1f1f1;
	color: #000;
}
.background-dark{
	background-color: #111111;
	color: #f1f1f1;
}
.background-dark-v{
	background-color: #1D1D1D;
	color: #f1f1f1;
}
.background-none{
	background: none;
	color: #f1f1f1;
}
.background-gradient-dark{
	background: linear-gradient(#111111, #222222);
}


/* Navbar */
#header{
	width: 100%;
	top: 0;

	position: fixed;
	z-index: 120;

	letter-spacing: 1px;
}

#navbar{
	/*transform: translate(0, -70px); /*Change this in JS*/
	background-color: rgba(17, 17, 17, 0);

	-webkit-transition-duration: 	0.4s;
	-moz-transition-duration: 		0.4s;
	-ms-transition-duration: 		0.4s;
	-o-transition-duration: 		0.4s;
	transition-duration: 			0.4s;
}
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;

	z-index: 110;

	position: fixed;
	top: 0;
	width: 100%;
	height: 70px;
	line-height: 70px;
	font-size: 18px;
}

ul.topnav li {
	float: left;
	height: 100%;
}
ul.topnav li a{
  display: block;
  text-decoration: none;
	height: 100%;
	padding: 0px 18px;

	transition: 0.1s;
}
ul.topnav li a:hover{
	background-color: #161616;
}
ul li a.logo{
	height: 100%;
	vertical-align: middle;
	padding: 0;
}
li a.logo img{
	vertical-align: middle;
	height: 85%;
}
ul.topnav img{
	vertical-align: middle;
	height: 60px;
}



@media screen and (min-width: 721px){
	#mobile-navbar{ display: none; }
}
@media screen and (max-width: 720px){
	#navbar{ display: none; }
	#navbar-balancer{ display: none; }

	li a.logo img{
		vertical-align: middle;
		height: 100%;
	}
}
@media screen and (max-width: 420px){
	.mobnav .inner-container{
		width: 100%;
	}
}
/* Mobile Navbar */
ul.mobnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;

	z-index: 110;

	width: 100%;
	top: 0;

	font-size: 18px;
	line-height: 50px;

	box-shadow: 0px 1px 8px 0px #000;
}
ul.mobnav li {
	width: 100%;
}
ul.mobnav li a {
	display: block;
	padding: 8px 0px;
	text-decoration: none;
	height: 50px;
	width: 100%;
	z-index: 120;
}
ul.mobnav li a:not(.logo) {
	text-align: center;
}
ul.mobnav .logo{
	text-align: left;
	height: 60px;
	padding-left: 20px;
	width: 140px;
}
#mobile-buttons li a {
	max-width: 100%;
}

ul.mobnav li a:hover{
	background-color: #191919;
}
ul.mobnav #mobile-buttons{
	display: none;
}





.link-button a, input[type=submit].link-button{
	display: inline-block;
	padding: 10px 20px;
	margin-bottom: 0px;
	/*margin-left: -6px;*/
	border: solid 1px #f1f1f1;
	border-radius: 2px;
	font-family: headerfont;
	font-size: 18px;
	color: #f1f1f1;
	text-align: center;
	min-width: 180px;
	cursor: pointer;
	background-color: #3C3C3C;

	transition: 0.1s;
}
.link-button a:hover, input[type=submit].link-button:hover{
	background-color: #f1f1f1;
	color: #3C3C3C;

	transition: 0.1s;
}





/* Footer */
#footer-information-container{
	width: 100%;
	color: #f5f5f5;
	min-height: 60px;

	font-family: regularfont;
}
#footer-information-container a{
	font-family: headerfont;
}
#footer-information-container .inner-container{
	height: 100%;
}
#footer-information-container .footer-content{
	height: 100%;
	line-height: 60px;
}
@media screen and (max-width: 720px){
	#footer-information-container{
		min-height: 0px;
		padding: 14px 0;
	}
	#footer-information-container .inner-container .footer-content{
		width: 100%;
		text-align: center;
		line-height: 24px;

		margin: auto;
	}
	#footer-information-container .inner-container{

	}
}














/* Extra Page CSS */

.banner-container{
	position: relative;
  overflow: hidden;
	text-align: center;

	background-color: #020202;
	width: 100%;
	height: 100%;
}

.banner-container .banner-main{
	width: 100%;
	height: 100%;
	position: relative;
}
.banner-container .banner-main .banner-images{
	padding-top: 120px; /*account for navbar*/
	width: 100%;
	height: 100%;
	position: relative;
}
.banner-container .banner-main .para-obj{
  position: absolute;
	width: 100%;
	height: 100%;
	margin: auto;
	bottom: -40px;
}
.banner-container .banner-main .banner-images img{
	width: 100vw;
	min-width: 1280px;

	position: absolute;
	bottom: 60px;
	left: -9999px;
	right: -9999px;
	margin: 0 auto; /* 0 auto required for Edge/IE*/
}



.fog{
	position: absolute;

	margin: auto;
	top: 0;
	left: -9999px;
	right: -9999px;
	margin-left: auto;
	margin-right: auto;

	width: 100%;
	height: 100%;

	z-index: 10;
}
.fog #fog-1{
	position: absolute;
	width: 100%;
	height: 100%;
	background: url('images/Fog01.png');

	background-repeat: repeat;
	background-size: cover;

	animation: slideRight 2500s linear infinite;
}
.fog #fog-2{
	position: absolute;
	width: 100%;
	height: 100%;
	background: url('images/Fog02.png');

	background-repeat: repeat;
	background-size: cover;

	animation: slideRight 3500s linear infinite;
}
@keyframes slideRight{
  0%{
    background-position: 0px 0px;
  }
  100%{
    background-position: 100000px 0px;
  }
}
@keyframes slideLeft{
  0%{
    background-position: 0px 0px;
  }
  100%{
    background-position: -100000px 0px;
  }
}

.banner-container .down-arrow{
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;

	z-index: 95;
}
.banner-container .down-arrow img{
	width: 60px;
}

@keyframes example {
	0%		{transform: translate(0, 0);}
	10% 	{transform: translate(0, 0);}
	25% 	{transform: translate(0, 0);}
	40% 	{transform: translate(0, 0);}
	50% 	{transform: translate(0, 0);}
	100%	{transform: translate(0, 0);}

	20% 	{transform: translate(0, -16px);}
	30% 	{transform: translate(0, -8px);}
}
.bounce {
	animation-name: example;
	animation-duration: 4s;
	animation-delay: 2s;
	animation-iteration-count: infinite;
}

.social-icons{
	position: absolute;
	bottom: 24px;
	left: 12px;

	z-index: 110;
}
.social-icon{
	display: inline-block;
}
.social-icon img{
	height: 44px;
}

@media screen and (max-width: 720px){
	.hide-on-mobile, .team-image.hide-on-mobile{
		display: none;
	}
	.show-on-mobile, .show-on-mobile.hide-on-mobile{
		display: block;
	}
	
	.social-icons{
		position: absolute;
		bottom: 90px;
		left: 0;
		right: 0;

		z-index: 110;
	}
}
@media screen and (min-width: 720px){
	.hide-on-mobile{
		display: block;
	}
	.show-on-mobile{
		display: none;
	}
	
}
.banner-mobile{
	width: 100%;
	height: 100%;
}
.banner-mobile img{
	position: absolute;
	width: 70%;
	max-width: 300px;
	
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}




.content-container{
	width: 100%;
	text-align: left;
}
.content-section{
	padding: 100px 0 0px 0;
}
.content-section h3{
	margin: 0;
	line-height: 80px;
	font-size: 80px;
  text-shadow:
   -1px -1px 0 #f1f1f1,
    1px -1px 0 #f1f1f1,
    -1px 1px 0 #f1f1f1,
     1px 1px 0 #f1f1f1;
}
.content-section h3.h-01{
	color: #111111;
}
.content-section h3.h-02{
	color: #141414;
}
.content-section h3.h-03{
	color: #202020;
}

.content-section h2{
	line-height: 100px;
	max-width: 620px;
	margin: 0;
	margin-bottom: 40px;
	font-family: headerfont;
	font-size: 100px;
}
@media screen and (max-width: 720px){
	.content-section h2{
		font-size: 12vw;
		line-height: 12vw;
	}
	.content-section h3{
		font-size: 60px;
	}
}

.about-section a{
	text-decoration: underline;
}

.team-member{
	display: block;
	width: 100%;

	margin-bottom: 20px;
	padding-bottom: 40px;
}

.team-image{
	vertical-align: top;
	display: inline-block;
	width: 16vw;
	min-width: 200px;
}
.team-name{
	width: 100%;

	color: #f1f1f1;
	/*background: #f1f1f1;*/
	box-shadow: inset 0 0 0 3px #f1f1f1;
}
.team-name h4{
	font-weight: headerfont;
	font-size: 32px;
	width: 100%;
	margin: 0;
	margin-bottom: 18px;
	padding: 6px 0px;
	text-align: center;

	color: #111111;
  text-shadow:
   -1px -1px 0 #f1f1f1,
    1px -1px 0 #f1f1f1,
    -1px 1px 0 #f1f1f1,
     1px 1px 0 #f1f1f1;
}
.team-image img{
	width: 100%;
}
.team-text{
	vertical-align: top;
	display: inline-block;
	width: 50vw;
}
.team-text p{
	width: 100%;
}

@media screen and (max-width: 720px){
	.team-text{
		width: 100%;
	}
	p{
		font-size: 16px;
	}
}



#contact{
	width: 100%;
	text-align: center;
}