/* DOTS Spinner */

.dots.block-spinner {
    display: none;
}

.dots.x5, .dots.x3 {
  width: auto!important;
  padding: 0!important;
}

/*.dots-spinner .spinner-container{
display: inline-flex;
justify-content: center;
align-items: flex-end;
width: 4rem;
}*/

.dots-spinner .spinner-container.x5{
  width: 100%;
  margin-top: 2rem;
}

/*.dots-spinner .spinner-container.x3{
  width: 100%;
}

.dots-spinner .spinner-container span{
width: 10px;
height: 10px;
margin: 0 .15rem;
border-radius: 3px;
background-color: #555;
}
*/
.dots-spinner .spinner-container.x5 span{
  width: 40px;
  height: 40px;
  margin: 0rem 6px;
  border-radius: 15px;
}

.dots-spinner .spinner-container.x3 span{
width: 30px;
height: 30px;
margin: 0rem 6px;
border-radius: 10px;
}

.center{
	text-align: center;
}

.spinner-container .primero{
-webkit-animation: spin-circulo-primero 3s infinite;
-moz-animation: spin-circulo-primero 3s infinite;
animation-fill-mode: backwards;
}

.spinner-container .primero.x5{
-webkit-animation: spin-circulo-primerox5 3s infinite;
-moz-animation: spin-circulo-primerox5 3s infinite;
animation-fill-mode: backwards;
}

.spinner-container .primero.x3{
-webkit-animation: spin-circulo-primerox3 3s infinite;
-moz-animation: spin-circulo-primerox3 3s infinite;
animation-fill-mode: backwards;
}

.spinner-container .segundo{
-webkit-animation: spin-circulo-segundo 3s infinite;
-moz-animation: spin-circulo-segundo 3s infinite;
-webkit-animation-delay: .2s;
-moz-animation-delay: .2s;
animation-fill-mode: backwards;
}
.spinner-container .segundo.x5{
-webkit-animation: spin-circulo-segundox5 3s infinite;
-moz-animation: spin-circulo-segundox5 3s infinite;
-webkit-animation-delay: .2s;
-moz-animation-delay: .2s;
animation-fill-mode: backwards;
}
.spinner-container .segundo.x3{
-webkit-animation: spin-circulo-segundox3 3s infinite;
-moz-animation: spin-circulo-segundox3 3s infinite;
-webkit-animation-delay: .2s;
-moz-animation-delay: .2s;
animation-fill-mode: backwards;
}

.spinner-container .tercero{
-webkit-animation: spin-circulo-tercero 3s infinite;
-moz-animation: spin-circulo-tercero 3s infinite;
-webkit-animation-delay: .4s;
-moz-animation-delay: .4s;
animation-fill-mode: backwards;
}
.spinner-container .tercero.x5{
-webkit-animation: spin-circulo-tercerox5 3s infinite;
-moz-animation: spin-circulo-tercerox5 3s infinite;
-webkit-animation-delay: .4s;
-moz-animation-delay: .4s;
animation-fill-mode: backwards;
}
.spinner-container .tercero.x3{
-webkit-animation: spin-circulo-tercerox3 3s infinite;
-moz-animation: spin-circulo-tercerox3 3s infinite;
-webkit-animation-delay: .4s;
-moz-animation-delay: .4s;
animation-fill-mode: backwards;
}

@-webkit-keyframes spin-circulo-primero {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    background-color: #3c5d9c;
  }
  25% {
    opacity: 0.1;
    -webkit-transform: translatey(-.5rem);
    background-color: #3c5d9c;
  }
  50% {
    opacity: 1;
    -webkit-transform: translateY(0);
    background-color: #f2652a;
  }
  75% {
    opacity: 0.1;
    -webkit-transform: translatey(-.5rem);
    background-color: #f2652a;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    background-color: #3c5d9c;
  }
}

@-webkit-keyframes spin-circulo-primerox5 {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    background-color: #3c5d9c;
  }
  25% {
    opacity: 0.1;
    -webkit-transform: translatey(-2rem);
    background-color: #3c5d9c;
  }
  50% {
    opacity: 1;
    -webkit-transform: translateY(0);
    background-color: #f2652a;
  }
  75% {
    opacity: 0.1;
    -webkit-transform: translatey(-2rem);
    background-color: #f2652a;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    background-color: #3c5d9c;
  }
}
@-webkit-keyframes spin-circulo-primerox3 {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    background-color: #3c5d9c;
  }
  25% {
    opacity: 0.1;
    -webkit-transform: translatey(-1.5rem);
    background-color: #3c5d9c;
  }
  50% {
    opacity: 1;
    -webkit-transform: translateY(0);
    background-color: #f2652a;
  }
  75% {
    opacity: 0.1;
    -webkit-transform: translatey(-1.5rem);
    background-color: #f2652a;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    background-color: #3c5d9c;
  }
}


