/* Insertamos la fuente que vamos a utilizar en nuestro proyecto */

@font-face {
    font-family: cabin;
    src: url('../Cabin/static/Cabin/Cabin-Regular.ttf');
}

/* insertamos la tipografía y el color de fondo a nuestra página */
body {
    margin: 0;
    padding: 0;
    background-color: white;
    font-family: cabin;
}

/* HEADER */
/* en la cabecera le damos un alto y un ancho, sin color y lo hemos flex para se posicionene a los lados los elementos */
header {
    width: 97vw;
    margin-top: -0.5rem;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ocultamos el menu para web */
nav#menuWeb {
    display: none;
}

/* El menu de hamburguesa lo hacemos flex, para poderlo poner en columna y le damos un estilo */
div#menuHamburguesa {
    width: 2.2rem;
    height: 1.5rem;
    margin-left: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    cursor: pointer;
}

/* las barritas que componen el menu de hamburguesa */
span {
    background-color: black;
    width: 2.2rem;
    height: .1rem;
    display: block;
    border-radius: 10px;
    transition: all .4s;
}

/* Lo que desplegamos al seleccionar el menu de hamburguesa,  */
ul {
    display: none;
    padding: 0;
    list-style: none;
    background-color: rgb(100, 146, 225);
    height: 100vh;
    margin: 0;
}

/* Al pasar el raton por encima de la lista, aparezca que ese elemnto se puede seleccionar */
li {
    cursor: pointer;
    padding: 1rem;
}

/* Para que cambie el fondo de color al pasar el cursos por encima y haya un transiccion de 0.4segundos */
li:hover {
    background-color: white;
    transition: all .4s;
}

/* Al tener el fondo blanco, cambiar las letras a color azul, para que aprecie mejor con el fondo */
li:hover>a {
    color: rgb(100, 146, 225);
    transition: all .4s;
}

/* le damos un estilo a los enlaces que estan dentro de la lista */
a {
    text-decoration: none;
    color: black;
    margin-left: 2rem;
    letter-spacing: 0.5rem;
    font-size: 1.3rem;
}

/* Corresponde con transiccion de la primera barra del menu de hamburguesa */
.primera {
    transform: translateY(.5rem) rotate(45deg);
    transition: all .4s;
}

/* Corresponde con transiccion de la segunda barra del menu de hamburguesa */
.segunda {
    opacity: 0;
    transition: all 0s;
}

/* Corresponde con transiccion de la tercera barra del menu de hamburguesa */
.tercera {
    transform: translateY(-.5rem) rotate(-45deg);
    transition: all .4s;
}

/* FOOTER */

/* Ponemos un color de fondo, que ocupe todo el ancho de la pantalla. */
section#contactos {
    background-color: rgb(100, 146, 225);
    height: 100vh;

}

/* Damos un color de al texto, junto con una sombra y le damos espacios */
section#contactos>h2 {
    color: white;
    text-align: center;
    text-shadow: 3px 3px rgb(137, 144, 152);
    margin-top: 0rem;
    margin-bottom: 0rem;
    padding: 0.5rem;
}

/* Hacemos flex para poder posicionarlo uno debajo de otro y lo centramos */
section#contactos>div {

    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* height: 28rem; */
}

/* Hacemos Flex, para poder posicinar las imagenes al lado del texto. 
Damos un altura a los contenedores */
section#contactos>div>div {
    display: flex;
    align-items: center;
    height: 20vh;
}

/* Damos un tamaño a las imagenes */
div>div:nth-child(1)>img {
    width: 2rem;
}

/* Damos un tamaño a la letra de los enlaces */
div>a {
    font-size: 0.7rem;
    margin-left: 5px;
}

/* Damos un tamaño y un color al párrafo del final */
section#contactos>p {
    color: white;
    margin-left: 1rem;
    font-size: 0.5rem;
    margin-top: -4rem;
}

@media(min-width: 750px) {

    /* NAV TABLET*/
    /* Dashabilitamos el menu de hamburguesa */
    diV#menuHamburguesa {
        display: none;
    }

    /* Oculamos las opciones del menu desplebable versión movil, para la versión table y web */
    ul#opcionesMenu {
        display: none !important;
    }

    /* dashabilitamos el logo del menu de hamburguesa */
    div#Logo {
        display: none;
    }

    /* Activamos el Menu Web */
    nav#menuWeb {
        display: flex;
    }

    /* Hacemos flex y colum, para poder poner un div debajo de otro */
    nav#menuWeb {
        display: flex;
        flex-direction: column;
    }

    /* Para el primer div del nav, lo hacemos flex para poder poner los logos uno a cada lado */
    nav#menuWeb>div:first-of-type {
        margin: 0.3rem;
        display: flex;
        justify-content: space-between;
        font-size: 0.7rem;
    }

    /* Para quitar el margen de arriba de los logos */
    nav#menuWeb>div:first-of-type>h1 {
        margin: 0.5rem;
    }

    /* Ponemos un color de fondo en el segundo div, y lo haccemos flex, para que se posicionen uno al lado del otro */
    nav#menuWeb>div:last-of-type {
        background-color: rgb(100, 146, 225);
        margin-top: 0;
        display: flex;
        justify-content: center;
        padding: 0;
        margin-bottom: 0;
    }

    /* Damos un margen a cada p, que coniene los enlaces de la barra de navegcion, para separalos entre sí */
    nav#menuWeb>div:last-of-type>p {
        margin: 0.5rem;
    }

    /* A los enlaces le quitamos la barra de decoración,y ponemos un color. */
    nav#menuWeb>div:last-of-type>p>a {
        text-decoration: none;
        color: black;
        font-size: 0.5rem;
    }

    /* Al pasar por los enlaces, el color de dichos, cambia a color negro */
    nav#menuWeb>div:last-of-type>p>a:hover {
        color: white;
    }

    /* SECTION */
    /* damos un margen encima de la sección */
    section#contactos {
        margin-top: 2rem;
    }
}

@media(min-width: 1100px) {

    /* NAV  WEB*/
    /* Damos un tamaño mas grande a los logos */
    nav#menuWeb>div:first-of-type {
        font-size: 1rem;
    }

    /* damos un mayor tamaño al fondo azul de los enlaces */
    nav#menuWeb>div:last-of-type>p {
        margin: 1.2rem;
    }

    /* Damos un mayor tamaño a los enlaces */
    nav#menuWeb>div:last-of-type>p>a {
        font-size: 1rem;
    }
}