.page-node-type-our-people {
    color: #000;
}
/*people listing*/
.people-title {
    margin-top: 68px;
    color: #000;
}
.people-title h1 {
    position: relative;
    font-family: 'Roboto', sans-serif;
    font-size: 40px;
    font-weight: 300;
    margin: 24px 0;

}
.people-title h1:before {
    content: '';
    display: block;
    width: 32px;
    height: 2px;
    background: #E22429;
    position: absolute;
    top: -25px;
    left: 0;
    transition: all 2s;
}
.loading .people-title h1:before {
    width: 0;
    transition: all 2s;
}
.people-title p {
    font-family: 'open sans', 'sans-serif';
    font-size: 16px;
    font-weight: 300;
}
.people-cont {
    margin-top: 280px;
}
.people-l-w {
    background: #f6f6f6;
    font-size: 0;
    padding-left: calc((100vw - 1240px) / 2);
    padding-right: calc((100vw - 1240px) / 2);
}
.people-l {
    margin-top: -200px;
    display: inline-block;
}
.people-l-block {
    display: inline-block;
    width: 320px;
    margin-left: 128px;
    margin-bottom: 96px;
    text-decoration: none !important;
}
.people-l-block:nth-child(4n), .people-l-block:first-child {
    margin-left: 0;
}
.people-l-img {
    display: block;
    width: 320px;
    height: 400px;
    overflow: hidden;
}

.people-l-name {
    display: inline-block;
    position: relative;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 28px;
    margin-top: 24px;
    margin-bottom: 8px;
    color: #000;
}
.people-red-line {
    display: inline-block;
    height: 1px;
    background: #E22429;
    position: absolute;
    top: 50%;
    left: 100%;
    margin-left: 25px;
    width: 0;
    -webkit-transition: width 3s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -moz-transition: width 3s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -ms-transition: width 3s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -o-transition: width 3s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    transition: width 3s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
}
.people-d-name .people-red-line {
    -webkit-transition: width 1s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -moz-transition: width 1s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -ms-transition: width 1s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -o-transition: width 1s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    transition: width 1s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
}
.animate-in .people-red-line {
    width: 56px;
}
.people-l-title {
    font-family: 'open sans', 'sans-serif';
    font-weight: 300;
    font-size: 14px;
    color: #000;
}
.people-l-title p {
    font-family: 'open sans', 'sans-serif';
    font-weight: 300;
    font-size: 14px;
    color: #000;
    margin: 0;
    display: inline-block;
}
/*people detail*/

.people-d {
    display: block;
    float: right;
    position: relative;
    width: 77.77777778%;
    padding: 80px 100px 80px 316px;
    padding-right: calc((100vw - 1240px) / 2);
    font-family: 'open sans', 'sans-serif';
    font-weight: 300;
    font-size: 16px;
}

.people-d-name {
    position: relative;
    display: inline-block;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 28px;
    margin-right: 105px;
    vertical-align: middle;
    z-index: 99;
}
.people-d-title {
    position: relative;
    display: inline-block;
    font-family: 'open sans', 'sans-serif';
    font-weight: 300;
    font-size: 14px;
    vertical-align: middle;
    z-index: 99;
}
.people-d-title p {
    display: inline-block;
    margin: 0;
}
.people-d-content {
    position: relative;
    margin-top: 24px;
    z-index: 99;
    max-width: 728px;
}
.people-d-content p {
    line-height: 28px;
}
.people-d-content img {
    position: relative;
    width: 100%;
}

.people-d-cont {
    position: relative;
    margin-top: 144px;
    margin-bottom: 80px;
}
.people-d-bg {
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FCF7F1;
}
.people-d-img {
    position: absolute;
    top: -104px;
    left: -196px;
    width: 440px;
    height: 600px;
    z-index: 999;
}
.people-d-img img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}
.people-d-content-img {
    margin-bottom: 24px;
    position: relative;
    z-index: 99;
}
.other-people-cont {
    padding-left: calc((100vw - 1240px) / 2);
    padding-right: calc((100vw - 1240px) / 2);
}
.view-other-people.view-id-other_people .view-content {
    font-size: 0;
}
.view-other-people.view-id-other_people .view-content > div {
    display: inline-block;
    width: 244px;
}
.people-o-block {
    display: block;
    position: relative;
    width: 232px;
    height: 232px;
    overflow: hidden;
}
.people-o-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.people-o-img img {
    width: 100%;
}
.people-o-detail {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(159, 146, 124, .7);
    color: #fff;
    text-align: center;
    padding-top: 93px;
    padding-left: 15px;
    padding-right: 14px;
}
.people-o-name {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 22px;
    line-height: 25px;
    margin-bottom: 8px;
}

