*{  margin: 0;
    padding: 0;
    font-family:'lato', sans-serif;
}


body{
    width: 100%;
    font-size: 16px;
    overflow-x: hidden;
}

#barra{
    width: 100%;
    background-color: #d5d5db; 
    margin-bottom: 5%;
}

.barraconteiner{
    max-width: 960px;
    height: 40px;
    margin: auto;
    
}

.logofadu {
    float: left;
    margin-left: 3px;  
}

.logofadu img{
    padding-top: 1%;
    min-width: 260px;   
}
    

.buscador{
    float:right;
    width: 22%;
    margin-top: 7.7px;
    height: 23px;
    background-color: rgba(255, 255, 255, 0.46);
    background-image: url(imagenes/lupita-01.svg);
    background-repeat: no-repeat;
    background-position: 98% 69%;
}

input {
border: none;
background-color: rgba(255, 255, 255, 0);
width: 100%;
height: 100%;
}

input:focus{
	outline:0px;
}

.mail a{
    float:right;
    min-width: 39px;
    height: 24px;
    margin-top: 8px;
    margin-left: 1.3%;
    background-image: url(imagenes/mail.svg);
    background-repeat: no-repeat;
}

.mail a:hover{
    background-image: url(imagenes/mail2.svg);
    
}


nav ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 17px 6px 17px 0;
  list-style: none;
  float:right;
}

nav ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: 7px;
  position: relative;
  padding: 24px 20px;
  background: rgba(255, 255, 255, 0);
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
    z-index: 999;
}
nav ul li:hover {
  background: rgba(255, 255, 255, 0);
  color: #b5b5b5;
}
nav ul li ul {
  padding: 0;
  position: absolute;
  top: 100%;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;  
}

ul li ul li { 
  background: #fff; 
  display: block; 
  color: #120000;   
}

ul li ul a{ 
 text-decoration: none;
}
  



ul li ul li:hover { background: #fff; }
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}


.pagconteiner{
    max-width: 960px;
    margin: auto;
}

header{
    width: 100%;
    float: left;
    padding-bottom: 2%;
}

nav{
    float:left;
    margin-left: 3%;
    width: 65.7%
}

#logo{
    min-width: 150px;
    max-width: 290px;
    margin-left: 1%;
}
#logo a{
    display: block;
}
#logo img{
    background-image: url(imagenes/logo_misuraca.svg) 100%;
    float: left;
    width: 100%;
}



/* HOME */



main{
    float: left;
    width: 100%;
    margin: auto;
}

.slider{
    float: left;
    width: 100%;
}

.bienvenidos{
    clear: both;
    float: left;
    width: 31.8%;
    font-size: 1.5em;
    padding-left: 0.5%;
    margin-right: 2%;
    color: #070707;
}



.texto{
    font-size: 0.9em;
    line-height: 1.5em;
    margin-top: 1.5em;
    color: #454444;
    font-weight: 400;
}

#que_es_la_morfologia{
    width: 65%;
    float: right;
    padding-top: 6%; 
    padding-bottom: 8%;
   
}

.destacado{
    font-size: 1em;
    font-weight: 700;
    line-height: 1.4em; 
    padding-bottom: 4%;
}

#propuestaboton{
    float: left;
    width: 190px;  
    height: 33px;
    background-image: url(imagenes/propuestaboton2.svg);
    background-repeat: no-repeat;
    background-position: left;    
}

#propuestaboton:hover{
        background-image: url(imagenes/propuestaboton2gris-01.svg);
}

.morfologias{
    float: left;
    width: 100%;
    margin-bottom: 3%;
}


h3{
    font-size: 1.15em;
    margin-top: 22px;
    margin-bottom: 20px;
}



.general{
    float: left;
    width: 100%;
    border-top: solid 3px #ff982e;
    margin-right: 1.3%;
}
.general img{
    float: left;
    padding-top: 6.5%;
    max-width: 10%;
}

.general:hover{
    background-color: rgba(255, 152, 46, 0.23);
}

.arquitectonica{
    float: left;
    width: 100%;
    border-top: solid 3px #28f5d8;
    margin-right: 1.3%;
}

.arquitectonica:hover{
    background-color: rgba(40, 245, 216, 0.31);
}

.arquitectonica img{
    float: left;
    padding-top: 6.5%;
    max-width: 10%;
}

.urbana{
    float: left;
    width: 100%;
    margin-right: 1.3%;
    border-top: solid 3px #00e553;
}

.urbana:hover{
    background-color: rgba(0, 229, 83, 0.24);
}

.urbana img{
   float: left;
    padding-top: 6.5%;
    max-width: 10%;   
}

p{
    font-size: 0.8em;
}

.docentes{
    clear:both;
    float: left;
    width: 100%;
    padding-bottom: 9%;
}

.fotoshome{
    width: 67.5%;
    float: left; 
   
}

.fotoshome ul{
    width: 100%;
    float: left;
}

.fotoshome ul li{
    float: left;
    width: 22.89%;
    padding-right: 2.1%;
    display: inline-block; 
}

