/* GENERALES*/

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
width: 100%;
	
}

::-webkit-scrollbar { 
    display: none; 
}

.nav-superior {
  display: flex;
  background-color: #8379b3;
  justify-content: space-between;
  align-items: center;
  flex-flow: row nowrap;
  height: 3.5em;
  padding: 0.7em;
}


.nav-izquierda {
  padding-left: 0.9em;
}

.nav-derecha ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
    
}

.nav-derecha ul li {
  float: left;
    display: flex;
    flex-wrap: nowrap;
}

.ICON {
  margin: 0.5em;
  width: 30px;
}

.ICON2 {
   width: 20px;
display: block;
	
}

.ICON3 {
  width: 30px;
display: block;
	
}

.ICON4 {
	padding: 0.5em;
 width: 15px;
display: block;
	
}

.div-ICON {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	
}

#ICON-compartir {
  height: 70px;
  width: 70px;
}

.titulos-navegador {
  font-family: 'Nunito Sans', sans-serif;
  color: white;
  font-weight: 700;
  font-size: 1.3em;
  margin: 0;
  padding-left: 1em
}

.nav-icono-texto  {
  display: flex;
  flex-direction: row;
  list-style: none;
  align-items: center;
justify-content: center;
margin: 0;
  padding: 0;
}

.titulos-violeta {
  font-family: 'Nunito Sans', sans-serif;
  color: #8379b3;
  font-weight: 700;
  font-size: 1.1em;
  margin: 0;
}

.titulos-blancos2 {
  font-family: 'Nunito Sans', sans-serif;
  color: white;
  font-weight: 700;
  font-size: 1.1em;
  margin: 0;
}

footer {
 background-color: #524a7d;
  padding: 1em;

}

.footer-texto {
  font-family: 'Nunito Sans', sans-serif;
  color: white;
  font-size: 14px;
  opacity: 0.7;
}

.imagenes {
    display: block;
}

.boton-siguiente {
   height: 30px;
    width: 30px;
}

.icon-no-click {
    opacity: 0.5;
    margin: 0.5em;
  height: 30px;
  width: 30px;
}

.boton {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	border: 2px solid white;
	border-radius: 100px;
	width: 40px;
	height: 40px;
	}


/********************************/

/* PRIMERAS PAGS */

html,
body.bocetea {
  height: 100%;
 background-color: white;
}

main.bocetea {
display: flex;
justify-content: center;
	align-items: center;
flex-direction: column;
min-height: 100%;
}

#pag0-div {
    
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 60%; 
    
}

.bocetea-logo {
    height: 120px;
    width: 200px;
}

#bocetea-logo-div {
    flex-grow: 0.5;
    margin-top: 3em;
}
#entrar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em;
  background-color: #8379b3;
  border-radius: 100px;
	border-style: none;
	height: 2em;
	width: 2em;
 }

html.primeras-pags-fondo {
    background-color: #8379b3;
}


main.primeras-pag {
	min-height: calc( 100vh - 4em);
	margin: 0;
	padding: 2em;
}


.primeras-pags-div {
 display: flex;
 flex-direction: column;
 align-items: center;
	max-height: 100vh;

}

#pag2 {
	display: none;
	}

#pag3 {
	display: none;
	}




main.bocetea {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.titulos-blancos {
  font-family: 'Nunito Sans', sans-serif;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 35pt;
  margin-top: 0.5em;
  margin-bottom: 0;
}

.texto-blanco {
  font-family: 'Nunito Sans', sans-serif;
  color: #FFFFFF;
  font-weight: 400;
  font-size: 16pt;
  margin-top: 2em;
}

.foco {
    display: block;
    height: 155px;
    width: 300;
    
}


.puntito-blanco {
  height: 10px;
  width: 10px;
  padding: 0.2em
}

.puntito-opacidad {
  height: 10px;
  width: 10px;
  padding: 0.2em;
  opacity: 0.5;
}

.tres-puntitos-div {
  display: flex;
  flex-direction: row;
}

.boton-omitir-tipo {
  font-family: 'Nunito Sans', sans-serif;
  color: #FFFFFF;
  font-weight: 400;
  font-size: 12pt;
  text-decoration: none;
}

.botonomitir {
  padding: 1em;
  background-color: #8379b3;
  border: 2px solid white;
  border-radius: 20px;
  margin-top: 2.5em;
}




#flecha {
    height: 50px;
    widows: 50px;
	margin: 2EM
}



