body{



      box-sizing:border-box;
      background-color:#B39C4B ;

      font-family: 'Open Sans', sans-serif;
      font-family: 'Open Sans', sans-serif;
     
    
    }


*{padding: 0;
  margin: 0;
  box-sizing: border-box;}


.logo{ width: 75px;
       height: 33px;
       position: absolute;
       
       
       right:150px;
       top:14px;
        }



.main{ width: 360px;
      height: 1280px;
       margin: auto;
      background-color: #F5F5F5;
           box-shadow: 0 8px 16px 0 rgba(0,0,0,0.4);
  cursor:;
     /* box-shadow: -4px 3px 9px 4px rgba(219,219,219,0.46);
      box-shadow: 0px 3px 9px 12px rgba(181,181,181,0.43);*/


        }


.topbar{ width: 360px;
         height: 80px;
          position: relative;
         box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
        background-color:#fff;}


.bar{ width: 360px;
         height: 22px;
        background-color:;}


.toggle{ width: 26px;
         height: 20px;
         display: block;
        margin: 15px 0 0 20px;
         float: left;
         background-color:;}



 h2{ font-family: 'Roboto', sans-serif;
     display:inline-block;
     color:#000;
     text-align: center;
    font-size: 21px;
    margin: 17px auto;
    float: ;
    font-weight:normal;
    margin: ;}


.filter{ width: 30px;
         height: 20px;
         display: block;
        margin: 12px 0 0 20px;
         float: right;
         background-color:;}




       .heyfootbanner{ width: 360px;
            background-color: ;

            background-image: url("../img/skill.png");
            background-repeat: no-repeat;
            height:225px; }





       .skillbox{ width: 360px;
            background-color:#fff;
            height:93px; 
            margin-top: 12px;
            box-shadow: 0 1px 0px 0 rgba(0,0,0,0.2);
         transition: 0.3s;
            padding: 0px 0px 0px 12px;}





       .skillbox:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  cursor:;
}



      .skillbox h3{ font-family: 'Open Sans', sans-serif;
                 color:#000000;
                 font-size: 16px;
                 padding: 12px 0px 12px 0px;
   }




   .border{ width: 344px;
            height: 1px;
            margin-bottom: 12px;

            background-color:#E5E5E5;
             }







       .Remarks{ width: 360px;
            background-color:#fff;
            height:96px; 
            margin-top: 12px;
            box-shadow: 0 1px 0px 0 rgba(0,0,0,0.2);
         transition: 0.3s;
            padding: 12px 0px 0px 12px;}


        .text-line {
        background-color: transparent;
        color: #000;
        outline: none;
        outline-style: none;
        outline-offset: 0;
        border-top: none;
        border-left: none;
        border-right: none;
        border-bottom: solid #EAEAEA 1px;
        padding: 1px 2px;
        width: 210px;
    }



       .Remarks:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  cursor:;
}




       .Remarks p{ font-size: 11px;}



       .Remarks h6{ margin-bottom: 12px;
                   
                  }



            .uplaodimg{ width: 360px;
            background-color:#fff;
            height:150px; 
            margin-top: 12px;
            box-shadow: 0 1px 0px 0 rgba(0,0,0,0.2);
         transition: 0.3s;
            padding: 12px 0px 0px 12px;}   








       .uplaodimg p{ font-size: 11px;}



       .uplaodimg h6{ margin-bottom: 12px;}



       .uplaodimg:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.8);
  cursor:;
}

                             
            
      .btn {
  border: 2px solid black;
  background-color: #000;
  color: black;
 
  font-size: 16px;
  cursor: pointer;
  display: block;
  width: 340px;
  height: 45px;
  margin: auto;
  text-align: center;
  line-height: 45px;
  margin-top: 12px;
  text-transform: uppercase;
  border-radius: 3px;
}

/* Green */
.success {
  border-color: #000;
  color: #fff;
}

.success:hover {
  background-color: #F5F5F5;
  color: #000 ;
}