/* The hero image */
@font-face {
    font-family: 'BebasNeue';
    src: url('/wp-content/themes/rolaids/assets/fonts/BebasNeue-Regular.ttf');
    font-weight: normal;
}

.hero-image.desktop {
    display:none;
}


.hero-image {
    width:100%;
    min-height: 470px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.hero-image.mobile {
    background-position: unset;
}

.hero-image .carousel-item__caption {
    padding:0;
    text-align: center;
}

.hero-image .carousel-item__caption h1 {
    color: #c91766;
    font-size: 4.05em;
/*
* RWM-12: increase hero title font-size on mobile
* convert from em to vw so text will scale with screen width
* 210.7px in PSD which is 1080px wide
* 210.7px / 1080px = 19.5vw
*/
    font-size: 19.5vw;
    font-family: 'BebasNeue', sans-serif;
    font-weight: normal !important;
    letter-spacing: -0.010em;
/*
* RWM-12:
* 16px/em * 4.05em = 64.8px = 1em
* 45px / 64.8px ~= .5921
*/
    line-height: .5921;
/*
* RWM-12: 
* Change margin units from px to em to keep consistent across screen sizes.
* 16px/em * 4.05em = 64.8px = 1em
* 20px / 64.8px/em = .3086em
*
* Here's where it gets crazy.
* Because the line height is less than the font-size, the boxes don't sit right in the browser and therefore applying the top margin properly is challenging because it's not calculated from the top of the characters.
* Messing with it in the inspector, I discovered that adding padding-top of 0.125em to the h1 makes the text fit inside the box.
* But since margin is what's used everywhere for this, I added the 0.125em to the existing margin-top value.
* .3086em + .125em = .4336em
*/
    margin: .4336em 0 0 0;
    text-transform: uppercase;
    transform: scale( 1, 1.05 );
}

.hero-image .carousel-item__caption p {
    color:#ffffff;
    font-size: 2.499999em;
/**
* RWM-12: increase hero title font-size on mobile
* convert from em to vw so text will scale with screen width
* 129.79px in 1080px wide PSD
* 129.79px / 1080px ~= 12.02vw
*/
    font-size: 12.02vw;
    font-family: 'BebasNeue', sans-serif;
    letter-spacing: -0.010em;
    margin:0;
    text-transform: uppercase;
    transform: scale( 1, 1.05 );
}

.hero-image .carousel-item__caption a {
    color: #c91766;
    font-size: 0.84rem;
    font-family: Verdana, sans-serif;
}


.hero-image .carousel-item__caption .cta {
    position: relative;
    top: 32%;
    right: 27%;
}

@media screen and (min-width: 40em) {

    .hero-image {
        min-height: 500px;
    }

    .hero-image.desktop {
        display:block;
    }

    .hero-image.mobile {
        display: none!important;
        height: 0 !important;
    }
    .hero-image .carousel-item__caption {
        padding: 1rem;
        text-align: left;
        width: 80%;
        width: 80vw;
        max-width: 61em;
        top: 15%;
        right: 17%;
    }

    .hero-image .carousel-item__caption p {
        font-size: 2.496889em;
    }

    .hero-image .carousel-item__caption a {
        font-size: 1.25rem;
    }

    .hero-image .carousel-item__caption .cta {
        position: relative;
        top:15%;
        right:0;
    }
    .hero-image .carousel-item__caption h1 {
        margin: 0;
        font-size: 4.05em;
        line-height: 45px;
    }
}

@media screen and (min-width: 64em) {
    .hero-image .carousel-item__caption h1 {
        font-size: 6.4573345183em;
        margin: 0;
        line-height: 60px;
    }

    .hero-image .carousel-item__caption p {
        font-size: 3.976889em;

    }

    .hero-image .carousel-item__caption {
        top: 40%;
    }

    .hero-image .carousel-item__caption .cta {
        position: relative;
        top:15%;
        right:0;
    }

    .hero-image {
        min-height: 600px;
    }

    .hero-image .carousel-item__caption a {
        font-size: 1.25rem;
    }

}