/* Colores institucionales
- Habitar: #00B1AB
- Academica: #006F8D
- Docentes: #A2305B
- Galeria: #EDA200
- Calendario: #EF7216
- Foros: #998675
*/

@font-face {
    font-family: 'rajdhani';
    src: url('../font/rajdhani.eot'),
         url('../font/rajdhani.woff') format('woff'),
         url('../font/rajdhani.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;}
    
/* Variables tipograficas (font-weight)
- light: 300
- normal: 400
- medium: 500
- semibold: 600
- bold: 700
*/    

/*RESET*/
*{padding: 0; margin: 0; color: #666;}
nav, ul, li, hgroup, section, article, div, p, video, audio, form, header, main, footer,span {display: block;}
li { list-style: none; }
a { text-decoration: none; color: #999; cursor: pointer;}
html { font-size: 10px; font-family: rajdhani, sans-serif; }
body{
    position: relative;
    z-index: 0;
}
#contenedor {
    width: 86%;
    min-width: 950px;
    margin: auto;
    height: auto;
    margin: 0rem auto 1rem auto;
    min-height: 800px;
    
}

/********************************* BARRA DE NAVEGACION DE USUARIOS *********************************/
#cabezal {
    width: 100%;
    height: 3px;
    position: fixed;
    top: 0px;
    background: url(../imagenes/utiles/cabezal.png) repeat-x top;
    z-index: 100;
}
#login {
    position: fixed;
    height: 5rem;
    top: 3px;
    width: 100%;
    padding-top: 3px;
    border-top: .2rem solid #fff;
    z-index: 100;
    border-bottom: .1rem solid #eee;
}
#login ul {
    min-width: 960px;
    width: 86%;
    margin: auto;
}
#login ul>li {
    width: 33%;
    float: left;
    height: 3rem;
}
#login ul>li:nth-child(1) div {
    margin: .5rem;
    width: 3.5rem;
    height: 3.5rem;
    float: left;
}
#login ul>li:nth-child(1) p {
    color: #fff;
    width:auto;
    font-size: 1.6rem;
    padding: .9rem;
    height: 2rem;
    float: left;
}
#login ul>li:nth-child(1) p span { font-weight: 600; color: #fff; clear: none;}

#login ul>li:nth-child(3) ul {
    position: relative;
    min-width: inherit;
    width: 100%;
    height: 5rem;
}
#login ul>li:nth-child(3) { float: right;}
#login ul>li:nth-child(3) ul>li {
    position: relative;
    border: .2rem solid #fff;
    border-radius: 100%;
    margin: .5rem;
    width: 3.5rem;
    height: 3.5rem;
    float: right;
    transition: all .3s;
    cursor: pointer;
    background-size: 120% !important;
}
#login ul>li:nth-child(3) ul>li span {
    opacity: 0;
    position: absolute;
    border: .2rem solid #fff;
    border-radius: 100%;
    top: -.2rem;
    left: -.2rem;
    width: 3.5rem;
    height: 3.5rem;
}
#login ul>li:nth-child(3) ul>li span:hover {
    -webkit-animation: xpand .8s;
    -moz-animation: xpand .8s;
    -ms-animation: xpand .8s;
    -o-animation: xpand .8s;
    animation: xpand .8s;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-iteration-count:infinite;
    -ms-animation-iteration-count:infinite;
    -o-animation-iteration-count:infinite;
    animation-iteration-count:infinite;
}

#navUsuario{ background: url(../imagenes/iconos/ic_Usu.png) center no-repeat; }
#navBuscar{ background: url(../imagenes/iconos/ic_Bus.png) center no-repeat; }
#navCalendario{ background: url(../imagenes/iconos/ic_Cal.png) center no-repeat; }
#navNotificacion { background: url(../imagenes/iconos/ic_Not.png) center no-repeat; }

/*Puntero de submenues*/
#login ul>li:nth-child(3) ul span#flecha{
    transition: all .3s;
    display: none;
    width: 2rem;
    height: .7rem;
    background: url(../imagenes/utiles/flecha.png) center no-repeat;
    position: absolute;
    bottom: 0;
    z-index: 300!important;
}

/*Submenues*/
#desgloses {
    display: none;
    padding-bottom: 1rem;
    width: 100%;
    height: auto;
    position: fixed;
    background: #eee;
    top: 5.8rem;;
    z-index: 100;
    box-shadow: 0px 0px 15px #eee;
    border-bottom: .1rem solid #ddd;
}
/*Submenues Notificaciones*/
#desgloses div.notificacion {
    display: none;
    width: 86%;
    margin: auto;
    min-width: 960px;
}
#desgloses div.notificacion h2 {
    padding: 1rem .5rem .5rem .5rem;
    font-size: 2rem;
    border-bottom: dotted .15rem #ccc;
}
#desgloses div.notificacion ul {
    width: 49.9%;
    height: 15rem;
    float: left;
    margin-top: .5rem;
}
#desgloses div.notificacion ul:nth-child(2) { border-right: dotted .15rem #ccc;}
#desgloses div.notificacion ul:nth-child(2) li {
    cursor: pointer;
    width: 97%;
    height: 2rem;
    float: none;
    padding: .5rem;
}
#desgloses div.notificacion ul:nth-child(2) li:hover { background: #fff;}
#desgloses div.notificacion ul:nth-child(2) li img {
    margin: .5rem 0rem;
    width: 1.5rem;
    height: 1.5rem;
    float: left;
}
#desgloses div.notificacion ul:nth-child(2) li p {
    font-size: 1.4rem;
    margin: .1rem;
    padding: .5rem;
    height: 1rem;
    float: left;
}
#desgloses div.notificacion ul:nth-child(3) li {
    margin: 0px 5px;
    width: 31%;
    height: 15rem;
    cursor: pointer;
    float: left;
}
#desgloses div.notificacion ul:nth-child(3) li:hover {background: #fff;}
#desgloses div.notificacion ul:nth-child(3) li hgroup {
    position: relative;
    width: 100%;
}
#desgloses div.notificacion ul:nth-child(3) li hgroup div {
    width: 100%;
    height: 15rem;
}
#desgloses div.notificacion ul:nth-child(3) li:nth-child(1) hgroup div {
    background-image: url(../imagenes/notas/nota14.jpg)!important;
    background-size: cover;
    background-blend-mode:soft-light !important;}
#desgloses div.notificacion ul:nth-child(3) li:nth-child(2) hgroup div {
    background-image: url(../imagenes/img-not-02.png) !important;
    background-size: cover !important;
    background-blend-mode:soft-light; }
#desgloses div.notificacion ul:nth-child(3) li:nth-child(3) hgroup div {
    background-image: url(../imagenes/img-not-03.png) !important;
    background-size: cover !important;
    background-blend-mode:soft-light;}
#desgloses div.notificacion ul:nth-child(3) li hgroup h3 {
    border: #fff 1px dotted;
    margin: .5rem;
    color: #FFF;
    opacity: 0;
    position: absolute;
    top: 0;
    padding: 1rem;
    font-size: 1.4rem;
    height: 11.5rem;
    transition: all .3s;
}
#desgloses div.notificacion ul:nth-child(3) li hgroup h3 span {
    color: #FFF; 
    width: 100%; 
    display: block;
    margin-bottom: 4rem;
}
#desgloses div.notificacion ul:nth-child(3) li hgroup h3:hover { opacity: 1;}

/*Submenues Calendario*/
#desgloses div.calendario {
    display: none;
    width: 86%;
    margin: auto;
    min-width: 960px;
}
#desgloses div.calendario h2 {
    padding: 1rem .5rem .5rem .5rem;
    font-size: 2rem;
    border-bottom: dotted .15rem #ccc;
}
#desgloses div.calendario ul {
    width: 100%;
    height: 15rem;
}
#desgloses div.calendario ul li {
    width: 16.6%;
    height: 15rem;
    float: left;
}
#desgloses div.calendario ul li hgroup {
    cursor: pointer;
    transition: all .3s;
    margin: 1rem;
    height: 13rem;
}
#desgloses div.calendario ul li hgroup div {
    transition: all .3s;
    width: 10rem;
    height: 7rem;
    padding: 3rem;
}
#desgloses div.calendario ul li hgroup div h2 {
    color: #fff;
    border: none;
    text-align: center;
    padding: 0;
}
#desgloses div.calendario ul li hgroup div h2:first-child { font-size: 3rem;}
#desgloses div.calendario ul li hgroup div h2:last-child { font-size: 5rem;}
#desgloses div.calendario ul li hgroup div:last-child {
    transition: opacity 1s;
    opacity: 0;
    overflow: hidden;
    width: 0rem;
    height: 0rem;
    padding: 0rem;
    font-size: 1.4rem;
}
#desgloses div.calendario ul li hgroup div:last-child h3 { color: #fff; margin-bottom: .5rem;}
#desgloses div.calendario ul li hgroup:hover div {
    width: 3rem;
    height: 2rem;
    padding: 1rem;
}
#desgloses div.calendario ul li hgroup:hover div h2:first-child { font-size: 2rem; opacity: .3;}
#desgloses div.calendario ul li hgroup:hover div h2:last-child { font-size: 3rem;opacity: .3;}
#desgloses div.calendario ul li hgroup:hover div:last-child {
    opacity: 1;
    width: 8rem;
    height: 8rem;
    padding: 0rem 5rem;
    font-size: 1.2rem;
}
/*Submenues Buscar*/
#desgloses div.buscar {
    display: none;
    width: 86%;
    margin: auto;
    min-width: 960px;
}
#desgloses div.buscar h2 {
    padding: 1rem .5rem .5rem .5rem;
    font-size: 2rem;
    border-bottom: dotted .15rem #ccc;
}
#desgloses div.buscar form {
    width: 100%;
    height: 13rem;
}
#desgloses div.buscar form div {
    padding: 1rem 1rem 0rem 1rem;
}
#desgloses div.buscar form div input {
    margin: 0rem .5rem;
    padding: 1rem;
    font-size: 2rem;
    font-family: rajdhani;
}
#desgloses div.buscar form div input:first-child { width: 85%;}
#desgloses div.buscar form div input:last-child {
    width: 10%;
    border: none;
    color: #fff;
    height: 4.5rem;
    background: #ccc;
    cursor: pointer;
    transition: all .3s;
}
#desgloses div.buscar form div input:last-child:hover { background: #00B1AB;}
#desgloses div.buscar form div:last-child { width: 85%}
#desgloses div.buscar form div select {
    margin: 0rem .5rem;
    width: 48.5%;
    padding: 1rem;
    font-size: 2rem;
    font-family: rajdhani;
}
/*desglose Usuarios*/
#desgloses.opciones {
    display: none;
    position: fixed;
    padding: 0rem;
    width: 18rem;
    top: 5.8rem;
    right: 2%;
    z-index: 100;
    box-shadow: none;
}
#desgloses div.usuarios { display: none;}
#desgloses.opciones div.usuarios { display: none;}

#desgloses.opciones div.usuarios ul li {
    cursor: pointer;
    border: none !important;
    padding: 1rem;
    font-size: 1.4rem;
    border-bottom: dotted .15rem #ccc;
}
#desgloses.opciones div.usuarios ul li:hover { background:  rgba(0,0,0,.1)}
/****BARRA DE NAVEGACION deslogueada****/
#login.no_login { background: #f7f7f7; height: 6rem; position: absolute; top: -9.5rem; }
#login.no_login ul form {
    width: 50%;
    float: right;
}
#login.no_login ul form div{
    width: 35%;
    height: 4rem;
    padding: 5px;
    float: left;
}
#login.no_login ul form div input{
    border: .1rem solid #ddd;
    height: 2rem;
    padding: 5px;
    float: left;
    font-size: 1.2rem;
    width: 95%;
}
#login.no_login ul form div:last-child{
    width: 23%;
    float: left;
}
#login.no_login ul form div:last-child input {
    cursor: pointer;
    background: #ccc;
    border: 0;
    height: 3.4rem;
    color: #fff;
    transition: background .3s;
}
#login.no_login ul form div:last-child input:hover {
    background: #00B1AB;
}
#login.no_login ul form div p {
    clear: both;
    font-size: 1.1rem;
    padding: 5px;
    width: 95%;
}
#login.no_login ul form div p a:hover { color: #00B1AB; font-weight: 600;}
#login.no_login ul form div p input {
    margin: 0px 5px;
    height: 12px;
    width: 12px;
}
/****BARRA DE NAVEGACION logueada****/
#avatar {
    border: .2rem solid #fff;
    border-radius: 100%;
    background: url(../imagenes/perfil.jpg) no-repeat center;
    background-size: 100%;
    cursor: pointer;
    position: relative;
}
#avatar span {
    opacity: 0;
    position: absolute;
    border: .2rem solid #fff;
    border-radius: 100%;
    width: 3.5rem;
    height: 3.5rem;
}
#avatar:hover span{
    -webkit-animation: xpand .8s;
    -moz-animation: xpand .8s;
    -ms-animation: xpand .8s;
    -o-animation: xpand .8s;
    animation: xpand .8s;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-iteration-count:infinite;
    -ms-animation-iteration-count:infinite;
    -o-animation-iteration-count:infinite;
    animation-iteration-count:infinite;
}

/*********************************HEADER*********************************/
header {
    position: relative;
    padding: 5px;
    width: 100%;
    height: 10rem;
    min-width: 960px;
    margin-bottom: 3rem;
    margin-top: 10rem;
}
header>a {
    display: block;
    width: 20rem;
    height: auto;
}
header a hgroup {
    width: 20rem;
    height: 11.5rem;
}
header a hgroup h1{
    margin: -1rem 0px;
    font-size: 5rem;
    font-weight: 400;
}
header a hgroup h2{
    margin: -1.4rem 0px -1rem 0px;
    font-size: 3.7rem;
    font-weight: 400;
}
header a hgroup h4{
    font-size: 2.2rem;
    font-weight: 300;
}
nav {
    width: 75%;
    position: absolute;
    right: 0px;
    bottom: 0px;
    height: 3rem;
}
/*********************************NAVEGACION COMUN*********************************/
nav ul {
    width: 100%;
    height: 3rem;
}
nav ul li {
    width: 16.6%;
    float: left;
    text-align: center;
    padding: .3rem 0rem .3rem 0rem;
    border-bottom: .15rem solid #ccc;
    font-size: 1.4rem;
    transition: all .3s;
}
nav ul#navIndex li { width: 25%;}
nav ul li a {
    display: block;
    width: 100%;
    height: 100%;
}
/*********************************CONTENIDO BASE*********************************/
main {
    width: 100%;
    padding: 5px;
    clear: both;
}