/**********************************/



/* INICIA SESION */


.iniciarsesion {
    display: flex;
    flex-direction: column;
    justify-content:space-around;
    align-items: center;   
    max-width: 55em;
    height: 60%;
    
}

#inicio-sesion-boton {
    padding: 1em;
    border-radius: 20px;
    background-color: #29235c;
    display: flex;
    align-items: center;
    justify-content: center;
	border-style: none;
	width: 100%;
    
}


#registro {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
   align-items: center;
    height: 5em;
    margin-top: 3em;
    
}

/***********************************/

/* DESARROLLO */

main#desarrollo {
	margin: 3em;
	background-color: white;
}

#index-desarrollo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
	justify-content: space-around;
  height: 100%;
}

.formularios {
  border-style: none;
  border-bottom: 2px solid #E1E1E1;
margin-bottom: 1em;
	height: 1em;
  padding: 1em;
	width: 90%
}

.form-placeholder::-webkit-input-placeholder {
font-family: 'Nunito Sans', sans-serif;
  color: #bbbbbb;
	
}

.form-parrafo {
margin-bottom: 1em;
  border-style: none;
  border-bottom: 2px solid #E1E1E1;
  width: 90%;
	padding: 1em;
	
}

#boton-guardar {
display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em;
  background-color: #8379b3;
  border-radius: 100px;
	border-style: none;
	height:5em;
	width: 5em;
	
}

#boton-guardar-lugar {
	display: flex;
	width: 100%;
	justify-content: flex-end;
	flex-direction: row;
	margin: 1em 0 1em 1em;
}

#categoria {
	margin: 1em 1em 1em 1;
	
}

#categoria-titulo {
	margin: 1em 1em 1em 0;
}

 .checkbox {
	font-family: 'Nunito Sans', sans-serif;
  color: #bbbbbb;
	 font-size: 1em;
}

	
/*****************************/


/* DIBUJO*/

body.dibujo {
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
}

main.dibujo-main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.ICON-herramientas {
  margin: 0.5em;
  height: 25px;
  width: 25px;

}

#colores {
  position: fixed;
  top: 8.5em;
  right: 2em;
  z-index: 600;
  height: 30px;
  width: 30px;
}


#nav-herramientas {
  background-color: #000000;
  opacity: 0.8;
  height: 1em;
  padding: 1em;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
}



#area-dibujo {
  height: 100%;
}

#botonera-abajo {
  display: flex;
  flex-direction: row;
  opacity: 0.8;
  height: 3.5em;
  color: #FFFFFF;
}

.herramientas-inferior {
  background-color: #000000;
  text-align: center;
  flex-grow: 1;
  flex-basis: auto;
  border-radius: 15px 15px 0px 0px;
	
}

.lista-proyectos {
	background-color: #8379b3;
  text-align: center;
  flex-grow: 1;
  flex-basis: auto;
  border-radius: 15px 15px 0px 0px;
}

#documento-nuevo {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 400;
  bottom: 4.5rem;
  right: 1.9rem;
  background-color: #8379b3;
  border-radius: 50%;
  box-shadow: 0 .3em 0.4em rgba(0, 0, 0, .2);
  height: 3em;
  width: 3em;
}

#color-picker {
	position: fixed;
	top: 10.5em;
  	right: 1em;
	width: 2em;
	opacity: 0;
}


.nuevo-boceto {
	position: absolute;
	z-index: 700;
	width: 100%;
	top: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	background-color: #29235c;
	
}

.nuevo-off{
	display: none;
}

#nuevo-proyecto-boton {
	display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em;
  background-color: #8379b3;
  border-radius: 100px;
	border-style: none;
	height:5em;
	width: 5em;
	
}


#nuevo-boceto-info {
	display: flex;
    flex-direction: column;
    align-items: center;
	justify-content: center;
	
}


#contenedor-desea {
	position: absolute;
	z-index: 700;
	width: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
}

#desea-guardar {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: #29235c;
	margin: 2em;
	padding: 2em 2em 1em 2em;
	box-shadow:	2px 2px 10px #BBBBBB;
	border-radius: 20px;
	height: 13em;
}

#cambios-texto {
	font-family: 'Nunito Sans', sans-serif;
  	color: #FFFFFF;
	font-weight: 400;
 	 font-size: 1em;
  	text-decoration: none;
	margin: 0;
	padding: 0;
}


