* {margin: 0; padding: 0; box-sizing: border-box;font-family: 'Quicksand', sans-serif;text-decoration: none; list-style: none}
img {/* para que nunca sea mayor que la caja que las contiene */max-width: 100%;height: auto;}
body {100vw; background-color: beige}


/*BARRA SUPERIOR*/
.barra_superior {background:white; width: 100vw;height:4rem;display: flex;flex-direction: row;align-items:center;justify-content:space-between}
#atras {display: block; width: 1rem; margin-left: 1rem}
#logo {display: block; width: 6rem; margin-left: 1rem}
h1 {color: black; font-size: 1.1rem}
#menu3lineas {display: block; width: 1.2rem;margin-right: .7rem}

/*MENU-HAMBURGUESA*/
#menu3lineas{display: block;height: 2em;width: 2em;}
#menu3lineas img{width: 75%}
header nav {background-color: rgba(0,0,0,0.80);color: white;/* para salir del "flujo de información" del fondo y colocase en una capa superior fija */position: fixed;right: -80vw;top: 0;height: 100vh;min-width: 60vw;transition: all .6s ease;z-index: 999;}
/* cuando cliqueamos el boton "menu3lineas" el "target" es "nav#menu"*/
header nav#menu:target {right: 0;/* transición suave */transition: all .6s ease;}
header nav a {display: flex; height: 2.5rem;}
/* boton "X" de cierre del nav */
#x {position: absolute;right: 0;margin-top: 1rem; margin-right: 1rem}
#x img {height: 1.2rem }
.c {display: flex; flex-direction: row;}
.ico {height: 1.7rem;;margin-left: 1.5rem}
.icocrrs {height: 1.7rem;margin-left: 1.5rem}
.ico img {height: 1.7rem;margin-top: .2rem}
.icocrrs img {height: 1.7rem;margin-top: .2rem; opacity: 0.4}
.txt {text-align: left; padding-left: 1.2rem;align-self: center; font-size: .9rem;color:rgba(255,255,255,.75)}
.cerrarssn {text-align: left; padding-left: 1.2rem;align-self: center; font-size: .9rem; color:rgba(255,255,255,.5)}
.c:hover {background: #0099A4}
.txt:hover {color: white;}
.usuarioimg {margin-top: 4rem; width: 4rem;align-self: center}
.usuario {width: 60vw; display: flex;flex-direction: column}
h6 {height: 4vh; font-size: 1rem; text-align: center;margin-top: 1rem}


#registrate {background:#5B5B5E; width: 34vw; margin-left:12vw; border-radius: 2.5rem; display: flex; flex-direction: column; justify-content: center;font-size: 1rem;text-align: center; color: white; height: 2.5rem; margin-top: 1rem; margin-bottom: 2rem}
#registrate:hover {background:teal}

/*SUBTITULO-PANTALLAS*/
.titulocarreras {height: 3rem; width: 100vw ;background: teal;}

h2 {color: white; font-size: 1rem; text-align: center;padding-top:.4rem}


/*PANTALLA-GALERIA*/
#galerias nav {background-color: rgba(0,0,0,0.80);color: white;/* para salir del "flujo de información" del fondo y colocase en una capa superior fija */position:fixed; right:-100vw; top:16vh;height: 68vh;min-width: 50vw;transition: z-index: 999;width: 70%; margin-left: 15%; margin-right: 13%; border-radius: 1rem}

/* cuando cliqueamos el boton "menucarreras" el "target" es "nav#opc"*/
#eleccion-carrera nav#opc:target {right: 0; /* transición suave transition: all .6s eas*/}
#eleccion-carrera nav a {color: rgba(255,255,255,.75);display: flex; height: 3rem;}

.d:hover {background: #E6686E; color: white}
.tx:hover {color: white}

/* boton "X" de cierre del nav */
#y {position: absolute;right: 0;margin-top: 1rem; margin-right: 1rem}
#y img {height: 1rem }
h5{font-size: 1.1rem; font-weight: 100; text-align: center; padding-top: 1rem;margin-bottom: 2rem}
#eleccion-carrera nav ul {margin-top: .2rem}
.d {display: flex; flex-direction: row}
.ic img {height: 3rem;margin-top: .2rem}
.tx {font-size: 1rem; margin-left: 1.4rem; align-self: center}
.imgfadu {width: 100vw}

section {
    border-top: solid 1px rgba(0,0,0,.1);
}

.galeria {
    padding-bottom: 2em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.galeria h3 {
    width: 100%;
    padding: 1em;
}



.galeria figure {
    width: 80vmin;
    /*height: 80vmin;*/
    margin: .125em;
    position: relative;
    overflow: hidden;
}

.galeria img { display: block; }

.galeria figcaption {
    background-color: teal;
    color: white;
    padding: .5em;
    line-height: 1em;
    position: absolute;
    height: 100%;
    top: calc(100% - 1.5em);
    transition: all .5s ease;
    
}

.galeria figure:hover figcaption {
    background-color: teal;
    top: 50%;
    transition: all .5s ease;
}

.galeria figcaption span {
    display: block;
    font-size: .75em;
    color: #ddd;
}


.textos {
    padding: 1em;
}

.textos > * {
    margin-bottom: 1em;
}





/*PANTALLA-DG-PERFILES*/

.cajatest {display: flex; flex-direction: column}
p {margin-left: 2rem; margin-right: 2rem; text-align: center; margin-top: 2rem; font-size: 1.2rem}
.test {background: #29AB8D; margin-top: 2rem; height: 2.5rem; border-radius: 2rem; width: 50vw; color: white; display: flex; flex-direction: column; justify-content: space-around; align-self: center; align-items: center; font-size:1.1rem; font-weight: bold}
.test:hover {opacity: 0.7}
.menuperfiles {width: 100vw; text-align: center; margin-top: 1.3rem; display: flex; flex-direction: column;}
.perfico img {width: 6.5rem;padding-top:.5rem}
.perftxt {color: white; font-size: 1rem; font-weight: bold}
.i {background: #965F9F; height: 7.625rem; margin-bottom: .15rem}
.ii {background: #F3AA3A; height: 7.625rem; margin-bottom: .15rem}
.iii {background: #E6686E; height: 7.625rem; margin-bottom: .15rem}
.iv {background: #6667A6; height: 7.625rem; margin-bottom: .15rem}
.v {background: #0099A4; height: 7.625rem; margin-bottom: .15rem}
.i:hover {opacity: 0.7}
.ii:hover {opacity: 0.7}
.iii:hover {opacity: 0.7}
.iv:hover {opacity: 0.7}
.v:hover {opacity: 0.7}


article{
	padding: 15px 0;
	border-bottom: 1px solid black;
}
article:first-child{
	padding-top: 0;
}
article:last-child{
	border-bottom: none;
}

h2{
	font-size: 23px;
}
h2::before{
	content: "+ ";
	font-weight: bold;
	font-size: 27px;
}
.articuloEventos p{
	font-size: 14px;
	padding: 5px 0;
}
.banner{
	display: flex;
}
.banner li{
	padding-right: 25px;
	width: 65%;
	flex-shrink: 0;
}
.titularCaja{
	height: 150px;
	display: flex;
	flex-direction: column-reverse;
	color: white;
	text-shadow: 2px 2px 2px black;
}
.titularCaja span{
	padding: 5px;
	font-size: 15px;
}

.banner li p:nth-child(2){
	text-align: justify;
	font-size: 12px;
	margin-top: 5px;
}


.textos {
    padding-bottom: 2em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.textos h4 {
    width: 100%;
    padding: 1em;
}