/* Start Rolez */

body {font-family:Arial , Tahoma;margin:0}

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

.clean {clear:both}

/* End Rolez */

/* Start Header */

/* Start Slider */

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

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

.header .slider .intro h2 {
    display:inline-block;
    border-top:4px solid #FFF;
    border-bottom:4px solid #FFF;
    font-size:50px;
    padding: 0px 5px;
    color:#FFF
}

.header .slider .intro button {
    display: inline-block;
    background:none;
    color: #FFF;
    padding:10px 25px;
    font-size:22px;
}

/* End Slider */

/* Start Navbar */

.navbar {
    height:65px;
    background-color:#252F31;
    color:#FFF
}

.navbar .logo span {color: #2ecc71}

.navbar h2 {
    text-transform:uppercase;
    margin-top:17px;
}

.navbar ul {
    list-style:none;
    float:right;
    margin:23px
}

.navbar ul li {
    display:inline;
    padding-right:15px
}

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

.navbar ul a.active,
.navbar ul li a:hover {
    color:#2ecc71
}

/* End Navbar */


/* End Header */

/* Start Features */

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

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

.features .feat p {
    width:95%
}

/* End Features */

/* Start About Me */

.about-me{
    min-height:457px;
    background-color:#F2F2F2
}

.about-me .image {
    float: left;
    width: 45%;
}
.about-me .info {
    width: 40%;
    overflow:hidden
}

.about-me .info h2 {margin-bottom:-5px}

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

.about-me .info .hobbies .content .icon {
    width:14%;
    margin-right:2%;
    margin-top:30px;
}

.about-me .info .hobbies .content img {
    max-width: 100%
}

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

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

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

/* End About Me */

/* Start My Skills */

.my-skills {
    min-height:400px;
    padding-top:30px
}

.my-skills .skills {width:50%;
margin-left:40px}

.my-skills .skills p {width:90%}

.my-skills .skills button {
    display: inline-block;
    background:none;
    color: #2ecc71;
    padding:9px 26px;
    border: 2.5px solid #2ecc71;
    margin-top:20px;
    font-size:15px
}

.my-skills .progress {width:45%}

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

.my-skills .progress .technique div span {
    background-color:#2ecc71;
    display:block;
    text-align:right;
    height:25px;
    color:#FFF;
    font-weight:bold;
    line-height:25px    
}

/* End My Skills */

/* Start Resume */

.resume {
    background-color:#F2F2F2;
    text-align:center;
    padding-top:50px;
    padding-bottom:50px
}

.resume p {width:95%}

.resume button {
    display: inline-block;
    background:none;
    color: #2ecc71;
    padding:9px 26px;
    border: 2.5px solid #2ecc71;
    margin-top:10px;
    font-size:15px
}

/* End Resume */

/* Start My Education */

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

.my-education .main {
    width:50%
}

.my-education .main h2 {margin-left:40px}

.my-education .main p {width:90%;margin-left:40px}

.my-education .exp {
    float:left;
    width:45%;
    margin-top:55px;
    padding-left:5%
}

.my-education .exp .certified {margin-bottom:65px}

.my-education .exp .certified:last-of-type {margin-bottom:50px}

.my-education .exp .certified span {color:#666}

.my-education .exp .certified span:last-of-type{
    display:inline-block;
    background-color:#2ecc71;
    color:#FFF;
    padding:3px 10px;
    margin-top:10px;
    margin-bottom:20px
}

/* End My Education */

/* Start Testemonials */

.testemonials {
    text-align:center;
    background-color:#F2F2F2;
    overflow:hidden;
    padding-top:40px;
    padding-bottom:50px
}

.testemonials p {font:bold italic 18px Arial , Tahoma , "Arial Black"}

.testemonials p q {line-height:1.7}

.testemonials ul {
    list-style:none;
    display:inline-block;
    padding:0
}

.testemonials ul li {
    width:15px;
    height:15px;
    border: 1.5px solid #2Dcc70;
    margin-right:8px;
}

.testemonials ul li.active,
.testemonials ul li:hover {background-color:#2Dcc70;cursor:pointer}

/* End Testemonials */

/* Start Portofolio */

.portofolio {
    overflow:hidden;
    margin-top:20px;
    margin-bottom: 60px;
    text-align:center
}

.portofolio p {
    margin-bottom:40px;
    width:90%
}

.portofolio .icon {
    display:inline-block;
    /* margin-bottom:5px */
}

.portofolio img {
    border: 1px solid #CCC;
    padding:8px;
    margin:4px
}

/* End Portofolio */

/* Start Contact Me */

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

.contact-me .info {width:50%}

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

.contact-me .info p {margin-left:40px}

.contact-me .info p:last-of-type {margin-top:-13px}

.contact-me .info strong {color: #D1D6DA;margin-right:40px}

.contact-me .form {width:50%}

.contact-me .form label {
    color:#D1D6DA;
    display:block;
    margin-top:18px;
    margin-bottom:13px;
}

.contact-me .form input[type="text"] {
    background-color: #485557;
    color:#FFF;
    height: 40px;
    width: 80%;
    border:0;
    font-size:18px
}

.contact-me .form textarea {
    height:300px;
    width:80%;
    background-color:#455557;
    color:#FFF;
    border:0;
    font-size:18px
}

.contact-me .form input[type="submit"] {
    background-color: #191E22;
    display:block;
    color:#FFF;
    height: 40px;
    border:0;
    margin-top:30px;
    padding-right: 22px;
    padding-left: 22px
}

/* End Contact Me */

/* Start Footer */

.footer {background-color:#191E22;color:#6A6E71;overflow:hidden;padding-bottom:0px}

.footer {text-align:center}

.footer ul {list-style:none}

.footer ul li {
    display:inline-block;
    text-align:center;
    margin-right:5px
}

.footer ul li a {color:#6A6E71}

.footer ul li a:hover {
    color:#FFF
}

/* end Footer */

/* Start My Frame Work */

.fl-left {float:left}

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

h2 , h3 {color:#777}

button , input[type="submit"]{cursor:pointer}

/* End My Frame Work */