@charset "utf-8";
/*CSS Document*/

/*COLORES*/

/*grises*/ #3c3c3c #6f6f6f #9c9c9c #bcbcbc #dadada #efefef
/*azules*/ #201a41 #44388d #00a8a8 #73c6cd
/*naranja y amarillo */ #ee731b #fde001


* {margin: 0; padding: 0}

html {
  background-color: #dddddd
}

body {
  font-family: "Lato", sans-serif;
  font-size: 90%;
  background-color: #fff;
  width: 80%;
  margin: auto
}

#cuerpo {
  clear: both;
  margin: auto;
  padding: .5em;
}

a {
    text-decoration: none; 
    color: black}

li { 
    list-style: none;}

p {    
    font-family: "lato", sans-serif;
    font-weight: 300;}


.logo {
  width: 35%;
  display: inline-block;
  float: left;
  margin: 1em 0em 1.5em 1.5em;
  padding-top: 1em;
}

ul {
    margin: 0; 
    padding: 0}



.destacados { background-color: #fff }


/******************************* HEADS ********************************/


h1 /*NOMBRE SECCION*/{ font-size: 2.2em; font-weight: 700; background-color:#44388d; color: white; text-align: center; padding: .2em; margin: .5em 0 0 }
h2 /*TITULOS*/ { font-size: 1.6em; color:#201a41; font-weight: 700; margin: 0; padding: 0 0 .5em;}
h3 /*SUBTIRULOS*/{ font-size: 1.3em; font-weight: 400; margin: 0; padding: .2em 0 .2em;}
h4 /*COPETE*/ { font-size: 1em; font-weight: 700; font-style: italic; margin: 0; padding: .5em 0 0 0;max-width: 35em;}
h5 /*BAJADA*/ { font-size: .9em; font-weight: 100; margin: 0; padding: 0.3em 0 0 0; border-top: .2em solid #201a41;}
h6 /*EPIGRAFE*/ { font-size: .7em; font-weight: 100; margin: 0; margin: 0; padding: 0;}
h7 /*DETALLES MAS CHICOS*/ { font-size: .8em; font-weight: 100; margin: 0; margin: 0; padding: 0}
h8 /* ITEMS*/ { font-size: 0.8em; font-weight: 700;font-style: normal;}

.italic {  
    font-style: italic;
    font-size: 0.8em;
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-color: #ccc;
    margin-top: 1em;
    margin-bottom: 1em;
}

.bold {
    font-weight: 700;
   
}

.italicless { font-style: normal }

#vinculo { color:#56539f; }

.margfoot { margin: 1em 0 .5em }

.h5aside { border-top: none }


/******************************* NAV TODOS ********************************/

/********************************************************************************AGREGUE OVERFLOW, TEXT ALLIGN, CAMBIE WIDTH A % PARA Q NO SALGA DEL CUERPO *************************************************************/

nav {
    margin: 0 auto;
    width: 100%;
    text-align: center;
    clear: both;
}

/********************************************************************************AGREGUE OVERFLOW, TEXT ALLIGN, CAMBIE WIDTH A % PARA Q NO SALGA DEL CUERPO *************************************************************/

nav ul {
	background: #efefef; 
	padding: 0px;  
	list-style: none;
	position: relative;
	display: inline-table;
    z-index: 10;
}
	nav ul:after {
		content: ""; clear: both; display: block;
	}

nav ul li {
	float: left;
}
	nav ul li:hover {
		background: #4b545f;
	}
		nav ul li:hover a {
			color: #fff;
		}
	
	nav ul li a {
		display: block; 
        padding: .7em 1.6em;
		color: #3c3c3b; 
        text-decoration: none;
	}

#participa {
    border-left: .5em solid #fff;
    background-color: #73c6cd;
    color: #fff;
}

#registrate {
    background-color: #73c6cd;
    color: #fff;
}

#participa:hover, #registrate:hover {background-color: #00a8a8;}

nav ul ul {
	background: #6f6f6e; 
    border-radius: 0px; 
    padding: 0;
	position: absolute; 
    top: 100%;
    display: none;
}

	nav ul li:hover > ul {
		display: block;
	}

	nav ul ul li {
		float: none; 
		border-top: 1px solid #201a41;
	    border-bottom: 1px solid #9c9c9c;
		position: relative;
	}
		nav ul ul li a {
			padding: .7em 1.6em;
			color: #fff;
		}	
			nav ul ul li a:hover {
				background: #3c3c3b;
			}


img {
  width: 100%;
  height: auto
}

header {
  margin: auto;
  clear: both;
  font-family: "lato", sans-serif;
}


    



/******************************* ASIDE TODOS ********************************/

.titaside { margin-top: 0 }

#botoneraderecha {
    width: 25%;
    list-style: none;
    text-align: center;
    background: #dadada; 
    margin-right: 1em;
    height: auto;
    margin-top: 1em;
}

.destacados { background-color: #efefef }

#botoneraderecha a {
    color: white;
    padding: .5em;
    display: block;
    color: black;
}

#aside-noticias a {text-align: left;}
#aside-noticias .bold {text-align: right; }

.nac { background-color: white;}

#aside-redes img { width: 20%; float: left; margin: 1em; padding-left: 2.5em }

.marginf { margin-bottom: .7em }

aside p {
    border-top: .4em solid #73c6cd  ;
    background-color: #44388d;
    padding: .5em;
    color: #fff;
}

#botoneraderecha {float: right}



/******************************* TABLA CALENDARIO ********************************/


table {
    width: 95%;
    border-collapse: separate;
    border: 1px solid #9DABCE;
    border-width: 0px 0px 1px 1px;
    margin: 10px auto;
    background-color: #fff
  }
  td, th {
    width: 3em;
    height: 2.5em;
    text-align: center;
    vertical-align: middle;
    color: #3c3c3c;
    border: solid;
    border-width: 1px;
    border-color: #ccc;
    position: relative;
  }

  th {
    font-weight: bold;
    font-size: 1em;
  }

  td:hover {
    background-color: #44388d;
    color: #fff;
  }

  td.date_has_event {
    background-position: 162px 0px;
    color: #ee731b;
  }

  td.date_has_event:hover {
    background-color: #ccc;
    border-bottom: .3em solid #ee731b;
  }
 
  td.today {
    background-color: #00a8a8;
    color: white;
  }
  td.today:hover {
    background-color: #bcbcbc;
    border-bottom: .3em solid #00a8a8
  }





/******************************* FOOTER TODOS ********************************/

footer {
    overflow: auto;
    background-color: #3c3c3c;
    padding: 1em 0em 0em;
    text-align: center;
    font-size: .8em;
    clear: both;
    color: #dadad9
}


.infofooter {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flexbox;
    width: 90%;
    margin: 0 auto;
    text-align: center;
    align-content: center;
}

.foot-links {
    padding: 0 1em;
    width: 30%;
}

.foot-links ul {
    list-style: none;
    padding: 2em 0;
    border-top-style: solid;
}

.foot-links li {
    font-size: 12px;
}

#contacto {
    text-align: left;
    text-indent: 1em;
    padding-left: 1em
}

