/* @import url('http://example.com/example_style.css'); */

/* @import url(//designers.hubspot.com/hs-fs/hub/327485/file-2054199286-css/font-awesome.css);'); */



/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/



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


/*****************************************/
/* Overrides  */
/*****************************************/
/* Hide the left / right arrow buttons on image galleryslider  */
.slick-next {display: block !important;}
.slick-prev {display: block !important;}



/*****************************************/
/* Alignment  */
/*****************************************/


.floatLeft{float: left;}
.floatRight{float: right;}

.valignElement{margin-top: 50%;}

.flex{
  display: flex;
  align-items: center;
  direction: row;

}







.flex-container{
display:-webkit-flex;
display:flex;
-webkit-justify-content:space-between;
justify-content:space-between;
-webkit-align-items:center;
align-items:center;
}



 .flexParent {
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-pack: justify;
        -moz-justify-content: space-between;
        justify-content: space-between;
    }

    .flexChild{
        -ms-flex-align: center;
        -moz-align-items: center;
        align-items: center;
        text-align: left;
    }








.hero--v-center {
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    -moz-align-items: center;
    align-items: center;
}


.padding8{padding: 8px;}
.padding16{padding: 16px;}
.padding32{padding: 32px;}



.verticalAlignCenter{
  display: flex; 
  -ms-flex-align: center;
    -moz-align-items: center;
    align-items: center;
    text-align: left;
}


.blogCard{
width: 47%;
    float: left;
    background: #ffffff;
    padding: 0px;
    margin: 1.5%;
    min-height: 378px;
  display: block;
}

.blogCardImg{
border-width: 0;
  background: #000000;
    max-height: 204px !important;
    max-width: 100%;
    display: inline-block !important;
    float: none !important;
    margin: 0px 0px 10px 0px;
}


.blogPagination{
  clear: both;
    float: none;
    padding: 0px;
    margin: 20px;
}

.hs-featured-image-wrapper .hs-featured-image-link img.hs-featured-image {
    border-width: 0;
    max-height: 100px;
    max-width: 100%;
    display: inline-block !important;
    float: none !important;
    margin: 0px 0px 10px 0px;
}


@media (max-width: 768px) {
 .blogCard{
width: 100%;
    float: none;
   margin: 32px 0px;
}
}




/*****************************************/
/* Typography  */
/*****************************************/
.hero-title h1{
    color: #242424;
    font-weight: 700;
  font-size: 46px;
    margin-bottom: 18px;
}


.card-title {
    font-weight: 700;
    margin-bottom: 26px;
    margin-top: 0;
}



.richTextBullets{

}

.richTextBullets ul {
  list-style: none;
  padding: 0;
}
.richTextBullets li {
  padding-left: 32px;
}
.richTextBullets li:before {
  content: "\f00c"; /* FontAwesome Unicode */
  color: #826994;
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -32px; /* same as padding-left set on li */
  width: 32px; /* same as padding-left set on li */
}






.richTextBulletsWarning ul {
  list-style: none;
  padding: 0;
}
.richTextBulletsWarning li {
  padding-left: 32px;
}
.richTextBulletsWarning li:before {
  content: "\f071"; /* FontAwesome Unicode */
  color: #D67073;
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -32px; /* same as padding-left set on li */
  width: 32px; /* same as padding-left set on li */
}

.richTextBulletsReview ul {
  list-style: none;
  padding: 0;
}
.richTextBulletsReview li {
  padding-left: 32px;
}
.richTextBulletsReview li:before {
  content: "\f165"; /* FontAwesome Unicode */
  color: #E5C953;
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -32px; /* same as padding-left set on li */
  width: 32px; /* same as padding-left set on li */
}







.fullWidthLineLengthReduction{
padding-left: 12.5% !important;
padding-right: 12.5% !important;
}


@media (max-width: 768px) {
.fullWidthLineLengthReduction{
padding-left: 16px !important;
  padding-right: 16px !important;
}
}




  .jumpFormForcer{
padding-top: 0px;
}


@media (max-width: 768px) {
 .hero-title h1{
    font-size: 26px;
 }
  
  
  .jumpFormForcer{
padding-top: 88px !important;
}
  
  
  
}


.whiteText{
color: #ffffff;
}

.featureHeading{
font-size: 30px;
    font-weight: 700;
    line-height: 40px;
}



/*****************************************/
/* Case Study Experimental Typography */
/*****************************************/
.caseStudySection{
  display: block;
}