.people-o-title {
    font-family: 'open sans', 'sans-serif';
    font-weight: 300;
    font-size: 14px;
}

.people-o-title p {
    font-family: 'open sans', 'sans-serif';
    font-weight: 300;
    font-size: 14px;
    margin: 0;
    line-height: 18px;
}
.people-o-block:hover .people-o-detail, .people-o-block:focus .people-o-detail {
    opacity: 1;
}
.other-people-title {
    position: relative;
    font-size: 32px;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    margin-bottom: 32px;
    color: #000;
}
.other-people-title:before {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: #E22429;
    position: absolute;
    top: -25px;
    left: 0;
    transition: all 2s;
}
/*responsive*/
.desktop-only {
    display: block;
}
.mobile-only {
    display: none;
}
.tablet-only {
    display: none;
}
@media screen and (max-width: 1440px) and (min-width: 993px) {
    .people-d {
        padding-right: 100px;
    }
}
@media screen and (max-width: 1250px) {
    .path-people .basic-text-container {
        padding-left: calc((100vw - 784px) / 2);
        padding-right: calc((100vw - 784px) / 2);
    }
    .people-l-w {
        padding-left: calc((100vw - 784px) / 2);
        padding-right: calc((100vw - 784px) / 2);
    }
    .other-people-cont {
        margin: 0 48px;
    }
    .people-l-block {
        margin-left: 0;
    }
    .people-l-block:nth-child(2n) {
        margin-left: 128px;
    }
}


@media screen and (max-width: 992px) {
    .people-cont {
        margin-top: 160px;
    }
    .people-title {
        margin-top: 50px;
    }
    .path-people .basic-text-container {
        padding-top: 0;
        padding-bottom: 0;
    }
    .people-title h1 {
        font-size: 32px;
    }
    .people-title h1:before {
        width: 40px;
        top: -16px;
    }
    .people-l-name {
        font-size: 24px;
    }
    .people-red-line {
        margin-left: 16px;
    }
    .animate-in .people-red-line {
        width: 40px;
    }
    .people-l {
        margin-top: -128px;
    }
    .people-l-img {
        height: 256px;
    }
    .people-l-block {
        margin-bottom: 48px;
    }
    .people-l-block:nth-child(2n) {
        margin-left: 26px;
    }
    .path-people .basic-text-container {
        padding-left: calc((100vw - 682px) / 2);
        padding-right: calc((100vw - 682px) / 2);
    }
    .people-l-w {
        padding-left: calc((100vw - 682px) / 2);
        padding-right: calc((100vw - 682px) / 2);
    }
    .desktop-only {
        display: none;
    }
    .mobile-only {
        display: block;
    }
    .people-d-img .mobile-only {
        display: none;
    }
    .people-d-img .tablet-only {
        display: block;
    }
    .people-d-cont {
        margin-top: 128px;
    }
    .people-d {
        width: calc(100% - 48px);
        padding: 144px 48px 48px 48px;
    }
    .people-d-img {
        position: absolute;
        top: -128px;
        left: -48px;
        width: 440px;
        height: 240px;
    }
    .people-d-name {
        font-size: 24px;
        margin-right: 72px;
    }
    .people-d-title {
        font-size: 14px;
    }

    .people-o-block {
        width: 188px;
        height: 188px;
    }
    .other-people-title {
        font-size: 28px;
        margin-bottom: 24px;
    }
    .other-people-cont {
        margin: 0 48px;
    }
    .view-other-people.view-id-other_people .view-content {
        max-width: 620px;
        margin: 24px 0;
    }
    .view-other-people.view-id-other_people .view-content > div {
        display: inline-block;
        width: 188px;
        margin-right: 16px;
        margin-bottom: 16px;
    }
}