#aceptar-cancelar {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 1em;
	width: 100%;
	justify-content: space-around;
	
}

.cerrar-ventana {
	display: flex;
	justify-content: flex-end;
	position: relative;
	z-index: 700;
	top:-0.8em;
	
	
}

#pregunta-off {
	display: none;
}


.menu-inferior-contenedor {
	background-color: rgba(0, 0, 0, 0.8);
	position: fixed;
	z-index: 500;
	margin: 0;
	padding: 0 1em 0 1em;
	height: 8em;	
	left: 0;
	bottom: -100%;
   	overflow-x: scroll;
	transition: all .3s ease;
		
}

.menu-inferior-contenedor.visible {
	bottom: 0 !important;
	}



.h-frecuentes {
	width: 22%;
	margin: 1em;
}


.menu-inf {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: nowrap;
	
}

.minimizar-herram {
	position: fixed;
	z-index: 500;
	left: 1em;
	bottom: -50em;
	background-color: black;
	border-radius: 100px;
	height: 2em;
	width: 2em;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0.7;
}

.minimizar-herram.visible {
	bottom: 9em !important;
	}



.agregar {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding-left: 1em;
	
}

#capa-nueva {
	width: 4.5em
	
	
}

#favoritos {
	width: 165%;
	
}

.favoritos-img {
	margin: 0.5em ;
	width: 25%;
	
		
}

#proyectos-ul {
	background-color: #8379b3;
	list-style: none;
	position: fixed;
	margin: 0;
	padding: 0;
	max-height: 10em;
	width: 50%;
	left: 0;
	bottom: -100%;
	transition: all .3s ease;
  	z-index: 99;
   	overflow-y: scroll;
	}

#proyectos-ul.visible {
	bottom:3em;
}


.proyectos-li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid white;
	padding: 1em;
	font-family: 'Nunito Sans', sans-serif;
	font-size: 0.8em;
	color: white;
}

.proyectos-li:hover {
	background-color: #B0B2E3;
}

/******************/

/* COMPARTIR Y GUARDAR*/


body.compartir-body {
  display: flex;
  flex-direction: column;
  margin: 0;
  background-color: #8379b3;
	height: 100%;
	width: 100%;
}

main#compartir-main {
	margin: 3em;
	height:  100%;
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
}

#compartir-titulo {
	width: 100%;

}

#compartir-container {
display: flex;
  flex-direction: column;
align-items: center;
	justify-content: flex-start;
  min-width: 15em;
  max-width: 10em;
	padding: 0;
	margin: 0;
}

#compartir-iconos {
	display: flex;
	justify-content: space-around;
    flex-wrap: wrap;
    margin-bottom: 1em;
	max-width: 25em;
	min-width: 15em;
	
}

#compartir-ul {
	
	background-color: white;
	list-style: none;
	border-top: 10px solid #29235c;
	position: fixed;
	margin: 0;
	padding: 0;
	max-height: 14em;
	width: 100%;
	left: 0;
	bottom: -100%;
	transition: all .3s ease;
  	z-index: 99;
   	overflow-y: scroll;
	}

#compartir-ul.menu-visible {
	bottom: 0;
	}


.compartir-li {
	border-bottom: 1px solid #EEEEEE;
	padding: 1em;
	font-family: 'Nunito Sans', sans-serif;
	color: #BBBB;
}

.compartir-li:hover {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: 'Nunito Sans', sans-serif;
	color: white;
	background-color: #B0B2E3;
	transition: 0.3s ease;
}

a.nolink:link  {
	text-decoration: none;
}
	
a.nolink:visited  {
	text-decoration: none;
	
}

.compartir-grupo-icon {
	width: 15px;
	height: 15px;
}


.close {
  position: fixed;
  left: 1.2em;
  top: 1.2em;
}

.close-img {
  height: 2em;
  width: 2em;
}

.campo {
	border-style: none;
  border-radius: 20px;
  width: 17em;
	padding: 1em;
	margin-bottom: 1em;
}

.campo::-webkit-input-placeholder {
  font-family: 'Nunito Sans', sans-serif;
  padding: 1em;
  color: #bbbbbb;
}

.campo:-moz-placeholder {
  font-family: 'Nunito Sans', sans-serif;
  padding: 1em;
  color: #bbbbbb;
}

.guardar-compartir {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  color: #FFFFFF;
  font-size: 2.5em;
	margin: 0 0 0.2em 0;
	
}

