.about-task {
  padding: 37px 0 60px;
  position: relative;
  opacity: 0;
  -webkit-transform: translateY(100px);
  transform: translateY(100px);
  -webkit-transition: opacity .3s ease, -webkit-transform .3s ease;
  transition: opacity .3s ease, -webkit-transform .3s ease;
  transition: opacity .3s ease, transform .3s ease;
  transition: opacity .3s ease, transform .3s ease, -webkit-transform .3s ease; }
  @media only screen and (max-width: 767px) {
    .about-task {
      padding: 37px 0 50px; } }
  @media only screen and (max-width: 576px) {
    .about-task {
      padding: 20px 0 40px; } }
  .about-task.active {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  .about-task__content {
    margin: 0 auto;
    width: 100%;
    max-width: 1120px;
    border: 8px solid #253746;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 0 40px 21px; }
    @media only screen and (max-width: 767px) {
      .about-task__content {
        padding: 0 10px 10px; } }

.about-task__content.readable--modif {
  border: 8px solid #70c8d9;
}
  .about-task__title {
    color: #253746;
    font: bold 40px/130% "Stem", sans-serif;
    text-align: center;
    text-transform: uppercase;
    padding: 0 28px;
    background: #ffffff;
    margin: -27px 0 9px; }
    @media only screen and (max-width: 991px) {
      .about-task__title {
        font: bold 30px/130% "Stem", sans-serif;
        margin: -27px 0 24px; } }
    @media only screen and (max-width: 767px) {
      .about-task__title {
        font: bold 24px/130% "Stem", sans-serif;
        margin: -22px 0 20px; } }
  .about-task__info {
    margin: 0 auto;
    max-width: 928px;
    font: 300 18px/154% "Stem", sans-serif; }
    @media only screen and (max-width: 991px) {
      .about-task__info {
        font: 300 22px/160% "Stem", sans-serif; } }
    @media only screen and (max-width: 767px) {
      .about-task__info {
        font: 300 18px/150% "Stem", sans-serif; } }


.info-text {
  position: relative;
  display: block;
  padding: 0 0 58px 0;
  opacity: 0;
  -webkit-transform: translateY(100px);
  transform: translateY(100px);
  -webkit-transition: opacity .3s ease, -webkit-transform .3s ease;
  transition: opacity .3s ease, -webkit-transform .3s ease;
  transition: opacity .3s ease, transform .3s ease;
  transition: opacity .3s ease, transform .3s ease, -webkit-transform .3s ease; }
  .info-text.active {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  @media only screen and (max-width: 767px) {
    .info-text {
      padding: 0 0 30px; } }
  .info-text__content {
    position: relative;
    display: block;
    text-align: center;
    max-width: 930px;
    margin: 0 auto;
    font: 300 26px/154% "Stem", sans-serif; }
  @media only screen and (max-width: 991px) {
    .info-text__content {
      font: 300 22px/160% "Stem", sans-serif; } }
  @media only screen and (max-width: 767px) {
    .info-text__content {
      font: 300 18px/150% "Stem", sans-serif; } }

.about-task.aero--bg { background: #F6F9FB; padding: 80px 0 100px 0; }
.about-task.aero--bg .about-task__title { background: #F6F9FB; }
.info-text.aero--bg { padding: 0; }
.about-task__content.aero--modif { border: 6px solid #00AFDD; }