@import "../sections/info-section.css";
@import "../sections/hero-section.css";
@import "../sections/form-section.css";
@import "../sections/statistic-section.css";

.about-us-page {
    margin-top: 104px;

    overflow: hidden;
}

.form-section .container {
    padding: 100px 0;
}

.hero-info {
    padding: 130px 0 70px;
}

#leadership-tab .hero-info {
    padding: 200px 0 200px;
}

.hero-info p {
    width: 55%;
}

#leadership-tab .hero-info p {
    width: 44%;
}

.info-section {
    margin-bottom: 80px;
}

.info-section .image-holder {
    width: 800px;

    transition: .5s ease;
}

.info-section .text-holder {
    width: 60%;
    max-width: unset;
    padding: 60px 100px 80px;
}

.info-section .info-block.inactive .image-holder {
    transform: translateX(-100%);
}

.info-section .info-block.inactive .text-holder {
    transform: translateX(100%);

    opacity: 0;
}

#who-we-are-tab .statistic-section {
    margin-bottom: 80px;
}

.team-block {
    transform: translateY(-100px);
}

.team-block .container {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 130px;
}

.team-block.showed .active > .container {
    flex-direction: column;
    align-items: flex-start;
}

.team-block.showed .container.with-photo {
    flex-direction: row-reverse;
}

.team-block .container.with-photo .info-text {
    order: -1;
}

.team-block .team-item {
    width: calc(25% - 15px);
    height: 414px;
    margin-bottom: 20px;
}

.team-block .team-info {
    cursor: pointer;
}

.team-block .team-item {
    transition: .3s ease;
}

.team-block .team-item:nth-child(4n+1) {
    background: #466b86;
}

.team-block .team-item:nth-child(4n+2) {
    background: #7191aa;
}

.team-block .team-item:nth-child(4n+3) {
    background: #4a799e;
}

.team-block .team-item:nth-child(4n+4) {
    background: #344555;
}

.team-block .team-item .team-info {
    position: relative;

    height: 100%;
}

.team-block .team-item:hover {
    background: #df6c4e;
}

.team-block .team-item .img-holder img {
    width: 100%;
}

.team-block .team-item .text {
    position: absolute;
    bottom: 0;

    padding: 0 32px 44px;
}

.team-block .team-item .team-initials {
    margin: 0 0 13px;

    font-size: 26px;
    font-weight: normal;
    line-height: 1.2;
    color: #fff;
}

.team-block .team-item .position {
    margin: 0;

    font-size: 15px;
    font-weight: normal;
    color: #fff;
    text-transform: uppercase;
}

.team-block .team-item:not(:nth-child(4n)) {
    margin-right: 20px;
}

.team-block .team-info-detailed-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;

    display: none;
    padding: 305px 0 0;

    color: #344555;

    background: #fff;
}

.team-block .team-info-detailed-wrap.active {
    display: block;

    overflow-y: scroll;
}

.team-block .team-info-detailed-wrap .info-text {
    width: 70%;
    margin-bottom: 16px;
}

.team-block .team-info-detailed-wrap .info-contacts {
    display: flex;
    width: 65%;
    margin-bottom: 40px;

    border: 1px solid #df6c4f;
    border-left: none;
    border-right: none;
}

.team-block .container.with-photo .info-contacts {
    width: 100%;
}

.team-block .team-info-detailed-wrap .info-contacts a {
    display: flex;
    align-items: center;
    padding: 25px 0;

    font-size: 16px;
    font-weight: normal;
    color: #344555;
    text-decoration: none;
}

.team-block .team-info-detailed-wrap .info-contacts a:focus {
    outline: none;
}

.team-block .team-info-detailed-wrap .info-contacts a:first-child {
    margin-right: 60px;
}

.team-block .team-info-detailed-wrap .info-contacts .mail::before {
    content: url(/wp-content/uploads/2020/05/mail.png);

    width: 40px;
    height: 30px;
    margin-right: 13px;
}

.team-block .team-info-detailed-wrap .info-contacts .tel::before {
    content: url(/wp-content/uploads/2020/05/phone.png);

    width: 40px;
    height: 30px;
    margin-right: 13px;
}

.team-block .team-info-detailed-wrap .img-holder {
    order: 2;

    margin-right: 70px;
}

.team-block .container.with-photo .img-holder {
    order: 0;
}

.team-block .team-info-detailed-wrap .img-holder img {
    margin-bottom: 70px;

    background: #344555;
}

.team-block .team-info-detailed-wrap .img-holder .back-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: unset;

    cursor: pointer;
}

.team-block .team-info-detailed-wrap .img-holder .back-btn::before {
    content: url('/wp-content/uploads/2020/04/back-arrow.png');

    width: 12px;
    height: 19px;
    margin-right: 15px;
}

.team-block .team-info-detailed-wrap .info-text h5 {
    margin: 0 0 15px;

    font-size: 31px;
    font-weight: normal;
}

.team-block .team-info-detailed-wrap .info-text span {
    font-size: 18px;
    font-weight: normal;
    text-transform: uppercase;
}

.team-block .team-info-detailed-wrap .info-text hr {
    width: 122px;
    height: 3px;
    margin: 30px 0 42px;

    background: #df6c4f;
}

.team-block .team-info-detailed-wrap .info-text p {
    width: 90%;

    font-size: 16px;
    font-weight: normal;
}

.team-block .team-info-detailed-wrap .hp-footer {
    position: absolute;
    width: 100%;
}

.team-block.showed {
    transform: none;
}

.for-mobile {
    display: none;
}

