/*ESTILOS EN COMUN*/

* {
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
}

header a{
    text-decoration-line: none;
    text-decoration-style: none;
    text-decoration-color: none;
}

header h2 {
    padding: 6px 4px;
    font-size: 4em;
    font-family: 'Black Ops One', cursive;
    color: darkblue;
}

header h2 p {
    padding: 6px 4px;
    margin-top: -15px;
    font-size: .38em;
    color: royalblue;
} 

header {
        background-color: white;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        max-height: 120px;
}

header img{
    position: relative;
    z-index: 999999;
    max-width: 70px;
    max-height: 70px;
   
}

header nav {
   
    background-color: rgba(0,0,0,.75);
    text-align: center;
    position: fixed;
    right: -80%;
    top: 0;
    list-style: none;
    width: 80%;
    padding-right: 0em;
    padding-left: 0em;
    transition: all .3s ease;
    color: azure;
}

header nav ul {
  list-style: none;  
}

header nav ul li:hover {
  background-color: black;
}

header nav ul li a {
    color: azure;
    display: block;
    text-decoration: none;
    margin-bottom: .5em;
    margin-top: 1em;
    margin-left: 1em;
    font-family: 'Black Ops One', cursive;
    font-size: 1.5em;
    text-align: left;
}

main a{
    text-decoration-line: none;
}


.menu_visible {
    right: 0;
}



body main{
    margin-top: 30px;
    padding: 20px;
}


body footer {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    background-color: white;
    padding: .5em;
    font-family:'Black Ops One', cursive; 
    width: 100%;
    position: fixed;
    bottom: 0;
    opacity: .7;
}





/*PRIMER PAGINA PARA LA IP*/

.pagina_ip {
        background-image:url(../imagenes/UAVAvion.jpg);
        background-repeat: no-repeat;
        background-position: bottom center;
        background-size: cover;
}

.pagina_ip main {
    display: flex;
    flex-direction: column;
    align-content:space-between; 
    text-align: center;
}

.pagina_ip main h1 {
    font-family: 'Black Ops One', cursive;
    color: azure;
    text-decoration: underline;
}

.pagina_ip main #descripcion_app{
    font-size: 1.5em;
    color: royalblue;
    font-family: 'Audiowide', cursive;
    font-weight: 900;
    background-color: azure;
    
}

#ingresar_numero{
    font-size: 2em;
    margin-top: 15%;
    color: blue;
    font-family: 'Audiowide', cursive;
}

.pagina_ip #numero_ip {
    display: flex;
    flex-direction: column;
    align-items: center;
}




.pagina_ip #caja_para_numero {
    display: block;
    background-color: aliceblue;
    color: cornflowerblue;
    width: 70%;
    font-size: 2em;
}

.botones_pagina_ip {
    text-align: center;
    font-size: 1em;
    display: block;
    text-decoration: none;
    width:50%;
    
    border-radius: 20%;
    font-family: 'Audiowide', cursive;
}

#boton_acceder {
    background-color: cornflowerblue;
    color: white;
    margin-top: 2%;
    border: 1px solid;
    border-color: azure;
    font-size: 1.5em;
}

#boton_salir { 
     background-color: azure;
     color: red;
     margin-top: 25%;
     margin-bottom: 5%;
     margin-left: 25%;
}








/*PAGINA MENU PRINCIPAL*/

.pagina_principal{
    background-image: url(../imagenes/UAVcampoverde2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    
}

#descripcion{
    margin:auto;
    min-width: 60%;
    text-align: center;
    width: 80%;
    padding: 5% 5%;
    margin-bottom:5%;
    border: 1px solid white;
}
#descripcion h1{
    min-width: 100px;
    color: white;
    font-size: 2.5em;
    padding: 5px 5px;
    font-family:'Black Ops One', cursive; 
}

#descripcion p{
font-size: 1.5em;
color: white;
padding: 20px 10px;
 font-family:'Black Ops One', cursive; 
}







