@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");

* {
    box-sizing: border-box;
}

* {
    scrollbar-width: thin;
    scrollbar-color: #000 #000;
}

*::-webkit-scrollbar {
    height: 3px;
    width: 3px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: #48ab41;
    border-radius: 3px;
}

html {
    scroll-behavior: smooth;
    height: 100%;
}

body {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    min-width: 320px;
    height: 100%;
    position: relative;
    background: #f1f1f8;
}

body.front-page {
    background: #e5e5e5;
}

body.open {
    overflow: hidden;
}

img {
    max-width: 100%;
}

.btn {
    background: #48ab41;
    border-radius: 8px;
    width: 100%;
    max-width: 190px;
    height: 44px;
    display: block;
    color: #ececec;
    line-height: 44px;
    text-align: center;
    user-select: none;
}

.btn:hover {
    background: #33952c;

}

.z-index {
    z-index: 10;
}

.container {
    max-width: 1280px;
    padding-left: 15px;
    padding-right: 15px;
    margin: 0 auto;
    position: relative;
}

.header {
    background: #292929;
    position: relative;
}

.header:after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 150px;
    height: 300px;
    background: url(../img/ellipse.svg) no-repeat 0 0;
}

.header__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
}

.header__menu {
    display: flex;
}

.header__menu > li {
    margin-right: 30px;
}

.header__menu > li > a {
    color: #ececec;
    opacity: 0.5;
}

.header__menu > li > a:hover {
    color: #fff;
    opacity: 0.7;
}

.header__use {
    width: 190px;
    height: 44px;
    border: 1px solid #48ab41;
    box-sizing: border-box;
    border-radius: 8px;
    color: #ececec;
    line-height: 44px;
    text-align: center;
}

.header__use__block {
    display: inline-flex;
}


.header__use2 {
    margin: 0 auto;
    margin-bottom: 58px;
}

.header__center {
    padding-top: 40px;
    position: relative;
    margin: 0 auto;
    margin-top: 46px;
    text-align: center;
    max-width: 1175px;
}

.header__center::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    background: #48ab41;
    width: 25px;
    height: 25px;
    border-radius: 50%;
}

.header__center::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    border: 3px solid #48ab41;
    width: 25px;
    height: 25px;
    border-radius: 50%;
}

.header__dec1 {
    font-weight: bold;
    font-size: 14px;
    line-height: 19px;

    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 26px;
    color: #48ab41;
}

.header__title {
    font-size: 54px;
    line-height: 74px;

    text-transform: uppercase;
    color: #ececec;
    margin-bottom: 18px;
    font-weight: normal;
}

.header__dec2 {
    font-size: 18px;
    line-height: 25px;

    color: #c6c6c6;
    opacity: 0.6;
    margin-bottom: 40px;
}

.header__about_dec2 {
    font-size: 15px;
    line-height: 25px;
    color: #000000;
    opacity: 0.7;
    margin-bottom: 15px;
}

.header__image {
    display: flex;
    justify-content: center;
}

.header__center__box {
    max-width: 700px;
    margin: 0 auto;
}

.header__soc {
    position: absolute;
    left: 15px;
    top: 700px;
}

.header__soc > li {
    margin-bottom: 30px;
}

.header__soc > li > a {
    display: block;
}

.header__soc > li > a > img {
    opacity: 0.5;
}

.header__soc > li > a > img:hover {
    opacity: 0.7;
}

.header__burger {
    width: 28px;
    height: 18px;
    background: url(../img/burger.svg) no-repeat 0 0;
    cursor: pointer;
}

.header__border {
    width: 100%;
    display: block;

    position: absolute;
    left: 0;
    bottom: 0;
    background: #e5e5e5;
}

/* Хедер на внутренних страницах */

.header-page {
    padding: 40px 0;
}


.header-page > .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-page__logo {
    display: block;
    width: 175px;
    height: 44px;
    background: url(../img/logo-page.png) no-repeat 0 0;
}

.header-page__contact {
    display: flex;
}

.header-page__phone {
    margin-right: 70px;
}

.header-page__phone,
.header-page__email {
    font-weight: 300;
    font-size: 18px;
}

.header-page__phone > a,
.header-page__email > a {
    color: #b2b2b2;
}

.header-page__phone > span,
.header-page__email > span {
    color: #5a5a5a;
    margin-right: 18px;
}

.header-page__admin > a {
    color: #333671 !important;
    background: #dbdbdb;
    padding: 0 8px;
    border-radius: 8px;
    font-weight: 400;
}

/* Контент */

.content {
    padding: 40px 0;
}

/* Кандидат */

.candidate__head {
    width: 100%;
    margin-bottom: 60px;
}

