@media screen  and (max-width: 850px) {
  .surname{
    font-size: 3rem;
  }

  .experience{
    width: 70%;
  }
  .skill-name{
    width: 40%;
  }

  .timeline-column {
    min-width: 17.7vw;
  }

  .skill:not(:last-of-type) {
    margin-bottom: 2.5vw;
  }
}


@media screen  and (max-width: 780px){
  .surname{
    font-size: 2.5rem;
  }

  .row{
    flex-wrap: wrap;
  }

  .list-social-icons{
    justify-content: space-around;
  }

  .link-social-icon span{
    display: none;
  }

  .link-social-icon i{
    font-size: 3rem;
  }

  .experience{
    width: 100%;
  }

  .knowledge{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }

  .pro-skills,
  .per-skills {
    width: 50%;
  }

  .list-hobbies{
    flex-direction: row;
    flex-wrap: wrap;
    width: 90%;
    min-height: 20vw;
    align-items: center;
  }

  .hobby{
    width: 15vw;
  }
}

@media screen  and (max-width: 620px) {

  html, body {
    font-size: 12px;
  }

  .general {
    flex-direction: column;
  }

  .profile {
    width: 97%;
  }

  .avatar {
    max-width: 35vw;
    margin: 0 8.3vw 8.3vw 0;
  }

  .info {
    width: 98%;
    flex-direction: row;
  }

  .contacts {
    /*width: 45vw;*/
    justify-content: start;
  }

  .info {
    flex-direction: column;
  }

  .contacts {
    margin-bottom: 5vw;
    border: none;
  }

  .about {
    border: none;
  }

  .about-description,
  .record-description {
    line-height: 2rem;
  }

  .record-position {
    white-space: normal;
  }

  .record:not(:last-of-type) {
    margin-bottom: 6vw;
  }
}

@media screen  and (max-width: 510px) {
  .timeline-column{
    min-width: 23.7vw;
    margin-right: 6vw;
  }

  .record:not(:last-of-type) {
    margin-bottom: 6vw;
  }

  .per-skills,
  .pro-skills{
    width: 100%;
  }

  .progress-bar{
    border: 0.2vw solid;
  }

  .hobbies{
    width: 100%;
  }

  .list-hobbies{
    padding-left:7vw;
    min-height: 35vw;
  }

  .hobby{
    width: 25vw;
  }

  .language{
    width: 100%;
  }
}

@media screen and (min-width: 980px) {
  html, body {
    font-size: 13px;
  }
}

@media screen and (min-width: 1440px) {
  html, body {
    font-size: 19px;
  }
}

@media screen and (min-width: 1600px) {
  html, body {
    font-size: 21px;
  }
}

@media screen and (min-width: 1920px) {
  html, body {
    font-size: 25px;
  }
}

@media screen and (min-width: 2550px) {
  html, body {
    font-size: 33px;
  }
}