/*todo !!!!!!!!!!!!!!!!!!!!*/
:root {
    /*--violet-main-color: hsla(268, 100%, 50%, 1);*/
    --violet-main-color: hsla(271, 99%, 53%, 1);
    --violet-main-color-dark: hsl(271, 99%, 40%);
    --violet-main-color-light: hsl(271, 99%, 70%);
    --violet-secondary-color: hsl(271, 99%, 44%);
    --violet-tertiary-color: hsl(271, 99%, 92%);
    --violet-active-color: hsl(14, 88%, 55%);
    --violet-active-color-dark: hsl(14, 88%, 50%);
    --violet-active-color-light: hsl(14, 88%, 65%);

    --magenta-main-color: hsla(328, 66%, 49%, 1);
    --magenta-main-color-dark: hsl(328, 76%, 39%);
    --magenta-main-color-light: hsl(328, 76%, 59%);
    --magenta-secondary-color: hsl(271, 99%, 44%);
    --magenta-tertiary-color: hsl(271, 99%, 92%);
    --magenta-active-color: hsl(14, 88%, 55%);
    --magenta-active-color-dark: hsl(14, 88%, 40%);
    --magenta-active-color-light: hsl(14, 88%, 70%);

    /*--green-main-color: hsla(144, 41%, 24%, 1);*/
    --green-main-color: hsla(97, 74%, 22%, 1);
    --green-main-color-dark: hsl(97, 31%, 22%);
    --green-main-color-light: hsl(97, 51%, 22%);
    --green-secondary-color: hsl(97, 74%, 44%);
    --green-tertiary-color: hsl(144, 41%, 92%);
    --green-active-color: hsl(14, 88%, 55%);
    --green-active-color-dark: hsl(14, 88%, 50%);
    --green-active-color-light: hsl(14, 88%, 60%);

    /*--sea-main-color: hsla(190, 83%, 49%, 1);*/
    --sea-main-color: hsla(190, 83%, 49%, 1);
    --sea-main-color-dark: hsl(186, 51%, 62%);
    --sea-main-color-light: hsl(186, 51%, 72%);
    --sea-secondary-color: hsl(186, 51%, 42%);
    --sea-tertiary-color: hsl(186, 51%, 92%);
    --sea-active-color: hsla(30, 100%, 65%, 1);
    --sea-active-color-dark: hsla(30, 100%, 55%, 1);
    --sea-active-color-light: hsla(30, 100%, 75%, 1);

    /*--main-blue-color: #0096FF;*/
    /*--blue-main-color: hsla(213, 81%, 49%, 1);*/
    --blue-main-color: hsla(199, 100%, 37%, 1);
    /*--blue-main-color: #007fbd;*/
    --blue-main-color-dark: hsla(199, 100%, 39%, 1);
    --blue-main-color-light: hsla(199, 100%, 59%, .8);
    --blue-secondary-color: hsl(199, 100%, 44%);
    --blue-tertiary-color: hsl(199, 100%, 92%);
    /*--blue-active-color: hsl(30, 100%, 65%);*/
    --blue-active-color: hsl(45, 100%, 51%);
    --blue-active-color-dark: hsl(45, 100%, 62%);
    --blue-active-color-light: hsl(45, 100%, 75%);

    /*--cyan-main-color: hsla(168, 75%, 41%, 1);*/
    --cyan-main-color: hsla(182, 58%, 44%, 1);
    --cyan-main-color-dark: hsl(182, 58%, 31%);
    --cyan-main-color-light: hsl(182, 58%, 51%);
    --cyan-secondary-color: hsl(182, 58%, 44%);
    --cyan-tertiary-color: hsl(182, 58%, 92%);
    --cyan-active-color: hsl(8, 92%, 61%);
    --cyan-active-color-dark: hsl(8, 92%, 50%);
    --cyan-active-color-light: hsl(8, 92%, 75%);

    /*--orange-main-color: hsla(14, 88%, 55%, 1);*/
    --orange-main-color: hsla(8, 92%, 61%, 1);
    --orange-main-color-dark: hsl(8, 92%, 45%);
    --orange-main-color-light: hsl(8, 92%, 60%);
    --orange-secondary-color: hsl(33, 100%, 44%);
    --orange-tertiary-color: hsl(33, 100%, 92%);
    --orange-active-color: hsl(190, 83%, 49%);
    --orange-active-color-dark: hsl(190, 83%, 47%);
    --orange-active-color-light: hsl(190, 83%, 59%);

    --brown-main-color: hsla(0, 80%, 40%, 1);
    --brown-main-color-dark: hsl(0, 60%, 40%);
    --brown-main-color-light: hsl(0, 95%, 40%);
    --brown-secondary-color: hsl(0, 40%, 40%);
    --brown-tertiary-color: hsl(0, 80%, 70%);
    --brown-active-color: hsl(14, 88%, 55%);
    --brown-active-color-dark: hsl(14, 88%, 50%);
    --brown-active-color-light: hsl(14, 88%, 60%);

    --gray-main-color: hsla(209, 21%, 28%, 1);
    --gray-main-color-dark: hsl(209, 21%, 18%);
    --gray-main-color-light: hsl(209, 21%, 90%);
    --gray-secondary-color: hsl(210, 14%, 53%);
    --gray-tertiary-color: hsl(0, 80%, 70%);
    --gray-active-color: hsl(14, 88%, 55%);
    --gray-active-color-dark: hsl(14, 88%, 50%);
    --gray-active-color-light: hsl(14, 88%, 60%);
}

