body {
  margin: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

button {
  border: none;
  background: none;
  outline: none;
  cursor: pointer;
}

.window {
  position: relative;
  width: 660px;
  height: 395px;
  border-radius: 6px;
  font-family: -apple-system, Helvetica, sans-serif;
}
.slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px 10px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms;
  z-index: 1;
}
.slide.-active {
  opacity: 1;
  visibility: visible;
}

.next {
    position: absolute;
    bottom: 20px;
    right: 30px;
    font-size: 14px;
    color: #288DF8;
    vertical-align: middle;
    z-index: 99;
}
.next-img {
    position: relative;
    top: 3px;
    left: 3px;
}
.next:hover, .next:focus {
    color: #6CB1FA;
}
body.-animate .next {
    -webkit-animation: fade-in 1s 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) both;
    animation: fade-in 1s 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

.replay-container {
    position: absolute;
    bottom: 20px;
    width: 100%;
    left: 0;
}

.replay {
    font-size: 14px;
    color: #288DF8;
    vertical-align: middle;
    z-index: 99;
}
.replay-img {
    position: relative;
    top: 3px;
    left: 4px;
}
.replay:hover, .replay:focus {
    color: #6CB1FA;
}

.title {
  font-size: 27px;
  font-weight: bold;
}
.content {
    max-width: 640px;
    margin: 0 auto;
}

/* first slide */
.first-format {
  position: absolute;
}
body.-animate .first-format {
    -webkit-animation: fade-in 1.5s cubic-bezier(0.25, 0.1, 0.25, 1) both;
    animation: fade-in 1.5s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}
.first-img {
  margin-bottom: 5px;
}
.description {
    line-height: 1.4;
}
body.-animate .first .content {
    -webkit-animation: fade-in 1s 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) both;
    animation: fade-in 1s 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}
body.-animate .first .logo {
    -webkit-animation: logo-appearance 1s 1s cubic-bezier(0.25, 0.1, 0.25, 1) both;
    animation: logo-appearance 1s 1s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

/* second slide */
.second .title {
  position: absolute;
  bottom: 100px;
  left: 0;
  right: 0;
  text-align: center;
}

/* third slide */
.third-img {
  margin-top: 10px;
  margin-bottom: 35px;
}
.fields {
  padding-top: 20px;
}
.fields-input {
  min-width: 160px;
  height: 14px;
  padding: 5px 8px;
  border-radius: 4px;
  border: 1px solid #C7C7C7;
  font-size: 13px;
  font-weight: 500;
  outline: none;
}
.fields #subscribe {
  height: 26px;
  padding: 0 10px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid #52A0EE;
  color: #fff;
  background: #52A0EE;
  outline: none;
}
.fields #subscribe:hover, .fields #subscribe:focus {
    background: #78B5F1;
}
.error-email {
  border: 1px solid #e97176 !important;
  color: #e97176 !important;
  -webkit-box-shadow: inset 0 0 0 1px #e97176 !important;
      box-shadow: inset 0 0 0 1px #e97176 !important;
}
.thanks {
  padding-top: 20px;
  display: none;
}
.thanks.-active {
  display: block;
}
.footer {
  position: absolute; 
  bottom: 40px;
  left: 0;
  width: 100%;
}

/* arabic */ 
.arabic .next {
    left: 20px;
    right: initial;
}

.arabic .next-img {
    right: 3px;
    left: initial;
}

.arabic .replay-img {
    right: 3px;
    left: initial;
}

.arabic .fields-input {
    -webkit-direction: RTL;
    direction:RTL
}

/* animations */
@-webkit-keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@-webkit-keyframes logo-appearance {
    0% { 
      -webkit-transform: translate(0px, 60px) scale(0.6);
      opacity: 0;
    }
    100% { 
      opacity: 1;
      -webkit-transform: translate(0px, 0px) scale(1);
    }
}

@keyframes logo-appearance {
    0% { 
      transform: translate(0px, 60px) scale(0.6);
      opacity: 0;
    }
    100% { 
      opacity: 1;
      transform: translate(0px, 0px) scale(1);
    }
}

/* dark mode */
.-darkMode .window {
    background: #3A393B; 
    color: #DFDFDF;
}

.-darkMode .next:hover, .next:focus, .replay:hover, .replay:focus {
    color: #2966D1;
}

.-darkMode .fields #subscribe {
    border-color: #288DF8;
    background: #288DF8;
}

.-darkMode .fields #subscribe:hover, .fields #subscribe:focus {
    background: #2966D1;
}