@import url('https://fonts.googleapis.com/css?family=Ubuntu')
@font-face {
	font-family: "Ubuntu-B", sans-serif;
	src: local('fonts/ubuntu/Ubuntu-B.ttf');
}
@font-face {
	font-family: "Ubuntu-R", sans-serif;
	src: local('fonts/ubuntu/Ubuntu-R.ttf');
}
@font-face {
	font-family: "LinBio", sans-serif;
	src: local('fonts/LinBio/LinBiolinum_aS.ttf');
}

*{	
	margin: 0 auto;
	padding: 0px; 
	color: white;
	font-family: "Ubuntu-R",sans-serif;
	max-width: 100vw;/*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;
}
html{
	background-color: #114b5f;/*#e1f9f2;*/
}

/* Top Bar CSS Block */
#top_bar{ width: 100%; height: 8vh; background-color: #114b5f; }
#social{ text-align: center; width: 100%; height: 266px; min-height: 20vh; margin-top: 5px; margin-bottom: 5px; padding-top: 3px; padding-bottom: 3px; background-color: #0c3644;}
#social>div{
	display: block; 
	height: 120px; 
	min-height: 9vh;
	width: auto; 
	padding: 5px; 
	background-color: rgba(0,0,0,0.3);
}
#social > div > a,#social > div > p  { height: 60px; width: 60px; min-height: 4.5vh; min-width: 4.5vh; margin-left: 20px; margin-right: 20px; font-size: 64px; padding-top:1vh;}

#social > .fa{ height: 50px; width: 50px; min-height: 6vh; min-width: 6vh; color:#fbfedc; transition: 0.5s ease; }

.fa {display: block;}
.fab{
	display: inline-block; 
	position: relative; 
	min-height: 6vh; 
	margin-top: 1vh;
	padding-top: 1vh;
	min-width: 6vh; 
}
.fa_t{ 
	position: absolute; 
    font-size: 16px;
    font-size: 1vi;
	height: 20vb;
	vertical-align: bottom;
  	bottom: -50%!important;
	max-height: 20%;
  	left: 50%;
	margin-left: -50%;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	color: #fff;
	content: attr(data-tooltip);
	text-align: center;
	padding: 5px;
	padding-top: 2px;
	padding-bottom: 2px;
	line-height: 1vi;
}
* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 180px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 1vi;
  line-height: 1vi;
}

.fa_name{
	color: #75c8dd;
}

#social > div > a > b:hover { color: #88d498; transition: 0.5s ease;}
#social > div > p > b { color: #75c8dd; transition: 0.5s ease;}
.icon_bar{ min-height: 20vh; }
.fab{font-size: 7.5vh; max-height: 22vh; max-width: 5vw; padding: 0px; margin: 0 auto;}
.fa{max-height: 22vh; max-width: 5vw; font-size: 15vw; padding: 0px; margin: 0 auto;}

#bot_bar{ width: 100%; font-size: 2vh; height: 30px; padding-top: 3px; padding-bottom: 3px; background-color: #114b5f;}
#icon{ height: 8vh; width: auto; text-align: center; display: block; max-width: 100%; }
/*filter: brightness(200%) hue-rotate(90deg); }*/

/* main SECTION */
#main { margin: 0 auto; padding: 0px; }
#content{ 
	color: #40813D; 
	text-align: center;
	background-color: #00060D;
}
#main_text{ 
	text-align: center; 
	font-size: 1.5em; 
	height: 40px;
	font-stretch:condensed;
	width: 100%; 
	background-color: #121a1f;
	color: #7cddb8; 
	padding-top: 3vh;
}

/* Centered text */
.centered {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 64px;
	font-family: "Ubuntu-B",sans-serif;
	font-style: bold;
}
.overlay {
	margin: 0 auto; 
	padding: 0px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height:100%;
	right: 0;
	opacity: 0.7;
	transition: .5s ease;
	background-color: black;
	vertical-align: middle;
	margin: 5% auto;
	margin-top: 0%;
	padding: 0px;
	border-radius: 50%;
}
.hero_section{
	position: relative; width: 30%; display: inline-block; margin: 3% auto; padding: 0px;
  	margin-right: 0%;
 	margin-left: 0%;
	border-color: rgba(0,0,0,0.05);
	border-width: 20px;
	border-style: solid;
	text-shadow: 2px 2px rgb(5,5,5);
	border-radius: 50%;
}
.hero_section:hover .overlay {
  opacity: 0.2;
  background-color: #d8efbd;
}
.hero_section:hover{
	color: rgb(250,250,200);
}
.hero_img{
	display: inline-block;  
	width: 100%;
	height: 100%;
	text-align: center; 
	transition: 1.0s; 
	background-color:rgba(0,0,0,0.1); 
	border-color: rgba(0,0,0,0.05);
	border-radius: 50%;
	margin: 0px auto; 
	padding: 0px;
}
@media (min-width: 1500px){
	#social > div > a, #social > div > p{
		width: 9vh;
		height: 9vh;
		font-size: 9vh;
	}
	#social>div{
		height: 18vh;
	}
	#social{
		height: 38vh;
	}
	.fa_t{
		font-size: 2vh;
	}
	#bot_bar{
		min-height: 5vh;
		font-size: 2vh;
	}
	#main_text{
		height: 8vh;
		font-size: 7vh;
		padding-top: 1vh;
	}/* Centered text */
	.centered {
		font-size: 8vh;
	}
	#icon{ height: 16vh; }
	#top_bar{ height: 16vh; }
}
@media (max-width: 1400px){
	#social{transition: 1.0s;}
}

@media (max-width: 1200px){
	.centered{
		font-size: 48px;
	}
	/* Top Bar Responsive */	
	#doc-div{		
		overflow: auto; 
		-webkit-overflow-scrolling: touch; 	
	}

	/* Mobile Main Section */
	.hero_img{ 
		font-size: 14px; 
		text-align:center; 
		transition: 1.0s; 
		margin: 0 auto; 
		padding: 0px;
		width: 100%;
		height: 100%;
	}
	.hero_section{
		width: 40%;
		height: 40%;
	}
	.overlay{
		width: 100%;
		height: 100%;
	}
	#bot_bar{transition: 1.0s;}
}
@media (max-width: 500px){
	/* Top Bar Responsive */	
	#content > a{ display: block; width: 100%; }
	#social{transition: 1.0s;}
	#bot_bar{transition: 1.0s;}
	.centered {
		font-size: 48px;
	}
	#main_text{
		max-height: 20vh;
	}
	.icon-bar{
		height: auto;
	}
	.fa{
		margin: auto;
	}
}

/*END MOBILE*/