@font-face {
  font-family: BGFlameWeb-Regular;
  src: url("https://cdn.flashtalking.com/115301/assets/BGFlameWeb-Regular.woff");
}
@font-face {
  font-family: BGFlameWeb-Light;
  src: url("https://cdn.flashtalking.com/115301/assets/BGFlameWeb-Light.woff");
}

* {
  margin: 0;
  padding: 0;
  font-family: BGFlameWeb-Light;
  font-weight: 400;
}

b {
  font-family: "BGFlameWeb-Regular";
  font-weight: 700;
}

.hidden {
  display: none;
  visibility: hidden;
}

#container {
  position: relative;
  width: 298px;
  height: 598px;
  overflow: hidden;
  border: 1px solid #3e3e3e;
  background-color: #000000;
}

.frame,
.global {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

#frame1 {
  opacity: 1;
}

.swipe {
  position: absolute;
  top: 0%;
  left: 100%;
  opacity: 1;
}

.img {
  transform:scale(0.9) translate(-50%, -50%);
  position: absolute;
  left: 44%;
}

#img1 {
  top: 33%;
}

#img2 {
  top: 44%;
}

.title {
  left: 0;
  position: absolute;
  top: 7.5%;
}

.outer {
  position: absolute;
  height: 80%;
  width: calc(100% - 20px);
  top: 10px;
  left: 10px;
  text-align: left;
}

.middle {
  position: relative;
}
.inner {
  background: #fff;
  border: 1px solid #ededed;
  border-radius: 0px 10px 10px 10px;
  -moz-border-radius: 0px 10px 10px 10px;
  -webkit-border-radius: 0px 10px 10px 10px;
  opacity: 0;
  overflow: hidden;

  -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.1);
}

.copy {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
}

.small {
  font-size: 16px;
}

.centerChild {
  display: table;
  height: 100%;
  width: 100%;
}

.centerChildChild {
  display: table-cell;
  vertical-align: middle;
}

.str {
  font-size: 26px;
    line-height: 29px;
    color: #000;
    opacity: 0;
    padding: 10px 12px;
}

#logo{
  position: absolute;
  right: 0px;
  bottom: 6px;
  z-index: 20;
}

#cta {
  width: 60%;
  margin: 2% 5% 5% 5%;
  opacity: 0;
}
#cta.bounce #cta_btn:after {
  opacity: 1;
  -webkit-animation: bounce 0.3s 6 alternate ease-in-out;
  -moz-animation: bounce 0.3s 6 alternate ease-in-out;
  animation: bounce 0.3s 6 alternate ease-in-out;
  animation-delay: 2s;

  -webkit-transition: opacity 0.2s ease-in;
  -moz-transition: opacity 0.2s ease-in;
  -o-transition: opacity 0.2s ease-in;
  -ms-transition: opacity 0.2s ease-in;
  transition: opacity 0.2s ease-in;
}
#cta:hover {
  cursor: pointer;
}

#cta:hover #cta_btn:after {
  -webkit-animation: bounce 0.3s 6 alternate ease-in-out;
  -moz-animation: bounce 0.3s 6 alternate ease-in-out;
  animation: bounce 0.3s 6 alternate ease-in-out;
}
#cta_btn {
  padding: 6px 25px 7px 12px;
  /* font-size: 14px; */
  border-radius: 0px 5px 5px 5px;
  -moz-border-radius: 0px 5px 5px 5px;
  -webkit-border-radius: 0px 5px 5px 5px;
  color: #fff;
  background: rgb(33, 133, 227);
  background: -moz-linear-gradient(
    top,
    rgba(33, 133, 227, 1) 0%,
    rgba(23, 102, 191, 1) 100%
  );
  background: -webkit-linear-gradient(
    top,
    rgba(33, 133, 227, 1) 0%,
    rgba(23, 102, 191, 1) 100%
  );
  background: linear-gradient(
    to bottom,
    rgba(33, 133, 227, 1) 0%,
    rgba(23, 102, 191, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2185e3', endColorstr='#1766bf',GradientType=0 );

  min-height: 15px;
  position: relative;
  border: none;
  cursor: pointer;
  outline: none;
}
#cta_btn:after {
  opacity: 0;

  content: "";
  position: absolute;
  right: 10px;
  bottom: 11px;
  width: 15px;
  height: 12px;
  background-image: url("../img/arrow.svg");
  background-repeat: no-repeat;
  background-position: bottom;
}

#cta_text {
  font-size: 18px;
  opacity: 0;
}
#terms {
  font-size: 10px;
  opacity: 0;
  padding: 8px 12px 5px 16px;
}

#offer-txt {
  font-size: 17px;
}
#terms-txt {
  font-size: 13px;
}

/*------------------------- COUNTDOWN --------------------------------*/
#countdown-content {
  background-color: #000;
  bottom: -33px;
  color: #fff;
  font-size: 16px;
  left: 0;
  padding: 5px;
  position: absolute;
  width: 100%;
  z-index: 20;
}
#countdown-content td {
  width: 100%;
}
#countdown-label {
  text-align: center;
}
#countdown-days {
  color: #72dcff;
}

@-webkit-keyframes bounce {
  to {
    -webkit-transform: translate(10%);
  }
}
@-moz-keyframes bounce {
  to {
    -moz-transform: translate(10%);
  }
}
@keyframes bounce {
  to {
    transform: translate(10%);
  }
}