/*- Start Main Rulz -*/
body {background-color: #CCCBC9; margin: 0; padding: 0}

.container {width: 1080px;margin: auto }
/*End Main Rulz-*/

/*-Start Header-*/
.header .slider {
    background-image:url("../images/dream_worth_more_than_money-wallpaper-1366x768.jpg");
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    height: 570px;
}

.header .navbar {
    background-color: #414141;
    position: absolute; 
    padding: 0 210px;
    margin: 0;
    color:#CCCDD1; 
    font-family: Bookman Old Style;
    font-weight: bold;
    font-size: 17px; 
    overflow: hidden
}

.header .navbar h2 {color: #DDD; padding: 0; margin: 15px; font-size: 60px}
.header .navbar h2 span {color:#F94437; font-family: Bookman Old Style}
.header .navbar ul {list-style: none;padding-left: 0;overflow: hidden;float: right}
.header .navbar ul li {padding: 10px}
.header .navbar ul li a {color:#FFF; text-decoration: none}
.header .navbar ul li .active a,
.header .navbar ul li a:hover {border-bottom: 4px dotted #DDD; color: #F94437}


.header .slider intro {padding: 100px;text-align: center;color: #FFF}
.header .slider .intro h2 {
    margin:0 auto;
    font-size:170px; 
    font-family: Bookman Old Style;
    text-align: center;
    width:555px;
    padding:  17% 45% 0px 0px;
    color: #F5F5F5
}


/*- End Header -*/

/*Start Features*/
.features {background-color: #383838; overflow: hidden;padding-top: 40px;padding-bottom: 50px}
.features .feat {width:33.33333%;height: 150px;}
.features .feat p {color: #CCCBC9; padding: 0 20px 0 0}
/*End Features*/

/*Start About Me*/
.about-me {background-color: #CCCBC9; overflow: hidden}
.about-me .image {width: 50%}
.about-me .image img {width:66%; overflow: hidden}
.about-me .info {width:50%}
.about-me .info h2 {margin: 40px 0 18px 39px}
.about-me .info > p {color: #383838; 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%}
.about-me .info .hobbies .content .icon {width: 12%;margin-right: 5% ;color: #779999}
.about-me .info .hobbies .content .icon img {max-width:100%; margin: 13px 10px 0 0}
.about-me .info .hobbies .content .text {width:83%}
.about-me .info .hobbies .content .text p {color: #383838;margin-top: 7px}
.about-me .info .hobbies .content .text h3 {margin-bottom: 10px}
/*End About Me*/


/*Start My Skills*/
.my-skills {background-color: #383838;padding-top: 30px;padding-bottom: 30px;overflow: hidden}

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

.my-skills .skills h2 {margin: 25px 0 20px 40px}
.my-skills .skills p {color: #CCCBC9;margin: 0 0 10px 40px}
.my-skills .skills p:last-of-type {margin-top: 25px}
.my-skills .skills button {margin-left: 40px;margin-top: 20px}
.my-skills .progress .technique {margin-left: 40px}
.my-skills .progress .technique div {background-color: #414141; height: 25px}
.my-skills .progress .technique div span {
    background-color: #CCCBC9;
    height: 25px; 
    display: block;
    line-height: 25px;
    color:#383838 ;
    font-weight: bold;
    text-align: right
}
/*End My Skills*/

/*Start Resume*/
.resume {
    background-color:#CCCBC9;
    padding-top: 50px;
    padding-bottom: 70px;
    text-align:center
}
.resume h2 {font-weight: bold}
.resume p {color: #383838; padding: 0 40px}
.resume button {margin-top: 15px}
/*End Resume*/

/*Start My Education*/
.my-education {background-color: #383838;padding-top: 30px;padding-bottom: 30px;overflow: hidden}

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

.my-education .main {width: 50%;margin-right: 5%}
.my-education .exp {width: 45%;}
.my-education .main h2 {margin: 25px 0 20px 40px}
.my-education .main p {color: #CCCBC9;margin: 0 0 10px 40px}
.my-skills .skills p:last-of-type {margin-top: 25px}
.my-education .exp h3 {margin-top: 74px;margin-bottom: 8px}
.my-education .exp span {display: block;margin-bottom: 10px}
.my-education .exp span:first-of-type {color:#899} 
.my-education .exp span:last-of-type {
    background-color: #DDD;
    color:#666;
    display: inline-block;
    padding: 4px 10px
} 
/*End My Education*/


/*Start Testimonial*/
.testimonial {
    background-color:#414141;
    padding-top: 50px;
    padding-bottom: 50px;
    text-align:center
}

.testimonial h3 {margin-bottom: 30px; color: #F1F1F1}
.testimonial ul {list-style-type: none;padding-left:0;text-align: center}

.testimonial ul li {
    height: 20px;
    width: 20px;
    border: 2px solid #CCB;
    display: inline-block;
}

.testimonial ul li.active,
.testimonial ul li:hover {background-color: #888}
.testimonial q {color:#888;font: italic bold 18px/1.8 Arial,Tahoma}
/*End Testimonial*/


/*Start Portfolio*/
.portfolio{padding-top: 50px;padding-bottom: 70px;text-align: center}
.portfolio p {color: #414141; margin-bottom: 30px}
.portfolio .our-work{overflow: hidden;}
.portfolio .our-work > div {width: 33.3333333%;margin-bottom: 10px}

.portfolio .our-work > div img {
    width:92%;
    margin:10px;
    padding: 1px;
    background-color: #FFF;
    border: 1px solid #CCC;
    box-shadow: 5px 4px 1px 0 #AAD
}
/*End Portfolio*/


/*Start Contact Me*/
.contact{
    background-color: #353333;
    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: #B6B7AF;
    color: #FFF;
    padding: 10px;
    border: 0;
    width: 80%;
    margin-bottom: 10px
}

.contact .form input {
    background-color: #B6B7AF;
    color: #FFF;
    padding: 10px;
    border: 0;
    width: 80%;
    margin-bottom: 10px
}

.contact .form textarea {
    background-color: #B6B7AF;
    color: #FFF;
    padding: 10px;
    border: 0;
    width: 80%;
    margin-bottom: 10px;
    height: 180px
}

.contact .form input[type="submit"] {
    background-color: #B6B7AF ;
    color: #000;
    padding: 10px 20px;
    border: 0;
    width: 30%;
    margin-top: 10px;
    cursor: pointer
}
/*End Contact Me*/


/*Start Footer*/
.footer{
    background-color: #414141;
    color: #FFE;
    font-family: Arial;
    padding: 20px 0;
    text-align: center;
    overflow: hidden
}

.footer ul {list-style: none;padding-left: 0;margin: 10}
.footer ul li {display: inline-block}
.footer ul li img :hover {color: #FFF}
.footer ul li img {width: 30px}
/*End Footer*/


/*Start my FramWork*/
.my-button {
    background-color: none;
    border: 3px solid #ABB;
    padding: 10px 30px;
    color: #383838;
    font-weight: bold;
    cursor: pointer
}

.fl-left {float: left}
 
p {line-height: 1.4; color: #CCCBC9}

h2 , h3 {color: #FB3441}

/*End my framWork*/