body.guardar-body {
  display: flex;
  flex-direction: column;
  margin: 0;
  background-color: #8379b3;
	height: 100%;
}

main#guardar-main {
	margin: 3em;
	height:  100%;
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#container {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	box-sizing: border-box;
	padding: 3em;
}


.guardar-info {
	display: flex;
    flex-direction: column;
    align-items: center;
	justify-content: center;
	flex-grow: 1;
}

#guardar-titulo {
	display: flex;
	justify-content: flex-start;
	width: 100%;
}

#guardado-rapido-boton {
	display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em;
  background-color: #29235c;
  border-radius: 100px;
	border-style: none;
	height:5em;
	width: 5em;
	
}
.compartir.margen-top {
  margin-top: 0.5em;
}

/**************************/

/* MENU */

#menu {
  transition: all .3s ease;
  position: fixed;
  left: -200%;
  top: 0;
  height: 100%;
  min-width: 40%;
  z-index: 600;
  background-color: #29235c;
}

nav.menuvisible {
  left: 0 !important;
}

#topMenu {
  justify-content: flex-end;
  height: 3.5em !important;
  padding-top: 0.7em !important;
  padding-bottom: 0.7em !important;
}

#buttonMenu {
  z-index: 700;
  position: relative;
}

#menu ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  height: 100%;
  padding-left: 2em;
  padding-right: 2em;
}

#menu ul li {
   height: 4em;
  display: flex;
  flex-direction: row;
  align-items: center;
}

#menu ul li.borderItem {
  border-bottom: 1px solid white;
}

#menu ul li .itemText {
  margin-left: 0.8em;
  font-family: 'Nunito Sans', sans-serif;
  font-style: bold;
  color: #FFFFFF;
  font-size: 15pt;
}

#menu a {
  text-decoration: none;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.ICON-menu {
  height: 30px;
  width: 30px;
}

#cerrar-sesion {
  color: #F43561 !important;
}

/**************************/


/* SOBRE NOSOTROS */

body.sobrenosotros {
	background-color: white;
}

.sobre-nosotros-texto {
    font-family: 'Nunito Sans', sans-serif;
  color: black;
  font-size: 0.9em;
  
}

#sobre-nosotros {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
	height: 100%;

}

main#sobre-nosotros {
 display: flex;
 flex-direction: column;
  align-items: center;
  margin: 3em;
    height: 73%;
    justify-content: space-between;
}

/**********************/


/* CHAT */

main.chats { 
    display: flex;
    flex-direction: column;
    align-items: flex-start;
   
    
}

body.chats {
         background-image: url(../imagenes/fondo.png);;
}

.imagen-chats {
    width: 50px;
    border-radius: 100px;
    margin-right: 0.8em;
    display: block;
}

#nav-chat {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    background-color: #8379b3;
    
}

#nav-chat-izq {
   display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0.7em;
    justify-content: space-around;

}

#titulo-chat {
 font-family: 'Nunito Sans', sans-serif;
  color: white;
  font-weight: 600;
  font-size: 20px;
  margin: 0;
      
}

#carpeta-chat {
    display: flex;
    justify-content: flex-end;
    
}

#subtitulo-chat {
    font-family: 'Nunito Sans', sans-serif;
  color: white;
  font-weight: 400;
  font-size: 15px;
  margin: 0;
  opacity: 0.6;
}

#branding {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.mensajes{
    
    padding: 0.5em; 1em 0.5em 1em;
    background-color: white;
    border-radius: 10px;
    margin: 1em 1em 0 1em;
    box-sizing: border-box;
    display:inline-block;
    
}

.comentario {
     font-family: 'Nunito Sans', sans-serif;
    font-weight: 400; 
  color: black;
  margin: 0;
}


 .fran {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700; 
  color: #8547CB;
  margin: 0;
     
}
 .josefa {
     font-family: 'Nunito Sans', sans-serif;
    font-weight: 700; 
  color: #4DE33E;
  margin: 0;
}
.rosa {
     font-family: 'Nunito Sans', sans-serif;
    font-weight: 700; 
  color: #F3DE49;
  margin: 0;
}
.lu {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700; 
  color: #476DCB;
  margin: 0;
}

#comentario {
    position: absolute;
    bottom: 0;
    width: 70%;
    margin: 1em;
    padding: 1em;
    border-radius: 30px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    border: 0.5px solid  #EDEDED;
    box-shadow: 2px 2px 5px grey
}

