*
{
margin: auto;

}
body
{
background-color: #f1f1f1;

}
/* header */
header
{

	background-color: #fff;
	height: 60px;
	overflow: hidden;
}
header h1
{
float: left;
font-family: calibri;

}
.logo
{

color: #00b8e9;

}
header nav
{
float: right;

}
header nav ul
{
list-style-type: none;
}
header nav ul li
{
float: left;
margin-right: 16px;


}
a:link

text-decoration :none;
text-transform: uppercase;
font-size:15px;
font-family: calibri;
color: #00b8e9;
}
a: hover
{
text-decoration: underline;
color: #0000ff;
transition: 1s;
}
/* bigimage*/
#bigayman
{
//background-color: red;
height: 700px;
background: url('images/ayman.jpg') no-repeat;
background-size:100%; 

}
#bigayman h2
{
	float: right;
	color: #00b8e9; 
	text-shadow: 2px 2px 8px #fff;
	font-size: 30px;
	font-family: calibri;
	position: absolute;
	top: 160px; 
	right: 95px;
}
#bigayman p
{
	width: 400px;
	color: #fff;
	position:absolute;
	right: 145px;
	top: 200px;
	font-size: 24px;


}
.readmore
{
position: absolute;
right: 60px;
bottom: 140px;
background: #eeeeee;
border: 2px solid #00b8e9;
font-size: 24px;
color: #00b8e9;
padding: 10px;
}
/* features */
#features
{
	text-align: center;
	width: 1000px;
	margin-top: 20px;


}
#features ul
{
	list-style-type: none;
	overflow: hidden;
}
#features ul li
{
	float: left;
	background-color: #fff;
	border: 1px solid #ccc;
	height: 200px;
	overflow: hidden;
	width: 250px;
	margin-right: 10px;
	padding-top: 120px;

}
#features #feature-1
{
background: url('images/2.jpg') no-repeat top 10px center;
background-size: 100px 100px;
background-color: #fff;

}
#features #feature-2
{
background: url('images/3.jpg') no-repeat top center;
background-size: 100px 100px;
background-color: #fff;
}
#features #feature-3
{
background: url('images/4.png') no-repeat top 10px center;
background-size: 80px 80px;
background-color: #fff;

}
#content
{

margin-top: 15px;
padding-left: 100px;
padding-right: 100px;
}
article
{

	overflow: hidden;
	background-color: #84d0f0;
	margin-bottom: 10px;
	border: 1px solid #84d0f0;
	padding: 20px;
	width: 1100px;
	height: 300px; 
}
article h4 a:link
{
color: #fff;
border-bottom: 1px dotted #fff;
font-size: 24px;
text-transform: uppercase;
margin-bottom: 15px;

}
article h4 a:hover
{
text-decoration: none;
color: ##84d0f0;
}
article p
{
 font-family: calibri;
 font-size: 24px;
 float: left;
 width: 60%;
 text-align: justify;

}
article img
{
float: right;
background-color: #00b8e9;
border: 1px solid #ccc;
padding: 3px;
width: 350px;
height: 250px;
margin-bottom: 5px;


}
article .read
{

	float: right;
	margin-right: 20px;
	background-color: #fff;
	border: 1px solid #00b8e9;
	padding: 7px;
	margin-top: 10px;
	margin-bottom: 20px;

}
/* Footer*/
footer
{
background-color: #ccc;
overflow: hidden;
width: 1000px;
padding-top: 40px;
padding-right: 100px;
padding-left: 100px;

}
#first-footer
{
overflow: hidden;
margin-bottom: 20px; 
border-bottom: 2px solid #ccc;
padding-bottom: 10px;


}

#first-footer ul
{
list-style-type: none;
float: left;	
width: 260px;
margin-right: 30px;
}
#first-footer ul li
{

text-indent: 10px;
margin-top: 5px;


}

#first-footer h5
{
color: #0000ff;
border-bottom: 1px dotted #0000ff;
float: left;
width: 300px;

}
#Scound-footer
{
	text-align: center;
	color: #0000f8;
	padding-bottom: 10px;

}