.fotoshome img{
    width: 100%;
    padding-bottom: 5%;
	filter:alpha(opacity=70); 
	-moz-opacity:.70;
	
}

.fotoshome ul li a:hover{
   opacity:.70;
 
}



.cargo{
    font-size: 0.8em;
    font-weight: 700;
}

.comisiones{
    float: left;
    width: 32.5%; 
    border-top: solid 1px #d5d5db;
}

.comisiones ul{
    list-style: none;
}

.comisiones ul li{
    
    text-decoration: none;  
    padding: 19.6px;
    padding-left: 0px;
    border-bottom: solid 1px #d5d5db;
}

.comisiones ul li a{
    text-decoration: none;  
   
}

.comisiones ul li:hover{
  background-color: rgba(213, 213, 219, 0.16);
}


.comisiones ul li a img{
    float: right;
    width: 11%;
    margin-top: -3px;
}

.modalidad{
    clear: both;
    float: left;
    width: 100%;
    padding-bottom: 8%;
}


.teoricas{
    float: left;
    width: 49.1%; 
    padding-right: 1.6%
}

.texto_teoricas{
    border-top: solid 3.2px #120000;
}

.teoricas img{
    float: left;
    width: 100%; 
    padding-bottom: 3.5%;
}

.texto_teoricas{
    float: left;
    width: 100%;
    border-top: solid 3.2px #120000;
    margin-right: 1.3%;
}

.texto_teoricas img{
    float: left;
    padding-top: 6.5%;
    max-width: 6.5%;
}

.boton{
    margin-top: 21px;
    width: 33px;
    height: 31px;
    background-image: url(imagenes/botonnegro-01.svg);
    background-position: 0 0 0 center;
    background-repeat: no-repeat;
}

.boton:hover{
    background-image: url(imagenes/botonhover.svg);
}

.boton-naranja{
    margin-top: 21px;
    width: 33px;
    height: 31px;
    background-image: url(imagenes/boton_naranj.svg);
    background-position: 0 0 0 center;
    background-repeat: no-repeat;
}


.boton-turquesa{
    margin-top: 21px;
    width: 33px;
    height: 31px;
    background-image: url(imagenes/boton_turquesa-01.svg);
    background-position: 0 0 0 center;
    background-repeat: no-repeat;
}

.boton-verde{
    margin-top: 21px;
    width: 33px;
    height: 31px;
    background-image: url(imagenes/boton_verde-01.svg);
    background-position: 0 0 0 center;
    background-repeat: no-repeat;
}

.taller{
  float: left;
  width: 49%; 
}

.taller img{
    float: left;
    width: 100%; 
    padding-bottom: 3.5%;
}



.propuesta{
    float: left;
    width: 100%;
    padding-top: 40px;
    margin-bottom: 80px;
    border-top: solid 3px #120000;
}





/* N2/MORFOLOGIA URBANA */




.m_urbana{
    float: left;
    width: 100%;
    padding-top: 40px;
    padding-bottom: 40px;
    margin-bottom: 80px;
    border-top: solid 3px #00e553;
    background-image: url(imagenes/urban.jpg);
    background-repeat: no-repeat;
    background-position: 55% 0%;
}

h1{
    font-size: 1.5em; 
}

h2{
    font-size: 0.9em;
    margin-top: 2%;
    margin-bottom: 2%;   
    color: #120000;
    line-height: 1.5em;
}

.destacado2{
    float:left;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.4em;
    padding-top: 30px;
    padding-left: 33%;
    padding-bottom:2.5%;
 }

#ver_cronograma{
    float: left;
    width: 190px;  
    height: 33px;
    background-image: url(imagenes/ver_cronograma-01.svg);
    background-repeat: no-repeat;
    background-position: left;  
    margin-left: 33%;
}
#ver_cronograma:hover{
    background-image: url(imagenes/ver_cronograma_gris-01.svg);
}

#solo{
    float: left;
    width: 96%;
    margin-right: 2%;  
    margin-left: 2%
}

.destacado{
    float:left;
    width: 100%;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.4em;     
}


.section{
    float: left;
    width: 66.3%;
    margin-bottom: 60px;
}

#asidepropu{
      float: left;
    width: 32.2%; 
    margin-right: 1.3%;
    
}
.cont{
    float: left;
    width: 90%;
    border-top: solid 1px #d5d5db;
}

.contenedorpropu{
    float: left;
    width: 100%;
    padding-bottom: 10%;
    border-top: solid 1px #d5d5db;
}
.col1{float: left;
    width: 49%;
    margin-right: 1.9%;
    text-align: justify; 
}

.col2{
    float: left;
    width: 49%;
     text-align: justify;
}

.bajada{
    clear: both;
    width: 100%;
    border-top: solid 1px #d5d5db;
}


#fotogrupal{
    clear: both;
    width: 100%;
    margin-bottom: 70px;
}

#fotogrupal img{
    width: 100%;
}




aside{
    float: left;
    width: 32.2%; 
    margin-right: 1.3%;
    border-right: solid 1px #d5d5db;
}

.item{
    float: left;
    font-size: 1em;
    font-weight: 700;
    width: 100%;
    padding-bottom: 3.8%;
    margin-bottom: 20px;
    color: #120000;
  
}