.candidate__head > h2 {
    font-size: 48px;
    line-height: 120%;
    font-weight: normal;
    margin-bottom: 20px;
    color: #2d2c42;
}

.candidate__head > p {
    font-size: 18px;
    line-height: 25px;

    color: #767689;
}

.candidate__fillter {
    background: #ffffff;
    border-radius: 8px;
    padding: 16px 40px;
    display: flex;
    margin-bottom: 44px;
}

.candidate__fillter__title {
    display: block;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 10px;
    font-feature-settings: "liga" off;
    color: #76798a;
}

.candidate__fillter__input {
    background: #ffffff url(../img/search.svg) no-repeat 17px center;
    height: 46px;
    padding-left: 40px;
    width: 100%;
    border: 1px solid #e1e5e9;
    box-sizing: border-box;
    border-radius: 8px;
}

.candidate__fillter__col.search {
    width: calc(100% - 20px);
    /*max-width: 780px;*/
    margin-right: 20px;
}

.candidate__fillter__select {
    position: relative;
    display: inline-block;
}

.candidate__fillter__select > select {
    background: #ffffff;
    height: 46px;
    padding: 0 55px 0 15px;
    width: 100%;
    max-width: 340px;
    border: 1px solid #e1e5e9;
    box-sizing: border-box;
    border-radius: 8px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
}

.candidate__fillter__select:after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -3px;
    width: 12px;
    height: 7px;
    background: url(../img/arrow.svg);
}

