/* Style sheet for banners */
/* Global */
#wrapper {
  position: relative;
  margin: 0 0;
  width: 728px;
  height: 90px;
  padding: 0 0;
  line-height: 11px;
  overflow: hidden; }

#exit_A {
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  width: 463px;
  height: inherit;
  z-index: 7; }

#exit_A,
#exit_B,
#exit_C,
#exit_D,
#exit_E {
  cursor: pointer; }

body {
  color: #4a4a4a;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  min-width: 320px; }

body p,
li {
  font-size: 9px;
  line-height: 1.5; }

p {
  margin-top: 0; }

p span {
  color: #d50054;
  text-decoration: none; }

p span:hover {
  color: #521034; }

a:hover {
  text-decoration: none;
  color: #fff; }

h1, h3 {
  font-family: Arial, sans-serif;
  color: #fff; }

ul {
  padding-left: 10px;
  margin-top: 0; }

li {
  list-style: none;
  margin-bottom: 0; }

li:before {
  /* For a round bullet */
  content: '\2022';
  /* For a square bullet */
  /*content:'\25A0';*/
  display: block;
  position: relative;
  max-width: 0;
  max-height: 0;
  left: -10px;
  top: 0;
  color: #4a4a4a;
  font-size: 8px; }

img {
  max-width: 100%;
  height: auto; }

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em; }

sub {
  top: 0.2em; }

.main-title {
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: #d50054;
  margin-top: 0;
  margin-bottom: 5px; }

.sub-title-purple {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.56;
  color: #9e1c64;
  margin-bottom: 0; }

.sub-title-grey {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.11;
  color: #4a4a4a;
  margin-bottom: 2px; }

/* Page 1 */
.page-1 {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  width: 463px;
  height: inherit;
  z-index: 1;
  background-size: contain;
  background-image: url(BG_gradient.jpg); }

.page-1 p {
  font-size: 12px;
  font-weight: bold;
  line-height: 13px;
  color: #9e1c64; }

@-webkit-keyframes textBlock {
  0% {
    opacity: 0; }
  1% {
    opacity: 1; }
  25% {
    opacity: 1; }
  95% {
    opacity: 1; }
  100% {
    opacity: 0;
    display: none; } }

@keyframes textBlock {
  0% {
    opacity: 0; }
  1% {
    opacity: 1; }
  25% {
    opacity: 1; }
  95% {
    opacity: 1; }
  100% {
    opacity: 0;
    display: none; } }

.page-1 .text-block {
  overflow: hidden;
  position: absolute;
  margin-left: 22px;
  margin-top: 25px;
  z-index: inherit;
  opacity: 0;
  -webkit-animation: 9s ease-in textBlock 0s forwards;
          animation: 9s ease-in textBlock 0s forwards; }

.page-1 h3 {
  color: #DF245F;
  position: absolute;
  margin: 0;
  margin-top: 5px;
  margin-left: 24px;
  font-size: 8px;
  margin-bottom: 8px; }

.page-1 .text-block h1 {
  color: #9E1C64;
  margin: 0;
  margin-top: 4px;
  font-size: 20px;
  margin-bottom: 7px;
  margin-left: 0px;
  text-transform: uppercase; }

.page-1 .text-block h2 {
  color: #9E1C64;
  margin: 0;
  font-size: 13px;
  margin-bottom: 3px;
  margin-left: 0px;
  margin-left: 0.5px;
  letter-spacing: 0.65px;
  text-transform: uppercase; }

.page-1 .text-block p {
  color: #9E1C64;
  margin: 0;
  margin-left: 1px;
  letter-spacing: 0.08px; }

@-webkit-keyframes textBlockTwo {
  0% {
    opacity: 0; }
  25% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@keyframes textBlockTwo {
  0% {
    opacity: 0; }
  25% {
    opacity: 1; }
  100% {
    opacity: 1; } }

.page-1 .text-block-two {
  overflow: hidden;
  position: absolute;
  margin-left: 22px;
  margin-top: 29px;
  z-index: inherit;
  opacity: 0;
  -webkit-animation: 3s ease-in textBlockTwo 9.4s forwards;
          animation: 3s ease-in textBlockTwo 9.4s forwards; }

.page-1 .text-block-two h1 {
  color: #9E1C64;
  font-weight: 300;
  margin: 0;
  font-size: 20px;
  margin-top: 3px;
  margin-bottom: 11px;
  text-transform: uppercase; }

.page-1 .text-block-two h2 {
  color: #9E1C64;
  margin: 0;
  font-size: 22px;
  margin-bottom: 5px;
  letter-spacing: 0.70px;
  text-transform: uppercase; }

.page-1 .disclaimer {
  position: absolute;
  bottom: 7px;
  left: 289px;
  z-index: 4;
  font-size: 7px;
  font-weight: normal;
  color: #000000;
  margin: 0; }

.page-1 .clock,
.page-1 .clock-bcg,
.page-1 .pill-one,
.page-1 .pill-two {
  position: absolute;
  left: 195px;
  top: 4px; }

@-webkit-keyframes clock {
  0% {
    opacity: 1; }
  40% {
    opacity: .7; }
  100% {
    opacity: 0;
    display: none; } }

@keyframes clock {
  0% {
    opacity: 1; }
  40% {
    opacity: .7; }
  100% {
    opacity: 0;
    display: none; } }

.page-1 .clock {
  top: 2.2px;
  opacity: 1;
  -webkit-animation: 9s ease-in clock 0s forwards;
          animation: 9s ease-in clock 0s forwards; }

.clock-bcg {
  opacity: 1;
  -webkit-animation: 9s ease-in clock 0s forwards;
          animation: 9s ease-in clock 0s forwards; }

@-webkit-keyframes pillOne {
  0% {
    opacity: 0; }
  10% {
    opacity: 1; }
  75% {
    opacity: 1; }
  100% {
    opacity: 0;
    display: none; } }

@keyframes pillOne {
  0% {
    opacity: 0; }
  10% {
    opacity: 1; }
  75% {
    opacity: 1; }
  100% {
    opacity: 0;
    display: none; } }

.page-1 .pill-one {
  opacity: 0;
  -webkit-animation: 3s ease-in pillOne 3.2s forwards;
          animation: 3s ease-in pillOne 3.2s forwards; }

@-webkit-keyframes once1 {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes once1 {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.once-1 {
  opacity: 0;
  -webkit-animation: .8s ease-in once1 .5s forwards;
          animation: .8s ease-in once1 .5s forwards; }

@-webkit-keyframes without {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes without {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.without {
  opacity: 0;
  -webkit-animation: .8s ease-in without 1.5s forwards;
          animation: .8s ease-in without 1.5s forwards; }

@-webkit-keyframes pillTwo {
  0% {
    opacity: 0; }
  10% {
    opacity: 1; }
  75% {
    opacity: 1; }
  95% {
    opacity: 0; }
  100% {
    opacity: 0;
    display: none; } }

@keyframes pillTwo {
  0% {
    opacity: 0; }
  10% {
    opacity: 1; }
  75% {
    opacity: 1; }
  95% {
    opacity: 0; }
  100% {
    opacity: 0;
    display: none; } }

.page-1 .pill-two {
  opacity: 0;
  -webkit-animation: 3s ease-in pillTwo 6.3s forwards;
          animation: 3s ease-in pillTwo 6.3s forwards; }

@-webkit-keyframes pillThree {
  0% {
    opacity: 0; }
  25% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@keyframes pillThree {
  0% {
    opacity: 0; }
  25% {
    opacity: 1; }
  100% {
    opacity: 1; } }

.page-1 .pill-three {
  position: absolute;
  top: 1px;
  left: 170px;
  opacity: 0;
  -webkit-animation: 3s ease-in pillThree 9.4s forwards;
          animation: 3s ease-in pillThree 9.4s forwards; }

.page-1 .ing-logo {
  position: absolute;
  top: 11px;
  right: 15px;
  z-index: 3;
  width: 136px;
  height: 35px; }

.page-1 .learn-btn-gradient {
  max-width: 89px;
  background: #d50054;
  background: -webkit-gradient(linear, left top, right top, from(#d50054), color-stop(20%, #db044f), to(#ff6b00));
  background: linear-gradient(to right, #d50054, #db044f 20%, #ff6b00);
  color: #ffffff;
  font-size: 9.35px;
  font-weight: bold;
  text-align: center;
  margin: 0;
  padding: 5px 10px;
  padding-bottom: 4px;
  position: absolute;
  opacity: 1;
  bottom: 10px;
  right: 22px;
  z-index: 4;
  text-decoration: none; }

/* Footer */
.grey-bar {
  font-size: 10px;
  font-weight: 600;
  display: block;
  width: auto;
  background-color: #d2dce1;
  color: #d50054;
  padding: 4px 10px;
  margin: 0; }

#footer {
  position: relative;
  overflow: hidden;
  width: 263px;
  margin: 0 0 0 463px;
  background-color: #9e1c64; }

#footer p {
  margin: 4px 0 3px;
  padding: 0 10px 0 75px;
  font-size: 8px; }

#footer span {
  color: #ffffff; }

#footer span:hover {
  text-decoration: underline; }

/* isi */
.outter-wrapper {
  margin: 0px 0 0 463px;
  width: 263px;
  overflow: hidden;
  position: relative;
  background-color: #e8edef; }

.isi-wrapper {
  position: relative;
  overflow: hidden;
  height: 49px; }

  #exit_B {
    font-weight: bold;
  }

@-webkit-keyframes autoScroll {
  100% {
    -webkit-transform: translateY(-94%);
            transform: translateY(-94%); } }

@keyframes autoScroll {
  100% {
    -webkit-transform: translateY(-94%);
            transform: translateY(-94%); } }

@-webkit-keyframes scrollKnob {
  100% {
    -webkit-transform: translateY(33px);
            transform: translateY(33px); } }

@keyframes scrollKnob {
  100% {
    -webkit-transform: translateY(33px);
            transform: translateY(33px); } }

.inner-isi {
  position: absolute;
  padding: 5px 5px 0 10px;
  color: #4a4a4a;
  -webkit-transform: translateY(0);
          transform: translateY(0); }

.isi-scroll {
  -webkit-animation: autoScroll 250s ease-out 6s 1 none;
          animation: autoScroll 250s ease-out 6s 1 none; }

/* Tiny Scrollbar */
.scrollbar {
  background-color: transparent;
  position: relative;
  float: right;
  width: 15px; }

.track {
  background-color: #9e1c64;
  width: 2px;
  height: 36px !important;
  /* overwrites the in-line height set by tiny scrollbar */
  position: relative;
  top: 4px; }

.thumb {
  background-color: #e8edef;
  border: 2px solid #9e1c64;
  width: 6px;
  height: 6px !important;
  border-radius: 6px;
  cursor: pointer;
  position: absolute;
  left: -4px;
  -webkit-transform: translateY(0px);
          transform: translateY(0px); }

.thumb-scroll {
  -webkit-animation: scrollKnob 250s ease-out 6s 1 none;
          animation: scrollKnob 250s ease-out 6s 1 none; }

.noSelect {
  -ms-user-select: none;
      user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none; }
