@import url('loader3Spinner.css');

.loader {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    margin: auto;
    animation: rotate-move 2s ease-in-out infinite;
    -webkit-animation: rotate-move 2s ease-in-out infinite;
    -moz-animation: rotate-move 2s ease-in-out infinite;
    -o-animation: rotate-move 2s ease-in-out infinite;
    z-index: 1;
}

.dot {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #000;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}


.dot-3 {
    background-color: transparent;
    animation: dot-3-move 2s ease infinite, index 6s ease infinite;
    -webkit-animation: dot-3-move 2s ease infinite, index 6s ease infinite;
    -moz-animation: dot-3-move 2s ease infinite, index 6s ease infinite;
    -o-animation: dot-3-move 2s ease infinite, index 6s ease infinite;
    background-image: url('Images/icono-spinner.png');
    background-repeat: no-repeat;
    background-size: contain;
}

.dot-2 {
    background-color: transparent;
    animation: dot-2-move 2s ease infinite, index 6s -4s ease infinite;
    -webkit-animation: dot-2-move 2s ease infinite, index 6s -4s ease infinite;
    -moz-animation: dot-2-move 2s ease infinite, index 6s -4s ease infinite;
    -o-animation: dot-2-move 2s ease infinite, index 6s -4s ease infinite;
    background-repeat: no-repeat;
    background-image: url('Images/icono-spinner.png');
    background-size: contain;
}

.dot-1 {
    background-color: transparent;
    animation: dot-1-move 2s ease infinite, index 6s -2s ease infinite;
    -webkit-animation: dot-1-move 2s ease infinite, index 6s -2s ease infinite;
    -moz-animation: dot-1-move 2s ease infinite, index 6s -2s ease infinite;
    -o-animation: dot-1-move 2s ease infinite, index 6s -2s ease infinite;
    background-repeat: no-repeat;
    background-image: url('Images/icono-spinner.png');
    background-size: contain;
}

@-webkit-keyframes dot-3-move {
    20% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        opacity: 0;
    }

    45% {
        transform: translateY(-18px) scale(.45);
        -webkit-transform: translateY(-18px) scale(.45);
        -moz-transform: translateY(-18px) scale(.45);
        -o-transform: translateY(-18px) scale(.45);
        opacity: 1;
    }

    60% {
        transform: translateY(-90px) scale(.45);
        -webkit-transform: translateY(-90px) scale(.45);
        -moz-transform: translateY(-90px) scale(.45);
        -o-transform: translateY(-90px) scale(.45);
        opacity: 0.5;
    }

    80% {
        transform: translateY(-90px) scale(.45);
        -webkit-transform: translateY(-90px) scale(.45);
        -moz-transform: translateY(-90px) scale(.45);
        -o-transform: translateY(-90px) scale(.45);
        opacity: 1;
    }

    100% {
        transform: translateY(0px) scale(1);
        -webkit-transform: translateY(0px) scale(1);
        -moz-transform: translateY(0px) scale(1);
        -o-transform: translateY(0px) scale(1);
        opacity: 1;
    }
}

@-moz-keyframes dot-3-move {
    20% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        opacity: 0;
    }

    45% {
        transform: translateY(-18px) scale(.45);
        -webkit-transform: translateY(-18px) scale(.45);
        -moz-transform: translateY(-18px) scale(.45);
        -o-transform: translateY(-18px) scale(.45);
        opacity: 1;
    }

    60% {
        transform: translateY(-90px) scale(.45);
        -webkit-transform: translateY(-90px) scale(.45);
        -moz-transform: translateY(-90px) scale(.45);
        -o-transform: translateY(-90px) scale(.45);
        opacity: 0.5;
    }

    80% {
        transform: translateY(-90px) scale(.45);
        -webkit-transform: translateY(-90px) scale(.45);
        -moz-transform: translateY(-90px) scale(.45);
        -o-transform: translateY(-90px) scale(.45);
        opacity: 1;
    }

    100% {
        transform: translateY(0px) scale(1);
        -webkit-transform: translateY(0px) scale(1);
        -moz-transform: translateY(0px) scale(1);
        -o-transform: translateY(0px) scale(1);
        opacity: 1;
    }
}