.item2{
    float: left;
    font-size: 1em;
    font-weight: 700;
    padding-bottom: 0.5%;
    padding-top: 0.5%;
    padding-left: 2%;
    padding-right: 2%;
    margin-bottom: 20px;
    color: #fff;
    background-color: #dbdbdb;
}

.item3{
    float: left;
    font-size: 1em;
    font-weight: 700;
    padding-bottom: 0.5%;
    padding-top: 0.5%;
    padding-left: 2%;
    padding-right: 2%;
    margin-bottom: 20px;
    color: #fff;
    background-color: rgb(255, 226, 0);
}

.adentro{
    clear: both;
    width: 90%;
    margin-bottom: 20%;
    color: #120000;
}

.adentro ul{
   list-style: none;
}

.adentro ul li{
    padding-top: 3.2%;
    padding-bottom: 3.2%;
    text-decoration: none;
    border-bottom: solid 1px #d5d5db;
    font-size: 0.9em;
}

.refes{
    clear: both;
    padding-top: 4%;
    padding-bottom: 15%;
   
}

.refes a{
    text-decoration: none;
  
}

.refes ul{
    list-style: none;
    
}
.refes ul li{
    padding-bottom: 1.5%;
     color: #120000; 
}

.refes ul li:hover{
    color: #00e553; 
}

.refes ul li a{
    text-decoration: none;
}

.extension{
    clear: both;
    background-image: url(imagenes/urbanou.jpg);100%;
    height:200px;
    background-repeat: no-repeat;
    background-position: left;
}

.extensioncontenido{
    clear: both;
    width: 90%;
    padding-top: 4%;
    margin-bottom: 23%;
    color: #120000;
}

.extensioncontenido a{
 text-decoration: none;
}


.extensioncontenido ul{
   list-style: none;
}

.extensioncontenido ul li{
    padding-top: 2.4%;
    padding-bottom: 1%;
    font-size: 0.9em;
    color: #120000;
}

.extensioncontenido ul li:hover{
    color: rgb(255, 226, 0);;
}

.textoaside{
    font-size: 0.9em;
    line-height: 1.5em;
    margin-top: 0.5em;
    padding-bottom: 1.5em;
    color: #454444;
    font-weight: 400;
}

.relleno{
height: 230px;}







.titulo{
    float: left;
    font-size: 1em;
    font-weight: 700;
    margin-bottom: 20px;
    color: #120000;
}

#articulos_up{
    clear: both;
    float: left;
    width: 100%;
    margin-bottom: 5%;
    border-bottom: solid 1px #d5d5db;
} 

#articulos_down{
    float: left;
    width: 100%;
    margin-bottom: 5%;
    border-bottom: solid 1px #d5d5db;
} 

.article1{
    clear: both;
    float: left;
    width: 49%; 
    margin-right: 2%;
    padding-bottom: 4%;
    
}
.article1 img{
    width: 100%;  
    padding-bottom: 4%;
}

.ver_galeria{
   margin-top: 28px;
   width: 110px;
   height: 31px;
   background-image: url(imagenes/ver_galeria.svg);
   background-repeat: no-repeat;
    background-position: 0;
}

.ver_galeria:hover{
 
   background-image: url(imagenes/ver_galeria_hover-01.svg);

}


.article2{
    float: left;
    width: 49%; 
    padding-bottom: 4%;   
}
.article2 img{
    width: 100%;  
   padding-bottom: 4%;
}






.imagen1{
    float: left;
    width: 32.3%; 
    padding-bottom: 4%;
    margin-right: 1.5%
}

.imagen2{
    float: left;
    width: 32.3%;
    padding-bottom: 4%;   
}

.imagen3{
    float: left;
    margin-left: 1.5%;
    width: 32.3%; 
    padding-bottom: 3.5%;
}

.imagen1 img{
    width: 100%;  
    padding-bottom: 4%;
}
.imagen2 img{
    width: 100%;  
    padding-bottom: 4%;
}

.imagen3 img{
    width: 100%;  
    padding-bottom: 4%;
}
.texo_tp1{
    border-top: solid 3px #00e553;
}
.texo_tp2{
    border-top: solid 3px #00e553;
}

.texo_tp3{
    border-top: solid 3px #00e553;    
}

.texo_tp4{
    border-top: solid 3px #00e553;
}

.negrita{
    font-weight: 700;
    color: #120000;
    font-size: 0.9em;
    line-height: 1.4em;
    
}
.textonegro{
    color: #45454e;
    font-size: 0.8em;
    line-height: 1.7em;
    margin-top: 1.5em;
    font-weight: 400;
}


.final{
    float: left;
    width: 100%;
     padding-bottom: 9%;
}

.tpfinal{
   float: left;
  
}

.tpfinal img{
    width: 100%;    
    margin-bottom: 1.7%;
    
}

.texo_tpfinal{
    width: 100%;
    border-top: solid 3px #00e553;    
}

.texo_tpfinal img{
    width: 17.5%;
    padding-top: 5%;   
}



/* INVESTIGACION */