.news-tab .year-tabs {
    display: flex;
    margin: 0;
    padding: 130px 0 0;

    list-style: none;
}

.news-tab .year-tabs .y-tab-item {
    padding: 14px 30px;
    margin-right: 2px;

    font-size: 18px;
    font-weight: normal;
    color: #fff;

    background: #7191aa;

    transition: .3s ease-in-out;

    cursor: pointer;
}

.news-tab .year-tabs .y-tab-item.active,
.news-tab .year-tabs .y-tab-item:hover {
    background: #466b86;
}

.news-item {
    padding: 50px 20px;

    border-top: 1px solid #bdc3c4;
}

.news-item .date {
    display: inline-block;
    margin: 0 0 34px;

    font-size: 18px;
    font-weight: normal;
    color: #344555;
    text-transform: uppercase;

    border-bottom: 3px solid #df6c4f;
}

.news-item h3 {
    margin: 0 0 34px;

    font-size: 31px;
    font-weight: normal;
    color: #344555;
}

.news-item .wrapper {
    display: flex;
    align-items: center;
}

.news-item .wrapper .text {
    width: 70%;
    margin-right: 70px;
}

.news-item .wrapper .text p {
    font-size: 16px;
    font-weight: normal;
    color: #344555;
}

.news-item .wrapper .img-holder {
    width: 30%;
}

.news-item .primary-btn {
    display: inline-block;
}

.sort-by-year {
    display: none;
}

.sort-by-year.active {
    display: block;
}

.sort-by-year .more {
    display: block;
    margin: 0 auto;

    border: none;
    border-radius: unset;

    cursor: pointer;
}

.alm-btn-wrap {
    padding: 60px 0;

    border-top: 1px solid #bdc3c4;
}

.sort-by-year .more[disabled] {
    display: none;
}

.sort-by-year .no-results {
    padding: 40px 0;
}

@media only screen and (max-width: 1023px) {
    .for-mobile {
        display: block;
        width: 100%;
    }

    .for-desktop {
        display: none;
    }

    .hero-info {
        padding: 60px 0 0;
    }

    #leadership-tab .hero-info {
        padding: 60px 0 0;
    }

    #leadership-tab .hero-info p,
    .hero-info p {
        width: 100%;
    }

    .statistic-section .container {
        flex-wrap: wrap;
        padding: 0;
    }

    .statistic-section .block {
        width: 100%;
        padding: 17px;
    }

    .statistic-section .block-with-data .stat-value-wrap {
        font-size: 70px;
    }

    .statistic-section .block-with-data .stat-description {
        letter-spacing: 1px;
    }

    .statistic-section .block-with-data .stat-description br {
        display: none;
    }

    .info-section .button-holder {
        flex-wrap: wrap;
        flex-direction: column;
    }

    .info-section .button-holder a:first-child {
        margin-bottom: 20px;
        margin-right: 0;
    }

    .info-section .image-holder,
    .info-section .text-holder {
        max-width: 100%;
        width: 100%;
    }

    .info-section .image-holder {
        width: 100%;
    }

    .info-section .text-holder {
        padding: 0 20px 30px 40px;
    }

    .info-section .text-holder .description {
        width: 100%;
    }

    .form-section .container {
        padding: 20px 30px 40px;
    }

    .team-block {
        transform: none;
    }

    .team-block .container {
        padding: 0 30px;
    }

    .team-block .team-item {
        width: 100%;
        height: unset;
        min-height: 400px;
    }

    .team-block .team-item:not(:nth-child(4n)) {
        margin-right: 0;
    }

    .team-block .team-item .team-initials {
        font-size: 30px;
    }

    .team-block .team-item .position {
        font-size: 18px;
    }

    .team-block .team-info-detailed-wrap {
        padding: 200px 0 40px;
    }

    .team-block .team-info-detailed-wrap .info-text,
    .team-block .team-info-detailed-wrap .info-text p {
        width: 100%;
    }

    .team-block .team-info-detailed-wrap .info-text p:last-child {
        /*padding-bottom: 50px;*/
    }

    .team-block .team-info-detailed-wrap .img-holder img {
        margin-bottom: 30px;
    }

    .team-block .team-info-detailed-wrap.active .container {
        position: relative;
    }

    .team-block.showed .container.with-photo {
        flex-direction: row;
    }

    .team-block .container.with-photo .img-holder .back-btn {
        position: absolute;
        bottom: -20px;
    }

    .team-block .team-info-detailed-wrap .info-text h5 {
        margin-bottom: 5px;

        font-size: 30px;
    }

    .team-block .team-info-detailed-wrap .info-text hr {
        margin: 30px 0;
    }

    .news-item .wrapper {
        flex-wrap: wrap;
        margin-bottom: 20px;
    }

    .news-item .wrapper .text,
    .news-item .wrapper .img-holder {
        width: 100%;
        margin-right: 0;
    }

    .team-block .team-info-detailed-wrap .info-contacts {
        flex-wrap: wrap;
        width: 100%;
    }

    .team-block .container.with-photo .img-holder {
        order: -1;
    }

    .news-tab .year-tabs {
        padding: 60px 0 0;
    }
}

@media only screen and (min-width: 601px) and (max-width: 1023px) {
    .info-section .text-holder {
        padding: 20px 20px 30px 60px;
    }

    .team-block .container {
        justify-content: space-between;
    }

    .team-block .team-item {
        width: calc(50% - 10px);
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1420px) {
    .info-section .text-holder .title,
    .info-section .text-holder .description {
        width: 100%;
    }

    .team-block .container.with-photo .img-holder {
        width: calc(30% - 30px);
        margin-right: 30px;
    }
}