@import url('https://fonts.googleapis.com/css2?family=Anton&family=Roboto&display=swap');

/* Start Colors */

:root {
    --back-color: #541b6c;
    --back-color-deg: #00000082;
    --main-color: #a2419e;
    --second-color: #4f1968;
    --steps-text: #ba15ff;
    --bonus-border: #77ff4a;
    --links: #a9a9a9;
}

.modal div{
  color: var(--steps-text);
}

/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
  .bonus-percent, .bonus{
    background: rgb(187,59,246);
    background: -moz-linear-gradient(180deg, rgba(187,59,246,1) 23%, rgba(219,144,254,1) 47%, rgba(187,59,246,1) 68%);
    background: -webkit-linear-gradient(180deg, rgba(187,59,246,1) 23%, rgba(219,144,254,1) 47%, rgba(187,59,246,1) 68%);
    background: linear-gradient(180deg, rgba(187,59,246,1) 23%, rgba(219,144,254,1) 47%, rgba(187,59,246,1) 68%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#bb3bf6",endColorstr="#bb3bf6",GradientType=1);
    -webkit-text-stroke-width: 0.7px;
    -webkit-text-stroke-color: var(--bonus-border);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* Safari 11+ */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
  .bonus-percent, .bonus{
    color: var(--second-color);
    -webkit-text-stroke-width: 0.7px;
    -webkit-text-stroke-color: var(--bonus-border);
  }
}}

/* Safari 10.1 */
@media not all and (min-resolution:.001dpcm){
@supports (-webkit-appearance:none) and (not (stroke-color:transparent)) {
  .bonus-percent, .bonus{
    color: var(--second-color);
    -webkit-text-stroke-width: 0.7px;
    -webkit-text-stroke-color: var(--bonus-border);
  }
}}

/* Safari 6.1-10.0 (but not 10.1) */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0){
@media {
  .bonus-percent, .bonus{
    color: var(--second-color);
    -webkit-text-stroke-width: 0.7px;
    -webkit-text-stroke-color: var(--bonus-border);
  }
}}

.modal-content {
  color: var(--links);
  background-color: var(--back-color) !important;
}

.btn-success{
  color: var(--back-color) !important;
  background-color: var(--bonus-border) !important;
}

/* End Colors */

/* Start Defaults */

