@import url('https://fonts.googleapis.com/css?family=Black+Han+Sans');

.popup-wrapper {
  display: flex;
  display    : none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position   : fixed;
  top        : 0;
  left       : 0;
  right: 0;
  bottom: 0;
  z-index    : 8888;
}

.backdrop {
  position   : fixed;
  top        : 0;
  left       : 0;
  width      : 100vw;
  height     : 100vh;
  background : rgba(0, 0, 0, 0.8);
  cursor     : pointer;
  z-index    : 8887;
}

.popup-desktop {
  display    : none;
  max-width  : 680px;
  width      : 100%;
  height     : 530px;
  background : #fff;
  text-align : center;
  z-index    : 9999;
}

.popup-desktop.split_0s {
  position  : absolute;
  top       : 20px;
  left      : calc(50% - 480px);
  transform : none;
}

.popup-desktop .popup-header {
  height          : 240px;
  background      : url(popup-girl.jpg);
  background-size : cover;
}

.popup-desktop .popup-header .close {
  position : absolute;
  top      : 20px;
  right    : 20px;
}

.popup-desktop .popup-header .close img {
  cursor : pointer;
}

.popup-desktop .popup-header .title {
  font-family : "Black Han Sans", "Sans-serif", "serif";
  font-size   : 24px;
  font-weight : 400;
  padding     : 12px;
}

.popup-desktop .popup-header .text {
  font-family : "Lucida Grande", "Sans-serif", "serif";
  font-size   : 17px;
  font-weight : 700;
}

.popup-desktop .popup-body .title {
  color          : #1eb473;
  font-family    : "Helvetica Neue", "Sans-serif", "serif";
  font-size      : 23px;
  font-weight    : 700;
  line-height    : 35px;
  text-transform : uppercase;
  letter-spacing : 1.1px;
  max-width      : 610px;
  margin         : 27px auto;
}

.popup-desktop .popup-body .title img {
  display : inline;
}

.popup-desktop .popup-body .text {
  font-family    : "Helvetica Neue", "Sans-serif", "serif";
  font-size      : 21px;
  line-height    : 37px;
  color          : #5d5d5d;
  padding-bottom : 20px;
}

.popup-desktop button {
  font-family : "Helvetica", "Sans-serif", "serif";
  font-size   : 24px;
  text-align  : center;
  max-width   : 270px;
  height      : 53px;
  border      : none;
  margin      : 10px;
  width       : 50%;
  white-space : nowrap;
}

.popup-desktop button.green {
  background-color : #2dcc70;
  color            : #fff;
}

.popup-desktop button.grey {
  background : none;
  color      : #818181;
}

.popup-mobile {
  display    : none;
  max-width  : 260px;
  width      : 100%;
  background : #fff;
  text-align : center;
  z-index    : 9999;
}

.popup-mobile .popup-header {
  height     : 55px;
  background : #2988e6;
  color      : #fff;
}

.popup-mobile .popup-header .title {
  font-family : "Black Han Sans", "Sans-serif", "serif";
  font-size   : 18px;
  font-weight : 400;
  padding-top : 8px;
}

.popup-mobile .popup-header .text {
  font-family : "Lucida Grande", "Sans-serif", "serif";
  font-size   : 14px;
  font-weight : 700;
}

.popup-mobile .popup-body .text {
  font-family : "Helvetica Neue", "Sans-serif", "serif";
  font-size   : 22px;
  line-height : 36px;
  color       : #333;
  padding     : 20px 10px 10px;
}

.popup-mobile button {
  font-family    : "Helvetica", "Sans-serif", "serif";
  font-size      : 15px;
  text-align     : center;
  width          : calc(100% - 20px);
  height         : 53px;
  border         : none;
  margin         : auto;
  letter-spacing : 0.3px;
}

.popup-mobile button.green {
  background-color : #2dcc70;
  color            : #fff;
}

.popup-mobile button.grey {
  background : none;
  color      : #818181;
}

.popup-resend {
  display    : none;
  max-width  : 680px;
  width      : 100%;
  background : #fff;
  text-align : center;
  z-index    : 9999;
}

.popup-resend .popup-header {
  height     : 80px;
  background : #2988e6;
  color      : #fff;
}

.popup-resend .popup-header .title {
  font-family : "Black Han Sans", "Sans-serif", "serif";
  font-size   : 24px;
  font-weight : 400;
  padding     : 12px;
}

.popup-resend .popup-header .text {
  font-family : "Lucida Grande", "Sans-serif", "serif";
  font-size   : 17px;
  font-weight : 700;
}

.popup-resend .popup-body .title {
  color          : #b71c1c;
  font-family    : "Helvetica Neue", "Sans-serif", "serif";
  font-size      : 22px;
  font-weight    : 700;
  line-height    : 30px;
  letter-spacing : 1.1px;
  max-width      : 590px;
  margin         : 27px auto;
}

.popup-resend .popup-body .text {
  font-family    : "Helvetica Neue", "Sans-serif", "serif";
  font-size      : 21px;
  line-height    : 37px;
  color          : #5d5d5d;
  padding-bottom : 20px;
}

.popup-resend .popup-body input {
  width     : 300px;
  height: 40px;
  font-size: 18px;
  margin    : auto;
  text-align: center;
}

.popup-resend button {
  background    : #2dcc70;
  border-bottom : 3px solid #1eb473;
  border-radius : 0;
  display       : block;
  margin        : 30px auto 15px;
  cursor        : pointer;
  height: 40px;
  padding: 0 10px 2px;
  color: white;
}

.popup-resend .land-form-error {
  position    : absolute;
  top         : 105% !important;
  left        : 0;
  right       : 0;
  line-height : 14px;
  color       : #f11;
  text-align  : center;
  margin      : 0 0 2px;
  height      : auto;
  background  : 0 0;
  animation   : none;
}

@media screen and (max-width : 767px) {
  .popup-resend .popup-body .title {
    font-size   : 21px;
    line-height : 28px;
    max-width   : 590px;
    margin      : 10px auto 20px;
  }
}