﻿
.contenedor-bolas-navidad {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: relative;
    top: 40px;
    z-index:9999;
}

    .contenedor-bolas-navidad .bola-contenedor {
        position: relative;
        display: inline-block;
        margin-right: 40px;
        width: 55px;
        height: 30px;
        text-align: center;
        transform: translateY(-200px);
    }

    .contenedor-bolas-navidad .bolas-navidad {
        width: 55px;
        height: 150px;
        transform: translateY(-200px);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }

       

    .contenedor-bolas-navidad .bolas-izquierda {
        margin-left: 65px;
    }

    /*.contenedor-bolas-navidad .bola-contenedor .papelitos {
        display: none;
        position: absolute;
        top: 0;
        left: -50%;
        width: 109px;
        height: 172px;
    }*/

   /* .contenedor-bolas-navidad .bola-contenedor:hover .papelitos {
        display: block;
    }*/

   /* .contenedor-bolas-navidad .bola-contenedor .texto {
        position: absolute;
        top: 140px;
        left: 50%;
        transform: translateX(-50%) translateY(-10px);
        font-family: "Roboto Condensed";
        font-size: 16px;
        font-weight: 400;
        text-align: center;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        pointer-events: none;
    }

        .contenedor-bolas-navidad .bola-contenedor .texto.cloud {
            color: var(--cloud-pri);
        }

        .contenedor-bolas-navidad .bola-contenedor .texto.wordpress {
            color: var(--wordpress-pri);
        }

        .contenedor-bolas-navidad .bola-contenedor .texto.envialosimple {
            color: var(--envialosimple-pri);
        }

        .contenedor-bolas-navidad .bola-contenedor .texto.sitiosimple {
            color: var(--sitiosimple-pri);
        }

        .contenedor-bolas-navidad .bola-contenedor .texto.ssl {
            color: var(--cloud-ter);
        }

        .contenedor-bolas-navidad .bola-contenedor .texto.dominio {
            color: var(--dominio-pri);
        }*/

    /*.contenedor-bolas-navidad .bola-contenedor:hover .bolas-navidad.cloud-hover, .contenedor-bolas-navidad .bola-contenedor:hover .bolas-navidad.wordpress-hover, .contenedor-bolas-navidad .bola-contenedor:hover .bolas-navidad.envialosimple-hover, .contenedor-bolas-navidad .bola-contenedor:hover .bolas-navidad.sitiosimple-hover, .contenedor-bolas-navidad .bola-contenedor:hover .bolas-navidad.ssl-hover, .contenedor-bolas-navidad .bola-contenedor:hover .bolas-navidad.dominio-hover {
        opacity: 1;
        visibility: visible;
    }*/

    /*.contenedor-bolas-navidad .bola-contenedor:hover .texto.cloud, .contenedor-bolas-navidad .bola-contenedor:hover .texto.wordpress, .contenedor-bolas-navidad .bola-contenedor:hover .texto.envialosimple, .contenedor-bolas-navidad .bola-contenedor:hover .texto.sitiosimple, .contenedor-bolas-navidad .bola-contenedor:hover .texto.ssl, .contenedor-bolas-navidad .bola-contenedor:hover .texto.dominio {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0px);
    }*/

    /*.contenedor-bolas-navidad .bola-contenedor:hover .bolas-navidad.cloud, .contenedor-bolas-navidad .bola-contenedor:hover .bolas-navidad.wordpress, .contenedor-bolas-navidad .bola-contenedor:hover .bolas-navidad.envialosimple, .contenedor-bolas-navidad .bola-contenedor:hover .bolas-navidad.sitiosimple, .contenedor-bolas-navidad .bola-contenedor:hover .bolas-navidad.ssl, .contenedor-bolas-navidad .bola-contenedor:hover .bolas-navidad.dominio {
        opacity: 0;
        transition: opacity 0.3s ease;
    }*/