.boton_control {
    width: 75%;
    border-radius: 25%;
    padding-top: .5em;
    padding-bottom: .5em;
    background-image: url(../imagenes/UAVavionenvuelo2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center; 
    color: white;
    margin:auto;
    text-align: center;
    margin-top: 4px;
    margin-bottom: 2em;
    border: white 4px solid;
    text-decoration: none;
    display: block;
    font-family: 'Audiowide', cursive;
}

.boton_control h2{
    padding: 20px 10px;
    font-size:2.5em;
    font-family:'Black Ops One', cursive; 
    text-decoration-line: none;
    color: white;
}

.boton_control p{
    font-family: 'Audiowide', cursive;
}

.boton_control:hover{
    background-color: rgba(200,250,120);
}



#botones {
     width: 75%;
     background-size: cover; 
     background-position: center;
     background-repeat: no-repeat;
     border: white 4px solid;
     border-radius: 40%;
     margin-top: 4px;
     padding: 3% 10%;
     margin: auto;
     text-decoration: none;
     display: block;
     color: azure;
     text-align: center;
     font-family: 'Audiowide', cursive;
     margin-bottom: 1em;
}

.descripcion{
    font-size: .5em;
}  



#botones:hover{
   background-color: rgba(200,250,120);
}

.boton_informacion {
    background-image: url(../imagenes/vistaaereaavion3.jpg);
}


.boton_simulacion {
    background-image: url(../imagenes/UAVcampoverdecamara2.jpg);   
}


.boton_pagina {
    background-image: url(../imagenes/intilogo2.jpg);
}

.boton_pagina:hover{
     background-color: rgba(200,250,120);
     border:4px;
     border-style: solid;
     border-color: white;
}


@media only screen and (min-width:45em) {
    
.pagina_principal main #botones_diferentes {
    display: flex;
    flex-direction: row;
    }

    #botones {
        width: 30%;
        height: auto;
        margin: 10px;
        padding: 2% 5% 
    }  
  
    .boton_simulacion h2 {
        font-size: 1.4em;
        padding-top: .5em;
        padding-left: 2px;
    }
    
}




/*PAGINA DE INFORMACION 1*/
               
.pagina_informacion {
    background-image: url(../imagenes/vistaaereaavion2.jpg);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
}  

.pagina_informacion main{
    background-color: rgba(250, 235, 215, .80);
    text-align: justify;
}

.pagina_informacion main h1 {
    font-size: 1.5em;
    font-family:'Black Ops One', cursive;
    text-align: left;
    text-decoration: underline double;
    margin-bottom: 1em;
}

.pagina_informacion main img {
    width: 95%;
    height: auto;
    padding-left: 2.5%;
}

.pagina_informacion main ul li {
    font-family: 'Audiowide', cursive;
    margin-left: 2em;
    margin-bottom: 1.5em;
    list-style: square;
} 

#esquema_del_sistema {
    width: 96%;
    height: auto;
    padding-left: 2%;
}

.pagina_informacion main h2 {
    margin-top: 1.5em;
    text-align: left;
    text-decoration: underline;
    font-family: 'Audiowide', cursive; 
    margin-bottom: .5em;
}


.pagina_informacion {
    position: relative;
    padding-bottom: 70px;
}







#contador {
    text-align: center;
    font-size: 2em;
}

#flechas {
    width: 70px;
    height: auto;
}


    



    

/*PAGINA DE INFORMACION 2*/


#especificaciones h2 {
    text-align: center;
}
#especificaciones h3{
    font-family:'Audiowide', cursive;
    font-weight: bold;
    margin-bottom: 1em;
    text-align: left;
}






/*PAGINA DE INFORMACION 3*/

#imagenes_del_control{
    display: flex;
    flex-direction: row;
}

#imagenes_del_control img {
    width: 50%;
    height: auto;
}


