body{
	background-color: #ffffff;
	width:100vw;
    margin-left: 0%;
    margin-right: 0%;
}

*{
	text-decoration: none;
	list-style: none;
} 

.nav {
	display: flex;
	
	align-items: center;
	flex-wrap: wrap;
	
}

.nav img { 
width: 2em;
	padding: 0.2em;
	margin: 0.5em;
	flex-basis: 00%;
	
}


h1 { 
   color: #42abb0;
   font-family: work sans;
   margin: 0.7em;
	font-size: 1.5em;
		

}

	h2 {
		display: flex;
		color: #1a1a18;
		font-family: work sans;
		align-items: center;
		justify-content:flex-start;
		font-size: 1.3em;
		margin-left: 2.5em;
		
	}

h3 {
	background-color: #42abb0;
	width: 80%;
	line-height: 2.8em;
	border-radius: 0.5em;
	color: #ffffff;
	text-align: center;
	font-family: work sans;
	font-size: 1.5em;
    font-weight: 400;
    margin-bottom: 1em;
    display: block;
    margin: 1.3em auto 2em;
}

h7{ 
    background-color: #e59a1f;
	width: 100vm;
	line-height: 2.8em;
	border-radius: 0.5em;
	color: #ffffff;
	text-align: center;
	font-family: work sans;
	font-size: 1.5em;
    font-weight: 400;
    
    display: block;
}

.nav> .buscador{
    display:none;
}

.infoheaderimg9{
    display: flex;
    background-color: #e59a1f;
    width: 80%;
    height: 12em;
    margin: auto;
    border-radius: 1em;
    padding: 0.5em;
    margin-bottom: 2em
}

.infoheaderimg9 img{
    width: 9em;

}

.infoheader9 h8 {
    font-family: work sans;
    color: #ffffff;
    font-weight: 600;
    font-size: 1.7em;
    padding: 0.5em;
    display: block;
    padding-top: 1em;
    margin-bottom: -1em

}




		
 .navresponsive{ 
    display: none;
    }
.buscador {
	display: flex;
	justify-content: center;
	align-items:center;
    position: relative;
    margin-bottom: 2em;
    margin-top: 0.3em;
}

.buscador input{ 
	    color: #ffffff;
	    background-color: #42abb0;
		width: 23em;
		line-height: 2em;
		border-radius: 1em;
		padding: 0.4em;
		
}

input::placeholder{
    color:#e4edf5;
    font-size: 1em;
}

.buscador button {
	color: #42abb0;
	background-color: #ffffff;
	line-height: 1em;
	border-radius: 1em;
    position: absolute;
    margin-left: 9.7em
	
}



button img{ 
width: 2.2em}
	
	.grupo { 
	display: flex;
		justify-content: center;
		border-radius: 1.5em;
		background-color: #764491;
		padding: 1em;
		flex-wrap: wrap;
        margin-bottom: 2em;
}

.grupo .link1 li{
    display: flex;
    justify-content: center;
    align-items:center; 
    
} 
	.grupo li a{
		color: #ffff;
		font-family: work sans;
		font-size: 1.2em;
		font-weight: 700;
		
	}
	
	.grupo li{
		margin: 0.3em;
		border-color: #31B7BD;
		border-radius: 2em;
		border-width: medium;
		border-style: solid;
		padding: 1.8em;
		text-align: center;
		line-height: 2em;
		background-color: #31B7BD;
		height: 3.5em;
		width: 3.5em;
			

}

.tusgrupos { 
	display: flex;
		justify-content: center;
		border-radius: 1.5em;
		margin-top: 0.2em;
		padding: 1em;
		flex-wrap: wrap;
        margin-bottom: 2em;
}

.tusgrupos .link1 li{
    display: flex;
    justify-content: center;
    align-items:center; 
    margin-top: -0.9em

    
} 


	.tusgrupos li a{
		color: #ffff;
		font-family: work sans;
		font-size: 1.2em;
		font-weight: 700;
        display: flex;
        flex-direction: column;
       
        
		
	}

.sobrenosotros{ 
    display: block;
	flex-direction: column;
    align-content: center;
    width: 80%;
    
    padding-top: 2em;
    margin: auto
    
}


	
	.tusgrupos li{
		margin: 0.3em;
		border-color: #764491;
		border-radius: 2em;
		border-width: medium;
		border-style: solid;
		padding: 1.8em;
		text-align: center;
		line-height: 2em;
		background-color: #764491;
		height: 3.5em;
		width: 3.5em;
        display: flex;
        flex-direction: column;
}
.tusgrupos  li p{
	color: #1a1a18;
	font-family: work sans;
	font-weight: 500;
	font-size: 1.2em;
    margin-top: 1em;
}


	.tusgrupos  li p{
	color: #ffffff;
	font-family: work sans;
	font-weight: 600;
	font-size: 0.8em;
		margin-top: -0.4em;
}

p {
  font-family: work sans;
  font-size: 0.8em;
  margin: 1em;
}
p60{
    display: none
}
li3{
    display: none
}
li3 a{
    display: none
}   
.tabs img {
	width: 4em;
	padding: 0.3em;
	margin: 0.5em;
	flex-basis: 20%;
}

.tabs2 img {
	width: 4em;
	padding: 0.3em;
	margin: 0.5em;
	flex-basis: 20%;
}



.comment{
    display: flex;
    background-color: #ffffff;
    align-items: center;
    width: 90%;
    margin: 0.3em;
    border-radius: 0.8em
}

.comment img{
    width: 15%;
    border-radius: 50%
}

.comentario p4{
    font-family: work sans;
    color: #42abb0;
    font-weight: 600;
    font-size: 0.8em;
    
        
}

.comentario p2{
    font-size: 0.7em
}
.comment .comentario{
    display: flex;
    flex-direction: column;
    
}

ul.tabs {
	list-style: none;
	width: 100%;
	display: flex;
	margin-left: -2.5em;
	margin-top: 4em;
}