main>hgroup { width: 100%; margin: 4rem 0rem; position: relative; }
main>hgroup h1 {
    width: 50%;
    font-size: 5rem;
    line-height: 90%;
    font-weight: 400;
}
main>hgroup p {
    width: 50%;
    font-size: 1.6rem;
    line-height: 120%;
    margin-top: 1rem;
    font-weight: 300;
}


main article {
    width: 100%;
    min-height: 600px;
}
/*********************************PIE DE PAGINA*********************************/
footer {
    width: 80%;
    padding-top: 5rem;
    margin: 2rem auto auto auto !important;
    height: 6rem;
    clear: both;
}
footer img {
    opacity: .7;
    width: 6rem;
    float: left;
    margin: 0px 1rem;
}
footer p {
    display: block;
    width: 86%;
    float: left;
    font-size: 1.2rem;
    margin-top: 1.5rem;
}

/**********************************************************************************/
/******************************** PAGINAS INTERNAS ********************************/
/**********************************************************************************/

/****************************************INDEX******************************************/
#index article {
    -webkit-animation: aparicion 3s;
    -moz-animation: aparicion 3s;
    -ms-animation: aparicion 3s;
    -o-animation: aparicion 3s;
    animation: aparicion 3s;
    width: 100%;
    height: 70rem;
}
#index article.primero { margin-top: 3rem;}
#index article.segundo { margin-top: -.7rem;}

#index article ul {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 0;
}
#index article ul li {
    position: absolute;
    z-index: 0;
}
#index article ul li hgroup {
    overflow: hidden;
    cursor: pointer;
    background-color: #ccc;
    margin: .5rem;
    transition: all .3s;
    position: relative;
    z-index: 0;
}
#index article ul li hgroup div {
    z-index: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background-position: center;
    -webkit-filter: grayscale(.8);
    -moz-filter: grayscale(.7);
    -ms-filter: grayscale(.7);
    -o-filter: grayscale(.7);
    filter: grayscale(.7);
    transition: all .3s;
    background-size: cover;
    background-repeat: no-repeat;
}
#index article ul li hgroup div:last-child {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
}

#index article ul li hgroup span {
    opacity: 0;
    width: 80%;
    display: block;
    position: absolute;
    z-index: 5;
    top: 2rem;
    left: 2rem;
    transition: all .3s;
}
#index article ul li hgroup span h4{
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 2rem;
}
#index article ul li hgroup span h2{
    color: #fff;
    font-size: 2.6rem;
    margin: .5rem 0rem;
}
#index article ul li hgroup span p{
    color: #fff;
    font-size: 1.4rem;
    margin-top: .5rem;
}
#index article ul li hgroup:hover div {
    -webkit-background-blend-mode: darken;
    -moz-background-blend-mode: darken;
    -ms-background-blend-mode: darken;
    -o-background-blend-mode: darken;
    background-blend-mode: darken;
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -ms-filter: grayscale(0);
    -o-filter: grayscale(0);
    filter: grayscale(0);
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -ms-filter: blur(2px);
    -o-filter: blur(2px);
    filter: blur(2px);
}
#index article ul li hgroup:hover div:last-child { opacity: 1;}
#index article ul li hgroup:hover span { opacity: 1; }

/*UBICACION Y ESTILOS DE LOS BLOQUES DEL PRIMER MOSAICO*/
#index article.primero ul li:nth-child(1) { top: 0; left: 0; width: 50%; height: 66%;}
#index article.primero ul li:nth-child(1) hgroup { width: 98%; height: 98%;}
#index article.primero ul li:nth-child(1) hgroup span { width: 70%;}
#index article.primero ul li:nth-child(1) hgroup span h2 { font-size: 4rem;}

#index article.primero ul li:nth-child(2) { top: 66%; left: 0; width: 50%; height: 33%;}
#index article.primero ul li:nth-child(2) hgroup { width: 98%; height: 96%;}
#index article.primero ul li:nth-child(2) hgroup span { width: 70%;}
#index article.primero ul li:nth-child(3) { top: 0%; left: 50%; width: 25%; height: 33%;}
#index article.primero ul li:nth-child(3) hgroup { width: 96%; height: 96%;}
#index article.primero ul li:nth-child(3) hgroup span { opacity: 1;}
#index article.primero ul li:nth-child(4) { top: 33%; left: 50%; width: 25%; height: 66%;}
#index article.primero ul li:nth-child(4) hgroup { width: 96%; height: 98%;}
#index article.primero ul li:nth-child(5) { top: 0%; left: 75%; width: 25%; height: 33%;}
#index article.primero ul li:nth-child(5) hgroup { width: 96%; height: 96%;}
#index article.primero ul li:nth-child(6) { top: 33%; left: 75%; width: 25%; height: 33%;}
#index article.primero ul li:nth-child(6) hgroup { width: 96%; height: 96%;}
#index article.primero ul li:nth-child(7) { top: 66%; left: 75%; width: 25%; height: 33%;}
#index article.primero ul li:nth-child(7) hgroup { width: 96%; height: 96%;}
#index article.primero ul li:nth-child(7) hgroup span { opacity: 1;}

/*UBICACION DE LOS BLOQUES DEL SEGUNDO MOSAICO*/
#index article.segundo ul li:nth-child(1) { top: 0; left: 0; width: 25%; height: 33%;}
#index article.segundo ul li:nth-child(1) hgroup { width: 96%; height: 96%;}
#index article.segundo ul li:nth-child(1) hgroup span { opacity: 1;}
#index article.segundo ul li:nth-child(2) { top: 0%; left: 25%; width: 50%; height: 33%;}
#index article.segundo ul li:nth-child(2) hgroup { width: 98%; height: 96%;}
#index article.segundo ul li:nth-child(3) { top: 0%; left: 75%; width: 25%; height: 33%;}
#index article.segundo ul li:nth-child(3) hgroup { width: 96%; height: 96%;}
#index article.segundo ul li:nth-child(4) { top: 33%; left: 0%; width: 25%; height: 33%;}
#index article.segundo ul li:nth-child(4) hgroup { width: 96%; height: 96%;}
#index article.segundo ul li:nth-child(4) hgroup span { opacity: 1;}
#index article.segundo ul li:nth-child(5) { top: 33%; left: 25%; width: 50%; height: 33%;}
#index article.segundo ul li:nth-child(5) hgroup { width: 98%; height: 96%;}
#index article.segundo ul li:nth-child(6) { top: 66%; left: 0%; width: 50%; height: 33%;}
#index article.segundo ul li:nth-child(6) hgroup { width: 98%; height: 96%;}
#index article.segundo ul li:nth-child(7) { top: 66%; left: 50%; width: 25%; height: 33%;}
#index article.segundo ul li:nth-child(7) hgroup { width: 96%; height: 96%;}
#index article.segundo ul li:nth-child(7) hgroup span { opacity: 1;}
#index article.segundo ul li:nth-child(8) { top: 33%; left: 75%; width: 25%; height: 66%;}
#index article.segundo ul li:nth-child(8) hgroup { width: 96%; height: 98%;}

/*IMAGENES PRIMER MOSAICO*/
#index article.primero ul li:nth-child(1) hgroup div {background-image: url(../imagenes/notas/nota14.jpg);  background-color: #00B1AB;}
#index article.primero ul li:nth-child(2) hgroup div {background-image: url(../imagenes/notas/nota02.jpg);  background-color: #00B1AB;}
#index article.primero ul li:nth-child(4) hgroup div {background-image: url(../imagenes/notas/tp01.jpg);  background-color: #EDA200;}
#index article.primero ul li:nth-child(5) hgroup div {background-image: url(../imagenes/notas/nota03.jpg);  background-color: #00B1AB;}
#index article.primero ul li:nth-child(6) hgroup div {background-image: url(../imagenes/notas/nota04.jpg);  background-color: #00B1AB;}

/*IMAGENES SEGUNDO MOSAICO*/
#index article.segundo ul li:nth-child(2) hgroup div { background-image: url(../imagenes/notas/nota05.jpg);  background-color: #00B1AB; }
#index article.segundo ul li:nth-child(3) hgroup div { background-image: url(../imagenes/notas/nota07.jpg);  background-color: #00B1AB; }
#index article.segundo ul li:nth-child(5) hgroup div {background-image: url(../imagenes/notas/nota06.jpg);  background-color: #00B1AB; }
#index article.segundo ul li:nth-child(6) hgroup div {background-image: url(../imagenes/notas/tp03.jpg);  background-color: #EDA200;}
#index article.segundo ul li:nth-child(8) hgroup div {background-image: url(../imagenes/notas/tp02.jpg);  background-color: #EDA200;}

/****************************************ACADEMICA******************************************/
#academica article hgroup { margin-bottom: 4rem;}
#academica article hgroup h1 {
    margin-bottom: 1rem;
    font-size: 2.4rem;
}
#academica article hgroup p {
    word-break: break-all;
    font-family: sans-serif;
    margin: 1rem 0rem;
    font-size: 1.4rem;
    -webkit-line-height: 140%;
    -moz-line-height: 140%;
    -ms-line-height: 140%;
    -o-line-height: 140%;
    line-height: 140%;
    text-align: justify;
}

#academica aside {
    width: 33%;
    float: right;
}
#academica aside>span { display: block; width: 100%; height: 2.5rem; }
#academica aside hgroup { width: 98%; padding: 1rem;}

/****************************************DOCENTES******************************************/
#docentes article {
    width: 100%;
    padding: .5rem;
    -webkit-animation: aparicion 2s;
    -moz-animation: aparicion 2s;
    -ms-animation: aparicion 2s;
    -o-animation: aparicion 2s;
    animation: aparicion 2s;}
#docentes article ul { width: 100%; height: 60rem;position: relative;}
#docentes article ul li { position: absolute; transition: .3s; }
#docentes article ul li span { overflow: hidden;}

/*PRIMER BLOQUE DOCENTE*/
#docentes article ul li.jefe { width: 50%; height: 66%;}
#docentes article ul:first-child li span {margin: .5rem;}
/*DOBERTI*/
#docentes article ul:first-child li:nth-child(1){ top: 0; left: 0; }
#docentes article ul:first-child li:nth-child(1) span{ width: 98%; height: 97.5%; }
#docentes article ul:first-child li:nth-child(1) span div { background-image: url(../imagenes/docentes/jefe1.jpg);}
/*SCAGLIA*/
#docentes article ul:first-child li:nth-child(6){ top: 33%; left: 50%; }
#docentes article ul:first-child li:nth-child(6) span{ width: 98%; height: 98.5%; }
#docentes article ul:first-child li:nth-child(6) span div { background-image: url(../imagenes/docentes/jefe2.jpg);}
/*JTP'S*/
#docentes article ul li.adjunto { width: 25%; height: 33%; }
#docentes article ul:first-child li:nth-child(2){ top: 66%; left: 0; }
#docentes article ul:first-child li:nth-child(2) span{ width: 96%; height: 97%; }
#docentes article ul:first-child li:nth-child(2) span div { background-image: url(../imagenes/docentes/jtp04.jpg);}
#docentes article ul:first-child li:nth-child(3){ top: 66%; left: 25%; }
#docentes article ul:first-child li:nth-child(3) span{ width: 96%; height: 97%; }
#docentes article ul:first-child li:nth-child(3) span div { background-image: url(../imagenes/docentes/jtp01.jpg);}
#docentes article ul:first-child li:nth-child(4){ top: 0; left: 50%; }
#docentes article ul:first-child li:nth-child(4) span{ width: 96%; height: 96%; }
#docentes article ul:first-child li:nth-child(4) span div { background-image: url(../imagenes/docentes/jtp03.jpg);}
#docentes article ul:first-child li:nth-child(5){ top: 0; left: 75%; }
#docentes article ul:first-child li:nth-child(5) span{ width: 96%; height: 96%; }
#docentes article ul:first-child li:nth-child(5) span div { background-image: url(../imagenes/docentes/jtp02.jpg);}

/*ESTILOS JEFES*/
#docentes article ul li.jefe span div{
    width: 50%;
    height: 100%;
    float: left;
    background-color: #ccc;
    background-position: center;
    -webkit-filter: grayscale(.6);
    -moz-filter: grayscale(.6);
    -ms-filter: grayscale(.6);
    -o-filter: grayscale(.6);
    filter: grayscale(.6);
    transition: all .3s;
    background-size: cover;
    background-repeat: no-repeat;
}
#docentes article ul li.jefe span hgroup {
    width: 50%;
    height: 100%;
    float: left;
    background: #A2305B;
}
#docentes article ul li.jefe span hgroup h1{
    color: #fff;
    padding: 2rem 0rem 0rem 2rem;
    font-size: 2.6rem;
}
#docentes article ul li.jefe span hgroup h2{
    color: #fff;
    padding: 0rem 2rem;
    font-size: 1.6rem;
}
#docentes article ul li.jefe span hgroup p{
    color: #fff;
    padding: 2rem 2rem;
    font-size: 1.4rem;
}
/*ESTILOS JTP'S*/
#docentes article ul li.adjunto span {position: relative}
#docentes article ul li.adjunto span div{
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: center;
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -ms-filter: grayscale(1);
    -o-filter: grayscale(1);
    filter: grayscale(1);
    transition: all .3s;
    background-size: cover;
    background-repeat: no-repeat;
}
#docentes article ul li.adjunto span hgroup {
    opacity: 0;
    transition: .3s;
    position: absolute;
    top: 50%;
    width: 100%;
    height: 7rem;
}
#docentes article ul li.adjunto span hgroup h1{
    text-align: center;
    color: #fff;
    font-size: 2.4rem;
}
#docentes article ul li.adjunto span hgroup h2{
    color: #fff;
    text-align: center;
    font-size: 1.6rem;
}
#docentes article ul li.adjunto:hover span hgroup { opacity: 1;}
#docentes article ul li.adjunto:hover span div {
    background-color: #A2305B;
    -webkit-background-blend-mode: soft-light;
    -moz-background-blend-mode: soft-light;
    -ms-background-blend-mode: soft-light;
    -o-background-blend-mode: soft-light;
    background-blend-mode: soft-light;
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -ms-filter: grayscale(0);
    -o-filter: grayscale(0);
    filter: grayscale(0);
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -ms-filter: blur(2px);
    -o-filter: blur(2px);
    filter: blur(2px);
}