.propuestainves{
    float: left;
    width: 100%;
    padding-top: 40px;
    border-top: solid 3px #120000;
}


.up{
    float:left;
    width: 100%;
    margin-bottom: 5%;
  
}

.noticia{
    float: left;
    width: 32.2%;
    min-height: 250px;
    margin-right: 1.5%;
    background-color: rgba(208, 238, 252, 0.34);
    
}

.newsin{
   
    margin: 9% 8% 8% 7%; 
}

.noticia3{
    float: left;
    width: 32.2%;
    min-height: 250px;
    background-color: rgba(208, 238, 252, 0.34);
}

.nota{
    font-size: 1em;
    font-weight: 700;
    color: #020202;
}



.down{
    clear: both;
    float:left;
    width: 100%;
}

#relleno{
    float: left;
    width: 20px;
    height: 70px;}

.otro{clear: both;
    font-size: 0.9em;
    margin-top: 2%;
    margin-bottom: 2%; 
    margin-left: 2%;
    color: #120000;
    line-height: 1.5em;
}





/* GALERIA-MORFOLOGIA URBANA */





.galeria_m_urb{
    float: left;
    width: 100%;
    padding-top: 40px;
    padding-bottom: 40px;
    margin-bottom: 80px;
    border-top: solid 3px #00e553;
    
    background-repeat: no-repeat;
    background-position: 55% 0%;
}

.destacado3{
    float:left;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.4em;
    padding-top: 60px;
    padding-left: 33%;
   
 }

.tepes{
    clear:both;
    float: right;
    width: 100%;
    padding-bottom: 9%;
}

#anios{
    color:#fff;
     width: 25%;
    float: left;
}
.anioss{
    padding-bottom: 1%;
    text-decoration:none;
    
}
.anioss a{
    text-decoration: none;
    
}

.tps_galeria{
    float: right;
    width: 66%;
   
   
}

.tps_galeria ul{
    width: 100%;
    float: left;
}

.tps_galeria ul li{
    float: left;
    width: 22.89%;
    padding-right: 2.1%;
    display: inline-block; 
}

.tps_galeria img{
    width: 100%;
    padding-bottom: 5%;
	filter:alpha(opacity=70); 
	-moz-opacity:.70;
	
}

.tps_galeria ul li a:hover{
   opacity:.70;
 
}


#galeria_urb_up{
    float: left;
    margin-bottom: 5%;
    width: 100%;
    margin-left: 1.2%;
    border-bottom: solid 1px #d5d5db;
} 

#galeria_urb_down{
    float: left;
    margin-bottom: 5%;
    width: 66.1%;
    margin-left: 1.2%;
    border-bottom: solid 1px #d5d5db;
} 



.gale_urb_1{
    width: 100%;
    margin-bottom: 1%;
}
.gale_urb_1 img{
    width: 100%;
}

.gal_conteiner{
    width: 100%;
    float: right;
}

.texto_1_gal{
    float: left;
    width: 32.3%;
    margin-right: 1.5%;
    border-top: solid 2px #00e553;
    
}

.textogal{
    color: #120000;
    font-size: 0.8em;
    line-height: 1.6em;
    margin-top: 1.5em;
    font-weight: 400;
    padding-bottom: 57%
}
.article1_gal{
    float: left;
    width: 32.35%; 
    margin-right: 1.5%;
    padding-bottom: 4%;
  
}
.article1_gal img{
    width: 100%;  
    padding-bottom: 4%;
}

.article2_gal{
    float: left;
    width: 32.35%; 
    padding-bottom: 4%;   
}
.article2_gal img{
    width: 100%;  
    padding-bottom: 2.5%;
}

.otra_img{
    width: 100%;  
    padding-bottom: 4%;
}


.botonesniveles{
    clear: both;
    float: right;
    width: 100%;
    margin-bottom: 100px;
}

.niveles{
    float: right;
    width: 100%;
}

.niveles ul{
    list-style: none;
}

.niveles ul li{
    padding: 19.6px;
    padding-left: 39px;
    padding-right: 39px;
    border-bottom: solid 1px #d5d5db;
    border-top: solid 1px #d5d5db;
    display: inline;
}

.niveles ul li a{
    text-decoration: none;  
   
}

.niveles ul li:hover{
    background-color: rgba(213, 213, 219, 0.16);
}


.niveles ul li a img{
    margin-left: 2%;
    width: 3%;
    margin-bottom: -0.8%;
}
  







/* EXTENSION */



.proyectos_anteriores{
    clear: both;
    padding-top: 10%;
    border-top: solid 1px #d5d5db;
}

.bloque_de_texto{
    float: left;
     margin-left: 13.4%;
    width: 66%;
    padding-bottom: 8%
}

.otrotexto{
    color: #45454e;
    font-size: 0.8em;
    line-height: 1.7em;
    font-weight: 400; 
}

.fotos_anteriores{
    clear: both;
    padding-bottom: 9%;    border-bottom: solid 1px #d5d5db;
}

.fotos_anteriores ul{
    text-decoration: none;
}

.fotos_anteriores ul li{
    display: inline-block;
    width: 23.76%;
    margin-right: 1%;
}

