/* bg menu https://alvarotrigo.com/blog/hamburger-menu-css/ */

@media only screen and (max-width: 575px){
  body{
    line-height: 1.8rem;
  }

  header .container{
    border-bottom: 0.1rem solid var(--color-normal);
    max-width: calc(100% - 2rem);
    margin: 0 auto;
    padding: 0 0;
    display: flex;
    flex-direction: row-reverse;
  }
  .logo__title{
    font-size: var(--size-paragraphs);
  }
  #menu {
    z-index: 2;
  }

  #menu__bar {
      width: 90%;
      height: 1rem;
      margin: 2rem 0 1rem 1rem;
      cursor: pointer;
    }

  .bar {
      height: .3rem;
      width: 2rem;
      background-color: var(--color-normal);
      display: block;
      border-radius: .3rem;
      transition: 0.3s ease;
    }

    #bar1 {
      transform: translateY(-4px);
    }

    #bar3 {
      transform: translateY(4px);
    }

  .nav {
      transition: 0.3s ease;
      display: none;
    }

  .nav li {
      list-style: none;
      padding: .25rem 0;
    }

  .nav li a {
      color: white;
      font-size: 1.19rem;
      text-decoration: none;
    }

  .nav li a:hover {
      font-weight: bold;
    }

  .menu__bg, #menu {
      top: 0;
      left: 1rem;
      position: absolute;
    }

  .menu__bg {
      z-index: 1;
      width: 0;
      height: 0;
      margin: 2rem 0 0 1.5rem;
      background: radial-gradient(circle, var(--color-light), var(--color-dark));
      border-radius: 50%;
      transition: 0.5s ease;
    }

  .change {
      display: block;
    }

  .change .bar {
      background-color: white;
    }

  .change #bar1 {
      transform: translateY(4px) rotateZ(-45deg);
    }

  .change #bar2 {
      opacity: 0;
    }

  .change #bar3 {
      transform: translateY(-6px) rotateZ(45deg);
    }

  .change-bg {
      width: 30rem;
      height: 28rem;
      transform: translate(-75%,-35%);
    }

    .container{
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .main .container{
      display: flex;
    }

    .btn-container{
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .btn-a{
      width: 50%;
      margin: .5rem 0;
    }
    .main .container{
      grid-template-rows: 3rem 3rem 18rem;
    }
    .main__title{
      font-size: var(--size-ttf-s);
      margin-bottom: .5rem;
    }
    .main__sub-title{
      font-size: var(--size-bttf-s);
      margin-bottom: .5rem;
    }
    .main__description{
      margin-bottom: .7rem;
    }
    .formacion .container,
    .proyectos .container{
      flex-direction: column;
      align-items: center;
    }
  .contacto__content{
    width: 85%;
  }
  .contacto__form {
    width: 100%;
  }
}