html {
  height: 100%;
}

body {
  font: 20px "Gill Sans", Futura, sans-serif;
  margin: 0;
  height: 90%;
}

.big-orange-box {
  background: linear-gradient(0deg, #F5514A, #FF8943);
  overflow: auto;
  width: 100%;
  height: 100%;
  text-align: center;
}

.footer {
  margin-bottom: 100px;
  overflow: auto;
  width: 100%;
}

.footer a {
  color: rgba(0, 0, 0, 0.6);
  text-decoration: none;
}

.footer div {
  width: 100%;
  float: left;
  padding: 15px;
  text-align: center;
  box-sizing: border-box;
}

.screenshot {
  display: none;
}

.badge {
  display: block;
  margin: 20px;
}

.badge img {
  width: 200px;
}

@media only screen and (min-width: 768px) {
  .footer div {
    width: 20%;
  }

  .screenshot {
    display: inline-block; 
    width: 240px; 
    height: 427px;
  }

  .badge {
    display: inline-block;
  }

  .badge img {
    width: 300px;
  }

  #screenshot-1 {
    background-image: url(https://f001-b2.mybigscreen.com/file/mybigscreen/screenshot1-240x.jpg);
  }
  #screenshot-2 {
    background-image: url(https://f001-b2.mybigscreen.com/file/mybigscreen/screenshot2-240x.jpg);
  }
  #screenshot-3 {
    background-image: url(https://f001-b2.mybigscreen.com/file/mybigscreen/screenshot3-240x.jpg);
  }
  #screenshot-4 {
    background-image: url(https://f001-b2.mybigscreen.com/file/mybigscreen/screenshot4-240x.jpg);
  }

}