.rotatedHeading{
  text-align: right;
  position: absolute;
  top: 0;
  display: block;
  padding: 0px;
  margin: 0;
  writing-mode: tb;
 -moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
  height: fit-content;
 white-space: nowrap;
    border-left: 2px solid black;
  height: auto;
}

.contentWhenRotatedHeading{
  display: block;
  float: right;
  height: auto;
  margin: 0;
  padding-left: 16px;
  margin: 0px 0px 0px 64px;
}

.rotatedHeading h2{margin: 0 !important; }


@media (max-width: 768px) {
.rotatedHeading{
  text-align: left;
  position: relative;
      width: fit-content;
  margin: 0px;
  writing-mode: lr;
 -moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
    border-left: none;
  border-bottom: 2px solid black;
}

.contentWhenRotatedHeading{
  float: none;
  margin: 0;
  padding: 8px;
  margin: 0px;
}
}








/*****************************************/
/* ROI Calculator  */
/*****************************************/
@media (max-width: 768px) {
.roiH{
  font-size: 1.6em;
  text-align: center;
}

.roiP{
 text-align: center;
}
}

/*****************************************/
/* Tags  */
/*****************************************/

.featured-tag {
    font-size: 12px;
    line-height: 12px;
    font-weight: 700;
    color: #fff;
    background-color: #e5c954;
    padding: 4px 8px;
    margin: 0;
    display: inline-block;
 position: relative;
      width: fit-content;
}



/*****************************************/
/* Animations  */
/*****************************************/


.slideInLeft{

opacity: 1;
transform: matrix(1, 0, 0, 1, 0, 0);
transition-delay: 0s;
transition-duration: 0.4s;
transition-property: opacity, transform;
transition-timing-function: ease;
  

      -webkit-transform: translate3d(0, 0, 0);

      -webkit-transform: translateX(-100%);
      -moz-transform:    translateX(-100%);
      -ms-transform:     translateX(-100%);
      -o-transform:      translateX(-100%);

      -webkit-transition: all 0.6s ease;
      -moz-transition:    all 0.6s ease;
      -ms-transition:     all 0.6s ease;
      -o-transition:      all 0.6s ease;
  
  
}




/*****************************************/
/*  Images */
/*****************************************/



.card--icon i {
    width: 154px;
    height: 113px;
    display: block;
    margin-bottom: 18px;
}



/*****************************************/
/*  Responsive stuff */
/*****************************************/

.desktopOnly {
    display: block !important;
 }

@media (max-width: 768px) {
 .desktopOnly{
    display: none !important;
 }
}


.mobileOnly {
    display: none !important;
 }

@media (max-width: 768px) {
 .mobileOnly{
    display: block !important;
 }
}


/*****************************************/
/*  Random text stuff - TOD - move to a more logical place */
/*****************************************/

.fullWidthHeadingRestriction{
padding: 0 15%;
}

@media (max-width: 768px) {
.fullWidthHeadingRestriction{
padding: 0 5%;
}
}



/*****************************************/
/*  Containers */
/*****************************************/

.whitebg{background-color: #ffffff;}

.darkbg{background-color: #333333;}

.integrationLogoBg{background-color: #eef0ef;}


.clientsLogoBg{background-color: #fffffd;}




.appBox{
padding: 16px;
  width: 90%;
  margin-bottom: 32px;
  background-color: #ffffff;
    -webkit-box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)!important;
    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)!important;
}


.possibilitiesBox{
padding: 16px;
  width: 90%;
  margin-bottom: 0px;
  background-color: none;
}


.appBoxHeight{
  min-height: 220px !important;
}

 .appBox img{
   margin: 0 32px 96px 8px !important;
    float: left;
}

 .possibilitiesBox img{
   margin: 0 32px 96px 8px !important;
    float: left;
}


@media only screen and (max-device-width: 768px) {

  
  .possibilitiesBox{
text-align: center;
}
  
  
    .possibilitiesBox img{
   margin: 8px auto !important;
    float: none;
}
  
  
  
}





.contactForm{
  background-color: rgba(255, 255, 255, .75);
  padding:16px;
}


.textureAngledStripes{
background-image: linear-gradient(45deg, #eae9e9 4.55%, #ffffff 4.55%, #ffffff 50%, #eae9e9 50%, #eae9e9 54.55%, #ffffff 54.55%, #ffffff 100%);
background-size: 31.11px 31.11px;

}


/*****************************************/
/*  Client logos */
/*****************************************/

.client-logos {
    padding: 75px 0 0
}


.client-logos .logos {
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center;
    -moz-justify-content: center;
    justify-content: center;
}

.client-logos .logos .logo {
    width: calc(70px + ((100% - 385px) / 12 * 3));
    text-align: center;
}

@media (max-width: 768px) {
.client-logos .logos .logo {
    width: calc(160px + ((100% - 385px) / 12 * 3));
    text-align: center;
}
}



/*****************************************/
/*  Integration and customer logos greyscale logos */
/*****************************************/

.page-customers .logos .logo img, .page-integrations .logos .logo img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    -webkit-filter: grayscale(100%);
    width: 100%;
    max-width: 100%;
}

.page-customers .logos .logo img:hover, .page-integrations .logos .logo img:hover {
    -webkit-filter: none;
    filter: none;
    transition: all linear .3s;
}


/*****************************************/
/*  Buttons */
/*****************************************/

.applaudBtn{
position: relative;
    display: inline-block;
    vertical-align: middle;
    font-weight: 700;
  text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    transition: all .25s;
    transform: translate(0, -2px);
    padding: 8px 16px;
  margin: 16px;
    border: 1px solid #fff;
    border-radius: 4;
    cursor: pointer;
    -webkit-appearance: none;
  width: fit-content;
}




.applaudBtn a {
  color: #ffffff;
}


.demoBtn a{
background: #e5c953 !important;
       -webkit-box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12) !important;
    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12) !important;
  position: relative;
    display: inline-block;
    vertical-align: middle;
    font-weight: 700;
  text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    transition: all .25s;
    transform: translate(0, -2px);
    padding: 8px 16px;
  margin: 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    -webkit-appearance: none;
  width: fit-content;

}