/*ESTILOS DOCENTES*/
#docentes article ul:last-child { height: 40rem;clear: both;}
#docentes article ul:last-child li {
    transition: all .3s;
    position: relative;
    width: 11.4%;
    margin: .3rem .5rem;
    height: 100%;
    float: left;
    overflow: hidden;
}
#docentes article ul:last-child li div {
    transition: all .3s;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
}
#docentes article ul:last-child li hgroup {
    transition: all .3s;
    opacity: 0;
    position: absolute;
    top: 60%;
    width: 100%;
    height: 10rem;
}
#docentes article ul:last-child li hgroup h1{
    color: #fff;
    text-align: center;
    padding: .5rem;
    font-size: 2rem;
}
#docentes article ul:last-child li hgroup h2{
    color: #fff;
    text-align: center;
    padding: 0rem .5rem;
    font-size: 1.4rem;
}
.contacto {
    position: relative!important;
    width: 3rem !important;
    height: 3rem !important;
    top: 50%;
    left: 50%;
    margin: -1.5rem;
}
.contacto li {
    opacity: 0;
    width: 3.5rem !important;
    height: 3.5rem !important;
    position: absolute !important;
    border: .2rem solid #fff;
    border-radius: 100%;
    cursor: pointer;
}
.contacto li img { width: 90%; margin: 2%;}
.contacto li:nth-child(1) { top: -2rem; left: -4rem;}
.contacto li:nth-child(2) { top: -6rem; left: -1rem;}
.contacto li:nth-child(3) { top: -2rem; left: 2rem;}
.contacto li:hover {background: rgba(255, 255, 255, 0.4)}

#docentes article ul:last-child>li div {
    background: #A2305B center no-repeat;
    background-size: cover;
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -ms-filter: grayscale(1);
    -o-filter: grayscale(1);
    filter: grayscale(1);
    transition: all .3s;
}
#docentes article ul:last-child>li:nth-child(1) div { background-image: url(../imagenes/docentes/doc01.jpg); }
#docentes article ul:last-child>li:nth-child(2) div { background-image: url(../imagenes/docentes/doc02.jpg); }
#docentes article ul:last-child>li:nth-child(3) div { background-image: url(../imagenes/docentes/doc03.jpg); }
#docentes article ul:last-child>li:nth-child(4) div { background-image: url(../imagenes/docentes/doc04.jpg); }
#docentes article ul:last-child>li:nth-child(5) div { background-image: url(../imagenes/docentes/doc01.jpg); }
#docentes article ul:last-child>li:nth-child(6) div { background-image: url(../imagenes/docentes/doc02.jpg); }
#docentes article ul:last-child>li:nth-child(7) div { background-image: url(../imagenes/docentes/doc03.jpg); }
#docentes article ul:last-child>li:nth-child(8) div { background-image: url(../imagenes/docentes/doc04.jpg); }

#docentes article ul:last-child li:hover hgroup { opacity: 1 !important;}
#docentes article ul:last-child>li:hover div {
    -webkit-background-blend-mode: soft-light !important;
    -moz-background-blend-mode: soft-light;
    -ms-background-blend-mode:soft-light;
    -o-background-blend-mode: soft-light;
    background-blend-mode: soft-light;
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -ms-filter: blur(2px);
    -o-filter: blur(2px);
    filter: blur(2px);}
#docentes article ul:last-child li:hover ul.contacto li { opacity: 1!important;}

/****************************************HABITAR(MOSAICO)******************************************/
#habitar aside { width: 33%; float: right;}
#habitar article, #habitar aside {
    -webkit-animation: aparicion 3s;
    -moz-animation: aparicion 3s;
    -ms-animation: aparicion 3s;
    -o-animation: aparicion 3s;
    animation: aparicion 3s;
}
#habitar article h1 {
    padding: 1rem 0rem;
    font-size: 2rem;
}
#habitar article section {
    width: 100%;
    height: 50rem;
}
#habitar article section ul {
    position: relative;
    width: 100%;
    height: 100%;
}
#habitar article section#mosaico02 { display: none; background: url(../imagenes/iconos/utiles/cargaVerde.gif) no-repeat center;}
#habitar article section#mosaico02 ul { display: none; }
/*imagenes de los mosaicos de habitar */
/*Primer mosaico*/
#habitar article section#mosaico01 ul li:nth-child(1) div { background-image: url(../imagenes/notas/nota14.jpg);}
#habitar article section#mosaico01 ul li:nth-child(2) div { background-image: url(../imagenes/notas/nota02.jpg);}
#habitar article section#mosaico01 ul li:nth-child(3) div { background-image: url(../imagenes/notas/nota03.jpg);}
#habitar article section#mosaico01 ul li:nth-child(4) div { background-image: url(../imagenes/notas/nota04.jpg);}
#habitar article section#mosaico01 ul li:nth-child(5) div { background-image: url(../imagenes/notas/nota05.jpg);}
#habitar article section#mosaico01 ul li:nth-child(6) div { background-image: url(../imagenes/notas/nota06.jpg);}
#habitar article section#mosaico01 ul li:nth-child(7) div { background-image: url(../imagenes/notas/nota07.jpg);}
/*segundo mosaico*/
#habitar article section#mosaico02 ul li:nth-child(1) div { background-image: url(../imagenes/notas/nota01.jpg);}
#habitar article section#mosaico02 ul li:nth-child(2) div { background-image: url(../imagenes/notas/nota03.jpg);}
#habitar article section#mosaico02 ul li:nth-child(3) div { background-image: url(../imagenes/notas/nota04.jpg);}
#habitar article section#mosaico02 ul li:nth-child(4) div { background-image: url(../imagenes/notas/nota05.jpg);}
#habitar article section#mosaico02 ul li:nth-child(5) div { background-image: url(../imagenes/notas/nota06.jpg);}
#habitar article section#mosaico02 ul li:nth-child(6) div { background-image: url(../imagenes/notas/nota13.jpg);}
/*tercer mosaico*/
#habitar article section#mosaico03 ul li:nth-child(1) div { background-image: url(../imagenes/notas/nota08.jpg);}
#habitar article section#mosaico03 ul li:nth-child(2) div { background-image: url(../imagenes/notas/nota09.jpg);}
#habitar article section#mosaico03 ul li:nth-child(3) div { background-image: url(../imagenes/notas/nota10.jpg);}
#habitar article section#mosaico03 ul li:nth-child(4) div { background-image: url(../imagenes/notas/nota11.jpg);}
#habitar article section#mosaico03 ul li:nth-child(5) div { background-image: url(../imagenes/notas/nota12.jpg);}
#habitar article section#mosaico03 ul li:nth-child(6) div { background-image: url(../imagenes/notas/nota13.jpg);}
#habitar article section#mosaico03 ul li:nth-child(7) div { background-image: url(../imagenes/notas/nota14.jpg);}
#habitar article section#mosaico03 ul li:nth-child(8) div { background-image: url(../imagenes/notas/nota15.png);}

/****************************************HABITAR(NOTA)******************************************/
#plenario hgroup h1{width: 62.5%}
#plenario hgroup p{width: 62.5%}

#plenario article section {
    width: 100%;
    min-height: 400px;
    clear: both;
}
#plenario article section>div:first-child {
    background: url(../imagenes/notas/nota14.JPG) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 40rem;
    position: relative;
}
#plenario article section>div:first-child span {
    opacity: 0;
    width: 96%;
    min-height: 5rem;
    bottom: 0;
    left: 0;
    padding: 2%;
    position: absolute;
    transition: .3s;
    color: #fff;
    font-size: 1.6rem;
}
#plenario article section>div:first-child:hover span {     opacity: 1;}

#plenario article section hgroup {
    width: 100%;
    min-height: 80rem;
}
#plenario article section hgroup div:first-child {
    width: 38%;
    margin:  .5rem 1rem .5rem 0rem;
    float: left;
    font-size: 3.4rem;
    text-align: right;
}
#plenario article section hgroup div:last-child {
    width: 58%;
    margin: .5rem 0rem .5rem 1rem;
    float: left;
}
#plenario article section hgroup div:last-child p{
    text-align: justify;
    width: 100%;
    font-size: 1.6rem;
    line-height: 140%;
    margin-bottom: 1rem;
}
#plenario article section hgroup div:last-child p span {
    margin: 1rem 0rem;
}
#plenario aside {
    width: 33%;
    float: right;
}

#plenario article section#comentarios hgroup:nth-child(4) div span { background-image: url(../imagenes/usuarios/usuario06.jpg);}
#plenario article section#comentarios hgroup:nth-child(5) div span { background-image: url(../imagenes/usuarios/usuario03.jpg);}

#social {
    border-top: solid 1px #ddd;
    border-bottom: solid 1px #ddd;
    margin: 1rem 0rem;
    height: 9.2rem; 
}
#social h2 {
    padding: .5rem;
    border-bottom: solid 1px #ddd;
}
#social ul li { float: left !important; margin-top: .5rem;}
#social ul li span { width: 3.5rem; height: 3.5rem;}
#social ul li p { opacity: 0; transition: all .5s;}
#social ul li:hover p {opacity: 1;}
#social ul li:nth-child(1) {
    width: 30%;
    border-right:1px solid #ddd;
}
#social ul li:nth-child(1) span {
    margin: 0rem 1rem;
    width: 5rem;
    height: 5rem;
    float: left !important;
    background: url(../imagenes/iconos/ic_Coment-claro.png) center no-repeat;
    background-size: cover;
}
#social ul li:nth-child(1) p {
    opacity: 1;
    margin: 2rem 0rem;
    font-size: 1.6rem;
    float: left !important;
    width: 10rem !important;
}
#social ul li:nth-child(2) {
    width: 30%;
    border-right: 1px solid #ddd;
}
#social ul li:nth-child(2) span {
    margin: 0rem 1rem;
    width: 5rem;
    height: 5rem;
    float: left;
    background: url(../imagenes/iconos/ic_Compartir-claro.png) center no-repeat;
    background-size: cover;
}
#social ul li:nth-child(2) p {
    width: 10rem !important;
    opacity: 1;
    margin: 2rem 0rem;
    font-size: 1.6rem;
    float: left;
}
#social ul li:nth-child(3) {
    cursor: pointer;
    width: 8%;
    margin-left: 2rem;
}
#social ul li:nth-child(3) span {
    border-radius: 100%;
    margin: .5rem auto;
    background: url(../imagenes/iconos/ic_FB.png) center no-repeat;
    background-size: cover;
    background-color:#ccc;
}
#social ul li:nth-child(3) p {
    text-align: center;
    font-size: 1.2rem;
}
#social ul li:nth-child(4) { cursor: pointer; width: 9%; }
#social ul li:nth-child(4) span {
    border-radius: 100%;
    margin: .5rem auto;
    background:url(../imagenes/iconos/ic_TW.png) center no-repeat;
    background-size: cover;
    background-color:#ccc;
}
#social ul li:nth-child(4) p {
    text-align: center;
    font-size: 1.2rem;
}
#social ul li:nth-child(5) { cursor: pointer; width: 9%; }
#social ul li:nth-child(5) span {
    border-radius: 100%;
    margin: .5rem auto;
    background:url(../imagenes/iconos/ic_GP.png) center no-repeat;
    background-size: cover;
    background-color:#ccc;
}
#social ul li:nth-child(5) p {
    text-align: center;
    font-size: 1.2rem;
}
#social ul li:nth-child(6) { cursor: pointer; width: 9%; }
#social ul li:nth-child(6) span {
    border-radius: 100%;
    margin: .5rem auto;
    background:url(../imagenes/iconos/ic_Mensaje.png) center no-repeat;
    background-color:rgba(0,0,0,.2);
    background-size: cover;
}

#social ul li:nth-child(6) p {
    text-align: center;
    font-size: 1.2rem;
}
#comentarios {
    width: 100%;
    margin-top: 3rem;
}
#comentarios h1 {
    width: 100%;
    padding: 1rem;
    font-size: 3rem;
    margin-bottom: .1rem solid #ddd;
}
#comentarios hgroup {
    position: relative;
    margin: 1rem 0rem 2rem 0rem;
    width: 100%;
    min-height: 13rem !important;
}
#comentarios hgroup div {
    position: absolute;
    top: 1.5rem;
    left: 0;
    width: 15% !important;
    height: 10rem;
}
#comentarios hgroup div>span {
    width: 4.5rem;
    height: 4.5rem;
    border: 2px solid #fff;
    background: url(../imagenes/sinPerfil.jpg);
    background-size: cover;
    background-position: center;
    border-radius: 100%;
    margin: auto;
}
#comentarios hgroup h2 {
    position: absolute;
    font-size: 1.6rem;
    width: 83%;
    top: 2rem;
    left: 8rem;
}
#comentarios hgroup div:last-child {
    position: absolute;
    width: 80% !important;
    top: 3.5rem;
    left: 12%;
}
#comentarios hgroup div:last-child p{
    padding: .5rem;
    font-size: 1.4rem !important;
    border-bottom: 1px dotted #ddd;
    margin: .5rem !important;
}
#comentarios hgroup div:last-child ul{
    width: 100%;
}
#comentarios hgroup div:last-child ul li {
    margin: 0rem .3rem;
    cursor: pointer;
    width: 2rem;
    height: 3rem;
    float: left;
}
#comentarios hgroup div:last-child ul li:first-child { text-align: right; width: 7rem; padding-top: .9rem; height: 2rem;}
#comentarios hgroup div:last-child ul li:last-child { text-align: left;  width: 8rem; padding-top: .9rem; height: 2rem;}
#comentarios hgroup div:last-child ul li:first-child:hover, #comentarios hgroup div:last-child ul li:last-child:hover { color: #00B1AB;}
 
#comentarios hgroup div:last-child ul li:nth-child(2) {background: url(../imagenes/iconos/mg.png) center no-repeat;background-size: cover; }
#comentarios hgroup div:last-child ul li:nth-child(3) {background: url(../imagenes/iconos/nmg.png) center no-repeat; background-size: cover;}


