/* Start Global Rolez */

body{


}
.container{

    width: 900px;
    margin:auto;
}
.clearfix {

	clear: both;
}


/* End Global Rolez */




/* Start Header*/

.header .slider{

  	 background-color: #fff;
     background-image: url(../img/testbg.jpg);
     background-size: cover;
	-webkit-background-size: cover;
	height:500px;
	text-align: center;
	-moz-background-size: cover;
    -o-background-size: cover;


}



.header .slider .intro h2

{
   margin: 0 auto;
   padding-top: 250px;
   font-size: 40px;
   color: #fff;


}
.header .slider button {

    margin-top: 20px;
    background: none;
    width: 140px;
    border: 2px solid #fff;
    color: #fff;
    padding: 5px;
    font-size: 20px;

}

.header .navbar{

 background-color: #252F31;
 color: #fff;
 overflow: hidden;

}

.header .navbar h2 {

   float: left;
   text-transform: uppercase;
   cursor: pointer;

}

.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;
  cursor: pointer;

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

}

.header .navbar ul li a:hover{    

	color: #2ecc71;

}

/* End Header*/


/* Start Features */ 

.features {

	overflow: hidden;
	padding-top: 40px;
	padding-bottom: 50px;
}
.features .feat {
   float: left;
   width: 33.3333%;
   height: 150px;
  

}
.features .feat h4 {
 font-size: 20px;
 color: #555;

}
.features .feat p{

	line-height: 1;
	color:#999;
	text-align: justify;
	padding: 0 20px 0 0 ;
} 


/* End Features */ 

/* Start About Me */

.about-me {

background-color: #F2F2F2;
overflow: hidden;

}
.about-me h2{
margin-left: 30px;
color: #555;

}
.about-me .img {

  float: left;
  width: 40%;

}

.about-me .img img {

	width: 100%;
    height: 475px;
}

.about-me .info {

float: left;
 width: 60%;

}

.about-me .info h2 {

  margin: 40px 0 20px 40px;


}


.about-me .info > p {      

 margin: 0px 0 10px 40px;
 
}



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

}
.about-me .info  p {      

 line-height: 1.1;
 color: #666;
}

.about-me .info .hobbies > div{
   float: left;
   width: 50%;
   min-height: 100px;


}
.about-me .info .hobbies > div h3{

	color: #555;
}

/* End About Me */

/* Start my skills */

.my-skills {

	padding-top: 30px;
	padding-bottom: 30px;
	overflow: hidden;
}

.my-skills .skills,
.my-skills .pro   {
   width: 50%;
  float: left;

}



.my-skills h2 {
margin-left: 30px;
color: #555;

}

.my-skills p {
margin: 0 0 10px 30px ;
line-height: 1.6;
color: #555;

}

.my-skills button {
    
margin: 10px 0 10px 30px;
background: #fff;
border: 2px solid #2ecc71;
color: #2ecc71;
padding: 10px;
cursor: pointer;
 font-weight: bold;
    
}

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


.my-skills .progress .technique{
    
    margin-left: 30px;
}
.my-skills .progress .technique h4 { 
    color: #555;
}

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

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

/* end my skills */

/* start resume */

.resume {

text-align: center;
background-color: #f2f2f2;
margin-top: 50px;
margin-bottom: 70px;
height: 300px;

}

.resume h2 { 
    color: #555;
   padding: 30px;
}

.resume p {
    
    
    line-height: 1.6;
    color: #555;
    
}

.resume button {
    
    background: #fff;
    border: 2px solid #2ecc71;
    color: #2ecc71;
    padding: 10px ;
    cursor: pointer;
    margin-top: 20px;
    font-weight: bold;

    
}

/* end resume */


/* Start my education */

.my-education {

	padding-top: 30px;
	padding-bottom: 30px;
	overflow: hidden;
}

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




.my-education h2 {
    
color: #555;
    
}

.my-education p {
    
        line-height: 1.6;
        color: #555;
    
}
.my-education .main p{
    
       line-height: 1.6;
        color: #555;
}

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

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

}

.my-education .exp h3 {

    margin-top: 70px;
    margin-bottom: 5px;
}

.my-education .exp span:first-of-type{
    
    color: #999;
}

.my-education .exp span:last-of-type{
    
    background-color: #2ecc71;
    color: #fff;
    display: inline-block;
    padding:4px 5px;
}


.my-education .exp span {
    
     display: block;
     margin-bottom: 5px;
}

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

.my-education .exp p {
    
    line-height: 1.7;
    color: #777;
}

/* end my education */

/* start testemonial */

.testemonial {

text-align: center;
background-color: #f2f2f2;
margin-top: 30px;
margin-bottom: 30px;
height: 300px;

}

.testemonial h3{
    
    padding-top: 25px;
    color: #777;
}

.testemonial p{
     padding-top: 10px;
     line-height: 1.7;
     color: #777;
     font-size: 18px;
}

.testemonial h5 {    

	padding-bottom: 10px;
    padding-top: 20px;
}
.testemonial ul {
    
    list-style-type: none;
    padding-left: 0;
    text-align: center;
}

.testemonial ul li {
    
    width: 10px;
    height: 10px;
    border: 2px solid #2ecc71;
    display: inline-block;
    border-radius: 50%;
    
}

.testemonial ul li.active,
.testemonial ul li:hover
{
    
    background-color: #2ecc71;
    cursor: pointer;
}
/* end testemonial */

/* start portofolio */

.portofolio {
  padding-top: 30px;
  padding-bottom: 30px;
  text-align: center;

}

.portofolio h2{
    
    	padding-bottom: 10px;
        padding-top: 20px;
        
        line-height: 1.6;
        color: #555;
    
}

.portofolio p {
    
    padding-top: 20px;
       line-height: 1.7;
    color: #777;
    font-size: 18px;
}

.portofolio .our-work{

overflow: hidden;

}
.portofolio .our-work > div {

float: left;
width: 33.333333%;
margin-bottom: 10px;


}
.portofolio .our-work > div img {

width: 50%;
margin: 20px;


}

/* end portofolio */

/* Start Contact */

.contact {


	background-color: #252f31;
	overflow: hidden;
     padding-top:  50px;
     padding-bottom: 70px;
}

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

    
}
.contact h2 {

	color: #fff;
    margin-left: 40px; 
}
.contact p {color: #6a6e71; margin-left: 40px;line-height: 1.7;}
.contact .info .social ul { list-style: none;}
.contact .info .social ul li { display: inline; cursor: pointer;}
.contact .info .social svg { width: 40px; }
.contact .form{float: left;width: 45%;margin-top: 15px;}
.contact .info p strong{ color: #fff;}
.contact .form label { color: #fff; display: block; margin: 10px 0;}
.contact .form input{ background-color: #4b5557; color: #fff; padding: 10px; border: 0; width: 100%; margin-bottom: 10px;}
.contact .form input:last-of-type{ width: 425px; cursor: pointer; margin: 10px 0;}
.contact .form textarea { background-color: #4b5557; color: #fff; padding: 10px; border: 0; width: 100%; margin-bottom: 10px;height: 120px;
}
/* End Contact */
.footer { text-align: center; background: black; color: #fff; padding: 15px;}
.footer span{color: #2ecc71;}