.linea-azul-block {
    box-sizing: border-box;
    position: relative;
    height: 400px;
}

.linea-azul-block * {
    color: #ffffff;
}

.linea-azul-block .linea {
    display: block;
    height: 3px;
    width: 100vw;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.linea-azul-block .puntos {
    position: absolute;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    height: 17em;
    width: 15em;
    /* background: violet; */
    border-radius: 20px;
}

.linea-azul-block .punto1 {
    left: 0%;
    transform: translate(0%, -50%);
}

.linea-azul-block .punto2 {
    left: 33.33%;
    transform: translate(-33.33%, -50%);
}

.linea-azul-block .punto3 {
    left: 66.66%;
    transform: translate(-66.66%, -50%);
}

.linea-azul-block .punto-final {
    left: 100%;
    top: 28%;
    transform: translate(-100%, -50%);
    background: #29ABE2;
    height: 8em;
}

.linea-azul-block .punto-final .marcador {
    top: 129%;
}

.linea-azul-block .punto-final:after,
.linea-azul-block .punto-final:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.linea-azul-block .punto-final:after {
    border-top-color: #29ABE2;
    border-width: 10px;
    margin-left: -10px;
}

.linea-azul-block .punto-final:before {
    border-width: 35px;
    margin-left: -35px;
}

.linea-azul-block .marcador {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 1em;
    width: 1em;
    border-radius: 20px;
    background: rgb(255, 255, 255);
    transition: all 1s ease;
}

.contenido {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0px;
    height: 0px;
    transition: all 1s ease;
    background: #ffffff;
    border-radius: 20px;
}

.linea-azul-block .contenido.mostrarContenedor {
    width: 100%;
    height: 100%;

}

.linea-azul-block .titulo,
.linea-azul-block .texto {
    color: #ffffff;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 80%;
    z-index: 3;
    transition: all 1s ease;
}

.linea-azul-block .texto {
    color: gray;
    top: 65%;
    transform: translate(-50%, 0);
    font-size: 0px;
    opacity: 0;
}

.linea-azul-block img.icono {
    opacity: 0;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 80%);
    width: 0px;
    transition: all 1s ease;
}

.linea-azul-block .punto1 .titulo {
    transform: translate(-50%, 100%);
}

.linea-azul-block .punto2 .titulo {
    transform: translate(-50%, -160%);
}

.linea-azul-block .punto3 .titulo {
    transform: translate(-50%, 100%);
}

.linea-azul-block .titulo.mostrarTitulo {
    transform: translate(-50%, -50%) !important;
    color: #2E3192;
}

.linea-azul-block span.texto.mostrarContenido {
    opacity: 1;
    font-size: 14px;
}

.linea-azul-block img.icono.mostrarContenido {
    opacity: 1;
    width: 40px;
}

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

    .linea-azul-block .linea {
        transform: translate(-50%, -50%) rotate(90deg);
    }

    .linea-azul-block .puntos {
        left: 50% !important;
        transform: translateX(-50%) !important;
        height: 5em;
        width: 40vw;
    }

    .linea-azul-block .texto {
        text-align: left;
        width: 70%;
        left: 55%;
        top: 35%;
    }

    .linea-azul-block img.icono {
        left: 0%;
        transform: translate(10%, 50%);
    }

    .linea-azul-block .punto1 {
        top: 0%;
    }

    .linea-azul-block .punto2 {
        top: 25%;
    }

    .linea-azul-block .punto3 {
        top: 50%;
    }

    .linea-azul-block .punto1 .contenido.mostrarContenedor,
    .linea-azul-block .punto3 .contenido.mostrarContenedor {
        left: -7%;
    }

    .linea-azul-block .punto2 .contenido.mostrarContenedor {
        left: 107%;
    }

    .linea-azul-block .punto1 .titulo.mostrarTitulo,
    .linea-azul-block .punto3 .titulo.mostrarTitulo {
        text-align: left;
        transform: translate(-109%, -155%) !important;
    }

    .linea-azul-block .punto2 .titulo {
        transform: translate(-50%, 50%);
    }

    .linea-azul-block .punto2 .titulo.mostrarTitulo {
        text-align: left;
        transform: translate(34%, -100%) !important;
        line-height: 1;
    }

    .linea-azul-block .punto2 span.texto.mostrarContenido {
        line-height: 1;
        top: 55%;
    }

    .linea-azul-block .puntos.punto-final {
        left: 75% !important;
        top: 75%;
    }

    .linea-azul-block .punto-final .marcador {
        top: 50%;
        left: -10.5%;
    }

    .linea-azul-block .punto-final:after,
    .linea-azul-block .punto-final:before {
        top: 50%;
        right: 100%;
        left: auto;
        transform: rotate(90deg);
    }

    .linea-azul-block .punto-final:before {
        margin-left: auto;
        margin-top: -35px;
    }

    .linea-azul-block .punto-final:after {
        margin-left: auto;
        margin-top: -10px;
    }
}

@media screen and (max-width: 575px) {
    .linea-azul-block .linea {
        left: 0;
    }

    .linea-azul-block .puntos {
        left: 50% !important;
        width: 90%;
    }

    .linea-azul-block .marcador {
        left: -5.5%;
    }

    .linea-azul-block .punto1 .contenido.mostrarContenedor,
    .linea-azul-block .punto3 .contenido.mostrarContenedor,
    .linea-azul-block .punto2 .contenido.mostrarContenedor {
        left: 50%;
    }

    .linea-azul-block .punto1 .titulo.mostrarTitulo,
    .linea-azul-block .punto2 .titulo.mostrarTitulo,
    .linea-azul-block .punto3 .titulo.mostrarTitulo {
        transform: translate(-38%, -155%) !important;
    }

    .linea-azul-block img.icono {
        left: 4%;
    }

    .linea-azul-block .punto3 .titulo,
    .linea-azul-block .punto2 .titulo,
    .linea-azul-block .punto1 .titulo {
        transform: translate(-62%, -46%);
        text-align: left;
    }

    .linea-azul-block .puntos.punto-final{
        left: 50% !important;
    }

    .linea-azul-block .punto-final .marcador{
        left: -5.4%;
    }
}