body{
	padding: 0px;
	margin: 0px;
	background: #E6E6E6;
}
header{
	background: #41b3cd;
	padding-top: 40px;
	padding-bottom: 40px;
}
header .float{
	float: right;
	margin-top: -20px;
	color: #fff;
	cursor: pointer;
}
header .float h4{
	line-height: 1.5em;
	font-size: 16px;
}
.navbar{
	background: #4dbfd9;
	height: 300px;
}

.navbar ul{
	list-style: none;
}
.navbar ul li{
	float: left;
	margin-right: 50px;
	margin-top: 15px;
}
.navbar ul li a:hover{
	color: #222;
}
.navbar a{
	text-decoration: none;
	font-size: 20px;
	color: #fff;
	transition: all .5s ease-in-out;
}
.personal{
	background: url(img/alone-dark-dark-background-2894944.jpg);
	position: relative;
	top: -120px;
}
.personal .overlay{
	background: rgba(3,3,3,.6);
	padding-top: 100px;
}
.personal .overlay img{
	display: block;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	margin:auto;
}
.personal .overlay  h1{
	color: #fff;
	font-weight: bold;
	font-size: 40px;
}
.personal .overlay  p{
	color: #fff;
	font-weight: bold;
	font-size: 17px;
	margin-top: 0px;
}

.personal .overlay a{
	text-decoration: none;
	color: #fff;
}

.personal .overlay button{
	display: inline-block;
	margin-top: 40px;
	height: 60px;
	width: 200px;
	color: #fff;
	font-size: 20px;
	margin-left: 20px;
	margin-bottom: 90px;
}
.personal .overlay .one{
	background: transparent;
	border: 1px solid #fff;
	border-radius: 5px;
	transition: all .5s ease-in-out;
	cursor: pointer;
}
.personal .overlay .one:hover{
	background:   #4dbfd9
}
.personal .overlay .two{
	background:  #4dbfd9;
	border: none;
	transition: all .5s ease-in-out;
	cursor: pointer;
	border-radius: 5px;
}
.personal .overlay .two:hover{
	background: transparent;
	border: 1px solid #fff;
}
.about{
background: #fff;
margin-top: -140px;
padding-top: 50px;
padding-bottom: 50px;
padding-left: 40px;
margin-bottom: 50px;
min-height: 300px;
}
.about h1{
	color: #222;
	font-size: 20px;
	margin-top:20px;
	margin-bottom: 20px;
}
.about .mohamed_one span{
	color:  #4dbfd9;
	font-size: 14px;
	font-weight: bolder;
	margin-bottom: 5px;
	display: block;

}
.about .mohamed_one p{
	font-size: 13px;
	line-height: 1.6em;
	font-weight: bold;
	color: gray;
	border-bottom: 1px dash #222;
}
.about .mohamed_one .dash{
	border: 1px dashed gray;
	margin-top: 20px;
	width: 85%;
}
.about .mohamed_two h4{
	font-size: 15px;
	font-weight: bold;
}
.about .mohamed_two h4 span{
	font-weight: normal;
	color: gray;
	margin-left: 30px;
	display: inline-block;
}
.skill{
background: #fff;
padding-left: 40px;
margin-bottom: 50px;
}
.skill h3{
	margin-bottom: 30px;
}
.skill h5{
	font-weight: bold;
}
.progress{
	height: 17px;
}
.work{
	padding-left: 40px;
	background: #fff;
	padding-top: 50px;
	padding-bottom: 50px;
	padding-right: 40px;
	margin-bottom: 50px;
}
.work h2 , .education h2 , .contact h2{
	margin-bottom: 20px;
	color: gray;
}
.work .border{
	width: 200px;
	height: 200px;
	background:#EEE;
	padding: 20px;
	margin-top: 50px;
	border-radius: 5px;
}
.work .border p{
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	color: #222;
	margin-top: 50px;
}
.work .detail{
	border: 1px solid rgb(224, 221, 221);
	margin-top: 50px;
	height: 200px;
	margin-left: -72px;
	padding-top: 40px;
	padding-left: 20px;
	padding-right: 10px;
	transition: all .5s ease-in-out;
	border-radius: 5px;
}
.work .detail:hover{
	background: #4dbfd9;
}
.work .detail:hover p{
	color: #fff;
}
.work .detail:hover span{
	color: #fff;
}
.work .detail h3{
	font-size: 20px;
	font-weight: bolder;
	color: #333;
}
.work .detail h3 span{
	color: #4dbfd9;
}
.work .detail p{
	font-size: 13px;
	color: gray;
	margin-top: 20px;
}
.education{
	padding-left: 40px;
	background: #fff;
	padding-top: 50px;
	padding-bottom: 50px;
	padding-right: 40px;
	margin-bottom: 50px;
}
.education .img{
	border: 1px solid #EEE;
	padding:20px;
	border-radius: 5px;
	margin-bottom: 30px;
}
.education .img img{
	width: 233px;
	height: 216px;
}
.education .detail{
	border: 1px solid #EEE;
	height: 260px;
	margin-left: -31px;
	padding: 20px;
	transition: all .5s ease-in-out;
	border-radius: 5px;
	margin-bottom: 30px;
}
.education .detail:hover{
	background: #4dbfd9;
}
.education .detail:hover h4{
	color: #fff;
}
.education .detail:hover p{
	color: #fff;
}
.education .detail h3{
	font-weight: bold;
	font-size: 18px;
}
.education .detail h4{
	color: #4dbfd9;
	font-weight: bold;
	font-size: 15px;
}
.education .detail p{
	color: gray;
	font-size: 15px;
	margin-top: 20px;
}
.contact{
	padding-left: 40px;
	background: #fff;
	padding-top: 50px;
	padding-bottom: 50px;
	padding-right: 40px;
	margin-bottom: 50px;
	min-height: 300px;
}
.contact h4{
	font-weight: bold;
}
.contact .one p{
	transition: all .5s ease-in-out;
	cursor: pointer;
}
.contact .one p:hover{
	color: #4dbfd9;
}
.footer p{
	margin-bottom: 20px;
}