#comentarios hgroup:nth-child(2) {
    padding: 1.5rem 0rem;
    background: rgba(0,0,0,.05)
    
}
#comentarios hgroup:nth-child(2) div>span {
    width: 6rem;
    height: 6rem;
    border: 2px solid #fff;
    background: url(../imagenes/perfil.jpg);
    background-size: cover;
    background-position: center;
    border-radius: 100%;
    margin: auto;
}
#comentarios hgroup:nth-child(2) h2 {
    position: absolute;
    font-size: 1.8rem;
    width: 83%;
    top: 2rem;
    left: 15%;
}
#comentarios hgroup:nth-child(2) form {
    position: absolute;
    width: 83%;
    top: 4.5rem;
    left: 15%;
}
#comentarios hgroup:nth-child(2) form textarea {
    font-family: rajdhani;
    padding: .5rem 1rem;
    border: #ddd solid 1px;
    width: 95%;
    height: 5rem;
}
#comentarios hgroup:nth-child(2) form input {
    cursor: pointer;
    color: #fff;
    background: #ccc;
    border: 1px solid #eee ;
    margin: .5rem;
    width: 10rem;
    height: 3.5rem;
    padding: .5rem;
    float: right;
    transition: all .3s;
}
#comentarios hgroup:nth-child(2) form input:hover { background: #00B1AB; }
/****************************************Galeria(Mosaico)******************************************/
#galeria article { width: 100%;}
#galeria article ul { width: 100%; height: 5rem; margin-bottom: .5rem;}
#galeria article>ul>li { width: 5rem; height: 5rem; float: left; opacity: .7; transition: all .3s; cursor: pointer;}
#galeria article>ul>li:hover { opacity: 1;}
#galeria article>ul>li#caja { background: url(../imagenes/iconos/ic_Caja.png) no-repeat center; background-size: 130%;}
#galeria article>ul>li#mosaico { background: url(../imagenes/iconos/ic_Mosaico.png) no-repeat center; background-size: 120%;}

#galeria article section {
    width: 100%;
    height: 70rem;
}
#galeria article section ul {
    position: relative;
    width: 100%;
    height: 100%;
}

#galeria article section#mosaico01 ul li hgroup div, #galeria article section#mosaico03 ul li hgroup div {
    background-repeat: no-repeat;
    background-position: center;
}
/*primer mosaico*/
#galeria article section#mosaico01 ul li:nth-child(1) hgroup div,
#galeria article section#cajaTP01 ul li:nth-child(1) hgroup div
{background-image: url(../imagenes/galeria/img01.jpg)}
#galeria article section#mosaico01 ul li:nth-child(2) hgroup div,
#galeria article section#cajaTP01 ul li:nth-child(2) hgroup div
{background-image: url(../imagenes/galeria/img02.jpg)}
#galeria article section#mosaico01 ul li:nth-child(3) hgroup div,
#galeria article section#cajaTP01 ul li:nth-child(3) hgroup div
{background-image: url(../imagenes/galeria/img03.jpg)}
#galeria article section#mosaico01 ul li:nth-child(4) hgroup div,
#galeria article section#cajaTP01 ul li:nth-child(4) hgroup div
{background-image: url(../imagenes/galeria/img04.jpg); background-position: top;}
#galeria article section#mosaico01 ul li:nth-child(5) hgroup div,
#galeria article section#cajaTP01 ul li:nth-child(5) hgroup div
{background-image: url(../imagenes/galeria/img05.jpg)}
#galeria article section#mosaico01 ul li:nth-child(6) hgroup div,
#galeria article section#cajaTP01 ul li:nth-child(6) hgroup div
{background-image: url(../imagenes/galeria/img06.jpg)}
#galeria article section#mosaico01 ul li:nth-child(7) hgroup div,
#galeria article section#cajaTP01 ul li:nth-child(7) hgroup div
{background-image: url(../imagenes/galeria/img07.jpg)}
/*segundo mosaico*/
#galeria article section#mosaico03 ul li:nth-child(1) hgroup div,
#galeria article section#cajaTP02 ul li:nth-child(1) hgroup div
{background-image: url(../imagenes/galeria/img08.jpg)}
#galeria article section#mosaico03 ul li:nth-child(2) hgroup div,
#galeria article section#cajaTP02 ul li:nth-child(2) hgroup div
{background-image: url(../imagenes/galeria/img09.jpg)}
#galeria article section#mosaico03 ul li:nth-child(3) hgroup div,
#galeria article section#cajaTP02 ul li:nth-child(3) hgroup div
{background-image: url(../imagenes/galeria/img10.jpg)}
#galeria article section#mosaico03 ul li:nth-child(4) hgroup div,
#galeria article section#cajaTP02 ul li:nth-child(4) hgroup div
{background-image: url(../imagenes/galeria/img11.jpg)}
#galeria article section#mosaico03 ul li:nth-child(5) hgroup div,
#galeria article section#cajaTP02 ul li:nth-child(5) hgroup div
{background-image: url(../imagenes/galeria/img12.jpg)}
#galeria article section#mosaico03 ul li:nth-child(6) hgroup div,
#galeria article section#cajaTP02 ul li:nth-child(6) hgroup div
{background-image: url(../imagenes/galeria/img13.jpg)}
#galeria article section#mosaico03 ul li:nth-child(7) hgroup div,
#galeria article section#cajaTP02 ul li:nth-child(7) hgroup div
{background-image: url(../imagenes/galeria/img14.jpg); background-position: top;}
#galeria article section#mosaico03 ul li:nth-child(8) hgroup div,
#galeria article section#cajaTP02 ul li:nth-child(8) hgroup div
{background-image: url(../imagenes/galeria/img15.jpg); background-position: top;}
/****************************************Galeria(Caja)******************************************/
#cajaTP01,#cajaTP02 {
    float: right;
    width: 50% !important;
    height: 155rem !important;
}

#cajaTP01 ul,#cajaTP02 ul { position: inherit!important;}
#cajaTP01 ul li,#cajaTP02 ul li {
    position: relative;
    float: left;
    width: 50%;
    height: 40rem;
}
#cajaTP01 ul li hgroup,#cajaTP02 ul li hgroup {
    position: absolute;
    top: 0;
    left: 0;
    margin: .5rem;
    width: 96%;
    height: 97%;
}
#cajaTP01 ul li hgroup div:first-child,#cajaTP02 ul li hgroup div:first-child{
    position: absolute;
    top: 0;
    left: 0 ;
    width: 100%;
    height: 15rem;
}
#cajaTP01 ul li hgroup span,#cajaTP02 ul li hgroup span {
    position: absolute;
    left: 0;
    top: 15rem;
    width: 90% !important;
    opacity: 1 !important;
}
#cajaTP01 ul li hgroup span h4 , #cajaTP01 ul li hgroup span h2 , #cajaTP01 ul li hgroup span p,#cajaTP02 ul li hgroup span h4 , #cajaTP02 ul li hgroup span h2 , #cajaTP02 ul li hgroup span p {
    color: #999 !important;
    margin: .5rem 0rem !important;
    padding: 0 !important;
    opacity: 1 !important;
    display: block;
}
#cajaTP01 ul li hgroup span h2,#cajaTP02 ul li hgroup span h2  { font-size: 2rem; color: #EDA200 !important;}
#cajaTP01 ul li hgroup span p,#cajaTP02 ul li hgroup span p  { font-size: 1.4rem; }
#cajaTP01 ul li hgroup div:last-child,#cajaTP02 ul li hgroup div:last-child {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 15rem!important;
}

/****************************************CALENDARIO (PRINCIPAL)******************************************/
#calendario hgroup h1 { width: 66% !important;}
#calendario section {
    min-height: 30rem;
    float: left;
    margin-top: 2rem;
}
#calendario aside {
    margin-top: 2rem;
    float: right;
    width: 33%;
    min-height: 30rem;
}
#calendario aside hgroup:nth-child(2){ opacity: .75; min-height: 13rem !important;}
#calendario aside hgroup:nth-child(3){ opacity: .50; min-height: 8rem !important;}
#calendario section ul{
    margin-top: 1rem;
    width: 100%;
    min-height: 40rem;
}
#calendario section ul li {
    border: 2px #ccc dotted;
    height: 20rem;
    width: 100%;
    margin: .5rem 0rem;
}
#calendario section ul li.importante {
    border: 2px #EF7216 dotted;
    background: #eee;
}

#calendario section ul li>div:first-child{
    transition: all .3s;
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -ms-filter: grayscale(1);
    -o-filter: grayscale(1);
    filter: grayscale(1);
    width: 30%;
    height: 18rem;
    margin: 1rem;
    float: left;
    position: relative;
    z-index: 0;
    background-size: cover !important;
}
#calendario section ul li div:first-child span {
    cursor: pointer;
    transition: all .3s;
    opacity: 0;
    border: 2px solid #fff;
    background: rgba(255,255,255,.3);
    background-image: url(../imagenes/iconos/ic_Mas.png);
    background-size: cover;
    border-radius: 100%;
    width: 5rem;
    height: 5rem;
    top: 50%;
    left: 50%;
    margin: -2.5rem;
    position: absolute;
    z-index: 20;
}
#calendario section ul li>div:first-child div {
    transition: all .3s;
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0rem;
    left: 0rem;
    z-index: 10;
    background: rgba(239, 114, 22, 0.5) !important;
}
#calendario section ul li div:last-child{
    width: 65%;
    height: 18rem;
    margin: 1rem 0rem;
    float: left;
    position: relative;
}
#calendario section ul li div:last-child hgroup {
    height: 17rem;
    overflow: hidden;
    position: absolute;
    top: .5rem;
    left: .5rem;
    width: 90%;
}
#calendario section ul li div:last-child h1 {
    background: #EF7216;
    color: #fff;
    font-size: 3rem;
    position: absolute;
    top: .5rem;
    right:  .5rem;
    padding: 1rem;
    width: 3rem;
    height: 3rem;
}
#calendario section ul li div:last-child h4 {
    font-size: 1.2rem;
    width: 80%;
    margin-bottom: .5rem;
}
#calendario section ul li div:last-child h2 {
    font-size: 2rem;
    width: 80%;
    margin: 1rem 0rem;
}
#calendario section ul li div:last-child p {
    font-size: 1.4rem;
    width: 100%;
    margin-bottom: .5rem;
}

#calendario section ul li>div:first-child:hover {
    -webkit-background-blend-mode: soft-light;
    -moz-background-blend-mode: soft-light;
    -ms-background-blend-mode: soft-light;
    -o-background-blend-mode: soft-light;
    background-blend-mode: soft-light;
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -ms-filter: grayscale(0);
    -o-filter: grayscale(0);
}
#calendario section ul li>div:first-child:hover span { opacity: 1; }
#calendario section ul li>div:first-child:hover div { opacity: 1; }

#calendario section ul li:nth-child(1) div:first-child { background: url(../imagenes/notas/calendario01.JPG);}
#calendario section ul li:nth-child(2) div:first-child { background: url(../imagenes/notas/calendario02.jpg);}
#calendario section ul li:nth-child(3) div:first-child { background: url(../imagenes/notas/calendario03.jpg);}
#calendario section ul li:nth-child(4) div:first-child { background: url(../imagenes/notas/calendario04.jpg);}
/****************************************CALENDARIO (FECHA INTERNA)******************************************/
#calendarioFecha article section {
    width: 100%;
    min-height: 60rem;
    float: left;
}
#calendarioFecha article section div:nth-child(2) {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 25rem;
    background: url(../imagenes/notas/calendario03.jpg) center no-repeat;
    background-size: cover;
}
#calendarioFecha article section:nth-child(1) hgroup { width: 60%; float: right; margin-top: 1rem;}
#calendarioFecha article section:nth-child(1) hgroup h1{ font-size: 2rem;}
#calendarioFecha article section:nth-child(1) hgroup p { font-size: 1.4rem; font-family: sans-serif; margin: .5rem 0rem;text-align: justify;}
#calendarioFecha article section:nth-child(1) hgroup:nth-child(4) { width: 37%; float: left;}
#calendarioFecha article section:nth-child(1) hgroup:nth-child(4) h4 { margin: 0rem 1rem; font-size: 3rem; text-align: right; color: #EF7216;}
#calendarioFecha aside {
    width: 33%;
    float: right;
    margin-top: 3rem;
}
#calendarioFecha aside hgroup {
    margin: 1rem;
    font-size: 2.32rem;
}

#calendarioFecha article section#comentarios hgroup:nth-child(4) div span { background-image: url(../imagenes/usuarios/usuario06.jpg);}
#calendarioFecha article section#comentarios hgroup:nth-child(5) div span { background-image: url(../imagenes/usuarios/usuario03.jpg);}
#calendarioFecha article section#comentarios hgroup:nth-child(6) div span { background-image: url(../imagenes/usuarios/usuario05.jpg);}
#calendarioFecha article section#comentarios hgroup:nth-child(7) div span { background-image: url(../imagenes/usuarios/usuario04.jpg);}


/****************************************LISTA DE FOROS******************************************/
#foro article{
    width: 100%;
    height: 60rem;
}
#foro article ul {
    background: #eee;
    border-radius: 100%;
    margin: 0rem auto;
    width: 50rem;
    height: 50rem;
    position: relative;
}
#foro article ul li {
    transition: all .3s;
    width: 20rem;
    height: 20rem;
    position: absolute;
    background-size: 95% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    cursor: pointer;
}
#foro article ul li h1 { transition: all .3s;}
#foro article ul li:hover {background-size: 100% !important;}

