@font-face {
    font-family: Montserrat-Bold;
    src: url('/fonts/Montserrat-Bold.ttf');
}

@font-face {
    font-family: Montserrat-ExtraLight;
    src: url('/fonts/Montserrat-ExtraLight.ttf');
}

@font-face {
    font-family: Montserrat-LightItalic;
    src: url('/fonts/Montserrat-LightItalic.ttf');
}

@font-face {
    font-family: Montserrat-SemiBold;
    src: url('/fonts/Montserrat-SemiBold.ttf');
}

@font-face {
    font-family: Montserrat-BoldItalic;
    src: url('/fonts/Montserrat-BoldItalic.ttf');
}

@font-face {
    font-family: Montserrat-ExtraLightItalic;
    src: url('/fonts/Montserrat-ExtraLightItalic.ttf');
}

@font-face {
    font-family: Montserrat-Medium;
    src: url('/fonts/Montserrat-Medium.ttf');
}

@font-face {
    font-family: Montserrat-SemiBoldItalic;
    src: url('/fonts/Montserrat-SemiBoldItalic.ttf');
}

@font-face {
    font-family: Montserrat-Black;
    src: url('/fonts/Montserrat-Black.ttf');
}

@font-face {
    font-family: Montserrat-ExtraBold;
    src: url('/fonts/Montserrat-ExtraBold.ttf');
}

@font-face {
    font-family: Montserrat-Italic;
    src: url('/fonts/Montserrat-Italic.ttf');
}

@font-face {
    font-family: Montserrat-MediumItalic;
    src: url('/fonts/Montserrat-MediumItalic.ttf');
}

@font-face {
    font-family: Montserrat-Thin;
    src: url('/fonts/Montserrat-Thin.ttf');
}

@font-face {
    font-family: Montserrat-BlackItalic;
    src: url('/fonts/Montserrat-BlackItalic.ttf');
}

@font-face {
    font-family: Montserrat-ExtraBoldItalic;
    src: url('/fonts/Montserrat-ExtraBoldItalic.ttf');
}

@font-face {
    font-family: Montserrat-Light;
    src: url('/fonts/Montserrat-Light.ttf');
}

@font-face {
    font-family: Montserrat-Regular;
    src: url('/fonts/Montserrat-Regular.ttf');
}

@font-face {
    font-family: Montserrat-ThinItalic;
    src: url('/fonts/Montserrat-ThinItalic.ttf');
}

.crystal-teal {
    color: #00637C !important;
}

.crystal-teal-bg {
    background-color: #00637C;
}

.deep-coral {
    color: #FF3857 !important;
}

.deep-coral-bg {
    background-color: #FF3857;
}

.mustard {
    color: #FFD300 !important;
}

.mustard-bg {
    background-color: #FFD300;
}

.onyx {
    color: #353839 !important;
}

.onyx-bg {
    background-color: #353839;
}

.white {
    color: #FFFFFF;
}

body {
    font-family: Montserrat-Regular;
}

.container .jumbotron {
    border-radius: 0 !important;
}

.jumbotron {
    color: white;
    background-image: url("/images/rework/HeroTopBackground.png");
    background-position: 50% 20%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    position: relative;
    top: -44px;
    max-height: 400px;
    margin-bottom: 0px;
}

.title {
    font-family: Montserrat-ExtraBoldItalic;
    line-height: 1em;
    margin-bottom: 0 !important;
    white-space: nowrap;
}

.title-button {
    font-family: Montserrat-BoldItalic;
    border-radius: 40px;
    font-size: 14px;
    margin-top: 30px;
    padding: 12px 17px;
    font-stretch: condensed;
    white-space: nowrap;
}

    .title-button:hover {
        background-color: #e38d13;
    }

@media (max-width: 580px) {
    .title {
        font-size: 25px !important;
    }
}

@media (min-width: 581px) {
    .title {
        font-size: 45px !important;
    }
}


.contentNews .row {
    padding: 10px;
}

.contentNews h1 {
    font-family: Montserrat-ExtraBoldItalic;
    font-size: 2.4em;
    margin: 0 0 34px 0;
}