@media screen and (max-width: 767px) {
    .people-title h1 {
        font-size: 28px;
    }
    .people-title p {
        font-size: 14px;
    }
    .people-title {
        margin-top: 42px;
        padding: 0 24px;
    }
    .people-title h1 {
        font-size: 28px;
    }
    .people-l {
        width: 100%;
    }
    .people-l-img {
        width: 100%;
        height: auto;
    }
    .people-l-img img {
        width: 100%;
    }
    .people-l-block {
        display: block;
        margin: 0 auto 56px !important;
        padding: 0 24px;
        width: 100%;
    }
    .path-people .basic-text-container, .people-l-w {
        padding: 0;
    }
    .people-d-img .mobile-only {
        display: block;
    }
    .people-d-img .tablet-only {
        display: none;
    }
    .people-d {
        width: 100%;
        padding: 120px 24px 48px;
    }
    .people-d-cont {
        margin-top: 120px;
    }
    .people-d-title {
        display: block;
        margin-top: 8px;
    }
    .people-d-img {
        width: 351px;
        height: 216px;
        top: -120px;
        left: 0px;
    }
    .other-people-cont {
        margin: 0 24px;
    }
    .people-o-block {
        width: 100%;
        padding-top: 100%;
        height: auto;
    }
    .view-other-people.view-id-other_people .view-content > div {
        margin-right: 15px;
        margin-bottom: 15px;
        width: calc(50% - 17px);
        font-size: 0;
    }
    .people-o-detail > div {
        display: none;
    }
    .people-d-content-img {
        width: calc(100% + 24px);
    }
}

/*animation*/

.people-title {
    -webkit-transition: transform 1s ease-in-out 0.2s, opacity 1s ease-in-out 0.2s;
    -moz-transition: transform 1s ease-in-out 0.2s, opacity 1s ease-in-out 0.2s;
    -ms-transition: transform 1s ease-in-out 0.2s, opacity 1s ease-in-out 0.2s;
    -o-transition: transform 1s ease-in-out 0.2s, opacity 1s ease-in-out 0.2s;
    transition: transform 1s ease-in-out 0.2s, opacity 1s ease-in-out 0.2s;
    transform: translateY(30%);
    opacity: 0;
}
.people-title.animate-in {
    transform: translateY(0);
    opacity: 1;
}
.people-l-block {
    -webkit-transition: transform 1.3s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -moz-transition: transform 1.3s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -ms-transition: transform 1.3s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -o-transition: transform 1.3s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    transition: transform 1.3s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    transform: translateY(50%);
    opacity: 0;
}
.people-l-block:nth-child(2n) {
    -webkit-transition: transform 1.5s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -moz-transition: transform 1.5s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -ms-transition: transform 1.5s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -o-transition: transform 1.5s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    transition: transform 1.5s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    transform: translateY(60%);
    opacity: 0;
}
.people-l-block:nth-child(3n) {
    -webkit-transition: transform 1.8s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -moz-transition: transform 1.8s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -ms-transition: transform 1.8s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -o-transition: transform 1.8s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    transition: transform 1.8s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    transform: translateY(70%);
    opacity: 0;
}
.people-l-block:nth-child(4n) {
    -webkit-transition: transform 1.3s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -moz-transition: transform 1.3s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -ms-transition: transform 1.3s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -o-transition: transform 1.3s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    transition: transform 1.3s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    transform: translateY(50%);
    opacity: 0;
}
.people-l-block:nth-child(5n) {
    -webkit-transition: transform 1.5s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -moz-transition: transform 1.5s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -ms-transition: transform 1.5s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -o-transition: transform 1.5s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    transition: transform 1.5s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    transform: translateY(60%);
    opacity: 0;
}
.people-l-block:nth-child(6n) {
    -webkit-transition: transform 1.8s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -moz-transition: transform 1.8s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -ms-transition: transform 1.8s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -o-transition: transform 1.8s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    transition: transform 1.8s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    transform: translateY(70%);
    opacity: 0;
}
@media screen and (max-width: 1250px) {
    .people-l-block:nth-child(3n) {
        -webkit-transition: transform 1.3s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
        -moz-transition: transform 1.3s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
        -ms-transition: transform 1.3s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
        -o-transition: transform 1.3s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
        transition: transform 1.3s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
        transform: translateY(50%);
        opacity: 0;
    }
}
@media screen and (max-width: 767px) {
    .people-l-block:nth-child(n) {
        -webkit-transition: transform .8s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
        -moz-transition: transform .8s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
        -ms-transition: transform .8s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
        -o-transition: transform .8s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
        transition: transform .8s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
        transform: translateY(30%);
        opacity: 0;
    }
}
.people-l-block.animate-in {
    transform: translateY(0);
    opacity: 1;
}


