@import url('https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet');
@import url('https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab" rel="stylesheet');

* {
    box-sizing: border-box;
    margin:0;
    padding: 0;
    max-width: 100%;
    
}

body {
    margin: 0;
    padding: 0;
    background: #2C3456;
    font-family: 'Roboto', 'Arial', sans-serif;}


header {
    font-family: 'Roboto', 'Arial', sans-serif;
    background-color: #2C3456; 
    background-image:url(Img/fadu01-01.jpg);
    background-size: cover;
    background-position: center;
}


.iconmenu{
    max-width: 5%;
}


/* links */
a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    color:#FFF;
}


/* aca está el menú */
nav {
    background-color: #efefef;
    margin: auto;    
}

.menu {
    display: none;
}

header nav ul {
    overflow: hidden;
    list-style-type: none;
    margin: 0;
}

header nav ul li {
    float: left;
    text-decoration: none;
}


header nav ul li a {
    color: #FB7874;
    padding: 1.25rem;
    display: block;
}

header nav ul li a:hover {
    background-color: #fe7776;
}
/* aca termina el menu */



 header nav {
        width: 80%;
        height: 100%;
        position: fixed;
        box-shadow:  2px 0 #aaaaaa;
        left: -100%;
    }
    
    header nav ul li {
        display: block;
        float: none;
        border-bottom: 1px solid rgba(106, 203, 179, 0.51);
    }
    
    
    .menu {
        display: block;
        width: 100%;
        background-color: #FB7874;
    }
    
    .menu .botonmenu {
        display: block;
        padding: 1rem;
        color: #FFF;
        text-decoration: none;
        font-weight: 400;
    }
   

/* aca termina el menu */



/* header */
header h1{
    color:#6ACBB3;
    text-align: center;
    font-size: 10rem;
    margin-top: 0.625rem;
    margin-bottom: 0.625rem;
}

header h2{
    color:#AEB7D6;
    text-align: center;
    font-size: 1rem;
    margin: 0rem;
    padding: 2rem;
}

header h3{
    color:#AEB7D6;
    text-align: center;
    font-size: 1rem;
    margin: 0rem;
    padding: 1rem;
}







/* integrantes */

article h3{    
    margin-top: .5rem;
    
}



.integrantestitulo{    
    margin: 0;
    padding: 5rem 0rem 1rem 0rem;
    background-color: #FB7874;
    list-style-type: none;
    font-family: 'Roboto Slab', sans-serif;
    text-align: center;
    font-size: 2rem;
    color: #2C3456;
    
}


.integrantes{    
    margin: 0;
    padding: 1rem 0rem 8rem 0rem;
    background-color: #FB7874;
    list-style-type: none;
    text-align: center;
    
}


.integranteseccion{
    width: 80%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: auto;
    background-color: #FB7874;
}

    
.integrantes img {
    height: auto;
    width: 90%;
    margin: 0;
}



.integrantes a{
    display: center;
    font-size: 1.1rem;
    font-family: 'Roboto', sans-serif;
    color: #2C3456;
}

.integrantes a:hover {
    color: #ffffff;
}
    


/* seccion texto FADU */

.datosfadutitulo{    
    margin: 0;
    padding: 5rem 0rem 1rem 0rem;
    background-color: #2C3456;
    list-style-type: none;
    font-family: 'Roboto Slab', sans-serif;
    text-align: center;
    font-size: 2rem;
    color: #6FC8B7;
}

section{
    overflow: auto;
    padding: 1rem 0rem 8rem 0rem;
    background-color: #2C3456;
    display: flex; justify-content: space-between;
    max-width: 80rem;
    margin: auto;
}

section h3{
    color: #6FC8B7;
    text-align: left;
    font-size: 1.4rem;
    display: flex; justify-content: space-between;
}

section p{
    color: #FFFFFF;
    margin: 0;
    text-align: left;
    line-height: 1.6 
        
}


section .texto1{
width: 50%;
padding: 0rem 0rem 0rem 3rem;
}

section .texto2{
width: 50%;
padding: 0rem 3rem 0rem 2rem;
}




/* flecha */

.volver{margin: 0;
    font-family: 'Roboto Slab', sans-serif;
    text-align: center;
    font-size: 1rem;
    color: #6FC8B7;
}

.volver p {margin-bottom: 2rem;
}

/* footer */
footer{
    background-color: #212B47;
    text-align: center;
    padding: 1rem;
    font-size: .8rem;
    color: #FFFFFF;
    position: relative;
}

footer h4{
    color:#6ACBB3;
}



/* ------------------------------- Para tablet ------------------------------- */