#foro article ul li:nth-child(1) {
    top: 20rem;
    left: -8rem;
    width: 35rem;
    height: 35rem;
    background: url(../imagenes/foros/foro01.png)
}
#foro article ul li:nth-child(1) h1 {
    text-align: center;
    color: #fff;
    margin: 15rem 15rem 15rem 5rem;
    font-size: 2.5rem;
    width: 25rem;
    height: 10rem;
}
#foro article ul li:nth-child(1):hover h1 {font-size: 3rem;}
#foro article ul li:nth-child(2) {
    top: -15rem; 
    left: 20rem; 
    width: 45rem; 
    height: 45rem; 
    background: url(../imagenes/foros/foro02.png)
}
#foro article ul li:nth-child(2) h1 {
    text-align: center;
    color: #fff;
    margin: 19rem 5rem 15rem 10rem;
    font-size: 3.5rem;
    width: 25rem;
    height: 10rem;
}
#foro article ul li:nth-child(2):hover h1 {font-size: 4rem;}
#foro article ul li:nth-child(3) { 
    top: 21rem; 
    left: 21rem; 
    width: 40rem; 
    height: 40rem; 
    background: url(../imagenes/foros/foro03.png)
}
#foro article ul li:nth-child(3) h1 {
    text-align: center;
    color: #fff;
    margin: 16rem 5rem 15rem 7rem;
    font-size: 3.5rem;
    width: 25rem;
    height: 10rem;
}
#foro article ul li:nth-child(3):hover h1 {font-size: 4rem;}
#foro article ul li:nth-child(4) { 
    top: 7rem; 
    left: -9rem; 
    width: 25rem; 
    height: 25rem; 
    background: url(../imagenes/foros/foro04.png)
}
#foro article ul li:nth-child(4) h1 {
    text-align: center;
    color: #fff;
    margin: 11rem 0rem 0rem 2rem;
    font-size: 2.5rem;
    width: 14rem;
    height: 5rem;
}
#foro article ul li:nth-child(4):hover h1 {font-size: 3rem;}
#foro article ul li:nth-child(5) { 
    top: 4rem; 
    left: 4rem; 
    width: 25rem; 
    height: 25rem; 
    background: url(../imagenes/foros/foro05.png)
}
#foro article ul li:nth-child(5) h1 {
    text-align: center;
    color: #fff;
    margin: 12rem 0rem 0rem 5.5rem;
    font-size: 2rem;
    width: 14rem;
    height: 5rem;
}
#foro article ul li:nth-child(5):hover h1 {font-size: 2.2rem;}
#foro article ul li:nth-child(6) { 
    top: -9rem; 
    left: 9rem; 
    width: 25rem; 
    height: 25rem; 
    background: url(../imagenes/foros/foro06.png)
}
#foro article ul li:nth-child(6) h1 {
    text-align: center;
    color: #fff;
    margin: 7.5rem 0rem 0rem 4.5rem;
    font-size: 2.1rem;
    width: 14rem;
    height: 5rem;
}
#foro article ul li:nth-child(6):hover h1 {font-size: 2.5rem;}
#foro article ul li:nth-child(7) { 
    top: 37rem; 
    left: 10rem; 
    width: 25rem; 
    height: 25rem;  
    background: url(../imagenes/foros/foro07.png)
}
#foro article ul li:nth-child(7) h1 {
    text-align: center;
    color: #fff;
    margin: 15rem 0rem 0rem 6rem;
    font-size: 3.5rem;
    width: 14rem;
    height: 5rem;
}
#foro article ul li:nth-child(7):hover h1 {font-size: 4rem;}
#foro article ul li:nth-child(8) { 
    top: 14rem; 
    left: 40rem; 
    width: 25rem; 
    height: 25rem; 
    background: url(../imagenes/foros/foro08.png)
}
#foro article ul li:nth-child(8) h1 {
    text-align: center;
    color: #fff;
    margin: 11rem 0rem 0rem 9.5rem;
    font-size: 2.2rem;
    width: 14rem;
    height: 5rem;
}
#foro article ul li:nth-child(8):hover h1 {font-size: 2.6rem;}


#ingresaForo {
    top: 0rem;
    right: 1rem;
    position: absolute;
    width: 5rem;
    height: 5rem;
    background: #eee;
    border-radius: 100%;
    background-image: url(../imagenes/iconos/ic_Mas.png);
    background-size: cover;
    transition: all .3s;
    cursor: pointer;
}
#ingresaForo h2 {
    font-size: 1.2rem;
    text-align: center;
    margin-top: 7rem;
    opacity: 0;
    transition: all .3s;
}
#ingresaForo:hover { top: -.5rem; right: .5rem; width: 6rem; height: 6rem; background-color:rgba(153, 134, 117, 0.3);}
#ingresaForo:hover h2 { opacity: 1;}

/****************************************FOROS APUNTES******************************************/
#foroInt aside, #nuevoForo aside{
    width: 33%;
    float: right;
    margin-top: .5rem;
}
#foroInt aside h1, #nuevoForo aside h1 {
    margin: 1rem;
    font-size: 2rem;
}
#foroInt aside p, #nuevoForo aside p {
    font-family: sans-serif;
    margin: 1rem;
    font-size: 1.2rem;
}
#foroInt article {
    width: 66%;
    float: left;
}
#foroInt article section ul li{
    position: relative;
    margin: .5rem;
    width: 31%;
    height: 30rem;
    float: left;
    background: #eee;
}
#foroInt article section ul li hgroup {
    transition: .3s;
    background: none;
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 80%;
    padding: 1rem;
    height: 26rem;
    position: relative;
}
#foroInt article section ul li hgroup h4{
    font-size: 1.2rem;
    margin: 0rem 0rem .5rem 0rem;
    color: #fff;
}
#foroInt article section ul li hgroup h2{
    cursor: pointer;
    font-size: 2rem;
    margin: 1rem 0rem; 
    color: #fff;
}
#foroInt article section ul li hgroup p{
    transition: .3s;
    opacity: 0;
    font-size: 1.4rem;
    margin: .5rem 0rem;
    color: #fff;
}
#foroInt article section ul li hgroup span {
    transition: .3s;
    font-size: 1.6rem;
    color: #fff;
    width: 90%;
    height: 1rem;
    position: absolute;
    bottom: 1.5rem;
    opacity: 0;
}
#foroInt article section ul li hgroup span img {
    width: 2rem;
    height: 2rem;
    float: left;
    margin: -.2rem .5rem;
}
#foroInt article section ul li:hover hgroup { background: rgba(153, 134, 117, 1);}
#foroInt article section ul li:hover hgroup p {opacity: 1;}
#foroInt article section ul li:hover hgroup span {opacity: 1;}
#foroInt article section ul li:hover div { -webkit-filter: grayscale(1); filter: grayscale(1);}
#foroInt article section ul li div {
    transition: all .3s;
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background-size: cover !important;
}
#foroInt article section ul li:nth-child(1) div { background: url(../imagenes/foros/img01.jpg) center no-repeat}
#foroInt article section ul li:nth-child(2) div { background: url(../imagenes/foros/img02.jpg) center no-repeat}
#foroInt article section ul li:nth-child(3) div { background: url(../imagenes/foros/img03.jpg) center no-repeat}
#foroInt article section ul li:nth-child(4) div { background: url(../imagenes/foros/img04.jpg) center no-repeat}
#foroInt article section ul li:nth-child(5) div { background: url(../imagenes/foros/img05.jpg) center no-repeat}
#foroInt article section ul li:nth-child(6) div { background: url(../imagenes/foros/img01.jpg) center no-repeat}
#foroInt article section ul li:nth-child(7) div { background: url(../imagenes/foros/img02.jpg) center no-repeat}
#foroInt article section ul li:nth-child(8) div { background: url(../imagenes/foros/img03.jpg) center no-repeat}

/****************************************FORO AVENTURA******************************************/
#bajadaForo {
    width: 100%;
    height: 14rem;
    clear: both;
    margin-bottom: 1rem;
}
#bajadaForo>div { float: left;}
#bajadaForo>div:nth-child(1) { width: 50%;}
#bajadaForo>div:nth-child(2) { width: 25%;}
#bajadaForo>div:nth-child(3) { width: 25%;}

#bajadaForo>div:nth-child(1) h1 {
    font-size: 2rem;
    border-left: .1rem solid #ccc;
    padding: 0rem 1rem;
}
#bajadaForo>div:nth-child(1) h2 {
    line-height: 140%;
    font-size: 1.4rem;
    border-left: .1rem solid #ccc;
    padding: 1rem;
}
#bajadaForo>div:nth-child(2) ul { padding: 1rem; }
#bajadaForo>div:nth-child(2) ul li{ width: 100%; height: 5rem; clear: both; margin: 0rem 0rem 1rem 0rem;}
#bajadaForo>div:nth-child(2) ul li div {
    float: left;
    border-radius: 100%;
    width: 5rem;
    height: 5rem;
    background: #eee;
}
#bajadaForo>div:nth-child(2) ul li:nth-child(1) div { background-image: url(../imagenes/perfil.jpg); background-size: cover;}
#bajadaForo>div:nth-child(2) ul li:nth-child(2) div { background-image: url(../imagenes/sinPerfil.jpg); background-size: cover;}

#bajadaForo>div:nth-child(2) ul li h3 {
    font-size: 1.4rem;
    float: left;
    width: 60%;
    margin: 1rem 0rem 0rem .5rem;
}
#bajadaForo>div:nth-child(2) ul li h3 span { font-size: 1.2rem; margin-bottom: .2rem; }

#bajadaForo>div:nth-child(3) ul { height: 7rem; padding: 1rem; border: .1rem solid #eee; overflow-y: scroll;}
#bajadaForo>div:nth-child(3) ul li{ width: 100%; height: 3rem; clear: both; margin: 0rem 0rem 1rem 0rem;}
#bajadaForo>div:nth-child(3) ul li div {
    float: left;
    border-radius: 100%;
    width: 3rem;
    height: 3rem;
    background: #eee;
}
#bajadaForo>div:nth-child(3) ul li h3 {
    color: #998675
    font-size: 1.2rem;
    float: left;
    width: 60%;
    margin: .7rem;
}
#bajadaForo>div:nth-child(3) h1 {
    font-size: 2rem;
    padding: 0rem 0rem 1rem 0rem;
}

#bajadaForo>div:nth-child(3) ul li:nth-child(1) div { background-image: url(../imagenes/perfil.jpg); background-size: cover; background-position: center;}
#bajadaForo>div:nth-child(3) ul li:nth-child(2) div { background-image: url(../imagenes/usuarios/usuario02.jpg); background-size: cover; background-position: center;}
#bajadaForo>div:nth-child(3) ul li:nth-child(3) div { background-image: url(../imagenes/usuarios/usuario04.jpg); background-size: cover; background-position: center;}
#bajadaForo>div:nth-child(3) ul li:nth-child(4) div { background-image: url(../imagenes/usuarios/usuario05.jpg); background-size: cover; background-position: center;}
#bajadaForo>div:nth-child(3) ul li:nth-child(5) div { background-image: url(../imagenes/usuarios/usuario06.jpg); background-size: cover; background-position: center;}
#bajadaForo>div:nth-child(3) ul a li div { background-image: url(../imagenes/usuarios/usuario01.jpg) !important; background-size: cover; background-position: center;}
#bajadaForo>div:nth-child(3) ul li:nth-child(7) div { background-image: url(../imagenes/usuarios/usuario09.jpg); background-size: cover; background-position: center top;}
#bajadaForo>div:nth-child(3) ul li:nth-child(8) div { background-image: url(../imagenes/usuarios/usuario11.jpg); background-size: cover; background-position: center top;}
#bajadaForo>div:nth-child(3) ul li:nth-child(9) div { background-image: url(../imagenes/usuarios/usuario07.jpg); background-size: cover; background-position: center top;}


#entradaForo { width: 100%; margin: 2rem 0rem;}
#entradaForo li { margin: 1rem; clear: both; min-height: 15rem;}

#entradaForo li:nth-child(2n+1) hgroup { float: left; }
#entradaForo li:nth-child(2n) hgroup { float: right; }

#entradaForo li hgroup:nth-child(1) { width: 20%;}
#entradaForo li hgroup:nth-child(1) div{
    width: 7rem;
    height: 7rem;
    border-radius: 100%;
    background: #eee;
     margin: 1rem auto;
}
#entradaForo li hgroup:nth-child(1) h2{
    font-size: 2rem;
    text-align: center;
}
#entradaForo li hgroup:nth-child(1) p{
    font-size: 1.4rem;
    text-align: center;
}
#entradaForo li hgroup:nth-child(1) p:last-child{ font-size: 1rem; margin-top: .5rem;}
#entradaForo li hgroup:nth-child(2) {
    width: 2rem;
    height: 2rem;
    margin-top: 3rem;
}
#entradaForo li:nth-child(2n+1) hgroup:nth-child(2) {
    background: url(../imagenes/iconos/ic_FlechaIz.png) no-repeat center;
    background-size: cover;
}
#entradaForo li:nth-child(2n) hgroup:nth-child(2) {
    background: url(../imagenes/iconos/ic_FlechaDr.png) no-repeat center;
    background-size: cover;

}

#entradaForo li hgroup:nth-child(3){
    margin: 2rem 0rem;
    padding: 2rem;
    width: 70%;
    background: #eee;
    border-radius: 1rem;
    font-size: 1.4rem;
}

#entradaForo li:nth-child(1) hgroup:nth-child(1) div {
    background-image: url(../imagenes/usuarios/usuario01.jpg); background-size: cover; background-position: center;}
#entradaForo li:nth-child(2) hgroup:nth-child(1) div {
    background-image: url(../imagenes/usuarios/usuario05.jpg); background-size: cover; background-position: center;}
#entradaForo li:nth-child(3) hgroup:nth-child(1) div {
    background-image: url(../imagenes/usuarios/usuario04.jpg); background-size: cover; background-position: center;}
#entradaForo li:nth-child(4) hgroup:nth-child(1) div {
    background-image: url(../imagenes/perfil.jpg); background-size: cover; background-position: center;}
#entradaForo li:nth-child(5) hgroup:nth-child(1) div {
    background-image: url(../imagenes/usuarios/usuario09.jpg); background-size: cover; background-position: center top;}
#entradaForo li:nth-child(6) hgroup:nth-child(1) div {
    background-image: url(../imagenes/usuarios/usuario02.jpg); background-size: cover; background-position: center;}
#entradaForo li:nth-child(7) hgroup:nth-child(1) div {
    background-image: url(../imagenes/usuarios/usuario08.jpg); background-size: cover; background-position: center ;}
#entradaForo li:nth-child(8) hgroup:nth-child(1) div {
    background-image: url(../imagenes/usuarios/usuario11.jpg); background-size: cover; background-position: center ;}
#entradaForo li:nth-child(9) hgroup:nth-child(1) div {
    background-image: url(../imagenes/usuarios/usuario08.jpg); background-size: cover; background-position: center ;}
#entradaForo li:nth-child(10) hgroup:nth-child(1) div {
    background-image: url(../imagenes/usuarios/usuario07.jpg); background-size: cover; background-position: center ;}

#foroDato {
    border-bottom: 1px dotted #ccc;
    border-top: 1px dotted #ccc;
    margin: 2rem 0rem;
    padding: 1rem;
    height: 1.4rem;
}
#foroDato ul { width: 100%;}
#foroDato ul li {
    font-size: 1.4rem;
    width: 33%;
    float: left;
}
#foroDato ul li span {
    width: 2rem;
    height: 2rem;
    float: left;
    margin: -.2rem 1rem 0rem 0rem;
}

