/*  
::::::::::::::::::::::::;::::::::::::::::::::::::;
-------------------- SINGLE WORK HellYeah!  --------------------
::::::::::::::::::::::::;::::::::::::::::::::::::;

*/


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {

    text-align: center;

    background-color: #fafafa;
}

#work{
    width: 100%;
    text-align: center;
    background: #171717;
    color: #dcdcdc;
}
#work_wrap{
   max-width: 70%;
  margin: 0 auto;
 text-align: left;
}
#work_wrap p{
  font-style: 1.2em;
}

#headImg{
  margin: 0 auto;
   width: 100%;
  height: auto;
}
#headImg img{
  width: 100%;
  height: auto;
}

.contentBox{
  padding-top: 25px;
  padding-bottom: 0px; 
}
 
/*
.contentBox img{
  margin-bottom: 40px; 
}*/

#challenge, #reaction{
 

margin: 0 auto;
 
}



#wservices{
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
   -ms-flex-direction: column;
  -webkit-flex-flow: row wrap; 
  flex-flow: row wrap; 
  
  align-content: stretch;
   -webkit-align-content: center; 
  align-content: center; 
  text-align: center;

}
#skill{
  margin: 0 30px;
  text-align: center;
}



@media screen and (max-device-width: 480px){

    body { 
      max-width: 100% !important;
      overflow-x: hidden !important;
   }
 
  #headImg img {
    margin-top: 120px;

    /*width: 250%;
    position: absolute;
    left: -70%;
    clip: rect(auto, 170vw, 80vh, auto);
    top: 0;*/
  }


 /*
  .contentBox img{
   width: 80%;
   height: auto;  
   margin-bottom: 0px;
  }*/
  .contentBox {
    padding-top: 50px;
  }
  #skill img{
    width: 86px;
    height: auto;
    margin-bottom: 5px;
    margin-top: 40px;
  }
  #wservices div{
   width: 100%;
  }
}