﻿/* Move down content because we have a fixed navbar that is 50px tall */
body {
	width: 100vw;
    padding: 0;
    margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	background-color: #fff700;
	text-align:center;
}
p{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
}
.fixed-top {
	width:100vw;
}
ul li{
	display:inline;
}
img{
	width:100%;
	width: -moz-fit-content;
	max-width:fit-content;
}
.img-top{
	display: none;
	z-index: 99;
}
.nav-item:hover .img-top {
	display: inline;
}
.nav-item:hover .img-bot {
	display: none;
}
section.gemu, section.fcl, section.tt, section.dfl, section.contact{
	display: none;
}
.project-description{
	text-align:left;
	width:50%;
	margin:25px auto;
}
.vid{
	width:55%;
	margin:0 auto;
}
.fluid-width-video-wrapper{
	border-style: solid;
}
.title{
	transform:rotate(-90deg);
	position:relative;
	top:120px;
	left:-100px;
	display:block;
	width: -moz-fit-content;
	width:fit-content;
	margin:0;
	padding:0;
}
.titlebg{
	transform:rotate(90deg);
	float:left;
	position:relative;
	top:-110px;
	left:45px;
	z-index:-20;
}
.link1{
	float:left;
	position:relative;
	display:inline-block;
	width: -moz-fit-content;
	width:fit-content;
	margin:0 1% 0 23%;
	padding:0;
}
.link2{
	float:left;
	position:relative;
	display:inline-block;
	width: -moz-fit-content;
	width:fit-content;
	margin:0 0 0 3%;
	padding:0;
}
.linkbg{
	float:left;
	position:relative;
	top:-30px;
	z-index:-20;
}
h2{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	text-transform: uppercase;
	font-size:14pt;
	color: white;
	margin:0;
	padding:0;
}
h1{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size:14pt;
	color: white;
	position:relative;
	display:block;
	margin:0;
	padding:0;

}
h3{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size:14pt;
	display:block;
	margin:0;
	padding:0;

}
.social{
	margin:0 1%;
}
@media only screen and (max-width: 850px) {

	body {
		position:static;
		-ms-transform: translate(0%,0%);
		transform: translate(0%,0%);
		width: 100vw;
		padding: 0;
		margin: 0;
		background-color: #fff700;
		text-align:center;
	}
	.collapse{
		display:none;
	}
	ul li{
		display:block;
		margin:0 auto;
		text-align:center;
	}
	ul{
		margin-block-start: 0px;
		margin-block-end: 0px;
		margin-inline-start: 0px;
		margin-inline-end: 0px;
		padding-inline-start: 0px;}
	img{
		width:80%;
		width: -moz-fit-content;
		max-width:fit-content;
	}
	.nav-item{
		width:75%;
		width: -moz-fit-content;
		max-width:fit-content;
	}
	.vid{
		width:100%;
		margin:0 auto;
	}
	.fluid-width-video-wrapper{
		border-style: none;
	}
	.project-description{
		text-align:left;
		width:80%;
		margin:0px auto 50px auto;
	}.title{
		transform:rotate(0deg);
		top:0;
		left:10%;
		margin:2% 0;
	}
	
	h2{
		text-align:left;
		font-family: Arial, Helvetica, sans-serif;
		font-weight: normal;
		text-transform: uppercase;
		font-size:14pt;
		color: white;
		margin:0 0 0 8px;
		padding:0;
	}
	.link1{
		float:left;
		position:relative;
		display:inline-block;
		width: -moz-fit-content;
		width:fit-content;
		margin:0 1% 0 5%;
		padding:0;
	}
	.link2{
		float:left;
		position:relative;
		display:inline-block;
		width: -moz-fit-content;
		width:fit-content;
		margin:0 1% 0 5%;
		padding:0;
	}
	.titlebg{
		transform:rotate(90deg);
		position:relative;
		top:-116px;
		left:27%;
		z-index:-20;
	}
	@media only screen and (orientation: landscape){
		ul li{
			display:inline;
		}
		.link2{
			float:left;
			position:relative;
			display:inline-block;
			width: -moz-fit-content;
			width:fit-content;
			margin:0;
			padding:0;
		}
		ul{
			margin-block-start: 0px;
			margin-block-end: 0px;
			margin-inline-start: 0px;
			margin-inline-end: 0px;
			padding-inline-start: 0px;
		}
		.collapse{
			display:inline;
		}
	}
}