ul.tabs2 {
	list-style: none;
	width: 100%;
	display: flex;
	margin-left: -2.5em;
	margin-top: 0em;
    height: 3.5em;
     position: relative;
}
ul.tabs2 li {
	width: 54%;
	line-height: 3.5em; 
	
	border-top-left-radius: 2em;
    border-top-right-radius: 2em;
    overflow: hidden;
	background: #42abb0;
	
}
ul.tabs2 li a {
	text-decoration: none;
	color: #ffffff;
	display: block;
	font-size: 1em;
	border: 1px solid;
	text-align: center;
	font-family: work sans;
}
ul.tabs2 li a:hover {
	background: #764491;
}
html ul.tabs2 li.active, html ul.tabs2 li.active a:hover  { /*--Makes sure that the active tab does not
        listen to the hover properties--*/
	background: #764491;
	border-bottom: 1px solid #42abb0; /*--Makes the active tab look like it's connected with
        its content--*/
}


.tabcontent.active {
    display: block;
}

ul.tabs {
	list-style: none;
	width: 100vm;
	display: flex;
	margin-left: -2.5em;
	margin-top: 2em;
}
ul.tabs li {
	width: 100%;
	line-height: 1.2em; 
	
	border-top-left-radius: 2em;
    border-top-right-radius: 2em;
    overflow: hidden;
	background: #764491;
	
}
ul.tabs li a {
	text-decoration: none;
	color: #ffffff;
	display: block;
	font-size: 0.9em;
	border: 1px solid;
	text-align: center;
	font-family: work sans;
}
ul.tabs li a:hover {
	background: #42abb0;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not
        listen to the hover properties--*/
	background: #42abb0;
	border-bottom: 1px solid #42abb0; /*--Makes the active tab look like it's connected with
        its content--*/
}

.tab_container {
	margin-top: -1em;
	overflow: hidden;
	clear: both;
	float: left; 
    width: 100%;
	background-color:#42abb0;
	border-color: #42abb0;
	
    display: flex;
    flex-wrap: wrap;
    
}

.tab_container2> .tab_content {
	padding: 0.5em;
	font-size: 0.8em;
    flex-wrap: wrap;
   
    justify-content: center;
 display: flex;
    height: 30em;
      overflow-x: hidden;
         overflow-y: auto;
  
}

.tab_content {
	padding: 0.5em;
	font-size: 1.2em;
    flex-wrap: wrap;
   margin: auto;
    justify-content: center;
 display: flex;
    height: 9em;
      overflow-x: hidden;
         overflow-y: auto;
}

.fechas{ 
display: flex;
    justify-content: center;
    align-items: center;
	padding: 1.9em 2.3em;
	background-color: #ffffff;
	width: 5.5em;
	margin: 0em 0.2em;
	height: 0em;
	border-radius: 1em;
  
}

#tab1 p{
	font-family: work sans;
	font-weight: 600;
	margin-left: 0em;
    margin-right: 0.5em
	
	
}

#tab2 p{ 
	font-family: work sans;
	font-weight: 600;
	margin-left: 0.5em;
    margin-right: 0.5em

}
.fechas div {
	display: flex;
	flex-direction: column;
	margin-left: 0.1em;
    
	
}



#tab1 p3 { 
line-height: 2em;
color: #42abb0;
font-size: 2em;
margin-left: 0em;
    margin-right: 0.1em
} 

#tab2 p3{ 
    line-height: 2em;
color: #42abb0;
font-size: 3em;
margin-left: 0em;
    margin-right: 0.1em}

#tab2 p3{ 
    line-height: 2em;
color: #42abb0;
font-size: 3em;
margin-left: 0em;
    margin-right: 0.1em
}

p1{ 
	
	font-family: work sans;
	font-weight: 600;
    font-size: 0.7em
}
	p2{ 
	font-family: work sans;
	font-weight: 300;
        font-size: 0.7em
		
}

ul.tabs li a{ 
	display: flex;
	align-items: center;
	justify-content: center
}

ul.tabs li a img{
	margin-right: -0.6em;
	margin-left: -2em
}




ul.tabs2 li a{ 
	display: flex;
	align-items: center;
	justify-content: center
}

ul.tabs2 li a img{
	margin-right: -0.6em;
	margin-left: -2em
}



.buscadorpornombre {
		border-radius: 1.5em;
		background-color: #e59a1f;
		padding: 1em;
    width: 95wm;
    min-width: 25em
}

.textoinfo p{
	padding: 1em;
	text-align: center;
	border-radius: 2em;
	border-color: #42abb0;
	border-width: medium;
	background-color: #ffffff;

	width: 80%;
	margin: auto;
	
}

.videodisapp{
	display: flex;
	justify-content: center;
  align-items: center
    
}


video {
	width: 20em;
	border-style: solid;
	border-radius: 1.5em;
	border-color: #ffffff;
	margin-bottom: 0.3em;
    margin-top: -1em;
    display: block;
    max-width: 35em
    
}
/* NOTIFICACIONES */

.recibidas{
    background-color: #ffffff;
     display: flex;
    background-color: #ffffff;
    align-items: center;
    width: 95%;
    margin: 0.2em;
    border-radius: 0.8em
}

.tab_container2{
    background-color: #ffffff;
    margin-top: -1em;
	overflow: hidden;
	clear: both;
	float: left; 
    width: 100%;
	border-color: #42abb0;
	border-radius: 0.5em;
    display: flex;
    flex-wrap: wrap;
}

.recibidas img{
    width: 45%;
    margin-left: 2em
   
}

#notif {
    display: flex;
    justify-content: center;
    align-items: baseline
    
}

#notif .imgnotif{
    margin-left: -4.5em;
    
}

#notif .imgnotif img{
    width: 38%
}
.comentario{
    display: flex;
    flex-direction: column;
    font-family: work sans;
    font-size: 0.9em;
    width: 100%;
    margin-left: 0em
}

.comentario b, .comentario p7{
    color: #42abb0
}