#mensajeboton {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 1em;
    padding: 0.8em;
    background-color: #8379b3;
    border-radius: 100%;
    border: none;
   
}

#comunicacion {
	opacity: 0.5;
	position: absolute;
	z-index: 9999;
	bottom: 1.5em;
	right: 5em;
	width: 20px;
	height: 20px;
}

#cam {
	opacity: 0.5;
	position: absolute;
	z-index: 9999;
	bottom: 1.5em;
	right: 7em;
	width: 20px;
	height: 20px;
	
}

#clip {
	opacity: 0.5;
	position: absolute;
	z-index: 9999;
	bottom: 1.5em;
	right: 9em;
	width: 20px;
	height: 20px;
	
}

/************************/


/* CONFIGURACION */

main.config {
	padding: 3em;
	min-height: 75%;
	
}


.opciones {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 1em 0;
	padding: 1em 0 1em 0;
	border-bottom: 0.5px solid #EDEDED;
	

}


#ul-config {
	padding: 0;
}

.nombreusuario {
	 font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
	font-size: 1em;
	color: black;
	opacity: 0.5;
	margin: 0;
}

.usuario {
	 font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
	font-size: 1em;
	color: black;
	opacity: 0.5;
	margin: 0;
}

.info-cuenta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}


.desplegar-icon {
	width: 20px;
	display: block;
}


.datos-off {
	display: none;

}

.datos-cuenta {
	display:flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin: 1em 0 1em 0;
	background-color: white;
}

.cambiar-icon {
	width: 20px;
	display: block;
	opacity: 0.5;
}

.submenus-config {
	width: 15px;
	display: block;
	opacity: 0.4;
}

/***********************/



/* MI PERFIL */

body.perfil {
	background-color: white;
	
}

main.perfil {
	display: flex;
	flex-direction: column;
	padding: 2em;
	min-height: calc( 100vh - 12.5em );
	
}

.nav-perfil {
  display: flex;
	flex-direction: row;
  background-color: #8379b3;
  align-items: flex-end;
  flex-flow: row nowrap;
  height: 3.5em;
  padding: 0.7em;
}

#usuario234 {
	padding: 0 0 0 1em;
	margin: 0;
}

#info-secundaria-perfil {
	display: flex;
	flex-direction: column;
	background-color: #E7E8FF;
	height: 3em;
	padding: 0.4em
}

#profesion-perfil {
	font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
	font-size: 0.9em;
	color: #8379b3;
	margin: 0 0 0 11em;
}

#ciudad-perfil {
	font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
	font-size: 0.9em;
	color: #8379b3;
	margin: 0 0 0 11em;
}


#fotoperfil {
	border-radius: 100px;
	position: relative;
	left: 0.2em;
	width: 80px;
	top: 3em;
}

#nueva-imagen {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: black;
	opacity: 0.7;
	border-radius: 100px;
	padding: 1.5em;
	position: fixed;
	z-index: 99;
	top: 1.8em;
	left: 3.7em;
	width: 35px;
	height: 35px;
	
}

#nuevafoto-off {
	display: none;
}

.proyectos-perfil{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	
	
}

.edicion {
	margin: 0 0.5em 0 0;
	width: 20px;
	opacity: 0.4;
	
	
}

.proyectos {
	font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
	font-size: 0.9em;
	color: black;
	opacity: 0.4;
}

ul li.perfil-ul {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	list-style-type: circle;
	border-bottom: 0.5px solid #EDEDED;
	
}

#ul-margen {
	padding: 0;
	
	
}



/*********************************/


/* DISPARADOR CREATIVO*/


html, body.disparador {
	background-color: white;
	height: 100%;
	max-width: 100%;
}

main.disparador {
	margin: 2em;
}

#contenedor-buscador {
	display: flex;
	justify-content: center;
	width: 100%;
		
}


.buscador {
	border-style: none;
	border: 2px solid #8379b3;
	font-family: 'Nunito Sans', sans-serif;
	padding: 1em 1em 1em 4em;
	margin-bottom: 1em;
	width: 100%;
			
}

.buscador::-webkit-input-placeholder {
	font-weight: 700;
	font-size: 1.2em;
	color: #8379b3;
	margin: 0;
	padding: 0;
}

.lupa  {
	display: flex;
  	justify-content: center;
 	 align-items: center;
 	 padding: 0.5em;
	width: 20px;
	position: absolute;
	left: 3.8em;
	top: 8.8em;
	background-color: white;
  	border-radius: 100px;
	border-style: none;
	
}
	
