/* module_summary.css

    Default background is gold.
        
            For alternate colors:
            
                <div class="module_summary alt-color-1"> is teal
                
                <div class="module_summary alt-color-2"> is light gray

FYI - for this module on a navigator page, see "/new-design/css/subpage-summary.css"

*/

.module_summary {
    background-color: #F4A71C;
    margin: 60px 0;
    padding: 60px 0;
}

.module_summary.alt-color-1 {
    background-color: #ceddde;
}

.module_summary.alt-color-2 {
    background-color: #F6F8F8;
}

.module_summary .cols {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.module_summary .cols .col {
    max-width: 400px;
    width: 33.333%;
    text-align: center;
    padding: 0 30px;
    border-right: 1px solid #000000;
    display: flex;
    flex-direction: column;
    flex-flow: wrap;
}

.module_summary .cols .col.full {
    max-width: 1200px;
    width: auto;
    border-right: 0;
}

.module_summary .cols .col.full p {
    margin: 0 0 1em 0;
}

.module_summary .cols .col.full p:last-child {
    margin: 0 0 2em 0;
}

.module_summary .cols .col.last {
    border-right: 0;
}

.module_summary .header h2 {
    /*font-family: "Proxima Nova Bold", Arial, sans-serif;
    font-size: 32px;
    line-height: 32px;
    margin-bottom: 60px;*/
    color: #000000;
    /*font-size: 32.4px;
    line-height: 1.25em;*/
}

.module_summary .header h2 span {
    /*color: #000000;*/
    color: #000000;
    /*margin-bottom: 30px;*/
}

.module_summary .cols .col h3 {
    font-family: "Proxima Nova Bold", Arial, sans-serif;
    padding: 0;
    margin: 0 0 25px 0;
    /*height: 50px;*/
    font-size: 22px;
    color: #000000;
    width: 100%;
}

.module_summary .cols .col p {
    font-family: "Proxima Nova Regular", Arial, sans-serif;
    line-height: 24px;
    font-size: 18px;
    margin: 0;
    color: #000000;
    align-self: end;
    width: 100%;
}

.module_summary .cols .col a {
    font-family: "Proxima Nova", Arial, sans-serif;
    color: #014B77;
}

.module_summary .cols .col a:hover {
    color: #081F31;
}

.module_summary .button a {
    flex: none;
    margin-top: 50px;
    background-color: rgba(255,255,255,0.5);
    border: 1px solid #000000;
    color: #000000;
    min-width: 450px;
}

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

.module_summary.alt-color-2 .button a {
    border: 1px solid #007481;
    background-color: #007481;
    color: #ffffff;
}

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


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

@media only screen and (max-width: 1024px) {
    .module_summary .cols .col {
        padding: 0 20px;
    }
}

@media only screen and (max-width: 767px) {
    .module_summary .cols .col h3 {
        /*height: 75px;*/
    }
    
    .module_summary .cols .col p {
        font-size: 14px;
    }
}

@media only screen and (max-width: 640px) {
    .module_summary .cols {
        flex-direction: column;
    }
    
    .module_summary .cols .col {
        max-width: 100%;
        width: auto;
        border-right: 0;
        border-bottom: 1px solid #000;
        padding: 0;
        margin: 0 20px 26px 20px;
    }
    
    /*.module_summary.alt-color-1 .cols .col {
        border-bottom: 1px solid #84ADB1;
    }
    
    .module_summary.alt-color-2 .cols .col {
        border-bottom: 1px solid #000;
    }*/
    
    .module_summary .cols .col.last {
        border-bottom: 0;
        margin-bottom: 0;
    }
    
    .module_summary .cols .col h3 {
        /*height: 50px;*/
    }
    
    .module_summary .cols .col p {
        font-size: 18px;
        margin-bottom: 36px;
        padding: 0;
    }

    .module_summary .cols .col.last p {
        margin-bottom: 0;
    }
    
    .module_summary .button a {
        min-width: 100%;
    }
}

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