.recibidas p10{ 
    font-family: work sans;
    font-size: 0.9em;
    text-align:right;
    color: #42abb0;
   margin-top: 7em;
    margin-right: 1em
    
}



.recibidas {
    width: 100%
}
 /*REGISTRO*/

.bienvenidx img{
	width: 80%;
	display: block;
	margin: auto;
	margin-bottom: 5em
	
}
.responsivebienvenidos{
        display: none;
    }

.iniciosesion{
    display:grid;
    justify-content: center;
}

.iniciosesion input{
    color: #ffffff;
	    background-color: #42abb0;
		width: 26em;
		line-height: 2.5em;
		border-radius: 1em;
		padding: 0.4em;
    
}

.iniciosesion label{
	text-align: center;
	display: block;
	margin: auto;
	font-family: work sans;
	font-weight: 300;
	margin-bottom: 0.5em
}
.iniciosesion input{
	width: 98%;
	margin-bottom: 2em;
    width: 20em;
}

.infoheader2img {
    background-color: #764491;
    display: flex;
    justify-content: space-around;
    width: 70%;
    border-radius: 0.8em;
    margin-top: 1em;
    height: 12em;
    margin: 2em auto;
}

.infoheader3img {
    background-color: #c788ea;
    display: flex;
    justify-content: space-around;
    width: 70%;
    border-radius: 0.8em;
    margin-top: 1em;
    height: 12em;
    margin: 2em auto
}


.infoheader

.infoheader3img {
    background-color: #764491;
    display: flex;
    justify-content: space-around;
    width: 90%;
    border-radius: 0.8em;
    margin-top: 1em;
    height: 12em;
    margin: 2em auto
}

.infoheader6img {
    background-color: #9d82ac;
    display: flex;
    justify-content: space-around;
    width: 90%;
    border-radius: 0.8em;
    margin-top: 1em;
    height: 12em;
    margin: 2em auto
}

.infoheader6img a img{
    width: 12em;
    display: block;
    margin: auto;
    margin-top: 2.5em;
    width: 80%
}

.infoheader3img a img{
    width: 12em;
    display: block;
    margin: auto;
    margin-top: 2.5em;
    width: 80%
}


.infoheader2img a img{
    width: 12em;
    display: block;
    margin: auto;
    margin-top: 1em
}


.infoheader4img {
    background-color: #e59a1f;
    display: flex;
    justify-content: space-around;
    width: 90%;
    border-radius: 0.8em;
    margin-top: 1em;
    height: 12em;
    margin: auto
}
.infoheaderimg {
    background-color: #e59a1f;
    display: flex;
    justify-content: space-around;
    width: 90%;
    border-radius: 0.8em;
    margin-top: 1em;
    height: 12em;
    margin: auto
}
.infoheader4img {
    background-color: #e59a1f;
    display: flex;
    justify-content: space-around;
    width: 90%;
    border-radius: 0.8em;
    margin-top: 1em;
    height: 12em;
    margin: auto
}
.cambiarconfirmar{
    display: flex;
    justify-content: center;
    
}

.infoheader2{ 
    margin: auto
}

.infoheader2> h6{
    margin-bottom: 3em;
    
}

.iniciosesion input::placeholder {
    color: aliceblue;
    text-align: center
   
    
}
.confirmacion> p{
    margin-bottom: 2em;
    margin-top: 2.3em;
}
.confirmacion> h5{
margin-bottom: 3em;
    margin-top: 2em;
    display: block;
    margin: auto;
    width: 80%;
    font-size: 2em;
    margin-bottom: 1em;
    margin-left: 2em
}

.notifimg{
    display: flex;
    
}

.notifimg img{ 
width: 24%}

.confirmaciongrupo {
    display: flex;
    justify-content: center;
    width: 80%;
    margin-left: 3em
    
}

.confirmaciongrupo> #notif>img{
    width: 75%;

}

.imgconf>img{
    width: 50%;

}

.confirmaciongrupo> #notif .imgnotif img{
    width: 70%
}
.cambiarconfirmar .cambiar {
	display: flex;
	justify-content: center;
    margin-top: 2em;
    
	
}

.cambiar li{ 
	margin: 0.2em;
	line-height: 2em;
	border-radius: 0.5em;
	border-width: medium;
	border-style: solid;
	text-align: center;
	background-color: #e59a1f;
	border-color: #e59a1f;
	width: 8em;
    margin: 1em
}

.cambiar li a{
	color: #ffffff;
	font-family: work sans;
	
}

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

.ingresar li{ 
	margin: 0.2em;
	line-height: 2em;
	border-radius: 0.5em;
	border-width: medium;
	border-style: solid;
	text-align: center;
	background-color: #e59a1f;
	border-color: #e59a1f;
	width: 25%;
    
}

.ingresar li a{
	color: #ffffff;
	font-family: work sans;
	
}

/* PERFIL */


ul.tabsperfil {
	list-style: none;
	width: 80%;
	display: flex;
    justify-content: center;
    margin: auto;
    padding-left: 0em;
}
ul.tabsperfil li {
	width: 50%;
	line-height: 1.5em; 
	justify-content: center;
	border-top-left-radius: 2em;
    border-top-right-radius: 2em;
    overflow: hidden;
	background: #42abb0;
    
	
}

ul.tabsperfil li2 {
	width: 50%;
	line-height: 1.5em; 
	justify-content: center;
	border-top-left-radius: 2em;
    border-top-right-radius: 2em;
    overflow: hidden;
	background: #764491;
    
	
}

ul.tabsperfil li3 {
	width: 50%;
	line-height: 1.5em; 
	justify-content: center;
	border-top-left-radius: 2em;
    border-top-right-radius: 2em;
    overflow: hidden;
	background: #e59a1f;
  
    
	
}

