ck-app {
  background-image: url(assets/bg.gif);
  background-color: #101119;
}

#myth,
#color1,
#color2,
#color3 {
  width: 800px;
  height: 600px;
  background-repeat: no-repeat;
  margin: auto;
}

#myth {
  background-image: url(assets/myth_blue.gif);
  position: relative;
  margin: 0 auto 3em auto;
}

#hotspots {
  position: absolute;
  top: 0;
  left: 0;
  width: 800px;
  height: 600px;
  background-image: url(assets/myth_hotspots.gif);
  z-index: 2000;
  pointer-events: none;
}

#color1,
#color2,
#color3 {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  transition: all 2s linear;
}

#color1 {
  background-image: url(assets/myth_red.gif);
}

#color2 {
  background-image: url(assets/myth_teal.gif);
}

#color3 {
  background-image: url(assets/myth_green.gif);
}

#message1,
#message2,
#message3 {
  position: absolute;
  width: 320px;
  left: -150px;
  visibility: hidden;
  background-repeat: no-repeat;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  opacity: 0;
  transition: all 500ms ease-in-out;
}

#message1 p,
#message2 p,
#message3 p {
  color: #ccc;
  padding: 8px 0 0 74px;
}

#message1 {
  top: 90px;
  z-index: 500;
  background-image: url(assets/myth_icon1.gif);
}

#message2 {
  top: 260px;
  z-index: 501;
  background-image: url(assets/myth_icon2.gif);
}

#message3 {
  top: 385px;
  z-index: 502;
  background-image: url(assets/myth_icon3.gif);
  background-position: 10px 0;
}

#activator1,
#activator2,
#activator3 {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  cursor: pointer;
  transform: translate(-50%,-50%);
  /*mix-blend-mode: multiply;*/
}

#activator1 {
  top: 225px;
  left: 240px;
  z-index: 3002;
}

#activator2 {
  top: 248px;
  left: 438px;
  z-index: 3001;
}

#activator3 {
  top: 422px;
  left: 652px;
  z-index: 3000;
}

#activator1::before,
#activator2::before,
#activator3::before {
  content: '\0020';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-sizing: border-box;
  transition: all 500ms ease-in-out;
  transform: translate(-50%,-50%);
  border: 1px solid rgba(255,255,255,0);
}

#myth.message1 #activator1::before,
#myth.message2 #activator2::before,
#myth.message3 #activator3::before {
  width: 16px;
  height: 16px;
}

#myth:not(.message1) #activator1:hover::before {
  border-color: rgba(255,0,0,.5);
}

#myth:not(.message2) #activator2:hover::before {
  border-color: rgba(0,255,255,.5);
}

#myth:not(.message3) #activator3:hover::before {
  border-color: rgba(255,255,0,.5);
}

#myth.message1 #activator1::before {
  background-color: rgba(255,0,0,.5);
}

#myth.message2 #activator2::before {
  background-color: rgba(0,255,255,.5);
}

#myth.message3 #activator3::before {
  background-color: rgba(255,255,0,.5);
}

#myth.message1 #message1,
#myth.message2 #message2,
#myth.message3 #message3 {
  visibility: visible;
  opacity: 1;
}

#myth.message1 #color1,
#myth.message2 #color2,
#myth.message3 #color3 {
  visibility: visible;
  opacity: 1;
}