a:link		{color: #FFF;}
a:visited	{color: #FFF;}
a:hover		{color: #FFF;}
a:active	{color: #FFF;}

html {
	height: 100%;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: 100%;
}

/* Font  boost - Android Chrome */
html * {max-height:1000000px;}

body{
	background-color:#000;
	color:#FFF;
	font-family:arial;
	text-decoration-skip-ink: none;
	margin:0;
	padding:0;
}

@media(max-width: 1580px){
	html {
		font-size: 12.5px;
	}
}
@media(max-width: 980px){
	html {
		font-size: 10.5px;
	}
}

sup, sub {
	vertical-align: baseline;`
	position: relative;
	top: -0.4em;
}
sub{ 
	top: 0.4em; 
}

.wrap{
	display: inline-block;
	text-align:center;
	width:100%
}

.logo {
	margin-left:5%; 
	margin-top:4vh; 
	color:#ff3c00;
}

.heading {
	font-size:270%;
	margin-left:5%; 
	color:#ff3c00; 
	display: inline-block; 
	text-transform: uppercase;
}

.heading-topspace{
	margin-top:5vh; 
}
/* Mobile - Landscape */
@media screen and (orientation:landscape){
	.logo{
		margin-left:12.5%;
	}
	
	.heading{
		margin-left:12.5%;
	}
}
/* Monitor */
@media screen and (min-width: 980px){
	.logo{
		margin-left:12.5%;
	}
	
	.heading{
		margin-left:12.5%;
	}
}	

.list-style{
	margin-top:6px;
	margin-bottom:6px;
}

@media screen and (orientation:landscape){
	.list-style{
		margin-left: 6px;
		margin-right: 6px;
	}
}

.caption-style-1{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

.caption-style-1 li{
	display: inline-block;
	padding: 0px;
	position: relative;
	overflow: hidden;
}

.caption-style-1 li:hover .caption{
	opacity: 1;
}

.caption-style-1 img{
	padding:0px;
	margin:0px;
	width:100%;
	float: left;
	z-index: 4;
}

.caption-style-1 .caption{
	position: absolute;
	opacity: 0;
	width:100%;
	-webkit-transition:all 0.45s ease-in-out;
	-moz-transition:all 0.45s ease-in-out;
	-o-transition:all 0.45s ease-in-out;
	-ms-transition:all 0.45s ease-in-out;
	transition:all 0.45s ease-in-out;
}

.caption-style-1 .blur{
	background-color: rgba(0,0,0,0.65);
	width: 100%;
	height: 900px;
	z-index: 5;
	position: absolute;
}

.caption-style-1 .caption-text h1{
	text-transform: uppercase;
	font-size:140%;
}

.caption-style-1 .caption-text{
	font-size:180%;
	padding: 4px;
	margin:2px;
	z-index: 10;
	color: #fff;
	position: relative;
	height: 900px;
	text-align: center;
	top:10vh;
}


@media screen and (orientation:landscape){
	.caption-style-1 img{
		width:calc(48vh + 4.8vw);
	}
	.caption-style-1 .caption{
		width:calc(48vh + 4.8vw);
	}
}

@media screen and (orientation:landscape) and (max-device-width: 980px){
	.caption-style-1 img{
		margin-left:10%;
		width:80%;
	}
	.caption-style-1 .caption{
		left:10%;
		width:80%;
	}
}

.project{
	text-align: center;
	width:100%;
	overflow: hidden;
	margin:0; 
}

.project img{
   margin:0 -20%;
   width:140%;
}

@media screen and (orientation:landscape){
	.project img{
		margin:0;
		width:75%;
	}
}
@media screen and (orientation:landscape) and (min-width: 980px){
	.project img{
		text-align: left;
		margin:0;
		position: relative; 
		width:75%;
	}
}

.project-smaller{
	text-align: center;
	width:100%;
	overflow: hidden;
	margin:0; 
	margin-top:6vh; 
}

.project-smaller img{
	width:100%;
}

@media screen and (orientation:landscape){
	.project-smaller img{
		margin:0;
		width:75%;
	}
}
@media screen and (orientation:landscape) and (min-width: 980px){
	.project-smaller img{
		text-align: left;
		margin:0;
		position: relative; 
		width:60%;
	}
}

.project-smaller-portrait{
	text-align: center;
	width:100%;
	overflow: hidden;
	margin:0; 
	margin-top:6vh; 
}

.project-smaller-portrait img{
	width:75%;
}

@media screen and (orientation:landscape){
	.project-smaller-portrait img{
		margin:0;
		width:100%;
	}
}
@media screen and (orientation:landscape) and (min-width: 980px){
	.project-smaller-portrait img{
		text-align: left;
		margin:0;
		position: relative; 
		width:30%;
	}
}


.youtube-container{
	text-align:center; 
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625, then multiply by 0.75) */
}

@media screen and (orientation:landscape) and (min-width: 980px){
	.youtube-container{
		text-align:center; 
		position: relative;
		overflow: hidden;
		width: 75%;
		left: 12.5%;
		padding-top: 42.1875%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625, then multiply by 0.75) */
	}
}

.youtube-iframe{
	position: absolute;
	top: 0;
	left:0;
	width: 100%;
	height: 100%;
}

.textbox{
	font-size:160%;
	line-height: 130%;
	position: relative; 
	width: 90%; 
	left:5%; 
	top:10%; 
	text-align:left; 
	margin-top:6vh; 
	margin-bottom:6vh;
}

.textbox-about{
	font-size:160%; 
	line-height: 130%;
	position: relative;
	width: 90%; 
	left:5%; 
	top:10%; 
	margin-top:6vh; 
	margin-bottom:8vh; 
	text-align:left;
}

@media screen and (orientation: landscape){
	.textbox{
		left:12.5%; 
		width: 65%; 
	}
	.textbox-about{
		left:12.5%; 
		width: 65%; 
	}
}	

@media screen and (orientation:landscape) and (min-width: 980px){
	.textbox{
		left:12.5%; 
		width:50%;
	}
	.textbox-about{
		left:30%; 
		width: 40%; 
	}
}

.cardbox{
	font-size:250%;
	position: relative; 
	width: 90%; 
	left:5%; 
	top:10%; 
	background-color:rgba(255,255,255,0.15); 
	text-align:center; margin-top:4vh; 
	margin-bottom:4vh;
}

@media screen and (orientation: landscape){
	.cardbox{
		left:12.5%; 
		width: 75%; 
	}
}	

@media screen and (orientation:landscape) and (min-width: 980px){
	.cardbox{
		left:25%; 
		width:50%;
	}
}