@import url(https://fonts.googleapis.com/css?family=Oswald:300);
*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body{
  font-family:sans-serif;
}

a{
  text-decoration: none;
}


li{
  list-style: none;
}


body > header > nav.celu li.active a{
 background-color:#8CF4B6;
 color: blue;
 padding: 0.4em 0.4em;
}


body > header > nav.celu a:hover{
  color: #000;
  border: solid 0.1em #00FFFF;
  padding: 0.4em 0.4em;
}


body > header > nav.grandes{
  display: none;
}


#limpiar{
  
  clear: both;
  
}


header figure.logo{
  width: 100%;
  margin: 0px auto;
  text-align: center;
  
}

header{
  background-color: #0000AB;
  width: 100%;
  background-image: url(../img/bg-header.jpg);
  background-repeat: no-repeat;
  margin: 0 auto;
}


nav{
  text-align: center;

}

nav a{
color: #fff;
  
}


.submenu{
  display: none;
  text-align: center;
  width: 100%;
  margin:0 auto ;
}




nav .celu ul li a:hover{
 color:blue;
 cursor:pointer;
}
  

  
nav.celu ul li:hover ul{
 display: block;
 line-height: 2em;
 cursor:pointer;

}

main figure.video{
  width: 100%;
  height: 6em;
  margin: 0 auto;
  padding: 2em  2em;
  text-align: center;

  
}


main figure.video iframe{

  border: solid 0.3em #8CF4B6;
  
}


#destacado{
  float: right;
  background-color: rgba(0, 0, 171, 0.8);
  width: 60%;
  height: auto;  
  z-index: 1;
  position: relative;
  padding: 2em 2em;
  margin: -4em 2em -2em 2em;
  color:#8CF4B6; ;
}


#destacado > a.tit-destacado{
  font-size: 1em;
  color: #8CF4B6;
  background-color: #000;
  display: compact;
  font-family: 'Oswald', sans-serif;
  font-size: 1.3em;
  font-weight: 300;
 
}

#destacado > a.tit-destacado2{
  font-size: 1em;
  color: #000;
  background-color:#8CF4B6;
  display: compact;
  font-size: 0.8em;
 
}

.mas{
  
  font-size: 1em;
  color: #000;
  background-color:#8CF4B6;
  font-size: 0.8em;
  width: 20%;
  text-align: center;
  cursor: pointer;
  
}

.dos-juntos{
  width: 100%;
  float: left;
  padding: 1em 1em;
}

.col1{
  float: left;
  width:40%;
}


.col2{
  float: left;
  width: 40%;
}
  
#destacado > p{
  font-size: 0.7em;
}

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


article{
  font-family: 'Oswald', sans-serif;
  font-size: 1.3em;
  font-weight: 300;
}
  
#contenedor > article.tres > textarea{
  font-size: 0.9em;
}
  
article.uno{

  width: 100%;
  margin:0 auto;
 
 color: blue;
 padding: 1em 1em;
}  

a.compact{
 background-color: #000;
 color:#8CF4B6;
 font-size: 1.5em;
 text-align: center;
 width: 100%;
display: block;
}
  
article.dos{
    float: left;
    width: 100%;
    margin:0 auto;
   
    padding: 1em 1em;
    
  }  
  
  
article.dos p{
  font-size: 0.8em;
  line-height: 2;
 
  
}  
    
article.tres{
  float: left;
  width: 100%;
  margin:0 auto;
 
  padding: 1em 1em;
  color: blue;
}  

#contenedor{
  width: 100%;
  margin: 0 auto;
  padding: ;
  
}

#slider{
  
    background-color:blue;
    width: 100%;
    height: 25em;
}

footer p{
  width: 100%;
  float: left;
  margin: 0px auto;
  padding: 2em 2em;
  font-size: 10px;
  text-align: center;

}
#logos{
  width: 100%;
  text-align: center;
 }

textarea{
  border: solid 0.2em #8CF4B6;
  color: blue;
  width: 100%;
}




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

header{
background-repeat: repeat-x;
}

#slider{
  background-color: #fff;
  height: 23em;
  
}

#contenedor{
  width: 100%;
  padding: 1em 2em;
  margin: 0 auto;
}

#contenedor > article.uno{

  width: 33%;
  height: auto;
  float: left;
  height: 24em;

  }
    
    
#contenedor > article.uno-4{

  width: 25%;
  height: auto;
  float: left;
  height: 24em;
  padding-right: 2em;
 

  }

#contenedor > article.dos{
  float: left;
  width: 34%;
  height: 24em;
  
}
    
#contenedor > article.dos-4{
  float: left;
  width: 25%;
  height: 24em;
   padding-right: 2em;
}

#contenedor > article.tres{
  float: left;
  width: 33%;
  height: 24em;
  
}

#contenedor > article.tres-4{
  float: left;
  width: 25%;
  height: 24em;
  padding-right: 2em;
}
    
#contenedor > article.cuatro-4{
  float: left;
  width: 25%;
  height: 24em;
  padding-right: 2em;
}

.dos-juntos{
  width: 60%;
}

#fondo-foot{
background-image: url(img/bg-footer.jpg);
background-repeat: repeat-x;
width: 100%;
height: 8em;
margin: 10em 0 0;

}

.accion{
background-color:#7C7C7D;
width: 100%;
background-image: url(../img/bg-header-grey.jpg);
background-repeat: repeat-x;
margin: 0 auto;
}


.hola{
background-color:#79CC96;
width: 100%;
background-image: url(../img/bg-header-green.jpg);
background-repeat: repeat-x;
margin: 0 auto;
}


#mapa{
  width: 100%;
}

#luz{
background-image: url(img/luz.jpg);
background-repeat: no-repeat;
/* width: 100%; */
height: 224px;
margin: -16.53em 9em 0;
}

footer{
  width: 70%;
  margin: 0 auto;
  

}

#destacado{
  width: 32%;
}


body > header > nav.celu{
  display: none;
}

body > header > nav.grandes{
  display: inline-block;
  width: 100%;
  
}

body > header > nav.grandes li{
  display: inline-block;
  width: 10%;
  margin: 0 auto;
  line-height: 2em;
  padding-top: 2em;
}

body > header > nav.grandes li.active a{
 background-color:#8CF4B6;
 color: blue;
 padding: 0.4em 0.4em;
}


body > header > nav.grandes a:hover{
  color: #000;
  border: solid 0.1em #00FFFF;
  padding: 0.4em 0.4em;
}

.flecha-right{
    width:0px;
    height:0px;
    border-bottom:20px solid transparent;  /* izquierda flecha */
    border-top:20px solid transparent; /* derecha flecha */
    border-left:20px solid #fff; /* base flecha y color*/
    margin: 0em -2em;
 
}

#destacado > a.tit-destacado{
  font-size: 2em;
}

#destacado > a.tit-destacado2{
  font-size: 1em;
}

}