#sensores_a_bordo img {
    width: 97%;
    height: auto;
}




/*PAGINA DE INFORMACION 4*/
 
.pagina_informacion main h3 {
    font-family: 'Audiowide', cursive;
    margin-bottom: 1em;
    font-weight: bold;
}

.pagina_informacion main div {
    display: flex;
    text-align: center;
    flex-direction: row;
}

.pagina_informacion main div img {
    width: 50%;
    height: auto;
}

.pagina_informacion div section p {
    font-family: 'Audiowide', cursive;
    
}



 
/*PAGINA DE INFORMACION 5*/

#segunda_seccion h3 {
    margin-bottom: 0;
    margin-top: 1em;
}

main #segunda_seccion p {
    font-family: 'Audiowide', cursive;
}



/*PAGINAS DE SIMULACION AEREA*/

.simulacion_aerea {
    display: flex;
    justify-content: center;
    flex-direction: column;
    background-image: url(../imagenes/UAVcampoverdecamara.jpg);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    padding-bottom: 70px;
}

.simulacion_aerea main h1 {
    font-family: 'Black Ops One', cursive;
    color: azure;
    text-decoration: underline double;
    margin-bottom: 1em;
}

.simulacion_aerea main h2 {
    text-align: center;
    color: azure;
    font-family: 'Audiowide', cursive;
}

.simulacion_aerea main img {
    width: 80%;
    height: 80%;
    margin-left: 10%;
    border: 5px solid white;
}

.simulacion_aerea main #imagen_bateria {
    border: 0px;
}

#formulario {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.simulacion_aerea main .selector {
    display: block;
    font-size: 1.5em;
    margin-bottom: 1.5em;
    border: 1px solid black;
    text-align: center;
}

.parametro {
    font-size: 1.5em;
    color: azure;
    font-family: 'Audiowide', cursive;
}


#lanzar_simulacion {
    background-color: cornflowerblue;
    color: azure;
    font-size: 1.5em;
    border: 1px solid black;
    border-radius: 10%;
    width: 60%;
    padding: 3px;
}

.simulacion_aerea footer {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    font-size: 1.5em;
    

}



.simulacion_aerea h3 {
    color: azure;
    font-family:'Audiowide', cursive;
    text-align: center;
    margin-top: 2em;
    margin-bottom: 0em;
}

.simulacion_aerea .botones_nuevos {
    background-color: azure;
    color: black;
    margin: 1em;
    border: 5px solid black;
    border-radius: 20%;
    font-size: 1.2em;
}


/* PAGINA DE SIMULACIONES MAS REPRODUCIDAS*/

.simulacion_aerea main #cuadro {
    display: flex;
    flex-direction: row;
    background-color: rgba(250, 235, 215, .80);
    justify-content: space-between;
    border: 2px solid black;
    width: 100%;
}


.simulacion_aerea main div section {
    padding-left: .5em;
    padding-right: .5em;
}

.simulacion_aerea main #cuadro section #titulo_de_columna {
    color: black;
    border: 1px solid black;
    margin-bottom: .5em;
    font-size: .7em;
}

.simulacion_aerea main #cuadro section ul li {
    font-family: sans-serif;
    font-weight: bold;
    margin-bottom: .5em;
    list-style: none;
    font-size: .7em;
}







/* AYUDA ESTILOS */

.body_ayuda{
    background-color: rgb(4,0,40);
    padding-bottom: 70px;

}

.body_ayuda main{
    color:white;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    margin:1em;
}


.body_ayuda main h1{
      font-family:'Black Ops One', cursive;
      text-decoration: underline double;
      font-size: 3em;
      margin-top: 1em;
}

.body_ayuda main article div p{
      font-family: 'Audiowide', cursive;
}

.body_ayuda main article div h2{
      font-family:'Black Ops One', cursive;
      margin-top: 2em;
      margin-bottom: 1em;
      text-decoration: underline;
}