#foroDato ul li:nth-child(1) span { background-image: url(../imagenes/iconos/ic_Inicio.png); background-size: cover;}
#foroDato ul li:nth-child(2) span { background-image: url(../imagenes/iconos/ic_Comento.png); background-size: cover;}
#foroDato ul li:nth-child(3) span { background-image: url(../imagenes/iconos/ic_Charla.png); background-size: cover;}

#foroDato ul li p {
    color: #666;
    text-align: left;
    width: 80%;
    height: 2rem;
    float: left;
}
/****************************************FORO NUEVO******************************************/
#nuevoForo form hgroup {
    width: 50%;
    min-height: 10rem;
}
#nuevoForo form hgroup input {
    text-align: top ;
    border: none;
    font-family: 'rajdhani';
    font-size: 4rem;
    color: #998675;
    width: 100%;
    height: 10rem;
    padding: 1rem;
}

#nuevoForo form article {
    width: 66%;
    float: left;
    margin-top: 1rem;
}
#nuevoForo form article div {
    margin-bottom: 1rem;
    clear: both;
    padding: 0rem 1rem ;
}
#nuevoForo form article div:nth-child(1) {
    height: 7rem;
}
#nuevoForo form article div:nth-child(1) span {
    width: 100%;
    margin-bottom: 1rem;
}
#nuevoForo form article div:nth-child(1) span label { font-size: 1.4rem; margin-top: .5rem; clear: both; width: 100%; display: block;}
#nuevoForo form article div:nth-child(1) span input {
    color: #999;
    font-family:'rajdhani'; 
    float: left;
    margin: .5rem 1rem 1rem 0rem;
    font-size: 1.6rem;
    padding: .5rem;
    width: 90%;
    border: 1px solid #ddd;
    border-radius: .5rem;
}
#nuevoForo form article div:nth-child(1) select {
    color:  #999;
    font-family:'rajdhani'; 
    font-size: 1.6rem;
    padding: .5rem;
    width: 45%;
    float: left;
    margin-right: 1rem;
    border: 1px solid #ddd;
    border-radius: .5rem;
}
#nuevoForo form article div:nth-child(2) {height: 35rem;}
#nuevoForo form article div:nth-child(2) textarea {
    color:  #999;
    font-family:'rajdhani'; 
    font-size: 1.6rem;
    padding: .5rem;
    width: 90%;
    float: left;
    margin-top: 1rem;
    border: 1px solid #ddd;
    border-radius: .5rem;
    height: 30rem;
}
#nuevoForo form article div:nth-child(3) { height: 5rem;}
#nuevoForo form article div:nth-child(3) input {
    float: right;
    margin-right:5rem;
    height: 4rem;
    width: 25%;
    background: #999;
    border: none;
    transition:  all .3s;
    cursor: pointer;
    color:#fff;
}
#nuevoForo form article div:nth-child(3) input:hover {background: #998675;}
#nuevoForo form article div:nth-child(3) p {
    text-align: right;
    width: 60%;
    float: left;
    font-size: 1.2rem;
}

/****************************************MI PERFIL******************************************/
#perfil article {
    width: 66%;
    float: left;
}
#perfil aside {
    width: 33%;
    float: right;
}
#perfil aside hgroup {margin-bottom: 2rem;}
#perfil aside hgroup:first-child {margin-top: 5rem;}
#perfil aside hgroup div {
    margin-bottom: 2rem;
    transition: all .3s;
    width: 15rem; 
    height: 15rem;
    border-radius: 100%;
    background-image: url(../imagenes/perfil.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
}
#perfil aside hgroup div span {
    cursor: pointer;
    opacity: 0;
    transition: all .3s;
    border: 2px solid #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -2.5rem;
    background-color: rgba(255,255,255,.3);
    width: 5rem;
    height: 5rem;
    border-radius: 100%;
    background-image: url(../imagenes/iconos/ic_Calendario-blanco.png);
    background-repeat: no-repeat;
    background-size: 75%;
    background-position: center;
    
}
#perfil aside hgroup div:hover span{ opacity: 1;}
#perfil aside hgroup div:hover { border-radius: 1rem; -webkit-filter: grayscale(.5); margin-left: 1rem}

#perfil aside hgroup h3 {
    margin: .2rem 1rem;
    font-size: 2rem;
    text-align: left;
}
#perfil aside hgroup h3:first-child { text-align: left; margin-bottom: .5rem;}
#perfil aside hgroup p { font-size: 1.2rem; margin: .5rem 1rem; font-family: sans-serif; }

#perfil article>ul {
    width: 100%;
    height: 4rem;
    float: left;
}
#perfil article>ul li{
    cursor: pointer;
    width: 4rem;
    height: 4rem;
    float: left;
    background-color: #ccc;
}
#perfil article>ul li.ic_Select {background-color: #00B1AB;}
#perfil article>ul li:nth-child(1) { background-image: url(../imagenes/iconos/ic_Not.png); background-size: cover;}
#perfil article>ul li:nth-child(2) { background-image: url(../imagenes/iconos/ic_Mensaje.png); background-size: cover;}
#perfil article>ul li:nth-child(3) { background-image: url(../imagenes/iconos/ic_Calendario-blanco.png); background-size: 65%; background-repeat: no-repeat; background-position: center;}

#perfil article section {
    width: 100%;
    min-height: 60rem;
}
#notiPerfil {
    width: 100%;
    min-height: 10rem;
    clear: both;
    display: block;
}
#notiPerfil ul { width: 100%; padding-top: 1rem;}
#notiPerfil ul li {
    width: 100% !important;
    height: 10rem !important;
    margin: .5rem 0rem;
    background: #eee !important;
    cursor: pointer;
    transition: all .3s;
}

.titulo {
    font-size: 2rem;
    margin: 1rem 0rem;
    color: #00B1AB;
}
#notiPerfil ul li:nth-child(1):hover {background: #EDA200 !important;}
#notiPerfil ul li:nth-child(2):hover {background: #998675 !important;}
#notiPerfil ul li:nth-child(3):hover {background: #EDA200 !important;}
#notiPerfil ul li:nth-child(4):hover {background: #00B1AB !important;}
#notiPerfil ul li:nth-child(5):hover {background:  #998675 !important;}
#notiPerfil ul li:nth-child(6):hover {background:  #998675 !important;}
#notiPerfil ul li:hover hgroup h2 { color: #fff;}
#notiPerfil ul li:hover hgroup h1 { color: #fff;}

#notiPerfil ul li div {
    float: left;
    width: 15rem;
    height: 10rem;
    opacity: .5;
}

#notiPerfil ul li:nth-child(1) div {
    background-image: url(../imagenes/galeria/img01.jpg);
    background-size: cover;
    background-position: center;
    -webkit-filter: grayscale(1);
}
#notiPerfil ul li:nth-child(2) div {
    background-image: url(../imagenes/foros/img01.jpg);
    background-size: cover;
    background-position: center;
    -webkit-filter: grayscale(1);
}
#notiPerfil ul li:nth-child(3) div {
    background-image: url(../imagenes/galeria/img01.jpg);
    background-size: cover;
    background-position: center;
    -webkit-filter: grayscale(1);
}
#notiPerfil ul li:nth-child(4) div {
    background-image:  url(../imagenes/notas/nota02.jpg);
    background-size: cover;
    background-position: center;
    -webkit-filter: grayscale(1);
}
#notiPerfil ul li:nth-child(5) div {
    background-image: url(../imagenes/notas/nota03.jpg);
    background-size: cover;
    background-position: center;
    -webkit-filter: grayscale(1);
}
#notiPerfil ul li:nth-child(6) div {
    background-image: url(../imagenes/notas/nota03.jpg);
    background-size: cover;
    background-position: center;
    -webkit-filter: grayscale(1);
}
#notiPerfil ul li:hover div { -webkit-filter: grayscale(0); opacity: 1;}

#notiPerfil ul li hgroup {
    width: 65%;
    float: left;
    padding: 2rem;
}
#notiPerfil ul li hgroup h2 { font-size: 1.4rem;}
#notiPerfil ul li hgroup h1 { font-size: 2rem; }


#mail {
    clear: both;
    width: 100%;
    padding: 1rem 0rem;
    display: none;
}
#mail ul {
    width: 97%;
    clear: both;
    margin: .5rem 0rem;
}
#mail ul:nth-child(1) { height: 4rem; margin: 0;}
#mail ul:nth-child(1) li {
    cursor: pointer;
    width: 23%;
    margin: .5rem;
    height: 2rem;
    float: left;
}
#mail ul:nth-child(1) li span {
    text-align: center;
    border-radius: 100%;
    background: #00B1AB;
    height: 1.5rem;
    width: 1.5rem;
    padding: .5rem;
    color: #fff;
    font-size: 1.4rem;
    float: left;
    transition: all .3s;
}
#mail ul:nth-child(1) li:nth-child(2) span { background-image: url(../imagenes/iconos/ic_Mensaje.png); background-size: cover;}
#mail ul:nth-child(1) li:hover span {
    height: 1.6rem;
    width: 1.6rem;
    padding: .8rem;
}
#mail ul:nth-child(1) li h3 {
    text-align: left;
    height: 1.5rem;
    width: 1.5rem;
    padding: .5rem;
    color: #999;
    font-size: 1.4rem;
    float: left;
}
#mail ul:nth-child(1) li:hover h3 {
    padding: .8rem .5rem;
}

#mail ul:nth-child(2) {
    border-bottom: solid 1px #ccc;
    border-top: solid 1px #ccc;
    padding:  0rem;
    height: 2.3rem;
}
#mail ul:nth-child(2) li {
    transition: all .3s;
    cursor: pointer;
    width: 23.2%;
    float: left;
    height: 1.5rem;
    padding: .5rem;
}
#mail ul:nth-child(2) li:hover { background: #eee;}
#mail ul:nth-child(2) li  h3 {
    width: 100%;
    text-align:center; 
    font-size: 1.2rem;
}
#mail ul:nth-child(3) {
    margin-top: 2rem;
}
#mail ul:nth-child(3) li {
    width: 100%;
    height: 4rem;
    margin-bottom: .5rem;
    transition: all .3s;
    clear: both;
    cursor: pointer;
}
#mail ul:nth-child(3) li:hover { background-color: #eee;}

#mail ul:nth-child(3) li input {
    margin: 1.5rem 1rem;
    float: left;}
#mail ul:nth-child(3) li div {
    float: left;
    margin: 0rem 1rem;
    width: 6rem;
    height: 4rem;
}
#mail ul:nth-child(3) li div span {
    border-radius: 100%;
    width: 3rem;
    height: 3rem;
    margin: .5rem auto;
}
#mail ul:nth-child(3) li:nth-child(1) div span { background-image: url(../imagenes/usuarios/usuario06.jpg); background-size: cover; }
#mail ul:nth-child(3) li:nth-child(2) div span { background-image: url(../imagenes/usuarios/usuario02.jpg); background-size: cover; }
#mail ul:nth-child(3) li:nth-child(3) div span { background-image: url(../imagenes/usuarios/usuario08.jpg); background-size: cover; }
#mail ul:nth-child(3) li:nth-child(4) div span { background-image: url(../imagenes/usuarios/usuario04.jpg); background-size: cover; }
#mail ul:nth-child(3) li:nth-child(5) div span { background-image: url(../imagenes/usuarios/usuario05.jpg); background-size: cover; }
#mail ul:nth-child(3) li:nth-child(6) div span { background-image: url(../imagenes/usuarios/usuario09.jpg); background-size: cover; }
#mail ul:nth-child(3) li:nth-child(7) div span { background-image: url(../imagenes/usuarios/usuario06.jpg); background-size: cover; }
#mail ul:nth-child(3) li:nth-child(8) div span { background-image: url(../imagenes/usuarios/usuario10.jpg); background-size: cover; }
#mail ul:nth-child(3) li:nth-child(9) div span { background-image: url(../imagenes/usuarios/usuario04.jpg); background-size: cover; }
#mail ul:nth-child(3) li:nth-child(10) div span { background-image: url(../imagenes/usuarios/usuario09.jpg); background-size: cover; }


#mail ul:nth-child(3) li h2 {
    float: left;
    margin: 0rem 1rem;
    width: 10rem;
    height: 2rem;
    padding: .5rem;
    transition: all .3s;
}
#mail ul:nth-child(3) li:hover h2 { color: #00B1AB;}
#mail ul:nth-child(3) li p {
    float: left;
    margin: 0rem 1rem;
    width: 32rem;
    height: 2rem;
    padding: 1rem;
    font-size: 1.4rem;
}

#leticia>ul {
    width: 100%;
    height: 4rem;    
}
#leticia>ul li {
    background: none !important;
    width: 100% !important;
}
#leticia>ul li span {
    width: 3rem;
    height: 3rem;
    background-color: #ccc;
    border-radius: 100%;
    background-image: url(../imagenes/iconos/ic_Mensaje.png);
    background-size: cover;
    float: left;
    transition: all .3s;
}
#leticia section>h1 {
    margin: 2rem 0rem;
    font-size: 2rem;
    color: #00B1AB;
}
#leticia section ul {
    width: 100%;
    min-height: 40rem;
}
#leticia section ul li {
    overflow: hidden;
    position: relative;
    cursor: pointer;
    width: 48%;
    float: left;
    height: 15rem;
    margin: 0% 2% 2% 0%;
    z-index: 0;
}

#leticia section ul li span {
    -webkit-filter: grayscale(.6) !important; 
    z-index: 0;
    position: absolute;
    background: #eee;
    width: 100%;
    height: 15rem;
}
#leticia section ul li:nth-child(2) div {
    z-index: 1;
    position: absolute;
    background: rgba(237, 162, 0, 0.7);
    width: 100%;
    height: 15rem;
}
#leticia section ul li:nth-child(2) span {
    background-image: url(../imagenes/galeria/img02.jpg);
    background-size: cover;
    background-position: center;
}
#leticia section ul li:nth-child(3) span {
    background-image: url(../imagenes/notas/calendario01.JPG);
    background-size: cover;
    background-position: center;
}
#leticia section ul li:nth-child(3) div {
    z-index: 1;
    position: absolute;
    background: rgba(239, 114, 22, 0.7);
    width: 100%;
    height: 15rem;
}
#leticia section ul li:nth-child(4) span {
    background-image: url(../imagenes/notas/nota02.jpg);
    background-size: cover;
    background-position: center;
}
#leticia section ul li:nth-child(4) div {
    z-index: 1;
    position: absolute;
    background: rgba(0, 177, 171, 0.7);
    width: 100%;
    height: 15rem;
}
#leticia section ul li:nth-child(5) span {
    background-image: url(../imagenes/galeria/img12.jpg);
    background-size: cover;
    background-position: center;
}
#leticia section ul li:nth-child(5) div {
    z-index: 1;
    position: absolute;
    background: rgba(237, 162, 0, 0.7);
    width: 100%;
    height: 15rem;
}
#leticia section ul li:nth-child(6) span {
    background-image: url(../imagenes/galeria/img08.jpg);
    background-size: cover;
    background-position: center;
}
#leticia section ul li:nth-child(6) div {
    z-index: 1;
    position: absolute;
    background: rgba(237, 162, 0, 0.7);
    width: 100%;
    height: 15rem;
}
#leticia section ul li:nth-child(7) span {
    background-image: url(../imagenes/galeria/img01.jpg);
    background-size: cover;
    background-position: center;
}
#leticia section ul li:nth-child(7) div {
    z-index: 1;
    position: absolute;
    background: rgba(237, 162, 0, 0.7);
    width: 100%;
    height: 15rem;
}

