/* Start Main rules */
/*#2ecc71*/

body{font-family: 'Nunito', sans-serif;}

.container{width:1070px;margin:auto;}

.clearfix{clear:both}
/* End Main rules*/

/* Start Header */
.header .slider
{
	background-image:url('../images/slider.jpg');
	background-size: cover;
	height: 600px;
}
.header .slider .intro{padding-top: 250px;text-align:center;color: #fff;}
.header .slider .intro h2
{
	color: #fff;
    font-size: 49px;
    width: 544px;
    border-top: 4px solid #fff;
    border-bottom: 4px solid #fff;
    margin: auto;
    padding: 5px;
}
.header .slider .intro button
{
	background: none;
	font-weight: bold;
    padding: 10px;
    width: 143px;
    margin-top: 45px;
    color: #fff;
    border: 3px solid #fff;
}
.header .navbar
{
	background-color: #252F31;
	color: #fff;  
	overflow: hidden
}
.header .navbar h2{text-transform: uppercase;color: #fff}
.header .navbar h2 span{color:#2ecc71}
.header .navbar ul{list-style:none;padding-left:0;float: right}
.header .navbar ul li {padding: 10px;}
.header .navbar ul .active a {color: #2ecc71;}
.header .navbar ul li a {color: #fff;text-decoration: none;}
.header .navbar ul li a:hover{color: #2ecc71;}
/* End Header */

/* Start Features */
.features{overflow: hidden;padding: 50px 0}
.features .feat{width: 33.33333%;height: 150px;}
.features .feat p{color: #888}
/* End Features */

/* Start About me */
.about-me{overflow: hidden;background-color: #eee;}
.about-me .image{width: 40%;}
.about-me .image img{width: 100%;}
.about-me .info{float: left;width: 60%;}
.about-me .info h2
{
	margin: 23px 0 20px 40px;
    text-transform: uppercase;
}
.about-me .info > p{margin: 0 0 10px 40px;color: #666}
.about-me .info  p{line-height: 1.5;color: #666}
.about-me .info > p:last-of-type{margin-top: 9px;}
.about-me .info .hobbies{overflow: hidden;margin: 10px 0 0 40px;}
.about-me .info .hobbies .content
{
	width: 50%;
	min-height: 100px;
	overflow: hidden
}
.about-me .info .hobbies .content h3{color: #292525;margin-bottom: 5px;}
.about-me .info .hobbies .content .icon{width: 12%;margin-right: 5%;}
.about-me .info .hobbies .content .icon img{max-width: 100%;margin:40px 10px 0 0;}
.about-me .info .hobbies .content .text{width: 83%;}
.about-me .info .hobbies .content .text p{font-size: 15px;margin: 0;}
/* End About me */

/* Start My Skills */
.my-skills{padding: 30px 0;overflow: hidden;}
.my-skills .skills, .my-skills .progress{width: 50%;}
.my-skills .skills h2
{
	margin: 23px 0 20px 40px;
    text-transform: uppercase;
}
.my-skills .skills > p
{
	margin: 0 0 10px 40px;
}
.my-skills .skills > p:last-of-type{margin-top: 9px;}
.my-skills .skills button{margin: 20px 0 20px 40px;}
.my-skills .progress .tech {margin-left: 30px;margin: 26px 0;}
.my-skills .progress .tech h3{color: #555;}
.my-skills .progress .tech div{background-color: #F2F2F2;height: 25px;}
.my-skills .progress .tech div span
{
	display: block;
	background-color: #2ecc71;
	line-height: 25px;
    color: #fff;
    font-size: 15px;
    text-align: right;
}

/* End My Skills */


/* Start Resume */
.resume
{
	background-color: #F2F2F2;
	padding-top: 50px;
	padding-bottom: 70px;
	text-align:center;
}
.resume h2
{
	text-transform: uppercase;
	font-weight: bold;
}
.resume button{margin-top: 20px;}
/* End Resume */

/* Start My Education */
.my-edu{padding: 30px 0;overflow: hidden;}

.my-edu .edu {width: 50%;margin-right: 5%;}
.my-edu .exp{width: 45%;}
.my-edu .exp h3
{
	text-transform: uppercase;
	margin-top: 67px;
	margin-bottom: 8px;
}
.my-edu .exp span{display: block;margin-bottom: 8px;}
.my-edu .exp span:first-of-type{color: #999}
.my-edu .exp span:last-of-type
{
	background-color: #2ecc71;
	color: #fff;
	display: inline-block;
	padding: 5px;
}
.my-edu hr
{
	margin: 20px 0;
	background-color: #999;
	height: 1px;
	border:0;
}
.my-edu .exp{line-height: 1.7;color: #666}
.about-me .info h2
{
	margin: 23px 0 20px 40px;
    text-transform: uppercase;
}
.my-edu .edu > p
{
	margin: 0 0 10px 40px;
	line-height: 1.7;
	color: #666
}
.my-edu .edu > p:last-of-type{margin-top: 9px;}
/* End My Education */

/* Start Testimonials */
.testimonials
{
	background-color: #F2F2F2;
	padding-top:50px;
	padding-bottom: 50px;
	text-align:center;
}
.testimonials q{color: #888;font:italic bold 18px/1.8;}
.testimonials h3{margin-bottom: 30px}
.testimonials ul {list-style: none;padding-left: 0}
.testimonials ul li 
{
	width: 20px;
	height: 20px;
	border: 2px solid #2DCC70;
	display: inline-block;
}

.testimonials ul li.active,.testimonials ul li:hover{background-color: #2DCC70;cursor: pointer;}
/* End Testimonials */


/* Start Portfolio */
.portfolio{padding-top: 50px;padding-bottom:70px;text-align:center;}
.portfolio p{margin-bottom: 30px}
.portfolio .our-work{overflow: hidden;}
.portfolio .our-work > div{width: 33.33333%;margin-bottom: 10px;}
.portfolio .our-work > div img
{
	width: 92%;
	margin: 10px;
	padding:3px;
	background-color: #fff;
	border:1px solid #ccc;
}
/* End Portfolio */


/* Start contact me */
.contact
{
	background-color:#252F31;
	overflow: hidden;
	padding-top: 50px;
	padding-bottom: 70px;
}
.contact .info
{
	float: left;
	width: 50%;
	margin-right: 5%;
} 
.contact h2{color: #fff;margin-left: 40px;}
.contact p
{
	margin-left: 40px;
	color: #6A6E71;
}
.contact p strong{color: #D1D6DA}

.contact .form{float: left;width: 45%;}
.contact .form label
{
	display: block;
	color: #D1D6DA;
	margin:10px 0;
}
.contact .form input[type="text"]
{
	border :0;
	width: 80%;
	color: #fff;
	background-color: #4b5557;
	padding:10px;
	margin-bottom: 10px;

}
.contact .form textarea
{
	background-color: #4b5557;
	color: #fff;
	padding: 10px;
	border:0;
	width: 80%;
	margin-bottom: 10px;
	height: 300px;
}
.contact .form input[type="submit"]
{
	background-color: #191E22;
	color: #fff;
	padding:10px 20px;
	border: 0;
	margin-top: 10px;
}
/* End contact me */


/* Start footer */
.footer
{
	background-color: #191E22;
	color: #6A6E71;
	padding: 20px 0;
	text-align: center;
}
.footer ul{list-style: none;padding:0;}
.footer ul li{display: inline-block;font-size: 20pt;margin-right: 10px;}
/* End footer */

/* Start My framwork */
.my-button
{
	background: none;
	padding: 10px 30px;	 
	color: #2ecc71;
	border: 3px solid #2ecc71;
	font-weight: bold;
}
.fl-left{float: left}
p{line-height: 1.7;color:#888;}
h2,h3{color: #777}
/* End My Framework */