// Page
// ================================================================================
body {
    font: {
        family: $base-font-family;
        size: $base-font-size;
    }
    line-height: $base-line-height;
    color: $base-font-color;
}

a {
    color: inherit;
    text-decoration: none;

    &:focus,
    &:hover {
        color: inherit;
        text-decoration: none;
    }
}

img {
    width: 100%;
    height: auto;
}

span {
    &.yellow {
        color: $yellow;
    }

    &.blue {
        color: $blue;
    }

    &.blue-dark {
        color: $blue-dark;
    }

    &.blue-lite {
        color: $blue-lite;
    }

    &.brown {
        color: $brown;
    }
}

.wf-loading * {
    opacity: 0;
    visibility: hidden;
}

.wf-active * {
    opacity: 1;
    visibility: visible;
}

.doan {
    opacity: 0 !important;
}

.running {
    opacity: 1 !important;
}

header {
    margin: 45px 0 20px;
    padding: 30px 0;
    background: $blue;

    &:before {
        content: '';
        position: absolute;
        top: 0;
        width: 100%;
        height: 20px;
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1c88c8+0,094782+100 */
        background: #094782; /* Old browsers */
        background: -moz-linear-gradient(left, #1c88c8 0%, #094782 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(left, #1c88c8 0%,#094782 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right, #1c88c8 0%,#094782 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1c88c8', endColorstr='#094782',GradientType=1 ); /* IE6-9 */
        float: left;
    }

    p {
        margin-bottom: 0;
    }

    .logo {
        text-align: center;

        @include breakpoint($break-991) {
            width: 100%;
            margin-bottom: 30px;
        }

        img {
            max-width: 375px;

            @include breakpoint($break-991) {
                max-width: 300px;
            }
        }
    }

    .about {
        @include breakpoint($break-991) {
            width: 100%;
        }

        h1 {
            margin: 0 0 10px;
            color: $white;
        }

        p {
            line-height: 1.2;
            font-size: 18px;
            color: $white;
        }
    }
}

section {
    position: relative;
    margin-bottom: 30px;
    padding-top: 20px;
    // background: orange;

    // CCMC Through the Years
    &.years {
        padding-top: 16px;
        overflow: hidden;

        @include breakpoint($break-991) {
            padding-top: 0;
        }

        .border {
            position: relative;
            top: 30px;
            border-top: 4px dotted $blue-dark;
            z-index: 0;

            @include breakpoint($break-767) {
                top: 45px;
            }
        }

        h1 {
            position: relative;
            padding: 15px 45px;
            color: $white;
            background: $blue-dark;
            z-index: 1;

            @include breakpoint($break-767) {
                margin: {
                    left: auto;
                    right: auto;
                }
                padding: 15px;
                width: 170px;
                text-align: center;
                display: table;

                .fa {
                    display: none;
                }
            }
        }

        .timeline {
            margin-top: 45px;
            height: 560px;

            @include breakpoint($break-991) {
                height: 510px;
            }

            @include breakpoint($break-767) {
                margin-top: 25px;
                height: auto;
            }

            ul {
                position: relative;
                padding: 0;
                height: 100%;
                list-style: none;
                line-height: 1.2;
                background: {
                    image: image-url($timeline);
                    position: 0 147px;
                    repeat: no-repeat;
                    size: contain;
                }

                @include breakpoint($break-1199) {
                    background-position: 0 152px;
                }

                @include breakpoint($break-991) {
                    background-position: 0 157px;
                }

                @include breakpoint($break-767) {
                    margin: 0 auto;
                    max-width: 270px;
                    background: none;
                }
            }

            li {
                position: absolute;
                font-size: 15px;

                @include breakpoint($break-1199) {
                    font-size: 14px;
                }

                @include breakpoint($break-1199) {
                    font-size: 13px;
                }

                @include breakpoint($break-991) {
                    font-size: 12px;
                }

                @include breakpoint($break-767) {
                    position: relative;
                    top: 0 !important;
                    left: 0 !important;
                    margin-bottom: 25px;
                    width: 100% !important;
                    font-size: 15px;
                    text-align: center !important;
                }

                &:before {
                    content: '';
                    position: absolute;
                    top: 7px;
                    right: -23px;
                    width: 11px;
                    height: 11px;
                    @include border-radius(50%);

                    @include breakpoint($break-767) {
                        display: none;
                    }
                }

                &:after {
                    content: '';
                    position: absolute;
                    top: 13px;
                    right: -20px;
                    width: 4px;
                    border-right: {
                        style: dotted;
                        width: 4px;
                    }

                    @include breakpoint($break-767) {
                        display: none;
                    }
                }

                strong {
                    font-size: 22px;
                    color: $blue-dark;

                    @include breakpoint($break-1199) {
                        font-size: 20px;
                    }

                    @include breakpoint($break-991) {
                        font-size: 18px;
                    }

                    @include breakpoint($break-767) {
                        font-size: 22px;
                    }
                }

                span {
                    position: absolute;
                    width: 8px;
                    height: 8px;
                    @include border-radius(50%);
                    @include box-shadow($hor: 0, $blur: 0, $spread: 5px, $color: $white);
                    z-index: 1;

                    @include breakpoint($break-1199) {
                        @include box-shadow($hor: 0, $blur: 0, $spread: 4px, $color: $white);
                    }

                    @include breakpoint($break-991) {
                        @include box-shadow($hor: 0, $blur: 0, $spread: 3px, $color: $white);
                    }
                    
                    @include breakpoint($break-767) {
                        display: none;
                        /* top: -25px !important;
                        left: 50% !important;
                        margin-left: -6px;
                        width: 12px;
                        height: 12px; */

                        &:before {
                            display: none;
                            /* content: '';
                            position: absolute;
                            top: 4px;
                            left: 50%;
                            margin-left: -20px;
                            width: 40px;
                            border: {
                                style: dotted;
                                width: 4px 0 0;
                            } */
                        }
                    }
                }

                &.y1992 {
                    top: -4px;
                    left: 82px;
                    width: 190px;

                    @include breakpoint($break-1199) {
                        left: 71px;
                    }

                    @include breakpoint($break-991) {
                        left: 58px;
                    }

                     &:before {
                        left: -23px;
                        background: $yellow;
                    }

                    &:after {
                        left: -20px;
                        height: 162px;
                        border-color: $yellow;
                    }

                    span {
                        top: 170px;
                        left: -22px;
                        background: $yellow;

                        &:before {
                            @include breakpoint($break-767) {
                                border-color: $yellow;
                            }
                        }
                    }
                }

                &.y1993 {
                    top: 61px;
                    left: 114px;
                    width: 150px;

                    @include breakpoint($break-1199) {
                        left: 97px;
                    }

                    @include breakpoint($break-991) {
                        left: 78px;
                    }

                     &:before {
                        left: -23px;
                        background: $brown;
                    }

                    &:after {
                        left: -20px;
                        height: 97px;
                        border-color: $brown;
                    }

                    span {
                        top: 105px;
                        left: -22px;
                        background: $brown;

                        @include breakpoint($break-991) {
                            left: -22px;
                        }

                        &:before {
                            @include breakpoint($break-767) {
                                border-color: $brown;
                            }
                        }
                    }
                }

                &.y1999 {
                    top: 216px;
                    left: 48px;
                    width: 220px;
                    text-align: right;

                    @include breakpoint($break-1199) {
                        left: 18px;
                        width: 200px;
                    }

                    @include breakpoint($break-991) {
                        left: 32px;
                        width: 130px;
                    }

                    &:before {
                        background: #a9b7c7;
                    }

                    &:after {
                        top: -50px;
                        height: 63px;
                        border-color: #a9b7c7;
                    }

                    .ncca {
                        margin-top: 10px;
                        width: 70px;
                        height: auto;

                        @include breakpoint($break-1199) {
                            width: 60px;
                        }

                        @include breakpoint($break-991) {
                            width: 50px;
                        }

                        @include breakpoint($break-767) {
                            width: 80px;
                        }
                    }

                    span {
                        top: -50px;
                        left: 234px;
                        background: #a9b7c7;

                        @include breakpoint($break-1199) {
                            left: 214px;
                        }

                        @include breakpoint($break-991) {
                            left: 144px;
                        }

                        &:before {
                            @include breakpoint($break-767) {
                                border-color: #a9b7c7;
                            }
                        }
                    }
                }

                &.y2011 {
                    top: -4px;
                    left: 328px;
                    width: 320px;
                    text-align: right;

                    @include breakpoint($break-1199) {
                        left: 261px;
                        width: 270px;
                    }

                    @include breakpoint($break-991) {
                        left: 262px;
                        width: 140px;
                    }

                    &:before {
                        background: $blue-dark;
                    }

                    &:after {
                        height: 162px;
                        border-color: $blue-dark;
                    }

                    span {
                        top: 170px;
                        left: 334px;
                        background: $blue-dark;

                        @include breakpoint($break-1199) {
                            left: 284px;
                        }

                        @include breakpoint($break-991) {
                            left: 154px;
                        }

                        &:before {
                            @include breakpoint($break-767) {
                                border-color: $blue-dark;
                            }
                        }
                    }
                }

                &.y2012 {
                    top: -4px;
                    left: 715px;
                    width: 90px;

                    @include breakpoint($break-1199) {
                        left: 593px;
                    }

                    @include breakpoint($break-991) {
                        left: 458px;
                    }

                     &:before {
                        left: -23px;
                        background: #e8c88d;
                    }

                    &:after {
                        left: -20px;
                        height: 162px;
                        border-color: #e8c88d;
                    }

                    span {
                        top: 170px;
                        left: -22px;
                        background: #e8c88d;

                        &:before {
                            @include breakpoint($break-767) {
                                border-color: #e8c88d;
                            }
                        }
                    }
                }

                &.y2016a {
                    top: -34px;
                    left: 842px;
                    width: 260px;

                    @include breakpoint($break-1199) {
                        left: 697px;
                        width: 190px;
                    }

                    @include breakpoint($break-991) {
                        left: 538px;
                        width: 150px;
                    }

                     &:before {
                        left: -23px;
                        background: $blue;
                    }

                    &:after {
                        left: -20px;
                        height: 180px;
                        border-color: $blue;
                    }

                    span {
                        top: 200px;
                        left: -22px;
                        background: $blue;

                        &:before {
                            @include breakpoint($break-767) {
                                border-color: $blue;
                            }
                        }
                    }
                }

                &.y2016b {
                    top: 221px;
                    left: 401px;
                    width: 405px;
                    text-align: right;

                    @include breakpoint($break-1199) {
                        left: 381px;
                        width: 280px;
                    }

                    @include breakpoint($break-991) {
                        left: 223px;
                        width: 280px;
                    }

                    @include breakpoint($break-767) {
                        margin-top: -25px;
                    }

                    &:before {
                        background: $blue;
                    }

                    &:after {
                        top: -50px;
                        height: 63px;
                        border-color: $blue;
                    }

                    strong {
                        @include breakpoint($break-767) {
                            display: none;
                        }
                    }

                    span {
                        display: none;
                    }
                }

                &.y2017a {
                    top: 386px;
                    left: 548px;
                    width: 290px;
                    text-align: right;

                    @include breakpoint($break-1199) {
                        left: 448px;
                        width: 240px;
                    }

                    @include breakpoint($break-991) {
                        left: 293px;
                        width: 230px;
                    }

                    &:before {
                        background: $brown;
                    }

                    &:after {
                        top: -207px;
                        height: 211px;
                        border-color: $brown;
                    }

                    span {
                        top: -220px;
                        left: 304px;
                        background: $brown;

                        @include breakpoint($break-1199) {
                            left: 254px;
                        }

                        @include breakpoint($break-991) {
                            left: 244px;
                        }

                        &:before {
                            @include breakpoint($break-767) {
                                border-color: $brown;
                            }
                        }
                    }
                }

                &.y2017b {
                    top: 386px;
                    left: 873px;
                    width: 80px;

                    @include breakpoint($break-1199) {
                        left: 725px;
                        width: auto;
                    }

                    @include breakpoint($break-991) {
                        left: 558px;
                    }

                    @include breakpoint($break-767) {
                        margin-top: -25px;
                    }

                    &:before {
                        display: none;
                    }

                    &:after {
                        display: none;
                    }

                    .ccmc-25 {
                        margin-top: 10px;
                        width: 60px;
                        height: auto;

                        @include breakpoint($break-991) {
                            width: 50px;
                        }

                        @include breakpoint($break-767) {
                            width: 80px;
                        }
                    }

                    strong {
                        @include breakpoint($break-767) {
                            display: none;
                        }
                    }

                    span {
                        display: none;
                    }
                }

                &.y2018 {
                    top: 306px;
                    left: 905px;
                    width: 100px;

                    @include breakpoint($break-1199) {
                        left: 750px;
                    }

                    @include breakpoint($break-991) {
                        top: 324px;
                        left: 579px;
                    }

                    &:before {
                        left: -24px;
                        background: #a9b7c7;
                    }

                    &:after {
                        top: -127px;
                        left: -20px;
                        height: 131px;
                        border-color: #a9b7c7;

                        @include breakpoint($break-991) {
                            top: -145px;
                            height: 149px;
                        }
                    }

                    span {
                        top: -140px;
                        left: -22px;
                        background: #a9b7c7;

                        @include breakpoint($break-991) {
                            top: -158px;
                            left: -23px;
                        }

                        &:before {
                            @include breakpoint($break-767) {
                                border-color: #a9b7c7;
                            }
                        }
                    }
                }

                &.y2019 {
                    top: 57px;
                    left: 937px;
                    width: 190px;

                    @include breakpoint($break-1199) {
                        left: 776px;
                        width: 160px;
                    }

                    @include breakpoint($break-991) {
                        left: 598px;
                        width: 125px;
                    }

                     &:before {
                        left: -23px;
                        background: $blue-dark;
                    }

                    &:after {
                        left: -20px;
                        height: 88px;
                        border-color: $blue-dark;
                    }

                    span {
                        top: 109px;
                        left: -22px;
                        background: $blue-dark;

                        &:before {
                            @include breakpoint($break-767) {
                                border-color: $blue-dark;
                            }
                        }
                    }
                }

                &.y2020 {
                    top: 221px;
                    left: 969px;
                    width: 170px;

                    @include breakpoint($break-1199) {
                        left: 802px;
                        width: 140px;
                    }

                    @include breakpoint($break-991) {
                        left: 619px;
                        width: 100px;
                    }

                     &:before {
                        left: -23px;
                        background: #e8c88d;
                    }

                    &:after {
                        top: -42px;
                        left: -20px;
                        height: 47px;
                        border-color: #e8c88d;
                    }

                    span {
                        top: -55px;
                        left: -22px;
                        background: #e8c88d;

                        &:before {
                            @include breakpoint($break-767) {
                                border-color: #e8c88d;
                            }
                        }
                    }
                }
            }
        }
    }

    // CCM Growth
    &.growth {
        margin: 60px auto 50px;
        padding: 20px 50px 30px;
        width: 90%;
        border: 4px dotted $brown;

        @include breakpoint($break-1199) {
            padding: {
                left: 30px;
                right: 30px;
            }
        }

        @include breakpoint($break-767) {
            margin: 0 auto;
            padding: {
                left: 10px;
                right: 10px;
            }
        }

        @include breakpoint($break-991) {
            width: 100%;
        }

        &:before {
            content: '';
            position: absolute;
            top: -50px;
            left: -60px;
            width: 100px;
            height: 100px;
            background: {
                image: image-url($growth-chart);
                repeat: no-repeat;
                size: contain;
            }

            @include breakpoint($break-991) {
                top: -30px;
                left: -30px;
                width: 80px;
                height: 80px;
            }

            @include breakpoint($break-767) {
                top: 40px;
                left: 50%;
                margin-left: -40px;
            }
        }

        .col-sm-12 > .row {
            display: flex;
            align-items: center;

            @include breakpoint($break-991) {
                display: block;
            }
        }

        .col-sm-4,
        .col-sm-8 {
            @include breakpoint($break-991) {
                width: 100%;
            }
        }

        .col-sm-4 {
            @include breakpoint($break-767) {
                margin-top: 100px;
            }
        }

        .col-sm-8 {
            @include breakpoint($break-767) {
                padding-left: 0;
            }
        }

        h1 {
            margin: -50px auto 20px;
            padding: 15px 30px;
            color: $white;
            background: $brown;
            display: table;

            @include breakpoint($break-767) {
                padding: 15px;
            }
        }

        .ccms {
            margin-top: 10px;
            padding: 0;
            list-style: none;
            overflow: hidden;

            @include breakpoint($break-991) {
                margin: 10px auto 30px;
                display: table;
            }

            li {
                &:last-of-type {
                    .numbers {
                        position: relative;
                        top: 4px;
                        line-height: 0;
                        font: {
                            size: 24px;
                            weight: bold;
                        }
                        color: $blue;

                        @include breakpoint($break-767) {
                            top: 2px;
                            font-size: 18px;
                        }
                    }
                }
            }

            .year {
                width: 40px;
                display: inline-block;

                @include breakpoint($break-991) {
                    width: 45px;
                }
            }

            .fa {
                width: 15px;
            }

            // strong {
            //     position: relative;
            //     top: 4px;
            //     line-height: 0;
            //     font-size: 24px; 
            //     color: $blue;

            //     @include breakpoint($break-767) {
            //         top: 2px;
            //         font-size: 18px;
            //     }
            // }
        }
        
        .growth-table {
            width: 100%;

            .values {
                width: 12%;

                @include breakpoint($break-991) {
                    width: 75px;
                }

                table {
                    width: 100%;
                }

                tr {
                    &:first-of-type {
                        td:after {
                            top: 15px;
                        }
                    }

                    &:last-of-type {
                        td {
                            &:before {
                                content: '0';
                                position: absolute;
                                top: 8px;
                                right: 8px;
                            }

                            &:after {
                                display: none;
                            }
                        }
                    }
                }

                td {
                    position: relative;
                    padding: 15px 8px 0 0;
                    line-height: 1;
                    font-size: 12px;
                    text-align: right;

                    &:after {
                        content: '';
                        position: absolute;
                        top: 12px;
                        right: -15px;
                        width: 15px;
                        height: 2px;
                        background: #0f3e67;

                        @include breakpoint($break-767) {
                            right: -7px;
                            width: 5px;
                        }
                    }

                    strong {
                        font-size: 16px;
                        color: $blue;

                        @include breakpoint($break-767) {
                            font-size: 12px;
                        }
                    }
                }
            }

            .bars {
                padding: 0 5px 0 25px;
                width: 85%;
                border: {
                    color: #0f3e67;
                    style: solid;
                    width: 0 0 2px 2px
                }
                vertical-align: bottom;

                @include breakpoint($break-991) {
                    width: auto;
                }

                @include breakpoint($break-767) {
                    padding-left: 10px;
                }

                table {
                    width: 100%;
                    height: 200px;

                    td {
                        padding: 0 3px;
                        height: 100%;
                        overflow: hidden;
                        vertical-align: bottom;

                        @include breakpoint($break-767) {
                            padding: 0 2px;
                        }

                        &:last-of-type {
                            > span {
                                background: #094782 !important; /* Old browsers */
                                background: -moz-linear-gradient(left, #1c88c8 0%, #094782 100%) !important; /* FF3.6-15 */
                                background: -webkit-linear-gradient(left, #1c88c8 0%,#094782 100%) !important; /* Chrome10-25,Safari5.1-6 */
                                background: linear-gradient(to right, #1c88c8 0%,#094782 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
                                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1c88c8', endColorstr='#094782',GradientType=1) !important; /* IE6-9 */
                            }
                        }

                        > span {
                            position: relative;
                            margin: 0 auto;
                            padding: 0;
                            display: block;

                            @include breakpoint($break-767) {
                                max-width: 50px;
                            }

                            &.y2010 {
                                height: 52%;
                                background: $yellow;
                            }

                            &.y2011 {
                                height: 60%;
                                background: #e7c487;
                            }

                            &.y2012 {
                                height: 61%;
                                background: $brown;
                            }

                            &.y2013 {
                                height: 67%;
                                background: #a3b2c3;
                            }

                            &.y2014 {
                                height: 73%;
                                background: #69b3db;
                            }

                            &.y2015 {
                                height: 79%;
                                background: #0d82c4;
                            }

                            &.y2016 {
                                height: 81%;
                                background: #0a3960;
                            }

                            &.y2017 {
                                height: 85%;
                                background: $yellow;
                            }

                            &.y2018 {
                                height: 88%;
                                background: #e7c487;
                            }

                            &.y2019 {
                                height: 90%;
                                background: $brown;
                            }

                            &.y2020 {
                                height: 98%;
                                background: #a3b2c3;
                            }

                            &.y2021 {
                                height: 98%;
                                background: #69b3db;
                            }

                            &.y2022 {
                                height: 98%;
                                background: #0d82c4;
                            }                               

                            // &:before {
                            //     content: '';
                            //     position: absolute;
                            //     top: -15px;
                            //     left: -13px;
                            //     width: 75px;
                            //     height: 70px;
                            //     background: {
                            //         image: image-url($stars);
                            //         repeat: no-repeat;
                            //         size: contain;
                            //     }

                            //     @include breakpoint($break-1199) {
                            //         top: -12px;
                            //         left: -10px;
                            //         width: 60px;
                            //     }
                            // }

                            > span.year {
                                position: absolute;
                                bottom: 35px;
                                left: 0;
                                width: 100%;
                                line-height: 0;
                                font: {
                                    size: 28px;
                                    weight: bold;
                                }
                                color: $white;
                                -ms-transform: rotate(-90deg);
                                -webkit-transform: rotate(-90deg);
                                transform: rotate(-90deg);

                                @include breakpoint($break-1199) {
                                    bottom: 30px;
                                    font-size: 24px;
                                }

                                @include breakpoint($break-991) {
                                    bottom: 40px;
                                    font-size: 14px;
                                }

                                @include breakpoint($break-767) {
                                    font-size: 16px;
                                }

                                @include breakpoint($break-767) {
                                    font-size: 16px;
                                }

                                @include breakpoint($break-400) {
                                    font-size: 12px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    // The Impact of Being Board Certified
    &.impact {
        margin: {
            top: 60px;
            bottom: 40px;
        }
        padding: 30px 0 0 40px;
        background: #0f3e67;
        color: $white;

        @include breakpoint($break-991) {
            padding: 20px 20px 0;
        }

        @include breakpoint($break-767) {
            margin: 50px 0 10px;
            padding: {
                top: 60px;
                bottom: 20px;
            }
        }

        .col-sm-4 {
            @include breakpoint($break-991) {
                width: 100%;
            }
        }

        .col-sm-8 {
            @include breakpoint($break-991) {
                padding-left: 155px;
                width: 100%;
            }

            @include breakpoint($break-767) {
                padding-left: 0;
                text-align: center;
            }
        }

        .board-certified {
            img {
                position: absolute;
                top: -78px;
                left: 50%;
                margin-left: -170px;
                width: 300px;

                @include breakpoint($break-991) {
                    top: -50px;
                    left: -100px;
                    margin-left: 0;
                    width: 240px;
                }

                @include breakpoint($break-767) {
                    top: -95px;
                    left: 50%;
                    margin-left: -40px;
                    width: 80px;
                }
            }
        }

        h1 {
            margin-bottom: 10px;
            color: $white;

            @include breakpoint($break-767) {
                margin-bottom: 20px;
            }
        }

        .stats {
            overflow: hidden;
        }

        ul {
            margin-bottom: 25px;
            padding-left: 17px;
            list-style: none;
        }

        li {
            position: relative;
            margin: 3px 0;
            font: {
                size: 18px;
                weight: bold;
            }

            @include breakpoint($break-1199) {
                font-size: 16px;
            }

            @include breakpoint($break-767) {
                margin-bottom: 15px;
                line-height: 1.1;
            }

            @include icon(before, angle-d-r) {
                position: absolute;
                top: 3px;
                left: -14px;
                font-size: 12px;

                @include breakpoint($break-767) {
                    display: none;
                }
            }
        }
    }

    // Today's CCM
    &.today {
        margin-bottom: 60px;

        @include breakpoint($break-767) {
            margin-bottom: 20px;
        }

        .col-sm-3 {
            float: right;

            @include breakpoint($break-991) {
                width: 100%;
            }
        }

        .col-sm-9 {
            @include breakpoint($break-991) {
                width: 100%;
            }

            @include breakpoint($break-767) {
                text-align: center;
            }
        }

        .border {
            position: relative;
            top: 30px;
            border-top: 4px dotted $yellow;
            z-index: 0;
        }

        h1 {
            position: relative;
            padding: 15px 45px;
            color: $blue-dark;
            background: $yellow;
            z-index: 1;

            @include breakpoint($break-767) {
                margin: {
                    left: auto;
                    right: auto;
                }
                padding: 15px;
                display: table;

                .fa {
                    display: none;
                }
            }
        }

        ul {
            margin: 0;
            width: 100%;
            height: 130px;

            @include breakpoint($break-1199) {
                height: 150px;
            }

            @include breakpoint($break-767) {
                height: auto;
            }
        }

        li {
            padding: 15px 25px;
            width: 25%;
            height: 100%;
            line-height: 1.2;
            font-size: 18px;
            border-right: 4px dotted $brown;
            overflow: hidden;
            vertical-align: top;
            float: left;

            @include breakpoint($break-767) {
                margin-bottom: 15px;
                padding: 0;
                width: 100%;
                border-right: 0;
            }

            &:last-of-type {
                border-right: 0;
            }

            span {
                font-size: 20px;
            }
        }

        .light-bulb {
            margin-top: -90px;

            @include breakpoint($break-991) {
                width: 100px;
                float: right;
            }

            @include breakpoint($break-767) {
                position: relative;
                left: 50%;
                margin: 0 0 20px -40px;
                width: 80px;
                float: none;
            }
        }
    }

    // Professional Background
    &.background {
        margin-bottom: 80px;
        padding: 30px 50px 50px;
        @include linear-gradient(#f3e3c5, $white);
        overflow: hidden;

        @include breakpoint($break-991) {
            padding: {
                left: 15px;
                right: 15px;
            }
        }

        @include breakpoint($break-767) {
            margin-bottom: 0;
            padding-bottom: 0;
        }

        h1 {
            margin: 0 auto 20px;
            color: $blue-dark;
            text-align: center;
            display: table;
        }

        ul {
            margin: 0 auto;
            list-style: none;
            display: table;

            @include breakpoint($break-991) {
                // width: 100%;
            }
        }

        li {
            position: relative;
            margin: 0 50px;
            padding: {
                top: 10px;
                left: 120px;
            }
            width: auto;
            height: 100px;
            line-height: 1;
            color: $blue-dark;
            float: left;

            @include breakpoint($break-1199) {
                margin: 0 30px;
            }

            @include breakpoint($break-991) {
                margin: 0;
                // width: 33%;
            }

            @include breakpoint($break-767) {
                margin: 0 auto;
                width: 250px;
                display: block;
                float: none;
            }

            &.rns {
                height: 100px;

                @include breakpoint($break-767) {
                    height: 140px;
                }

                &:before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100px;
                    height: 130px;
                    background: {
                        image: image-url($rn-chart);
                        repeat: no-repeat;
                        size: contain;
                    }
                    display: block;

                    @include breakpoint($break-991) {
                        left: 20px;
                        width: 80px;
                    }
                }

                strong {
                    font-size: 42px;
                }

                em {
                    font: {
                        size: 28px;
                        weight: bold;
                    }
                }
            }

            &.social-workers {
                &:before {
                    background: {
                        image: image-url($social-chart);
                    }
                }
            }

            &.other {
                &:before {
                    background: {
                        image: image-url($other-chart);
                    }
                }
            }

            &.social-workers,
            &.other {
                @include breakpoint($break-767) {
                    height: 130px;
                }

                &:before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100px;
                    height: 100px;
                    background: {
                        repeat: no-repeat;
                        size: contain;
                    }
                    display: block;

                    @include breakpoint($break-991) {
                        left: 20px;
                        width: 80px;
                    }
                }

                strong {
                    font-size: 34px;
                }

                em {
                    font: {
                        size: 18px;
                        weight: bold;
                    }
                }
            }
        }
    }

    // CCMC's Continuing Education Offerings
    &.ce {
        margin: 60px auto 30px;
        padding: 20px 0;
        width: 90%;
        height: 330px;
        border: 4px dotted #0f3e67;

        @include breakpoint($break-1199) {
            height: 340px;
        }

        @include breakpoint($break-991) {
            width: 100%;
            height: 410px;
        }

        @include breakpoint($break-767) {
            margin: 70px auto 10px;
            height: auto;
        }

        h1 {
            margin: -50px auto 20px;
            padding: 15px 30px;
            color: $white;
            background: #0f3e67;
            display: table;

            @include breakpoint($break-767) {
                margin-top: -75px;
                padding: 15px;
                width: 200px;
                text-align: center;
            }
        }

        ul {
            @include breakpoint($break-767) {
                margin: 0 auto;
                width: 265px;
            }
        }

        li {
            div {
                position: absolute;
                padding: 10px;
                @include border-radius(50%);
                opacity: 0.85 !important;
                display: table;
                @include transition;

                @include breakpoint($break-767) {
                    position: inherit;
                }

                &:focus,
                &:hover {
                    opacity: 1 !important;
                    transform: scale(1.10);
                    z-index: 10;
                }

                span {
                    display: block;

                    &.circle {
                        line-height: 1.3;
                        color: $white;
                        text-align: center;
                        display: table-cell;
                        vertical-align: middle;
                    }
                }

                &.c1 {
                    top: 50px;
                    left: 0;
                    width: 180px;
                    height: 180px;
                    background: #0d3762;

                    @include breakpoint($break-1199) {
                        top: 50px;
                        left: 0;
                    }

                    @include breakpoint($break-991) {
                        top: 70px;
                        left: 0;
                    }

                    @include breakpoint($break-767) {
                        margin: 0 0 0 -10px;
                    }
                }

                &.c2 {
                    top: 30px;
                    left: 160px;
                    width: 100px;
                    height: 100px;
                    background: #cd7a2c;

                    @include breakpoint($break-1199) {
                        top: 25px;
                        left: 160px;
                    }

                    @include breakpoint($break-991) {
                        top: 20px;
                        left: 140px;
                    }

                    @include breakpoint($break-767) {
                        margin: -60px 0 0 140px;
                    }
                }

                &.c3 {
                    top: 105px;
                    left: 200px;
                    width: 150px;
                    height: 150px;
                    background: #a2b2c3;
                    z-index: 1;

                    @include breakpoint($break-1199) {
                        top: 130px;
                        left: 160px;
                    }

                    @include breakpoint($break-991) {
                        top: 185px;
                        left: 135px;
                    }

                    @include breakpoint($break-767) {
                        margin: -50px 0 0 20px;
                    }
                }

                &.c4 {
                    top: 140px;
                    left: 335px;
                    width: 180px;
                    height: 180px;
                    background: #0080c5;

                    @include breakpoint($break-1199) {
                        top: 145px;
                        left: 300px;
                    }

                    @include breakpoint($break-991) {
                        top: 180px;
                        left: 285px;
                    }

                    @include breakpoint($break-767) {
                        margin: -35px 0 0 95px;
                    }
                }

                &.c5 {
                    top: 40px;
                    left: 450px;
                    width: 140px;
                    height: 140px;
                    background: #e7c583;
                    z-index: 1;

                    @include breakpoint($break-1199) {
                        top: 30px;
                        left: 395px;
                    }

                    @include breakpoint($break-991) {
                        top: 70px;
                        left: 210px;
                    }

                    @include breakpoint($break-767) {
                        margin: -55px 0 0;
                    }
                }

                &.c6 {
                    top: 35px;
                    left: 580px;
                    width: 100px;
                    height: 100px;
                    background: #0d3762;

                    @include breakpoint($break-1199) {
                        top: 40px;
                        left: 540px;
                    }

                    @include breakpoint($break-991) {
                        top: 35px;
                        left: 335px;
                    }

                    @include breakpoint($break-767) {
                        margin: -75px 0 0 125px;
                    }
                }

                &.c7 {
                    top: 105px;
                    left: 630px;
                    width: 135px;
                    height: 135px;
                    background: #cd7a2c;
                    z-index: 1;

                    @include breakpoint($break-1199) {
                        top: 150px;
                        left: 475px;
                    }

                    @include breakpoint($break-991) {
                        top: 85px;
                        left: 410px;
                    }

                    @include breakpoint($break-767) {
                        margin: -5px 0 0 125px;
                    }
                }

                &.c8 {
                    top: 70px;
                    left: 740px;
                    width: 80px;
                    height: 80px;
                    background: #a2b2c3;

                    @include breakpoint($break-1199) {
                        top: 90px;
                        left: 635px;
                    }

                    @include breakpoint($break-991) {
                        top: 55px;
                        left: 530px;
                    }

                    @include breakpoint($break-767) {
                        margin: -160px 0 0 30px;
                    }
                }

                &.c9 {
                    top: 120px;
                    left: 775px;
                    width: 160px;
                    height: 160px;
                    background: #0d3762;
                    z-index: 1;

                    @include breakpoint($break-1199) {
                        top: 160px;
                        left: 650px;
                    }

                    @include breakpoint($break-991) {
                        top: 185px;
                        left: 480px;
                    }

                    @include breakpoint($break-767) {
                        margin: -70px 0 0 10px;
                    }
                }

                &.c10 {
                    top: 30px;
                    left: 895px;
                    width: 150px;
                    height: 150px;
                    background: #0080c5;

                    @include breakpoint($break-1199) {
                        top: 30px;
                        left: 715px;
                    }

                    @include breakpoint($break-991) {
                        top: 80px;
                        left: 590px;
                    }

                    @include breakpoint($break-767) {
                        margin: -30px 0 0 100px;
                    }
                }
            }
        }
    }

    // Connections
    &.connections {
        padding-top: 30px;
        overflow: hidden;

        @include breakpoint($break-767) {
            text-align: center;
        }

        h1 {
            margin: {
                top: 30px;
                bottom: 10px;
                left: 20px;
            }
            color: $blue-dark;

            @include breakpoint($break-767) {
                margin-left: 0;
            }
        }

        .megaphone {
            @include breakpoint($break-767) {
                margin: 0 auto;
                max-width: 200px;
            }
        }

        ul {
            margin-left: 20px;
            padding-left: 17px;
            list-style: none;

            @include breakpoint($break-767) {
                margin-left: 0;
                padding-left: 0;
            }
        }

        li {
            position: relative;

            @include breakpoint($break-767) {
                margin-bottom: 15px;
            }

            @include icon(before, angle-d-r) {
                position: absolute;
                top: 3px;
                left: -14px;
                font-size: 12px;

                @include breakpoint($break-767) {
                    display: none;
                }
            }

            a {
                color: $blue;

                &:focus,
                &:hover {
                    color: $blue-dark;
                    text-decoration: underline;
                }
            }
        }

        .source {
            margin-bottom: 0;
            padding-top: 20px;
            border-top: 4px dotted $blue;
            font-size: 14px;
        }
    }
}

footer {
    margin-top: 30px;
    width: 100%;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1c88c8+0,094782+100 */
    background: #094782; /* Old browsers */
    background: -moz-linear-gradient(left, #1c88c8 0%, #094782 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #1c88c8 0%,#094782 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #1c88c8 0%,#094782 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1c88c8', endColorstr='#094782',GradientType=1 ); /* IE6-9 */
    display: block;

    p {
        margin: 0;
        padding: 20px;
        font-size: 14px;
        text-align: center;
        color: $white;

        span {
            @include breakpoint($break-767) {
                display: block;
            }
        }
    }
}