/* Layout Elements */

body.body-1 {
  position: static;
}

.container.container-1 {
  position: absolute;
  top: 135px;
  z-index: 1;
  overflow: hidden;
  margin-right: 0;
  margin-left: 5%;
  min-width: 50px;
  min-height: 0;
  max-width: none;
  width: 90%;
  height: 100vmin;
  background-image: url('../background.jpg');
  background-attachment: local;
  background-position: left top;
  background-clip: content-box;
  background-origin: content-box;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-transition-delay: 0s;
     -moz-transition-delay: 0s;
       -o-transition-delay: 0s;
          transition-delay: 0s;
  -webkit-transition-timing-function: ease;
     -moz-transition-timing-function: ease;
       -o-transition-timing-function: ease;
          transition-timing-function: ease;
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
  -webkit-transition-property: none;
     -moz-transition-property: none;
       -o-transition-property: none;
          transition-property: none;

  background-blend-mode: normal;
}

.container.container-2 {
  position: absolute;
  top: 20px;
  bottom: auto;
  z-index: 3;
  margin-top: 3%;
  margin-left: 5%;
  padding-left: 0;
  max-width: 450px;
  width: 70%;
  height: 40vmin;
  background-image: url('../gardenofnumbers.svg');
  background-attachment: scroll;
  background-position: left top;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: auto auto;
  background-repeat: no-repeat;

  background-blend-mode: normal;
}

@media screen and (min-width: 20.0625rem) {
  /* Layout Elements */

  .container.container-2 {
    position: absolute;
    top: 20px;
    left: 10px;
    -webkit-transition-delay: 0s, 0s;
       -moz-transition-delay: 0s, 0s;
         -o-transition-delay: 0s, 0s;
            transition-delay: 0s, 0s;
    -webkit-transition-timing-function: ease, linear;
       -moz-transition-timing-function: ease, linear;
         -o-transition-timing-function: ease, linear;
            transition-timing-function: ease, linear;
    -webkit-transition-duration: 3s, 1s;
       -moz-transition-duration: 3s, 1s;
         -o-transition-duration: 3s, 1s;
            transition-duration: 3s, 1s;
    -webkit-transition-property: all, all;
       -moz-transition-property: all, all;
         -o-transition-property: all, all;
            transition-property: all, all;
  }

  .container.container-1 {
    top: 200px;
    overflow: hidden;
    margin-top: 0;
    margin-left: 8%;
    min-height: 100px;
    max-height: 150%;
    height: 100vmin;
    background-attachment: scroll;
    background-position: 20% top;
    background-clip: border-box;
    vertical-align: top;
    -webkit-transition-delay: 0s;
       -moz-transition-delay: 0s;
         -o-transition-delay: 0s;
            transition-delay: 0s;
    -webkit-transition-timing-function: ease;
       -moz-transition-timing-function: ease;
         -o-transition-timing-function: ease;
            transition-timing-function: ease;
    -webkit-transition-duration: 0s;
       -moz-transition-duration: 0s;
         -o-transition-duration: 0s;
            transition-duration: 0s;
    -webkit-transition-property: none;
       -moz-transition-property: none;
         -o-transition-property: none;
            transition-property: none;
  }
}

@media screen and (min-width: 61.4375rem) {
  /* Layout Elements */

  .container.container-1 {
    margin-top: -3%;
    background-attachment: scroll;
    -webkit-transition-delay: 0s;
       -moz-transition-delay: 0s;
         -o-transition-delay: 0s;
            transition-delay: 0s;
    -webkit-transition-timing-function: ease;
       -moz-transition-timing-function: ease;
         -o-transition-timing-function: ease;
            transition-timing-function: ease;
    -webkit-transition-duration: 0s;
       -moz-transition-duration: 0s;
         -o-transition-duration: 0s;
            transition-duration: 0s;
    -webkit-transition-property: none;
       -moz-transition-property: none;
         -o-transition-property: none;
            transition-property: none;
  }
}

@media screen and (min-width: 80rem) {
  /* Layout Elements */

  .container.container-1 {
    margin-top: -5%;
    background-attachment: scroll;
    -webkit-transition-delay: 0s;
       -moz-transition-delay: 0s;
         -o-transition-delay: 0s;
            transition-delay: 0s;
    -webkit-transition-timing-function: ease;
       -moz-transition-timing-function: ease;
         -o-transition-timing-function: ease;
            transition-timing-function: ease;
    -webkit-transition-duration: 0s;
       -moz-transition-duration: 0s;
         -o-transition-duration: 0s;
            transition-duration: 0s;
    -webkit-transition-property: none;
       -moz-transition-property: none;
         -o-transition-property: none;
            transition-property: none;
  }
}