@font-face {
	font-family: "Ubuntu-B", sans-serif;
	src: local('fonts/ubuntu/Ubuntu-B.ttf');
}
@font-face {
	font-family: "LinBio", sans-serif;
	src: local('fonts/LinBio/LinBiolinum_aS.ttf');
}
*{	
	margin: 0 auto;
	padding: 0px; 
	color: white;
	font-family: "LinBio", sans-serif;
	max-width: 1800px;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
@viewport {
  min-width: 640px;
  max-width: 800px;
}
@viewport {
  zoom: 0.75;
  min-zoom: 0.5;
  max-zoom: 0.9;
}
@viewport {
  orientation: landscape;
  min-zoom: 100%;
}
html{
	background-color: #114b5f;
}
table td{
	padding: 10px;
}
#project_link{
	text-decoration: none;
	padding-bottom: 20px;
}
#project_name:hover{
	color: white;
	background-color: black;
	transition: 1s ease;
}
/* Top Bar CSS Block */
#top_bar{ width: 100%; height: 170px; background-color: #050505; }
#icon_text{width: 100%; height: 75px; padding-top:15px; padding-bottom: 15px; font-size: 60px;}
#bot_bar{ width: 100%; font-size: 18px; height: auto; padding: 0px; padding-top: 0px; padding-bottom: 15px; background-color: #002b3f; clear: both; vertical-align: middle;}
#icon{ height: 75px; width: auto; text-align: center; display: block; max-width: 100%; }
/*filter: brightness(200%) hue-rotate(90deg); }*/

/* Navigation Menu CSS */
#desktop_nav{ padding-bottom: 10px; width: 100%; height: 40px; background-color: #021414; }
#desktop_nav ul{ height: 100%; list-style-type: none; text-align: center; display: block; width: 100%;}
#desktop_nav li{ border-width: 0px; display: inline-block; cursor: pointer; vertical-align: middle; font-weight: bold; height: 100%; margin-top: 10px; }
#desktop_nav p{ font-size: 25px; padding-left: 10px; padding-right: 10px; display:inline-block; text-align: center; width: 100px; color: #88d498; transition-delay: 0.2s;  -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; transition: 0.2s; -webkit-transition: 0.2s; -moz-transition: 0.2s; }	
#desktop_nav li:hover p{ color: #f3e9d2; transition-delay: 0.5s; -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; }
#desktop_nav li.active_section p{ color: #c6dabf; transition-delay: 0.5s; -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; }

/* PROJECT SECTION */
#projects {  text-align: left; width: 100%; 
	position: relative;
	display: block;
	height: auto;
}
.item_parts{ max-width: 80%; width: 80%; height: auto; vertical-align: middle; padding: 40px; padding-top: 5px;}
#thumbnail_bar{ width: 100%; background-color: #00130E; height: auto; min-height: 100px; /*background-image: url('../images/base.gif');*/ background-size: 100% 100%; background-position: center; background-repeat: no-repeat; }
#thumbnail_bar ul{ width: 100%; list-style-type: none; text-align: center; min-height: 100px;  margin-top: 5px;}
#thumbnail_bar li{ height: 100%; background-color: rgba(0,35,45,0); display: inline-block; cursor: pointer; padding: 5px; transition-delay: 0.5s; -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s;  }
#thumbnail_bar li:hover{ background-color: #277553; transition-delay: 0.5s; -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s;  }
#thumbnail_bar div{ -webkit-filter: saturate(75%); -moz-filter: saturate(75%); width: 90px; height: 90px; background-size: contain; background-repeat: no-repeat; background-position: center center; transition-delay: 0.5s; -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; }
#thumbnail_bar li:hover div{ -webkit-filter: saturate(200%); filter: saturate(200%); -moz-filter: saturate(200%); transition-delay: 0.5s; -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; }
#project_list{ margin-top: 0px !important; margin-bottom: 0px !important; min-height: auto, !important;}