h1, h2, h3, h4  {
  font-family: 'Anton', sans-serif !important;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

button, h5, h6, p{
  font-family: 'Roboto', sans-serif !important;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.link{
  cursor: pointer;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */}

body{
  background-color: var(--back-color) !important;
  background-image: url('../img/back.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

header{
  height: 4vh;
  background-color: var(--main-color);
  border-bottom: 10px solid var(--second-color);
}

hero{
  height: 100%;
}

  .img-hero{

  }

.cont{

}

.bonus-percent{
  display: inline-flex !important;
  font-size: 1.8rem;
}

footer{
  height: 10vh;
}

/* End Defaults */

.steps{
  background-color: var(--back-color);
}

.step{
  padding: 25px;
  border-bottom: 1px solid var(--steps-text);
  font-size: 1.2rem;
  color: var(--steps-text);
}

.offer-back{
  background-color: var(--back-color-deg);
  padding: 20px;
  border-radius: 12px;
  margin: 5px;
}

.bonus{
  display: inline-flex !important;
  font-size: 5.7rem;
}

.bonus-text-back{
  background-color: var(--back-color-deg);
  border-radius: 12px;
  padding: 10px 0px 5px 0px;
  border: 2px solid var(--bonus-border);
  border-radius: 12px;
}

.ndp, .pop{
  color: var(--links) !important;
  cursor: pointer;
}

.plus{
  color: var(--fourth-color);
}

.free-text{
  color: #fff;
  font-size: 3rem;
  text-shadow: 0px 0px 13px rgb(82 185 202);
}

/* // Extra small devices (portrait phones, less than 576px) */
/* // No media query since this is the default in Bootstrap */

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

  header{
    height: 4vh;
    border-bottom: 10px solid var(--second-color);
  }

  hero{
    height: 100%;
  }

  .img-hero{

  }

  .cont{

  }

  .bonus-percent{
    font-size: 2.3rem;
  }

  footer{
    height: 10vh;
  }

  /* End Defaults */

  .steps{

  }

  .step{
    padding: 25px;
    font-size: 1.6rem;
  }

  .offer-back{
    padding: 20px;
    border-radius: 12px;
    margin: 5px;
  }

  .bonus{
    font-size: 7.7rem;
  }

  .bonus-text-back{

  }

  .ndp, .pop{
    cursor: pointer;
  }

  .plus{

  }

  .free-text{
    font-size: 4rem;
  }

}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

  header{
    height: 4vh;
    border-bottom: 10px solid var(--second-color);
  }

  hero{
    height: 100%;
  }

  .img-hero{

  }

  .cont{

  }

  .bonus-percent{
    font-size: 2.3rem;
  }

  footer{
    height: 10vh;
  }

  /* End Defaults */

  .steps{

  }

  .step{
    padding: 25px;
    font-size: 1.6rem;
  }

  .offer-back{
    padding: 20px;
    border-radius: 12px;
    margin: 5px;
  }

  .bonus{
    font-size: 7.7rem;
  }

  .bonus-text-back{

  }

  .ndp, .pop{
    cursor: pointer;
  }

  .plus{

  }

  .free-text{
    font-size: 4rem;
  }

}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

  header{
    height: 4vh;
    border-bottom: 10px solid var(--second-color);
  }

  hero{
    height: 100%;
  }

  .img-hero{

  }

  .cont{

  }

  .bonus-percent{
    font-size: 2.3rem;
  }

  footer{
    height: 10vh;
  }

  /* End Defaults */

  .steps{

  }

  .step{
    padding: 25px;
    border-bottom: 1px solid var(--steps-text);
    font-size: 1.6rem;
  }

  .offer-back{
    padding: 20px;
    border-radius: 12px;
    margin: 5px;
  }

  .bonus{
    font-size: 7.7rem;
  }

  .bonus-text-back{

  }

  .ndp, .pop{
    cursor: pointer;
  }

  .plus{

  }

  .free-text{
    font-size: 4rem;
  }

}

/* // Extra large devices (large desktops, 1024px and up) */
@media (min-width: 1024px) {
  header{
    height: 4vh;
    border-bottom: 10px solid var(--second-color);
  }

  hero{
    height: 100%;
  }

  .img-hero{

  }

  .cont{

  }

  .bonus-percent{
    font-size: 2.3rem;
  }

  footer{
    height: 10vh;
  }

  /* End Defaults */

  .steps{

  }

  .step{
    padding: 25px;
    border-bottom: 1px solid var(--steps-text);
    font-size: 1.6rem;
  }

  .offer-back{
    padding: 20px;
    border-radius: 12px;
    margin: 5px;
  }

  .bonus{
    font-size: 7.7rem;
  }

  .bonus-text-back{

  }

  .ndp, .pop{
    cursor: pointer;
  }

  .plus{

  }

  .free-text{
    font-size: 4rem;
  }

}

/* // Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

  header{
    height: 4vh;
    border-bottom: 10px solid var(--second-color);
  }

  hero{
    height: 100%;
  }

  .img-hero{

  }

  .cont{

  }

  .bonus-percent{
    font-size: 2.3rem;
  }

  footer{
    height: 10vh;
  }

  /* End Defaults */

  .steps{

  }

  .step{
    padding: 25px;
    border-bottom: 1px solid var(--steps-text);
    font-size: 1.6rem;
  }

  .offer-back{
    padding: 20px;
    border-radius: 12px;
    margin: 5px;
  }

  .bonus{
    font-size: 7.7rem;
  }

  .bonus-text-back{

  }

  .ndp, .pop{
    cursor: pointer;
  }

  .plus{

  }

  .free-text{
    font-size: 4rem;
  }

}

/* // Extra large devices (large desktops, 1280px and up) */
@media (min-width: 1280px) {

  header{
    height: 4vh;
    border-bottom: 10px solid var(--second-color);
  }

  hero{
    height: 85vh;
  }

  .img-hero{
    width: 70%;
  }

  .cont{
    margin-top: 2%;
  }

  .bonus-percent{
    font-size: 2.3rem;
  }

  footer{
    height: 3vh;
  }

  /* End Defaults */

  .steps{

  }

  .step{
    padding: 25px;
    border-bottom: 1px solid var(--steps-text);
    font-size: 1rem;
  }

  .offer-back{
    padding: 20px;
    border-radius: 12px;
    margin: 5px;
  }

  .bonus{
    font-size: 4.8rem;
  }

  .bonus-text-back{

  }

  .ndp, .pop{
    cursor: pointer;
  }

  .plus{

  }

  .free-text{
    font-size: 5rem;
  }

}

