@charset "utf-8";
/* CSS Document */

/*headline: font-family: ´spline sans´, sans-serif;
  paragraph: font-family: ´EB Gabarom´, serif;
*/

/*Clear Freshness
             ocean blue: #002637;
             vermillion: #690E0C;
             ocre: #A58E65;
             semi-white: #FFFFF4;
             esmerald: #286068;
*/


* {
	box-sizing: border-box;
	margin: 0;
	}

body {
	margin: 0;
	padding: 0;
	width: 100%
}

h1, h2, h3, h4, h5, h6{
	font-family: ´spline sans´, sans-serif;
}

p {
  font-family: ´EB Gabarom´, serif;
}

/* center an image - <img> is an inline element*/
img {
	display: block;
	margin-left: auto;
	margin-rigth: auto;
}

/* main navigation */
#mainNav{
	overflow: hidden;
	margin: 0;
	display: block;
	position: fixed;
	background-color: #A58E65;
	width: 100%;
	font-family: ´spline sans´, sans-serif;
	height: 50px;
	}

/* style the links inside the navigation bar */
#mainNav a{
	float: left;
	margin: 0;
	display: inline-block;
	color: #FFFFF4;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none; /*removes underline*/ 
}

/* change the color of link on hover */ 
#mainNav a:hover {
	background-color: #FFFFF4;
	color: #690E0C;
	font-weight: 900
}

/* add the color to the active/current link */
#mainNav-right .active {
	background-color: #690E0C;
	color: #FFFFF4;
}

/* right-aligned section inside the top navigation */
#mainNav-right {
	float: right;
}

/* clear floats after the columns */
.container:after{
	contect: '';
	display: table;
	clear: both;
}


/* banner section */
.research_bg{
	background: #286068 url("../images/pexels-delot-18471553.jpg") no-repeat
	center center;
	background-size: cover;
	height: 300px;
	margin-top: 10px;
	
}

.research_bg h1{
	text-align: center;
	line-height: 300px;
	color: #286068;
	font-size: 3em;
	
}


/* create cplumns that floats next to each other */
.container{
	width: 80%;
	margin:0 auto;
}

/*flexbox row*/
.container{
	display:flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: baseline;
}

/*flexbox column size*/
.heart{
	margin: 10px;
	padding: 10em;
	flex-basis: 40%;
}
	
/*flexbox column size*/
.botic{
	margin: 20px;
	padding: 10em;
	flex-basis: 40%;
	
	/*2 column widt:40%*/
}

.bio h2{
	font-size: 1.3em;
	text-align: center;
	font-weight: 900;
	color: #690E0C;
}

.ro h2{
	font-size: 1.3em;
	text-align: center;
	font-weight: 900;
	color: #690E0C;
}

/*home-flexbox column background images*/

.heart{
	        background: white url("../images/biotechnology.jpg") no-repeat center;
	        background-size: cover;
	        height: 200px;
            margin-bottom: 20px	
}

.botic{
	    background: white url("../images/robotic.jpg") no-repeat center;
	    background-size: cover;
	    height: 200px;
	    margin-bottom: 20px	
}

footer{
	background-color: #002637;
	text-align: center;
	line-height: 50px;
	color: #FFFFF4;
}