@charset "utf-8";
/* CSS document */
* {
    box-sizing: border-box;
}
body {
    color: #000000;
    font-family: 'Times New Roman', Times, serif;
    background-color: #FFFFFF;
}
header {
    background-color: #3b1e02;
    color: #FFFFFF;
    text-align: left;
    height: 150px;
    padding-top: 20px;
    padding-left: 30px;
    background-image: url("leather.jpg");
}
header h1 {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 300%;
}
nav {
    font-size: 110%;
    float: left;
    width: 15%;
    height: 1129px;
    background-color: #80735b;
    padding-left: 2%;
    padding-top: 2%;
}
nav a{
    text-decoration: none;
}
nav a:link {
    color: #FFFFFF;
}
nav a:visited {
    color: #dac597;
}
nav a:hover {
    background-color: #4e4e4e;
}
nav ul {
    list-style-type: none;
    margin: 0;
    padding-left: 0;
    font-size: 150%;
}
main {
    background-color: #FFFFFF;
    margin-left: 200px;
    padding-top: 5px;
    padding-right: 30px;
    padding-bottom: 20px;
    padding-left: 30px;
    display: block;
    font-size: 115%;
    text-align: center;
}
h2 {
    color: #492503;
    font-weight: bold;
    font-size: 150%;
}
h3 {
    color: #492503;
    font-weight: bold;
    font-size: 115%;
}
.col-container {
    display: table;
    height: 515px;
    width: 90%;
    background-color: #afafaf;
    text-align: left;
  }
  
  .col {
    display: table-cell;
  }
  footer {
    font-size: 100%;
    font-style: italic;
    font-family: Georgia, "Times New Roman", serif;
    text-align: center;
    margin-left: 190px;
    padding: 15px;
    background-color: #FFFFFF;
}
#heroStart {
    background-image: url("collection.jpg");
    height: 515px;
    background-repeat: no-repeat;
    background-size: 35% 100%;
    margin-left: 47.5%;
}
#heroBasics {
    background-image: url("spray.jpg");
    height: 350px;
    background-repeat: no-repeat;
    background-size: 45% 100%;
    margin-left: 43.5%;
}
#heroSummer {
    background-image: url("summer.jpg");
    height: 450px;
    background-repeat: no-repeat;
    background-size: 45% 100%;
    margin-left: 43.5%;

}
#heroWinter {
    background-image: url("winter.jpg");
    height: 450px;
    background-repeat: no-repeat;
    background-size: 45% 100%;
    margin-left: 43.5%;

}
#heroSignature {
    background-image: url("sig.jpg");
    height: 450px;
    background-repeat: no-repeat;
    background-size: 38% 100%;
    margin-left: 46%;
}
@media only screen and (max-width: 37.5em) {
    body {
        margin: 0;
        background-color: #FFFFFF;
        }
    header {
        height: 125px;
        text-align: center;
        }
    main {
      padding: 0.1em 1em;
      font-size: 90%;
      margin-left: 0;
      }
      header h1 {
      font-size: 200%;
      }
    nav {
      float: none;
      width: auto;
      text-align: center;
      height: auto;
      padding: 0;
      }
      nav li {
      display: block;
      margin: 0;
      padding: 0.25em 0.75em;
      border: solid 2px #331d00;
      }
      nav a {
      display: block;
      }
      #heroStart, #heroBasics, #heroSummer, #heroWinter, #heroSignature {
      margin-left: 0;
      background-image: none;
      height: 0;
      }
      .col-container {
        display: block;
        background-color: #ffffff;
      }
      .col {
        display: block;
      }
      footer {
        margin-top: 825px;
        margin-left: 0;
        font-size: 80%;
      }
  }