.demoBtn a:hover{
background: #f3d557 !important;
    -webkit-box-shadow: 0 6px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12) !important;
    box-shadow: 0 6px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12) !important; 
}




.allPostsBtn a{
background: #826994!important;
       -webkit-box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12) !important;
    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12) !important;
  position: relative;
    display: inline-block;
    vertical-align: middle;
    font-weight: 700;
  text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    transition: all .25s;
    transform: translate(0, -2px);
    padding: 8px 16px;
  margin: 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    -webkit-appearance: none;
  width: fit-content;
color: white;
}


.allPostsBtn a:hover{
background: #826994 !important;
    -webkit-box-shadow: 0 6px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12) !important;
    box-shadow: 0 6px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12) !important; 
  color: white;
}



.inlineBtn{
    display: inline-block;
    float: left;
  margin: 16px;
  margin-left: 0px;
}






.post-body{
margin-bottom: 64px;
}







#demoCTA .applaudBtn{
 position: relative;
    vertical-align: middle !important;
  text-transform: uppercase !important;
    transition: all .25s!important;
    transform: translate(0, -2px) !important;
    border: 0px none #fff !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
    -moz-user-select: none !important;
    -webkit-user-select: none !important;
    -o-user-select: none !important;
    user-select: none !important;
    display: block !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-decoration: none !important;
    -moz-transition: all .4s ease !important;
    -webkit-transition: all .4s ease !important;
    -o-transition: all .4s ease !important;
    background: rgb(229,201,83) !important;
    border-radius: 4px !important;
    border-width: 0px !important;
    color: rgb(255,255,255) !important;
    font-family: sans-serif !important;
    height: auto !important;
    transition: all .4s ease !important;
    padding: 8px 16px !important;
    text-shadow: none !important;
    width: fit-content !important;
    font-size: 14px !important;
    line-height: 1.5em !important;
 
}




.greenBtn a{
background-color: #75AD7F;
 position: relative;
    display: inline-block;
    vertical-align: middle;
    font-weight: 700;
  text-transform: uppercase;
    text-decoration: none;
    color: #FFFFFF;
    transition: all .25s;
    padding: 8px 16px;
  margin: 0px;
    border: 1px solid #ffffff;
    border-radius: 4;
    cursor: pointer;
    -webkit-appearance: none;
  width: fit-content;
}

.greenBtn a:hover{
background-color: #4E8D63;
  color: #FFFFFF;
}

.greenBtn a:active{
background-color: #685074;
  color: #FFFFFF;
}