.infofooter a {
    color: #aaa;
    font-size: 1.2em;
    line-height: 220%;
    text-decoration: none;
}

.infofooter a:hover {
     color: #fff   
}

.icon {
    width: 20px;
    height: 20px;
    float: left;
}

.mapa {
    width: 40%;
    margin: 1em;
    margin-left: 3em;
    padding:1em
        
}


#footer-text {background-color: #000; margin: 0; padding: 1.5em;}




/************************** INDEX *****************************/


.contenedor { margin-top: 1em }

#h1index { margin: 0 0 .5em; background-color: #ccc; font-size: 1.5em }


#filaindex {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flexbox;
    margin: 1em .5em
}

.newsindex {
    width: 33%;
    margin: 0 .5em; 
    padding-left: 1em;
    border-left: thin solid #ccc;
    border-top: thin solid #ccc;
}

#filaindex h5 { text-align: right; margin-bottom: 1em;}

.slick-slide { position: relative }

.slidertext { position: absolute; left: 1em; bottom: 1em; right: 1em; background-color: #fff; opacity: .65; padding: 1em; max-width: calc( 100% - 4em ); }

.slidertext>p, .slidertext>h2 { margin: 0 }




/************************** ACTIVIDADES *****************************/

#todoact { margin: 1em; }

.actividades {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flexbox;
}

.audiovisuales  { margin-right: .5em; }
.periodismo  { margin-left: .5em; }
.grafico  { margin-top: .8em; margin-right: .5em; }
.eventos  { margin-top: .8em; margin-left: .5em; }

.audiovisuales:hover {
    background-image: url(imagenes/actividades/audiovisualhover-01.jpg);
    background-size: contain;
    background-repeat: no-repeat
    }

.periodismo:hover {
    background-image: url(imagenes/actividades/redaccionhover.jpg);
    background-size: contain;
    background-repeat: no-repeat}

.grafico:hover {
    background-image: url(imagenes/actividades/graficohover-01.jpg);
    background-size: contain;
    background-repeat: no-repeat
}

.eventos:hover {
    background-image: url(imagenes/actividades/eventoshover-01.jpg);
    background-size: contain;
    background-repeat: no-repeat
}

#pact { max-width: 40em; }





/************************** PROYECTO *****************************/

#main-proy {
    margin: 1em;
    width: calc(75% - 3em);
    float: left
}