.candidate__fillter__items {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.candidate__fillter__item {
    background: #ffffff;
    border-radius: 8px;
    width: calc(25% - 10px);
    margin: 0 5px 20px 5px;

    padding: 20px 20px 30px 20px;
}

.candidate__fillter__item > img {
    border-radius: 8px;
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.candidate__fillter__item__title {
    font-size: 28px;
    margin-bottom: 10px;
    color: #333333;
    margin-top: 20px;
    line-height: 38px;
}

.candidate__fillter__item__stack {
    font-size: 16px;
    margin-bottom: 17px;
    color: #7a7a7a;
}

.candidate__fillter__item__tag {
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
}

.candidate__fillter__item__tag > span {
    color: #333333;
    height: 28px;
    padding: 0 8px;
    line-height: 28px;
    background: #f1f1f8;
    border-radius: 4px;
    margin-right: 5px;
    margin-bottom: 5px;
    user-select: none;
    cursor: pointer;
    font-size: 13px;
}

.candidate__fillter__item__more {
    max-width: 100%;
    width: 100%;

}

/* Редактирование кандитата */

.candidate-edit {
    background: #ffffff;
    border-radius: 8px;
    padding: 74px 120px;
}

.candidate-edit__head {
    display: flex;
    max-width: 940px;
    justify-content: space-between;
    margin-bottom: 60px;
}

.candidate-edit__name {
    font-size: 50px;
    line-height: 1.2;
    margin-bottom: 10px;
    color: #333333;
    font-weight: normal;
}

.candidate-edit__gender {
    font-size: 24px;
    line-height: 140%;
    margin-bottom: 15px;
    color: #333333;
}

.candidate-edit__stack {
    font-size: 24px;
    line-height: 140%;
    margin-bottom: 15px;

    color: #333333;
}

.candidate-edit__img > img {
    width: 100%;
    border-radius: 8px;
}

.candidate-edit__table-work td {
    padding-right: 10px;
    padding-bottom: 10px;
}

.candidate-edit__table-work td:last-child {
    font-weight: 600;
}

.candidate-edit__table {
    width: 100%;
}

.candidate-edit__title {
    font-size: 30px;
    line-height: 41px;
    margin-bottom: 30px;

    color: #333333;
}

.candidate-edit__tag {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
}

.candidate-edit__tag > span {
    color: #333333;
    height: 28px;
    padding: 0 8px;
    line-height: 28px;
    background: #f1f1f8;
    border-radius: 4px;
    margin-right: 5px;
    margin-bottom: 5px;
    user-select: none;
    cursor: pointer;
    font-size: 14px;
}

.candidate-edit__table td {
    vertical-align: top;
    padding-bottom: 20px;
}

.candidate-edit__table td:first-child {
    font-size: 30px;
    color: #333333;
    width: 360px;
}

.candidate-edit__title-small {
    font-size: 24px;
    line-height: 140%;
    margin-bottom: 10px;
    color: #333333;
}

.candidate-edit p, .candidate-edit .experience-small {
    margin-bottom: 15px;
    font-weight: 300;
    font-size: 16px;
    line-height: 160%;
    color: #333333;
}

.all-specialists {
    color: #48ab41;
    text-decoration: none;
    display: inline-block;
    padding-left: 25px;
    background: url(../img/arrow-2.svg) no-repeat 0 center;
    margin-bottom: 31px;
}

.hire {
    width: 100%;
    max-width: 292px;
    margin-top: 40px;
}

/* Второй экран */

.main {
    padding-top: 180px;
    padding-bottom: 90px;
    position: relative;
    overflow: hidden;
}

.main.about-container {
    padding-top: 50px;
    padding-bottom: 90px;
    position: relative;
    overflow: hidden;
    text-align: justify;
}

.main:after {
    content: "";
    position: absolute;
    right: -183px;
    bottom: 72px;
    width: 365px;
    height: 365px;
    background: url(../img/ellipse2.svg) no-repeat 0 0;
}

.main.about-container:after {
    content: "";
    position: absolute;
    right: -183px;
    bottom: 72px;
    width: 365px;
    height: 365px;
    background: url(../img/ellipse2.svg) no-repeat 0 0;
}

.main__box {
    display: flex;
    justify-content: space-between;
}

.main__text {
    max-width: 700px;
    margin-left: 60px;
}

.main__img {
    width: 100%;
    max-width: 500px;
}

.main__dec {
    font-size: 14px;
    line-height: 19px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: bold;
    color: #48ab41;
}

.main__title {
    font-size: 48px;
    line-height: 120%;
    padding: 0;
    margin: 0;
    margin-bottom: 20px;
    color: #2d2c42;
    font-weight: normal;
}

.main__title_second {
    font-size: 25px;
    line-height: 120%;
    padding: 0;
    margin: 0 0 15px;
    color: #2d2c42;
    font-weight: normal;
}

.main__ol {
    list-style-type: none;
    counter-reset: num;
    margin: 0 0 0 35px;
    margin-bottom: 40px;
    padding: 15px 0 0 0;
    font-size: 18px;
}

.main__ol li {
    position: relative;
    margin-bottom: 10px;
    font-weight: 300;
    font-size: 18px;
    line-height: 25px;
    color: #767689;
}

.main__ol li:last-child {

    margin-bottom: 0;

}

.main__ol li:before {
    content: counter(num) ".";
    counter-increment: num;
    display: inline-block;
    position: absolute;
    top: 0px;
    left: -26px;
    width: 20px;
    color: #48ab41;
    font-size: 18px;
    font-weight: 600;
}

/* Футер */

.footer {
    border-top: 1px solid rgba(51, 51, 51, 0.1);
    padding-top: 46px;
    padding-bottom: 59px;
}

.footer__box {
    display: flex;
}

.footer__copirit {
    font-weight: 300;
    font-size: 18px;
    color: #a7c816;
    margin-right: 166px;
}

.footer__contact {
    font-weight: 300;
    font-size: 18px;
    line-height: 140%;
    color: #b2b2b2;
    margin-right: 60px;
}

.footer__contact > span {
    color: #5a5a5a;
}

.footer__phone-email {
    display: flex;
}

/* мобильное меню */

.mobile-menu {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #292929;
    z-index: 10;
    display: none;
    align-items: center;
    justify-content: center;
}

.mobile-menu.active {
    display: flex;
}

.mobile-menu__list > li {
    text-align: center;
    margin-bottom: 25px;
}

.mobile-menu__list > li > a {
    color: #fff;
}

.mobile-menu__close {
    width: 40px;
    height: 40px;
    background: url(../img/close.svg) no-repeat 0 0;
    position: absolute;
    right: 10px;
    top: 35px;
    cursor: pointer;
    background-size: cover;
}

.mobile-only {
    display: none;
}

.tablet-mobile-only {
    display: none;
}

@media (min-width: 1025px) {
    .candidate-edit__img {
        width: 40%;
    }
}

/* адаптивность */
@media (max-width: 1024px) {
    .header::after {
        display: none;
    }

    .header__center::after,
    .header__center::before {
        display: none;
    }

    .header__top {
        border-bottom: 1px solid rgba(239, 239, 239, 0.05);
        margin-bottom: 30px;
        width: calc(100% + 30px);
        margin-left: -15px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .header__soc {
        position: relative;
        top: 0;
        display: flex;
        justify-content: flex-end;
        left: 0;
        z-index: 2;
    }

    .header__soc > li {
        margin-left: 30px;
        margin-bottom: 0;
    }

    .header__title {
        font-size: 50px;
        line-height: 66.5px;
    }


    .header-page {
        background: #292929;
        padding: 15px 0;
    }

    .header-page__phone span, .header-page__email span {
        display: none;
    }

    .header-page__phone, .header-page__email {
        font-size: 16px;
    }

    .header-page__logo {
        background: url(../img/logo-white.png) no-repeat 0 0;
    }


    .candidate__head > h2 {
        font-size: 40px;
    }

    .candidate__fillter {
        flex-direction: column;
    }

    .candidate__fillter__col.search {
        margin-bottom: 28px;
    }

    .candidate__fillter__item {
        width: calc(50% - 10px);
    }

    .candidate__fillter {
        padding: 30px 25px;
    }


    .candidate-edit {
        padding: 40px 25px;
    }

    .candidate-edit__intro, .candidate-edit__img {
        width: 50%;
    }

    .candidate-edit__name {
        font-size: 40px;
    }

    .candidate-edit__gender {
        font-size: 16px;
    }

    .candidate-edit__stack {
        font-size: 22px;
    }

    .candidate-edit__table td:first-child {
        font-size: 28px;
        width: 210px;
    }

    .main__box {
        flex-direction: column-reverse;
    }

    .main__text {
        max-width: 100%;
        margin-left: 0;
    }

    .main__img {
        margin-top: 100px;
        display: flex;
        justify-content: center;
        max-width: 100%;
    }

    .tablet-mobile-only {
        display: block;
    }

    .footer__copirit {
        margin-right: 66px;
        font-size: 16px;
    }

    .footer__contact {
        margin-right: 30px;
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .mobile-none {
        display: none;
    }

    .mobile-only {
        display: block;
    }

    .header__top {
        margin-bottom: 0;
    }

    .header__center {
        text-align: left;
        margin-top: 0;
        padding-top: 35px;
    }

    .header__title {
        font-size: 35px;
        line-height: 48px;
    }

    .header__use2 {
        margin: 0;
        margin-bottom: 58px;
    }

    .main__title {
        font-size: 20px;
        line-height: 27px;
    }

    .main__ol > li {
        font-size: 16px;
    }

    .main:after {
        display: none;
    }

    .footer {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .footer__box {
        flex-direction: column-reverse;
    }

    .footer__contact > span {
        display: none;
    }

    .footer__copirit {
        margin-top: 15px;
    }

    .footer__contact:last-child {
        margin-right: 0;
    }

    .candidate__fillter__item {
        width: 100%;
    }

    .candidate-edit {
        padding: 45px 25px;
    }

    .candidate-edit__head {
        flex-direction: column-reverse;
        position: relative;
        padding-top: 100px;
    }

    .candidate-edit__top {
        position: absolute;
        top: 0;
        left: 0;
    }

    .candidate-edit__intro, .candidate-edit__img {
        width: 100%;
    }

    .candidate-edit__img {
        margin-bottom: 30px;
    }

    .candidate-edit__name {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .candidate-edit__table tr, .candidate-edit__table td, .candidate-edit__table tbody {
        display: block;
    }

    .candidate-edit__table td {
        padding-bottom: 20px;

    }

    .candidate-edit__table td:first-child, .candidate-edit__title {
        font-size: 25px;
    }

    .candidate-edit__title-small {
        font-size: 20px;
    }

    .hire {
        max-width: 100%;
    }
}

button.tag-last {
    margin-top: 6px;
    height: 20px;
}

button.tag-last > div {
    margin-top: -9px;
}

.hire-spec {
    margin-top: 20px !important;
}

#language-levels {
    width: 100%;
}

.lang-name {
    font-weight: 600;
}

td.language {
    font-size: 16px !important;
    font-weight: 400;
    vertical-align: bottom;
    padding-bottom: 0;
    padding-top: 4px;
}

td.language-level {
    vertical-align: bottom;
    padding-bottom: 0;
    padding-top: 4px;
    font-weight: 300;
}

p.experience-description {
    white-space: pre-wrap;
}

.profile_btn {
    color: #333333;
    height: 28px;
    padding: 0 8px;
    line-height: 28px;
    background: #f1f1f8;
    border-radius: 4px;
    margin-right: 5px;
    margin-bottom: 5px;
    user-select: none;
    cursor: pointer;
    font-size: 13px;
}

.about-header {
    margin-bottom: 15px;
}

.langs {
    display: flex;
}

.col-md-12 {
    width: 100%;
    flex: 0 0 auto;
}

.col-md-4 {
    width: 33.33%;
    flex: 0 0 auto;
}

.center__block {
    margin: 80px auto 0;
    display: flex;
    justify-content: flex-start;
}

/*new*/
.filter-area {
    display: flex; margin-top: 10px
}
#filter-btn {
    padding: 5px;
    border-radius: 8px;
    border: 1px solid #e1e5e9;
    margin-right: 10px;
    cursor: pointer;
    box-shadow: -1px 4px 8px 0px rgba(34, 60, 80, 0.2);
}
#filter-btn:hover, .pressed-filtered-button {
    background:#8fdff0;
    color: white;
}
.filter-delete {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    left: 0;
    top: 5px;
    background-image: url("../img/delete.svg");
    background-repeat: no-repeat;
    background-size: 15px;
    cursor:pointer;
}