body{
	margin:0;
	width:100%;
	padding:0;
	height:auto;
	overflow-x:hidden;
}
header{
	z-index:1;
	height:500px;
}
header img{
	width:100%;
	height:100%;
	position:relative;
	top:-150px;
}
a{
	text-decoration:none;
}
h3:hover{
	cursor:pointer;
	color:navy;
}
.top-header{
	z-index:3;
	position:relative;
	background-color:#009385;
	width:100%;
	height:15%;
	border-bottom:2px solid black;		
}
.mobile-menu{
	width:100%;
	margin:0;
	display:block;
}
.mobile-menu:hover > ul {
	display:block;
}
.mobile-menu h3{
	position:relative;
	background-color:black;
	color:white;
	font-family:'Orator Std',sans-serif;
	padding:10px;
	text-align:center;
	
}
.desktop-menu{
}
.desktop-menu ul{
	list-style-type:none;
	z-index:1;
	position:absolute;
	top:60%;
	left:20%;
	width:auto;
}
.desktop-menu  ul li {
	background: white;
	border:3px solid black;
	background-size: 400% 400%;	
	display:inline;
	font-family:'Orator Std',sans-serif;
	font-size:130%;
	padding:10px;
	margin:15px;
	transition: 0.5s;
	-webkit-animation: AnimationName 5s ease infinite;
	-moz-animation: AnimationName 5s ease infinite;
	animation: AnimationName 5s ease infinite;	
}
.desktop-menu ul li:hover{
	background-color:#009385;
	color:white;
	cursor:pointer;
}
aside{
	width:20%;
	margin-left:20px;
	float:left;
	display:inline;
	width:20%;
	overflow:hidden;
	position:relative;
	z-index:2;
}
aside img{	
	width:100%;

}
.most-read{
	border-top:10px solid black;
}
.most-read h1{
	margin-top:3%;
	font-family:'Playfair Display SC',serif;
}
.most-read ul{
	list-style-type:none;
	margin-left:-35px;
}
.most-read ul li:hover{
	cursor:pointer;
	color:navy;
}
.most-read ul li{
	font-family:'Crete Round',serif;
	padding-bottom:13%;
	border-bottom:3px dotted black;
}
.most-read ul li img{
	padding-right:1%;
	float:left;
	width:35%;
}
section{
	position:relative;
	margin-left:18%;
	width:50%;
	float:left;
	display:inline;
	z-index:2;
	margin-top:40px;
}
.article-info {
	float:left;
	width:20%;
	height:300px;
}

article img{
	width:100%;
}
.article-info img{
	border-radius:500px 500px;
	width:100%;
	margin-bottom:20px;
	overflow:hidden;
	min-height:20px;

}
.article-info span{
	text-align:center;
	font-family:'Exo',sans-serif;
	margin-left:20%;
}
article{
	margin-top:-100px;
	margin-left:22%;
}
article h1{
	font-weight:bold;
	font-family:'PT sans',sans-serif;
	text-align:center;
	font-size:200%;
	padding-bottom:15px;
	border-bottom:1px dotted black;
	margin-top:20px;
}
article span{
	text-align:center;
	position:relative;
	top:-50px;
	left:40%;
	font-weight:bold;
	font-family:'PT sans',sans-serif;
	
}
article p{
	margin-top:-20px;
	font-family:'Khula',sans-serif;
	line-height:25px;
	font-size:110%;
}
.read-more{
	overflow:hidden;
	height:20%;
	margin-bottom:20px;
	background-color:white;
	width:100%;
	height:200px;
}
#read-more-headline{
	z-index:3;
	position:relative;
	background-color:white;
	font-family:'Playfair Display SC',serif;
	border-bottom:10px solid black;
	padding-bottom:20px;

}
.read-more-item {
	padding:15px;
	width:20%;
	display:inline-block;
}
.read-more-item:hover{
cursor:pointer;
}