/*todo !!!!!!!!!!!!!!!!!!!!*/
:root {
    --main-color: var(--sea-main-color);
    --main-color-dark: var(--sea-main-color-dark);
    --main-color-light: var(--sea-main-color-light);
    --secondary-color: var(--sea-secondary-color);
    --tertiary-color: var(--sea-tertiary-color);
    --active-color: var(--sea-active-color);
    --active-color-dark: var(--sea-active-color-dark);
    --active-color-light: var(--sea-active-color-light);
}

/*.vacancy__item {*/
/*    position: relative;*/
/*    border: 1px solid lightgrey;*/
/*    border-top-left-radius: 1em;*/
/*    border-top-right-radius: 1em;*/
/*    height: 400px;*/
/*    cursor: pointer;*/
/*}*/
/*.vacancy__item span {*/
/*    display: inline-block;*/
/*    width: 100%;*/
/*    padding: 0.5em;*/
/*    color: black;*/
/*    font-size: 1.55rem;*/
/*    font-weight: 600;*/
/*    line-height: 32px;*/
/*    text-transform: uppercase;*/
/*    text-align: center;*/
/*    transition: 0.5s;*/
/*    cursor: pointer;*/
/*}*/
/*.vacancy__item span:hover {*/
/*    background-color: #394959!important;*/
/*    color: #e9ecf7;*/
/*}*/
/*.vacancy__img {*/
/*    overflow: hidden;*/
/*    height: 40%;*/
/*    background-size: cover;*/
/*    background-position: center;*/
/*    border-top-left-radius: 1em;*/
/*    border-top-right-radius: 1em;*/
/*}*/
/*.vacancy__item .ann div {*/
/*    padding: 0.5em;*/
/*    display: flex;*/
/*    align-items: center;*/
/*}*/
/*.vacancy__item .ann i {*/
/*    color: #35b9fa;*/
/*    margin-right: 0.5rem;*/
/*}*/


.page__item {
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-bottom: 20px;
    height: 450px;
    cursor: pointer;
    -webkit-box-shadow: 0px 0px 0px 0px rgba(34, 60, 80, 0.2);
    -moz-box-shadow: 0px 0px 0px 0px rgba(34, 60, 80, 0.2);
    box-shadow: 0px 0px 0px 0px rgba(34, 60, 80, 0.2);
    transition: all .2s linear;
}
.page__item:hover .page-event__img span {
    opacity: 1;
}
.page__item:hover {
    -webkit-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
    -moz-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
    box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
}

.page__content {
    padding: 20px 20px;
}
.page__content p:first-child {
    color: #868686;
}
.page__content a {
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
}
.page__content i {
    transition: all .2s linear;
    font-size: 22px;
}
.page__content a:hover i {
    padding-left: 10px;
}
.pageCurrent {
    margin-top: 50px;
}
.page-event {
    padding-bottom: 40px;
}
.page-event__img {
    width: 100%;
    height: 70%;
    position: relative;
    z-index: 10;
}
.page-event__img img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.page-event__img span {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: all .2s linear;
    width: 100%;
    height: 100%;
    z-index: 11;
    background: rgba(0,0,0,.6);
    display: flex;
    align-items: center;
    justify-items: center;
    cursor: pointer;
    border-radius: 10px;
}
.page-event__img span p {
    color: #fff;
    text-align: center;
    display: block;
    width: 100%;
    text-decoration: none;
    font-size: 18px;
}
.page-event__img:hover span {
    opacity: 1;
}
.page-event i {
    font-size: 24px;
}
.page-event__content {
    padding: 20px;
    font-size: 20px;
}
.page-event__content div {
    margin-bottom: 10px;
}
.page-event__content i {
    color: var(--main-color);
}
.page-event__item {
    border: 1px solid ;
}

.vacancy__logo {
    width: 100%;
    height: 150px;
}
.vacancy__logo svg, .vacancy__logo img {
    width: 100%;
    height: 100%;
}
.vacancy__img img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}