@charset "uft-8"; 
@import url(https://fonts.googleapis.com/css?family=Bitter:400,400italic,700);

* {
	margin: 0;
	padding: 0;
	text-decoration: none;
	list-style: none;
    
}

html {
    background-color:#323232;
}

body {
	background:#BEBEBE;
	width:90%;
	max-width:20em;
	margin:auto;
	display:flex;
	flex-flow:row wrap;
    font-family: 'Bitter', serif;
}

h1 {
    text-align: center;
    color:#202043;
}
    
}

h2 {
    font-size: 1.2em;
    font-weight: 700;
    color: #c92121;
    margin-bottom: 0.5em;

}

p {
    font-size: 0.em;
}

/*************** ACA EMPIEZA LA BARRA DE NAVEGACION ****************/

nav {
	width:100%;
	display:flex;
}

nav ul {
    width:100%;
	display:flex;
	flex-flow:row wrap;
    justify-content:space-around; 
}

nav ul li {
    display:flex;
    flex-grow: 1;
}
nav ul li a {
	background-color: #ea1212;
	color:#fff;
	text-align: center;
    font-weight: 700;
    font-size: 0.9em;
	padding:10px;
	flex-grow:1;
}

nav ul li a:hover {
	background:#c92121;
}

/*************** ACA EMPIEZA EL HEADER ****************/

header {
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    
}
header figure {
    width: 100%;
    height: 20em;
    margin-bottom: 1em;
    display: flex;
    flex: 1 1 100%;
}

header figure img {
    height: 100%;
    width: 100%;
}

/*************** ACA EMPIEZA CONTENEDOR ****************/

.contenedor {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
}

/*************** ACA EMPIEZA PRIMERA ****************/

.primera {
    width:90%;
    display: flex;
    flex-flow: column wrap;
    margin: auto;
}

.primera figure {
    margin-top: 1em;
    margin-bottom: 1em;
    display: flex;
    max-height: 17em;
    display: flex;

}

.primera figure img {
    width: 100%;
    height: auto;
}

.primera .redes {
    width:100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin-bottom: 1em;
}

.face, .inst, .beha, .link {
    background-color: #202043;
    width: 3em;
    height: 3em;
    display: flex;
    align-items: center;
}

.face:hover, .inst:hover, .beha:hover, .link:hover {
    background-color: #1616a2;
}


.primera .redes a {
    width: em;
    height: 2em;
    display: flex;
    justify-content: space-between;
    margin: auto;
    
}

.primera .redes a img {
    width: 2em;
    height: 2em;
}

/*************** ACA EMPIEZA SEGUNDA ****************/

.segunda {
    margin-bottom: 1em;
    padding: 2em;
    background-color: #c46565; 
    display: flex;
    flex-flow: column wrap;
}

.segunda h2 {
    color: white;
    margin-bottom: 0.3em;
    text-align: center;
}

.segunda p {
    margin-bottom: 1em;
    text-align: center;
    
}
/*************** ACA EMPIEZA TERCERA ****************/
.tercera {
    margin-bottom: 1em;
    padding: 2em;
    display: flex;
    flex-flow: column wrap;  
}

.tercera h2 {
    color: #c92121;
    text-align: center;
    margin-bottom: 0.3em;
}

.tercera .trabajopractico {
    display: flex;
    flex-flow: column nowrap;
    margin-top: 2em;
    align-items: center
}

.tercera .trabajopractico .tpo {
    margin-bottom: 1em;
    
}

.tercera .trabajopractico a {
    padding: 1em 2em;
    width: 6em;
    color: white;
    background-color: #c92121;
    text-align: center;
    font-weight: 700;
  
    
}


footer {
    padding: 4em 2em;
    font-size: 0.8em;
    color: white;
    text-align: center;
    background-color: #202043;
    
}

/*************** ACA EMPIEZA CSS PARA TABLETS****************/
@media screen and (min-width: 35em) {
body {
        max-width:35em;
    } 
    
    .primera {
        width: 20em;
        align-items: center;
    }
    
.primera figure img {
    width: 20em;
    height: 20em;
    margin-bottom: 3em;
    }

.primera .redes {
    margin-top: 3em;
    margin-bottom: 2em;
}

    .segunda p {
        text-align: center
    }
    .tercera p {
    margin-left: 3em;
    margin-right: 3em;
    }
    
    
    
    
    
}

/*************** ACA EMPIEZA CSS PARA ESCRITORIO****************/
@media screen and (min-width: 80em) {
    body {
	max-width:80em; 
    }
    nav {
        width: 50%;
        display: flex;
        align-items: flex-end;
        align-content: flex-end;
        justify-content: flex-end;
    }

    nav {
       justify-content: flex-end;
    }
    
    .contenedor {
        display: flex;
        flex-flow: row wrap;
        align-content: flex-start;
    }
    
    h1 {
        text-align: left;
        padding-left: 1em;
    }
    
    .p {
        margin-bottom: 0;
    }

    .primera {
        width: 28%;
    }
    .segunda {
        width: 28%;
        background-color:#BEBEBE;
    }
    
    .materias {
        background-color: #c46565;
        padding: 1em;
        margin-bottom: 1em;
    }
    
    .cursando {
        background-color: #c46565;
        padding: 1em;
    }
    
    
    .tercera {
        width: 28%;
    }
    
    .informacion{
        padding: 1em;
        border: 0.4em;
        border-style: solid;
        border-color: #c92121;
    }
    
}