@font-face {
	font-family: "Neuropol";
	src: url("../resources/NEUROPOL.ttf"); /* case sensitive */
}
@font-face {
	font-family: "Lato-Thin";
	src: url("../resources/Lato2OFL/Lato-Thin.ttf");
}
@font-face {
	font-family: "Lato-Light";
	src: url("../resources/Lato2OFL/Lato-Light.ttf");
}
@font-face {
	font-family: "Lato-Regular";
	src: url("../resources/Lato2OFL/Lato-Regular.ttf");
}
li {
	margin-bottom: 1em;
}
a {
	color : inherit;
	font-family: inherit;
	text-decoration : none;
	font-size: 100%;
}
h3 {
	display: block;
	font-size: 150%;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 0;
	margin-right: 0;
	font-weight: normal;
}
.homeBackground {
	background: url("../resources/background1.png");
}
.noMargin {
	margin : 0;
}
.BIO_background {
	background: url("../resources/abstract2.jpg") no-repeat;
}
.R_D_background {
	background: url("../resources/abstract5.jpg") no-repeat;
}
.F1_background {
	background: url("../resources/abstract1.jpg") no-repeat;
}
.topBackground {
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 500px;
}
.greyWhiteBackground {
	background-color: #F2F2F2;
}
.navyBlueBackground {
	background-color: #1B406D;
}
.relativePosition {
	position: relative;
}
.verticalCenter {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.largeNeuropol {
	font-family: Neuropol;
	font-size: 9em;
	clear: both;
	margin-left: 0.25em;
}
.smallNeuropol {
	font-family: Neuropol;
	font-size: 2em;
	clear: both;
	margin-left: 0.25em;
}
.white {
	color: HSLA(360, 100%, 100%, 1);
}
.darkGray {
	color: HSLA(0, 0%, 30%, 1);
}
.black {
	color: HSLA(0, 0%, 0%, 1);
}
.brightRed {
	color: HSLA(356, 100%, 51%, 1);
}
.noDecoration {
	text-decoration : none;
}
.noListStyle {
	list-style-type : none;
}
.latoThin {
	font-family: Lato-Thin;	
}
.latoLight {
	font-family: Lato-Light;
}
.latoRegular {
	font-family: Lato-Regular;
}
.navigationSize {
	font-size: 2em;
}
.textSize {
	font-size: 1.5em;
}
.top {
	margin-top: 2em;
}
.bottom {
	margin-bottom: 2em;
}
.right {
	margin-right: 2em;
	float: right;
	clear: both;
}
.center {
	margin-left: auto;
	margin-right: auto;
	line-height: 140%;
}
.column {
	width: 70%;
	max-width: 700px;
}
.navigation {
	text-decoration : none;
	padding: 0.5em;
}
/* Galaxy S3 (landscape) ----------- */
@media only screen
and (min-device-width : 720px)
and (max-device-width : 1280px)
and (orientation : landscape) {
	.navigationSize {
		font-size: 2em;
	}
	.textSize {
		font-size: 1.8em;
	}
	.column {
		width: 90%;
		max-width : none;
	}
}
/* Galaxy S3 (portrait) ----------- */
@media only screen
and (min-device-width : 720px)
and (max-device-width : 1280px)
and (orientation : portrait) {
	.navigationSize {
		font-size: 3.6em;
	}
	.textSize {
		font-size: 3.2em;
	}
	.column {
		width: 90%;
		max-width : none;
	}
}
/* iPad (landscape & portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
	.navigationSize {
		font-size: 1.5em;
	}
	.textSize {
		font-size: 1.5em;
	}
	.column {
		width: 70%;
		max-width : none;
	}
}
/* iPhone 5 (landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
	.navigationSize {
		font-size: 2em;
	}
	.textSize {
		font-size: 1.8em;
	}
	.column {
		width: 90%;
		max-width : none;
	}
}
/* iPhone 5 (portrait)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
	.navigationSize {
		font-size: 3.6em;
	}
	.textSize {
		font-size: 3.2em;
	}
	.column {
		width: 90%;
		max-width: none;
	}
}
#tooltip
{
text-align: center;
color: #fff;
background: #111;
position: absolute;
z-index: 100;
padding: 15px;
}
 
#tooltip:after /* triangle decoration */
{
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #111;
content: '';
position: absolute;
left: 50%;
bottom: -10px;
margin-left: -10px;
}

#tooltip.top:after
{
border-top-color: transparent;
border-bottom: 10px solid #111;
top: -20px;
bottom: auto;
}

#tooltip.left:after
{
left: 10px;
margin: 0;
}

#tooltip.right:after
{
right: 10px;
left: auto;
margin: 0;
}