.fotos_anteriores  a{
    text-decoration: none;
}

.fotos_anteriores img{
    width: 100%;
    padding-bottom: 5%;
}


.proximos_proyectos{
    clear: both;
    float: left;
    width: 100%;
    padding-top: 9%;
    padding-bottom: 12%;  
}

.fecha1{
    clear: both;
    float: left;
    width: 23.76%;
    height: 90px;
    padding: 2.5% 1.3% 0 0
  
}

.fecha2{
    float: left;
    width: 23.68%;
    height: 90px;
    padding: 2.5% 1.3% 0 0
}

.numero{
    float: left;
    width: 22%;
    height: 55%;
    border: solid 1px #d5d5db; 
    text-align: center;
}

.numero a{
    text-decoration: none;
}

.textito{
    clear: both;
    font-size: 0.7em;
    font-weight: 400;
}

h4{
    font-size: 1.15em;
    padding-top: 12%;
}

.bajadita{
    float: left;
    font-size: 0.8em;
    font-weight: 400;
    padding-left: 5%;
}











.color{
    background-color: #606060;
}





/* FOOTER */


  


footer{
    margin: auto;
    clear: both;
    border-top: solid 1px #d5d5db;
    padding-top: 30px;
}

.footerconteiner{
    max-width: 960px;
    margin: auto;
}

.h3gris{
    color:#b5b5b5;
    font-size: 0.7em;
    font-weight: 400;
}

.enelmarco{
    color:#b5b5b5;
    font-size: 0.77em;
    font-weight: 500;
    margin-left: 5%;
}

#legales{
    float:left;
    width: 29%;
    padding-bottom: 3%;
    border-bottom: solid 1px #d5d5db;   
    margin-left: 5%;
    margin-right: 6%
}

#legales a{text-decoration: none;}

.textofooter{
    font-size: 0.7em;
    line-height: 1.5em;
    margin-top: 1.5em;
    color: #b5b5b5;
    font-weight: 400;
}

#logosfooter{
    float: left;
    width: 25%;   
    padding-bottom: 4%;
}

.uba{
    width: 98%;
    margin-bottom:18px;
}
.uba img{
    width: 95%;}

.fadu{
    width: 70%;
    margin-left: 2%;
}

.fadu img{
    width: 65%;
}




#contacto{
    float: left;
    width: 30%; 
    margin-left: 2.1%;
}

#contacto ul{
    list-style: none;
    padding-top: 40px;
}

#contacto ul li{
    float: left;
    width: 10%;
    padding-right: 5%;
    display: inline-block; 
}

#contacto ul li a{
    width: 100%;
    
}

#contacto img{
    width: 90%; 
}



.placa1{
    position: absolute;
    z-index: 999;
    color: black;
}


.naranja{color:#ff982e;
}

.turquesa{color:#28f5d8;
}

.verde{color:#00e553;
}

.uno:hover{color:#ff982e;
}

.dos:hover{color:#28f5d8;
}

.tres:hover{color:#00e553;
}

.gris{color:#b5b5b5;
}

.blanco{color:#fff;
}
.violetita{color:#7256f0;
}

.color_extension{background-color:rgba(255, 254, 205, 0.51);
}


#menu-20{
    display: none;
}

#logo a:nth-child(2){
    display: none;
}

.a-test{
    text-decoration: none;
}
.back-hover{
    width: 32.3%;
    z-index: 999;
    height: 450px;
    position: absolute;
    
    opacity: 0;
    cursor: pointer;

}


.back-hover img{
    display: block;
    width: 50%;
    position: relative;
    margin: auto;
    top: 45%;

}


.back-hover:hover{
opacity: 0.5;

}

.nar{background-color:#ff982e;
}

.tur{background-color:#28f5d8;
}

.ver{background-color:#00e553;
}

#comisiones-responsive{
    display: none;
}

.linea-gris{
    opacity: 0.2;
}














#container-back {
    width: 100%;
    height: 300px;
    display: none
    }

#container-back nav {
    width: 100%;
    height: 300px;
    background-color: white;
    }

#container-back nav ul {
    width: 100%;
    height: 300px
    }

#container-back nav li {
    width: 100%;
    height: 60px;
    text-align: center;
    list-style-type: none;
    color: black;
    border-top: #999 solid 1px;
    }

#container-back nav a {
    width: 100%;
    height: 100%;
    text-align: center;
    text-decoration: none;
    color: black;
    display: block
    }

#container-back nav a span {
    position: relative;
    top: 30%;
    color: black;
    }

#container-back nav a:hover {
    color:blue;
    }

#container-back span:before {
    content: "[";
    position: relative;
    left: 10px;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0
    }

#container-back span:after {
    content: "]";
    position: relative;
    right: 10px;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0
    }

#container-back span:hover:before {
    left: -10px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1
    }

#container-back span:hover:after {
    right: -10px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1
    }







@media screen and (max-width: 980px){

    nav{
        float: right;
        position: relative;
        top: -85px;
    }

    nav ul{

    }

    nav ul li{
        margin: 0;
        padding: 0 10px;
    }

    .verde, .turquesa, .naranja{
        font-size: 12px;
    }

     .demo_wrapper{
position: relative;
top: 100px;
}

main{
    float: none;
    position: relative;
    top: 100px;
}

footer{
    position: relative;
    top: 150px;
}

}