.people-d-bg {
    -webkit-transition: transform 1.3s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -moz-transition: transform 1.3s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -ms-transition: transform 1.3s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -o-transition: transform 1.3s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    transition: transform 1.3s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    transform: translateX(100%);
    opacity: 0;
}
.people-d-bg.animate-in {
    transform: translateX(0);
    opacity: 1;
}

.people-d-name {
    -webkit-transition: transform 0.5s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -moz-transition: transform 0.5s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -ms-transition: transform 0.5s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -o-transition: transform 0.5s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    transition: transform 0.5s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    transform: translateY(30%);
    opacity: 0;
}
.people-d-title {
    -webkit-transition: transform 0.8s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -moz-transition: transform 0.8s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -ms-transition: transform 0.8s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -o-transition: transform 0.8s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    transition: transform 0.8s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    transform: translateY(30%);
    opacity: 0;
}
.people-d-content p {
    -webkit-transition: transform 1.5s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -moz-transition: transform 1.5s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -ms-transition: transform 1.5s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -o-transition: transform 1.5s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    transition: transform 1.5s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    transform: translateY(40%);
    opacity: 0;
}
.people-d-content-img {
    -webkit-transition: transform 1.5s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -moz-transition: transform 1.5s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -ms-transition: transform 1.5s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -o-transition: transform 1.5s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    transition: transform 1.5s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    transform: translateY(40%);
    opacity: 0;
}
.people-d-img {
    -webkit-transition: transform 0.8s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -moz-transition: transform 0.8s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -ms-transition: transform 0.8s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -o-transition: transform 0.8s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    transition: transform 0.8s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    transform: translateX(-100%);
    opacity: 0;
}
.people-d-name.animate-in, .people-d-title.animate-in, .people-d-content p.animate-in, .people-d-content-img.animate-in {
    transform: translateY(0);
    opacity: 1;
}
.people-d-img.animate-in {
    transform: translateX(0);
    opacity: 1;
}
.people-o-block {
    -webkit-transition: transform 0.5s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -moz-transition: transform 0.5s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -ms-transition: transform 0.5s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -o-transition: transform 0.5s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    transition: transform 0.5s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    transform: translateY(40%);
    opacity: 0;
}
.view-content > div:nth-child(2n) .people-o-block {
    -webkit-transition: transform 0.7s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -moz-transition: transform 0.7s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -ms-transition: transform 0.7s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -o-transition: transform 0.7s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    transition: transform 0.7s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    transform: translateY(50%);
    opacity: 0;
}
.view-content > div:nth-child(3n) .people-o-block {
    -webkit-transition: transform 0.9s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -moz-transition: transform 0.9s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -ms-transition: transform 0.9s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -o-transition: transform 0.9s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    transition: transform 0.9s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    transform: translateY(60%);
    opacity: 0;
}
.view-content > div:nth-child(4n) .people-o-block {
    -webkit-transition: transform 1.1s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -moz-transition: transform 1.1s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -ms-transition: transform 1.1s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -o-transition: transform 1.1s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    transition: transform 1.1s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    transform: translateY(70%);
    opacity: 0;
}
.view-content > div:nth-child(5n) .people-o-block {
    -webkit-transition: transform 1.3s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -moz-transition: transform 1.3s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -ms-transition: transform 1.3s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    -o-transition: transform 1.3s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    transition: transform 1.3s ease-in-out 0.2s, opacity .8s ease-in-out 0.2s;
    transform: translateY(80%);
    opacity: 0;
}
.view-content > div .people-o-block.animate-in {
    transform: translateY(0);
    opacity: 1;
}