a, a:hover{
    text-decoration: none;
    color:inherit;
}
html{
}
ul{
    list-style-type: none;
}
li{
    display:inline-block;
}
.bold{
    font-weight:700;
}
body{
    padding:0;
    margin:0;
    font-family: Cambria, Cochin, Georgia, Times, Times New Roman, serif;
    color:#777777;
    font-size: 18px;
    text-shadow: 1px 1px 1px #ccc;
}
.home{
    position: fixed;
    top:10px;
    left:0;
    margin:5px;
    color:white;
    z-index: 999999;
}
.loading{
    position: fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index: 999999;
    background:rgba(255,255,255,.9);
    transition: all 1s ease-in-out;
}
.loading i{
    left:47%;
    top:43%;
    position: absolute;
    transition: all 1s ease-in-out;
}
.clear{
    clear:both;
}
.info {
    float:left;
    width:40%;
}


/* header */

.header {
    background-image: url("images/slider.jpg");
    color:white;
    text-align: center;
    background-size:cover;
    background-position:center top;
    position:relative;
    height:630px;
}

.heading{
    height:48%;
    padding:15% 0 5%;
    font-size: 1.3em;
}
.header .heading>h1{
    border-width: 3px;
    border-color: white;
    border-style: solid none;
    width: 525px;
    padding:0;
    margin:30px auto;
}
.header #learn{
    border:2px solid white;
    padding:5px 25px;
    color:inherit;
    margin:20px auto;
}
/* navbar */
.navbar{
    margin-bottom:0;
    background-color:#252F31;
    bottom:0;
    width:100%;
    position:absolute;
    }
.navbar ul{
    text-align:right;
    float:right;
    width:50%;
}
.navbar li:first-child{
    color:#2ECC71;
}
.navbar li{
    padding:1%;
    float:left;
}
.navbar li>a:hover{
    color:#2ECC71;
}
.navbar span{
    display:inline-block; 
    margin:10px 0 10px -20%;  
}


#zero{
    color:#2ECC71;
    margin:0;    
}
/*section 1 */
.section1{
    height:150px;
    padding:0 1% 0 10.5% ;
}
.section1 div{
    
    margin:0 1%;
    width:27%;
    float:left;    
    font-size:16px;
    
}
/*section 2 about*/
.section2{
    background-color: #F2F2F2;
    padding: 0 140px;
    height:515px;
    box-sizing: border-box;
}
.section2>img{
    float:left;
    width:40%;
    padding:20px;
}

.section2>.info{
    width:56%;
}
.section2 .div-right{
    float:left;
    width:28%;
}
.section2 .div-right>img{
    float:left;
    width:auto;
    display: inline-block;
    margin:30px 0;
}
.section2 .div-right>div{
    float:right;
    width:80%;
    display:inline-block;
}



/* section 3 skills*/
.section3{
    padding: 50px 12% 40px 13%;
}
.section3 div{
    margin:0 30px;
}
.section3 ul li{
    display:block;
    line-height:2em;
}
.chart{
    width:100%;
    background-color: #F2F2F2;
}
.chart span{
    background-color: #2DCC70;
    display:block;
    text-align: right;
    color:white;
    padding:0 5px;
}
#html-css{
    width:83%;
}
#php-mysql{
    width:88%;
}
#wordpress{
    width:90%;
}
#graphic-design{
    width:70%;
}
#contact, #resume-span{
    color:#2DCC70;
    border:2px solid #2DCC70;
    padding:7px 18px;
}
 /* section 4 resume */
 .section4 {
     background-color: #F2F2F2;
     text-align: center;
     padding:50px 12% 70px ;
 }
 #resume-span{
     display:inline-block;
     margin:30px;
 }

 /*section 5 testemonials */
.section5{
    padding:50px 12% 60px 13%;
}
.section5 .edu{
    float:left;
    width:50%;
    margin:5px;
    height:100%;
}
.section5 .side-info{
    float:right;
    width:40%;
    
}
 .mark{
     background-color: #2DCC70;
     color:white;
     font-size: 15px;
     padding:3px 7px;
 }
/*section 6 comment*/
.section6{
    background-color: #F2F2F2;
    text-align: center;
    padding:60px 12% 80px 12%;
}
.section6 span{
    font-weight: bolder;
    font-size:19px;
}
.section6 ul>li{
    border:2px solid #2DCC70;
    cursor:pointer;
    padding:7px;
    margin:2px;
}
.section6 ul>li:hover{
    background: #2DCC70;
}
.section6 ul>li:nth-child(2){
    background: #2DCC70;
}
/* section 7 portofolio */
.section7{
    text-align: center;
    padding:50px 11%;
}
.section7 .info {
    width:100%;
    margin:2% 0 5%;
}
.section7 img{
    border: 1px solid #CCCCCC;
    padding:5px;
    margin:10px;
} 

/* section 8 contact me */

.section8{
    background-color:#252F31;
    height:700px;
    padding:50px 13% 0;
    margin-bottom:0;
}
.section8 h2, .section8 span{
    color:white;
}
.section8 form{
    width:40%;
    float:right;
    color:#D1D6DA;
    line-height: 50px;
}
.section8 form input, .section8 form textarea{
    background: #4B5557;
    width:100%;
    height:40px;
    border-style: none;
}
.section8 form textarea{
    height:200px;
}
.section8 form input[type="submit"]{
    background-color: #191E22;
    color:white;
    width:100px;
}
/* footer */
.footer{
    background-color: #191E22;
    display:inline-block;
    padding:0 13%;
    margin:0 0 -10px 0;
    width:74%;
}
.footer li{
    float:right;
    margin:3px;
}
.footer p{
    float:left;
}