@media screen and (max-width: 768px){

    nav{
        float: none;
        position: relative;
        top: 40px;
        margin: auto;
    }

    nav ul{

    }

    nav ul li{
        margin: 0;
        padding: 0 10px;
    }

    .verde, .turquesa, .naranja{
        font-size: 12px;
    }

    #logo{
        min-width: none;
        max-width: none;
        width: 100%;
    }

    #logo a{
        width: 40%;
        margin: auto;
    }

    .bienvenidos{
        margin-left: 7%;
        margin-top: 30px;
    }

    .docentes{
        background-color: rgba(0,0,0,0.1);
        width: 90%;
        float: none;
        position: relative;
        margin: auto;
        padding: 2%;
        height: 300px;
    }

    .fotoshome{
        float: none;
        position: relative;
        margin: auto;
    }
    .comisiones{
        float: none;
        border: none;
        display: none;
        padding-bottom: 1%;
    }

    #comisiones-responsive{
        height: auto;
        display: none;
        text-align: center;
    }

    #comisiones-responsive a{
        text-decoration: none;
        width: 10%;
        display: inline-block;
        background-color: white;
        padding: 1%;
        margin-right: 1%;
        margin-left: 1%;
        text-align: center;
        font-size: 18px;
        border: rgba(0,0,0,0.18) solid 1px;

    }

    .modalidad{
        float: none;
        width: 96%;
        position: relative;
        margin: auto;
        margin-top: 35px;
    }


.demo_wrapper{
position: relative;
top: 100px;
}


}



@media screen and (max-width: 768px){
.menu{
     left:0%;
     text-align: left;
}

 nav ul li ul { 
     left: -80%;
 }  
.docentes > h2{
    padding-left: 16%;
}

    nav{
        width: 100%;
    }

    nav ul{
        display: inline-block;
        width: 99%;
        text-align: center;
    }

   .logofadu img{
        min-width: 20%;
    }
.buscador{
    width: 35%;
    position: relative;
    left: -1%;
}

.mail a{
    position: relative;
    left: -1%;
}

#comisiones-responsive{
        height: auto;
        display: block;
        text-align: center;
    }

    .modalidad{
        margin: 0px auto auto;
    }
}
    



   @media screen and (max-width: 460px){

.boton-naranja, .boton-turquesa, .boton-verde{
    display: none;
}
nav ul li{
    font: bold 10px/18px sans-serif;
}

.logofadu img{
    display: none;

}

.logofadu a{
    background: url('imagenes/logo_fadu_corto.png');
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    width: 45%;
    height: 35px;
    z-index: 9999;
}

} 


@media screen and (max-width: 400px){

   
.docentes > h2{
    padding-left: 4%;
}

.main-nav{
    display: none;
}


#logo img{
    float: none;
    position: relative;
    left: -65%;
    top: 25px;
    min-width: 250px;
}

#logo a:nth-child(2){
    display: inline-block;
    float: right;
    text-decoration: none;
    color: black;
    position: relative;
    top: -45px;
    right: -25%;
    font-size: 12px;
}

#logo a:nth-child(2):after{
    content: "";
    background:url('imagenes/3line.jpg'); 
    background-size: 100% auto;
    position: absolute;
    top: 100%;
    display: inline-block;
    width: 30%;
    height: 40px;
    left: -1%;
    
 
}

.bienvenidos{
    padding: 0;
    margin: 0;
    float: none;
    text-align: center;
    font-size: 14px;
    width: 100%;
}


#que_es_la_morfologia{
    float: none;
    width: 94%;
    text-align: left;
    padding: 0 3% 0 3%;
    margin-top: 35px;
    margin-bottom: 50px;
    font-size: 14px;
}

.morfologias{
    margin-top: 40px;
}

.imagen3, .imagen2, .imagen1{
    width: 95%;
    padding: 70px 2.5% 0 2.5%;
    margin-top: 70px;
    border-top: #999 solid 0.5px;
}


.imagen3{
    margin-bottom: 70px;
    border-bottom: #ccc solid 0.5px;
    padding-bottom: 70px;
}


.fotoshome{
    width: 100%;
    margin-bottom: 70px;
}

.fotoshome ul{
    width: 100%;
}

.fotoshome ul li{
    width: 45%;
    margin-left: 2.5%;
    margin-top: 45px;
    margin-bottom: 45px;
}

.docentes{
    height: 750px;
}

.modalidad{
    position: relative;
    top: 50px;
}

#comisiones-responsive a{
    width: 15%;
}

.modalidad h2{
    margin-bottom: 25px;
}

.modalidad article{
    width: 95%;
    padding: 0 2.5% 0 2.5%;
    margin-top: 5px;
    margin-bottom: 0px;
}

.modalidad article:nth-child(2){
    margin-bottom: 50px;
}

#legales{
    display: none;
}


#logosfooter{
    display: none;
}

