* {
  margin: 0px;
  padding: 0px;
}

body {
  font-family: Arial, sans-serif;
}

a {
  border: none;
  cursor: pointer;
  outline: none;
  user-select: none;
}

div, img {
  position: absolute;
}

#container {
  background-color: #fff;
  border: 1px solid #000;
  display: none;
  margin: auto;
  overflow: hidden;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 298px;     /* Less 2px to accommodate border */
  height: 248px;
}

#content {
  display: none;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;

}

#background_exit {
  background-color: #000000;
  cursor: pointer !important;
  opacity: 0;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
}

#content div {
  border: none;
  display: block;
  position: absolute;
}

.full_size_image {
  width: 300px;
  height: 250px;
}

.hidden img { display: none; }

#bg {
  overflow: hidden;
  width: 300px;
  height: 250px;
}

#colorFrame {
  width: 278px;
  height: 189px;
  left: 11px;
  top: 10px;
  background-color: #D01947;
}

#logo {
  width: 124px;
  height: 14px;
  left: 165px;
  top: 216px;
}

#cta {
  width: 140px;
  height: 26px;
  left: 11px;
  top: 210px;
}

.frame .hero {
  width: 136px;
  height: 136px;
  left: 82px;
  top: 49px;
  background: url(images/heroes.jpg) no-repeat;
}

.thing1 {
  width: 102px;
  height: 102px;
  left: 167px;
  top: 27px;
  background: url(images/thing1.png) no-repeat;
}

.thing2 {
  width: 64px;
  height: 78px;
  left: 57px;
  top: 129px;
  background: url(images/thing2.png) no-repeat;
}

.thing3 {
  width: 56px;
  height: 59px;
  left: 199px;
  top: 46px;
  background: url(images/thing3.png) no-repeat;
}

.thing4 {
  width: 97px;
  height: 101px;
  left: 29px;
  top: 123px;
  background: url(images/thing4.png) no-repeat;
}

.thing5 {
  width: 68px;
  height: 63px;
  left: 193px;
  top: 38px;
  background: url(images/thing5.png) no-repeat;
}

.thing6 {
  width: 77px;
  height: 73px;
  left: 38px;
  top: 126px;
  background: url(images/thing6.png) no-repeat;
}

#frame2 .hero {
  background-position-x: calc(1 * -136px);
}

#frame3 .hero {
  background-position-x: calc(2 * -136px);
}

#frame4 .hero {
  background-position-x: calc(3 * -136px);
}