.contentArticleImg {
    border: 2px solid #353839;
    border-radius: 5px;
    max-height: 200px;
}

.contentArticle {
    margin-top: 5px;
}

    .contentArticle h3 {
        font-size: 1.7em;
        line-height: 1em;
        color: #353839;
        font-family: Montserrat-ExtraBold;
    }

    .contentArticle p {
        margin: 15px auto;
        font-size: 1.3em;
        line-height: 1.2em;
        color: #353839;
    }

    .contentArticle a {
        font-size: 1.3em;
        font-family: Montserrat-ExtraBold;
        color: #353839;
        text-decoration: underline;
        -webkit-text-decoration-color: #FFD300; /* safari still uses vendor prefix */
        text-decoration-color: #FFD300;
        text-decoration-thickness: .3em;
    }

        .contentArticle a:hover {
            -webkit-text-decoration-color: #00637C; /* safari still uses vendor prefix */
            text-decoration-color: #00637C;
        }

    .contentArticle ul {
        margin: 15px auto;
        font-size: 1.3em;
        line-height: 1.5em;
        color: #353839;
    }

    .contentArticle .subLink a {
        font-size: 1.0em;
        font-family: Montserrat-Medium;
        color: #353839;
        text-decoration: underline;
        -webkit-text-decoration-color: #FFD300; /* safari still uses vendor prefix */
        text-decoration-color: #FFD300;
        text-decoration-thickness: .2em;
    }

        .contentArticle .subLink a:hover {
            -webkit-text-decoration-color: #00637C; /* safari still uses vendor prefix */
            text-decoration-color: #00637C;
        }

@media (max-width: 767px) {
    .contentArticle {
        margin-top: 10px;
    }
}

.powerbanner {
    position: relative;
    background-image: url("/images/rework/ImpactBG.png");
    background-position: 50% 20%;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 280px;
    margin: 10px 0;
    padding: 1.5em 0 0 1.2em;
}

.sidebar {
    padding: 0;
}

@media (min-width: 990px) {
    /*.sidebar {
        top: -135px;
        right: -15px;
    }*/
}

.powerbanner h3 {
    font-size: 55px;
    line-height: 1em;
    font-family: Montserrat-ExtraBoldItalic;
    margin: 30px 0 25px 10px;
}

.powerbanner p {
    font-size: 20px;
    line-height: 1em;
    font-family: Montserrat-ExtraBoldItalic;
    margin: 10px 0 10px 15px;
}

.powerbanner a {
    font-size: 16px;
    font-family: Montserrat-ExtraBoldItalic;
    line-height: 1em;
    padding: 1em 1em;
    border-radius: 40px;
    margin: 10px 5px;
}

    .powerbanner a:hover {
        background-color: #e38d13;
    }