@media screen and (max-width: 640px){
    
    .iconmenu{
        max-width: 2%;
    }

    /* header */

    header h1{
        font-size: 6rem;
        margin-top: 0.2rem;
        margin-bottom: 0.2rem;
    }

    header h2{
        font-size: 0.8rem;
        padding: 1rem;
    }

    header h3{
        font-size: 0.8rem;
        padding: 1rem;
    }




    header h2{
        color:#AEB7D6;
        text-align: center;
        font-size: 1rem;
        margin: 0rem;
        padding: 2rem;
    }

    header h3{
        color:#AEB7D6;
        text-align: center;
        font-size: 1rem;
        margin: 0rem;
        padding: 1rem;
    }

    /* menu */

    nav ul li {
        font-size: 1.1rem;
        padding: 1rem;
        width: 85%;  
    }



    /* aca está el menú */
    nav {
        background-color: #efefef;
        margin: auto;    
    }

    .menu {
        display: none;
    }

    header nav ul {
        overflow: hidden;
        list-style-type: none;
        margin: 0;
    }

    header nav ul li {
        float: left;
        text-decoration: none;
    }


    header nav ul li a {
        color: #FB7874;
        padding: 1.25rem;
        display: block;
    }

    header nav ul li a:hover {
        background-color: #fe7776;
    }


     header nav {
            width: 80%;
            height: 100%;
            position: fixed;
            box-shadow:  2px 0 #aaaaaa;
            left: -100%;
        }

        header nav ul li {
            display: block;
            float: none;
            border-bottom: 1px solid rgba(106, 203, 179, 0.51);
        }


        .menu {
            display: block;
            width: 100%;
            background-color: #FB7874;
        }

        .menu .botonmenu {
            display: block;
            padding: 1rem;
            color: #FFF;
            text-decoration: none;
            font-weight: 400;
        }


    /* aca termina el menu */


    /* menu integrantes */    


    .integrantestitulo{    
        padding: 4rem 0rem 1rem 0rem;
        font-size: 1.5rem;

    }

    .integrantestitulo img {
        height: auto;
        width: 8%;
        margin: 0;
    }


    .integrantes{    
        padding: 1rem 0rem 4rem 0rem;

    }


    .integrantes a{
        font-size: 1.3rem;
    }


    /* Fadu  */    


    .datosfadutitulo{    
        padding: 4rem 0rem 1rem 0rem;
        font-size: 1.5rem;

    }

    .datosfadutitulo img {
        height: auto;
        width: 8%;
        margin: 0;
    }


    section .texto1{
    padding: 0rem 0rem 0rem 3rem;
    }

    section .texto2{
    padding: 0rem 3rem 0rem 2rem;
    }

    section{
        padding: 1rem 0rem 4rem 0rem;
    }


    /* flecha */
    .volver{
        font-size: 0.8rem;
    }

    .volver p {margin-bottom: 1rem;
    }

    /* footer */
    footer{
        font-size: .6rem;

    }



    
    
/* -----fin tablet----- */
}
/* -----fin tablet----- */



/* ------------------------------- Para Mobile ------------------------------- */

@media screen and (max-width: 320px){
    
    .iconmenu{
        max-width: 5%;
    }
    
        .menu .botonmenu {
        display: block;
        padding: .3rem;
        color: #FFF;
        text-decoration: none;
        font-weight: 400;
    }
    
    
header nav ul li a {
    color: #FB7874;
    padding: .7rem;
    display: block;
}


    /* header */


    header h1{
        font-size: 4rem;
        margin-top: 0.1rem;
        margin-bottom: 0.1rem;
    }

    header h2{
        font-size: 0.8rem;
        padding: 1rem;
        margin-bottom: 1rem;
    }

    header h3{
        font-size: 0.8rem;
        padding: 1rem;
        margin-top: 1rem;
    }

section {
        display: block;
    }
    
    
section .texto2{
    margin: 0 0 0 1rem;  
    margin-top: 2rem;
    width: 80%;
    } 
    
section .texto1{
    margin-top: 2rem;
    width: 80%;
    } 
    
    
section .texto1 h3{
        font-size: 1.2rem;
        margin-bottom: 1rem;
        margin-top: 1rem;
    } 
    
section .texto2 h3{
        font-size: 1.2rem;
        margin-bottom: 1rem;
        margin-top: 1rem;
    } 
    
    
section .texto1 p{
        font-size: .8rem;
        width: 80%;

    } 
    
section .texto2 p{
        font-size: .8rem;
        width: 80%;
;
    } 


    .datosfadutitulo img {
    height: auto;
    width: 30%;
    margin: 0;
}
    
    .integrantestitulo img {
        height: auto;
        width: 30%;
        margin: 0;
}

    .integrantes a{
        font-size: 1rem;
    }

    
/* -----fin Mobile----- */
}
/* -----fin Mobile----- */