/* RESET */
* {
  color       : #533187;
  padding     : 0;
  margin      : 0;
  font-family : 'circular';
}

p {
  font-size: .8rem;
}

@font-face {
  font-family: 'circular';
  src        : url('CircularStd-Medium.woff');
}

::-webkit-scrollbar {
  width: 0;
}



/* CONTAINER */
.popup-container {
  max-width: 38em;
  margin   : 0 auto 0;
  position : relative;
  display  : -webkit-box;
  display  : -ms-flexbox;
  display  : flex;
}

.popup-container::before {
  width               : 4em;
  height              : 100%;
  content             : '';
  position            : absolute;
  left                : calc(40% - 2em);
  right               : 0;
  display             : block;
  background-image    : url('sine-wave-bg.jpg');
  background-repeat   : repeat-y;
  background-position : 50% top;
  z-index             : 10;
}



/* LEFT SECTION */
.popup-container section:first-of-type {
  -webkit-box-flex     : 0;
  -ms-flex             : 0 0 calc(40% - 4em);
  flex-basis           : calc(40% - 4em);
  flex-grow            : 0;
  flex-shrink          : 0;
  height               : inherit;
  padding              : 3.5em 2em;
  display              : -webkit-box;
  display              : -ms-flexbox;
  display              : flex;
  -webkit-box-orient   : vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction   : column;
  flex-direction       : column;
  -webkit-box-pack     : justify;
  -ms-flex-pack        : justify;
  justify-content      : center;
  background-color     : #fff;
  border-radius        : 1em;
  border               : 1px solid #f6f9fc;
}

.popup-container section:first-of-type .laybuy-logo {
  margin: 0 0 2em;
}

.popup-container section:first-of-type .laybuy-logo > img {
  height: 2.5em;
}

.popup-container section:first-of-type h1 {
  max-width      : 8em;
  margin         : 0 0 1.4375rem;
  font-size      : 1.9rem;
  letter-spacing : .0325em;
}

.popup-container section:first-of-type > p {
  max-width  : 17em;
  margin     : 0 0 2em;
  line-height: 1.55em;
  font-size  : 1.015rem;
  color      : #786dff;
}

.popup-container section:first-of-type > p > strong {
  letter-spacing: .035em;
}

.popup-container section:first-of-type .laybuy-example-btn > img {
  height: 2.65em;
}

.popup-container section:first-of-type .mobile-scrollable {
  display: none;
}



/* RIGHT SECTION */
.popup-container section:last-of-type {
  align-items     : flex-start;
  -webkit-box-flex: 0;
  -ms-flex        : 0 0 calc(60% - 3em);
  flex-basis      : calc(60% - 3em);
  flex-grow       : 0;
  flex-shrink     : 0;
  padding         : 3.5em 1em 3.5em 2em;
  position        : relative;
  display         : -webkit-box;
  display         : -ms-flexbox;
  display         : flex;
  -ms-flex-wrap   : wrap;
  flex-wrap       : wrap;
  background      : #F5F5F5;
  border-radius   : 1em;
  border          : 1px solid #F5F5F5;
}

.popup-container section:last-of-type > .step {
  -webkit-box-flex: 1;
  -ms-flex        : 1 0 calc(50% - 1em);
  flex-basis      : calc(50% - 1em);
  flex-grow       : 1;
  flex-shrink     : 0;
}

.popup-container section:last-of-type > .step:nth-child(odd) {
  padding: .8em .5em .8em 0;
}

.popup-container section:last-of-type > .step:nth-child(even) {
  padding: .8em 0 .5em .8em;
}

.popup-container section:last-of-type > .step > .img-container {
  height: 4.25em;
}

.popup-container section:last-of-type > .step > img {
  margin: 0 0 .5em
}

.popup-container section:last-of-type > .step > p {
  line-height: 1.4em;
  font-size  : .75rem;
}