/*---------------------------------ESTILOS DE EMANUEL-----------------------------------------*/


/*  PRECONTROL  */

.precontrol {
    background-image: url(../imagenes/fondo_control2.png);
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    color: white;
    padding: 0;
    margin: 0;
}


.leyendo img {
    border-radius: 45%;
    width: 50%;
    height: auto;
}

.ips img {
    width: 50%;
    margin-bottom: 50px;
    border: 3px solid white;
    border-radius: 25;
}




/* PRECONTROL 2 */

.precontrol2 {
    background-image: url(../imagenes/fondo_control2.png);
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
}

.listas{
    width: 100%;
    text-align: center;
    
    background-color: rgba(210,220,250,.1);
    padding: 5%;
}

.nombres_listas{
    font-size: 1.5em;
    font-family: 'Black Ops One', cursive;
}

table {
    margin: 0px;
    width: 100%;
    
    border: 2px solid white;
}


.datos_listas {
    font-family: 'Audiowide', cursive;
}

.datos_listas th {
    font-size: 1em;
    padding-bottom: 1em;
}

.datos_listas:hover {
  background-color: black;
}

.precontrol2 main .listas a{
    color: white;
    padding-bottom: 1.5em;
} 




/* CONTROL AEREO ESTILOS */

.control_1 {
    background-image: url(../imagenes/fondo_control1.png);
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    color: white;
}


.control_titulo h1 {
    font-size: 3em;
    padding: 20px;
    font-family: 'Black Ops One', cursive;
    text-decoration: underline double;
    text-align: left;
}



.TEXTO_TITULO {
    font-family: 'Audiowide', cursive;
    font-size: 2em;
    text-align: center;
}

.TITULO {
    font-family: 'Audiowide', cursive;
    width: 100%;
}


.CARGANDO {
    display: block;
    width: 45%;
    height: auto;
    margin-left: 27.5%;
    
}

.DESPEGAR {
    font-family: 'Audiowide', cursive;
    display: inline-block;
    margin:auto;
    padding: 5% 5%;
    
}

.DESPEGAR a {
    text-decoration: none; 
}

.TEXTO_DESPEGAR {
    color: coral;
    font-size: 3em;
    margin-bottom: 2em;
    background-color: white;
   
}

.TEXTO_ATERRIZAR {
   color: coral;
    font-size: 3em;
    margin-bottom: 2em;
    background-color: white;
}




/* CONTROL AEREO 2 ESTILOS */


main .ALTVEL h3 {
    font-size: 3em;
    padding-top: 5px;
    padding-bottom: -10px;
}

.control_2 {
    background-image: url(../imagenes/fondo_control2.png);
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    color: white;
}


.ALTVEL {
    margin:auto;  
    text-align: center;
}


.ALTURA,.VELOCIDAD {
    display: inline-block;
    text-align: center;
    justify-content: center;
    padding:20px;
}



.TITULOV2{
    font-size: 200%;
    padding: 20px;
}


      
.logo {
    text-decoration-line: none;
    background-color: white;
}


/* CONTROL AEREO 3 ESTILOS */

.control_3 {
    text-align: center;
    background-image: url(../imagenes/fondo_control1.png); 
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    color: white;
    padding-bottom: 70px;
}

.control_3 main img {
    width: 60%;
    height: auto;
}

.control_3 main h2 {
    font-family: "Audiowide";
    font-size: 3em;
    margin-top: 1em;
}

.control_3 main form label{
    font-family: "Audiowide";
    font-size: 3em;
    margin-top: 1em;
}

.control_3 main form .selector {
     font-size: 2em;
     font-family: "Audiowide"
}



.control_3 main form #caja_para_numero {
    font-size: 4em;
    width: 20%;
    height: auto;
    font-family: "Audiowide"
        

}


/*PAGINA DE ATERRIZAJE*/

#pagina_de_aterrizaje {
    background-image: url(../imagenes/fondo_control1.png)
}