.disparador-img {
	width: 100%;
	box-sizing: border-box;
	display: block;
	vertical-align: middle;
	margin-bottom: 8px;
	
}

.grilla-row {
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	box-sizing:border-box; 
		
}

.grilla-column {
	width: 24%;
	margin: 5px;
	box-sizing: border-box
}


@media screen and (max-width: 1300px) {
  .grilla-column {
    flex: 23%;
    max-width:24%;
	}
}


@media (max-width: 900px) {
  .grilla-column {
    flex: 31%;
    max-width: 31%;
	}
}

@media (max-width: 600px) {
  .grilla-column {
    flex: 45%;
    max-width: 45%;
  }
}


.add-to-fav {
	display: none;
	position: absolute;
	top:11.6em;
	left:3em;	
	padding: 0.5em;
	width: 2em;
	height: 2em;
	background-color: #F1EF65;
	border-radius: 100px;

}


.img-added {
	background-color: #F1EF65;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	height: 3em;
	width: 100%;
	position: fixed;
	z-index: 99;
	bottom: -4em;
	left: 0;
	transition: .2s ease;
	
}

.img-added.visible {
	bottom: 0;
	
}

@media screen and (max-width: 1300px) {
  .add-to-fav {
    flex: 23%;
    max-width:24%;
	}
}


@media (max-width: 900px) {
  .add-to-fav {
    flex: 31%;
    max-width: 31%;
	}
}

@media (max-width: 600px) {
  .add-to-fav {
    flex: 45%;
    max-width: 45%;
  }
}




/*****************************/




/* MIS FAVORITOS */


body.misfavoritos {
	background-color: white;
	height:100%;
	
}

main.misfavoritos {
	margin: 2em;
	
}

.added {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.added-img {
	display: block;
	max-height:100%;
	margin: 0.3em;
	
}


.eliminar-fav {
	display: none;
	position: absolute;
	top: 9em;
	left: 5.5em;	
	padding: 0.6em;
	width: 2em;
	height: 2em;
	background-color: #FD4E4E;
	border-radius: 35px;
}

.img-deleted {
	background-color: #FD4E4E;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	height: 3em;
	width: 100%;
	position: fixed;
	z-index: 99;
	bottom: -4em;
	left: 0;
	transition: .2s ease;
	
}

.img-deleted.visible {
	bottom: 0;
}

#borrar-mensaje {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}



@media screen and (max-width: 1300px) {
  .eliminar-fav {
    flex: 23%;
    max-width:24%;
	}
}


@media (max-width: 900px) {
  .eliminar-fav {
    flex: 31%;
    max-width: 31%;
	}
}

@media (max-width: 600px) {
  .eliminar-fav {
    flex: 45%;
    max-width: 45%;
  }
}

/**************************/



/* MIS GRUPOS */ 


body.misgrupos {
	height: 100%;
	width: 100%;
}

main.misgrupos {
	margin: 2em;
	height: 100%;
	
}

.ul-chats {
	list-style: none;
	padding: 0;
	
}

.info-chat {
	display: flex;
	flex-direction: row;
	
}

.lista-chats {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 0;
	margin:0;
	list-style: none;
	border-bottom: 2px solid #EEEEEE;
	padding: 1em 0 1em 0;
	
}

div.zoom-div  {
	display: none;
	position: absolute;
	z-index: 99;
	margin: 0;
	left: 0;
	top: 0;
	right: 0;
	bottom: -20em;
	padding: 3em;
	background-color: rgba(0, 0, 0, .8);
	}

.img-zoom {
	width: 100%;
	display: block;
	margin-top: 10em
	
}

.cerrar-foto {
position: absolute;
  left: 1.2em;
  top: 1.2em;
}


.gruponuevo {
	position: absolute;
	z-index: 999;
	background-color: #8379b3;
	height: 100%;
	width: 100%;
	
	
}	


.integrantes {
	background-color: #29235c;
	border-style: none;
	font-family: 'Nunito Sans', sans-serif;
	padding: 0 1em 0 1em;
	margin: 0 0.5em 0.5em 0; 
	color: white;
	box-sizing: border-box;
	font-size: 0.7em;
	border-radius: 50px;
	display:flex;
	justify-content: center;
	align-items: center;		
}



#integrantes-div {
	display: flex;
	flex-direction: row;
		flex-wrap: wrap;
	width: 100%;
}