@keyframes dot-3-move {
    20% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        opacity: 0;
    }

    45% {
        transform: translateY(-18px) scale(.45);
        -webkit-transform: translateY(-18px) scale(.45);
        -moz-transform: translateY(-18px) scale(.45);
        -o-transform: translateY(-18px) scale(.45);
        opacity: 1;
    }

    60% {
        transform: translateY(-90px) scale(.45);
        -webkit-transform: translateY(-90px) scale(.45);
        -moz-transform: translateY(-90px) scale(.45);
        -o-transform: translateY(-90px) scale(.45);
        opacity: 0.5;
    }

    80% {
        transform: translateY(-90px) scale(.45);
        -webkit-transform: translateY(-90px) scale(.45);
        -moz-transform: translateY(-90px) scale(.45);
        -o-transform: translateY(-90px) scale(.45);
        opacity: 1;
    }

    100% {
        transform: translateY(0px) scale(1);
        -webkit-transform: translateY(0px) scale(1);
        -moz-transform: translateY(0px) scale(1);
        -o-transform: translateY(0px) scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes dot-2-move {
    20% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        opacity: 0;
    }

    45% {
        transform: translate(-16px, 12px) scale(.45);
        -webkit-transform: translate(-16px, 12px) scale(.45);
        -moz-transform: translate(-16px, 12px) scale(.45);
        -o-transform: translate(-16px, 12px) scale(.45);
        opacity: 1;
    }

    60% {
        transform: translate(-80px, 60px) scale(.45);
        -webkit-transform: translate(-80px, 60px) scale(.45);
        -moz-transform: translate(-80px, 60px) scale(.45);
        -o-transform: translate(-80px, 60px) scale(.45);
        opacity: 0.5;
    }

    80% {
        transform: translate(-80px, 60px) scale(.45);
        -webkit-transform: translate(-80px, 60px) scale(.45);
        -moz-transform: translate(-80px, 60px) scale(.45);
        -o-transform: translate(-80px, 60px) scale(.45);
        opacity: 1;
    }

    100% {
        transform: translateY(0px) scale(1);
        -webkit-transform: translateY(0px) scale(1);
        -moz-transform: translateY(0px) scale(1);
        -o-transform: translateY(0px) scale(1);
        opacity: 1;
    }
}

@-moz-keyframes dot-2-move {
    20% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        opacity: 0;
    }

    45% {
        transform: translate(-16px, 12px) scale(.45);
        -webkit-transform: translate(-16px, 12px) scale(.45);
        -moz-transform: translate(-16px, 12px) scale(.45);
        -o-transform: translate(-16px, 12px) scale(.45);
        opacity: 1;
    }

    60% {
        transform: translate(-80px, 60px) scale(.45);
        -webkit-transform: translate(-80px, 60px) scale(.45);
        -moz-transform: translate(-80px, 60px) scale(.45);
        -o-transform: translate(-80px, 60px) scale(.45);
        opacity: 0.5;
    }

    80% {
        transform: translate(-80px, 60px) scale(.45);
        -webkit-transform: translate(-80px, 60px) scale(.45);
        -moz-transform: translate(-80px, 60px) scale(.45);
        -o-transform: translate(-80px, 60px) scale(.45);
        opacity: 1;
    }

    100% {
        transform: translateY(0px) scale(1);
        -webkit-transform: translateY(0px) scale(1);
        -moz-transform: translateY(0px) scale(1);
        -o-transform: translateY(0px) scale(1);
        opacity: 1;
    }
}

@keyframes dot-2-move {
    20% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        opacity: 0;
    }

    45% {
        transform: translate(-16px, 12px) scale(.45);
        -webkit-transform: translate(-16px, 12px) scale(.45);
        -moz-transform: translate(-16px, 12px) scale(.45);
        -o-transform: translate(-16px, 12px) scale(.45);
        opacity: 1;
    }

    60% {
        transform: translate(-80px, 60px) scale(.45);
        -webkit-transform: translate(-80px, 60px) scale(.45);
        -moz-transform: translate(-80px, 60px) scale(.45);
        -o-transform: translate(-80px, 60px) scale(.45);
        opacity: 0.5;
    }

    80% {
        transform: translate(-80px, 60px) scale(.45);
        -webkit-transform: translate(-80px, 60px) scale(.45);
        -moz-transform: translate(-80px, 60px) scale(.45);
        -o-transform: translate(-80px, 60px) scale(.45);
        opacity: 1;
    }

    100% {
        transform: translateY(0px) scale(1);
        -webkit-transform: translateY(0px) scale(1);
        -moz-transform: translateY(0px) scale(1);
        -o-transform: translateY(0px) scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes dot-1-move {

    20% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        opacity: 0;
    }

    45% {
        transform: translate(16px, 12px) scale(.45);
        -webkit-transform: translate(16px, 12px) scale(.45);
        -moz-transform: translate(16px, 12px) scale(.45);
        -o-transform: translate(16px, 12px) scale(.45);
        opacity: 1;
    }

    60% {
        transform: translate(80px, 60px) scale(.45);
        -webkit-transform: translate(80px, 60px) scale(.45);
        -moz-transform: translate(80px, 60px) scale(.45);
        -o-transform: translate(80px, 60px) scale(.45);
        opacity: 0.5;
    }

    80% {
        transform: translate(80px, 60px) scale(.45);
        -webkit-transform: translate(80px, 60px) scale(.45);
        -moz-transform: translate(80px, 60px) scale(.45);
        -o-transform: translate(80px, 60px) scale(.45);
        opacity: 1;
    }

    100% {
        transform: translateY(0px) scale(1);
        -webkit-transform: translateY(0px) scale(1);
        -moz-transform: translateY(0px) scale(1);
        -o-transform: translateY(0px) scale(1);
        opacity: 1;
    }
}

