@import 'https://fonts.googleapis.com/css?family=Exo:300,400,700';

* {
    margin: 0;
    padding: 0;
    font-family: 'Exo', sans-serif;
    list-style: none;
    box-sizing: border-box;
    }

body {
    margin: 0;
    padding: 0;
    background-color: #FCFCFF;
    }

a {
    text-decoration: none;
    }

header , footer {
    background: linear-gradient(to bottom, #CFC6FA 0%,#A08FF5 100%);
    box-shadow: 05px 02px 00px 02px rgba(0,0,0,0.20);
    text-align: center;
    padding: 1em 5em 1em 5em;
    min-width: 100%;
        
}

img#logo {
    max-width: 25%;
    max-height: auto;
}

header nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0.5em;
    justify-content: space-between;
}

header nav ul li {
    flex: 1;
}

header nav ul li a {
    text-decoration: none;
    display: flex;
    height: 1em;
    justify-content: center;
    align-items: center
    color: #FFFFFF;
    padding: 0em;
    cursor: pointer;
    
}



#contenedor {
    box-shadow: 0px 02px 05px 02px rgba(0,0,0,0.20);
    text-align: center;
}

#foto {
    float: none;
    padding: 1em;
    display: block;
    max-width: 80%;
    margin: auto;
    border-radius: 50em;
}



a h1 {
    display: flex;
    flex-direction: column;
    padding: 0.1em;
    
}

h1 {
    padding: 0.1em;
    float:none;
    color: #755BF5;
    text-align: center
}

div.redes.sociales nav ul li {
    display: flex;
    flex-direction: column;
    justify-content:center;
    box-sizing: padding-box;
    }



main {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    
}

main section div.contenidos {
    max-width: 100%;
    max-height: auto;
    padding: 1em;
    margin: 1em 1em 1em 1em;
    background: linear-gradient(to bottom, #CFC6FA 0%,#A08FF5 100%);
    box-sizing: content-box;
    box-shadow: 05px 02px 00px 02px rgba(0,0,0,0.20);
    border-radius: 1em;
    } 

main section div.contenidos h2{
    background: linear-gradient(to bottom, #AE51F5 0%,#755BF5 100%);
    margin: 0.1em 0em 0.1em 0em;
    text-decoration: none;
    list-style: none;
    color: #FFFFFF;
}

main section div.contenidos a img.logo{
    max-width: 100%;
    max-height: auto;
    cursor: pointer;
}


main section div.materias {
    max-width: 100%;
    max-height: auto;
    padding: 1em;
    margin: 1em 1em 1em 1em;
    background: linear-gradient(to bottom, #CFC6FA 0%,#A08FF5 100%);
    box-sizing: content-box;
    box-shadow: 05px 02px 00px 02px rgba(0,0,0,0.20);
    border-radius: 1em;
}

main section div.materias h3 {
    background: linear-gradient(to bottom, #AE51F5 0%,#755BF5 100%);
    margin: 0.1em 0em 0.1em 0em;
    text-decoration: none;
    list-style: none;
    color: #FFFFFF;
}

main section div.materias nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0.2em;
    justify-content: space-between;
}

main section div.materias nav ul li {
    flex: 1;
}

main section div.materias nav ul li a {
    text-decoration: none;
    color: black;
    display: flex;
    height: 2em;
    justify-content: center;
    align-items: center;
}

/*
----------------------Responsive---------------------------*/


#contenedor {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

header, 
footer {
    flex: 0 1 auto;
}

.contenidos {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
}
 
@media screen and (min-width:30em) {

    header, footer {
        margin: auto;
        max-width: 100%;
        max-height: auto;
    }

    
    nav ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    nav ul li {
        flex: 1;
    }
}

@media screen and (min-width:40em) {
   article {
       display: flex;
       align-items: center;
       max-width: 95%;
       margin: auto;
       margin-bottom: .5em;
    }
    }

@media screen and (min-width:45em) {
        header div {
        display: flex;
        align-items: center
    }
    
    nav, h1 {
        margin: .5em;
        flex: 1;
        flex-basis: calc(100% - 8em);
        justify-content: space-between;
    }

}

{}