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

header {
  position: fixed;
  width: 100%;
  z-index: 1;
}

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

footer {
  height: 59px;
  left: 0;
  position: absolute;
  top: 1400px;
  width: 100%;
  z-index: -1;
}

/* ==========================================================================
   Medium screen
   ========================================================================== */

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

  footer {
    display: none;
  }
}

/* ==========================================================================
   Small screen
   ========================================================================== */

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

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