#imagen1 { margin-top: .5em; }

.texto {
    clear: both;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flexbox;
}

.primera {
    text-align: justify;
    line-height:1.1em;
    width: 49%;
    
}

.segunda {
    text-align: justify;
    line-height:1.1em;
    width: 49%;
    padding-left: 2em;
}

#h3top { margin-top: .7em; }



/**************************** NOSOTROS ********************************/

#main-nos { width: calc(75% - 3em); float: left; margin: 1em}

.h4nos {
  background-color: #e5e5e5;
  padding: .3em 1em;
  clear: both;
  max-width: none;
  margin-bottom: .5em;
}    


#fotolois {
    width: 43%;
    float: left;
    margin: 0 2em 2em;
}

#docentesresp {
    margin-left: 1em;
}

.fotodocente {
    width: 70%;
}

.docente {
    float: left;
    width: 30%;
    margin: 0 .8em 1.5em;
    
}

#section-eq {
  clear: both;
    margin-bottom: 1em;
}


#equipo {
  line-height: 120%;
  font-size: .8em;
  display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flexbox;
  margin-left: 2em;
}

#equipo ul {
  width: 50%;
}

#equipo li {
  border-bottom: solid;
  border-bottom-color: #c5c5c5;
  border-bottom-width: thin;
  margin-bottom: .5em;
  padding-bottom: .3em;
}

#equipo .bold {
  text-align: left;
  font-size: 1.2em; 
}




/***************************** OBJETIVOS ***************************/

#main-obj {
    width: calc(75% - 3em);
    float: left;
    margin: 1em 1em 0;
}

#sectionobj { margin-top: 2em; }

.bloq {
    background-color: #dadada;
    width: 50%
}

.objetivos1, .objetivos2 { margin-bottom: 1em; }

.img1 {
    background-image: url(imagenes/z06.jpg);
    background-size: cover;
    background-position: center;
    border-top: .5em solid #73c6cd;
    width: calc(50% + 2em)
}

.img2 {
    background-image: url(imagenes/z08.jpg);
    background-size: cover;
    background-position: center;
    border-top: .5em solid #ee731b;
    width: calc(50% + 2em)
}

.img3 {
    background-image: url(imagenes/z03.jpg);
    background-size: cover;
    background-position: center;
    border-top: .5em solid #44388d;
    width: calc(50% + 2em)
}

.linea { padding: .5em 1em }

.linea1 { border-top: .5em solid #73c6cd }
.linea2 { border-top: .5em solid #ee731b }
.linea3 { border-top: .5em solid #44388d }

.objetivos {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flexbox;
}

.verde {  }

#h2obj { margin-top: .5em }

#metas {
    clear: both;
    margin-bottom: .5em;
}

#metas>p { margin: .3em 0; }
#metas>h4 { max-width: none}



/******************************** NOTAS *************************/

.titulonoticia {margin-top: 2%;}

.copetenoticia {margin-bottom: 3%;}

.textonota{
-webkit-column-count: 2;
-moz-column-count: 2;
column-count:2;

-webkit-column-gap: 18px;
-moz-column-gap: 18px;
column-gap: 18px;
clear: both;
text-align: justify;}

#main-nota {
    width: calc(75% - 3em);
    float: left;
    margin-left: 1em;
}

#main-nota h5 { margin-top: 1em; }

#aside-notaremada {clear: both}

.subtitulo {margin-top: 3%;}

/******************************** NOTA FAMILIAS *************************/ 

.fotofamilias2 {width: 50%; float: left;}

    
/******************************** NOTA REMADA *************************/

span {font-weight: 700;}

#agradecimientos {
    padding: 1%;;
    border-color: #56539f;
    border-style: solid;
    margin-bottom: 1em;}



/******************************CONTACTO************************/

#formulariocontacto {background-color:#29235c;}

#titulocontacto{
    float: left;
    margin-left: 6%;}

form {
    font-family: "lato", sans-serif;
    font-size:.8em;
    font-weight: 700;
    color: #56539f;
    padding-bottom: 5%;
    padding-top: 2%;
    float: right;
    width: 50%;
}


input {border-radius: 5%}

textarea {border-color: #56539f;}

#enviar {
    background-color: #56539f;
    color: white;
    font-weight: 300;}

#googlemap2 {
    width: 29%;
    margin-left: 6%;
    margin-bottom: 6%;}








