/***********************************************
                Table of Contents
***********************************************/
/***********************************************

    01A. General
    02B. List Grid
    03C. Doctor List Entry

***********************************************/

/************************* 01A. Lists *************************/
.grid-results {
    margin-bottom: 30px;
}

.sidebar .grid-results {
    margin-bottom: 0;
}

.sidebar .button a {
    text-transform: none;
}

.lists a {
    color: currentColor;
    text-decoration: none;
}

    .lists a:hover, .lists a:focus {
        color: #bc260d;
        text-decoration: none;
    }

.lists ul {
    -moz-column-count: 2;
    -moz-column-gap: 25px;
    -moz-column-width: 100px;
    -webkit-column-count: 2;
    -webkit-column-gap: 25px;
    -webkit-column-width: 100px;
    column-count: 2;
    column-gap: 25px;
    column-width: 100px;
    margin: auto;
    text-align: left;
}

    .lists ul li {
        font-size: 14px;
        line-height: 1.2;
        margin-bottom: 15px;
    }

@media only screen and (min-width : 500px) {
    .lists ul {
        -moz-column-count: 3;
        -moz-column-width: 200px;
        -webkit-column-count: 3;
        -webkit-column-width: 200px;
        column-count: 3;
        column-width: 200px;
    }
}

@media only screen and (min-width : 900px) {
    .lists ul {
        -moz-column-gap: 60px;
        -webkit-column-gap: 60px;
        column-gap: 60px;
    }

        .lists ul li {
            font-size: 18px;
        }
}

/************************* 02B. List Grid *************************/
[class^="list-grid"] ul {
    text-align: left;
}

    [class^="list-grid"] ul li {
        display: inline-block;
        font-size: 14px;
        margin-bottom: 13px;
        vertical-align: top;
        width: calc(100% / 2 - 7px);
    }

@media only screen and (min-width : 200px) and (max-width : 500px) {
    [class^="list-grid"] ul li:nth-of-type(2n + 1) {
        margin-right: 5px;
    }

    [class^="list-grid"] ul li:nth-of-type(2n + 2) {
        margin-left: 5px;
    }
}

@media only screen and (min-width : 500px) {
    [class^="list-grid"] ul li {
        margin-left: 5px;
        margin-right: 5px;
        width: calc(100% / 3 - 9px);
    }
}

@media only screen and (min-width : 500px) and (max-width : 750px) {
    [class^="list-grid"] ul li:nth-of-type(3n + 1) {
        margin-left: 0;
    }

    [class^="list-grid"] ul li:nth-of-type(3n + 3) {
        margin-right: 0;
    }
}

@media only screen and (min-width : 750px) {
    [class^="list-grid"] ul li {
        width: calc(100% / 4 - 10px);
    }

    .list-grid-4 ul li:nth-of-type(4n + 1) {
        margin-left: 0;
    }

    .list-grid-4 ul li:nth-of-type(4n + 4) {
        margin-right: 0;
    }
}

@media only screen and (min-width : 750px) and (max-width : 950px) {
    [class^="list-grid"] ul li:nth-of-type(4n + 1) {
        margin-left: 0;
    }

    [class^="list-grid"] ul li:nth-of-type(4n + 4) {
        margin-right: 0;
    }
}

@media only screen and (min-width : 950px) {
    .list-grid-5 ul li {
        width: calc(100% / 5 - 11px);
    }

        .list-grid-5 ul li:nth-of-type(5n + 1) {
            margin-left: 0;
        }

        .list-grid-5 ul li:nth-of-type(5n + 5) {
            margin-right: 0;
        }
}

/************************* 03C. Doctor List Entry *************************/
.entry img {
    border: 1px solid #333;
    max-height: 264px;
}

    .entry a:hover img, .entry img:focus {
        border: 1px solid #0b6666;
    }

.entry .text {
    text-align: left;
}

.entry a {
    color: currentColor;
    text-decoration: none;
}

    .entry a:hover, .entry a:focus {
        color: #0b6666;
        text-decoration: none;
    }

[class^="list-grid"] li > a {
    color: #fff;
    display: block;
    text-decoration: none;
}

[class^="list-grid"] .heading {
    background: #0b6666;
    color: #fff;
    font: 300 14px/1.4 'Roboto', "Helvetica", arial, sans-serif;
    padding: 10px;
    text-align: center;
    text-transform: uppercase;
    -webkit-transition: background .3s;
    transition: background .3s;
    width: 100%;
    z-index: 12;
}

[class^="list-grid"] li:hover .heading {
    background-color: #054b4b;
}

@media only screen and (min-width : 900px) {
    [class^="list-grid"] .heading {
        background: rgba(11,102,102,.8);
        bottom: 0;
        left: 0;
        position: absolute;
    }
}

.video-container {
    margin: 20px 0;
    max-width: 640px;
    width: 100%;
}