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

@import url('https://fonts.googleapis.com/css?family=Anton|Lato:400,700,900');
/*
font-family: 'Lato', sans-serif;
font-family: 'Anton', sans-serif;
*/

html{
	margin:0;
	padding:0;
}

/* WHAS Section */
.topBanner{
	background-color:#293b46;
}

.logoWhas{
	margin:12px 0;
}

/* Header Section */
.imgHeader{
	background-image:url(../images/img-header.jpg);
	background-repeat:no-repeat;
	background-position: bottom;
	background-size:cover;
	width:100%;
	height:700px;
}

.logoTheZooHeader{
	margin:0;
	padding:0;
}

.btnHeader{
	background-color:rgba(122,195,203,0.9);
	text-align:center;
	margin:80px 200px 0;
	padding:20px 2px;
	font-size:20px;
	font-family: 'Anton', sans-serif;
	color:#ffffff;
}

.btnHeader:hover{
	color:#075C72;
	transition:.7s;
}

.textOne{
	font-family: 'Lato', sans-serif;
	font-size:16px;
	line-height:25px;
	color:#000000;
	padding:50px 60px 30px;
}

.textPillarOne{
	background-color:#262146;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	color:#ffffff;
	margin:0;
	text-align:center;
	padding:12px 0 12px;
	font-family: 'Lato', sans-serif;
	font-size:14px;
	transition:0.8s;
}

.textPillarOne:hover{
	background-color:#544b8f;
	transition-timing-function:ease-in-out;
}

.pillars{
	padding:10px 10px 50px 60px;
}

.eventsOne{
	background-color:#2f9f72;
	background-image:url(../images/grass.png);
	background-repeat:repeat-x;
	background-position:bottom;
}

.eventsTitle{
	font-family: 'Anton', sans-serif;
	font-size:32px;
	color:#f7b431;
	text-transform: uppercase;
	padding:50px 0 20px;
}

.textTwo{
	font-family: 'Lato', sans-serif;
	font-size:16px;
	line-height:25px;
	color:#ffffff;
}

.btnEvent{
	background:#ffffff;
	padding:20px;
	margin:50px 210px 40px;
	font-size:20px;
	font-family: 'Anton', sans-serif;
	color:#2f9f72;
	transition:0.7s;
}

.btnEvent:hover{
	background:#f7b431;
	color:#19553d;
	transition-timing-function:ease-in-out;
}

.eventsTwo{
	background-color:#0e6943;
	padding-top:50px;
	padding-bottom:50px;
	padding:50px 60px;
}

.eventImages{
	border-radius:10px;
	border:#ffffff solid 2px;
	margin:20px 0;
	padding:0;
}

.eventTitle{
	font-family: 'Anton', sans-serif;
	font-size:23px;
	text-transform:uppercase;
	margin-top:20px;
	color:#f7b431;
}

.eventText{
	font-family: 'Lato', sans-serif;
	font-size:14px;
	line-height:25px;
	color:#ffffff;
}

.btnEvents{
	background-color:#f7b431;
	color:#ffffff;
	border:none;
	width:140px;
	font-family: 'Anton', sans-serif;
	text-transform: uppercase;
	text-align:center;
	border-radius:10px;
	text-decoration:none;
	padding:8px 14px;
	transition:0.7s;
}

.btnEvents:hover{
	background-color:#ffffff;
	color:#232323;
}

.footer{
	background-color:#ffffff;
}

.logoFooter{
	margin-top:50px;
}

.footerBtn{
	color:#005395;
	font-family: 'Lato', sans-serif;
	font-size:16px;
	padding:14px 0 20px;
}

.footerBtn:hover{
	color:#022541;
	transition:0.7s;
}

.twitter{
	color:#8CCBD2;
	position:relative;
	margin:0 10px 50px;
}
.facebook{
	color:#4B85BD;
	position:relative;
	margin:0 20px 50px;
}

.instagram{
	color:#255582;
	position:relative;
	margin:0 20px 50px;
}

h4 svg{
	fill:currentcolor;
}

.twitter:hover{
	color:#45686c;
	transition:.7s;
}

.facebook:hover{
	color:#2a4c6d;
	transition:.7s;
}
.instagram:hover{
	color:#112940;
	transition:.7s;
}




/*------------------------------------------------------------------*/