@-webkit-keyframes spin-circulo-segundo {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    background-color: #9e2ca2;
  }
  25% {
    opacity: 0.1;
    -webkit-transform: translatey(-.5rem);
    background-color: #9e2ca2;
  }
  50% {
    opacity: 1;
    -webkit-transform: translateY(0);
    background-color: #35921a;
  }
  75% {
    opacity: 0.1;
    -webkit-transform: translatey(-.5rem);
    background-color: #35921a;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    background-color: #9e2ca2;
  }
}

@-webkit-keyframes spin-circulo-segundox5 {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    background-color: #9e2ca2;
  }
  25% {
    opacity: 0.1;
    -webkit-transform: translatey(-2rem);
    background-color: #9e2ca2;
  }
  50% {
    opacity: 1;
    -webkit-transform: translateY(0);
    background-color: #35921a;
  }
  75% {
    opacity: 0.1;
    -webkit-transform: translatey(-2rem);
    background-color: #35921a;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    background-color: #9e2ca2;
  }
}
@-webkit-keyframes spin-circulo-segundox3 {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    background-color: #9e2ca2;
  }
  25% {
    opacity: 0.1;
    -webkit-transform: translatey(-1.5rem);
    background-color: #9e2ca2;
  }
  50% {
    opacity: 1;
    -webkit-transform: translateY(0);
    background-color: #35921a;
  }
  75% {
    opacity: 0.1;
    -webkit-transform: translatey(-1.5rem);
    background-color: #35921a;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    background-color: #9e2ca2;
  }
}


@-webkit-keyframes spin-circulo-tercero {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    background-color: #ec174a;
  }
  25% {
    opacity: 0.1;
    -webkit-transform: translatey(-.5rem);
    background-color: #ec174a;
  }
  50% {
    opacity: 1;
    -webkit-transform: translateY(0);
    background-color: #e0a310;
  }
  75% {
    opacity: 0.1;
    -webkit-transform: translatey(-.5rem);
    background-color: #e0a310;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    background-color: #ec174a;
  }
}
@-webkit-keyframes spin-circulo-tercerox5 {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    background-color: #ec174a;
  }
  25% {
    opacity: 0.1;
    -webkit-transform: translatey(-2rem);
    background-color: #ec174a;
  }
  50% {
    opacity: 1;
    -webkit-transform: translateY(0);
    background-color: #e0a310;
  }
  75% {
    opacity: 0.1;
    -webkit-transform: translatey(-2rem);
    background-color: #e0a310;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    background-color: #ec174a;
  }
}
@-webkit-keyframes spin-circulo-tercerox3 {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    background-color: #ec174a;
  }
  25% {
    opacity: 0.1;
    -webkit-transform: translatey(-1.5rem);
    background-color: #ec174a;
  }
  50% {
    opacity: 1;
    -webkit-transform: translateY(0);
    background-color: #e0a310;
  }
  75% {
    opacity: 0.1;
    -webkit-transform: translatey(-1.5rem);
    background-color: #e0a310;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    background-color: #ec174a;
  }
}

/*.dots .text{
display: inline-flex;
font-family: 'Dosis', sans-serif;
text-transform: uppercase;
color: #2d6370;
font-size: 15px;
font-weight: 600;
}
*/
.dots .text.x5{
  display: block;
  font-size: 35px;
  margin-top: 2rem;
}
/*.dots .text.x3 {
display: block;
font-size: 25px;
text-align: center;
margin-top: 40px;
}*/

.spinner-blocker {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    position: absolute;
    z-index: 1;
}

.spinner-blocker.nopadding {
  top: 0;
  left: 0;
}

.spinner-blocker-small {
    width: 100%;
}
.spinner-blocker-transparent {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}

.spinner-blocker.blue-blocker-background {
    background: rgba(235, 241, 247, 0.8);
}
.spinner-blocker.black-blocker-background {
    background: rgba(0, 0, 0, 0.2);
}