html ul.tabsperfil li3.active, html ul.tabsperfil li3.active a:hover  { /*--Makes sure that the active tab does not
        listen to the hover properties--*/
	background: #e59a1f;
	border-bottom: 1px solid #42abb0; /*--Makes the active tab look like it's connected with
        its content--*/
}
html ul.tabsperfil li2.active, html ul.tabsperfil li2.active a:hover  { /*--Makes sure that the active tab does not
        listen to the hover properties--*/
	background: #764491;
	border-bottom: 1px solid #764491; /*--Makes the active tab look like it's connected with
        its content--*/
}

html ul.tabsperfil li.active, html ul.tabsperfil li.active a:hover  { /*--Makes sure that the active tab does not
        listen to the hover properties--*/
	background: #42abb0;
	border-bottom: 1px solid #42abb0; /*--Makes the active tab look like it's connected with
        its content--*/
}
ul.tabsperfil li a {
	text-decoration: none;
	color: #ffffff;
	display: block;
	font-size: 0.9em;
	border: 1px solid;
	text-align: center;
	font-family: work sans;
}
 ul.tabsperfil li2 a {
	text-decoration: none;
	color: #ffffff;
	display: block;
	font-size: 0.9em;
	border: 1px solid;
	text-align: center;
	font-family: work sans;
}

ul.tabsperfil li3 a {
	text-decoration: none;
	color: #ffffff;
	display: block;
	font-size: 0.9em;
	border: 1px solid;
	text-align: center;
	font-family: work sans;
}

.bio{
    background-color: #ffffff;
    border-color: #42abb0;
    border-style: solid;
    height: 8em;
    width: 70%;
    display: block;
    margin: auto;
    border-radius: 1.5em;
    position: relative;
    border-top-style: hidden;
    margin-top: 4em;
    margin-bottom: 2em;
        
}



.bio p{
    padding-top: 1.5em
}
.bio> input {
     border-bottom-color: #42abb0;
    border-bottom-style: dashed;
    border-width: thin;
    border-top-style: hidden;
    border-left-style: hidden;
    border-right-style: hidden;
    width: 75%;
    
    line-height: 2.3em;
    margin: auto;
    display: block;
    
}

.bio h2{
    position: absolute;
    margin-top: -1em;
    margin-left: 1.5em;
    font-size: 1em
}

.infoheaderperfil {
    background-color: #e59a1f;
    display: flex;
    justify-content: space-between;
    width: 95%;
    border-radius: 0.8em;
    margin-top: 1em;
    height: 10em;
   z-index: 1;
    margin: 1em auto -0.5em;
   
}

.infoheader2 h9{
    background-color: #ffffff;
    color: #42abb0;
    font-size: 0.8em;
    border-radius: 1.7em;
    padding: 0.2em 0.4em;
    width: 36%;
    display: block;
   
    
}



.infoheaderperfil .infoheader2 {
    margin-left: -2em
}

.infoheaderperfil img{
    width: 30%;
    display: block;
    margin: auto;
    margin-top: 1em;
    display: block;
    margin-left: 0.4em;
    margin-right: 2.5em
}

.opcionesrol{
    background-color: #42abb0;
    height: 4em;
  
    z-index: -999;
    display: block;
    margin: auto;
    width: 95%;
    border-bottom-left-radius: 1.8em;
    border-bottom-right-radius: 1.8em;
    padding: 0.5em;
    box-sizing: border-box;
    
}

.opcionesrol> h12{
    color: #ffffff;
    font-family: work sans;
    font-weight: 600;
    font-size: 0.8em;
    margin-left: 1em;
 
    
}

.roles ul{
    display: flex;
    justify-content: space-around;
}

.roles ul li{
    color: #42abb0;
    background-color: #ffffff;
    width: 5em;
    text-align: center;
    padding: 0.4em;
    border-radius: 0.8em;
    font-family: work sans;
    margin-left: -2.5em;
    font-size: 0.7em;
    margin-top: -0.8em
    
}

#tab4 {
    background-color: #42abb0;
    margin-top: -0.1em;
    font-size: 0.8em;
    height: auto
    
}

#tab4> h2{
    color: #1a1a18;
        font-size: 1em;
    width: 70%;
margin-top: 1.1em;
}








#tab5> h2{
    color: #1a1a18;
        font-size: 1em;
    width: 70%;
margin-top: 1.1em;
    padding-bottom: 1em
}



#tab6> p{
    margin-top: 1.8em;
    width: 97%;
    padding-bottom: 1em
}



#tab6 {
    background-color: #e59a1f;
    margin-top: -0.2em;
    font-size: 0.8em;
    border-bottom-left-radius: 1.5em;
    border-bottom-right-radius: 1.5em;
   height: auto
}

#tab5 {
    background-color: #764491;
   margin: auto;
    font-size: 0.8em;
    border-bottom-left-radius: 1.5em;
    border-bottom-right-radius: 1.5em;
    margin-top: -0.1em;
    
    height: auto
}

#tab4 {
    background-color: #42abb0;
    
    font-size: 0.8em;
    border-bottom-left-radius: 1.5em;
    border-bottom-right-radius: 1.5em;
    
}
.tab_container5{
    width: 80%;
    display: block;
    margin: auto;
    
    
}

.tab_container6{
       width: 80%;
    display: block;
    margin: auto;
    
    
}

.tab_container4{
        width: 80%;
    display: block;
    margin: auto;
    
    
}

#tab4 p{
    margin-top: 0em;
    padding-bottom: 1em
    
}
/* REGISTRO 2 */

main p{
	text-align: center;
	width: 80%;
	margin: auto;
	margin-top: 1.6em;
	font-size: 0.9em
}

.niveles h2{
	text-align: center;
	display: block;
	margin: auto;
}
.niveles ul {
	display: flex;
	margin-left: -2.5em;
	justify-content: center;
    margin-bottom: 4em
	
}

.niveles button {
	border-radius: 1em;
	background-color: #764491;
	padding: 0.8em 2em;
	flex-wrap: wrap;
	color: white;
	font-family: work sans;
	margin: 0.3em;
	}



	.niveles .button-selected {
      background-color: #e59a1f;

}
h2 {
	text-align: center;
	display: block;
	margin: auto;
	margin-bottom: 0.1em;
}

