/* module_promo.css
    
    
    Default background color is #f6f8f8;
    
    You can chose a background color based on the image you are using, then add a complementary hex-color as an inline style to the module code.
    
    Ex:
    
    <!-- promo -->
    <div class="module_promo">
        <div class="wrapper promo_covid-19 right" style="background-color: #b0c0e1;"><!-- specify background color inline, if you need a custom color; specify image alignment, if needed -->
            <div class="image promo_covid-19 right"><!-- specify image alignment, if needed -->
            </div>
            <div class="cols">
                <div class="col left">
                    <div class="header"><!-- specify text color inline on h2, if you need a custom color -->
                        <h2>Experiencing ongoing medical issues due to work-related COVID-19?</h2>
                        <h2>Workers&rsquo; compensation is with you for the long haul.</h2>
                    </div>
                    <div class="buttons">
                        <div class="button">
                            <a href="/covid-19/information-workers.jsp#long-haul">Learn More <span class="hidden">about Information for Workers</span></a>
                        </div>
                    </div>
                </div>
                <div class="col right">
                    <p>&nbsp;</p>
                </div>
            </div>
        </div>
    </div>

*/

.module_promo {
    background-color: transparent;
    margin: 60px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.module_promo .wrapper {
    /*background-color: #F4A71C;
    background-color: #ceddde;*/
    background-color: #F6F8F8;
    width: 100%;
    max-width: 1210px;
}

.module_promo .wrapper {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.module_promo .wrapper.right {
    background-position: right;
}

.module_promo .wrapper.left {
    background-position: left;
}

.module_promo .wrapper .image {
    display: none;
}

.module_promo .wrapper .cols {
    display: flex;
    flex-direction: row;
}

.module_promo .wrapper .cols .col {
    display: flex;
    flex-direction: column;
    padding: 1em;
}

.module_promo .wrapper .cols .col.left {
    width: 66.5%;
}

.module_promo .wrapper .cols .col.right {
    width: 33.5%;
}

.module_promo .wrapper .cols .col .header {
    width: 100%;
    padding: 0;
    /*text-shadow: 0 0 5px #ffffff;*/
}

.module_promo .wrapper .cols .col .header h2 {
    font-size: 250%;
    text-align: left;
    /*font-family: Arial;*/
}

.module_promo .buttons {
    justify-content: center;
    display: flex;
    flex-direction: row;
    transition: none;
    background-color: transparent;
    border: 0;
    /*margin: 28px 0 0 0;*/
    cursor: default;
    width: 100%;
    max-width: 1200px;
    padding: 0;
}

.module_promo .buttons.last {
    margin: 0;
}

.module_promo .button {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 275px;
}

.module_promo .buttons .button:hover {
    background-color: transparent;
}

.module_promo .buttons .button a {/* works for up to 3 buttons */
    margin: 0;
    background-color: rgba(255,255,255,0.5);
    border: 1px solid #000000;
    color: #000000;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

/*.module_promo .button a.buttons-3 {
    width: 33.333%;
    max-width: 33.333%;
}*/

.module_promo .buttons .button a {
    border: 1px solid #000000;
    color: #000000;
    background-color: rgba(255,255,255,0.5);
}

.module_promo .buttons .button a:hover,
.module_promo .buttons .button a:focus {
    background-color: #000000;
    color: #ffffff;
    border: 1px solid #ffffff;
}


@media only screen and (max-width: 1280px) {
    .module_promo {
        margin: 60px 20px;
    }
}

@media only screen and (max-width: 1024px) {}

@media only screen and (max-width: 767px) {
    /*.module_promo .wrapper.right {
        background-position: right;
    }

    .module_promo .wrapper.left {
        background-position: left;
    }*/

    .module_promo .wrapper .image {
        display: block;
        width: 100%;
        height: 225px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
    
    .module_promo .wrapper .image.left {
        background-position: left;
    }
    
    .module_promo .wrapper .image.right {
        background-position: right;
    }
    
    .module_promo .wrapper .cols {
        flex-direction: column;
    }

    .module_promo .wrapper .cols .col {}

    .module_promo .wrapper .cols .col.left {
        width: 100%;
    }

    .module_promo .wrapper .cols .col.right {
        display: none;
    }

    .module_promo .wrapper .cols .col .header {}

    .module_promo .wrapper .cols .col .header h2 {
        font-size: 200%;
        text-align: center;
    }
    
    .module_promo .button {
        max-width: 100%;
    }
}

@media only screen and (max-width: 640px) {}

@media only screen and (max-width: 480px) {}