/* ==========================================================================
   Template
   ========================================================================== */

body {
  background-color: #f0f0f0;
  height: 1283px;
  position: relative;
}

header {
  background-color: #fff;
  border-bottom: 1px solid #e2e2e2;
  height: 88px;
  text-align: center;
}

footer {
  background-color: #000;
  height: 76px;
  left: 0;
  position: absolute;
  top: 1208px;
  width: 100%;
  z-index: -1;
}

div#template-img {
  background: url('../img/template.png') no-repeat;
  background-size: contain;
  height: 1283px;
  margin: 0 auto;
  position: relative;
  top: -88px;
  width: 1000px;
}

/* ==========================================================================
   Tablet landscape (min: 769px / max: 999px)
   ========================================================================== */

@media only screen and (width <= 999px) {
  div#template-img {
    background: url('../img/template-999px.png') no-repeat;
    background-size: contain;
    height: 1931px;
    width: 999px;
  }
}

/* ==========================================================================
   Tablet portrait and smartphone landscape (min: 481px / max: 768px)
   ========================================================================== */

@media only screen and (width <= 768px) {
  div#template-img {
    background: url('../img/template-768px.png') no-repeat;
    background-size: contain;
    height: 1552px;
    width: 768px;
  }
}

/* ==========================================================================
   Smartphone portrait (max: 480px)
   ========================================================================== */

@media only screen and (width <= 480px) {
  div#template-img {
    background: url('../img/template-480px.png') no-repeat;
    background-size: contain;
    height: 3190px;
    width: 480px;
  }
}