@font-face {
  font-family: 'Channel';
  src: url('../images/channel-webfont.eot');
  src: url('../images/channel-webfont.eot?#iefix') format('embedded-opentype'),
    url('../images/channel-webfont.woff2') format('woff2'),
    url('../images/channel-webfont.woff') format('woff'),
    url('../images/channel-webfont.ttf') format('truetype'),
    url('../images/channel-webfont.svg#channelregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Monaco';
  src: url('../images/monaco-webfont.eot');
  src: url('../images/monaco-webfont.eot?#iefix') format('embedded-opentype'),
     url('../images/monaco-webfont.woff2') format('woff2'),
     url('../images/monaco-webfont.woff') format('woff'),
     url('../images/monaco-webfont.ttf') format('truetype'),
     url('../images/monaco-webfont.svg#monacoregular') format('svg');
  font-weight: 400;
  font-style: normal;
}

/*
@font-face {
  font-family: 'icomoon';
  src:url('../images/icomoon.eot?k2npan');
  src:url('../images/icomoon.eot?k2npan#iefix') format('embedded-opentype'),
    url('../images/icomoon.ttf?k2npan') format('truetype'),
    url('../images/icomoon.woff?k2npan') format('woff'),
    url('../images/icomoon.svg?k2npan#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  font-size: 250%;
  color: #fff;
}

.icon-arrow-up:before {
  content: "\e900";
}
.icon-arrow-down:before {
  content: "\e901";
}
*/
html, body { position: relative; height: 100%; min-height:100%; }

body { background: white url(../images/blink_swipe.gif) center no-repeat; background-size:cover; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; color:#000; margin: 0; padding: 0; min-height:100%; }

.swiper-container.swiper-star { width: 46%; padding:0 1% 0 0; height: 100%; margin:0 auto 0 0; float:left; }
.swiper-container.swiper-wars { float:right; width: 49%;text-align:left; padding:0 0 0 3%; height: 100%; margin:0 0 0 -4%; }
.swiper-slide {
  text-align: right;
  cursor:pointer;
  font-size: 46px;
  white-space:no-wrap;
  background: transparent;
  color:#ee003e;
  text-shadow:0 0 9px rgba(0,0,0,0.2);
  font-family:'Channel';

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-wars .swiper-slide { justify-content: flex-start; -webkit-justify-content: flex-start; left:-1%; }
.swiper-star .swiper-slide { justify-content: flex-end; -webkit-justify-content: flex-end; }

.data-container { display: none; width: 100%; max-width: 600px; left: 50%; position: absolute; -ms-transform: translate(-50%,0); -webkit-transform: translate(-50%,0); transform: translate(-50%,0); top: 5%; z-index: 334; }

.overlay { background: rgba(255,255,255,0.88); display: none; height: 100%; position: fixed; top: 0; width: 100%; z-index: 30;  cursor:pointer;}

.logo { position: absolute; top: 20px; left: 20px; z-index: 333; }

.continue { font-family: 'Monaco', Helvetica, Arial, sans-serif; position: absolute; top: 20px; right: 20px; z-index: 333; text-decoration: none; color: #fff; margin:0px 0; }
.continue.dataUp { color: #000; }
.continue span { padding-left: 4px; }

.continue:hover { color: #ee003e; }

.swiper-slide-active.gocrazy { pointer-events: none !important; cursor: default; -webkit-animation: blinker 0.3s infinite; animation: blinker 0.3s infinite; }

.hint {
  position: absolute;
  top: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  display: none;
}
.hint.left {
  left: 40%;
}
.hint.right {
  right: 40%;
}
.icon-arrow-up { display: none; }


.icon-arrow-down {
  bottom: -170px;
  position: absolute;
  height: 112px;
  width: 55px;
  background-size: 100% !important;
  -webkit-animation: jumpBottom 1.3s infinite;
  animation: jumpBottom 1.3s infinite;
}

.left .icon-arrow-down {
  background: url(../images/swipe_up.png) center no-repeat;
}
.right .icon-arrow-down {
  background: url(../images/swipe_down.png) center no-repeat;
}

@keyframes jumpBottom {
    0% { opacity: .2; }
   50% { opacity: 1; }
  100% { opacity: .2; }
}
@-moz-keyframes jumpBottom {
    0% { opacity: .2; }
   50% { opacity: 1; }
  100% { opacity: .2; }
}

@keyframes blinker {
    0% { color:#ee003e; }
   49% { color:#ee003e; }
   50% { color:#ffffff; }
   99% { color:#ffffff; }
  100% { color:#ee003e; }
}
@-moz-keyframes blinker {
    0% { color:#ee003e; }
   49% { color:#ee003e; }
   50% { color:#ffffff; }
   99% { color:#ffffff; }
  100% { color:#ee003e; }
}


@media screen and (max-width: 520px) {
  .swiper-slide { font-size: 19px; }
  .data-container { width: 300px; top: 10%; }
  .hint.left { left: 20%; }
  .hint.right { right: 45%; }
  .icon-arrow-down { height: 91px; width: 45px; bottom: -150px; }
}


/*
.icon-arrow-up {
  top: -110px;
  -webkit-animation: jumpTop 0.85s infinite;
  animation: jumpTop 0.85s infinite;
}
.icon-arrow-down {
  bottom: -80px;
  -webkit-animation: jumpBottom 0.85s infinite;
  animation: jumpBottom 0.85s infinite;
}

@keyframes jumpTop {
    0% { top: -110px; }
   50% { top: -150px; }
  100% { top: -110px; }
}
@-moz-keyframes jumpTop {
    0% { top: -110px; }
   50% { top: -150px; }
  100% { top: -110px; }
}

@keyframes jumpBottom {
    0% { bottom: -80px; }
   50% { bottom: -120px; }
  100% { bottom: -80px; }
}
@-moz-keyframes jumpBottom {
    0% { bottom: -80px; }
   50% { bottom: -120px; }
  100% { bottom: -80px; }
}
*/