.assertive{background-color: #E5C953;}

.outlineBtn a{
position: relative;
    display: inline-block;
    vertical-align: middle;
    font-weight: 700;
  text-transform: uppercase;
    text-decoration: none;
    color: #333333;
    transition: all .25s;
    padding: 8px 16px;
  margin: 0px;
    border: 1px solid #333333;
    border-radius: 4;
    cursor: pointer;
    -webkit-appearance: none;
  width: fit-content;
}


.outlineBtn a:hover{
    color: #826994;
    border: 1px solid #826994;
  background-color: rgba(0, 0, 0, 0.04);
}


.outlineBtnWhite a{
    color: #ffffff;
    border: 1px solid #ffffff;
}


.outlineBtnWhite a:hover{
    color: #826994;
    border: 1px solid #826994;
  background-color: rgba(0, 0, 0, 0.04);
}




.playBtn a:before{
 content: "\f04b";
    font-family: FontAwesome;
    display: inline-block;
    float: left;
    margin-right: 8px;
    margin-top: 1px;
}

.playBtn:before{
 content: "\f04b";
    font-family: FontAwesome;
    display: inline-block;
    float: left;
    margin-right: 8px;
    margin-top: 1px;
}

.lightBtn a{
position: relative;
    display: inline-block;
    vertical-align: middle;
    font-weight: 700;
  text-transform: uppercase;
    text-decoration: none;
    color: #333333;
    transition: all .25s;
    padding: 8px 16px;
  margin: 0px;
    border: none;
    cursor: pointer;
    -webkit-appearance: none;
  width: fit-content;
}


.lightBtn a:hover{
    color: #826994;
  background-color: rgba(0, 0, 0, 0.04);
}



.hyperlinkBtn a{
position: relative;
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
    color: #826994;
    transition: all .25s;
    padding: 8px 8px;
  margin: 0px;
    border: none;
    cursor: pointer;
    -webkit-appearance: none;
  width: fit-content;
}


.hyperlinkBtn a:hover{
  background-color: rgba(0, 0, 0, 0.04);
}






.linkedInBtn a:before{
 content: "\f08c";
    font-family: FontAwesome;
    display: inline-block;
    float: left;
    margin-right: 8px;
    margin-top: 1px;
}


.singleBtn{
margin: 0px 0px !important;
}


.applaudCTA-button{
background: #e5c953 !important;
    border-style: none;
    border-width: 1px;
    color: white;
    text-transform: uppercase;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    font-family: 'Helvetica Neue',helvetica,arial,sans-serif;
    padding: 8px 16px;
    display: inline-block;
    margin-bottom: 16px;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    white-space: nowrap;
    padding: 8px 16px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-decoration: none;
    -webkit-appearance: none;
    margin-top: 16px;
    -webkit-box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12) !important;
    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12) !important;
}



.outlineCtaBtn{
position: relative;
    display: inline-block;
    vertical-align: middle;
    font-weight: 700;
  text-transform: uppercase;
    text-decoration: none;
    color: #333333;
    transition: all .25s;
    padding: 8px 16px;
  margin: 0px;
    border: 1px solid #333333;
    border-radius: 4;
    cursor: pointer;
    -webkit-appearance: none;
  width: fit-content;
}


.outlineCtaBtn:hover{
    color: #826994;
    border: 1px solid #826994;
  background-color: rgba(0, 0, 0, 0.04);
}



.outlineCtaBtn:before{
 content: "\f04b";
    font-family: FontAwesome;
    display: inline-block;
    float: left;
    margin-right: 8px;
    margin-top: 1px;
}




/*****************************************/
/*  Pricing Table */
/*****************************************/




/*****************************************/
/*  Shadows */
/*****************************************/
.elevation-2 {
    -webkit-box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)!important;
    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)!important;
}

