/* pay attention to the @supports rule at the bottom of the stylesheet! */

/* standard styles */

ul.people-categories {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.people-categories > li {
    clear: left;
}

ul.people-list {
    list-style: none outside none;
    padding-left: 0;
    margin: 0;
}

ul.people-list li {
    float: left;
    width: 24%;
    margin: 0 1% 1% 0;

    position: relative;
    overflow: hidden;
}

ul.people-list li span.drag-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #f15a2f;
    font-size: 24px;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* purely a webkit effect... */

ul.people-list li img {
    display: block;
    width: 100%;
    height: auto;

    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);

    -webkit-transition: -webkit-filter 0.3s ease;
    transition: filter 0.3s ease;
}

ul.people-list li:hover img,
ul.people-list li:focus img {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

/* the persons name and stuff... */

ul.people-list li a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;

    opacity: 0;
    visibility: hidden;

    background: url("../common/images/transparency-fallback.4aa6dd78c273.png") repeat;
    background: rgba(255,255,255,0.75);
    width: 100%;
    height: 100%;

    -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
    -moz-transition: opacity 0.3s ease, visibility 0.3s ease;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

ul.people-list li div { /* a little trick to vertically and horizontally center the text using transforms */
    width: 100%;
    position: absolute;
    top: 20px;

    background: none;
    height: auto;
    text-align: center;
}

/* hover effects... */

ul.people-list li:hover a,
ul.people-list li:focus a {
    opacity: 1;
    visibility: visible;
    text-decoration: none;
}


/* a little trick for vertically centering the div... */

@supports (-webkit-transform: translate(0, -50%)) or
          (-moz-transform: translate(0, -50%)) or
          (-ms-transform: translate(0, -50%)) or
          (transform: translate(0, -50%)) {

    ul.people-list li div {
        top: 50%;

        -webkit-transform: translate(0, -50%);
        -moz-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        transform: translate(0, -50%);
    }

}

/* admin nav on people indx */

nav.button-group {
    clear: both;
}

/* detail viiiew */

article.object-detail h1 {
    margin-bottom: 0;
}

article.object-detail h1 + p {
    margin-top: 0;
    margin-bottom: 35px;
    color: #004767;
}

/* tesimonials */

article.object-detail ol.testimonials {
    list-style: none;
    padding: 0;
    margin: 25px 0;
}

article.object-detail ol.testimonials li {
    margin: 15px 0;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

article.object-detail ol.testimonials li blockquote {
    margin-left: 0;
    margin-right: 0;
}

/* Breadcrumb amendments */
h1 span.breadcrumbs {
    font: normal 300 24px/120% 'Source Sans Pro', 'Helvetica', 'Arial', sans-serif;
}


h1 span.breadcrumbs a {
    display: inline;
    -webkit-transition: -webkit-transform 0.3s ease;
    -moz-transition: -moz-transform 0.3s ease;
    transition: transform 0.3s ease;
}

h1 span.breadcrumbs a:hover,
h1 span.breadcrumbs a:focus {
    -webkit-transform: translate(5px, 0);
    -moz-transform: translate(5px, 0);
    transform: translate(5px, 0);

    text-decoration: none;
}



ul.people-list_new {
    list-style: none outside none;
    padding-left: 0;
    margin: 0;
}

ul.people-list_new li {
    float: left;
    width: 19%;
    margin: 0 1% 1% 0;

    position: relative;
    overflow: hidden;
}

ul.people-list_new li span.drag-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #f15a2f;
    font-size: 24px;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* purely a webkit effect... */

ul.people-list_new li img {
    display: block;
    width: 100%;
    height: auto;

    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);

    -webkit-transition: -webkit-filter 0.3s ease;
    transition: filter 0.3s ease;
}

ul.people-list_new li:hover img,
ul.people-list_new li:focus img {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

/* the persons name and stuff... */

ul.people-list_new li div { /* a little trick to vertically and horizontally center the text using transforms */
    width: 100%;
    position: absolute;
    top: 20px;

    background: none;
    height: auto;
    text-align: center;
}

/* hover effects... */

ul.people-list_new li:hover a,
ul.people-list_new li:focus a {
    opacity: 1;
    visibility: visible;
    text-decoration: none;
}

.team_list h2 { margin: 30px 0 20px 0;}
ul.people-list_new li .name { margin: 5px 0 10px 0; color: #004767; }