#contacto{
    float: none;
    position: relative;
    width: 75%;
    margin: auto;
    padding-bottom: 5%;
    border-bottom:black;
    margin-bottom: 50px;

}


}



/* docentes */



.naranja a{
   text-decoration: none;
   color: #ff982e;
}

.turquesa a{
   text-decoration: none;
    color: #28f5d8;
}

.verde a{
   text-decoration: none;
   color: #00e553;
}


h2{
margin-top: 1%;
   
}

h3{
    width: 100%;
    font-size: 0.9em;
    margin-top: 6%;
    margin-bottom: 10px;

}

#cajadocpag3{
    float: left;
    width: 100%;
    border-top: solid 3px #b5b5b5;
}



#docentes{
   float: left;
   width: 100%; 
   padding-top: 4%;
   padding-bottom: 2%;
   margin-left:2.5%;

}

#docentes h2{
    margin-top: 6%;

}

#docentes1{
   float: left;
   width: 100%;
   border-top: solid 3px #ff982e;
   margin-right: 1.3%;

}

#docentes2{
   float: left;
   width: 100%;
   border-top: solid 3px #28f5d8;
   margin-right: 1.3%;
}

#docentes3{
   float: left;
   width: 100%;
   border-top: solid 3px #00e553;
   margin-right: 1.3%;
}

.galeriapag3{
   
    float: left;
    margin-bottom: 1%;
}

.galeriapag3 img{
    width: 130%;
 
}

.fotosdocentes{
    width: 100%;
    float: left; 
    padding-bottom: 3%;
   
}

.fotosdocentes ul{
    width: 100%;
    float: left;
}

.fotosdocentes ul li{
    float: left;
    margin: 0.5%;
    display: inline-block; 
    position: relative;
}

.fotosdocentes img{
   padding-bottom: 5%;
}



.pag3nivel{
    width: 100%;
    float: left; 
    padding-bottom: 6%;
   
}

.pag3nivel ul{
    width: 100%;
    float: left;
}

.pag3nivel ul li{
    float: left;
    margin: 0.6%;
    display: inline-block; 
    position: relative;
}



.pag3nivel img{
    padding-bottom: 5%;
}

#contactodocpag3 ul li {
    background: none;
    margin: 1%;
    padding-top: 3%;
}
  

#contactodocpag3{
    
    margin-top: 1%;}




.pag3jtp1 li:hover{
     background-color: rgba(255, 152, 46, 0.23);
}

    
.pag3jtp2 li:hover{
     background-color: rgba(40, 245, 216, 0.31);
}



.pag3jtp3 li:hover{
    background-color: rgba(0, 229, 83, 0.24);
}


/*MAPA*/

#cajamapa3{
   width: 100%;
   position: absolute;
   float: left;
}

#mapatitulo{
    float: left;
    width: 100%;
    padding-top: 4%;
    padding-bottom: 2%;
    margin-left: 5.5%;
}


#mapageneral{
    width: 40%;
    position: relative;
    float: right;
}

.secciones_mapa{
    position: relative;
    margin: 3%;
}

.secciones_mapa a{
     text-decoration: none;
   
}

.secciones_mapa ul li{
     list-style: none;}


.desactivadomapa a{
    font-weight: 400;
    font-size: 0.8em;
    color: #000;
}

.blancomapa a{
    color: #ffffff;
    font-size: 1em; 
    font-weight: 400;
}

.blanco{
    position: relative;
    color: #ffffff;
}


.contenido{
    margin-left: 1%;
    font-size: 0.8em;
    color: #7256f0;
}

#secciones_mapa1{
    margin-top: 20% ;
    margin-left: 4%;
    border-bottom: 1px;
    border-bottom-color: #fff;
}

.contenido1{
   font-size: 0.8em;
    color: #7256f0;
   }


#secciones_mapa1 h2{
    list-style: none;
}

#secciones_mapa2{
    margin-top: 20% ;
    margin-left: 4%;
    background-color: #fff;
    background-size: auto;
}

#secciones_mapa2 h2{
    list-style: none;
}



/*Experiencias*/

#experienciashtml{
    margin-bottom: 4%;
}

.dalumnos{
    width: 100%;   
}

.dalumnos ul {
    list-style: none; 
}

.ialumnos{ 
    width: 100%;
}

.ialumnos ul {
    list-style: none;   
}

.dalumnos img{
    float: left;
    margin: 0.50%;
}

.ialumnos img{
    position: relative;
    float: left;
    margin: 0.50%;
}

#mgexp{
    margin: 2.1%;
}
   
.expvergaleria{
    float: left;
    margin-left: 2.1%;
    margin-bottom: 2%;

}

.expverdocente{
     float: left;
     margin-left: 2.1%;
    margin-bottom: 2%;

}



/*TEORICA*/

#tituloteoteo{ float: left;
width: 100%;
padding-top: 4%;
padding-bottom: 4%;
margin-left: 2.5%;}



#teopdfd ul{
   
list-style: none;
margin-bottom: 3%;
    
}

#teoteomg{
margin: 0.5%;
width: 32.3%;
float: left;
}

#teoteoma{
margin: 0.5%;
width: 32.3%;    
float: left;
}


