﻿/* leadership https://www.army.mil/info/institution/publicAffairs/chief/ */

.profile-page .paragraph, .paragraph {
    max-width: 75%
}

@media (max-width: 480px) {
    .profile-page .paragraph, .paragraph {
        max-width: 100%
    }
}

@media (min-width: 481px) and (max-width: 699px) {
    .profile-page .paragraph, .paragraph {
        max-width: 100%
    }
}

.profile-page .profile-responsive, .profile-responsive {
    max-width: 200px;
    float: right;
    margin-left: 20px;
    margin-bottom: 20px
}

.profile-page .profile-responsive .profile-image-responsive-460, .profile-responsive .profile-image-responsive-460 {
    display: none
}

.profile-page .profile-responsive .btn, .profile-responsive .btn {
    margin-bottom: 10px
}

.profile-page .profile-responsive .btn > div, .profile-responsive .btn > div {
    width: 100%
}

.profile-page .profile-responsive .profile-social-media, .profile-responsive .profile-social-media {
    width: 100%;
    height: 49px
}

.profile-page .profile-responsive .profile-social-media ul, .profile-responsive .profile-social-media ul {
    margin: 0 auto;
    width: 110px
}

.profile-page .profile-responsive .profile-social-media li, .profile-responsive .profile-social-media li {
    display: inline-block
}

.profile-page .profile-responsive .profile-social-media li:last-of-type, .profile-responsive .profile-social-media li:last-of-type {
    margin-left: 10px
}

.profile-page .profile-responsive .social-button, .profile-responsive .social-button {
    display: inline-block;
    background-color: #000;
    padding: 12px 0;
    width: 50px;
    height: 49px;
    text-align: center
}

.profile-page .profile-responsive .social-button a, .profile-responsive .social-button a {
    width: 50px;
    height: 50px;
    display: block
}

@media (max-width: 480px) {
    .profile-page .profile-responsive, .profile-responsive {
        float: none;
        margin-left: auto;
        margin-right: auto;
        max-width: 460px
    }

    .profile-page .profile-responsive .btn, .profile-responsive .btn {
        display: none
    }

    .profile-page .profile-responsive .profile-image-responsive-460, .profile-responsive .profile-image-responsive-460 {
        display: block;
        margin-bottom: 20px;
        width: 100%
    }

    .profile-page .profile-responsive .profile-image-responsive, .profile-responsive .profile-image-responsive {
        display: none
    }
}

@media (min-width: 481px) and (max-width: 699px) {
    .profile-page .profile-responsive, .profile-responsive {
        float: none;
        margin-left: auto;
        margin-right: auto;
        max-width: 460px
    }

    .profile-page .profile-responsive .btn, .profile-responsive .btn {
        display: none
    }

    .profile-page .profile-responsive .profile-image-responsive-460, .profile-responsive .profile-image-responsive-460 {
        display: block;
        margin-bottom: 20px;
        width: 100%
    }

    .profile-page .profile-responsive .profile-image-responsive, .profile-responsive .profile-image-responsive {
        display: none
    }
}

/* leadership blocks https://www.army.mil/info/institution/publicAffairs/ */
.leader-blocks {
    overflow: hidden
}

    .leader-blocks ul {
        margin-left: -15px;
        margin-right: -15px
    }

    .leader-blocks ul {
        *zoom: 1
    }

        .leader-blocks ul:before, .leader-blocks ul:after {
            content: "";
            display: table
        }

        .leader-blocks ul:after {
            clear: both
        }

        .leader-blocks ul li {
            float: left;
            padding-left: 15px;
            padding-right: 15px;
            width: 33.33333%;
            color: #fff;
            text-align: center
        }

            .leader-blocks ul li img {
                bottom: -2000px;
                margin: auto;
                position: absolute;
                top: -2000px;
                width: 100%
            }

@media (min-width: 769px) and (max-width: 992px) {
    .leader-blocks ul li a .image:before {
        background-color: #030000;
        content: '';
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 1;
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transition: opacity 0.25s ease 0s;
        transition: opacity 0.25s ease 0s
    }

    .leader-blocks ul li a:focus .image:before, .leader-blocks ul li a:hover .image:before {
        opacity: .25;
        filter: alpha(opacity=25)
    }

    .leader-blocks ul li a:focus img, .leader-blocks ul li a:hover img {
        filter: grayscale(75%);
        -webkit-filter: grayscale(75%)
    }
}

@media (min-width: 993px) and (max-width: 1155px) {
    .leader-blocks ul li a .image:before {
        background-color: #030000;
        content: '';
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 1;
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transition: opacity 0.25s ease 0s;
        transition: opacity 0.25s ease 0s
    }

    .leader-blocks ul li a:focus .image:before, .leader-blocks ul li a:hover .image:before {
        opacity: .25;
        filter: alpha(opacity=25)
    }

    .leader-blocks ul li a:focus img, .leader-blocks ul li a:hover img {
        filter: grayscale(75%);
        -webkit-filter: grayscale(75%)
    }
}

@media (min-width: 1156px) and (max-width: 1210px) {
    .leader-blocks ul li a .image:before {
        background-color: #030000;
        content: '';
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 1;
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transition: opacity 0.25s ease 0s;
        transition: opacity 0.25s ease 0s
    }

    .leader-blocks ul li a:focus .image:before, .leader-blocks ul li a:hover .image:before {
        opacity: .25;
        filter: alpha(opacity=25)
    }

    .leader-blocks ul li a:focus img, .leader-blocks ul li a:hover img {
        filter: grayscale(75%);
        -webkit-filter: grayscale(75%)
    }
}