.textureBg{
    background: #f9f9f9;
   background-image: url(https://cdn2.hubspot.net/hubfs/3805486/images/backgrounds/texture.png);
}






/*****************************************/
/*  Case Study Image Gallery */
/*****************************************/

.caseStudyWrapper{
  padding: 16px 32px;
}


.caseStudyBody{
width:50%;
  float: left;

}

.caseStudyImageArea{
float: right;
  padding: 8px;
  width: 50%;
}


.caseStudyLargeImage{
  padding: 0px;
  width:100%;
  max-height: 400px;
  object-fit: cover;  
}



@media screen and (max-width:769px) {
  .caseStudyWrapper{
  padding: 0px;
}


.caseStudyBody{
width:100%;
  float: left;

}

.caseStudyImageArea{
float: right;
  padding: 8px;
  width: 100%;
}


.caseStudyLargeImage{
  padding: 0px;
  width:100%;
  object-fit: cover;  
}
}


.hs_cos_gallery_main .slick-prev:before, .hs_cos_gallery_main .slick-next:before, .hs_cos_gallery_thumbnails .slick-prev:before, .hs_cos_gallery_thumbnails .slick-next:before, .hs_cos_gallery_lightbox .slick-prev:before, .hs_cos_gallery_lightbox .slick-next:before {
    color: #666666;
}
.slick-next:before {
    content: "\f054";
}


.slick-prev:before {
    content: "\f053";
}


.slick-prev:before, .slick-next:before {
    font-family: FontAwesome;
    font-size: 32px;
    line-height: 1;
    opacity: 0.75;
}



.slick-prev, .slick-next {
    position: absolute;
    display: block;
    height: 44px;
    width: 44px;
    border-radius: 22px;
    line-height: 0px;
    font-size: 0px;
    cursor: pointer;
    background: transparent;
    color: transparent;
    top: 50%;
    margin-top: -10px;
    padding: 0;
    border: none;
    outline: none;
}

.slick-next {right: 0px;}




.sliderWithoutNav > .slick-prev {
  display: none !important;
}
.sliderWithoutNav > .slick-next {
  display: none !important;
}


@media (max-width: 768px) {
 .slick-prev{
    display: none !important;
 }
   .slick-next{
    display: none !important;
 }
}


.applaudGreen{color:#75AD7F;}
.applaudRed{color:#D67073;}


/*****************************************/
/* Hero Section Alignment  */
/*****************************************/

.heroFlexContainer {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  background-color: red;
}

.heroFlexItem {
  flex: 0 0 auto;
  margin: 16px;
   background-color: green;
}




/*****************************************/
/* Hero Images  */
/*****************************************/

.parallax-hero-section {
/*height: 520px;*/
    width: 100% !important;
    background-position: top center;
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
    background-size: cover;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    -moz-align-items: center;
    align-items: center;
}

.hero-about {
    background-image: url(https://cdn2.hubspot.net/hubfs/3805486/images/about/Applaud_Solutions_Team.jpg);
}

.hero-home {
    background-image: url(https://cdn2.hubspot.net/hubfs/3805486/images/homepage/consumer_grade_technology.jpg);
}

.hero-home-tt {
    background-image: url(https://cdn2.hubspot.net/hubfs/3805486/Content%20flow%20black%20background.jpg);
  background-attachment: fixed;
    background-position: right top;
}

.empowered-workforce {
    background-image: url(https://cdn2.hubspot.net/hubfs/3805486/images/backgrounds/Build-an-empowered-self-sufficient-workforce.png);
}





.hero-integrations {
    background-image: url(https://cdn2.hubspot.net/hubfs/3805486/images/integrations/integrations-bg.jpg);
}

.hero-customers {
    background-image: url(https://cdn2.hubspot.net/hubfs/3805486/images/customers/applaud-customer-hero.jpg);
}

.hero-pricing {
    background-image: url(https://cdn2.hubspot.net/hubfs/3805486/images/pricing/applaud-solutions-pricing.jpg);
   background-size: cover;
      background-position: center center;
}

.hero-resources {
    background-image: url(https://cdn2.hubspot.net/hubfs/3805486/images/resources/Resources_hero.jpg);
}


.hero-platform {
    background-image: url(https://cdn2.hubspot.net/hubfs/3805486/images/platform/applaud-hr-platform-consumer-grade-unified-system.jpg);
  background-position: center center;
}


.hero-industryReport {
    background-image: url(https://cdn2.hubspot.net/hubfs/3805486/images/landing-pages/industry-report-background-wide.jpg);
  background-position: center center;
}





.heroTextContainer{
margin: 15% 32px;
}


@media (max-width: 768px) {
.heroTextContainer{
margin-left: 0px;
  margin-right: 0px;
}
}



.heroTextContainerResources{
margin: 8% 32px;
}


.heroTextContainerLessMargin{
margin: 32px;
}



/* Parallax hero responsive stuff */
@media (max-width: 768px){
 .parallax-hero-section {
   /* height: 300px; */
    background-size: cover;
    background-attachment: inherit;

}
}



/*****************************************/
/* Section Images  */
/*****************************************/

.section-background {
    width: 100% !important;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    -moz-align-items: center;
    align-items: center;
  padding:32px 16px;
}

.section-testimonals {
    background-image: url(https://cdn2.hubspot.net/hubfs/3805486/images/integrations/Applaud_AdvantageSolutionsBW-WEB.jpg);
  background-color: black;
}


.section-testimonals-customers {
  background-image: linear-gradient(45deg, #eae9e9 4.55%, #edf0ef 4.55%, #edf0ef 50%, #eae9e9 50%, #eae9e9 54.55%, #edf0ef 54.55%, #edf0ef 100%);
background-size: 31.11px 31.11px;
      display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    -moz-align-items: center;
    align-items: center;
  padding: 32px 16px;
  
}


.section-feature-hero {
  background-image: linear-gradient(45deg, #eae9e9 4.55%, #edf0ef 4.55%, #edf0ef 50%, #eae9e9 50%, #eae9e9 54.55%, #edf0ef 54.55%, #edf0ef 100%);
background-size: 31.11px 31.11px;
}




.section-terms-header {
background: rgb(86,86,88);
background: linear-gradient(90deg, rgba(86,86,88,1) 0%, rgba(46,44,45,1) 45%);
}



.section-terms {
  background-image: linear-gradient(45deg, #eae9e9 4.55%, #edf0ef 4.55%, #edf0ef 50%, #eae9e9 50%, #eae9e9 54.55%, #edf0ef 54.55%, #edf0ef 100%);
background-size: 31.11px 31.11px;
      display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    -moz-align-items: center;
    align-items: center;
  padding: 32px 0px;
   
}



.termsContent{
padding: 16px;
}

.termsHeaderContent{
padding: 8px;
  
     
}



@media (max-width: 768px) {
.section-terms {
  padding: 16px 8px;
  
  
}
  
  .section-terms-header{
  margin-top: 56px;
  }
  
  .termsContent{
padding: 8px;
}
  
  .termsHeaderContent{
padding: 8px;
}

}


.section-dark-angled-stripes{
  background-image: linear-gradient(45deg, #302e32 4.55%, #000000 4.55%, #000000 50%, #302e32 50%, #302e32 54.55%, #000000 54.55%, #000000 100%);
background-size: 31.11px 31.11px;
      display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    -moz-align-items: center;
    align-items: center;
  padding:32px 16px;
  
}






.section-valueAdd {
   background: #f9f9f9;
   background-image: url(https://cdn2.hubspot.net/hubfs/3805486/images/backgrounds/texture.png);
 background-position: 50% 50%; 
      background-repeat: repeat;
    background-size: inherit;
  
}


.sectionApplaudAdvantage {
   background-image: url(https://cdn2.hubspot.net/hubfs/3805486/images/platform/the-applaud-advantage-male.png);
  background-repeat: no-repeat;
    background-size: cover;
    background-position: left;
}


.sectionApplaudAdvantageTech {
   background-image: url(https://cdn2.hubspot.net/hubfs/3805486/images/platform/applaud-advantage-curl.png);
  background-repeat: no-repeat;
    background-size: cover;
    background-position: left;
}





.blackBackground{
background-color: #000000;
}


.section-blogListing{
background-color: rgb(245, 248, 250);
}



.contactFormSection {
    width: 100% !important;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url(https://cdn2.hubspot.net/hubfs/3805486/bg-contact.jpg);
    background-size: cover;

}


.sectionFeatureHighlights{
background-color: #F1F0F2;
}



.featureTextContainer{
margin: 8% 32px;
}


.landingPgFormBg{
 background-color: #f9f9f9;
}


.legal-consent-container{
font-size: 9px;

}



.section-case-study-asm {
    background-image: url(https://cdn2.hubspot.net/hubfs/3805486/case-studies/asm-bg.png);
  background-color: white;
}







.angledSection{
-webkit-clip-path: polygon(0 0,100% 3vw,100% 100%,0 calc(100% - 3vw));
    clip-path: polygon(0 0,100% 3vw,100% 100%,0 calc(100% - 3vw));
}

/*****************************************/
/* Images in  */
/*****************************************/

.advantageCardImages{
}

@media (max-width: 768px) {
  .advantageCardImages{
min-width: 100%;
    max-height: 100px;
    object-fit: cover;
}
}





/*****************************************/
/* Client Testimonials */
/*****************************************/


.client-testimonial{
text-align: center;
  color: #ffffff;
}

.client-testimonial p{
font-size: 18px;
line-height: 32px;
  padding:16px 32px;
}

.client-testimonial h4{
color: #515151;
  padding:16px 32px;
}











/*****************************************/
/* Video  */
/*****************************************/


.short-animate {
  transition: .5s ease-in-out;
}

.long-animate {
  transition: .5s .5s ease-in-out;
}

.lightbox {
  position: fixed;
  display: none;
  z-index: 888888;
  width: 100%;
  height: 100%;
  left: 0;
  background: rgba(60, 60, 60, 0.87);
  opacity: 0;
  padding: auto 25%;
  text-align: center;
}
.lightbox:target {
  top: 0%;
  display: block;
  bottom: 0%;
  opacity: 1;
}
.lightbox:target img {
  max-width: 100%;
  max-height: 100%;
}
.lightbox:target ~ #close-wrapper {
  top: 0;
}
.lightbox:target ~ #close-wrapper #close-lightbox:after {
  width: 0px;
}
.lightbox:target ~ #close-wrapper #close-lightbox:before {
  height: 0px;
}

#close-wrapper {
  position: relative;
    float: right;
    top: -42px;
    right: -8px;
    height: auto;
    width: 44px;
    z-index: 700;
    background: rgba(0, 0, 0, 0);
    font-weight: bold;
    font-size: 32px; 
}

#close-wrapper #close-lightbox {
display: block;
    position: absolute;
    overflow: hidden;
    height: 44px;
    width: 44px;
    right: 0;
    top: 0;
}

.innerContent {
display: block;
    background-color: white;
    margin: 32px auto;
    padding: 27px 4px;
    border-radius: 4px;
    width: 50%;
    height: auto;
}


video {
  width: 100%    !important;
  height: auto   !important;
}



@media (max-width: 768px) {

  
  .innerContent {
    width: 90%
}
  
  
}









/* Feature tab content container */
.highlightText {
float: left;
    width: 30%;
    padding: 12% 0px;
}

.highlightVideo {
  float: left;
  width: 70%;
  padding: 0px;
}


/* Clear floats after the columns */
.highLightContent:after {
  content: "";
  display: table;
  clear: both;
}



@media (max-width: 768px) {
.highlightText {
  float: none;
  width: 100%;
  padding: 0px;
  text-align: center;
}

.highlightVideo {
  float: none;
  width: 100%;
  padding: 0px;
  text-align: center;
}
}


/*****************************************/
/* Breadcrumb menu  */
/*****************************************/

.breadCrumbMenuBg{
background: #f1eeee;
}

.hs-breadcrumb-menu {
    font-size: smaller;
}



/*****************************************/
/* Images  */
/*****************************************/
.imgCover{ 
background-size: cover;
}

.aboutImgOne{ 
background-image: url(https://cdn2.hubspot.net/hub/3805486/hubfs/images/about/applaud_HR_iPhone.jpg);
}


.roundAvatar{
border-radius: 50%;
  border: 2px solid white;
  margin: 8px;
}

.largeNumberStatWrapper{
background-color: rgba(255, 255, 255, 0.0);
  display: block;
  text-align: center;
}

.largeNumberStatWrapper h4{
font-weight: 500;
    min-height: 72px;
}
@media (max-width: 768px) {
.largeNumberStatWrapper h4{
    min-height: 0px;
}

}


.largeNumberStatWrapperNumber{
font-size: 78px;
  font-weight: bold;
  color: #000000;
  text-align: center;
}

.largeNumberStatWrapperQuote{
font-size: 18px;
  font-weight: bold;
  color: #000000;
  text-align: center;
}



.last-crumb{
    white-space: nowrap;
    width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
}



/*****************************************/
/* Blockquotes  */
/*****************************************/

blockquote {
	position: relative;
	background: #f3f3f3;
	border-radius: .4em;
  font-size: 24px;
  font-weight: 700;
  padding: 32px;
  color: #77797B;
  -webkit-box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)!important;
    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)!important;
  display: block;
    margin-block-start: 16px;
    margin-block-end: 16px;
    margin-inline-start: 16px;
    margin-inline-end: 16px;
}

blockquote:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 16px solid transparent;
	border-top-color: #f3f3f3;
	border-bottom: 0;
	margin-left: -16px;
	margin-bottom: -16px;
}


@media (max-width: 768px) {
 blockquote {
  font-size: 18px;
  font-weight: 700;
  padding: 16px;
}
}


.blockquoteAlt{
position: relative;
    background: #f3f3f3;
    border-radius: 0px 16px 16px 0px !important;
    font-size: 24px;
    font-weight: 700;
    padding: 32px;
    color: #826993;
    -webkit-box-shadow: none !important;
  box-shadow: none !important;
    display: block;
    margin-block-start: 32px;
    margin-block-end: 32px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    width: 60%;
    border-left: 3px solid #826994;

}

.blockquoteAlt:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 5%;
    width: 0;
    height: 0;
    border: 16px solid transparent;
    border-top-color: #f3f3f3;
    border-bottom: 0;
    margin-left: -16px;
    margin-bottom: -16px;
}

@media (max-width: 768px) {
 .blockquoteAlt {
  font-size: 18px;
  font-weight: 700;
   width: 100%;
  padding: 16px;
}
}


/*****************************************/
/* Case Study Quotes  */
/*****************************************/


.blockquoteTestimonial{
position: relative;
    background: #f3f3f3;
    border-radius: 0px 8px 8px 0px !important;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 32px;
    color: #826993;
    -webkit-box-shadow: none !important;
  box-shadow: none !important;
    display: block;
    margin-block-start: 32px;
    margin-block-end: 32px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    width: 100%;

}

.blockquoteTestimonial:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 34px;
    width: 0;
    height: 0;
    border: 16px solid transparent;
    border-top-color: #f3f3f3;
    border-bottom: 0;
    margin-left: -16px;
    margin-bottom: -16px;
}

@media (max-width: 768px) {
 .blockquoteTestimonial {
  font-size: 0.8rem;
   width: 100%;
  padding: 16px;
}


  .blockquoteTestimonial{
position: relative;
    background: #f3f3f3;
    border-radius: 0px 8px 8px 0px !important;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 32px;
    color: #826993;
    -webkit-box-shadow: none !important;
  box-shadow: none !important;
    display: block;
    margin-block-start: 32px;
    margin-block-end: 32px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    width: 100%;

}

.blockquoteTestimonial:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 34px;
    width: 0;
    height: 0;
    border: 16px solid transparent;
    border-top-color: #f3f3f3;
    border-bottom: 0;
    margin-left: -16px;
    margin-bottom: -16px;
}

}
@media (max-width: 768px) {
 .blockquoteTestimonial {
  font-size: 0.8rem;
   width: 100%;
  padding: 16px;
}
  
  
}

.testimonialWrapper{
  left: 0;
  
}

.testimonialPhoto{
  display: inline-block;
  padding: 0px 8px;
  
}

.testimonialPhoto img{
  border-radius: 50%;
  border: 2px solid white;
  width: 58px;
  height: 58px;
  -webkit-box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12) !important;
    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12) !important;
  
}

.testimonialText{
  display: inline-block;
  padding: 0;
  font-size: 0.8em;
}

.testimonialText p span{
  font-weight: 700;
}

.clientASM{
  color: #154971 !important;
}

.clientNT{
  color: #4A004A !important;
}

.clientBarnardos{
  color: #8CC63E !important;
}





/*****************************************/
/* Icon boxes  */
/*****************************************/


.iconBoxWrapper{
  margin: auto;
  text-align: center;
  
}


.iconBox{
  width: 22.5%;
  margin: 0.5%;
  text-align: center;
  padding: 16px;
  display: block;
  float: left;
  min-height: 175px;
}

.iconBox p{
  font-weight: 700;
  text-align: center;
  display: block;
}
.iconBox img{
  font-weight: 700;
  text-align: center;
  display: block;
  margin: auto;
}


@media (max-width: 768px) {
 .iconBox{
     width: 48%;
  margin: 1%;
}
  

.iconBox img{
  display: block;
  margin: auto;
}
  
}




/*****************************************/
/* Tabs  */
/*****************************************/





    
    .tabs {
      position: relative;
      height: fit-content;
      min-height: 600px; /* This part sucks */
      clear: both;
      margin: 25px 0;
    }
    .tab {
      float: left;
    }
    .tab label {
      background: #eee;
      font-size: 14px;
      font-weight: 700;
      padding: 10px;
      border: 1px solid #ccc;
      margin-left: -1px;
      position: relative;
      left: 1px;
    }
    .tab [type=radio] {
      display: none;
    }
    .content {
      position: absolute;
      top: 28px;
      left: 0;
      background: white;
      right: 0;
      bottom: 0;
      padding: 20px;
      border: 1px solid #ccc;

      overflow: hidden;
    }
    .content > * {
      opacity: 0;

      -webkit-transform: translate3d(0, 0, 0);

      -webkit-transform: translateX(-100%);
      -moz-transform:    translateX(-100%);
      -ms-transform:     translateX(-100%);
      -o-transform:      translateX(-100%);

      -webkit-transition: all 0.6s ease;
      -moz-transition:    all 0.6s ease;
      -ms-transition:     all 0.6s ease;
      -o-transition:      all 0.6s ease;
    }
    [type=radio]:checked ~ label {
      background: white;
      border-bottom: 1px solid white;
      z-index: 2;
    }
    [type=radio]:checked ~ label ~ .content {
      z-index: 1;
    }
    [type=radio]:checked ~ label ~ .content > * {
      opacity: 1;

      -webkit-transform: translateX(0);
      -moz-transform:    translateX(0);
      -ms-transform:     translateX(0);
      -o-transform:      translateX(0);
    }