#leticia section ul li div {opacity: 0; transition: all .3s;}
#leticia section ul li:hover div { opacity: 1; }
#leticia section ul li:hover hgroup { opacity: 1; }
#leticia section ul li:hover span {-webkit-filter: grayscale(0) blur(2px) !important; }
 
#leticia section ul li:last-child hgroup { opacity: 1;}
#leticia section ul li:last-child:hover span, #leticia section ul li:first-child:hover span {-webkit-filter: grayscale(0) blur(0px) !important; }





#leticia section ul li hgroup { position: absolute; margin: 1rem; z-index: 3; opacity: 0; transition: all .3s;}
#leticia section ul li h2 { font-size: 1.4rem;color: #fff;}
#leticia section ul li h1 { font-size: 2rem; color: #fff;}

#leticia section ul li:first-child {
    height: 31rem;
}
#leticia section ul li:first-child span {
    border-radius: .5rem; 
    width: 100%;
    height: 100%;
    background-image: url(../imagenes/usuarios/usuario01.jpg);
    background-size: cover;
    background-position: center;
    -webkit-filter: grayscale(.5)
}


#leticiaMail {
    clear: both;
    margin: 2rem;
    width: 100%;
    height: 4rem;    
}
#leticiaMail li {
    margin-left: 1rem;
    cursor: pointer;
    background: none !important;
    width: 100% !important;
}
#leticiaMail li span {
    width: 3rem;
    height: 3rem;
    background-color: #ccc;
    border-radius: 100%;
    background-image: url(../imagenes/iconos/ic_Mensaje.png);
    background-size: cover;
    float: left;
    transition: all .3s;
}
#leticiaMail li p {
    transition: all .3s;
    width: 70%;
    float: left;
    margin: .7rem;
    font-size: 1.4rem !important;
}
#leticiaMail li:hover span { width: 3.5rem; height: 3.5rem;}
#leticiaMail li:hover p { font-size: 1.6rem !important; margin: 1rem .7rem;}

/**************************** MI TP ********************************/
#miTrabajo article{
    width: 64%;
    float: left;
    padding: 1rem;
}
#miTrabajo article section>div:first-child {
    width: 100%;
    height: 50rem;
    background: url(../imagenes/galeria/img01.jpg);
    background-size: cover;
}
#miTrabajo article section#comentarios hgroup:nth-child(3) div span { background-image: url(../imagenes/usuarios/usuario06.jpg); }
#miTrabajo article section#comentarios hgroup:nth-child(4) div span { background-image: url(../imagenes/usuarios/usuario01.jpg); }
#miTrabajo article section#comentarios hgroup:nth-child(5) div span { background-image: url(../imagenes/usuarios/usuario09.jpg); background-position: top;}
#miTrabajo article section#comentarios hgroup:nth-child(6) div span { background-image: url(../imagenes/usuarios/usuario04.jpg); }
#miTrabajo article section#comentarios hgroup:nth-child(7) div span { background-image: url(../imagenes/usuarios/usuario08.jpg); }
#miTrabajo article section#comentarios hgroup:nth-child(8) div span { background-image: url(../imagenes/usuarios/usuario07.jpg); }


#miTrabajo aside {
    width: 33%;
    float: right;
    margin-top: 4rem;
}
#miTrabajo aside hgroup {
    margin: 1rem 0rem 1rem 3rem;
}
#miTrabajo aside hgroup div{
    margin: 0rem -1rem 2rem -1rem;
    width: 100%;
    height: 12rem;
}
#miTrabajo aside hgroup div span {
    -webkit-filter: grayscale(.3);
    border-radius: 100%;
    background-image: url(../imagenes/perfil.jpg);
    background-size: cover;
    width: 12rem;
    height: 12rem;
}
#miTrabajo aside hgroup h3:first-child, #miTrabajo aside hgroup h3:nth-child(2){
    font-size: 2rem;
    margin: 2rem 0rem .2rem 0rem;
}
#miTrabajo aside hgroup h3 {
    font-size: 1.6rem;
    margin: .2rem 0rem;
}
#miTrabajo aside hgroup p {
    font-size: 1.2rem;
    font-family: sans-serif;
    margin: .5rem 0rem;

}


/**********************************************************************************/
/**************************** FIN PAGINAS INTERNAS ********************************/
/**********************************************************************************/
/************************* IDENTIFICADORES UNICOS ********************/
#loginDespliegue {
    z-index: 200;
    top: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    background: #eee;
    display: none;
}
#loginDespliegue img{
    cursor: pointer;
    width: 15rem;
    position: absolute;
    top: 15%;
    left: 50%;
    margin: 0rem -7.5rem;
}
#loginDespliegue form {
    width: 30rem;
    position: absolute;
    top: 30%;
    left: 50%;
    margin: 0rem -15rem;
}
#loginDespliegue form input {
    border-radius: .8rem;
    border: 1px solid #eee;
    font-size: 1.6rem;
    font-family: 'rajdhani';
    margin: .5rem;
    width: 94%;
    padding: 3%
}
#loginDespliegue form input:last-child {
    cursor: pointer;
    margin-top: 3rem;
    border-radius: 0px;
    width: 100%;
    color: #fff;
    background: #999;
}
#loginDespliegue form input:nth-child(3){ width: 2rem; float: left;}
#loginDespliegue form p {
    float: left;
    width: 80%;
    margin: .2rem;
    font-size: 1.4rem;
}
#ingresar {
    cursor: pointer;
    width: 4rem;
    height: 4rem;
    border-radius: 100%;
    border: 1px solid #fff;
    background-image: url(../imagenes/iconos/ic_Log.png);
    background-size: cover;
    margin: auto;
    display: none;
    z-index: 1000;
}
#ingresar.selecto {
    border: 1px solid #888 !important;
    background-color: #aaa;
    background-image: url(../imagenes/iconos/ic_Log.png);
    background-size: cover;
    margin: auto;
}
#barraCalendario {
    width: 100%;
    height: 4rem;
}
#barraCalendario li:first-child {
    width: 100%;
    height: 3rem;
    text-align: center;
    font-size: 2rem;
}
#barraCalendario li {
    float: left;
    cursor: pointer;
    width: 8%;
    height: 4rem;
    position: relative;
    z-index: 0;
    transition: .3s;
}
#barraCalendario li span{
    display: block;
    background: #EF7216;
    position: absolute;
    top: 3rem;
    left: 4rem;
    margin: -.25rem;
    width: .5rem;
    height: .5rem;
    transition: .3s;
}
#barraCalendario li span.ya {
    background: #ccc;
}
#barraCalendario li span.hoy {
    border-radius: 100%;
    top: 1rem;
    margin: -2rem;
    width: 4rem;
    height: 4rem;
}
#barraCalendario li span.hoy~p { color: #fff !important; }
#barraCalendario li p {
    font-size: 2rem;
    margin: -1rem -1rem; 
    position: absolute;
    top: 1rem;
    left: 4rem;
    transition: .3s;
}
#barraCalendario li:hover span {
    border-radius: 100%;
    top: 1rem;
    margin: -2rem;
    width: 4rem;
    height: 4rem;
}
#barraCalendario li:hover p {
    color: #fff;
}
#barraCalendario li:hover p.no {
    color: #ccc;
}


#miga { font-size: 1.2rem; margin: 1.5rem 0rem 1.5rem 0rem;}
#alertaCalendario {
    margin: 1rem;
    padding: 1rem;
    width: 90% !important;
    min-height: 18rem;
    background: #EF7216;
    margin-bottom: 1rem;
}
#alertaCalendario div {
    width: 22%;
    min-height: 10rem;
    display: block;
    float: left;
}
#alertaCalendario div span {
    display: block;
    margin: .5rem;
    width: 5rem;
    height: 5rem;
    border: .3rem solid #fff;
    border-radius: 100%;
    background: url(../imagenes/iconos/ic_Calendario-blanco.png) no-repeat center;
    background-size: 75%;
}
#alertaCalendario>h1 {
    float: left;
    margin: 0rem 0rem 0rem 1rem !important;
    color: #fff;
    font-size: 2rem;
}
#alertaCalendario p {
    width: 70%;
    float: left;
    font-size: 1.4rem;
    margin: 1rem 0rem 0rem 1rem !important;
    color: #fff;
}
/*Aside Ultimas noticias */
#grupoConImagen { width: 98%; padding: 1rem; clear: both;}
#grupoConImagen h1 {
    margin-bottom: 1rem ;
    font-size: 2rem;}
#grupoConImagen ul {
    width: 100%;
    height: auto;
}
#grupoConImagen ul li {
    height: 13rem !important;
    width: 96%;
    margin-bottom: 1rem;
    height: 7rem;
    float: left;
    cursor: pointer;
    transition: all .3s;
    position: relative;
    z-index: 0;
}
#grupoConImagen ul li div:first-child {
    opacity: .5;
    transition: .3s;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background-color: #00B1AB;
    background-size: cover;
    background-position: center;
    -webkit-filter: grayscale(1) blur(0px);
    -moz-filter: grayscale(1)  blur(0px);
    -ms-filter: grayscale(1) blur(0px);
    -o-filter: grayscale(1) blur(0px);
    filter: grayscale(1) blur(0px);
}
#grupoConImagen ul li:nth-child(1) div:first-child { background-image: url(../imagenes/notas/nota05.jpg); }
#grupoConImagen ul li:nth-child(2) div:first-child { background-image: url(../imagenes/notas/nota09.jpg); }
#grupoConImagen ul li:nth-child(3) div:first-child { background-image: url(../imagenes/notas/nota08.jpg); }

#grupoConImagen ul li div:last-child {
    transition: .3s;
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}
#grupoConImagen ul li span {
    transition: .3s;
    opacity: 0;
    width: 95%;
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 10;
}
#grupoConImagen ul li span p {
    color: #fff;
    width: 100%;
    margin-top: .5rem;
    font-size: 1.2rem;
}
#grupoConImagen ul li span h2 {
    color: #fff;
    width: 100%;
    margin-top: .5rem;
    font-size: 2rem;
}
#grupoConImagen ul li:hover div:first-child {
    opacity: 1;
    background-color: #00B1AB;
    background-size: cover;
    -webkit-filter: grayscale(0) blur(1px);
    -moz-filter: grayscale(0)  blur(1px);
    -ms-filter: grayscale(0) blur(1px);
    -o-filter: grayscale(0) blur(1px);
    filter: grayscale(0) blur(1px);
    -webkit-background-blend-mode: soft-light;
    -moz-background-blend-mode: soft-light;
    -ms-background-blend-mode: soft-light;
    -o-background-blend-mode: soft-light;
    background-blend-mode: soft-light;
}
#grupoConImagen ul li:hover div:last-child { opacity: 1; }
#grupoConImagen ul li:hover span { opacity: 1; }



/*Aside Mas visitados - Apuntes */
#grupoSinImagen { width: 98%; padding: 1rem; clear: both; }
#grupoSinImagen h1 {
    margin-bottom: 1rem ;
    font-size: 2rem;}
#grupoSinImagen ul {
    width: 100%;
    height: auto;
}
#grupoSinImagen ul li {
    width: 40%;
    margin: 0rem 1rem 1rem 0rem;
    padding: 1rem;
    height: 7rem;
    float: left;
    cursor: pointer;
    opacity: .7;
    transition: all .3s;
}
#grupoSinImagen ul li:hover { opacity: 1;}
#grupoSinImagen ul li:first-child { height: 15rem;}
#grupoSinImagen ul li h2 { color: #fff; }
#grupoSinImagen ul li p { color: #fff; margin-top: .5rem; font-size: 1.2rem;}
#grupoSinImagen ul li:first-child { height: 17rem;}
#grupoSinImagen ul li:first-child h2{ font-size: 2rem; margin-top: 4rem;}

/*mosaico1*/
#mosaico01 ul li:nth-child(1){ top: 0%; left: 0%;}
#mosaico01 ul li:nth-child(2){ top: 0%; left: 50%;}
#mosaico01 ul li:nth-child(3){ top: 0%; left: 75%;}
#mosaico01 ul li:nth-child(4){ top: 66%; left: 0%;}
#mosaico01 ul li:nth-child(5){ top: 33%; left: 50%;}
#mosaico01 ul li:nth-child(6){ top: 33%; left: 75%;}
#mosaico01 ul li:nth-child(7){ top: 66%; left: 75%;}
/*mosaico2*/
#mosaico02 ul li:nth-child(1){ top: 0%; left: 0%;}
#mosaico02 ul li:nth-child(2){ top: 0%; left: 25%;}
#mosaico02 ul li:nth-child(3){ top: 33%; left: 0%;}
#mosaico02 ul li:nth-child(4){ top: 66%; left: 0%;}
#mosaico02 ul li:nth-child(5){ top: 0%; left: 75%;}
#mosaico02 ul li:nth-child(6){ top: 33%; left: 25%;}
/*mosaico3*/
#mosaico03 ul li:nth-child(1){ top: 0%; left: 0%;}
#mosaico03 ul li:nth-child(2){ top: 0%; left: 25%;}
#mosaico03 ul li:nth-child(3){ top: 0%; left: 75%;}
#mosaico03 ul li:nth-child(4){ top: 33%; left: 0%;}
#mosaico03 ul li:nth-child(5){ top: 33%; left: 25%;}
#mosaico03 ul li:nth-child(6){ top: 33%; left: 75%;}
#mosaico03 ul li:nth-child(7){ top: 66%; left: 0%;}
#mosaico03 ul li:nth-child(8){ top: 66%; left: 50%;}
/*ver mas*/
#verMas {
    display: block;
    cursor: pointer;
    background: #ddd;
    margin: 1rem 0rem;
    padding: .5rem;
    width: 100%;
    height: 3.6rem;
    transition: all .3s;
}
#verMas h1 {
    height: 1.5rem;
    text-align: center;
    color: #fff;
    border: .1rem dotted #fff;
}
#verMas:hover { background: #eee; }
/*Tipos de cuadros del mosaico*/
#chico { width: 25%; height: 33%; }
#chico hgroup { margin: .5rem; height: 94%; width: 95%; overflow: hidden;}
#chico hgroup span {padding: 1rem !important; width: 90%;}
#chico hgroup span h4 { color: #fff; font-size: 1.2rem;}
#chico hgroup span h2 { color: #fff; font-size: 2.2rem; margin-top: .5rem;}
#chico hgroup span p { color: #fff; display: none;}

