* {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}

/*BARRA SUPERIOR*/
.barra_superior {background:#272727;width: 100vw;height:4rem;display: flex;flex-direction: row;align-items:center;justify-content:space-between}
#atras {display: block; width: 1rem; margin-left: 1rem}
#brujulalogo {display: block; width: 2.1rem; margin-left: 1rem}
h1 {color: white; 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: #6667A6}


/*SUBTITULO-PANTALLAS*/
.titulocarreras {height: 2rem; width: 100vw ;background: #7A7979;}
h2 {color: white; font-size: 1rem; text-align: center;padding-top:.4rem}


/*PANTALLA-ELECCION-CARRERA*/
#menucarreras {background: #F3AA3A;color: white;width: 60%; height: 3rem;margin-top: 1.5rem; margin-bottom: 1.5rem;margin-left: 20%; margin right: 20%;list-style: none; border-radius: 2rem; padding-top: .7rem;display: flex; flex-direction: column; align-content: center; align-items: center; align-self: center; font-size: 1.1rem}
#menucarreras:hover {opacity: 0.7} 

#eleccion-carrera 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}


/*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}

/*PANTALLA-DCORPO-MATERIAS*/

.caja-anios-carrera {width: 100vw}

.lista-anios {display: flex; flex-direction: row; justify-content:space-around; align-items: center; list-style: none; height: 2.313rem; width: 100vw;}

.anios a {color: white; font-size: 1.1rem; font-weight: bold; width: 25vw; height: 2.313rem;text-align: center; display: flex; align-items: center; justify-content: center;background: #965F9F}

.anios1 a {color: white; font-size: 1.1rem; font-weight: bold; width: 25vw; height: 2.313rem;text-align: center; display: flex; align-items: center; justify-content: center;background: #F3AA3A}

.anios a:hover {background: rgba(151,95,160,0.4)}

/*boton filtra materias*/

.boton {height: 5.625rem; display:flex; flex-direction: column; justify-content:center; align-items: center; align-content: center;width: 100vw; background: white; margin-bottom: .5rem}
.boton a {font-size: 1.3rem; font-weight: bold; color: white;background: #6C6BAB; border-radius: 3rem;width: 55vw; display: flex; align-items: center; justify-content: center;height: 2.5rem}
.boton a:hover {opacity: 0.6}


/*tarjetas*/
#gris {background: #E4E6E9; width: 100vw}
.tarjetacat {height:  9.25rem; background: white; width: 100vw; display: flex; flex-direction: row; align-content: center; align-items: center; align-self: center; margin-bottom: .4rem}


.cajavatar {height: 9.25rem; width: 25vw;padding-top: 2rem;padding-left: .5rem}

h7{font-size: 2rem;border-radius: 10rem;background: #434041;width: 5rem;height: 5rem; display: block; text-align: center;padding-top: 1rem;font-weight: bold;color: white}
h7:hover {background:rgba(0,0,0,0.60);color: #F3AA3A}
/*.cajavatar img {border-radius:50vw;height: 5.6rem;}*/

.cajadat {width: 75vw; height: 9.25rem;padding-left: .5rem}
.caja1 {display: flex; flex-direction: row; justify-content: space-between; align-items: center;}
.materianame {font-size: .7rem; color: #434041; font-weight: bold; text-align: left;width:28vw }
.catedraname {font-size: .75rem; text-align: left; color: #88868B; font-weight: bold; width: 30vw}
.nextico {margin-right: .3rem; width: 5vw;margin-top:.4rem }
.nextico img {height: 1.3rem}

.materianios {font-size: .7rem; color: #434041; margin-bottom: .2rem; text text-align: left;}

.caja3 {display: flex;justify-content: space-between; margin-right: 23vw; align-content: center; align-items: center; align-self: center; height:1.2rem;}
.day {width: 1.2rem; background:#AFAFB4; border-radius: 3rem; text-align: center}
.matday {width: 1.2rem; background:#F3AA3A; border-radius: 3rem;text-align: center; color: white}

.caja4 {display: flex; width: 67vw}
.matdatos {display: flex; flex-direction: column;width:57vw}

.subcaja1 {display: flex; height: 1.5rem; margin-top: .4rem; text-align: left}

.clockico {width:7vw}
.clockico img {height: 1.2rem}
.horario {width: 40vw; text-align: left; font-size: .7rem;padding-top: .3rem }

.subcaja2 {display: flex; height: 1.5rem}

.profeico {width: 7vw}
.profeico img {height: 1.2rem}
.jefecat {text-align: left; font-size: .7rem; font-weight: bold; color: #6C6566}
.nombrejefecat {text-align: left; font-size: .7rem; color: #6C6566;padding-left: .3rem}
.subcaja3 {width: 50vw;height: 1rem}
.subcaja3 img {height:.4rem; margin-bottom: .3rem}

.cajacomp {width: 12vw}
.subcaja4 {display: flex; flex-direction: column}
.compnum {font-size: 1.8rem; font-weight: bold; color: #00B594;margin-top: 1rem}
.compname {font-size:.6rem;padding-top: .2rem; color:#00B594}

/*PANTALLA-MI-ESPACIO*/

.cajaopciones {background: ; display: flex; flex-direction: column; align-items: center}

.miespacio li {height: 4rem; width: 100vw; text-align: center; padding-top: 1rem;margin-bottom: .2rem}
.miespacio li a{color: white}
.miespacio li:hover {opacity: 0.75} 

.mat {background: #6C6BAB}
.cal {background: #29AB8D}
.tar{background: #F3AA3A}
.exam{background: #E76C71}
.cla {background: #0099A4}

.dataclases {height:12rem; width: 100%}
.fechaclases {padding-left: 1.5rem; font-size: .9rem; margin-bottom: 1rem; margin-top: 1rem}
.clasehoy {text-align: center; color: #E76C71; font-size: 1.5rem }

#calend {background: #7A7979; width: 100vw; height: rem;position: fixed;bottom: 0}
table {width: 100%; height: 100%; text-align: center; color: white; font-size: 1.2rem; border-collapse: collapse}
.filanros {font-size: 2.5rem;}
.hoy {background: #0099A4;}

/*DISEÑO-CORPO*/


.img-corporativo{width: 100vw}
.sainfo {background:#6768A7;text-align: center;color: white; height: 1.8rem;padding-top: .2rem;width: 100vw}

.sacontenido{display: flex;flex-direction: column}


.saobjetivo {font-size: 1.2rem;
    text-align: left;font-weight: 700;
    margin-left: 3rem;
    border-bottom:1px solid;
    color: #414041; }


.saobjetivo2 {padding-top: 2rem;
    font-size: 1.2rem;
    text-align: left;
    font-weight: 700;
    margin-left: 3rem;
    border-bottom:1px solid;
    margin-right: 3.2rem;
    color: #414041;
    }

.safrase{font-weight: bold;
    width:70vw;color: #29AB8D;text-align: left; font-size: 1rem}

.saautor {color: #29AB8D;font-size: 0.8rem;text-align: right;width: 65vw}


.definicion {font-size: 0.8rem;
    margin-left: 3rem;margin-top: 1rem;
    text-align: left;
    color: #414041;}

.salistado {font-size: 0.8rem;margin-left: 3rem;text-align: left;color: #414041;margin-top: 1rem;    }

.sadefinicion {font-size: 0.8rem;
    margin-left: 3rem;text-align: left;
    color: #414041;}


.seboton-filtrar-materias {height: 2.5rem; display:flex; flex-direction: column; justify-content:center; align-items: center; align-content: center;margin-bottom: 4rem;margin-top: 2rem}
.seboton-filtrar-materias a {font-size: 1rem; color: white;background: #0099A4; border-radius: 3rem;width:40vw ; display: flex; align-items: center; justify-content: center;height: 2.5rem}
.seboton-filtrar-materias a:hover {opacity: 0.5}

.futer{background-color:#272727;
    height: 2.4rem;width: 100vw}
.futericonos {display: flex; justify-content: space-around; padding-top: .4rem}
.futericonos li a:hover{opacity: 0.3}

/*PANTALLA-FORMULARIO*/

/*.samaterias {display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;    
    display: grid;
    margin-top: 2rem;
    margin-bottom: 2rem;}*/
.samaterias {display: flex;flex-direction: column; align-content: center;align-items: center}
.samaterias li ul{display: flex;align-items: center;}

.inputsara {padding:.5rem;
    width:14rem;
    margin:1rem;
    font-size: .8rem;
    border-radius: .6rem;
    color: #fff; color: #434041}

.iconsara{vertical-align: middle;
    padding: 0.5rem; align-content: }

.sacolor h3 {font-weight: 700;
    color: #29AB8D; margin-bottom: 1rem;
    text-align: center}
.sacolor h6{font-size: .9rem; font-weight: 100}

.sgboton-filtrar-materias {height: 2.5rem; display:flex; flex-direction: column; justify-content:center; align-items: center; align-content: center;margin-bottom: 4rem;margin-top: 2rem}
.sgboton-filtrar-materias a {font-size: 1rem; color: white;background: #29AB8D; border-radius: 3rem;width:8rem ; display: flex; align-items: center; justify-content: center;height: 2.5rem}
.sgboton-filtrar-materias a:hover {opacity: 0.5}

.sgiconos {display: flex;justify-content: space-around;}
.saboton2-filtrar-materias {
    background: #50D4AC;
    width: 10px;
    
    margin-top: 2rem;
    border: 1px solid;
    border-radius: 20px;
    border-color: white;
    padding: 1rem;
    margin: 0.7rem;
    
}
.saboton2b-filtrar-materias {
     background: #6C6BAB;
    width: 10px;
    margin: auto;
    margin-top: 2rem;
    border: 1px solid;
    border-radius: 20px;
    border-color: white;
    padding: 1rem;
    margin: 0.7rem;
}

.saboton2c-filtrar-materias {
    background: #F3AA3A;
    width: 10px;
    margin: auto;
    margin-top: 2rem;
    border: 1px solid;
    border-radius: 20px;
    border-color: white;
    padding: 1rem;
    margin: 0.7rem;
}

.saboton2d-filtrar-materias {
    background: #E76C71;
    width: 10px;
    margin: auto;
    margin-top: 2rem;
    border: 1px solid;
    border-radius: 20px;
    border-color: white;
    padding: 1rem;
    margin: 0.7rem;
    
    
}

.saboton2e-filtrar-materias {
     background: #0099A4;
    width: 10px;
    margin: auto;
    margin-top: 2rem;
    border: 1px solid;
    border-radius: 20px;
    border-color: white;
    padding: 1rem;
    margin: 0.7rem;}


/*CATEDRA */

.iconos {display: flex;
    justify-content: space-between;
    margin-right: 1.5rem;
    margin-left: 1.5rem;
    margin-top: 0.25rem;}

.safrase2 {font-size: 1rem;
    font-weight:;
    margin-left: 4rem;
    margin-right: 3.2rem;
    margin-top: 1.5rem;
    color: #29AB8D;
    text-align: left;}
.salistado {color: #965F9F;font-size: .9rem}
.sacontenedor {margin-bottom: 3rem}
.definicion {font-size: .9rem}
.img-corporativo {width: 100%}
.imgyan {width: 100vw}

/*PANTALLA6.....................*/
/*ESTILO DE LA GALERIA*/

.cerrar{display: block;
    background: #fff;
    width: 1rem;
    height: 1rem;
    margin: 0.8rem auto;
    text-align: center;
    text-decoration: none;
    font-size: rem;
    color: #000;
    padding:35px;
    border-radius: 4rem;}


.pgaleria{
    list-style: none;
    padding: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.pgaleria li{
    margin:5px;
}
.pgaleria img{
    width: 120px;
  
}

p3 {
    margin:-50px 200px 10px 265px;
    color: #fff;
    height: 0px;
    width: 0px;
}

/*estilos del modal*/


.pmodal{
    display: none;
}

.pmodal:target{
    display: block;
    position: fixed;
    background: rgba( 0,0,0,0.8);
    top:0px;
    left:0px;
    width:100%;
    height: 100%;
}

.pmodal p3{
    color: #fff;
    font-size: 0.8rem;
    text-align: center;
    margin: 15px 0px;
}
.pimagen{
    width:100%;
    height:auto;
    
    display: flex;
    justify-content: center;
    align-items:center;
}

.pimagen a:nth-child(2){
    margin: 0;
    height: 100%;
}

.pimagen img{
    width:20rem;
    height: 100%;
    max-width: 100%;
    border: 7px solid #fff;
    box-sizing: border-box;
        

}



/*PANTALLA7.....................*/

.pchat{
    width: 100%;
    height:auto;
    margin: 5px;
    
    display: flex;
    justify-content: center;
    align-items:center;
      background: #727271;
}


.barrafotos{
    width:50px;
    height: 45px;
}

ul.Chatpp {
  list-style: none;
}

.Chatpp {
  max-width: 100%;
  margin: 0 auto;
}
.Chatpp .ChatLog__entry {
  margin: .5em;
}

.ChatLog__entry {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  max-width: 100%;
}

/*.ChatLog__entry.ChatLog__entry_mine {
  flex-direction: row-reverse;  
  align-items: flex-end;
}*/

.ChatLog__avatar {
  flex-shrink: 0;
  flex-grow: 0;
  z-index: 1;  
  border-radius: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
  height:50px;
  width:50px;
}

.ChatLog__entry.ChatLog__entry_mine .ChatLog__avatar {
  box-shadow: 2px 2px 0px #aaa;   
}

.ChatLog__entry .ChatLog__message {
  position: relative;
}

.ChatLog__entry.p1 .ChatLog__message::before {
  border-top-color: #F3AA3A;
  border-right-color: #F3AA3A;
}
.ChatLog__entry.p2 .ChatLog__message::before {
  border-top-color: #E76C71;
  border-right-color:#E76C71;
 
}
.ChatLog__entry.p3 .ChatLog__message::before {
  border-top-color: #29AB8D;
  border-right-color:#29AB8D;
 
}

.ChatLog__entry .ChatLog__message::before {
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: -0.48rem;
  height: 0;
  content: '';
  border: 6px solid transparent;
  border-top-color: #fff;
  border-right-color: #fff;
  z-index: 2;
}

.ChatLog__entry.ChatLog__entry_mine .ChatLog__message::before {
  top: auto;
  right: -0.48rem;
  bottom: 0;
  left: auto;
  border: 6px solid transparent;
   border-bottom-color: red;
  border-left-color: red;
}

.ChatLog__entry.p1 .ChatLog__message{
  background-color: #F3AA3A;
     border-radius: 0px 10px 10px;
}
.ChatLog__entry.p2 .ChatLog__message{
  background-color: #E76C71;
    border-radius: 0px 10px 10px;
    
}

.ChatLog__entry.p3 .ChatLog__message{
  background-color: #29AB8D;
     border-radius: 0px 10px 10px;
}
.ChatLog__entry.ChatLog__entry_mine .ChatLog__message{
  background-color: red;
}

.ChatLog__message {
  background-color: #fff;
  padding: .5em;
 
      margin-right: 15px;
    margin-left: 15px;
    text-align: left;
    padding-right:10px;
}

.ChatLog__message .ChatLog__timestamp {
  display: block;
  margin: .2em;
  font-size: 70%;
  color: #fff;
font-weight: lighter;
}






input{
    display: block;
    padding: 15px;
    width: 300px;
   
    font-size: 18px;
    border-radius: 100px;
    color:#000;
  
    
    
    }
input[type="submit"] {
    background: #ff7e81;
   
     width: 60px;
}

.pescribiopinion{
    display: flex;
    flex-wrap: wrap;
    margin: 5px;
    color:#000;
    font-weight: bold;
    width: 100vw}
.text {width: 65vw}
.ok {width: 35vw;color: white; font-weight: bold}
.ok:hover {opacity: 0.5}

/*INDEX*/
#bodyvid {display: flex;flex-direction: column;align-items: center; background:#13b394 }
#video img {width: 30rem;}