/* // Extra large devices (large desktops, 1366px and up) */
@media (min-width: 1366px) {

  header{
    height: 2.5vh;
    border-bottom: 10px solid var(--second-color);
  }

  hero{
    height: 85vh;
  }

  .img-hero{
    width: 80%;
  }

  .cont{
    margin-top: 3%;
  }

  .bonus-percent{
    font-size: 2.3rem;
  }

  footer{
    height: 3.5vh;
  }

  /* End Defaults */

  .steps{

  }

  .step{
    padding: 25px;
    border-bottom: 1px solid var(--steps-text);
    font-size: 1.1rem;
  }

  .offer-back{
    padding: 20px;
    border-radius: 12px;
    margin: 5px;
  }

  .bonus{
    font-size: 5.2rem;
  }

  .bonus-text-back{

  }

  .ndp, .pop{
    cursor: pointer;
  }

  .plus{

  }

  .free-text{
    font-size: 4rem;
  }

}


/* // Extra large devices (large desktops, 1400px and up) */
@media (min-width: 1400px) {

  header{
    height: 2vh;
    border-bottom: 10px solid var(--second-color);
  }

  hero{
    height: 85vh;
  }

  .img-hero{
    width: 80%;
  }

  .cont{
    margin-top: 3%;
  }

  .bonus-percent{
    font-size: 2.3rem;
  }

  footer{
    height: 3vh;
  }

  /* End Defaults */

  .steps{

  }

  .step{
    padding: 25px;
    border-bottom: 1px solid var(--steps-text);
    font-size: 1.2rem;
  }

  .offer-back{
    padding: 20px;
    border-radius: 12px;
    margin: 5px;
  }

  .bonus{
    font-size: 5.7rem;
  }

  .bonus-text-back{font-size: 2rem;}

  .ndp, .pop{
    cursor: pointer;
  }

  .plus{

  }

  .free-text{
    font-size: 5rem;
  }

}

/* // Extra large devices (large desktops, 1600px and up) */
@media (min-width: 1600px) {

  header{
    height: 5vh;
    border-bottom: 10px solid var(--second-color);
  }

  hero{
    height: 85vh;
  }

  .img-hero{

  }

  .cont{

  }

  .bonus-percent{
    font-size: 2.3rem;
  }

  footer{
    height: 10vh;
  }

  /* End Defaults */

  .steps{

  }

  .step{
    padding: 25px;
    border-bottom: 1px solid var(--steps-text);
    font-size: 1.4rem;
  }

  .offer-back{
    padding: 20px;
    border-radius: 12px;
    margin: 5px;
  }

  .bonus{
    font-size: 6.6rem;
  }

  .bonus-text-back{

  }

  .ndp, .pop{
    cursor: pointer;
  }

  .plus{

  }

  .free-text{
    font-size: 6rem;
  }

}

/* // Extra large devices (large desktops, 1920px and up) */
@media (min-width: 1920px) {

  header{
    height: 4vh;
    border-bottom: 10px solid var(--second-color);
  }

  hero{
    height: 87vh;
  }

  .img-hero{width: 200%;}

  .cont{

  }

  .bonus-percent{
    font-size: 4.3rem;
  }

  footer{
    height: 10vh;
  }

  /* End Defaults */

  .steps{

  }

  .step{
    padding: 25px;
    border-bottom: 1px solid var(--steps-text);
    font-size: 1.7rem;
  }

  .offer-back{
    padding: 20px;
    border-radius: 12px;
    margin: 5px;
  }

  .bonus{
    font-size: 8.2rem;
  }

  .bonus-text-back{

  }

  .ndp, .pop{
    cursor: pointer;
    font-size: 20px;
  }

  .plus{

  }

  .free-text{
    font-size: 9rem;
  }

}