.read-more-item img{
	position:relative;
	width:100%;
	transition:0.5s;
}
.read-more-item:hover>img{
	transform:scale(1.22);
}
.read-more-item p{
	font-family:'Crete Round',serif;
	position:relative;
	color:black;
	background-color:green;
	width:100%;
	height:100%;
	padding:10px;
	padding-top:50px;
	animation:entrace 2s ease-in-out paused;
	}
@keyframes entrance{
	0%{
		opacity:0;
	}
	100%{
		opacity:1;
	}
}
.article-info button{
	z-index:0;
	font-weight:bold;
	color:white;
	display:block;
	min-width:100%;
	height:50px;
	border:none;
	font-family:'Playfair Display SC',serif;
}
@keyframes menuani {
	0%{
		transform:scale(0.5);
	}
	100%{
		transform:scale(1);
	}
}
footer{
	z-index:3;
	position:relative;
	top:150px;
	clear:both;
	width:100%;
	background-color:#009385;
	height:200px;
	padding:20px;
	border-top:3px solid black;
}
#logo {
	z-index:2;
	width:10%;
	height:180px;
	margin-left:100px;
	margin-top:100px;
	position:absolute;
	float:left;
}
footer img{
	height:200px;
	margin-left:10%;
	float:left;
	width:12%;
	
}
@media screen and (max-width: 500px){
	footer{
	height:450px !important;
}
footer img{
	width:80% !important;
	
}
#copyright{
	float:none !important;
	width:50% !important;
}
.social-icons {
	margin-top:-50px !important;
	width:100% !important;
}
.social-icons img{
	width:15% !important;
	display:inline-block  !important;
}
aside{
	margin:0 !important;
	clear:both;
	width:100% !important;
	position:relative !important;
	display:block !important;
	top:0 !important;
	}
	aside:nth-child(1){
		margin:0;
		width:100% !important;
	}
	.most-read ul li{
		margin-bottom:50px;
	}
	.most-read ul li img{
		width:27% !important;
	}
section{
	margin:0 !important;
	width:100% !important;
}
.mobile-menu{
	display:block;
}
.top-header{
	display:none;
}
.desktop-menu{
	display:none;
}
}
.mobile-menu{
	width:100%;
	margin:0;
	display:none;
}
.mobile-menu:hover > ul {
	display:block;
}
.mobile-menu h3{
	position:relative;
	background-color:black;
	color:white;
	font-family:'Orator Std',sans-serif;
	padding:10px;
	text-align:center;
	
}
.mobile-menu ul{
	padding:0;
	display:block;
}
.mobile-menu ul li{
	
	width:100%;
	position:relative;
		top:-2px;
	display:block;
	padding-top:20px;
	padding-bottom:20px;
	font-size:20px;
	background-color:black;
	color:white;
	font-family:'Orator Std',sans-serif;
	text-align:center;

	
}
.social-icons{
	width:30%;
	border-right:3px dotted gray;
	margin-top:75px;
	margin-left:30px;
	float:left;
}
.social-icons img{
	width:10%;
	height:auto;
	margin-left:30px;
	transition:0.4s;
	
}
.social-icons img:hover{
	cursor:pointer;
	transform:scale(1.22);
}
#copyright{
	margin-top:75px;
	margin-right:100px;
	color:white;
	font-family:'Exo',sans-serif;
	float:right;
	width:30%;
	text-shadow:1px 1px black;
	
}
.ads{
	width:98%;
	height:200px;
	overflow:hidden;
}
.ads img{
	animation:imgzoom 10s ease-in-out;
}
@keyframes imgzoom{
	0%{
		transform:scale(1.0);
	}
	60%{
		transform:scale(1.3);
	}
	100%{
		transform:scale(1.0);
	}
}
@keyframes h1move{
	0%{
		transform:translateX(0px);
	}
	60%{
		transform:translateX(200px);		
	}
	100%{
		transform:translateX(0px);

	}
}
.ads h1{
	font-family:'Exo',sans-serif;
	position:absolute;
	top:50px;
	left:10%;
	background-color:#009385;
	z-index:2;
	color:white;
	padding-left:4%;
	animation: h1move 20s ease-in-out;
}