/*HOJA DE ESTILOS GENERAL / CONFIG BASICA PLANTILLA Y MEDIA QUERIS GENERALES*/

/*Importar la fuente a utilizar*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,700;1,900&display=swap');

/*ESTILOS GENERALES*/

/*Resetear la hoja de estilos y setear la fuente general a utilizar*/
*{
    padding: 0;
    margin: 0;
    font-family: 'Roboto', sans-serif;
}
body{
    background-color: whitesmoke;
}
/*Personalizar la seleccion*/
::selection{
    background: rgb(255, 132, 0);
}
/*ESTILOS DE LOS BOTONES*/

/*Botones*/
.btn{
    color: white;
    text-decoration: none;
    font-size: 18px;
    border: 2px solid white;
    border-radius: 25px;
    padding-left: 19px;
    padding-right: 19px;
    padding-top: 5px;
    padding-bottom: 5px;
    display: inline-block;
    text-transform: uppercase;
}
.btn:hover{
    background-color: rgb(255, 132, 0);
    border: 2px solid rgb(255, 132, 0);
    color: white;
}

/*ESTILOS DEL HEADER*/

/*Header*/
header{
    margin: 0;
    padding: 0;
    display: flexbox;
    flex-wrap: wrap;
    background-color: whitesmoke;
}
/*Contenedor del logo*/
#logo{
    margin: auto;
    height: 250px;
    text-align: center;
}
/*Imagen del logo*/
#logo > img{
    height: 200px;
    margin-top: 20px;
}
/*Texto del logo*/
#logo h1{
    display: none;
}

/*ESTILOS DE LA BARRA DEL NAV*/

/*Barra del nav*/
nav{
    height: 39px;
    background-color: rgb(27, 27, 27);
    text-align: center;
}
/*Resetear estilo de lista de los botones del menu*/
ul, ol{
   list-style: none; 
}
/*Las opciones del menu*/
nav ul{
    display: inline-block;
}
/*Los enlaces del menu*/
.menu li a{
    background-color: rgb(27, 27, 27);
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    display: block;
    text-transform: uppercase;
}
/*Los enlaces del menu cuando pasas el raton por encima*/
.menu li a:hover{
    background-color: rgb(145, 143, 143);
}
/*Las opciones del menu*/
.menu > li{
    float: left;
}
/*Las opciones del submenu*/
.menu li ul{
    display: none;
    position: absolute;
    min-width: 140px;
}
/*Selecion de la pagina actual (activa)*/
#pactiva{
    background-color: rgb(255, 132, 0);
}
/*Las opciones del submenu al poner el raton encima de las opciones del menu*/
.menu li:hover > ul{
    display: block;
}
/*Boton de Abrir menu de movil*/
.abrir{
    display: none;
}
/*Boton de Cerrar menu de movil*/
.cerrar{
    display: none;
}

/*ESTILOS DEL MAIN*/

/*Main*/
main{
    height: 100%;
}
#contenedoreslogan{
    display: flex;
}

/*ESTILOS DEL FOOTER*/

/*Barra del Footer*/
div#footer{
    background-color: rgb(27, 27, 27);
    color: white;
    text-align: center;
    /*padding: 1em;*/
    align-self: flex-end;
    text-transform: uppercase;
    font-size: 20px;
}
/*Redes Sociales*/
.redessociales{
    color: white;
    text-decoration: none;
    margin-top: 5px;
    font-size: 25px;
    margin-bottom: 15px;
    padding-left: 10px;
    padding-right: 10px;
}
.redessociales:hover{
    color: rgb(145, 143, 143);
}

/*RESPONSIVE*/ /*MEDIA QUERYS*/

/*Cuando llegue a 992px de tamaño de pantalla, efectuara todos los cambios que contenga*/
@media(max-width:992px){
    /*RESPONSIVE DEL MENU*/

    /*El menu tiene una altura de 0 y se oculta por defecto*/
    ul.menu{
        height: 0;
        overflow: hidden;
        z-index: 100;
    }
    /*El boton de abrir aparece en movil por defecto*/
    .abrir{
        display: block;
        width: 50px;
        margin: auto;
        height: 35px;
        border-radius: 2%;
        float: right;
    }
    /*Al pulsar sobre el boton de abrir, el menu aparece*/
    #menunavegacion:target .menu{
        height:100vh;
        z-index: 100;
    }
    /*El boton de cerrar el menu en movil esta oculto por defecto*/
    .cerrar{
        display: none;
        width: 50px;
        margin: auto;
        height: 35px;
        border-radius: 2%;
        float: right;
    }
    /*Al pulsar en el boton de cerrar, se oculta todo el menu*/
    #menunavegacion:target .abrir{
        display: none;
    }
    /*Al pulsar en el boton de abrir, aparece el menu y el boton de cerrar*/
    #menunavegacion:target .cerrar{
        display: block;
    }
    /*Al abrir el menu este se queda sin flotacion, quedando en vertical*/
    .menu>li{
        float: none;
    }
    /*Al abrir el menu este se ensancha quedando en bloque*/
    nav ul{
        display: block;
    }
    /*Al abrir el menu el submenu se coloca igual que las opciones principales*/
    .menu li ul{
        display: block;
        position: relative;
    }
    /*El Span dentro de los botones del menu de movil*/
    .btnmovil>span{
        background: none;
        color: white;
        font-size: 2em;
    }
    /*Los botones del menu de movil*/
    .btnmovil{
        text-decoration: none;
    }
    /*La barra de navegacion del menu*/
    nav{
        background: rgb(27, 27, 27);
        height: 35px;
        width: 100%;
        position: absolute;
        z-index: 100;
    }
    /*Menu y su posicion*/
    .menu{
        position: relative;
        z-index: 100;
        background-color: rgb(27, 27, 27);
        width: 100%;
        height: 100vh;
        transition: 0.8s;
    }
    /*Quitar el color de fondo a las opciones del menu*/
    .menu li a{
        background:none;
    }

    /*RESPONSIVE DEL HEADER*/
    header{
        position: fixed;
        height: 150px;
        width: 100%;
        z-index: 100;
    }
    main{
        padding-top: 11em;
    }
    /*Tamaño de la imagen del logo*/
    #logo>img{
        height: 130px;
    }
    /*Tamaño del contenedor del logo*/
    #logo{
        height: 150px;
    }
    /*RESPONSIVE FOOTER*/
    div#footer{
        position: static;
        background-color: rgb(27, 27, 27);
        font-size: 15px;
    }
    .redessociales{
        font-size: 20px;
    }
}