.catedras {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 4em;
    
}

form select  {
	background-color: #e59a1f;
	width:100vw;
    color: #ffffff;
    display: block;
    margin: auto;
    padding: 0.8em;
    width: 100%;
  
}

form option{
    background-color: #764491;
   
  
}

.catedras2 form{
    width: 18em
}

.personastrabajo{
    display: flex;
    justify-content: center;
    max-width: 90%;
    flex-wrap: wrap;
    margin: auto;
    padding-bottom: 2em
    
}

.personastrabajo img{ 
    width: 15%;
  
    
    
}

.extra h2{
    margin-top: 2em;
    font-size: 1em;
    color: #42abb0
}

.roles li input{ 
    width: 4em }
.roles li input::placeholder{
    color: #42abb0;
    text-align: center;
}

/* PAGINA INICIO */

.inicio {
   
	background-position: 50px;
	height: auto;
    
 }
.noregistro {
    margin-top: 1.5em;
    padding-bottom: 2em
}

.inicio img{
    width: 97%;
    border-bottom-right-radius: 3em;
    border-bottom-left-radius: 3em; 
    height: 40%;
    object-fit: cover;
    display: block;
    margin: auto;
    height: 50%
  
}

.logo2{display: none
}

.logo img {
	width: 40%;
    border-radius: 1em;
    display: block;
    margin: auto;
    margin-top: -6em;
    margin-bottom: 2em;
}






/* BUSCAR GRUPO*/

.buscar li img{
    width: 20%;
    margin-top: -2em;
    display: block;
    margin: auto
}

/* BUSCANDO */

h5{
    color: #e59a1f;
    font-family: work sans;
    font-size: 3em;
    display: block;
    margin: 1em 0.9em 0;
}

.buscando img{
    width: 50%;
    margin: 0 1.3em;
}

.nav1 h1{ 
    display: block;
    margin: auto;
    text-align: center;
}


/* GRUPO 1 */

.headergrupo {
    background-color: #e59a1f;
    display: flex;
    justify-content: space-around;
    width: 100vm;
    border-radius: 0.8em;
    margin-top: 00.5em
}

.infoheader ul {
    display: flex;
        flex-wrap: wrap;
    margin-left: -4em;
    justify-content: center
}

.infoheader button{
    color: #ffffff;
    background-color: #1a1a18;
    border-radius: 0.8em;
    padding: 0.5em 0.8em;
    margin: 0.3em;
    font-family: work sans;
    font-size: 0.7em
        
}

.infoheader .button-selected {
    background-color: #42abb0
}

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

h6{
    
    
    font-family: work sans;
    color: #1a1a18;
    font-size: 1.5em;
  
    display: block;
    margin:  -0.5em auto
   
    
}


.headergrupo img{
    width: 60%;
}

.infosecundaria{
    display: flex;
   
    justify-content: space-around;
    font-family: work sans;
    color: #ffffff;
    font-size: 0.8em;
     margin-top: 2em


}
.infoheader4img .infosecundaria4{
    display: flex;
   
    justify-content: space-around;
    font-family: work sans;
    color: #ffffff;
    font-size: 0.8em;
     margin-top: -1em;


}

.infoprimaria{
    display: flex;
    
    justify-content: space-around;
    font-family: work sans;
    color: #ffffff;
    font-size: 0.8em;
    font-weight: 600;
    margin-bottom: 1em;
     
}

.infoprimaria3{
    display: flex;
    margin-top: -5em;
    justify-content: space-around;
    font-family: work sans;
    color: #ffffff;
    font-size: 0.8em;
    font-weight: 600;
    margin-top: -3em;
   
}

.infosecundaria3{
    display: flex;
    margin-top: 2em;
    justify-content: space-around;
    font-family: work sans;
    color: #ffffff;
    font-size: 0.8em;
     margin-top: -1em;
}


hr{
    color: #31B7BD;
    width: 80%;
    background-color: #31B7BD;
    
}

.enviarpropuesta {
    display: flex;
    background-color: #31B7BD;
    border-radius: 0.8em;
    width: 100vm;
    justify-content: space-aroun;
    align-items: center;
    margin-top: -3em;
   position: absolute;
 
}

.enviarpropuesta p10 {
    font-family: work sans;
    color: #ffffff;
    text-align: center;
    font-size: 0.8em;
    padding: 1em;
   
}

.enviarpropuesta img{
    width: 3em;
    margin-right: 4em;
        
}

.listaroles2{
    display: flex;
    align-items: center;
margin-left: 2.5em;
    justify-content: flex-start;
    width: 90%;
}

/* PROPUESTA ENVIADA */

.propuestaenviada {
     display: flex;
    flex-direction: column;
    background-color: #31B7BD;
    border-radius: 0.8em;
    width: 100vm;
    justify-content: space-aroun;
    align-items: center;
    margin-top: -3.5em;
position: absolute;
}

.propuestaenviada p10 {
    font-family: work sans;
    color: #ffffff;
    text-align: center;
    font-size: 0.8em;
    padding: 1em;
    width: 70%;
   
}

.propuestaenviada li a{
     font-family: work sans;
    color: #ffffff;
    text-align: center;
    font-size: 1.2em;
       width: 70%;
    
}

.propuestaenviada li{
    margin-bottom: 1em;

}

/* ARMAR GRUPO */

#profilepic {
    display: none;
}

.agregardatos img {
	width: 70%;
    margin: 1em;
   
}

.agregardatos {
	display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 4em;
}

.agregardatos h6 {
    font-size: 1.5em;
    margin-bottom: 1em;
    
	
}

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

.losbasicosseparador input{
    border-bottom-color: #42abb0;
    border-bottom-style: solid;
    border-width: medium;
    border-top-style: hidden;
    border-left-style: hidden;
    border-right-style: hidden;
    width: 110%;
    margin-bottom: 1em;
}

