html {
	background: #fafafa url(img/bg.jpg) no-repeat center center fixed;
  background-size: cover;
  min-height: 100%;
}

  body {
    background: #fff;
    color: #444;
    font-family: "Open Sans", -apple-system, Arial, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    margin: 70px auto 25px;
    padding: 20px 20px 10px 20px;
    max-width: 700px;
    -webkit-font-smoothing: subpixel-antialiased;
    box-shadow: 0 1px 3px rgba(0,0,0,0.13);
  }
  
    h1, h2, h3 {
      font-family: "Roboto", -apple-system, Arial, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
      margin-top: 0;
    }
    
    h2, h3 {
      border-bottom: 3px solid #b6cd4b;
      display: inline-block;
      text-transform: uppercase;
      margin-bottom: 10px;
    }
    
    p,
    li {
      line-height: 1.4em;
    }
    
    p:last-child {
      margin-bottom: 0;
    }
    
    a {
      color: #409FD7; 
      text-decoration: underline;
    }
    
    .button {
      background-color: #409FD7;
      color: #fff;
      display: inline-block;
      font-weight: 400;
      text-align: center;
      white-space: nowrap;
      vertical-align: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      border: 1px solid transparent;
      padding: 10px 20px;
      font-size: 1.5rem;
      line-height: 1.5;
      border-radius: .25rem;
      transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
      text-decoration: none;
    }
    
    .button:hover, .button:focus {
      background-color: #6bb5e0;
      text-decoration: none;
    }

    .button:focus {
      outline: 0;
      box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
  
    #logo {
      margin-bottom: 20px;
    }
  
      #logo img {
        max-width: 100%;
      }
      
    #columns {
      margin-bottom: 20px;
    }
      
      #columns > div {
        display: inline-block;
        padding: 3%;
        width: 43%;
        vertical-align: top;
      }
      
        #contact {
          background-color: #eee;
          padding: 3%;
        }
      
    #about {
      padding: 0 3% 40px;
    }
      
      #about img {
        float: right;
        margin: 40px 0 20px 20px;
        width: 300px;
      } 

    #footer {
       text-align: center;
       font-size: 0.8em;
       padding-bottom: 20px;
    }
  
  @media all and (max-width: 768px) {

    body {
      margin: 50px;
    }
        
      #shop {
        margin-bottom: 20px;
      }
        
        #columns > div {
          display: block;
          width: auto;
        }
        
      #about img {
        width: 200px;
      }  
    
  }
  
  @media all and (max-width: 480px) {

    body {
      margin: 20px;
      font-size: 18px
    }
        
      #about img {
        float: none;
        margin: 10px auto 0;
        width: 100%;
      }  
      
    #columns > div,      
    #about {
      padding: 20px;
    }
    
  }