.employees {
  /*margin: 100px 0;*/
}

.employees .title,
.employees .description {
  margin-bottom: 25px;
}

.employees .description {
  color: gray;
  font-size: small;
}

.employees .column-25 {
  height: fit-content;
}

.employees .person {
  height: 300px;
  position: relative;
  border: 1px solid lightgray;
  overflow: hidden;
  margin-bottom: 30px;
}

.employees .person * {
  margin-bottom: 10px;
}

.employees picture {
  display: block;
}

.employees img {
  transition: 0.5s;
  background-color: #fff;
  width: 100%;
  height: 350px;
  object-fit: cover;
  object-position: 0 -25px;
}

.employees img:hover {
  opacity: 0.6;
  transition: 0.5s;
}

/* ======================================================================== */
/* ===============================PERSON_INFO============================== */
/* ======================================================================== */

.employees .socials {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center
}

.employees .socials * {
  height: 30px;
  margin: 0 auto;
}

.employees .job {
  margin-top: 15px;
  color: gray;
}

.employees .fio {
  color: black;
}

.employees .svg {
  fill: rgba(0, 0, 0, 1);
}

.employees .svg:hover {
  fill: rgba(0, 0, 0, .3);
}

.employees .fio:hover,
.employees .phone:hover,
.employees .email:hover,
.employees .svg:hover {
  transition: 0.5s;
}

.employees .job,
.employees .fio,
.employees .phone,
.employees .email {
  cursor: pointer;
  margin-left: 10px;
}

/* ======================================================================== */
/* ===============================Анимация================================= */
/* ======================================================================== */

.employees .person_info {
  background-color: #fff;
  position: absolute;
  bottom: 72px;
  /* top: 0; */
  width: 100%;
  transform: translateY(100%);
  transition: transform 0.2s ease-in-out;
}

.employees .person:hover .person_info {
  bottom: -12px;
  transform: translateY(0);
}

.employees a.btn {
  margin: 0 auto 5px auto;
  display: none;
}

.employees .person_info .phone,
.employees .person_info .email,
.employees .person_info .socials {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.employees .person:hover a.btn,
.employees .person_info:hover a.btn {
  display: block;
  opacity: 1;
}

.employees .person:hover .person_info .phone,
.employees .person:hover .person_info .email,
.employees .person:hover .person_info .socials,
.employees .person_info:hover .phone,
.employees .person_info:hover .email,
.employees .person_info:hover .socials,
.employees .person_info>a.btn:hover {
  display: flex;
  flex-flow: row nowrap;
  opacity: 1;
}



/* ======================================================================== */
/* ==================================770PX================================= */
/* ======================================================================== */


@media (max-width: 770px) {
  .employees {
    margin: 50px 0;
  }

  .employees .title,
  .employees .description {
    margin-bottom: 5px;
  }

  .employees .description {
    font-size: smaller;
  }

  .employees .person {
    margin: 0;
    height: auto;
  }

  .employees .person_info {
    bottom: 50px;
  }

  .employees .column-80 {
    width: 100%;
  }

  .employees .column-25 {
    width: 100%;
    margin-bottom: 20px;
  }

  .employees img {
    height: auto;
    width: 100%;
    object-position: 0 -8px;
  }

  .employees .person * {
    margin: 0;
  }

  .employees .socials * {
    height: 30px;
    margin: 0 auto 5px auto;
  }

  .employees .job,
  .employees .fio,
  .employees .phone,
  .employees .email {
    margin-left: 5px;
    font-size: 16px;
  }

  .employees .socials {
    flex-flow: row wrap !important;
  }

  .employees a.btn {
    width: fit-content;
    height: fit-content;
    font-size: 16px;
    padding: 10px;
    margin-bottom: 15px;
    line-height: 1;
  }
}

/* ======================================================================== */
/* ==================================320PX================================= */
/* ======================================================================== */


@media (max-width: 320px) {
  .employees .employees {
    margin: 50px 0;
  }

  .employees .title,
  .employees .description {
    margin-bottom: 5px;
  }

  .employees .description {
    font-size: smaller;
  }

  .employees .person {
    margin: 0;
    height: auto;
  }

  .employees .person_info {
    bottom: 40px;
  }

  .employees .container320 {
    width: 320px;
  }

  .employees .column-80 {
    width: 100%;
  }

  .employees .column-25 {
    width: 100%;
    margin-bottom: 20px;
  }

  .employees img {
    height: auto;
    width: 100%;
    object-position: 0 -8px;
  }

  .employees .person * {
    margin: 0;
  }

  .employees .socials * {
    height: 15px;
    margin: 0 auto 5px auto;
  }

  .employees .job,
  .employees .fio,
  .employees .phone,
  .employees .email {
    margin-left: 5px;
    font-size: 8px;
  }

  .employees .socials {
    flex-flow: row wrap !important;
  }

  .employees a.btn {
    width: fit-content;
    height: fit-content;
    font-size: 8px;
    padding: 0;
    margin-bottom: 15px;
    line-height: 1;
  }
}