.example {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-around;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

#rectangular {
  height: 413px;
  width: 49%;
  background-size: 100% auto;
  transform-style: preserve-3d;
  background-position: center;
  background-repeat: no-repeat;
}

#square {
  height: 413px;
  width: 24%;
  background-size: 100% auto;
  transform-style: preserve-3d;
  background-position: center;
  background-repeat: no-repeat;
}

#square_inside {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 47%;
  left: 50%;
  transform: translatez(30px) translatex(-50%) translatey(-50%);
  box-shadow: 0 0 50px 0 rgba(51, 51, 51, 0.0);
  background-position: center;
  background-size: 80% auto;
  background-repeat: no-repeat;
}

#rectangular_inside {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 47%;
  left: 50%;
  transform: translatez(30px) translatex(-50%) translatey(-50%);
  box-shadow: 0 0 50px 0 rgba(51, 51, 51, 0.0);
  background-position: center;
  background-size: 50% auto;
  background-repeat: no-repeat;
}

.box1_1 {
  background-image: url("../img/room_thumbs/aztec.jpg");
}

.box1_2 {
  background-image: url("../img/room_thumbs/maniac.jpg");
}

.box1_3 {
  background-image: url("../img/room_thumbs/mission.jpg");
}

.box1_4 {
  background-image: url("../img/room_thumbs/wd.jpg");
}

.box1_5 {
  background-image: url("../img/room_thumbs/got.jpg");
}

.box1_6 {
  background-image: url("../img/room_thumbs/jack.jpg");
}


.box1_1 .inner {
  background-image: url("../img/rooms_logos/monte_logo.png");
}

.box1_2 .inner {
  background-image: url("../img/rooms_logos/maniac_logo.png");
}

.box1_3 .inner {
  background-image: url("../img/rooms_logos/top-secret_logo.png");
}

.box1_4 .inner {
  background-image: url("../img/rooms_logos/walking_death_logo.png");
}

.box1_5 .inner {
  background-image: url("../img/rooms_logos/got_logo.png");
}

.box1_6 .inner {
  background-image: url("../img/rooms_logos/jack_logo.png");
}



@media (max-width: 800px) {
  #rectangular {
    height: 230px;
    width: 70%;
    background-size: 100% auto;
    transform-style: preserve-3d;
    background-position: center;
    background-repeat: no-repeat;
  }
  #square {
    height: 420px;
    width: 71%;
    background-size: 100% auto;
    transform-style: preserve-3d;
    background-position: center;
    background-repeat: no-repeat;
  }

  @media (max-width: 500px) {
    #rectangular {
      height: 230px;
      width: 98%;
      background-size: 100% auto;
      transform-style: preserve-3d;
      background-position: center;
      background-repeat: no-repeat;
    }
    #square {
      height: 430px;
      width: 98%;
      background-size: 100% auto;
      transform-style: preserve-3d;
      background-position: center;
      background-repeat: no-repeat;
    }
  }

  @media (max-width: 380px) {
    #rectangular {
      height: 150px;
      width: 98%;
      background-size: 100% auto;
      transform-style: preserve-3d;
      background-position: center;
      background-repeat: no-repeat;
    }
    #square {
      height: 380px;
      width: 98%;
      background-size: 100% auto;
      transform-style: preserve-3d;
      background-position: center;
      background-repeat: no-repeat;
    }
  }