body {height:4000px}
.container {width:1170px;margin:auto}
.clearfix {clear: both}
.header .slider {background-image: url('photo.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:600px }
.header .slider .intro {padding-top: 260px;margin: 0; height: 600px; text-align: center;color: #fff}
.header .slider .intro h2 {margin: 0 auto;font-size: 50px;width: 455px;border-top:4px solid #fff; border-bottom: 4px solid #fff;padding: 5px 0}
.header .slider .intro button {background: none;color: #fff;margin-top: 30px;font-size: 20px;border: 2px solid #fff;font-weight: bold;padding: 10px 20px}
.header .navbar {background-color:#252F31;color: #fff;overflow:hidden}
.header .navbar h2 {float:left}
.header .navbar h2 span:first-of-type {color:#2ecc71}
.header .navbar ul {list-style:none;padding-left: 0;overflow:hidden;float:right}
.header .navbar li {float: left;padding: 10px}
.header .navbar li a {color: #fff;text-decoration: none}
.header .navbar li.active a,
.header .navbar li a:hover {color: #2ecc71}


/* Start Features */
.features {overflow: hidden;padding-bottom: 50px;padding-top: 40px}
.features .feat {float: left;width: 33.33333%;height: 150px}
.features .feat h2 {color: #555}
.features .feat p {line-height: 1.7;color: #888}
/* End Features */

/* Start About me */
.about-me {background-color: #F2F2F2;overflow: hidden}
.about-me .image {float: left;width:40%}
.about-me .image img {width: 100%}
.about-me .info {float: left;width:60%}
.about-me .info h2 {margin: 40px 0 20px 40px;color: #555}
.about-me .info > p {margin: 0 0 10px 40px}
.about-me .info > p:last-of-type {margin-top: 30px}
.about-me .info p {line-height: 1.6;color: #666}
.about-me .info .hobbies {overflow: hidden;margin: 20px 0 0 40px}
.about-me .info .hobbies .content {float: left;width: 50%;min-height: 100px;overflow: hidden}
.about-me .info .hobbies .content h3 {color: #555}
.about-me .info .hobbies .content .icon {float: left;width: 30%}
.about-me .info .hobbies .content .icon img {max-width: 100%}
.about-me .info .hobbies .content .text {float: left;width: 70%}

/* End About me */

/* Start My Skills*/
.my-skills {padding-bottom: 50px;padding-top: 30px;overflow: hidden}
.my-skills .skills,
.my-skills .progress {width: 50%;float: left}
.my-skills .skills h2 {margin: 40px 0 20px 40px;color: #555}
.my-skills .skills p {margin: 0 0 10px 40px;line-height: 1.6;color: #666}
.my-skills .skills > p:last-of-type {margin-top: 30px}
.my-skills .skills button {margin-left: 40px;margin-top: 20px}
.my-skills .progress .tech {margin-left: 50px}
.my-skills .progress .tech h3 {color: #555}
.my-skills .progress .tech div {background-color: #F2F2F2;height: 25px}
.my-skills .progress .tech div span {background-color: #3DCC70;height: 25px;display: block;line-height: 25px;text-align: right;color: #fff;font-weight: bold}
/* End My Skills*/

/* Start Resume */
.resume{background-color:#F2F2F2;padding-bottom: 70px;padding-top: 50px;text-align: center}
.resume h2 {text-transform: uppercase;font-weight: bold;color: #666}
.resume p {line-height: 1.7;color: #666;padding: 0 40px}
.resume button {margin-top:15px}
/* End Resume */

/* Start My Education*/
.my-education {padding-bottom: 30px;padding-top: 30px;overflow: hidden}
.my-education .main h2 {margin: 40px 0 20px 40px;color: #555}
.my-education .main p {margin: 0 0 10px 40px;line-height: 1.6;color: #666}
.my-education .main > p:last-of-type {margin-top: 30px}
.my-education .main {width: 50%;float: left;margin-right: 5%}
.my-education .exp {width: 45%;float: left}
.my-education .exp h3 {margin-top:95px;margin-bottom: 10px}
.my-education .exp span {display: block;margin-bottom: 10px}
.my-education .exp span:first-of-type {color:#999}
.my-education .exp span:last-of-type {background-color:#3DCC70;color: #fff;display:inline-block;padding: 5px 5px}
.my-education .exp hr {margin: 20px 0;background-color:#999;height: 1px}
.my-education .exp p {line-height: 1.7;color: #777}
/* End My Education*/

/* Start Testimonials */
.testimonials{background-color:#F2F2F2;padding-bottom: 50px;padding-top: 50px;text-align: center}
.testimonials q {color: #888;font:Italic bold 18px/1.8 Arial, Tahoma}
.testimonials h3 {color: #777;margin-bottom: 30px}
.testimonials ul {list-style: none;padding-left: 0;text-align: center}
.testimonials ul li {width: 15px;height: 15px;border: 3px solid #3DCC70;display: inline-block;cursor: pointer}
.testimonials ul li.active,.testimonials ul li:hover {background-color: #3DCC70}
/* End Testimonials */

/* Start Portfolio */
.portfolio {padding-top: 60px;padding-bottom: 30px;text-align: center}
.portfolio h2 {color: #777}
.portfolio p {color: #999;margin-bottom: 70px;line-height: 1.8}
.portfolio .our-work {overflow: hidden}
.portfolio .our-work > div {float: left;width: 33.333333%;margin-bottom: 10px}
.portfolio .our-work > div img {width: 92%;margin: 10px;padding: 3px;background-color: #fff;border: 1px solid #ccc;box-shadow: 10px 10px 12px #CCC}
/* End Portfolio */

/* Start Contact Me */
.contact {background-color: #252F31;overflow: hidden;padding-bottom: 50px;padding-top: 50px}
.contact .info {width: 50%;float: left;margin-right: 5%}
.contact h2 {color: #fff;margin-left:40px}
.contact p {color: #6A6E71;margin-left:40px;line-height: 1.7}
.contact p strong {color: #D1D6DA}
.contact .form {width: 45%;float: left}
label {display:block;color: #D1D6DA;margin: 10px 0}
input[type='text'] {background-color: #4B5557;color: #FFF;padding: 10px;border: 0;width: 35%;margin-bottom: 10px}
textarea {background-color: #4B5557;color: #FFF;padding: 10px;border: 0;width: 35%;margin-bottom: 10px;height: 200px}
input[type='submit'] {float: right;margin-right: 411px;background-color: #191E22;padding: 10px 20px;border: 0;margin-top: 10px;color: #fff}
/* End Contact Me */

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

/* Start Framework */
.my-button {background: none;border: 3px solid #3DCC70;padding: 10px 20px;color: #3DCC70;font-weight: bold}

/* End Framework */