#teoteomu{
margin: 0.5%;
width: 32.3%;
float: right;
}


#apuntes{
    
    width: 100%;
}
#apuntes h1{
    font-size: 1em;

}

#apuntes p{
    width: 66%;

}

#mgapuntes{
    width: 100%;
    float: left;
    margin-top:4%;
}

#mgapuntes ul{
    list-style: none;
}

#mgapuntes ul li{

    font-size: 0.8em;
}


#maapuntes{
   width: 100%;
    float: left;
    margin-top:4%;
   
}

#maapuntes ul{
    list-style: none;
}

#maapuntes ul li{

    font-size: 0.8em;
}

#muapuntes{
    width: 100%;
    float: left;
    margin-top:4%;
  
}

#muapuntes ul{
    list-style: none;
}

#muapuntes ul li{
 
    font-size: 0.8em;
}

#naranjaapunte ul li a{
    margin-left: 1%;
    color: #ff982e;
    text-decoration: none;}
    
 #turquesaapunte ul li a{
    margin-left: 1%;
    color: #28f5d8;
    text-decoration: none;}   
    
 #verdeapunte ul li a{
    margin-left: 1%;
    color: #00e553;
    text-decoration: none;}  

#negroteo ul li {
    margin: 2%;

}

#negroteo ul li a{
    margin-top: 1.5%;
    margin-left: 1%;
    color: #000;
    text-decoration: none;
}
    
 #apuntes2{
   border-top: solid 3px #7256f0; 
   margin-top: 6%;
   width: 66.5%;
   float: left;
    
 }

 #apuntes2 h2 {
    font-size: 1em;
    margin: 1%;
 
 }


.violetatext{
   
   color:#7256f0; 
}



#videoporcelana{
  
    position: relative;
    margin-top:2%;
    height: 0;
    padding-bottom: 56.25%
    
  
}

#videoporcelana iframe{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: opx;


}

 #apuntes3{
    border-top: solid 3px #000; 
    margin-top: 6%;
    width: 32.3%;
    float: right;
    
 }

#apuntes3 h2{
    font-size: 1em;
    margin: 1%;
    margin-top: 3%;
    float: left;
}

#apuntes3 p{
   
    float: left;
}

#sonidoteorica{
    float: right;
    width: 100%;
    margin-top: 4%;   
}



/* CONTACTO */

.mail2 a{
    float:right;
    min-width: 39px;
    height: 24px;
    margin-top: 0.9%;
    margin-left: 0.7%;
    background-image: url(imagenes/mail2.svg);
    background-repeat: no-repeat;
}


#cajacontpag4{
    float: left;
    width: 100%;
    border-top: solid 3px #b5b5b5;

}

#contacto4{
   float: left;
   width: 100%; 
   padding-top: 4%;
   padding-bottom: 2%;
   margin-left:2.5%;

}

#titcontacto5{
    float: left;
    width: 100%;
    border-top: solid 3px #b5b5b5;
    margin-right: 1.3%;

}

#contactopagina5{ 
    width: 49%;
    float: left;  
    }


#contactoa h2{
    float: left;
    width: 100%;
    border-top: solid 3px #b5b5b5;
    margin-right: 1.3%;
    margin-top: 5%;}




#contactob5{
    
    position: relative;
    float: left;
    width: 49%;
    margin-bottom: 6%;
    margin-left: 1.5%;
 
    }

#contactob5 h2{
    float: left;
    width: 100%;
    border-top: solid 3px #b5b5b5;
    margin-right: 1.3%;
    margin-top: 5%;}



#colorcontacto5 p{
    margin:2px;
    font-weight: 400;
    color: #000;

}

textarea {
   width: 100%;
   height:112px;


}

#cuadrocontacto{
   padding-top: 6%;
   position: relative;
   height: 20%;}


form input {
   border: none;
   background: #e3e1e1;
   width: 100%;
   padding-bottom: 2%
}

#5titulo h2{
  color: #7256f0;
}


#comollego{
  color: #7256f0;

}

#comollego p{
  color: #000;

}

#comollego ul{
    border-top: solid 1px #7256f0;
    list-style: none; 
    width: 100%;
    float: left;
}

#comollego ul li{
    font-size: 0.9em;
    float: left;
    padding-right: 4.2%;
    display: inline-block; 
    position: relative;   
}
  
#comollego ul li a{
    text-decoration: none;
    color: #7256f0;
   
}

.destacadocontacto{
    
    float:left;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.4em;
    padding-bottom: 7%;
    padding-top: 3%;
   
    

}

iframe{
    width: 100%;
    height: 100%;
}

#mapacontacto{
    padding-top: 6%;
    width: 100%;
    height: 425px;
    
}

.pag3texto{
    margin-top: 8%;
}



/*CRONOGRAMA*/




#cronotitulos {
   float: left;
width: 100%;
border-top: solid 3px #b5b5b5;
}

#cronotitulos h1{
float: left;
width: 100%;
padding-top: 4%;
padding-bottom: 2%;
margin-left: 2.5%;
}


#cronotitulos p{
  
margin-top: 1%;    
font-weight: 600;
font-size: 0.9em;}