.popup-container section:last-of-type > .step:nth-child(1) > p { max-width: 11em; }
.popup-container section:last-of-type > .step:nth-child(2) > p { max-width: 10em; }
.popup-container section:last-of-type > .step:nth-child(3) > p { max-width: 10em; }
.popup-container section:last-of-type > .step:nth-child(4) > p { max-width: 12em; }

.popup-container section:last-of-type > .step > p > span {
  color: #786dff;
}

.popup-container h4 {
  color        : #786dff;
  margin-bottom: .5em;
}

@media screen and (max-width : 545px) {
  .popup-container h4 {
    text-align: center;
  } 
}

.popup-container section:last-of-type > p.get-in-touch {
  -webkit-box-flex: 1;
  -ms-flex        : 1 0 100%;
  flex-basis      : 100%;
  flex-grow       : 1;
  flex-shrink     : 0;
}

.popup-container section:last-of-type > p.get-in-touch > a {
  text-decoration: underline;
  color          : #000;
  cursor         : pointer;
}

.popup-container section:last-of-type > button {
  align-self    : start;
  padding       : 1.25em 2.8em;
  margin        : 1.5em 0 0;
  font-size     : .8rem;
  line-height   : 0;
  color         : #fff;
  background    : #533187;
  border        : 0;
  border-radius : 4em;
  cursor        : pointer;
  outline       : 0;
}



/* CLOSE BUTTON */
.popup-container .close-btn {
  position: absolute;
  top     : .75em;
  right   : .65em;
}



/* MOBILE */
@media screen and (max-width : 545px) {
  .popup-container {
    max-height           : 60vh;
    -webkit-box-orient   : vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction   : column;
    flex-direction       : column;
    border-radius        : 1em;
    background-color     : #f6f9fc;
    overflow-y           : scroll;
  }
  
  .popup-container::before {
    background-size: 0;
  }
  
  
  
  /* LEFT SECTION */
  .popup-container section:first-of-type {
    padding                   : 1.5em 2em;
    -webkit-box-align         : center;
    -ms-flex-align            : center;
    align-items               : center;
    background-color          : #f6f9fc;
    border-bottom-right-radius: 0;
    border-bottom-left-radius : 0;
  }
  
  .popup-container section:first-of-type .laybuy-logo {
    margin: 0 0 1.5em;
  }
  
  .popup-container section:first-of-type h1 {
    font-size: 1.75rem;
  }
  
  .popup-container section:first-of-type p {
    font-size: 1rem;
  }
  
  .popup-container section:first-of-type h1,
  .popup-container section:first-of-type p {
    max-width : 100%;
    text-align: center;
  }
  
  .popup-container section:first-of-type .mobile-scrollable {
    margin            : 3em 0 0;
    display           : block;
    font-size         : .75rem;
    color             : #BDBDBD;
    -webkit-transition: opacity .6s ease-in-out;
    -o-transition     : opacity .6s ease-in-out;
    transition        : opacity .6s ease-in-out;
  }

  
  
  /* RIGHT SECTION */
  .popup-container section:last-of-type {
    padding                : 0 0 2em;
    text-align             : center;
    -webkit-box-pack       : center;
    -ms-flex-pack          : center;
    justify-content        : center;
    background             : #f6f9fc;
    border-color           : #f6f9fc;
    border-top-left-radius : 0;
    border-top-right-radius: 0;
  }
  
  .popup-container section:last-of-type > .step {
    -webkit-box-flex: 0;
    -ms-flex        : 0 0 90%;
    flex-basis      : 90%;
    flex-grow       : 0;
    flex-shrink     : 0;
    padding         : 0 0 3em !important;
  }
  
  .popup-container section:last-of-type > .step > .img-container > img {
    height: 2.35em;
  }
  
  .popup-container section:last-of-type > .step > p {
    max-width: 100% !important;
    font-size: .925rem;
  }
  
  .popup-container section:last-of-type > p.get-in-touch {
    font-size: .9rem;
  }
  
  .popup-container section:last-of-type > button {
    width    : 20em; 
    padding  : 1.45em 0;
    font-size: .885rem;
  }
}