/***********************************************************************************************************************
  CSS Stylesheet
  Author : Anthony Macali
  Date   : 30th January 2016
 **********************************************************************************************************************/
  body { font-family:Arial, sans-serif; background-color:#ededed; }

  /* reset */
  * { margin:0; box-sizing:border-box; }
  a { text-decoration:none; color:#000; line-height:1em; }
  img { border:0; }
  h1, h2, h3 { margin:0; padding:0; line-height:1em; }
  p, ul, li { margin:0; padding:0; list-style:none; line-height:1em; }
  img { border:0; }
  form, input { margin:0; padding:0; background:none; border:0; outline:none; }
  table { border-collapse:collapse; border:0; }  

  /* fonts */
  @font-face {  }  

  /* global */
  .clear { clear:both; height:1px; line-height:1px; }
  .container { width:100%; margin:auto; }
  
  /* style */
  #header { font-family:'Passion One'; }

  h1, h2, h3 { font-family:'Montserrat'; }
  p, #footer li { font-family:'Lato'; }

/***********************************************************************************************************************
  Header
 **********************************************************************************************************************/
  #header {  }
  #header .container { width:100%; padding:0 12px; background-color:#fed52f; }
  #header a.logo { display:block; float:left; font-size:2.5em; line-height:1em; margin:12px 0; }

  /* menu */
  ul.menu { float:right; margin:12px 0; }
  ul.menu li { float:right; font-size:2.5em; }

  ul.menu li.phone { padding-left:52px; background:url(/images/icons/phone.png) left center no-repeat; background-size:38px; }

/***********************************************************************************************************************
  Banner
 **********************************************************************************************************************/
  .img-banner { width:100%; height:260px; background-size:cover; background-position:center; box-shadow:inset 0 2px 6px #333;}
  #page-index .img-banner { background-image:url(/images/workshop.jpg); background-repeat:no-repeat; background-position:center 20%; } 

/***********************************************************************************************************************
  Content
 **********************************************************************************************************************/
  #content .container { padding:8px 12px; }

  h1 { font-size:1.5em; padding:12px 0; color:#000; }
  h3 { font-size:1em; margin-bottom:4px; }
  #content p { font-size:1.1em; line-height:1.2em; color:#484848; margin-bottom:12px; }

  /* box */
  div.box { border:1px solid #dddddd; background-color:#fff; padding:20px; padding-left:84px;  border-radius:3px; }
  div.box { background-size:50px; background-repeat:no-repeat; background-position:20px center; margin-bottom:16px; }
  div.box p { margin-bottom:0; }

  .wrench { background-image:url(/images/icons/wrench.png); }
  .motor { background-image:url(/images/icons/motor.png); }
  .mechanic { background-image:url(/images/icons/mechanic.png); }
  .car { background-image:url(/images/icons/car.png); }


/***********************************************************************************************************************
  Footer
 **********************************************************************************************************************/
  #footer { background-color:#000; overflow:hidden; }


  #footer { color:#fff; font-size:0.9em; padding:0 12px; }  
  #footer ul { float:left; padding-top:14px; }
  #footer ul li { float:left; margin-right:12px; }
  #footer ul li a { color:#fff; }
  #footer ul li a:hover { }
  
  #footer p.copyright { display:block; float:right; color:#fff; padding-top:14px; text-align:right; }


/***********************************************************************************************************************
  Wrapper
 **********************************************************************************************************************/
  html, body { height: 100%; }
  #footer .container { height:40px; }  
  #wrapper { min-height:100%; height:auto !important; height:100%; margin:0 auto -40px; }
  .footer, .push { height:40px; }

/***********************************************************************************************************************
  Mobile
 **********************************************************************************************************************/
  @media screen and (min-width:1024px) { 
    .container { width:924px; } 
  }

  @media screen and (max-width:768px) {
    .img-banner { height:160px; }

    /* header */
    #header .container { padding:0 4px 0 8px; }
    #header a.logo, #header ul.menu li { font-size:2em; }

     ul.menu li.phone { background-size:32px; padding-left:42px; }
  }