/* ROLES */

#tagged {
    background-color: #1a1a18;
    color: #e59a1f;
    line-height: 1.8em;
    border-radius: 0.7em;
    width: 15em
}

#info li a{
    color: #e59a1f;
    font-size: 0.7em;
    background-color: #1a1a18;
    padding: 0.2em 2.7em;
    border-radius: 0.4em

}

h9{ 
    font-family: work sans;
    font-size: 1.2em;
    font-weight: 700;
    margin-bottom: 0.5em

}

#info input::placeholder{
    color: #e59a1f;
    padding-left: 0.5em;
    font-size: 0.8em
}

.infoheader2 h8{
    font-family: work sans;
    font-weight: 700;
    font-size: 1.3em;
    display: block;
    margin-left: -1em
}

.infoheader2 .infosecundaria{
    margin-left: -1em
}

.infoheader2 .infoprimaria{
    margin-left: -1em
}

.infoheader2img a img{
    width: 80%;
    margin-top: 2.3em
}
#progressbar {
  background-color: #ffffff;
  border-radius: 13px; /* (height of inner div) / 2 + padding */
  padding: 3px;
    
}

#progressbar > div {
   background-color: #42abb0;
   width: 90%; /* Adjust with JavaScript */
   height: 20px;
   border-radius: 10px;
}

#progressbar p15{
    font-size: 0.7em;
    font-family: work sans;
    text-align: center;
    margin: 3em;
    line-height: 2em;
    color: #ffffff
}

#progressbar2 {
  background-color: #ffffff;
  border-radius: 13px; /* (height of inner div) / 2 + padding */
  padding: 3px;
    
}

#progressbar2 > div {
   background-color: #42abb0;
   width: 70%; /* Adjust with JavaScript */
   height: 20px;
   border-radius: 10px;
}

#progressbar2 p15{
    font-size: 0.7em;
    font-family: work sans;
    text-align: center;
    margin: 3em;
    line-height: 2em;
    color: #ffffff
}


/* BUSCAR PERSONA RESULTADOS */
 


.miniid {
	display: flex;
	padding: 0.5em;
	border-radius: 2em;
	border-color: #42abb0;
	border-width: medium;
	border-style: solid;
	width: 90vm;
padding-left: 0; 
	margin: 0.5em auto;
    min-width: 25em;
	margin-bottom: 0.5em;
    margin-top: 2em;
    height: 10em;
    margin-left: 0.5em
}

.listaroles{
    display: flex;
    align-items: center;

    justify-content: center;
    width: 100%;
    
}

.miniid .listaroles #rol {
    margin-left: -2em
}
.singrupo h7{
   width: 7em;

    line-height: 1.5em;
    margin-bottom: 1em;
    font-size: 1em; 
    display: block;
    margin: auto;
}

.titulousuario h6{
    width: 100%;
    font-size: 1.8em;
    margin-bottom: 0.5em;
    margin-top: 0.5em
}

.infosecundaria2{
    color: #1a1a18;
    font-size: 0.8em;
      
    font-family: work sans;

    
}

.info2{
    display: flex;
    width: 100%;
}

.infosecundaria2 p4, .infoprimaria2 p4{
    margin: 0em 1.7em;
        width: 70%;
    margin-left: 0.5em;
    
    font-weight: 600
        
}
p90{
    display: none
}

.infoprimaria2{ 
     color: #1a1a18;
   display: flex;
      flex-direction: column;
    font-family: work sans;
   font-size: 0.8em;
}

.infoprimaria2 p5, .infosecundaria2 p5 {
    
    width: 70%;
    margin-left: 0.6em
}
#info{
    
    display: flex;
    flex-direction: column;
}
p9{
    color: #e59a1f;
    font-family: work sans;
    background-color: #1a1a18;
    border-radius: 0.4em;
    padding: 0 0.8em;
    width: 8.8em;
    line-height: 1.5em;
    margin-top: 0.5em;
    font-size: 0.8em
}

#info li{
    font-family: work sans;
    font-size: 1em;
    font-weight: 600
}


#info p8{
    font-family: work sans;
    font-size: 0.8em;
    font-weight: 300;
    
}
#rol {
   display: flex;
    justify-content: center;
    align-items: baseline;
     z-index: -1;
     margin: 0em 04em 0em 1em;
    
   
}



#rol .imgz{
    z-index: 1;
      margin: 0 -3em;
    }


.FiltrosGrupoResultados {
	display: none;
}

.RolesGrupoUno {
	display: none;
}


.LosBasicos2 {
	display: none;
}


.ArmarConfirmaciónRoles {
	display: none;
}

.ArmarConfirmacionBasicoParteDos {
	display: none;
	
}


.gruposresponsive{
    margin: auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.5em
}

.infoheader5img {
    background-color: #764491;
    display: flex;
    justify-content:center;
    width: 18em;
    border-radius: 0.8em;
    margin-top: 1em;
    height: 9em;
    margin: 0.5em;
    flex-wrap: wrap;
        
    
}	
    .infoheader5img a img{
    width: 5em;
    display: block;
    margin: auto;
    margin: 1em
}

    
    .infoheader5{
        display: flex;
        flex-direction: column;
        margin: 0.5em;
        justify-content: center;
        align-items:center;
        width: 8em
            
    }
    
    .infoheader5 h8{
        font-family: work sans;
        color: #ffffff;
        font-weight: 600;
        font-size: 1em;
        margin-bottom: 1em
    }
    
    .infosecundaria5{
         font-family: work sans;
        color: #ffffff;
        font-weight: 600;
        font-size: 0.7em;
        
        
    }
    
    .infosecundaria5 p4{
        margin: 1em;
        
    }
    .infoprimaria5{
         font-family: work sans;
        color: #ffffff;
        font-weight: 400;
        font-size: 0.7em;
        margin-bottom: 1em;
        padding: 
    }
    
    .infoprimaria5 p5{
        margin: 1em
    }