/****************************** AUDIOVISUAL ************************/

#audiovisual {margin-left: 1%;}

#portadaaudiovisual {
    width: calc(75% - 3em);
margin: 1em;}

#textoaudiovisual {max-width: 40em;}

#trabajodecampo1 {width: calc(37.5% - 1em);
float: left;}

#trabajodecampo2 {width: calc(37.5% - 1em);}


/******** ASIDE AUDIOVISUAL ********/


#aside-audio {width: calc(75% - 3em); margin: 1em;
    text-align: left;
}


#aside-notasaudio {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flexbox;
    display: flexbox;
}

.nota {
    width: calc(33.33% - 1em);
    padding-left: .5em;
    border-left: .2em solid #ccc;
    margin: 0 .5em
}
        
#aside-fotos {
     display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flexbox;   
}

.asidefot {
    padding-left: 1em;
    padding-right: 1em;
    border-left: solid;
    border-width: thin;
    border-color: #ccc;
    margin: 0 .5em;
}






/***************************** PORTAL DE NOTICIAS ***********************/

#main-portal .sg { text-align: right }
#main-portal h4 { text-align: right }

.news1 {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flexbox;
    margin: 1em;
}

#textn1 { margin-right: 1em; width: calc(40% - 1em); }

#imgn1 {
    position: relative;
    background-image: url(imagenes/portal/06.jpg);
    background-size: cover;
    background-position: center;
    width: 60%;
}

#h7img1 { 
    position: absolute;
    bottom: .5em; right: .5em;
    color: #fff;
}

#filan234 {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flexbox;
    margin: 1em;
}

#h7img3 { 
    position: absolute;
    top: .5em; left: .5em;
    color: #fff;
}

.imgn3 {
    position: relative;
    background-image: url(imagenes/portal/11.jpg);
    background-size: cover;
    background-position: center;
    width: 40%;
    margin-right: 1em;}

.filanews {
    width: calc(30% - 1em);
    margin: em;
}

.news2 {
    padding-right: .5em;
    border-right: thin solid #ccc;
}

.news3 {
    padding-right: .5em;
    border-right: thin solid #ccc;
    margin-right: 1em;
}



#fila4567 { 
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flexbox;
    margin-bottom: 1em;    
}

.fila2n {
    width: 24%; margin: .5em;
    padding-right: .7em;
    border-right: solid;
    border-right-color: #ccc;
    border-right-width: thin;
}

.news7 { border-right: none }



/************************* FORMULARIO *****************************/

#main-part-text {
    text-align: center

}

#main-part {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flexbox;
    }

#main-partreg{ margin-right: 5%;
margin-left: 5%}

#formularioparticipa {
    float: left;
    padding: 1em;
    width: 50%;
    margin: 1em .7em 1em 1em;
    border-right: solid thin #ccc

}

#formularioregistro {
    float: left;
    padding: 1em;
    width: 45%;
    margin: 1em .7em 1em 5em;
    background-color: #73c6cd;
    color: white;

}

#form-info {
    width: 45%;
    padding-right: 1em;
    padding-left: 1em;
    padding-top: 1em;
    margin: 1em 1em 1em .1em;
        
}

#form-info-reg {
    display: inline-block;
    width: 40%;
    padding-right: em;
    padding-left: 1em;
    padding-top: 1em;
    margin: 1em 1em 1em .1em;
        
}


#regconocenos {width: 80%;
margin: 0 auto}

#formmultimedia {
    display: inline-block;
    float: left;
    width: 45%
    

}

.multimedia {
    padding-top: 0.2em;
    padding-bottom: 0em;
}


#multimediagaleria {padding-top: 0.2em}

#multimediagaleria img {
    width: 15%;
    margin: .2em
        
}



.parent-container {float: left;
margin-bottom: 1em;
text-align: center}



.ingresofb{
    float: left;
   width: 40%;

}

.ingresofb {
    margin: 1em;
    
    
}



#formmultimedia {
    margin: 1em;
    padding: 1em;
    border-left: thin solid #ccc;
    border-top: thin solid #ccc;
    border-right: thin solid #ccc;

}

.form { 
    width: 90% 

}

#foto-formularios {
    margin: 1em 1em 1em .1em;
    
}


#participa-formulario {padding-top: 1em; 
    padding-bottom: 1em;
    background-color: #73c6cd;
    color: #fff;
    text-align: center
}

#participa-formulario a {
    padding: 1em;
    color: white;
}

#participa-formulario:hover {
   background-color:  #00a8a8;   
}

#ingresar {float: left;}
    