/* PROJECT.CONTENT */
#content{ 
	color: #40813D; 
	height: auto; 
}
.item_name{ 
	text-align: center; 
	font-size: 32px; 
	height: 40px;
	font-stretch:condensed;
	width: 100%; 
	background-color: #123a2f;
	color: #7cddb8; 
}
.item_details{ margin-left: 30%; padding: 10px; padding-bottom: 20px; display: block; height: auto; top:0px; bottom: 0px;}
.item_lang{ text-align: center; font-size: 16px; height: 22px; width: 100%; color: #A8A8A8; padding: 3px; font-family: 'Ubuntu-B', sans-serif; padding-bottom: 10px; }
.item_desc{ text-align: justify; font-size: 20px; width: 100%; line-height: 1.2; padding: 7px; color: #ddd; padding-bottom:0px; font-family: "LinBio", sans-serif; }
.item_team{ text-align: center; font-size: 18px; height: auto; width: 100%; color: #adffdf; font-weight: bold; overflow-x:hidden; background-color: #012216; }
.item_team:empty { display: none; content: "<p>Argzero only</p>"; }
.item_hero_section{ width: 30%; height: auto; float: left; top:0px; bottom: 0px;}
.item_hero_image{ width: 100%; height: auto; transition: 1.0s; text-align: center; float: right; border-width: 10px; background-color:rgba(0,0,0,0.9); border-color: rgba(0,0,0,0.05); border-style: solid; border-radius: 5px; margin-bottom: 40px; margin-right: 20px;}
#link_img{
	height:50px; 
	width:auto;
	position:relative; 
	padding-left: 20px;
}
#music{
	width: 50%;
}
#music a{
	text-decoration: none; 
}
#music section{
	width:100%; 
	height: 20px; 
	font-size: 20px; 
	text-align: center; 
	vertical-align: middle; 
	margin: 0 auto; 
	padding-bottom: 0px; 
	margin-top: 20px; 
	padding-top: 20px;
	background-color: #022222;
	text-decoration: none; 
}
#music section span{
	padding: 10px;
	padding-top: 15px;
	padding-bottom: 15px;
	font-size: 24px;
	transition: 1s ease;
	text-decoration: none; 
	color: #BBF5F5;
	font-weight: bold;
	transition: 1s ease;
}
#music section:hover{
	font-size: 20px;
	background-color: #426262;
	color: rgb(150,150,50);
	text-decoration: none; 
	transition: 1s ease;
}
#music section span:hover{
	color: #EEEEAA;
	transition: 1s ease;
	text-decoration: none; 
	padding: 10px;
	padding-top: 15px;
	padding-bottom: 15px;
}
/* END MUSIC */

/* NARRATIVE SECTION */
#narrative_link{ text-align: center; font-size: 16px; text-decoration: none; }
#narrative_link section{ height: 20px; width: 100%; background-color: #0C4C2F; transition-delay: 0.5s; -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; transition: 1.5s; -webkit-transition: 1.5s; -moz-transition: 1.5s; border-bottom-color: #355; border-bottom-style: solid; border-bottom-width:3px; }
#narrative_link section{ color: #c6dabf; transition-delay: 0.5s; -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; transition: 1.5s; -webkit-transition: 1.5s; -moz-transition: 1.5s; }
#narrative_link section:hover{ color: #f3e9d2; }
#narrative_link{ text-shadow: 0px 1px #121212; }
#doc-div { display:none; width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; height: 600px; }
#shadia{ width: 60%; height: 10000px; }
#shadia-clone {display:block; width: 60%; height: 600px;}
/* END NARRATIVE */

.icon {
  position: relative;
  /* Adjust these values accordingly */
  top: 5px;
  left: 5px;
}
#social{ text-align: center; width: 100%; background-color: #0c3644; ; height: 118px; padding-top: 6px; padding-bottom: 3px; }
#social>div{
	display: inline-block; 
	height: auto; 
	width: auto; 
	padding: 5px; 
	background-color: rgba(0,0,0,0.3);
	border-color: rgba(0,0,0,0.05);
	border-width: 3px;
	border-style: solid;
	border-radius: 10px;
	margin: 10px;
	margin-right: 10px;
	margin-left: 10px;
	position:relative;
}
#social>span{height:0px; visibility: none; width:0px; position:fixed; top:-10000px;}
img{
	position:relative;
}

#social > div > a,#social > div > p  { height: 100%; width: auto; margin-left: 15px; margin-right: 15px; font-size: 56px; }

#social > .fa{ height: 50px; width: 50px; color:#fbfedc; transition: 0.5s ease; }
.fa {display: block;}
.fab{display: inline-block; 
	position: relative; 
padding-bottom: 10px; }
.fa_t{ 
	position: relative; 
	font-size: 16px; 
	height: 20px;
	margin-bottom: 5px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	color: #fff;
	text-align: center;
	padding: 5px;
	padding-top: 2px;
	padding-bottom: 2px;
	margin-top: 0px;
	font-size: 14px;
	line-height: 1.2;
	bottom: 20px;
}
.fa_name{
	color: #75c8dd;
}

#social > div > a > i:hover { color: #88d498; transition: 0.5s ease;}
#social > div > p > i { color: #75c8dd; transition: 0.5s ease;}
@media (max-width: 1400px){
	#social{transition: 1.0s;}
}

#form_frame{
	width:100%;
	height:600px;
	margin: 0 auto;
	padding-top: 20px;
	padding-bottom: 20px;
}


