@charset "utf-8";
/* CSS Document */






/*
################################ 
Inicio Preload 
################################ 
*/

/* Parte del código de la animación de carga ha sido generado por => https://icons8.com/cssload  */



.cssload-zenith {
    width: 46px;
    height: 46px;
    margin: 0 auto;
    border-radius: 50%;
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    box-shadow: 3px 3px 1px rgb(0, 0, 0);
    animation: cssload-spin 510ms infinite linear;
    -o-animation: cssload-spin 510ms infinite linear;
    -ms-animation: cssload-spin 510ms infinite linear;
    -webkit-animation: cssload-spin 510ms infinite linear;
    -moz-animation: cssload-spin 510ms infinite linear;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

@keyframes cssload-spin {
    100% {
        transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-o-keyframes cssload-spin {
    100% {
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-ms-keyframes cssload-spin {
    100% {
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes cssload-spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes cssload-spin {
    100% {
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}








#contenedor_carga{
    background-color: gray;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 10000;
}






/*
################################ 
Fin Preload
################################ 
*/








* {
    margin: 0;
    padding: 0;
}


p {
    margin: 25px;
    padding-bottom: 25px;
}

.enlaces_pie { 
    margin-left: 10%;
    width: 100%;
    color: white;
    font-size: 20px;
    text-decoration: none;
}

.enlaces_pie:hover {
    text-decoration: underline;
}

ol {
    margin: 25px;
}

hr {
    padding: 0;
    margin: 25px;
}

li a {
    margin: 0;
}

a {
    margin: 25px;
}

ol li {
    margin: 1px 50px;
}



/* Inicio => Botón de los enlaces */  




  /**********************************************
  **********************************************
  **********************************************
  **********************************************
  **********************************************
  **********************************************
  **********************************************
  **********************************************
  **********************************************
  **********************************************
  
  ** Requiere optimización y mejoras **

  **********************************************
  **********************************************
  **********************************************
  **********************************************
  **********************************************
  **********************************************
  **********************************************
  **********************************************
  **********************************************
  **********************************************
  **********************************************
  **********************************************
  **********************************************
  
***********************************************/

















/* Unidad 2 */

.boton_enlace_U2 {
    position: absolute;
    top: 155px;
    left: 120px;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    border: 2px solid black;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    background-color: #1162A2;
    box-sizing: border-box;
    transition: .5s;
}

a span:before,
a span:after {
    content: '';
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    transition: .5s;
}


/* Flecha izquierda */
a span:before {
    border-bottom: 2px solid orangered;
    border-left: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    left: -8px;
}

.boton_enlace_U2:hover span:before {
    left: -25px;
    transform: rotate(-135deg);
    animation: animateBefore .5s linear infinite;
}


/* Flecha derecha */
a span:after {
    border-top: 2px solid orangered;
    border-right: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    right: -8px;
}

.boton_enlace_U2:hover span:after {
    right: -25px;
    transform: rotate(-135deg);
    animation: animateAfter .5s linear infinite;
}


.boton_enlace_U2:hover {
    border-radius: 20px;
}


/* => Este código sólo es necesario ponerlo en el estilo del último enlace :)

/* Animación Flecha izquierda 
@keyframes animateBefore {
    0% {
        left: -25px;
    }
    50% {
        left: -40px;
    }
    100% {
        left: -25px;
    }
}

/*
@keyframes animateAfter {  Obtiene cubo
    0% {
        left: -25px;
    }
    50% {
        left: -40px;
    }
    100% {
        left: -25px;
    }
}
*/

/* Animación Flecha derecha 
@keyframes animateAfter {
    0% {
        right: -25px;
    }
    50% {
        right: -40px;
    }
    100% {
        right: -25px;
    }
}

 */






/* Unidad 3 */

.boton_enlace_U3 {
    position: absolute;
    top: 670px;
    left: 120px;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    border: 2px solid black;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    background-color: #1162A2;
    box-sizing: border-box;
    transition: .5s;
}

a span:before,
a span:after {
    content: '';
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    transition: .5s;
}


/* Flecha izquierda */
a span:before {
    border-bottom: 2px solid orangered;
    border-left: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    left: -17px;
}

.boton_enlace_U3:hover span:before {
    left: -25px;
    transform: rotate(-135deg);
    animation: animateBefore .5s linear infinite;
}


/* Flecha derecha */
a span:after {
    border-top: 2px solid orangered;
    border-right: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    right: -17px;
}

.boton_enlace_U3:hover span:after {
    right: -25px;
    transform: rotate(-135deg);
    animation: animateAfter .5s linear infinite;
}


.boton_enlace_U3:hover {
    border-radius: 20px;
}

/* Animación Flecha izquierda */
@keyframes animateBefore {
    0% {
        left: -25px;
    }
    50% {
        left: -40px;
    }
    100% {
        left: -25px;
    }
}

/* Animación Flecha derecha */
@keyframes animateAfter { /* Obtiene cubo */
    0% {
        left: -25px;
    }
    50% {
        left: -40px;
    }
    100% {
        left: -25px;
    }
}



/* Animación alternativa
@keyframes animateAfter {
    0% {
        right: -25px;
    }
    50% {
        right: -40px;
    }
    100% {
        right: -25px;
    }
}
*/



















/* Unidad 3 - Índice */



/* tienda online */

.boton_enlace_tiendaOnline {
    position: absolute;
    top: 415px;
    left: 150px;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    border: 2px solid black;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    background-color: #1162A2;
    box-sizing: border-box;
    transition: .5s;
}

a span:before,
a span:after {
    content: '';
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    transition: .5s;
}


/* Flecha izquierda */
a span:before {
    border-bottom: 2px solid orangered;
    border-left: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    left: -17px;
}

.boton_enlace_tiendaOnline:hover span:before {
    left: -25px;
    transform: rotate(-135deg);
    animation: animateBefore .5s linear infinite;
}


/* Flecha derecha */
a span:after {
    border-top: 2px solid orangered;
    border-right: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    right: -17px;
}

.boton_enlace_tiendaOnline:hover span:after {
    right: -25px;
    transform: rotate(-135deg);
    animation: animateAfter .5s linear infinite;
}


.boton_enlace_tiendaOnline:hover {
    border-radius: 20px;
}





/* Ejercicio de posicionamiento I (Posicionamiento flotante)  */

.boton_enlace_pos1 {
    position: absolute;
    top: 670px;
    left: 150px;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    border: 2px solid black;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    background-color: #1162A2;
    box-sizing: border-box;
    transition: .5s;
}

a span:before,
a span:after {
    content: '';
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    transition: .5s;
}


/* Flecha izquierda */
a span:before {
    border-bottom: 2px solid orangered;
    border-left: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    left: -17px;
}

.boton_enlace_pos1:hover span:before {
    left: -25px;
    transform: rotate(-135deg);
    animation: animateBefore .5s linear infinite;
}


/* Flecha derecha */
a span:after {
    border-top: 2px solid orangered;
    border-right: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    right: -17px;
}

.boton_enlace_pos1:hover span:after {
    right: -25px;
    transform: rotate(-135deg);
    animation: animateAfter .5s linear infinite;
}


.boton_enlace_pos1:hover {
    border-radius: 20px;
}









/* Ejercicio de posicionamiento II (Posicionamiento absoluto)   */

.boton_enlace_pos2 {
    position: absolute;
    top: 925px; /* Parámetro no repetido */
    left: 150px;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    border: 2px solid black;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    background-color: #1162A2;
    box-sizing: border-box;
    transition: .5s;
}

a span:before,
a span:after {
    content: '';
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    transition: .5s;
}


/* Flecha izquierda */
a span:before {
    border-bottom: 2px solid orangered;
    border-left: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    left: -17px;
}

.boton_enlace_pos2:hover span:before {
    left: -25px;
    transform: rotate(-135deg);
    animation: animateBefore .5s linear infinite;
}


/* Flecha derecha */
a span:after {
    border-top: 2px solid orangered;
    border-right: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    right: -17px;
}

.boton_enlace_pos2:hover span:after {
    right: -25px;
    transform: rotate(-135deg);
    animation: animateAfter .5s linear infinite;
}


.boton_enlace_pos2:hover {
    border-radius: 20px;
}














/* Ejercicio de posicionamiento III (Posicionamiento absoluto 2)   */

.boton_enlace_pos3 {
    position: absolute;
    top: 1180px; /* Parámetro no repetido */
    left: 150px;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    border: 2px solid black;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    background-color: #1162A2;
    box-sizing: border-box;
    transition: .5s;
}

a span:before,
a span:after {
    content: '';
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    transition: .5s;
}


/* Flecha izquierda */
a span:before {
    border-bottom: 2px solid orangered;
    border-left: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    left: -17px;
}

.boton_enlace_pos3:hover span:before {
    left: -25px;
    transform: rotate(-135deg);
    animation: animateBefore .5s linear infinite;
}


/* Flecha derecha */
a span:after {
    border-top: 2px solid orangered;
    border-right: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    right: -17px;
}

.boton_enlace_pos3:hover span:after {
    right: -25px;
    transform: rotate(-135deg);
    animation: animateAfter .5s linear infinite;
}


.boton_enlace_pos3:hover {
    border-radius: 20px;
}
















/* Ejercicio de posicionamiento IV (Posicionamiento fijo)   */

.boton_enlace_pos4 {
    position: absolute;
    top: 1435px; /* Parámetro no repetido */
    left: 150px;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    border: 2px solid black;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    background-color: #1162A2;
    box-sizing: border-box;
    transition: .5s;
}

a span:before,
a span:after {
    content: '';
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    transition: .5s;
}


/* Flecha izquierda */
a span:before {
    border-bottom: 2px solid orangered;
    border-left: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    left: -17px;
}

.boton_enlace_pos4:hover span:before {
    left: -25px;
    transform: rotate(-135deg);
    animation: animateBefore .5s linear infinite;
}


/* Flecha derecha */
a span:after {
    border-top: 2px solid orangered;
    border-right: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    right: -17px;
}

.boton_enlace_pos4:hover span:after {
    right: -25px;
    transform: rotate(-135deg);
    animation: animateAfter .5s linear infinite;
}


.boton_enlace_pos4:hover {
    border-radius: 20px;
}



















/* Ejercicio de posicionamiento V (Posicionamiento fijo 2)    */

.boton_enlace_pos5 {
    position: absolute;
    top: 1690px; /* Parámetro no repetido */
    left: 150px;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    border: 2px solid black;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    background-color: #1162A2;
    box-sizing: border-box;
    transition: .5s;
}

a span:before,
a span:after {
    content: '';
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    transition: .5s;
}


/* Flecha izquierda */
a span:before {
    border-bottom: 2px solid orangered;
    border-left: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    left: -17px;
}

.boton_enlace_pos5:hover span:before {
    left: -25px;
    transform: rotate(-135deg);
    animation: animateBefore .5s linear infinite;
}


/* Flecha derecha */
a span:after {
    border-top: 2px solid orangered;
    border-right: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    right: -17px;
}

.boton_enlace_pos5:hover span:after {
    right: -25px;
    transform: rotate(-135deg);
    animation: animateAfter .5s linear infinite;
}


.boton_enlace_pos5:hover {
    border-radius: 20px;
}









/*Consulta de medios     */

.boton_enlace_pos6 {
    position: absolute;
    top: 1945px; /* Parámetro no repetido */
    left: 150px;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    border: 2px solid black;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    background-color: #1162A2;
    box-sizing: border-box;
    transition: .5s;
}

a span:before,
a span:after {
    content: '';
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    transition: .5s;
}


/* Flecha izquierda */
a span:before {
    border-bottom: 2px solid orangered;
    border-left: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    left: -17px;
}

.boton_enlace_pos6:hover span:before {
    left: -25px;
    transform: rotate(-135deg);
    animation: animateBefore .5s linear infinite;
}


/* Flecha derecha */
a span:after {
    border-top: 2px solid orangered;
    border-right: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    right: -17px;
}

.boton_enlace_pos6:hover span:after {
    right: -25px;
    transform: rotate(-135deg);
    animation: animateAfter .5s linear infinite;
}


.boton_enlace_pos6:hover {
    border-radius: 20px;
}







/* Fin =>  Botón de los enlaces */















/* No sirve 
section a {
    top: 630px;
}
*/






















/* Unidad 4 */

.boton_enlace_U4 {
    position: absolute;
    top: 1070px;  /* Modificar este valor para cada enlace */
    left: 120px;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    border: 2px solid black;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    background-color: #1162A2;
    box-sizing: border-box;
    transition: .5s;
}

a span:before,
a span:after {
    content: '';
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    transition: .5s;
}


/* Flecha izquierda */
a span:before {
    border-bottom: 2px solid orangered;
    border-left: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    left: -17px;
}

.boton_enlace_U4:hover span:before {
    left: -25px;
    transform: rotate(-135deg);
    animation: animateBefore .5s linear infinite;
}


/* Flecha derecha */
a span:after {
    border-top: 2px solid orangered;
    border-right: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    right: -17px;
}

.boton_enlace_U4:hover span:after {
    right: -25px;
    transform: rotate(-135deg);
    animation: animateAfter .5s linear infinite;
}


.boton_enlace_U4:hover {
    border-radius: 20px;
}

/* Animación Flecha izquierda */
@keyframes animateBefore {
    0% {
        left: -25px;
    }
    50% {
        left: -40px;
    }
    100% {
        left: -25px;
    }
}

/* Animación Flecha derecha */
@keyframes animateAfter { /* Obtiene cubo */
    0% {
        left: -25px;
    }
    50% {
        left: -40px;
    }
    100% {
        left: -25px;
    }
}





/* INICIO => Actividad 2. Ejemplos II  <= INICIO */



.boton_enlace_U4_act2 {
    position: absolute;
    top: 660px;  /* Modificar este valor para cada enlace */
    left: 148.5px;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    border: 2px solid black;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    background-color: #1162A2;
    box-sizing: border-box;
    transition: .5s;
}

a span:before,
a span:after {
    content: '';
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    transition: .5s;
}


/* Flecha izquierda */
a span:before {
    border-bottom: 2px solid orangered;
    border-left: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    left: -17px;
}

.boton_enlace_U4_act2:hover span:before {
    left: -25px;
    transform: rotate(-135deg);
    animation: animateBefore .5s linear infinite;
}


/* Flecha derecha */
a span:after {
    border-top: 2px solid orangered;
    border-right: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    right: -17px;
}

.boton_enlace_U4_act2:hover span:after {
    right: -25px;
    transform: rotate(-135deg);
    animation: animateAfter .5s linear infinite;
}


.boton_enlace_U4_act2:hover {
    border-radius: 20px;
}



/* FIN =>  Actividad 2. Ejemplos II <= FIN */









/* INICIO => Actividad 3. Ejercicios de aplicación  <= INICIO */



.boton_enlace_U4_act3 {
    position: absolute;
    top: 932px;  /* Modificar este valor para cada enlace */
    left: 148.5px;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    border: 2px solid black;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    background-color: #1162A2;
    box-sizing: border-box;
    transition: .5s;
}

a span:before,
a span:after {
    content: '';
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    transition: .5s;
}


/* Flecha izquierda */
a span:before {
    border-bottom: 2px solid orangered;
    border-left: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    left: -17px;
}

.boton_enlace_U4_act3:hover span:before {
    left: -25px;
    transform: rotate(-135deg);
    animation: animateBefore .5s linear infinite;
}


/* Flecha derecha */
a span:after {
    border-top: 2px solid orangered;
    border-right: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    right: -17px;
}

.boton_enlace_U4_act3:hover span:after {
    right: -25px;
    transform: rotate(-135deg);
    animation: animateAfter .5s linear infinite;
}


.boton_enlace_U4_act3:hover {
    border-radius: 20px;
}



/* FIN =>  Actividad 3. Ejercicios de aplicación <= FIN */







/* INICIO => Actividad 4. Validación de formularios.  <= INICIO */



.boton_enlace_U4_act4 {
    position: absolute;
    top: 1255px;  /* Modificar este valor para cada enlace */
    left: 148.5px;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    border: 2px solid black;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    background-color: #1162A2;
    box-sizing: border-box;
    transition: .5s;
}

a span:before,
a span:after {
    content: '';
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    transition: .5s;
}


/* Flecha izquierda */
a span:before {
    border-bottom: 2px solid orangered;
    border-left: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    left: -17px;
}

.boton_enlace_U4_act4:hover span:before {
    left: -25px;
    transform: rotate(-135deg);
    animation: animateBefore .5s linear infinite;
}


/* Flecha derecha */
a span:after {
    border-top: 2px solid orangered;
    border-right: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    right: -17px;
}

.boton_enlace_U4_act4:hover span:after {
    right: -25px;
    transform: rotate(-135deg);
    animation: animateAfter .5s linear infinite;
}


.boton_enlace_U4_act4:hover {
    border-radius: 20px;
}



/* FIN => Actividad 4. Validación de formularios <= FIN */












/* INICIO => Actividad 5. Acceso a elementos DOM  <= INICIO */



.boton_enlace_U4_act5 {
    position: absolute;
    top: 1589px;  /* Modificar este valor para cada enlace */
    left: 148.5px;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    border: 2px solid black;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    background-color: #1162A2;
    box-sizing: border-box;
    transition: .5s;
}

a span:before,
a span:after {
    content: '';
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    transition: .5s;
}


/* Flecha izquierda */
a span:before {
    border-bottom: 2px solid orangered;
    border-left: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    left: -17px;
}

.boton_enlace_U4_act5:hover span:before {
    left: -25px;
    transform: rotate(-135deg);
    animation: animateBefore .5s linear infinite;
}


/* Flecha derecha */
a span:after {
    border-top: 2px solid orangered;
    border-right: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    right: -17px;
}

.boton_enlace_U4_act5:hover span:after {
    right: -25px;
    transform: rotate(-135deg);
    animation: animateAfter .5s linear infinite;
}


.boton_enlace_U4_act5:hover {
    border-radius: 20px;
}



/* FIN => Actividad 5. Acceso a elementos DOM <= FIN */







/* INICIO => Actividad 6. Objetos predefinidos del navegador  <= INICIO */



.boton_enlace_U4_act6 {
    position: absolute;
    top: 1850px;  /* Modificar este valor para cada enlace */
    left: 148.5px;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    border: 2px solid black;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    background-color: #1162A2;
    box-sizing: border-box;
    transition: .5s;
}

a span:before,
a span:after {
    content: '';
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    transition: .5s;
}


/* Flecha izquierda */
a span:before {
    border-bottom: 2px solid orangered;
    border-left: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    left: -17px;
}

.boton_enlace_U4_act6:hover span:before {
    left: -25px;
    transform: rotate(-135deg);
    animation: animateBefore .5s linear infinite;
}


/* Flecha derecha */
a span:after {
    border-top: 2px solid orangered;
    border-right: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    right: -17px;
}

.boton_enlace_U4_act6:hover span:after {
    right: -25px;
    transform: rotate(-135deg);
    animation: animateAfter .5s linear infinite;
}


.boton_enlace_U4_act6:hover {
    border-radius: 20px;
}



/* FIN => Actividad 6. Objetos predefinidos del navegador <= FIN */



















/* Unidad 5 */




.boton_enlace_U5 {
    position: absolute;
    top: 1555px; /* Modificar este valor para cada enlace */
    left: 120px;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    border: 2px solid black;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    background-color: #1162A2;
    box-sizing: border-box;
    transition: .5s;
}

a span:before,
a span:after {
    content: '';
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    transition: .5s;
}


/* Flecha izquierda */
a span:before {
    border-bottom: 2px solid orangered;
    border-left: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    left: -8px;
}

.boton_enlace_U5:hover span:before {
    left: -25px;
    transform: rotate(-135deg);
    animation: animateBefore .5s linear infinite;
}


/* Flecha derecha */
a span:after {
    border-top: 2px solid orangered;
    border-right: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    right: -8px;
}

.boton_enlace_U5:hover span:after {
    right: -25px;
    transform: rotate(-135deg);
    animation: animateAfter .5s linear infinite;
}


.boton_enlace_U5:hover {
    border-radius: 20px;
}




/* INICIO => Actividad 1. Modelar en XML  <= INICIO */



.boton_enlace_U5_act1 {
    position: absolute;
    top: 420px;  /* Modificar este valor para cada enlace */
    left: 148.5px;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    border: 2px solid black;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    background-color: #1162A2;
    box-sizing: border-box;
    transition: .5s;
}

a span:before,
a span:after {
    content: '';
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    transition: .5s;
}


/* Flecha izquierda */
a span:before {
    border-bottom: 2px solid orangered;
    border-left: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    left: -17px;
}

.boton_enlace_U5_act1:hover span:before {
    left: -25px;
    transform: rotate(-135deg);
    animation: animateBefore .5s linear infinite;
}


/* Flecha derecha */
a span:after {
    border-top: 2px solid orangered;
    border-right: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    right: -17px;
}

.boton_enlace_U5_act1:hover span:after {
    right: -25px;
    transform: rotate(-135deg);
    animation: animateAfter .5s linear infinite;
}


.boton_enlace_U5_act1:hover {
    border-radius: 20px;
}



/* FIN => Actividad 1. Modelar en XML <= FIN */








/* INICIO => Actividad 2. Modelar en XML + atributos  <= INICIO */



.boton_enlace_U5_act2 {
    position: absolute;
    top: 745px;  /* Modificar este valor para cada enlace */
    left: 148.5px;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    border: 2px solid black;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    background-color: #1162A2;
    box-sizing: border-box;
    transition: .5s;
}

a span:before,
a span:after {
    content: '';
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    transition: .5s;
}


/* Flecha izquierda */
a span:before {
    border-bottom: 2px solid orangered;
    border-left: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    left: -17px;
}

.boton_enlace_U5_act2:hover span:before {
    left: -25px;
    transform: rotate(-135deg);
    animation: animateBefore .5s linear infinite;
}


/* Flecha derecha */
a span:after {
    border-top: 2px solid orangered;
    border-right: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    right: -17px;
}

.boton_enlace_U5_act2:hover span:after {
    right: -25px;
    transform: rotate(-135deg);
    animation: animateAfter .5s linear infinite;
}


.boton_enlace_U5_act2:hover {
    border-radius: 20px;
}



/* FIN => Actividad 2. Modelar en XML + atributos <= FIN */










/* INICIO => Actividad 3 - XML y CDATA  <= INICIO */



.boton_enlace_U5_act3 {
    position: absolute;
    top: 1075px;  /* Modificar este valor para cada enlace */
    left: 148.5px;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    border: 2px solid black;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    background-color: #1162A2;
    box-sizing: border-box;
    transition: .5s;
}

a span:before,
a span:after {
    content: '';
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    transition: .5s;
}


/* Flecha izquierda */
a span:before {
    border-bottom: 2px solid orangered;
    border-left: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    left: -17px;
}

.boton_enlace_U5_act3:hover span:before {
    left: -25px;
    transform: rotate(-135deg);
    animation: animateBefore .5s linear infinite;
}


/* Flecha derecha */
a span:after {
    border-top: 2px solid orangered;
    border-right: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    right: -17px;
}

.boton_enlace_U5_act3:hover span:after {
    right: -25px;
    transform: rotate(-135deg);
    animation: animateAfter .5s linear infinite;
}


.boton_enlace_U5_act3:hover {
    border-radius: 20px;
}



/* FIN => Actividad 3 - XML y CDATA <= FIN */













/* Unidad 6 */

.boton_enlace_U6 {
    position: absolute;
    top: 1975px;  /* Modificar este valor para cada enlace */
    left: 165px;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    border: 2px solid black;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    background-color: #1162A2;
    box-sizing: border-box;
    transition: .5s;
}

a span:before,
a span:after {
    content: '';
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    transition: .5s;
}


/* Flecha izquierda */
a span:before {
    border-bottom: 2px solid orangered;
    border-left: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    left: -17px;
}

.boton_enlace_U6:hover span:before {
    left: -25px;
    transform: rotate(-135deg);
    animation: animateBefore .5s linear infinite;
}


/* Flecha derecha */
a span:after {
    border-top: 2px solid orangered;
    border-right: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    right: -17px;
}

.boton_enlace_U6:hover span:after {
    right: -25px;
    transform: rotate(-135deg);
    animation: animateAfter .5s linear infinite;
}


.boton_enlace_U6:hover {
    border-radius: 20px;
}






/* INICIO => Actividad 3 - Atributos - Ampliación  <= INICIO */



.boton_enlace_U6_act3 {
    position: absolute;
    top: 1399px;  /* Modificar este valor para cada enlace */
    left: 217.5px; /* Se ha modificado este también por ser más largo el botón */
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    border: 2px solid black;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    background-color: #1162A2;
    box-sizing: border-box;
    transition: .5s;
}

a span:before,
a span:after {
    content: '';
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    transition: .5s;
}


/* Flecha izquierda */
a span:before {
    border-bottom: 2px solid orangered;
    border-left: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    left: -17px;
}

.boton_enlace_U6_act3:hover span:before {
    left: -25px;
    transform: rotate(-135deg);
    animation: animateBefore .5s linear infinite;
}


/* Flecha derecha */
a span:after {
    border-top: 2px solid orangered;
    border-right: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    right: -17px;
}

.boton_enlace_U6_act3:hover span:after {
    right: -25px;
    transform: rotate(-135deg);
    animation: animateAfter .5s linear infinite;
}


.boton_enlace_U6_act3:hover {
    border-radius: 20px;
}



/* FIN => Actividad 3 - Atributos - Ampliación <= FIN */






/* INICIO => Actividad 4 - Entidades   <= INICIO */



.boton_enlace_U6_act4_parte1 {
    position: absolute;
    top: 1765px;  /* Modificar este valor para cada enlace */
    left: 149px; /* Se ha modificado este también por ser más largo el botón */
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    border: 2px solid black;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    background-color: #1162A2;
    box-sizing: border-box;
    transition: .5s;
}

a span:before,
a span:after {
    content: '';
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    transition: .5s;
}


/* Flecha izquierda */
a span:before {
    border-bottom: 2px solid orangered;
    border-left: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    left: -17px;
}

.boton_enlace_U6_act4_parte1:hover span:before {
    left: -25px;
    transform: rotate(-135deg);
    animation: animateBefore .5s linear infinite;
}


/* Flecha derecha */
a span:after {
    border-top: 2px solid orangered;
    border-right: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    right: -17px;
}

.boton_enlace_U6_act4_parte1:hover span:after {
    right: -25px;
    transform: rotate(-135deg);
    animation: animateAfter .5s linear infinite;
}


.boton_enlace_U6_act4_parte1:hover {
    border-radius: 20px;
}



/* FIN => Actividad 4 - Entidades  <= FIN */







/* INICIO => Práctica 6.1 - DTD    <= INICIO */



.boton_enlace_U6_act5_parte1 {
    position: absolute;
    top: 2100px;  /* Modificar este valor para cada enlace */
    left: 175px; /* Se ha modificado este también por ser más largo el botón */
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    border: 2px solid black;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    background-color: #1162A2;
    box-sizing: border-box;
    transition: .5s;
}

a span:before,
a span:after {
    content: '';
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    transition: .5s;
}


/* Flecha izquierda */
a span:before {
    border-bottom: 2px solid orangered;
    border-left: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    left: -17px;
}

.boton_enlace_U6_act5_parte1:hover span:before {
    left: -25px;
    transform: rotate(-135deg);
    animation: animateBefore .5s linear infinite;
}


/* Flecha derecha */
a span:after {
    border-top: 2px solid orangered;
    border-right: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    right: -17px;
}

.boton_enlace_U6_act5_parte1:hover span:after {
    right: -25px;
    transform: rotate(-135deg);
    animation: animateAfter .5s linear infinite;
}


.boton_enlace_U6_act5_parte1:hover {
    border-radius: 20px;
}



/* FIN => Práctica 6.1 - DTD   <= FIN */















/* Unidad 6 - Parte 2 */

.boton_enlace_U6_Part2 {
    position: absolute;
    top: 2430px;  /* Modificar este valor para cada enlace */
    left: 165px;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    border: 2px solid black;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    background-color: #1162A2;
    box-sizing: border-box;
    transition: .5s;
}

a span:before,
a span:after {
    content: '';
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    transition: .5s;
}


/* Flecha izquierda */
a span:before {
    border-bottom: 2px solid orangered;
    border-left: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    left: -17px;
}

.boton_enlace_U6_Part2:hover span:before {
    left: -25px;
    transform: rotate(-135deg);
    animation: animateBefore .5s linear infinite;
}


/* Flecha derecha */
a span:after {
    border-top: 2px solid orangered;
    border-right: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    right: -17px;
}

.boton_enlace_U6_Part2:hover span:after {
    right: -25px;
    transform: rotate(-135deg);
    animation: animateAfter .5s linear infinite;
}


.boton_enlace_U6_Part2:hover {
    border-radius: 20px;
}




/* Act 4 Unidad 6 - 2º Parte */

.boton_enlace_U6_act4 {
    position: absolute;
    top: 1420px;  /* Modificar este valor para cada enlace */
    left: 150px;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    border: 2px solid black;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    background-color: #1162A2;
    box-sizing: border-box;
    transition: .5s;
}

a span:before,
a span:after {
    content: '';
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    transition: .5s;
}


/* Flecha izquierda */
a span:before {
    border-bottom: 2px solid orangered;
    border-left: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    left: -17px;
}

.boton_enlace_U6_act4:hover span:before {
    left: -25px;
    transform: rotate(-135deg);
    animation: animateBefore .5s linear infinite;
}


/* Flecha derecha */
a span:after {
    border-top: 2px solid orangered;
    border-right: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    right: -17px;
}

.boton_enlace_U6_act4:hover span:after {
    right: -25px;
    transform: rotate(-135deg);
    animation: animateAfter .5s linear infinite;
}


.boton_enlace_U6_act4:hover {
    border-radius: 20px;
}



/* Act 5 Unidad 6 - 2º Parte */

.boton_enlace_U6_act5 {
    position: absolute;
    top: 1750px;  /* Modificar este valor para cada enlace */
    left: 150px;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    border: 2px solid black;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    background-color: #1162A2;
    box-sizing: border-box;
    transition: .5s;
}

a span:before,
a span:after {
    content: '';
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    transition: .5s;
}


/* Flecha izquierda */
a span:before {
    border-bottom: 2px solid orangered;
    border-left: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    left: -17px;
}

.boton_enlace_U6_act5:hover span:before {
    left: -25px;
    transform: rotate(-135deg);
    animation: animateBefore .5s linear infinite;
}


/* Flecha derecha */
a span:after {
    border-top: 2px solid orangered;
    border-right: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    right: -17px;
}

.boton_enlace_U6_act5:hover span:after {
    right: -25px;
    transform: rotate(-135deg);
    animation: animateAfter .5s linear infinite;
}


.boton_enlace_U6_act5:hover {
    border-radius: 20px;
}





/* Act 6 Unidad 6 - 2º Parte */

.boton_enlace_U6_act6 {
    position: absolute;
    top: 2086px;  /* Modificar este valor para cada enlace */
    left: 150px;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    border: 2px solid black;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    background-color: #1162A2;
    box-sizing: border-box;
    transition: .5s;
}

a span:before,
a span:after {
    content: '';
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    transition: .5s;
}


/* Flecha izquierda */
a span:before {
    border-bottom: 2px solid orangered;
    border-left: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    left: -17px;
}

.boton_enlace_U6_act6:hover span:before {
    left: -25px;
    transform: rotate(-135deg);
    animation: animateBefore .5s linear infinite;
}


/* Flecha derecha */
a span:after {
    border-top: 2px solid orangered;
    border-right: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    right: -17px;
}

.boton_enlace_U6_act6:hover span:after {
    right: -25px;
    transform: rotate(-135deg);
    animation: animateAfter .5s linear infinite;
}


.boton_enlace_U6_act6:hover {
    border-radius: 20px;
}




/* Unidad 7 */

.boton_enlace_U7 {
    position: absolute;
    top: 2886px;  /* Modificar este valor para cada enlace */
    left: 120px;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    border: 2px solid black;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    background-color: #1162A2;
    box-sizing: border-box;
    transition: .5s;
}

a span:before,
a span:after {
    content: '';
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    transition: .5s;
}


/* Flecha izquierda */
a span:before {
    border-bottom: 2px solid orangered;
    border-left: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    left: -17px;
}

.boton_enlace_U7:hover span:before {
    left: -25px;
    transform: rotate(-135deg);
    animation: animateBefore .5s linear infinite;
}


/* Flecha derecha */
a span:after {
    border-top: 2px solid orangered;
    border-right: 2px solid orangered;
    transform: rotate(45deg);
    top: 4px;
    right: -17px;
}

.boton_enlace_U7:hover span:after {
    right: -25px;
    transform: rotate(-135deg);
    animation: animateAfter .5s linear infinite;
}


.boton_enlace_U7:hover {
    border-radius: 20px;
}



























/* Da formato al footer */

footer {
    background-color: #1a1a61;
    border-top: 100px;
    border-top: solid;
    border-top-color: rgb(0, 255, 234);
    padding-top: 100px;
}

footer p {
    color: #f0f6fc;
    font-size: 20px;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    text-align: center;
}


div {
    color: #f0f6fc;
    font-size: 17px;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";

}


li a{
    color: #f0f6fc;
    font-size: 17px;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";

}

.num_lista_ordenada_a_blanco {
    color: #f0f6fc;
}