@keyframes dot-1-move {
    20% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        opacity: 0;
    }

    45% {
        transform: translate(16px, 12px) scale(.45);
        -webkit-transform: translate(16px, 12px) scale(.45);
        -moz-transform: translate(16px, 12px) scale(.45);
        -o-transform: translate(16px, 12px) scale(.45);
        opacity: 1;
    }

    60% {
        transform: translate(80px, 60px) scale(.45);
        -webkit-transform: translate(80px, 60px) scale(.45);
        -moz-transform: translate(80px, 60px) scale(.45);
        -o-transform: translate(80px, 60px) scale(.45);
        opacity: 0.5;
    }

    80% {
        transform: translate(80px, 60px) scale(.45);
        -webkit-transform: translate(80px, 60px) scale(.45);
        -moz-transform: translate(80px, 60px) scale(.45);
        -o-transform: translate(80px, 60px) scale(.45);
        opacity: 1;
    }

    100% {
        transform: translateY(0px) scale(1);
        -webkit-transform: translateY(0px) scale(1);
        -moz-transform: translateY(0px) scale(1);
        -o-transform: translateY(0px) scale(1);
        opacity: 1;
    }
}

@-moz-keyframes dot-1-move {

    20% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        opacity: 0;
    }

    45% {
        transform: translate(16px, 12px) scale(.45);
        -webkit-transform: translate(16px, 12px) scale(.45);
        -moz-transform: translate(16px, 12px) scale(.45);
        -o-transform: translate(16px, 12px) scale(.45);
        opacity: 1;
    }

    60% {
        transform: translate(80px, 60px) scale(.45);
        -webkit-transform: translate(80px, 60px) scale(.45);
        -moz-transform: translate(80px, 60px) scale(.45);
        -o-transform: translate(80px, 60px) scale(.45);
        opacity: 0.5;
    }

    80% {
        transform: translate(80px, 60px) scale(.45);
        -webkit-transform: translate(80px, 60px) scale(.45);
        -moz-transform: translate(80px, 60px) scale(.45);
        -o-transform: translate(80px, 60px) scale(.45);
        opacity: 1;
    }

    100% {
        transform: translateY(0px) scale(1);
        -webkit-transform: translateY(0px) scale(1);
        -moz-transform: translateY(0px) scale(1);
        -o-transform: translateY(0px) scale(1);
        opacity: 1;
    }
}


@keyframes rotate-move {
    55% {
        transform: translate(-50%, -50%) rotate(0deg);
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        -moz-transform: translate(-50%, -50%) rotate(0deg);
        -o-transform: translate(-50%, -50%) rotate(0deg);
    }

    80% {
        transform: translate(-50%, -50%) rotate(360deg);
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        -moz-transform: translate(-50%, -50%) rotate(360deg);
        -o-transform: translate(-50%, -50%) rotate(360deg);
    }

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

@-webkit-keyframes rotate-move {
    55% {
        transform: translate(-50%, -50%) rotate(0deg);
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        -moz-transform: translate(-50%, -50%) rotate(0deg);
        -o-transform: translate(-50%, -50%) rotate(0deg);
    }

    80% {
        transform: translate(-50%, -50%) rotate(360deg);
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        -moz-transform: translate(-50%, -50%) rotate(360deg);
        -o-transform: translate(-50%, -50%) rotate(360deg);
    }

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

@-moz-keyframes rotate-move {
    55% {
        transform: translate(-50%, -50%) rotate(0deg);
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        -moz-transform: translate(-50%, -50%) rotate(0deg);
        -o-transform: translate(-50%, -50%) rotate(0deg);
    }

    80% {
        transform: translate(-50%, -50%) rotate(360deg);
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        -moz-transform: translate(-50%, -50%) rotate(360deg);
        -o-transform: translate(-50%, -50%) rotate(360deg);
    }

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

@keyframes index {
    0%, 100% {
        z-index: 3
    }

    33.3% {
        z-index: 2
    }

    66.6% {
        z-index: 1
    }
}

@-moz-keyframes index {
    0%, 100% {
        z-index: 3
    }

    33.3% {
        z-index: 2
    }

    66.6% {
        z-index: 1
    }
}


@-webkit-keyframes index {
    0%, 100% {
        z-index: 3
    }

    33.3% {
        z-index: 2
    }

    66.6% {
        z-index: 1
    }
}