@import url('https://fonts.googleapis.com/css?family=Montserrat|Raleway&display=swap');

.lds-roller {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 40px 40px;
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  margin: -4px 0 0 -4px;
}
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
  top: 63px;
  left: 63px;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
  top: 68px;
  left: 56px;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
  top: 71px;
  left: 48px;
}
.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
  top: 72px;
  left: 40px;
}
.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
  top: 71px;
  left: 32px;
}
.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
  top: 68px;
  left: 24px;
}
.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
  top: 63px;
  left: 17px;
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 56px;
  left: 12px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


.loader-text {
    color: #fff;
    font-family: 'Raleway', sans-serif;
  }
  
  .loader-text:after {
    content: 'Cargando';
    animation: load 2s linear infinite;
  }
  
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  @keyframes load {
    0% {
      content: 'Cargando';
    }
    33% {
      content: 'Cargando.';
    }
    67% {
      content: 'Cargando..';
    }
    100% {
      content: 'Cargando...';
    }
  }

.loading-main {
    background-color: #485461;
    background-image: linear-gradient(315deg, #485461 0%, #28313b 74%);
    height: 100%;
    width: 100%;
}


body {
    background-color: black;
    margin: 0;
}

html, body {
    align-items: center;
    background-color: #000000;
background-image: linear-gradient(147deg, #000000 0%, #2c3e50 74%);
    
    height: 100%;
    width: 100%;
    justify-content: center;
    margin: 0;
  }
  
  .loading {
    
    
    width: 60px;

  }

  .loading-main {
height: 100%;
  sddisplay: flex;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  }

  .container-main {
    height: 100%;
      sddisplay: flex;
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: center;
      }

      .title-main {
        height: 100%;
          sddisplay: flex;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-flow: column;
          z-index: 30;
          }

            .title-main h1 {
                text-align: center;
                font-family: 'Raleway', sans-serif;
                color: white;
            }
            .title-main p {
                text-align: center;
                font-family: 'Montserrat', sans-serif;
                color: white;
            }



          @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);

          /* General Buttons */
          button {
            width: 130px;
            height: 40px;
            background: linear-gradient(to bottom, #4eb5e5 0%,#389ed5 100%); /* W3C */
            border: none;
            border-radius: 5px;
            position: relative;
            border-bottom: 4px solid #2b8bc6;
            color: #fbfbfb;
            font-weight: 600;
            font-family: 'Open Sans', sans-serif;
            text-shadow: 1px 1px 1px rgba(0,0,0,.4);
            font-size: 15px;
            text-align: left;
            text-indent: 5px;
            box-shadow: 0px 3px 0px 0px rgba(0,0,0,.2);
            cursor: pointer;
          
          /* Just for presentation */  
            display: block;
            margin: 0 auto;
            margin-bottom: 20px;
          }
          button:active {
            box-shadow: 0px 2px 0px 0px rgba(0,0,0,.2);
            top: 1px;
          }
          
          button:after {
            content: "";
            width: 0;
            height: 0;
            display: block;
            border-top: 20px solid #187dbc;
            border-bottom: 20px solid #187dbc;
            border-left: 16px solid transparent;
            border-right: 20px solid #187dbc;
            position: absolute;
            opacity: 0.6; 
            right: 0;
            top: 0;
            border-radius: 0 5px 5px 0;  
          }
          
          /* Button pointing left */
          
          button.back {
            text-align: right;
            padding-right: 12px;
            box-sizing: border-box;
          }
          button.back:after {
            content: "";
            width: 0;
            height: 0;
            display: block;
            border-top: 20px solid #187dbc;
            border-bottom: 20px solid #187dbc;
            border-right: 16px solid transparent;
            border-left: 20px solid #187dbc;
            position: absolute;
            opacity: 0.6; 
            left: 0;
            top: 0;
            border-radius: 5px 0 0 5px;    
          }
          
          /* Single buttons */
          
          button.site {
            width: 40px;
            text-align: center;
            text-indent: 0;
          }
          button.site:after{
            display: none;
          }