#grande { width: 50%; height: 66%;}
#grande hgroup { margin: .5rem; height: 97%; width: 97%;}
#grande hgroup span {padding: 1rem !important; width: 66%;}
#grande hgroup span h4 {color: #fff;font-size: 1.2rem;}
#grande hgroup span h2 {color: #fff;font-size: 3rem; margin-top: 1rem;}
#grande hgroup span p {color: #fff;font-size: 1.6rem; margin-top: 1rem;}

#ancho { width: 50%; height: 33%;}
#ancho hgroup {margin: .5rem; height: 94%; width: 97%; overflow: hidden;}
#ancho hgroup span {padding: 1rem !important; width: 90%;}
#ancho hgroup span h4 {color: #fff;font-size: 1.2rem;}
#ancho hgroup span h2 {color: #fff;font-size: 2.2rem; margin-top: .5rem;}
#ancho hgroup span p {color: #fff;font-size: 1.4rem; margin-top: 1rem;}

#alto { width: 25%; height: 66%; }
#alto hgroup {margin: .5rem; height: 97%; width: 95%;  overflow: hidden;}
#alto hgroup span {padding: 1rem !important; width: 80%; }
#alto hgroup span h4 { color: #fff; font-size: 1.2rem;}
#alto hgroup span h2 {color: #fff; font-size: 2.2rem; margin-top: .5rem;}
#alto hgroup span p { color: #fff; font-size: 1.4rem; margin-top: 1rem;}

/*************************Clases Standard********************/
.articuloChico { width: 50%; float: left;}
.articuloNotas { width: 62.5%; float: left;}
.articuloMediano { width: 66%; float: left;}

.leido{ background: #eee;}

.destacado {
    font-size: 2rem; 
    font-weight: 600; 
    font-family:'rajdhani'; 
    -webkit-line-height: 100%;
    line-height: 110%;
    line-height: 110%;
    line-height: 110%;
    word-break:normal;
}

/*Color de fuente*/
.habitarFont {color: #00B1AB}
.academicaFont {color: #006F8D}
.docentesFont {color: #A2305B}
.galeriaFont {color: #EDA200}
.calendarioFont {color: #EF7216}
.forosFont {color: #998675}

/*Color de fondo*/
.habitarBack { background-color: #00B1AB !important}
.academicaBack {background-color: #006F8D !important}
.docentesBack {background-color: #A2305B !important}
.galeriaBack {background-color: #EDA200 !important}
.calendarioBack {background-color: #EF7216 !important}
.forosBack {background-color: #998675 !important}

/*Color de fondo traslusidos*/
.habitarBackT { background: rgba(0, 177, 171, 0.3) !important}
.academicaBackT {background: rgba(0, 111, 141, 0.3) !important}
.docentesBackT {background: rgba(162, 48, 91, 0.3) !important}
.galeriaBackT {background: rgba(237, 162, 0, 0.3) !important}
.calendarioBackT {background: rgba(239, 114, 22, 0.3) !important}
.forosBackT {background: rgba(153, 134, 117, 0.3) !important}

/*Hover de la barra*/
.academicaH:hover { font-weight: 500; border-bottom: .2rem solid #006F8D}
.academicaH:hover a {color: #006F8D;}
.docentesH:hover { font-weight: 500; border-bottom: .2rem solid #A2305B}
.docentesH:hover a {color: #A2305B;}
.habitarH:hover { font-weight: 500; border-bottom: .2rem solid #00B1AB}
.habitarH:hover a {color: #00B1AB;}
.galeriaH:hover { font-weight: 500; border-bottom: .2rem solid #EDA200}
.galeriaH:hover a {color: #EDA200;}
.calendarioH:hover { font-weight: 500; border-bottom: .2rem solid #EF7216}
.calendarioH:hover a {color: #EF7216;}
.forosH:hover { font-weight: 500; border-bottom: .2rem solid #998675}
.forosH:hover a {color: #998675;}

/*marcar ubicacion en la barra*/
nav ul li.academicaS { font-weight: 500; border-bottom: .2rem solid #006F8D}
nav ul li.academicaS a {color: #006F8D;}
nav ul li.docentesS { font-weight: 500; border-bottom: .2rem solid #A2305B}
nav ul li.docentesS a {color: #A2305B;}
nav ul li.habitarS { font-weight: 500; border-bottom: .2rem solid #00B1AB}
nav ul li.habitarS a {color: #00B1AB;}
nav ul li.galeriaS { font-weight: 500; border-bottom: .2rem solid #EDA200}
nav ul li.galeriaS a {color: #EDA200;}
nav ul li.calendarioS { font-weight: 500; border-bottom: .2rem solid #EF7216}
nav ul li.calendarioS a {color: #EF7216;}
nav ul li.forosS { font-weight: 500; border-bottom: .2rem solid #998675}
nav ul li.forosS a {color: #998675;}

/*Efecto de transparencia de los mosaico*/
.efectoMosaico {position: absolute;}
.efectoMosaico hgroup {  position: relative; }
.efectoMosaico hgroup div {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-filter: grayscale(.7);
    -moz-filter: grayscale(.7);
    -ms-filter: grayscale(.7);
    -o-filter: grayscale(.7);
    filter: grayscale(.7);
    width: 100%;
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0;
}
.efectoMosaico hgroup div:first-child { z-index: 0;}
.efectoMosaico hgroup div:last-child { z-index: 5; opacity: 0; transition: all .3s;}
.efectoMosaico hgroup span { position: absolute; z-index: 10; opacity: 0; transition: all .3s;}
.efectoMosaico:hover hgroup span { opacity: 1;}
.efectoMosaico:hover hgroup div:last-child { opacity: 1;}
.efectoMosaico:hover hgroup div:first-child {
    -webkit-background-blend-mode: multiply;
    -moz-background-blend-mode: multiply;
    -ms-background-blend-mode: multiply;
    -o-background-blend-mode: multiply;
    background-blend-mode: multiply;
    -webkit-filter: grayscale(0) blur(1px);
    -moz-filter: grayscale(0) blur(1px);
    -ms-filter: grayscale(0) blur(1px);
    -o-filter: grayscale(0) blur(1px);
    filter: grayscale(0) blur(1px);
}


/*************************Media Querys********************/
/*PC grande*/
@media all and (min-width: 1400px){
    html{ font-size: 13px;}
    #login.no_login ul form div p input { margin: 0px 5px; height: 20px;}
    #login.no_login ul form div:last-child input {height: 3rem;}
}

/*PC standard*/
@media screen and (min-width: 967px) and (max-width: 1399px){
    html{ font-size: 11px;}
}

/*Tablet*/
@media screen and (min-width: 641px) and (max-width: 968px){
    html{ font-size: 10px;}
    #contenedor {
        width: 90%;
        min-width: 680px;
    }
    #login.no_login { padding: 1rem 0rem; height: 4rem; background-color: #ccc;}
    #login.no_login ul form { display: none;}
    /*Falta codigo*/
    header {
        min-width: 680px;
        height: 12rem;
        margin-top: 10rem;
        margin-bottom: 0rem;
    }
    header a { width: 100%; }
    header a hgroup { height: 8rem; width: 15rem; margin: auto;}
    header a hgroup h1 { font-size: 4rem; margin: .3rem 0rem 1px 0rem;}
    header a hgroup h2 { font-size: 2.9rem;}
    header a hgroup h4 { font-size: 1.8rem;}
    nav  { width: 100%; margin-top: 1rem; }
    
    
    #index article {
        height: 40rem;
        margin-top: 0rem !important;
    }
    #index article ul li hgroup div:last-child { opacity: 1 !important;}
    #index article ul li hgroup div {
    -webkit-background-blend-mode: darken !important;
    -moz-background-blend-mode: darken!important;
    -ms-background-blend-mode: darken !important;
    -o-background-blend-mode: darken !important;
    background-blend-mode: darken !important;
}
    #index article ul li hgroup span  { opacity: 1 !important;}
    #index article ul li hgroup span h2 { font-size: 2rem;}
    #index article ul li hgroup span p { font-size: 1.2rem;}
    #ingresar { display: block;}
    
    footer { width: 100%; padding-top: 1rem; }
    footer img { width: 4rem; margin: 1.5rem 1rem; }
}








/*Celular*/
@media screen and (max-width: 640px){
    html{ font-size: 10px;}
    #contenedor {
        width: 96%;
        min-width: 468px;
    }
    #login.no_login { padding: 1rem 0rem; height: 4rem; background-color: #ccc; min-width: 480px;}
    #login.no_login ul form { display: none;}
    
    header {
        min-width: 468px;
        height: 12rem;
        margin-top: 10rem;
        margin-bottom: 0rem;
    }
    header a { width: 100%; }
    header a hgroup { height: 8rem; width: 15rem; margin: auto;}
    header a hgroup h1 { font-size: 4rem; margin: .3rem 0rem 1px 0rem;}
    header a hgroup h2 { font-size: 2.9rem;}
    header a hgroup h4 { font-size: 1.8rem;}
    nav  { width: 100%; margin-top: 2rem; position: inherit;}
    nav ul {
        width: 100%;
    }
    nav ul li {
        width: 100% !important;
        clear: both;
        padding: 1rem 0rem;
        background: #eee;
    }
    
     #index article {
        height: 40rem;
        margin-top: 0rem !important;
    }
    #index article ul li hgroup div:last-child { opacity: 1 !important;}
    #index article ul li hgroup div {
    -webkit-background-blend-mode: darken !important;
    -moz-background-blend-mode: darken!important;
    -ms-background-blend-mode: darken !important;
    -o-background-blend-mode: darken !important;
    background-blend-mode: darken !important;
}
    #index article ul li hgroup span  { opacity: 1 !important;}
    #index article ul li hgroup span h2 { font-size: 2rem; width: 100%}
    #index article ul li hgroup span p { display: none;}
    #ingresar { display: block;}
    
    #index article.primero ul li:nth-child(1) { top: 0; left: 0; width: 50%; height: 50%;}
    #index article.primero ul li:nth-child(1) hgroup span h2 { font-size: 3rem;}
    #index article.primero ul li:nth-child(2) { top: 50%; left: 0; width: 50%; height: 25%;}
    #index article.primero ul li:nth-child(3) { top: 0%; left: 50%; width: 50%; height: 25%;}
    #index article.primero ul li:nth-child(4) { top: 25%; left: 50%; width: 50%; height: 25%;}
    #index article.primero ul li:nth-child(5) { top: 50%; left: 50%; width: 50%; height: 25%;}
    #index article.primero ul li:nth-child(6) { top: 75%; left: 0%; width: 51%; height: 25%;}
    #index article.primero ul li:nth-child(7) { top: 75%; left: 50%; width: 50%; height: 25%;}
    #index article.segundo ul li:nth-child(1) { top: 0; left: 0; width: 50%; height: 25%;}
    #index article.segundo ul li:nth-child(2) { top: 0%; left: 50%; width: 50%; height: 51%;}
    #index article.segundo ul li:nth-child(3) { top: 0%; left: 0%; width: 51%; height: 25%;}
    #index article.segundo ul li:nth-child(4) { top: 25%; left: 0%; width: 51%; height: 25%;}
    #index article.segundo ul li:nth-child(5) { top: 50%; left: 0%; width: 50%; height: 25%;}
    #index article.segundo ul li:nth-child(6) { top: 50%; left: 50%; width: 50%; height: 25%;}
    #index article.segundo ul li:nth-child(7) { top: 75%; left: 50%; width: 51%; height: 25%;}
    #index article.segundo ul li:nth-child(8) { top: 75%; left: 0%; width: 51%; height: 25%;}











    
    
    
    
    footer { width: 100%; padding-top: 1rem; }
    footer img { width: 4rem; margin: 1.5rem 1rem; }
    
    footer { width: 96%; padding: .5rem !important; font-size: 1.2rem !important;  }
    footer img { display: none;}
}



/*************************Animaciones********************/
@-webkit-keyframes xpand {
    0% {
        width: 3.5rem;
        height: 3.5rem;
        top: -.2rem;
        left: -.2rem;
        opacity: 0;
        border: .2rem solid #fff;
    }
    1% {
        width: 3.5rem;
        height: 3.5rem;
        top: -.2rem;
        left: -.2rem;
        opacity: 1;
        border: .2rem solid #fff;
    }
    100% {
        width: 5rem;
        height: 5rem;
        top: -.9rem;
        left: -.7rem;
        opacity: 0;
        border: .1rem solid #fff;
    }
}
@keyframes xpand {
    0% {
        width: 3.5rem;
        height: 3.5rem;
        top: 0rem;
        left: -.2rem;
        opacity: 0;
        border: .2rem solid #fff;
    }
    5% {
        width: 3.5rem;
        height: 3.5rem;
        top: -.15rem;
        left: -.2rem;
        opacity: 1;
        border: .2rem solid #fff;
    }
    100% {
        width: 5rem;
        height: 5rem;
        top: -.9rem;
        left: -.8rem;
        opacity: 0;
        border: .1rem solid #fff;
    }
}
@-webkit-keyframes aparicion { 
    0% {opacity: 0;}
    100% { opacity: 1;}
}
@-moz-keyframes aparicion { 
    0% {opacity: 0;}
    100% { opacity: 1;}
}
@-ms-keyframes aparicion { 
    0% {opacity: 0;}
    100% { opacity: 1;}
}
@-o-keyframes aparicion { 
    0% {opacity: 0;}
    100% { opacity: 1;}
}