@keyframes caerBola {
    0% {
        transform: translateY(-200px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes flotarBola {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

.contenedor-bolas-navidad .bola-contenedor.cloud {
    animation: caerBola 1s 1.5s forwards;
}

.contenedor-bolas-navidad .bola-contenedor.wordpress {
    animation: caerBola 1s 1.8s forwards;
}

.contenedor-bolas-navidad .bola-contenedor.envialosimple {
    animation: caerBola 1s 2.1s forwards;
}

.contenedor-bolas-navidad .bola-contenedor.sitiosimple {
    animation: caerBola 1s 2.4s forwards;
}

.contenedor-bolas-navidad .bola-contenedor.ssl {
    animation: caerBola 1s 2.7s forwards;
}

.contenedor-bolas-navidad .bola-contenedor.dominio {
    animation: caerBola 1s 3s forwards;
}

.contenedor-bolas-navidad .bola-contenedor .bolas-navidad.cloud {
    animation: caerBola 1s 1.5s forwards, flotarBola 3s 1.5s infinite ease-in-out;
}

.contenedor-bolas-navidad .bola-contenedor .bolas-navidad.wordpress {
    animation: caerBola 1s 1.8s forwards, flotarBola 3s 1.8s infinite ease-in-out;
}

.contenedor-bolas-navidad .bola-contenedor .bolas-navidad.envialosimple {
    animation: caerBola 1s 2.1s forwards, flotarBola 3s 2.1s infinite ease-in-out;
}

.contenedor-bolas-navidad .bola-contenedor .bolas-navidad.sitiosimple {
    animation: caerBola 1s 2.4s forwards, flotarBola 3s 2.4s infinite ease-in-out;
}

.contenedor-bolas-navidad .bola-contenedor .bolas-navidad.ssl {
    animation: caerBola 1s 2.7s forwards, flotarBola 3s 2.7s infinite ease-in-out;
}

.contenedor-bolas-navidad .bola-contenedor .bolas-navidad.dominio {
    animation: caerBola 1s 3s forwards, flotarBola 3s 3s infinite ease-in-out;
}

@media (max-width: 640px) {
     .contenedor-bolas-navidad {
        justify-content: center;
    }

         .contenedor-bolas-navidad .bolas-izquierda {
            margin-left: 15px;
        }

         .contenedor-bolas-navidad .bola-contenedor {
            margin-right: 15px;
        }

             .contenedor-bolas-navidad .bola-contenedor:hover .papelitos {
                display: none;
            }

             .contenedor-bolas-navidad .bola-contenedor:hover .bolas-navidad.cloud-hover,  .contenedor-bolas-navidad .bola-contenedor:hover .bolas-navidad.wordpress-hover,  .contenedor-bolas-navidad .bola-contenedor:hover .bolas-navidad.envialosimple-hover,  .contenedor-bolas-navidad .bola-contenedor:hover .bolas-navidad.sitiosimple-hover,  .contenedor-bolas-navidad .bola-contenedor:hover .bolas-navidad.ssl-hover,  .contenedor-bolas-navidad .bola-contenedor:hover .bolas-navidad.dominio-hover {
                opacity: 0;
                visibility: hidden;
            }

             .contenedor-bolas-navidad .bola-contenedor:hover .texto.cloud,  .contenedor-bolas-navidad .bola-contenedor:hover .texto.wordpress,  .contenedor-bolas-navidad .bola-contenedor:hover .texto.envialosimple,  .contenedor-bolas-navidad .bola-contenedor:hover .texto.sitiosimple,  .contenedor-bolas-navidad .bola-contenedor:hover .texto.ssl,  .contenedor-bolas-navidad .bola-contenedor:hover .texto.dominio {
                opacity: 0;
                visibility: hidden;
            }

             .contenedor-bolas-navidad .bola-contenedor:hover .bolas-navidad.cloud,  .contenedor-bolas-navidad .bola-contenedor:hover .bolas-navidad.wordpress,  .contenedor-bolas-navidad .bola-contenedor:hover .bolas-navidad.envialosimple,  .contenedor-bolas-navidad .bola-contenedor:hover .bolas-navidad.sitiosimple,  .contenedor-bolas-navidad .bola-contenedor:hover .bolas-navidad.ssl,  .contenedor-bolas-navidad .bola-contenedor:hover .bolas-navidad.dominio {
                opacity: 1;
            }

    
}
@media (max-width: 600px) {
     .contenedor-bolas-navidad {
        display: none;
    }

}