.caphill {
    background-color: lightgray;
    width: 100%;
    aspect-ratio: 27 / 20;
    background-image: url("/images/rework/CHFI.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 3%;
    margin-bottom: 5px;
}

    .caphill .button-wrapper {
        display: flex;
        justify-content: center;
    }

    .caphill a {
        font-family: Montserrat-BoldItalic;
        border-radius: 10px;
        font-size: 16px;
        font-stretch: condensed;
        white-space: nowrap;
    }

        .caphill a:hover {
            background-color: #e38d13;
        }

.ridingmap {
    padding: 0 0 2.5em 0;
    background-color: lightgray;
    margin: 5px 0;
}

    .ridingmap .rider-sidekick {
        background-image: url("/images/rework/RiderGroupBG.png");
        background-position: 50% 20%;
        background-repeat: no-repeat;
        background-size: cover;
        height: 130px;
    }

    .ridingmap p {
        font-size: 16px;
        line-height: 1.4em;
        margin: 1.2em 2.2em;
        font-weight: 600;
    }

    .ridingmap h3 {
        font-size: 24px;
        font-family: Montserrat-ExtraBold;
        color: #353839;
        line-height: 1.2em;
        margin: 1.2em 1.5em;
    }

    .ridingmap a {
        text-decoration: underline;
        font-family: Montserrat-ExtraBold;
        font-size: 1.3em;
        margin: 1.2em 2.2em;
        -webkit-text-decoration-color: #FFD300; /* safari still uses vendor prefix */
        text-decoration-color: #FFD300;
        text-decoration-thickness: .3em;
    }

.powerreg {
    padding: 0 0 2.5em 0;
    background-color: lightgray;
    margin: 5px 0;
}

    .powerreg .powerreg-sidekick {
        background-image: url("/images/rework/DashboardBG.png");
        background-position: 50% 20%;
        background-repeat: no-repeat;
        background-size: cover;
        height: 130px;
    }

    .powerreg p {
        font-size: 16px;
        line-height: 1.4em;
        margin: 1.2em 2.2em;
        font-weight: 600;
    }

    .powerreg h3 {
        font-size: 24px;
        font-family: Montserrat-ExtraBold;
        color: #353839;
        line-height: 1.2em;
        margin: 1.2em 1.5em;
    }

    .powerreg a {
        text-decoration: underline;
        font-family: Montserrat-ExtraBold;
        font-size: 1.3em;
        margin: 1.2em 2.2em;
        -webkit-text-decoration-color: #FFD300; /* safari still uses vendor prefix */
        text-decoration-color: #FFD300;
        text-decoration-thickness: .3em;
    }

.sidebar a:hover {
    -webkit-text-decoration-color: #00637C; /* safari still uses vendor prefix */
    text-decoration-color: #00637C;
}

.riderreportbar {
    background-image: url('/images/rework/SubscribeRideReportBackground.png');
    width: auto;
    background-position: 50% 20%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 300px;
    position: relative;
    padding: 55px 0 0 70px;
    margin-top: 15px;
}

    .riderreportbar h3 {
        font-size: 28px;
        font-family: Montserrat-ExtraBoldItalic;
        line-height: 1em;
        margin-bottom: 1em !important;
        white-space: normal;
    }



    .riderreportbar h4 {
        font-size: 28px;
        font-family: Montserrat-ExtraBoldItalic;
        line-height: 1em;
        margin-bottom: 0 !important;
        white-space: normal;
        margin: 0px;
    }

@media (max-width: 580px) {
    .riderreportbar {
        padding: 35px 0 0 20px;
    }

        .riderreportbar h3 {
            font-size: 22px !important;
        }

        .riderreportbar h4 {
            font-size: 22px !important;
        }
}

.riderreportbar p {
    margin: 10px auto;
}

.riderreportbar a {
    font-family: Montserrat-BoldItalic;
    border-radius: 40px;
    font-size: 14px;
    margin-top: 20px;
    padding: 12px 17px;
    font-stretch: condensed;
    white-space: nowrap;
    background-color: #FFF;
}

    .riderreportbar a:hover {
        background-color: lightgray;
    }

.joinbar {
    background-image: url('/images/rework/JoinNowBottomCropped.jpg');
    width: auto;
    background-position: 50% 20%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 350px;
    position: relative;
    padding: 55px 0 0 70px;
    margin-top: 20px;
}

    .joinbar h3 {
        font-size: 23px;
        font-family: Montserrat-ExtraBoldItalic;
        line-height: 1em;
        margin-bottom: 0 !important;
        white-space: normal;
    }

    .joinbar p {
        font-size: 65px;
        font-family: Montserrat-ExtraBoldItalic;
        line-height: 1em;
        margin-bottom: 0 !important;
        white-space: normal;
        margin: 10px auto;
        font-weight: 900;
    }

@media (max-width: 580px) {
    .joinbar {
        padding: 35px 0 0 20px;
    }

        .joinbar p {
            font-size: 40px
        }
}

.joinbar a {
    font-family: Montserrat-BoldItalic;
    border-radius: 10px;
    font-size: 20px;
    margin-top: 20px;
    margin-left: 40px;
    padding: 12px 17px;
    font-stretch: condensed;
    white-space: nowrap;
    padding: 15px 40px;
}

    .joinbar a:hover {
        background-color: #e38d13;
    }