#foto-formularios2 {
    margin: 1em 1em 1em .1em;
    width: 100%;
   
    
    
}


#participa-formulario {padding-top: 1em; 
    padding-bottom: 1em;
    background-color: #73c6cd;
    color: #fff;
    text-align: center
}



/************************** CALENDARIO *****************************/

#main-calendar { 
    width: 70%; margin: 1em; float: left }


#calendar-info {
    margin: 0 auto;
    padding: 1em;
    width: 95%;
}

#calendar-info  ul
{
    margin: 0;
    padding: 0;
    list-style-type: armenian;
    text-align: center;
}

#calendar-info ul li { 
    display: inline-block;
    padding: 1em; 
}


#calendar-info ul li a:hover {
    color: #fff;
    background-color: #56539f;
}

#calendar-info > img {
    max-width: 60%;
    margin: 0 auto;
    display: block;
}


#calendar-act {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flexbox;
}

.activ { 
    margin: 1em .5em 1em;
    display: inline-block;
}

.audiov-cal:hover {
    background-image: url(imagenes/actividades/audiovisualhover-01.jpg);
    background-size: contain;
    background-repeat: no-repeat
    }

.period-cal:hover {
    background-image: url(imagenes/actividades/redaccionhover.jpg);
    background-size: contain;
    background-repeat: no-repeat}

.graf-cal:hover {
    background-image: url(imagenes/actividades/graficohover-01.jpg);
    background-size: contain;
    background-repeat: no-repeat
}

.ev-cal:hover {
    background-image: url(imagenes/actividades/eventoshover-01.jpg);
    background-size: contain;
    background-repeat: no-repeat
}



#bodycalendar>aside { margin-bottom: 1em; }

#mes {
    clear: both;
    text-align: center;
    background-color: #9c9c9c;
    color: #fff;
    padding: .2em
}


#main-calendar>table {
    border-collapse: separate;
    border: 1px solid #9DABCE;
    border-width: 0px 0px 1px 1px;
    margin: 10px auto;
    background-color: #fff;
    clear: both;
  }
 
#main-calendar>td, #main-calendar>th {
    width: 6em;
    height: 3.3em;
    text-align: center;
    vertical-align: middle;
    color: #444;
    border: solid;
    border-width: 1px;
    border-color: #ccc;
    position: relative;
    font-size: 1.5em;
  }

 #main-calendar>th {
    height: 35px;
    font-weight: bold;
    font-size: 1.5em;
  }

 #main-calendar>td:hover {
    background-color: #56539f;
    color: #fff;
  }

 #main-calendar>td.date_has_event {
    background-position: 162px 0px;
    color: #e30613;
    font-weight: bold;
  }

 #main-calendar>td.date_has_event:hover {
    background-color: #ccc;
  }
 
 #main-calendar>td.today {
    background-color: #29235c;
    color: white;
  }
 #main-calendar>td.today:hover {
    background-color: #7f7f7f
  }

/********************************************************************************************************************************************************** CALENDARIO JQUERY ***************************************/

#main-cal-text {     float: left;margin: 1em;     width: calc(75% - 3em)}
#main-cal-text p { max-width: 40em;}


/************************** MULTIMEDIA *****************************/

.multimedia h1 {
    width: 100%
 
}



.contenedorvideo {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}

.contenedorvideo iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

video {
    margin: 0 auto;
    margin-top: 2em;
    clear: both;
    width: 50%;
    height: auto;
    min-width: 180px  ;
    display: block;
   
        
}

#videovicumar {
}





/************************** REDACCION *****************************/

#imagenredaccion1 {
    width: 100%;
    margin-top: .5em;
}

.textoimagen {
    clear: both;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flexbox;
    
}
#imagenredaccion2 {
    width: 50%;
    margin-top: 1em;
}

#redac {
    width: calc(75% - 3em);
    margin: 1em 0 0 1em;
    float: left;}


.subtexto
{margin: 1em 0 1em 0;
}

.enter
{margin-top: 1em;
}





/************************** ORGANIZACIONES *****************************/

#mainorg {width: calc(75% - 3em); 
    float: left; 
    margin: 1em 1em 1em 1em;
}


.imagenorg
{margin-top: 1em;
}








/************************** EVENTOS ************************************/

#mainevento { margin: 0 1em; width: calc(75% - 3em); float: left;}

.first { width: 50%; margin: .5em 1em; }

.verde
{background-color: #9c9c9c;
    color: #fff;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flexbox;
    border-top: .5em solid #73c6cd;
    margin: 1em 0;
}

.imag1 {
    background-image: url(imagenes/banderasss.jpg);
    background-size: cover;
    background-position: center;
    width: calc(50% + 2em)

}