/* RESPONSIVE */ /* RESPONSIVE */ /* RESPONSIVE */

@media only screen and (min-width: 800px) 
{
    .inicio{
        height: 100vh;
    }
    
    .responsivebienvenidos{
        display: block;
        display: flex;
       
    }
    
    .responsivebienvenidos> h5{
        display: block;
        margin: auto;
        margin-top: 1em;
        margin-bottom: 0.5em
    }
    
    .bienvenidosinicio{
        background-color: #ffffff;
        position: sticky;
        width: 40%;
        display: block;
        margin: auto;
        border-radius: 3em;
        
        
    }
    
    .inicio img {
        width: 100%;
        height: auto;
        border-radius: 0em;
        display: block;
        z-index: -999;
        object-fit:fill;
        margin-top: -1em
    
    }
    
    .iniciosesion h5{
        margin-top: -1em;
        margin-bottom: 0.5em;
        display: block;
    }
    .logo {
        display: none;
    }
    
    .logo2{ 
    display: flex;
        justify-content: center;
        width: 25%;
        margin: auto;
        margin-top:-35em;
        
        z-index: 3;
        align-items: center;
    }
    
    .logo2 img{
        padding-right: 4em;
        width: 80%
    }
    .logo2 p{
        color: #ffffff; 
        
    }
	
	.TusGruposIndex {
		display: flex;
		flex-direction: row;
		margin: 20px;
	
	}
	
	
	
    
    
   .iniciosesion {
 
       display: flex;
       flex-direction: column;
       align-items: center;
       width: 40vw;
       margin: auto;
       color: #1a1a18;
      
    }
    
    .iniciosesion input {
        background-color: #ffffff;
        color: #42abb0;
        width: 20vw;
        margin-bottom: 0.8em;
        line-height: 1.3em
        
        
    }
    
    .iniciosesion input::placeholder{
        color: #42abb0
    }
    
	  .responsiveweb {
        background-color: #ffffff;
       display: block;
       width: 40%;
        height: 35%;
        margin: auto;
        padding: 5em 1em;
        border-radius: 2em;
        z-index: 2;
        position: sticky
     }
    
    .responsiveweb a p{
        margin: auto;
        padding-top: 2em
    }
    
    .nav{
         background-color: #764491;
        border-bottom-left-radius: 2em;
        display: block;
        display: flex;
        height: 6em;
        align-items: center;
        width: 100vm;
        border-bottom-right-radius: 2em;
    }
    
    .responsivebuscar p90{
        font-size: 1.5em;
        font-family: work sans;
        color: #ffffff;
        font-weight: 600;
        background-color: #31B7BD;
      display: block;
        text-align: center;
        padding-top: 1.5em
        
    }
    .responsivebuscar{
        background-color: #31B7BD;
        display: flex;
        flex-direction: column;
        margin-top: 3em;
        display: block
    }
    .nav> .buscador{
        display: block;
    }
      
    
    .nav li{
       margin: 0.5em;
        
    }
    
    
    
    .nav img { 
    height: 40%;
    width: auto;
	
}
    
    .buscador{
        margin: auto;
        display: flex;
        align-items: center;
    }
    
    .nav>.buscador input{
        width: 30em;
        border-color: #42abb0;
        position: relative;
      
    }
.nav>.buscador button{
   margin-left: -3.5em;
    margin-top: 0.2em;
    height: 3.5em
}

.nav> .buscador button img {
    height: 60%
}

    .grupo .link1 li{
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 4em
        
        
    }
    
    p60{
        font-size: 0.8em;
        font-family: work sans;
        color: #ffffff;
        width: 18em;
        margin-top: 1.5em;
        line-height: 1.4em;
        display: block
    }
   
    .grupo .link1 li a{
        font-size: 3em;
        display: block;
        
    }
    .grupo .link1 li{
        padding: 0em 7em;
        
    }
   
    
	
	.buscador {
		display: none;
	}
    

	main .buscador {
	display: none;
}
	
	.grupo {
		margin-top: 0.5em;
		background-color: #31B7BD;
		height: 15em;
        width: 100vm
	}
	
	.videodisapp {
		display: block;
	}
	
	h3 {
	background-color: #42abb0;
	width: 50%;
	}
	
	.FiltrosGrupo {
	display: flex;
	flex-direction: row;
    margin: auto;
}
	
	.FiltrosGrupoResultados {
		display: block;
	}
	
	.quilomboArmarGrupo {
		display: flex;
        justify-content: space-around;
        width: 50%;
        margin: auto;
	}
	
    .losbasicos2 {
        margin-right: 1em
    }
	.LosBasicosGrupo {
	display: flex;
	background-color: #ffffff;
	flex-direction: column;
	padding: 0.5em;
	border-radius: 2em;
	border-color: #42abb0;
	border-width: medium;
	border-style: solid;
	width: 60%;
    min-width: 35em;
	margin: auto;
    justify-content: center;
	margin-bottom: 0.5em;
    margin-top: 2em;
        margin-right: 1em

    }
    
    .losbasicosgrupo> h3{
        width: 15em;
        margin-top: -1.5em
    }
	
	.LosBasicosGrupoDos {
		display: flex;
	flex-direction: column;
	padding: 0.5em;
	border-radius: 2em;
	border-color: #42abb0;
	border-width: medium;
	border-style: solid;
	width: 60%;
    min-width:35em;
	margin: auto;
    justify-content: center;
	margin-bottom: 0.5em;
    margin-top: 2em;
	}
    
    .rolesgrupo> h3{
        width: 15em;
        margin-top: 1em
    }
	
    
    
	.RolesGrupoUno {
	display: block;
}
	
	.RolesGrupo {
		display: flex;
	flex-direction: column;
	padding: 0.5em;
	border-radius: 2em;
	border-color: #42abb0;
	border-width: medium;
	border-style: solid;
	width: 60%;
    min-width: 35em;
	margin: auto;
    justify-content: center;
	margin-bottom: 0.5em;
    margin-top: 2em;
	}
	
    
    .rolesgrupodos> h3{
        width: 15em;
        margin-top: 1em
    }
    
	.RolesGrupoDos {
		display: flex;
		background-color: #ffffff;
	flex-direction: column;
	padding: 0.5em;
	border-radius: 2em;
	border-color: #42abb0;
	border-width: medium;
	border-style: solid;
	width: 60%;
    min-width: 35em;
	margin: auto;
    justify-content: center;
	margin-bottom: 0.5em;
    margin-top: 2em;
	}
	
	
.LosBasicos2 {
	display: block;
}	
    
    .losbasicosgrupodos> h3{
        width: 15em;
        margin-top: 1em
    }
	.ArmarConfirmaciónRoles {
	display: block;
}
	

.QuilomboConfirmcionGrupo {
	    display:flex;
        margin: auto;
	    justify-content: center;
	}


.ArmarConfirmacionBasicoParteDos {
	display: block;
	
}

	.QuilomboConfirmacionDos2 {
		display:flex;
        margin: auto;
	    justify-content: center;
	}

    
	.tituloconfirmacion {
		text-align: center;
	}
	
	
	.botoncitosfinles {
		display: flex;
		flex-direction: row;
	}
   
	
.logocalendario {
    display: flex;
	justify-content: center;
	align-items:center;
    position: relative;
    margin-left: auto;
    }
	
	
	.infoheader3img { 
		width: 500px;
	}
	
	.infoheader2img { 
		width: 500px;
	}
	
	.sobrenosotros{ 
    display: flex;
	flex-direction: row;
    align-content: center;
    width: 75%;
    padding-top: 4em;
    align-items: center;
    justify-content: center;
        margin: auto;
    
}



.sobrenosotros .textoinfo p{
    font-size: 1.2em;
    color: #764491;
    font-weight: 600;
    text-align: left;
    width: 15em;
    
    
   
}

video{
    width: 30em;
    display: block;
    margin: auto;
    max-width: 40em
    
    
}
    
    .gruposresponsive {
        margin: auto;
        display: flex;
        justify-content: center
        
    }
    
    .infoheader5img {
    background-color: #764491;
    display: flex;
    justify-content:center;
    width: 18em;
    border-radius: 0.8em;
    margin-top: 1em;
    height: 12em;
    margin: 1em;
        
    
}	
    .infoheader5img a img{
    width: 5em;
    display: block;
    margin: auto;
    margin: 1em
}

    
    .infoheader5{
        display: flex;
        flex-direction: column;
        margin: 1em;
        justify-content: center;
        align-items:center;
            
    }
    
    .infoheader5 h8{
        font-family: work sans;
        color: #ffffff;
        font-weight: 600;
        font-size: 1.3em;
        margin-bottom: 1em
    }
    
    .infosecundaria5{
         font-family: work sans;
        color: #ffffff;
        font-weight: 600;
        font-size: 0.7em;
        
        
    }
    
    .infosecundaria5 p4{
        margin: 1em;
        
    }
    .infoprimaria5{
         font-family: work sans;
        color: #ffffff;
        font-weight: 400;
        font-size: 0.7em;
        margin-bottom: 1em;
        padding: 
    }
    
    .infoprimaria5 p5{
        margin: 1em
    }
.textoindex{
    border-bottom-style: dashed;
    border-width: thin;
    border-top-style: hidden;
    border-left-style: hidden;
    border-right-style: hidden;
    width: 75%;
    line-height: 2.3em;
    margin: auto;
    display: block;
    
    
    
 }

.calendario {

	overflow: hidden;
	clear: both;
	float: left; 
    width: 100%;
    height: 35em;
	background-color:#42abb0;

	border-radius: 0.5em;
    display: list-item;
  
    
}
.fechascalendario{ 
display: flex;
    align-items: baseline;
	padding: 2em 3em;
	background-color: #ffffff;
	width: auto;
	margin: 0.2em;
	height: 0.5em;
	border-radius: 1em;
}

.Calendarioheader{
    background-color: #e59a1f;
    display: flex;
    justify-content: space-around;
    width: 90%;
    border-radius: 0.8em;
    margin-top: 1em;
    height: 12em;
    margin: auto
    
}
	
.link1> li li3{
    font-size: 0.4em;
font-weight: 600;
    width: 20em;
    background-color: #ffffff;
    border-radius: 0.9em;
    margin-top: 4em;
    display: block;
   
    
}

.tusgrupos{
    display: none
}

h2{ 
    display: block;
    margin-top: 2em;
}

.buscador1{
    display: none
}
.link1>li li3 a{
    color: #31B7BD;
}



ul.tabs{
    width: 35em;
    margin: auto;
    margin-top: 6em;
    padding-left: 0;
    
}

ul.tabs li a {
height: 4em   
}

.comentario{
    margin-left: 1em
}

.comment{
    width: 70%
}

.tab_content {
    width:28em;
    display: block;
   margin: auto;
    background-color: #42abb0;
    padding-top: 2em;
    margin-bottom: 2em;
    border-bottom-left-radius: 2em;
     border-bottom-right-radius: 2em;
    height: 10em;
    margin-top:-0.3em;
    display: flex;
    
   
   
    
}

.tab_container {
    background-color:#ffffff;
     margin: auto
    
}

.fechas{
    width: 30%
}
    
    
.infoheaderimg9{
    display: flex;
    background-color: #e59a1f;
    width: 80%;
    max-width: 25em;
    height: 12em;
    margin: auto;
    border-radius: 1em;
    padding: 0.5em;
    margin-bottom: 4em
}

    .notifimg img{
        width: 25%
    }
    
.infoheaderimg9> img{
    width: 9em;

}

    .infoheaderimg{
        width: 25em
    }
    
.infoheader9 h8 {
    font-family: work sans;
    color: #ffffff;
    font-weight: 600;
    font-size: 1.7em;
    padding: 0.5em;
    display: block;
    padding-top: 1em;
    margin-bottom: -1em

}





 }