@keyframes marquee {
    0% {
        transform: translate(0,0)
    }

    to {
        transform: translate(-100%,0)
    }
}

@font-face {
    font-family: Roboto-Regular-amp;
    src: url(../../../../wp-content/themes/thebetterindia/build/fonts/Roboto-Regular.eot);
    src: url(/wp-content/themes/thebetterindia/build/fonts/Roboto-Regular.eot?#iefix) format("embedded-opentype"),url(/wp-content/themes/thebetterindia/build/fonts/Roboto-Regular.woff2) format("woff2"),url(/wp-content/themes/thebetterindia/build/fonts/Roboto-Regular.woff) format("woff"),url(/wp-content/themes/thebetterindia/build/fonts/Roboto-Regular.ttf) format("truetype"),url(/wp-content/themes/thebetterindia/build/fonts/Roboto-Regular.svg#Roboto-Regular) format("svg");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Poppins-Regular-amp;
    src: url(../../../../wp-content/themes/thebetterindia/build/fonts/Poppins-Regular.eot);
    src: url(/wp-content/themes/thebetterindia/build/fonts/Poppins-Regular.eot?#iefix) format("embedded-opentype"),url(/wp-content/themes/thebetterindia/build/fonts/Poppins-Regular.woff2) format("woff2"),url(/wp-content/themes/thebetterindia/build/fonts/Poppins-Regular.woff) format("woff"),url(/wp-content/themes/thebetterindia/build/fonts/Poppins-Regular.ttf) format("truetype"),url(/wp-content/themes/thebetterindia/build/fonts/Poppins-Regular.svg#Poppins-Regular) format("svg");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

.h1, h1 {
    margin: 0;
    font-family: Roboto-Bold,sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.5;
    color: #555
}

@media screen and (min-width:576px) {
    .h1, h1 {
        font-size: 3.2rem
    }
}

@media screen and (min-width:1024px) {
    .h1, h1 {
        font-size: 3.4rem
    }
}

@media screen and (min-width:1280px) {
    .h1, h1 {
        font-size: 3.7rem
    }
}

.h2, h2 {
    margin: 0;
    margin-bottom: 1rem;
    font-family: Roboto-Bold,sans-serif;
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.2;
    color: #555
}

@media screen and (min-width:576px) {
    .h2, h2 {
        font-size: 3rem
    }
}

@media screen and (min-width:1024px) {
    .h2, h2 {
        font-size: 3.2rem
    }
}

@media screen and (min-width:1600px) {
    .h2, h2 {
        font-size: 3.5rem
    }
}

.h3, h3 {
    margin: 0;
    margin-bottom: 1rem;
    font-family: Roboto-Bold,sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.2;
    color: #555
}

@media screen and (min-width:576px) {
    .h3, h3 {
        font-size: 2.8rem
    }
}

@media screen and (min-width:1024px) {
    .h3, h3 {
        font-size: 3rem
    }
}

@media screen and (min-width:1600px) {
    .h3, h3 {
        font-size: 3.3rem
    }
}

.h4, h4 {
    margin: 0;
    margin-bottom: 1rem;
    font-family: Roboto-Bold,sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.2;
    color: #555
}

@media screen and (min-width:576px) {
    .h4, h4 {
        font-size: 2.6rem
    }
}

@media screen and (min-width:1024px) {
    .h4, h4 {
        font-size: 2.8rem
    }
}

@media screen and (min-width:1600px) {
    .h4, h4 {
        font-size: 3.1rem
    }
}

.h5, .vspl__section--contect-box h2, h5 {
    font-family: Roboto-Bold,sans-serif;
    font-size: 2rem;
    line-height: normal;
    color: #555
}

@media screen and (min-width:576px) {
    .h5, h5 {
        font-size: 2.4rem
    }
}

@media screen and (min-width:1024px) {
    .h5, h5 {
        font-size: 2.6rem
    }
}

@media screen and (min-width:1600px) {
    .h5, h5 {
        font-size: 2.9rem
    }
}

.h6, h6 {
    margin: 0;
    margin-bottom: 1rem;
    font-family: Roboto-Bold,sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.2;
    color: #555
}

@media screen and (min-width:576px) {
    .h6, h6 {
        font-size: 2.2rem
    }
}

@media screen and (min-width:1024px) {
    .h6, h6 {
        font-size: 2.4rem
    }
}

@media screen and (min-width:1600px) {
    .h6, h6 {
        font-size: 2.7rem
    }
}

.h7 {
    margin: 0;
    margin-bottom: 1rem;
    font-family: Roboto-Bold,sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    color: #555
}

@media screen and (min-width:576px) {
    .h7 {
        font-size: 2rem
    }
}

@media screen and (min-width:1024px) {
    .h7 {
        font-size: 2.4rem
    }
}

@media screen and (min-width:1600px) {
    .h7 {
        font-size: 2.8rem
    }
}

.para, p {
    margin: 0 0 10px;
    font-family: Poppins-Regular,sans-serif;
    font-size: 1.5rem;
    line-height: 1.6;
    color: #555
}

@media screen and (min-width:1600px) {
    .para, p {
        font-size: 1.8rem;
        line-height: 1.8
    }
}

.label, .small-font-style {
    font-family: Poppins-Regular,sans-serif;
    font-size: 1.4rem;
    line-height: 1.3
}

.label {
    font-weight: 700;
    color: #fff
}

.small-font-style {
    color: #555
}

@media screen and (min-width:1600px) {
    .small-font-style {
        font-size: 1.5rem
    }
}

.small {
    width: 100%;
    margin-top: 5px;
    display: block;
    font-size: .8rem;
    line-height: 1.2
}

@media screen and (min-width:1024px) {
    .small {
        font-size: 1.2rem
    }
}

.h-100 {
    height: 100%
}

.w-100 {
    width: 100%
}

.vspl__section .vspl__hero--carousel--item--img {
    min-height: 170px
}

@media screen and (min-width:768px) {
    .vspl__section .vspl__hero--carousel--item--img {
        min-height: 500px
    }
}

.vspl__section--contect-box h2 {
    margin-bottom: 2rem;
    padding-right: 1rem;
    font-family: Roboto-Medium,sans-serif;
    color: #004697;
    text-transform: uppercase
}

@media screen and (min-width:576px) {
    .vspl__section--contect-box h2 {
        font-size: 2.4rem
    }
}

@media screen and (min-width:1024px) {
    .vspl__section--contect-box h2 {
        font-size: 2.6rem
    }
}

@media screen and (min-width:1600px) {
    .vspl__section--contect-box h2 {
        font-size: 2.9rem
    }
}

.vspl__section--contect-box .content-box {
    padding-top: 30px;
    border-top: 2px dashed #f2f2f2
}

    .vspl__section--contect-box .content-box a {
        font-family: Roboto-Bold,sans-serif
    }

.vspl__section--story-hero-banner {
    min-height: 240px
}

@media screen and (min-width:1024px) {
    .vspl__section--story-hero-banner {
        min-height: 550px
    }
}

.vspl__section--story-hero-banner--story figure img {
    height: auto
}

.vspl__section--story-hero-banner--story figure figcaption {
    padding: 0 3% 1%;
    bottom: 0;
    left: 0;
    z-index: 1
}

@media screen and (min-width:768px) {
    .vspl__section--story-hero-banner--story figure figcaption {
        padding: 0 10% 1%;
        bottom: 10%
    }
}

.vspl__section--story-hero-banner--story figure figcaption h2 {
    padding: 5px 3px 5px 0;
    box-shadow: -5px 0 0 #fff;
    background-color: #fff;
    font-family: Poppins-Medium,sans-serif;
    font-size: 1.5rem;
    line-height: 3.2rem;
    white-space: pre-wrap;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

@media screen and (min-width:1024px) {
    .vspl__section--story-hero-banner--story figure figcaption h2 {
        font-size: 3rem;
        line-height: 5.8rem
    }
}

.vspl__campaign--ad-marquee {
    white-space: nowrap
}

.vspl__campaign--ad-marquee-text {
    padding: 1rem 0 1rem 100%;
    font-family: Poppins-Medium,sans-serif;
    animation: marquee 26s linear infinite
}

    .vspl__campaign--ad-marquee-text:hover {
        animation-play-state: paused
    }

.vspl__campaign--ad-marquee-text--cta {
    margin-left: .5rem;
    padding: .4rem 1rem;
    font-family: Poppins-Regular,sans-serif;
    line-height: 1.6
}

.vspl__case-study figcaption {
    min-height: 120px
}

.vspl__case-study--logo {
    max-height: 40px
}

.vspl__case-study--logo--img {
    width: auto !important;
    height: 100% !important;
    max-height: 45px !important;
    margin-left: auto;
    border-top-right-radius: 0 !important
}

.vspl__editors-pick figcaption h3, .vspl__editors-pick figcaption p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.vspl__editors-pick figcaption p {
    min-height: 90px
}

#tbi_impact figcaption h3, #vspl__awardscamp figcaption h3, #vspl__deep-dive figcaption h3, .vspl__bettermentor figcaption h3 {
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

@media screen and (min-width:768px) {
    #tbi_impact figcaption h3, #vspl__awardscamp figcaption h3, #vspl__deep-dive figcaption h3, .vspl__bettermentor figcaption h3 {
        -webkit-line-clamp: 1
    }
}

.vspl__dd-item {
    width: 100%;
    border-top-right-radius: 1.5rem;
    display: block;
    box-shadow: 0 3px 6px 0 rgba(0,0,0,.16);
    background-color: #004697;
    transition: all .1s ease-in-out 0s;
    scroll-snap-align: center
}

    .vspl__dd-item img {
        min-height: 175px;
        border-top-right-radius: 1.5rem
    }

    .vspl__dd-item figcaption {
        padding: 1rem
    }

        .vspl__dd-item figcaption .vspl__label {
            color: #fff
        }

.vspl__awards .slick-arrow {
    display: none !important
}

.vspl__awards .slick-list {
    padding: 0 10% 0 .1rem
}

.vspl__awards--item {
    padding-left: 0 !important
}

.vspl__hero--carousel--item {
    min-width: 100%;
    margin-right: 1rem
}

@media screen and (min-width:768px) {
    .vspl__hero--carousel--item {
        margin-right: 2rem !important
    }
}

.vspl__hero--carousel--item.slick-slide {
    min-width: unset
}