@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100;0,200;0,400;0,600;0,700;1,100;1,200;1,400;1,600;1,700&display=swap');
/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/





.white-text,
.white-text h1,
.white-text h2,
.white-text h3,
.white-text h4,
.white-text h5,
.white-text h6,
.white-text p,.white-text a{
  color:#fff
}
.grey-text,
.grey-text h1,
.grey-text h2,
.grey-text h3,
.grey-text h4,
.grey-text h5,
.grey-text h6,
.grey-text p,.grey-text a{
  color: #666666;
}
.secondaryColor,
.secondaryColor h1,
.secondaryColor h2,
.secondaryColor h3,
.secondaryColor h4,
.secondaryColor h5,
.secondaryColor h6,
.secondaryColor p,.secondaryColor a{
  color: #B51E6D
}
h1,
h2,
h3,
h4,
h5,
h6,
p, a, ul, li, label, input{
  font-family: 'Archivo', sans-serif;
}

h1{
  font-size: 80px;
  font-weight: 400;
  line-height: 82px;
  letter-spacing: -0.025em;
}
.HeroCopy h1{
  font-size: 80px;
  font-style: normal;
  font-weight: 400;
  line-height: 82px;
  letter-spacing: -0.025em;
}
h2{
  font-size: 64px;
  font-weight: 400;
  margin:0;
}
h3{
  font-size: 48px;
  font-weight: 400;
  line-height: 56px;
  letter-spacing: -0.015em;
}
h4{
  font-size: 34px;
  font-weight: 400;
  line-height: 30px;
  margin: 0;
}

p, ul, li{
  font-size: 26px;
  font-weight: 400;
  line-height: 34px;
  letter-spacing: 0.029999999329447746px;
  margin:0;
  color: #666666;
}
a{
  text-decoration:none;
  color: #B51E6D
}

.secondary-header{
  color: #666666;
}
.hs-button button {
  cursor: inherit;
  border-width: 0px;
  color: #fff;
  background-color: #B51E6D;
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  padding: 20px 95px;
  border-radius: 100px;
}

.productlockup a:after, .featureCard a:after, .arrowLinks a:after{
  content: url('https://get.rokt.com/hubfs/Spear%20Templates/LandingPageTemplate/Arrow-Right.png');
  vertical-align: text-top;
}


.socialLogoWrapper{
  width:25%;
  display: flex;
  justify-content: space-around;
}

.d-flex, 
.LandingA .d-flex .row-fluid,
.LandingC .d-flex .row-fluid{
  display:flex !important;
}


.landinga p{
  font-size: 18px;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.slick-dots li.slick-active button{
  color:#C4C4C4 !important;
  background:#C4C4C4 !important;
}
.slick-dots li button{
  border-radius: 10px !important;
  border: 2px solid #C4C4C4 !important;
}

.slick-dots li button:before, .slick-dots li.slick-active button:before{
  color: transparent !important;
}




/*****************************************/
/* Start your style declarations here    */
/*****************************************/


/*****************************************/
/* Start MOBILE declarations here    */
/*****************************************/
@media only screen and (min-width: 1025px) {

  .hide-on-mobile.backgroundIMG{
    /*background-image: url('https://info.rokt.com/hubfs/Spear%20Templates/LandingPageTemplate/BGAccent.png');
    background-position: center right;
    background-repeat: no-repeat;*/
  }
  .text-md-left{
    text-align:left;
  }
  .text-md-center{
    text-align:center;
  }
  .text-md-right{
    text-align:right;
  }
  .productLockupCarousel {
    display: flex;
    margin-bottom: 48px;
  }

  .productLockupCard{
    width: 33.33%;
  }

}
@media only screen and (max-width: 1025px) {
  .hide-on-desktop.backgroundIMG{
    /*background-image: url('https://info.rokt.com/hubfs/Spear%20Templates/LandingPageTemplate/BGAccent.png');
    background-position: center right;
    background-repeat: no-repeat;*/
  }
  .flex-md-column,
  .LandingA .flex-md-column .rowfluid{
    flex-direction: column;
  }
  .flex-md-column-reverse,
  .LandingA .flex-md-column-reverse .row-fluid{
    flex-direction: column-reverse;
  }
  .productLockupCarousel {
    margin-bottom: 30px;
  }
  .productLockupCard{
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
  }
  @media only screen and (max-width: 769px) {
    .HeroCopy h1{
      font-size: 36px;
      font-style: normal;
      font-weight: 400;
      line-height: 40px;
      letter-spacing: -0.01em;
    }

    h1{
      font-size: 36px;
      font-weight: 400;
      line-height: 40px;
    }
    h2{
      font-size: 30px;
      font-weight: 400;
      line-height: 34px;
      letter-spacing: -0.025em;
    }

    h3{
      font-size: 30px;
      font-weight: 400;
      line-height: 34px;
      letter-spacing: -0.025em;
    }
    h4{
      font-size: 26px;
      font-weight: 400;
      line-height: 34px;
      letter-spacing: -0.025em;
    }

    p, ul, li{
      font-size: 18px;
      font-weight: 400;
      line-height: 24px;
    }

    .hs-button button{
      font-size: 16px;
      font-weight: 500;
      line-height: 24px;
      letter-spacing: 0em;
      text-align: left;
      padding: 16px 40px;
    }


    .header-container-wrapper{
      padding: 15px 0;
    }

    .socialLogoWrapper{
      width:50%;
    }
  }