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

    .especialh2{
        font-size: 30pt;
        margin-top: -100px;
    }

    .section {
        text-align: center;
    }

    .section img{
        width: 50%;
        height: auto;
        text-align: left;
        margin: 0 20px 20px 20px;
    }

    span.explanation {
      font-size: 12vw;
      line-height: 20vw;
    }

    .loading-text {
      position: relative;
      left: 0;
      margin: 0;
      text-align: center;
      width: 350px;
      height: auto;
    }

    .loading-text span {
      text-align: center;
      color: #fff;
    }
    p {
        text-align: left;
    }

  }

  @media (min-width: 401px) and (max-width: 600px) {

    span.explanation {
      font-size: 16vw;
      line-height: 20vw;
    }

    .loading-text {
      position: relative;
      left: 0;
      margin: 0;
      text-align: center;
      width: 600px;
      height: auto;
    }

    .loading-text span {
      text-align: center;
      color: #fff;
    }
  }

  @media (min-width: 601px) and (max-width: 1000px) {

    .section img{
        width: 80%;
        height: auto;
        text-align: left;
        margin: 0 20px 20px 20px;
    }

    span.explanation {
      font-size: 60pt;
      line-height: 60pt;
    }

    .loading-text {
      position: relative;
      left: 0;
      margin: 0;
      text-align: center;
      min-width: 100px;
      max-width: 800px;
      height: auto;
    }

    .loading-text span {
      text-align: center;
      color: #fff;
    }
  }


  @media (min-width: 1001px) and (max-width: 10000px) {
    span.explanation {
      font-size: 60pt;
      line-height: 80pt;
    }

    .loading-text {
      position: relative;
      left: 5%;
      margin: 0;
      text-align: center;
      min-width: 100px;
      max-width: 800px;
      height: auto;
    }

    .loading-text span {
      text-align: center;
      color: #fff;
    }
  }