@-webkit-keyframes animated-frame-common {
  0% { left: 300px; }
  20% { left: 0; }
  80% { left: 0; }
  100% { left: -300px; }
}

@keyframes animated-frame-common {
  0% { left: 300px; }
  20% { left: 0; }
  80% { left: 0; }
  100% { left: -300px; }
}

@-webkit-keyframes slide-in-common {
  0% { left: 300px; }
  100% { left: 0px; }
}

@keyframes slide-in-common {
  0% { left: 300px; }
  100% { left: 0px; }
}

@-webkit-keyframes show-legal-common {
  from {
    opacity: 0;
    right: 4px;
  }
  to {
    opacity: 1;
    right: 4px;
  }
}

@keyframes show-legal-common {
  from {
    opacity: 0;
    right: 4px;
  }
  to {
    opacity: 1;
    right: 4px;
  }
}

body {
  display: none;
}

body.main-300x250,
body.main-728x90,
body.main-160x600 {
  display: block;
}

body,
body * {
  border: 0 none;
  font-family: 'Khula', sans-serif;
  font-weight: 400;
  margin: 0;
  outline: 0;
  padding: 0;
  box-sizing: border-box;
}

.main-container {
  left: 0;
  overflow: hidden;
  position: absolute;
  border: solid 1px #000000;
}

.main-container.hide {
  opacity: 0;
}

.exit-background {
  cursor: pointer;
  position: absolute;
}

/* BEGIN - HEADER BLOCK */
.logo {
  position: absolute;
}
.logo img{
  width: 100%;
  height: 100%;
}

.jellybean {
  position: absolute;
}

.jellybean img {
  width: 100%;
  height: 100%;
}
/* END - HEADER BLOCK */

/* BEGIN - FRAMES BLOCK */
.main-container.animation .frame {
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.main-container.animation .frame:last-child {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}

.main-container.animation .frame p:nth-child(2) {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.frame1 {
  -webkit-animation-delay: .5s;
          animation-delay: .5s;
}

.frame2 {
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}

.frame3 {
  -webkit-animation-delay: 9.5s;
          animation-delay: 9.5s;
}

.frame4 {
  -webkit-animation-delay: 14s;
          animation-delay: 14s;
}

.frame1 p:nth-child(2) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.frame2 p:nth-child(2) {
  -webkit-animation-delay: 5.5s;
          animation-delay: 5.5s;
}

.frame3 p:nth-child(2) {
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
}

.frame4 p:nth-child(2) {
  -webkit-animation-delay: 14.5s;
          animation-delay: 14.5s;
}

.frame {
  position: absolute;
}

.frame p {
  font-family: "Khula", sans-serif;
  font-weight: 300;
  position: absolute;
  text-align: center;
}

.frame p:last-child {
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
}

.frame p:first-child {
  font-size: 16px;
  line-height: 18px;
}

.frame p:first-child:last-child {
  font-weight: 700;
}

.frame sup {
  font-size: 8px;
}
/* END - FRAMES BLOCK */

/* BEGIN - CTA BLOCK */
.cta {
  cursor: pointer;
  font-size: 11px;
  height: 22px;
  line-height: 22px;
  position: absolute;
  text-align: center;
  width: 140px;
  padding-top: 2px;
}

.cta::after {
  border-bottom: 3px solid transparent;
  border-left: 4px solid;
  border-top: 3px solid transparent;
  content: '';
  display: inline-block;
  height: 0px;
  margin: 0 0 1px 4px;
  width: 0px;
}
/* END - CTA BLOCK */

/* BEGIN - TITLE BLOCK */
.title {
  position: absolute;
  text-align: center;
}

.nameplate {
  display: inline-block;
  font-family: "Khula",sans-serif;
  font-size: 18px;
}
/* END - TITLE BLOCK */

/* BEGIN - LEGAL BLOCK */
.legal-container {
  background-color: #CCC;
  bottom: 0;
  font-size: 10px;
  padding: 10px;
  position: absolute;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  width: 100%;
}

.main-container.animation .legal-container {
  -webkit-transition: -webkit-transform .4s;
  transition: -webkit-transform .4s;
  transition: transform .4s;
  transition: transform .4s, -webkit-transform .4s;
}

.legal-container.open {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.legal-container p:last-child {
  margin-top: 10px;
}

.legal-container p:first-child {
  margin-top: 0;
}

.legal-open,
.legal-close {
  color: #666;
  cursor: pointer;
  font-size: 9px;
  position: absolute;
  bottom:1px;
  right: 4px;
}
.legal-close {
  bottom:1px;
  right: 4px;
 }

.legal-open.hide,
.legal-close.hide,
.cta.hide {
  display: none;
}

.main-container.animation .legal-open.first-time {
  -webkit-animation-delay: 15s;
          animation-delay: 15s;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-name: show-legal-common;
          animation-name: show-legal-common;
  opacity: 0;
  right: 300px;
}
/* END - LEGAL BLOCK */

.main-160x600 .white-160x600,
.main-300x250 .white-300x250,
.main-728x90 .white-728x90 {
  color: #ffffff;
}

.main-728x90 .broken-728x90,
.main-300x250 .broken-300x250,
.main-160x600 .broken-160x600 {
  position: relative;
  display: block;
}