@charset "utf-8";
/* CSS Document */
/*fonts and stuff*/
	/*headline:  font-family: "Gayathri", sans-serif;
	paragraph: font-family: "Hind Madurai", sans-serif;
	*/
/*Colors:
	evening sea: #265c4b;
	northern hemisphere: #007566;
	petrol green: #589a8d;
	catarina green: #8fc1b5;
	azeitona: #a8b545;
	mint frost: #c2c0a6;
*/
* {
	box-sizing: border-box;
	margin:0;
	
}
body{margin: 0 auto 0 auto;
	padding: 0;
	width:100%;
	}


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

p{font-family: "Hind Madurai", sans-serif;
font-size: 1.1em;}

img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*Main Nav.*/


#mainNav{
	oveflow: hidden;
	margin: 0;
	display:block;
	position: fixed;
	background-color:#265c4b;
	width: 100%;
	font-family: "Gayathri", sans-serif;
	height: 60px;
}
/*links in said nav bar mwehe*/

#mainNav a{
	float: left;
	margin: 0;
	display: inline;
	color: #c2c0a6;
	text-align: center;
	padding: 20px 25px;
	text-decoration: inherit
	
}

/*hover color*/
#mainNav a:hover{
  	background-color: #8fc1b5;
	color: #007566;
	font-weight: 900;
	
}
/*active link color*/
#mainNav-right .active{
	background-color:#a8b545;
	color:ivory
}
/* Right-alinged section on top nav*/
#mainNav-right {
	float: right;

}

.logo {       /*logo here*/
	display: flex;
	justify-content: flex-start;
	align-items: center;
	text-align: right;
	font-size: 1.5em;
	font-weight: 900;
	
}
/*clear floats after each column*/
.row:after{
	content: "";
	display:table;
	clear:both;
	
}


/*header style mwahaha*/
.home_bg {background: #265c4b url("../images/redpanda2.jpg")no-repeat center center;
	background-size: cover;
	height: 640px;
	margin-top: 20px;
	
}

.home_bg h1{
	text-align: center;
	line-height: 640px;
	color: papayawhip;
	font-size: 4.4em
}


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

.element {
	margin: 0;
	padding: 0.5em;
	flex-basis: 50%;
}
.element h2{
	font-size: 2em;
	text-align: center;
	font-weight: 900;
	color:  #265c4b;
}

.element h3{
	font-size: 2em;
	text-align: center;
	font-weight: 900;
	color:  #265c4b;
}
/*Home - Flexbox Each Column background images*/
.basic{
	background: white url("../images/zoologist1.jpg") no-repeat center;
		background-size: cover;
			height: 400px;
}

.anatomy{ 
	background: white url("../images/redpanda1.jpg") no-repeat center;
		background-size: cover;
			height: 400px;
}


/*start about page here*/
.container_about {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items:baseline;
}
.about_bg {background: white url("../images/zoologist2.jpg") no-repeat center center;
	background-size:cover;
	height: 600px;
}
.about_bg h1 {
	text-align:center;
	font-size: 4em;
	line-height:500px;
	color:antiquewhite;
}

.certificate{ 
	background: white url("../images/rhino.jpg") no-repeat center;
		background-size: cover;
			height: 400px;
}

/*start contact page here*/
.container_contact {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items:baseline;
}

.contact_bg {background: white url("../images/zoologist3.jpg") no-repeat center center;
	background-size:cover;
	height: 600px;
}
.contactpicture{ 
	flex-basis: 40%;
	margin:1em;
	padding:1em;
	background: white url("../images/greentreefrog.jpg") no-repeat center;
		background-size: cover;
			height: 400px;
}
.contact_info{
	flex-basis: 40%;
	background-color: white;
	margin:1em;
	padding:1em;
	align-items: center
}

.contact_info h4 {
	font-size: 2em;
}
footer{
	background-color: #265c4b;
	text-align: center;
	line-height: 45px;
	color:antiquewhite;
	
}