/* start main rules */

body{   background-color:white;
    height: 5000px;
        

}
.container{ 
        width: 1170px;
        margin: auto;
}
.clearfix{clear:both}


                                       /* End main rules */

                                      /* start header*/
.header .slide{   
                  height: 600px; 
                  background: url("../images/1920x1080/06.jpg") no-repeat ;
                  background-size: cover;

}
.header .slide .intro{ 
                       height: 600px;
                       padding-top: 200px;
                       text-align: center;
}
.header .slide .intro h2{ font-size: 50px;
                          width: 600px;
                          margin: 0 auto;
                          margin-bottom: 50px;
                          border-bottom: 3px solid white;
                          border-top: 3px solid white;
                          color: white;
}
.header .slide .intro button{
                     background: none;
                     width:150px;
                     padding: 10px;
                     font-size: 20px;
                     border: 2px solid white;
                     color: white;
                     font-weight: bold;
}






.header .nav{
          background-color: rgb(53, 50, 50);
          color:white;
          overflow: hidden;
       
}
.header .nav h2{   float: left;  }

.header .nav h2 span{       color:#2ecc71;}
.header .nav ul{
          list-style: none;
          padding-left: 0px;
          
          float: right;
}

.header .nav ul li{  
                   float: left;
                   padding: 15px;
                   
 }
  
 .header .nav ul li a {
                      text-decoration: none;
                      color:#BBB;

  }   
 .header .nav ul li a:hover ,
 .header .nav ul li .active  a{   color:#2ecc71; }                                       /* End header */

                                           /* start features */
.features{ 
           overflow: hidden;         
}
.features .feat{    float: left;
                    width:33.333333% ;
                    padding-top: 30px;
                    padding-bottom: 40px;
}
.features .feat h2{   margin-bottom: 20px; font-size: 30px;color:#555; }
.features .feat p{ line-height: 1.7;font-size: 16px;color:#888;text-align: left;}

                                    /* End features */
                                    /* Start About me */
.about{ 
    background-color: #DDD;
    height: 600px;
    overflow: hidden;
}
.about .photo{    width: 40%; float: left;}
.about .photo img{ width: 100%;height: 500px;}
.about .info{     float: left ;width: 60%;

}
.about .info h2 { margin-left: 40px; margin-top: 60px;} 
.about .info > p{   padding-left: 40px; margin-bottom: 10px;line-height: 1.7;color:#444;}
.about .info p:last-of-type{   margin-bottom: 20px;}
.about .info .hoppies{  margin-left: 40px; margin-top: 40px; }
.about .info .hoppies div{  float: left; width: 50%; }
.about .info .hoppies div h3{ margin-top: 10px;}
.about .info .hoppies div p{ line-height: 1.4;color:#444;}

                                    /* End about me */
                                     /* Start my-skills */
.my-skills{   background-color: white;
             
              overflow: hidden;
               padding-top: 50px;
               padding-bottom:50px;


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

.my-skills .skills h2{ margin-top: 20px;}
.my-skills .skills p{   margin-bottom: 30px; line-height: 1.7;color:#444;}
.my-skills .skills button{ padding: 10px;
                           width: 150px;
                                }
.my-skills .progress .tech {  margin-left: 30px;}
.my-skills .progress .tech h3{ color:#555; margin-bottom: 10px;  }
.my-skills .progress .tech div{ background-color: #F2F2F2; height: 25PX;   }
.my-skills .progress .tech div span{   background-color: rgb(22, 173, 85);
                                       height: 25px; 
                                       display: block;
                                       text-align: right;
                                       line-height: 25px;
                                       color:white;
                                       font-weight: bold
                                    
                                    }
                                      /* End my-skills */  
                                      /* Start Resume */
.Resume{    background-color: #DDD; 
            overflow: hidden;
            height: 200px; 
            padding-top: 50px;
            padding-bottom: 50px; 
            text-align: center;}
.Resume h1{ color:#555; font-weight: bold;text-transform: uppercase;}
.Resume p{ margin-bottom: 30px; line-height: 1.7;color:#444;}
.Resume button{     padding: 10px;
                    width: 250px;
}
                                       /* End REsume */
                                        /* Start Education */
.my-education  {  
                  padding-top: 50px;
                  padding-bottom: 50px;
                
                  overflow: hidden;
} 
.my-education .main {  float: left;width: 50%;margin-right: 5%; }
.my-education .main h2{ }
.my-education .main p{  line-height: 1.7;color:#444;}
.my-education  .exp  {  float: left; width: 45%;}
.my-education  .exp  h3{ margin-top: 60px;margin-bottom: 10px; } 
.my-education  .exp  span{  margin-bottom: 10px;margin-top: 10px;display: block;color:#444;}
.my-education  .exp  span:last-of-type{ background-color: #2DCC78; color:white;display: inline-block;font-size: 15px;padding: 4px 10px;} 
.my-education  .exp  hr{ margin: 10px 0px; background: #999;border: 0px;height: 1px; } 
.my-education  .exp  p{ line-height: 1.7;color:#444;}                                  
                                         /* End Education */
                                          /* Start testimonals */
.testimonals{    background-color: #DDD; 
overflow: hidden;
height: 200px; 
padding-top: 50px;
padding-bottom: 50px; 
text-align: center;}
.testimonals h3{ color:black;    }
.testimonals q{line-height: 1.8;color:#444;font-size: 18px;font-style: italic;font-weight: bold;}
.testimonals ul { list-style: none;padding: 10px; text-align: center;}
.testimonals ul li{ width: 15px;
                    height: 15px; 
                    border: 2px solid #2DCC78; 
                    display: inline-block;
                    background: none;
                    border-radius: 10px;
                    cursor:pointer;}
.testimonals ul li:hover{background-color: #2DCC78;}
                                           /* Endtestimonals*/

                                           /* Start portfolio */
.portfolio{   
              padding-top: 40px;
              padding-bottom: 60px;
              overflow: hidden;
              text-align: center;

}
.portfolio h2{ font-size: 30px;}
.portfolio p{ margin-bottom: 70px;line-height: 1.7;color:#444;}
.portfolio .our-work{}
.portfolio .our-work .image{ float: left; 
                             margin-bottom: 15px;
                            width: 33.33333%;}                        
.portfolio .our-work .image img{  width: 95%; }                        
                            
                            /* End portfolio */
                            /* Start Contact me */
.contact{   background-color: #252f31;
            padding-top: 50px;
            padding-bottom: 60px;
            overflow: hidden;
            color:white;

}
.contact .info{ width: 50%;float: left;}
.contact .info h2{ color:white}
.contact .info p{ line-height: 1.7;color:rgb(153, 147, 147);}
.contact .info strong{color:whitesmoke;padding-right: 10px;}
.contact .forma{ width: 50%; float: left;padding-top: 40px; }
.contact .forma label{ display: block;margin-bottom: 15px;}
.contact .forma input[type="text"]{ width: 400px;padding: 10px;background-color: #4B5557;margin-bottom: 30px;border: 0px;color: white;}
.contact .forma textarea{ background-color: #4B5557;width: 400px;height: 300px;margin-bottom: 50px;border:0px;color: white;padding: 10px 15px;}
.contact .forma input[type="submit"]{margin-left: -430px;padding: 10px 20px;background-color: #191E22;color: whitesmoke;border:0px;}

                            /* End Contact me*/

                            
                            /* Start Footer*/
.footer{  background-color: #191E22;
          padding-top: 20px;
          padding-bottom: 20px;
          overflow: hidden;
          text-align: center;
          color:#DDD;
}
.footer ul{ list-style: none;padding-left: 0px}
.footer ul li{ display: inline-block;}
.footer ul li img{padding: 5px; width: 24px;height: 24px;}
                            
                            /* End Footer*/

                            /* start my framework */
.my-button{ border: 3px solid #2DCC78;
            color:#2DCC78;
            background: none;
            font-weight: bold; }
                             /* start my framework */