/* Start Header */

.header .slider {
    background-image:url('../images/slider.jpg');
    -webkit-background-size:cover; /* CSS3 */
    -moz-background-size:cover; /* CSS3 */
    -o-background-size:cover; /* CSS3 */
    background-size:cover; /* CSS3 */
    height:600px
}

.header .slider .intro {padding-top:200px;text-align:center;color:#FFF}

.header .slider .intro h2 {
    margin:0 auto;
    font-size:50px;
    width:600px;
    border-top:4px solid #FFF;
    border-bottom:4px solid #FFF;
    padding:5px 0;
    color:#FFF
}

.header .slider .intro button {
    background:none;
    margin-top:30px;
    font-size:20px;
    border:2px solid #FFF;
    font-weight:bold;
    padding:10px 30px
}

.header .navbar {background-color:#252F31;color:#FFF;overflow:hidden}

.header .navbar h2 {color:#FFF}

.header .navbar h2 span {color:#2ecc71}

.header .navbar ul {
    list-style:none;
    padding-left:0;
    overflow:hidden;
    float:right
}

.header .navbar ul li {float:left;padding:10px}

.header .navbar ul li a {color:#FFF;text-decoration:none}

.header .navbar ul li.active a,
.header .navbar ul li a:hover {color:#30B576}

/* End Header */

/* Start Features */

.features {
    overflow:hidden;
    padding-top:40px;
    padding-bottom:50px
}

.features .feat {width:33.33333%;height:150px}

/* End Features */

/* Start About Me */

.about-me {background-color:#F2F2F2;overflow:hidden}

.about-me .image {width:40%}

.about-me .image img {width:100%}

.about-me .info {width:60%}

.about-me .info h2 {margin:25px 0 20px 40px}

.about-me .info > p {margin:0 0 10px 40px}

.about-me .info > p:last-of-type {margin-top:25px}

.about-me .info .hobbies {overflow:hidden;margin:15px 0 0 40px}

.about-me .info .hobbies .content {width:50%;overflow:hidden}

.about-me .info .hobbies .content .icon {width:12%;margin-right:5%}

.about-me .info .hobbies .content .icon i {margin-top:30px;color:#2DCC70}

.about-me .info .hobbies .content .text {width:83%}

.about-me .info .hobbies .content .text p {margin-top:0}

.about-me .info .hobbies .content .text h3 {margin-bottom:5px}

/* End About Me */

/* Start My Skills */

.my-skills {
    padding-top:30px;
    padding-bottom:50px;
    overflow:hidden
}

.my-skills .skills, 
.my-skills .progress {width:50%}

.my-skills .skills h2 {margin:25px 0 20px 40px}

.my-skills .skills p {margin:0 0 10px 40px}

.my-skills .skills p:last-of-type {margin-top:25px}

.my-skills .skills button {margin-top:20px;margin-left:40px}

.my-skills .progress .technique {margin-left:50px}

.my-skills .progress .technique div {background-color:#F2F2F2;height:25px}

.my-skills .progress .technique div span {
    background-color:#2DCC70;
    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-top:50px;
    padding-bottom:70px
}

.resume p {padding:0 40px}

.resume button {margin-top:15px}

/* End Resume */

/* Start My Education */

.my-education {padding-top:30px;padding-bottom:30px;overflow:hidden}

.my-education hr {margin:20px 0;background-color:#999;height:1px;border:0}

.my-education .main {width:50%;margin-right:5%}

.my-education .main h2 {margin:25px 0 20px 40px}

.my-education .main p {margin:0 0 10px 40px}

.my-education .main p:last-of-type {margin-top:25px}

.my-education .exp {width:45%;float:left}

.my-education .exp h3 {margin-top:80px;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:#2DCC70;
    color:#FFF;
    display:inline-block;
    padding:4px 10px
}

/* End My Education */

/* Start Testimonials */

.testimonials {
    background-color:#F2F2F2;
    padding-top:50px;
    padding-bottom:50px
}

.testimonials q {color:#888;font:italic bold 18px/1.8 Arial, Tahoma}

.testimonials h3 {margin-bottom:30px}

.testimonials ul {list-style:none;padding-left:0;text-align:center}

.testimonials ul li {
    width:15px;
    height:15px;
    border:2px solid #2DCC70;
    display:inline-block;
    cursor:pointer
}

.testimonials ul li.active,
.testimonials ul li:hover {background-color:#2DCC70}

/* End Testimonials */

/* Start Portfolio */

.portfolio {padding-top:50px;padding-bottom:70px}

.portfolio p {margin-bottom:30px}

.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
}

/* End Portfolio */

/* Start Conact Me */

.contact {
    background-color:#252F31;
    overflow:hidden;
    padding-top:50px;
    padding-bottom:70px
}

.contact .info {width:50%;margin-right:5%}

.contact h2 {color:#FFF;margin-left:40px}

.contact p {color:#6A6E71;margin-left:40px}

.contact p strong {color:#D1D6DA}

.contact .form {width:45%}

.contact .form label {display:block;color:#D1D6DA;margin:10px 0}

.contact .form input[type="text"] {
    background-color:#4B5557;
    color:#FFF;
    padding:10px;
    border:0;
    width:80%;
    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;
    overflow:hidden
}

.footer ul {
    list-style:none;
    padding-left:0;
    margin:0;
    float:right
}

.footer ul li {display:inline-block}

/* End Footer */

/* Start My Framework */

p {line-height:1.7;color:#888}

h2, h3 {color:#777}

.my-button {
    background:none;
    border:3px solid #2DCC70;
    padding:10px 30px;
    color:#2DCC70;
    font-weight:bold
}

.fl-left {float:left} /* Floating Element Left */

.text-center {text-align:center}

.clearfix {clear:both}

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

/* End My Framework */