body {
    background: #000 !important;
    color: #FFF !important;
    font-size: 1.5em;
}

.lds-ring {
    display: inline-block;
    position: relative;
    width: 115px;
    height: 115px;
    margin: 5% auto;
}

.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 95px;
    height: 95px;
    margin: 8px;
    border: 8px solid #b6b7b2;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #b6b7b2 transparent transparent transparent;
    -webkit-animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
    }
}

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

    /* reglas CSS */
    body {
        font-size: 0.8em;
    }

    h1 {
        margin-top: 18% !important;
    }

    .lds-ring {
        display: inline-block;
        position: relative;
        width: 100px;
        height: 100px;
        margin: 10% auto;
    }

    .lds-ring div {
        box-sizing: border-box;
        display: block;
        position: absolute;
        width: 80px;
        height: 80px;
        margin: 8px;
        border: 8px solid #b6b7b2;
        border-radius: 50%;
        animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        border-color: #b6b7b2 transparent transparent transparent;
        -webkit-animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    }
}
  @media screen and (max-width:1024px) and (min-width:640px) {

      /* reglas CSS */
      body {
          font-size: 0.8em;
      }

      h1 {
          margin-top: 18% !important;
      }

      .lds-ring {
          display: inline-block;
          position: relative;
          width: 100px;
          height: 100px;
          margin: 10% auto;
      }

      .lds-ring div {
          box-sizing: border-box;
          display: block;
          position: absolute;
          width: 80px;
          height: 80px;
          margin: 8px;
          border: 8px solid #b6b7b2;
          border-radius: 50%;
          animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
          border-color: #b6b7b2 transparent transparent transparent;
          -webkit-animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
      }
  }