@media (max-width:1200px){
	
	.imgHeader{
		height:500px;
	}
	
	.logoTheZooHeader{
		width:48%;
	}
	
	.textOne{
		font-size:15px;
		line-height:24px;
		padding:40px 20px 24px;
	}
	
	.logoFooter{
		margin-top:60px;
		width:28%;
	}
}

/*------------------------------------------------------------------*/

@media (max-width:800px){
	
	.imgHeader{
		height:410px;
	}
	
	.logoTheZooHeader{
		width:65%;
	}
	
	.btnHeader{
		margin:90px 60px;
		padding:10px 0;
		font-size:20px;
	}
	
	.textOne{
		font-size:15px;
		line-height:24px;
		padding:40px 14px 24px;
	}
	
	.pillars{
		padding:10px 14px 60px;
	}
	
	.btnEvent{
		padding:16px;
		margin:50px 50px 40px;
	}
	
	.eventTitle{
		margin:20px 0 0;
	}
	
	.eventText{
		margin:0 0 8px;
	}
	
	.logoFooter{
		margin-top:40px;
		width:40%;
	}
	
	.footerBtn{
		padding:10px 0 10px;
	}
	
}




/*------------------------------------------------------------------*/

@media (max-width:720px){
	.imgHeader{
		height:370px;
	}
	
	.logoTheZooHeader{
		width:26%;
	}
	
	.btnHeader{
		margin:160px 0 0;
	}
	
	.textOne{
		padding:48px 0 20px;
	}
	
	.pillars{
		padding:5px 80px 70px;
	}
	
	.logoFooter{
		margin-top:38px;
		width:34%;
	}
}




/*------------------------------------------------------------------*/

@media (max-width:667px){
	
	.imgHeader{
		height:330px;
	}
	
	.logoTheZooHeader{
		width:23%;
	}
	
	.btnHeader{
		margin:122px 80px 0;
		padding:10px 0;
		font-size:20px;
	}
	
	.textOne{
		font-size:14px;
		line-height:22px;
		padding:30px 10px 20px;
	}
	
	.logoFooter{
		margin-top:38px;
		width:34%;
	}
	
}




/*------------------------------------------------------------------*/

@media (max-width:640px){
	
	.topBanner{
		height:50px;
	}

	.logoWhas{
		width:98px;
		height:25px;
		margin:12px 0 0 10px;
	}
	
	.imgHeader{
		height:300px;
	}
	
	.logoTheZooHeader{
		width:20%;
	}
	
	.btnHeader{
		margin:122px 80px 0;
		padding:10px 0;
		font-size:20px;
	}
	
	.textOne{
		font-size:14px;
		line-height:22px;
		padding:30px 10px 20px;
	}
	
	.logoFooter{
		margin-top:38px;
		width:34%;
	}
	
}




/*------------------------------------------------------------------*/

@media (max-width:375px){
	
	.topBanner{
		height:40px;
	}

	.logoWhas{
		width:80px;
		height:21px;
		margin:10px 0 0 10px;
	}
	
	.imgHeader{
		height:250px;
		background-position:left;
	}
	
	.logoTheZooHeader{
		width:30%;
	}
	
	.btnHeader{
		margin:90px 60px;
		padding:10px 0;
		font-size:20px;
	}
	
	.textOne{
		font-size:13px;
		line-height:21px;
		padding:25px 18px 18px;
	}
	
	.pillars{
		padding:5px 36px 30px;
	}
	
	.imgEvents{
		padding:0 50px;
		margin:0;
	}
	
	.eventsOne{
		background-repeat:repeat-x;
		background-position:bottom;
		background-size:100%;
	}
	
	.eventImages{
		margin-bottom:0;
	}
	
	.eventTitle{
		text-align:center;
		margin:0 0 14px;
	}
	
	.textTwo{
		font-size:13px;
		line-height:21px;
	}
	
	.btnEvent{
		background:#ffffff;
		font-size:18px;
	}
	
	.eventText{
		font-size:13px;
		margin:0 0 12px;
		text-align:center;
	}
	
	.btnEvents{
		margin-left:auto;
		margin-right:auto;
		display:block;
		margin-bottom:30px;
	}
	
	.logoFooter{
		margin-top:30px;
		width:48%;
	}

	
}