body,
body > .view {
  height: 100%;
  width: 100%;
  position: absolute;
}

body {
  background: url("../images/background-100.jpg");
}

@media (min-height: 200px) {
  body {
    background: url("../images/background-300.jpg");
  }
}

@media (min-height: 333px) {
  body {
    background: url("../images/background-500.jpg");
  }
}

@media (min-height: 500px) {
  body {
    background: url("../images/background-750.jpg");
  }
}

@media (min-height: 667px) {
  body {
    background: url("../images/background-1000.jpg");
  }
}

@media (min-height: 1000px) {
  body {
    background: url("../images/background-1500.jpg");
  }
}

@media (min-height: 1667px) {
  body {
    background: url("../images/background-2500.jpg");
  }
}

body {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center bottom;
  background-size: cover;
}


#mobile-box {
  width: 300px;
}

.my-container {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top:0;
  
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-evenly;
}

.logo {
  display: inline;
  width: 280px;
}

/*
 *  Only for spacing
 */ 
.logo.hidden {
  visibility: hidden;
}

.color-overlay {
  background-color: rgba(56,56,56,.54);
}