.naranja
{background-color: #9c9c9c;
    color: #fff;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flexbox;;
    border-top: .5em solid;
    border-top-color: #ee731b;
    margin-bottom: 1em;
}



.imag2 {
    background-image: url(imagenes/encu.jpg);
    background-size: cover;
    background-position: center;
    width: calc(50% + 2em)
}

.amarillo
{ background-color: #9c9c9c;
    color: #fff;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flexbox;
    border-top: .5em solid;
    border-top-color: #fde001;

}


.imag3 {
    background-image: url(imagenes/motion%20graphics%20design.jpg);
    background-size: cover;
    background-position: center;
    width: calc(50% + 2em)
}

#maseventos {
    clear: both;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flexbox;
    margin: 1em 1em 1em;   
}


.titulos
{padding: 1em 1em 0 1em;
}

.imagenes
{   background-color:#9c9c9c; 
    height: 20em;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flexbox;
    border-top: .5em solid;
    border-top-color: #44388d;
    margin-bottom: 1em;
    margin-left: 1em;
    
}

.imaa1
{background-image: url(imagenes/z06.jpg);
      background-position: center;
    background-size: cover;
    width: 48%;
    height: 15em;
  padding: 1em;
    margin-left: 1em;
    margin-top: 1em;
    margin-bottom: 1em;
   
}

.cuadrado:hover {background-color: #fff;
opacity: 1;}

.imaa2 {
    background-image: url(imagenes/service-7.jpg);
      background-position: center;
    background-size: cover;
    width: 48%;
    height: 15em;
    padding: 1em;
    margin-right: 1em;
    margin-left: 1em;
    margin-top: 1em;
    margin-bottom: 1em;
    
    
}

.cuadrado {
    background-color: #fff;
    opacity: .8;
    width: 35%;
    height: 7em;
    padding: 1em 1em 1em 1em;
    margin-top: 1em;
}




/************************** GRAFICO ************************************/

#maingraf {
    margin: 1em; 
    width: calc(75% - 3em);
    float: left
}

.h5graf { border: none; text-align: right; font-weight: bold;}

#noticiasgrafico1 { display: flex }

.notgraf { width: 50%; }

.dg1 { margin-right: .5em; }

.imggraf1 { 
    background-image: url(imagenes/dg01.jpg);
    background-size: cover;
    background-position: center;
    height: 20em;
}

.infograf1 { 
    background-color: #dadada;
    padding: 1em;
    margin-bottom: 0;
    height: 23%;
    border-top: .5em solid #73c6cd
}

.dg2 { margin-left: .5em; }

.imggraf2 { 
    background-image: url(imagenes/dg02.jpg);
    background-size: cover;
    background-position: center;
    height: 20em;
}

.infograf2 { 
    background-color: #dadada;
    padding: 1em;
    margin-bottom: 0;    
    border-top: .5em solid #ee731b
}




#noticiasgrafico2 { display: flex; margin-top: 1em; }

.notgraf { width: 33,3333%; }

.dg3 { margin-right: .5em; }

.imggraf3 { 
    background-image: url(imagenes/dg03.jpg);
    background-size: cover;
    background-position: center;
    height: 20em;
}

.infograf3 { 
    background-color: #dadada;
    padding: 1em;
    margin-bottom: 0;
    height: 23%;
    border-top: .5em solid #44388d;
}

.dg4 { margin: 0 .5em; }

.imggraf4 { 
    background-image: url(imagenes/dg06.jpg);
    background-size: cover;
    background-position: center;
    height: 20em;
}

.infograf4 { 
    background-color: #dadada;
    padding: 1em;
    margin-bottom: 0;    
    border-top: .5em solid #fde001;
}

.dg5 { margin-left: .5em; }

.imggraf5 { 
    background-image: url(imagenes/dg08.jpg);
    background-size: cover;
    background-position: center;
    height: 20em;
}

.infograf5 { 
    background-color: #dadada;
    padding: 1em;
    margin-bottom: 0;    
    border-top: .5em solid #00a8a8;
}


/****************** RESPONSIVE TABLET HORIZONTAL Y MONITOR ******************/

@media screen and (min-width: 60em)
            and (max-width: 89.99999em)

{


/***** RESPONSIVE FUENTES *****/

.logo {width: 20em}
    
nav {
    font-size: .8em;
    
}  
    
main {
    font-size: .9em

}
    
footer {
    font-size: .9em;
}
    
/***** RESPONSIVE INDEX *****/

    
#filaindex {
    padding-top: 1em;
    text-align: justify;
    margin: 0 auto;
    
    
}