.spinner-background {
    height: 320px;
    width: 320px;
    margin-top: 1rem;
    border-radius: 1rem;
    margin: 10rem auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner-background.x3 {
    height: 260px;
    width: 320px;
	padding-top: 2rem;
}

.spinner-background.white {
    background: white;
    align-items: center;
    box-shadow: 0rem 0rem 5.8rem 0.4rem #c8d6df;
}
/* CUBE SPINNER */
.cube.panelLoad.dots-spinner {
    display: none;
}

.cube {
  width: 80px;
  height: 80px;
  line-height: 110px;
  text-align: center;
  font-size: 50px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 0.5s 0.1s;
  transition: transform 3.5s 3.1s;
  perspective: 9999px;
  color: #333;
  margin: -40px 0 0 -40px;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  margin-left: -37px;
  top: 65px;
  opacity: 1;
}
.cube.panelLoad {
  z-index: 11;
  line-height: 1;
  top: 50%;
  margin-top: -60px;
  -webkit-animation: panel 5.2s infinite forwards;
  animation: panel 5.2s infinite forwards;
}
.cube.panelLoad .cube-face {
  color: #dae8fd;
  box-shadow: inset 0 0 0 1px #dae8fd, 0 0 1px 1px #dae8fd;
}
.cube .cube-face {
  width: inherit;
  height: inherit;
  position: absolute;
  background: #dae8fd;
  box-shadow: inset 0 0 0 1px #dae8fd, 0 0 1px 1px #dae8fd;
  opacity: 1;
}
.cube .cube-face img{width: 80px;}

.cube .cube-face-front {
  transform: translate3d(0, 0, 40px);
  -webkit-transform: translate3d(0, 0, 40px);
  font-size: 57px;
}
.cube .cube-face-back {
  -webkit-transform: rotateY(180deg) translate3d(0, 0, 40px);
  transform: rotateY(180deg) translate3d(0, 0, 40px);
}
.cube .cube-face-left {
  -webkit-transform: rotateY(-90deg) translate3d(0, 0, 40px);
  transform: rotateY(-90deg) translate3d(0, 0, 40px);
}
.cube .cube-face-right {
  -webkit-transform: rotateY(90deg) translate3d(0, 0, 40px);
  transform: rotateY(90deg) translate3d(0, 0, 40px);
}
.cube .cube-face-top {
  -webkit-transform: rotateX(90deg) translate3d(0, 0, 40px);
  transform: rotateX(90deg) translate3d(0, 0, 40px);
}
.cube .cube-face-bottom {
  -webkit-transform: rotateX(-90deg) translate3d(0, 0, 40px);
  transform: rotateX(-90deg) translate3d(0, 0, 40px);
}

@-webkit-keyframes panel {
  0% {
    -webkit-transform: rotateY(0deg) rotateZ(0deg);
  }
  20% {
    -webkit-transform: rotateY(90deg) rotateZ(0deg);
  }
  40% {
    -webkit-transform: rotateX(45deg) rotateZ(45deg);
  }
  60% {
    -webkit-transform: rotateX(90deg) rotateY(180deg) rotateX(90deg);
  }
  80% {
    -webkit-transform: rotateX(310deg) rotateZ(230deg);
  }
  100% {
    -webkit-transform: rotateX(360deg) rotateZ(360deg);
  }
}
@keyframes panel {
  0% {
    -webkit-transform: rotateY(0deg) rotateZ(0deg);
    transform: rotateY(0deg) rotateZ(0deg);
  }
  20% {
    -webkit-transform: rotateY(90deg) rotateZ(0deg);
    transform: rotateY(90deg) rotateZ(0deg);
  }
  40% {
    -webkit-transform: rotateX(45deg) rotateZ(45deg);
    transform: rotateX(45deg) rotateZ(45deg);
  }
  60% {
    -webkit-transform: rotateX(90deg) rotateY(180deg) rotateX(90deg);
    transform: rotateX(90deg) rotateY(180deg) rotateX(90deg);
  }
  80% {
    -webkit-transform: rotateX(310deg) rotateZ(230deg);
    transform: rotateX(310deg) rotateZ(230deg);
  }
  100% {
    -webkit-transform: rotateX(360deg) rotateZ(360deg);
    transform: rotateX(360deg) rotateZ(360deg);
  }
}