@media (min-width: 1211px) and (max-width: 1600px) {
    .leader-blocks ul li a .image:before {
        background-color: #030000;
        content: '';
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 1;
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transition: opacity 0.25s ease 0s;
        transition: opacity 0.25s ease 0s
    }

    .leader-blocks ul li a:focus .image:before, .leader-blocks ul li a:hover .image:before {
        opacity: .25;
        filter: alpha(opacity=25)
    }

    .leader-blocks ul li a:focus img, .leader-blocks ul li a:hover img {
        filter: grayscale(75%);
        -webkit-filter: grayscale(75%)
    }
}

@media (min-width: 1601px) {
    .leader-blocks ul li a .image:before {
        background-color: #030000;
        content: '';
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 1;
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-transition: opacity 0.25s ease 0s;
        transition: opacity 0.25s ease 0s
    }

    .leader-blocks ul li a:focus .image:before, .leader-blocks ul li a:hover .image:before {
        opacity: .25;
        filter: alpha(opacity=25)
    }

    .leader-blocks ul li a:focus img, .leader-blocks ul li a:hover img {
        filter: grayscale(75%);
        -webkit-filter: grayscale(75%)
    }
}

.leader-blocks ul li a {
    display: block;
    margin: 0 auto;
    max-width: 270px
}

    .leader-blocks ul li a:hover {
        text-decoration: none
    }

    .leader-blocks ul li a .image {
        display: block;
        margin: auto;
        overflow: hidden;
        padding: 100% 0 0;
        position: relative;
        width: 74%
    }

        .leader-blocks ul li a .image:before {
            height: 89%
        }

        .leader-blocks ul li a .image img {
            bottom: auto;
            top: -10px;
            left: 0;
            right: 0;
            width: auto;
            max-width: 100%
        }

    .leader-blocks ul li a .title {
        font: 400 0.875em "Overpass",sans-serif;
        margin: 17px 0 0;
        text-transform: uppercase;
        display: block
    }

    .leader-blocks ul li a .name {
        font: 700 1.25em "Overpass",sans-serif;
        display: block
    }

@media (min-width: 769px) and (max-width: 992px) {
    .leader-blocks ul li a:hover .title:after, .leader-blocks ul li a:focus .title:after {
        width: 100%
    }
}

@media (min-width: 993px) and (max-width: 1155px) {
    .leader-blocks ul li a:hover .title:after, .leader-blocks ul li a:focus .title:after {
        width: 100%
    }
}

@media (min-width: 1156px) and (max-width: 1210px) {
    .leader-blocks ul li a:hover .title:after, .leader-blocks ul li a:focus .title:after {
        width: 100%
    }
}

@media (min-width: 1211px) and (max-width: 1600px) {
    .leader-blocks ul li a:hover .title:after, .leader-blocks ul li a:focus .title:after {
        width: 100%
    }
}

@media (min-width: 1601px) {
    .leader-blocks ul li a:hover .title:after, .leader-blocks ul li a:focus .title:after {
        width: 100%
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    .leader-blocks ul li {
        float: left;
        padding-left: 15px;
        padding-right: 15px;
        width: 50%;
        margin-bottom: 30px
    }

        .leader-blocks ul li:nth-child(3n), .leader-blocks ul li:last-child {
            margin-bottom: 0
        }

        .leader-blocks ul li:nth-child(3) {
            clear: both
        }
}

@media (min-width: 700px) and (max-width: 768px) {
    .leader-blocks ul li {
        float: left;
        padding-left: 15px;
        padding-right: 15px;
        width: 50%;
        margin-bottom: 30px
    }

        .leader-blocks ul li:nth-child(3n), .leader-blocks ul li:last-child {
            margin-bottom: 0
        }

        .leader-blocks ul li:nth-child(3) {
            clear: both
        }
}

@media (min-width: 481px) and (max-width: 699px) {
    .leader-blocks ul li {
        float: left;
        padding-left: 15px;
        padding-right: 15px;
        width: 50%;
        margin-bottom: 30px
    }

        .leader-blocks ul li:nth-child(3n), .leader-blocks ul li:last-child {
            margin-bottom: 0
        }

        .leader-blocks ul li:nth-child(3) {
            clear: both
        }
}

@media (min-width: 700px) and (max-width: 768px) {
    .leader-blocks ul li {
        min-height: 325px
    }
}

@media (max-width: 480px) {
    .leader-blocks ul li {
        float: left;
        padding-left: 15px;
        padding-right: 15px;
        width: 100%;
        margin-bottom: 30px
    }

        .leader-blocks ul li:last-child {
            margin-bottom: 0
        }
}

@media (min-width: 769px) and (max-width: 992px) {
    .leader-blocks ul li .image {
        padding: 88% 0 0;
        width: 74%
    }
}

@media (min-width: 700px) and (max-width: 768px) {
    .leader-blocks ul li .image {
        padding: 88% 0 0;
        width: 74%
    }
}

@media (min-width: 481px) and (max-width: 699px) {
    .leader-blocks ul li .image {
        padding: 88% 0 0;
        width: 74%
    }
}

@media (max-width: 480px) {
    .leader-blocks ul li .image {
        padding: 88% 0 0;
        width: 74%
    }
}

@media (max-width: 480px) {
    .leader-blocks {
        margin: 0 auto;
        max-width: 350px
    }
}

/*added*/ 
.leadership h2 {
    margin-bottom: 0;
}

.leadership h4 {
    margin-top: 0;
}