.newsindex {
    
    padding-left: 0em;
    

}
    
.nw1, .nw2, .nw3 {
    width: 30%;
    padding: 1em;
    margin: 0 auto;
    display: inline-block;
    

}    
    
    
/***** RESPONSIVE HEADER *****/
    
.logo-header {
    width: 35%;
    
}
    
nav ul {
    clear: both;
    height: auto;
    
}
    

nav li a {
    text-align: none

}
    
#participa {
   border-left: 0

}
    
/****** RESPONSIVE FOOTER ******/
    
    
.infofooter {
    display: block;

}
    
.foot-links {
    font-size: .9em;
    width: 40%;
    float: left;
    margin-left: 4.5%
        
}
    


.mapa {
    clear: both;
    width: 100%;
    margin-left: -1em;
    margin-bottom: 1em;
}
    
/**** RESPONSIVE FORMULARIO *****/
    
#formularioregistro {
    margin: 0 auto;
    float: inherit;
    width: 70%;
    margin-top: 1em;
    text-align: center;
    border-right: none;
}

#form-info-reg {
    padding: 1em;
    margin-top: 1em;
    width: 40%;
    float: left;
    margin-left: 5%;
}

#regconocenos {
    width: 40%;
    float: left;
    padding: 1em;
   

}   

#regconocenos p {
    width: 200%;
    

}



hr {
    display: none;
}
    
    
/**** RESPONSIVE CALENDARIO *****/
    
#main-cal-text h{
    margin-left: 1em;
    margin-right: 1em;
    text-align: center

}

#calendar {    
    width: 60%;
     float: left;
     margin-left: 2em;
     margin-top: 1em;
     
     
 }

#calendar-info {
    text-align: center

}

#calendariomultimedia {
    width: 100%;
    float: none;
    margin: 0 auto;
    padding: .1em;
        
}

    
#main-cal-text h1 {
text-align: center}
    
#main-cal-text h3 {
margin-right: 1em;
margin-left: 1em;
    
   
    
}
#calendariomultimedia:hover .text {visibility: visible}

}
    

    




/************************ RESPONSIVE TABLET VERTICAL*************************/

@media screen and (min-width: 40em)
            and (max-width: 59.99999em)
{
    

    
 .logo {width: 1em}
/***** RESPONSIVE FUENTES *****/
    
nav {
    font-size: .9em;
    
}  
    
main {
    font-size: .85em;
    
}
    
footer {
    font-size: .85em;
}
    


    
/***** RESPONSIVE HEADER *****/
    
.logo {width: 60%;
    
    display: block;
    margin-left: 20%;
    margin-right: 20% 
    
    
}
 
nav ul {
    clear: both;
    width: 100%;
    display: block;
    height: auto;

}
    
nav li {
    width: 100%;
    float: left;
    position: relative;

}
    
nav li a {
    text-align: none

}
    
#participa {
   border-left: 0

}
    
/****** RESPONSIVE FOOTER ******/
    
.infofooter {
    display: block;

}
    
.foot-links {
    width: 40%;
    float: left;
    margin-left: 4.5%
        
}

.mapa {
    clear: both;
    width: 100%;
    margin-left: -1em;
    margin-bottom: 1em;
}
    
/**** RESPONSIVE BOTONERA *****/    

#botoneraderecha {
    position: relative;
    float: left;
    display: block;
    width: 90%;
    margin-left: 5%;
    margin-bottom: 1em;}
 
    
#aside-noticias li {
    width: 50%;
    float: left;

}
    
#aside-redes {}
    
.titaside {clear: left;}


/***** RESPONSIVE INDEX *****/
   
#filaindex {
    padding-top: 1em;
    margin: 0 auto;
    border: none;
    
    
     
}
    
#filaindex h3, p {
text-align: justify}
    
#filaindex h2 {
text-align: center;
    float: left;
    
}

    
.newsindex {
    padding-bottom: 1em;
    margin: 0 auto;
    border: none;
    padding-left: 0em;
    
}
    
.nw1, .nw2, .nw3 {
     width: 28%;
    margin: 0 auto;
    border: none;
    display: inline-block;
    

}

/* RESPONSIVE FORMULARIO */
    
#main-part {
    clear: both;
    position: relative;
    

}

#main-part-text h3{
    margin-left: 1em;
    margin-right: 1em;
    text-align: center;
    
}


#formularioparticipa {
    margin: 0 auto;
    float: inherit;
    width: 60%;
    margin: 1em;
}
    
    

#form-info {
    clear: both;
    margin: 0 auto;
    width: 60%

}

    
#foto-formularios {
    display: none;
 
    
} 

.login {

    
}
    