#social > .fa{ height: 75px; width: 75px; color:#fbfedc; transition: 0.5s ease; }
.fa_t{
	font-size: 24px;
		bottom:-10px;
		display: block;
}
#social{ text-align: center; width: 100%; height: 100%; padding: 0px; }
#social>div{
	display: inline-block; 
	height: auto; 
	width: 100%; 
	padding: 5px; 
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 10px;
	border-color: rgba(0,0,0,0.05);
	border-width: 0px;
	border-radius: 0px;
	margin: 0px;
}
#social > div > a,#social > div > p  { height: auto; width: 6%; font-size: 68px; }

#content{height:auto;}
.item_parts{display: block; height: auto; clear: both; margin: 0 auto; padding: 0px; padding-top: 20px; height:auto; max-width: none;}
.item_hero_section{ margin: 0 auto; padding: 0px; width: 100%; display: block; }
.item_name{
	height: auto;
	font-size: 54px;
	padding-top: 15px;
	padding-bottom: 15px;
    border-style: double;
    border-width: 0px;
    border-top-width: 10px;
    border-bottom-width: 10px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-color: rgba(90, 182, 154,0.5);
}
.item_details{clear:both; width: 100%; max-height: none; display: block; margin: 0 auto; padding: 0px; padding-bottom: 10px;}
.item_desc{ font-size: 20px; width: auto; padding: 30px; padding-bottom: 0px; line-height: 1.5; }
.item_lang{font-size: 24px; margin-top: 0px; padding-bottom: 10px;}
.item_team{padding-top: 10px; padding-bottom: 10px; height:auto; font-size: 36px;}
.item_hero_image{
	max-width: 200px; max-height: 400px;
	height: auto;
	display: block;
	text-align: center;
	float: none;
	margin: 0 auto;
}
#people .item_hero_image{
	max-height: none;
	width: auto;
}

#pubs section > p{
	text-align: left;
	margin: 0 auto;
	padding: 20px;
	max-width: 760px;
}

#pubs a{
	color: white;
	transition: 0.5s, slow;
}

#pubs a:hover{
	color: #f3e9d2;
	transition: 0.5s, slow;
}

#contact .item_hero_image{
	max-height: none;
	width: 20%;
}
/* MOBILE CSS */
@media (max-width: 1000px){
	.item_hero_image{
		max-width: none; max-height: none;
	}
	body{
		width: 100%; max-width: none; display: block;
	}
	/* Top Bar Responsive */	
	#doc-div{		overflow: auto; -webkit-overflow-scrolling: touch; 	}
	#icon{ height: 20%; width: 20%; position: relative;
	}
	.fa_t{
		font-size: 24px;
	}

	#link_img{
		height:60%; 
		width:auto;
		position:relative; 
		padding-left: 10px;
	}
	/* Mobile Nav Menu */
	#desktop_nav{  position: relative; height: auto; overflow: hidden;}
	#desktop_nav ul { text-align: center; position: relative; width: auto; height: auto; position: relative; overflow-x: scroll; -webkit-overflow-scrolling: touch; }
	#desktop_nav li { text-align: center; position: relative; padding-top:5px;padding-bottom:5px; height: auto; margin: 0 auto !important; width:auto; display: block; clear:both;}
	#desktop_nav p{ text-align: center; position: relative; padding: 0px; margin: 0 auto; font-size: 48px; width: auto;}
	#desktop_nav li{
	    border-style:ridge;
	    border-width: 0px;
	    border-top-width: 5px;
	    border-bottom-width: 0px;
	    border-color: rgba(90, 182, 154,0.5);
	}
	#desktop_nav li:last-child{
	    border-style:ridge;
	    border-width: 0px;
	    border-top-width: 5px;
	    border-bottom-width: 5px;
	    border-color: rgba(90, 182, 154,0.5);
	}
	#link_img{
		height:20px; 
		width:auto;
		position:relative; 
		padding-left: 10px;
	}
	#form_frame{
		width:100%;
		padding: 0px;
		margin: 0 auto;
		height: 600px;
	}
	#music{ width: 80%;	}
	#doc-div { display: block; width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; height: 600px; }
	#shadia{ width: 100%; height: 10000px; }
	#shadia-clone {display:none;}
	
	/* Mobile Projects Section */
	.item_parts{
		width: 100%;
		padding-top:0px;
	}
	.item_hero_image{ width: 100%; text-align:center; transition: 1.0s; float: none; margin: 0 auto; padding: 0px; border-style: none; border-radius: 0px;}
	#top_bar{height:auto;}
	#icon_text{height: auto;}
	#bot_bar{transition: 1.0s; height: auto; margin: 0 auto; width: 100%;}
	#social > div > a,#social > div > p  { height: auto; width: 10%; font-size: 68px; }
}
/*END MOBILE*/