#ingresar {float: left;



}

        
#formularioregistro {
    margin: 0 auto;
    float: inherit;
    width: 70%;
    margin-top: 1em;
    text-align: center;
    border-right: none;
}

#form-info-reg {
    padding: 1em;
    margin-top: 1em;
    width: 40%;
    float: left;
    margin-left: 5%;
}

#regconocenos {
    width: 40%;
    float: left;
    padding: 1em;
   

}   

#regconocenos p {
    width: 200%;
    

}


hr {
    display: none;
}
    

/* RESPONSIVE CALENDARIO */
    
#main-cal-text h{
    margin-left: 1em;
    margin-right: 1em;
    text-align: center

}

#calendar {    
     margin: 0 auto;
     width: 75%;
     float: none;  
     
 }

    
#calendar-info {
    text-align: center

}

#calendariomultimedia {
    width: 75%;
    float: none;
    margin: 0 auto;
    padding: .1em;
    
        
}


#calendariomultimedia:hover .text {visibility: visible}

}

/************************** RESPONSIVE CELULAR ****************************/


@media screen and (max-width: 39.99999em)
   
{
    
    
/***** RESPONSIVE FUENTES *****/
nav {
    font-size: .85em;
    
}  
    
main {
    font-size: .75em

}

.contenedor {
    font-size: .7em
}
    
footer a {
    font-size: .75em;
}
    
/***** RESPONSIVE HEADER *****/
    

.logo {width: 60%;
    
    display: block;
    margin-left: 20%;
    margin-right: 20% 
    
    
}
 
nav ul {
    clear: both;
    width: 100%;
    display: block;
    height: auto;

}
    
nav li {
    width: 100%;
    float: left;
    position: relative;

}
    
nav li a {
    text-align: none

}
    
#participa {
   border-left: 0

}
    
/****** RESPONSIVE FOOTER ******/
    
.infofooter {
    display: block;
    

}
     
.foot-links {
    width: 100%;
    margin: -1em;
    font-size: .8em;
        
}
    
.infofooter a {
    color: #aaa;
    font-size: 1em;
    line-height: 220%;
    text-decoration: none;
}


.mapa {
    width: 100%;
    margin-left: -1em;
    margin-bottom: 1em;
    font-size: .8em;
}

#contacto  {
    margin-left: 25%;
    margin-right: 25%;
    display: block;
    
    
    

        
    
}

    
/***** RESPONSIVE INDEX ******/
    
#filaindex {
    padding-top: 1em;
    margin: 0 auto;
    display: block;
    border: none;
     
}
    
.newsindex {
    padding-left: 0;
    padding-bottom: 1em;
    margin: 0 auto;

}
    
.nw1, .nw2, .nw3 {
    display: block;
    width: 90%;
    margin: 0 auto;
    border: none;

}
  

   
/***** RESPONSIVE BOTONERA ******/    

#botoneraderecha {
    position: relative;
    float: left;
    display: block;
    width: 90%;
    margin-left: 5%;
margin-bottom: 1em;}
    
#aside-noticias li {padding: .5em}

/***** RESPONSIVE FORMULARIO Y REGISTRO ******/
    
#main-cal-text h3{
    margin-left: 1em;
    margin-right: 1em;
    text-align: center

}
    
#main-part {
    clear: both;
    position: relative;
    display: block;

}

#formularioparticipa {
    margin: 0 auto;
    float: inherit;
    width: 70%;
    margin-top: 1em;
    text-align: center;
    border-right: none;
}
    
#formularioregistro {
    margin: 0 auto;
    float: inherit;
    width: 70%;
    margin-top: 1em;
    text-align: center;
    border-right: none;
}

#form-info {
    clear: both;
    margin: 0 auto;
    width: 70%

}
    
#form-info-reg {
    clear: both;
    padding: 0;
    margin: 0 auto;
    margin-top: 1em;
    width: 100%;
    text-align: center}

    
#foto-formularios {
    display: none;
 
}    

#regconocenos {
display: none;

}   

#regconocenos p, h2 {
display: none}

    
.login {
    text-align: center;
      
}

#ingresar {float: left;

}

    
/***** RESPONSIVE CALENDARIO *****/
    
#main-cal-text h{
    margin-left: 1em;
    margin-right: 1em;
    text-align: center

}

    
    
 #calendar {
     margin: 0 auto;
     float: none;
     display: block;
     min-width: 28em;
        
}
    
#calendar-info {
    text-align: center

}

#calendariomultimedia {
width: 90%;
    float: none;
    margin: 0 auto;
    
}
    
#calendariomultimedia:hover .text {visibility: visible}


 }