@import url(http://fonts.googleapis.com/css?family=Roboto:100,300,400,100italic,300italic);


html {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}

.fp-video, .ft-art, .menu-item {
  display: inline-block;
}
h1,h2,h3,h4,h5,figure,ul {
  margin: 0;
}
h1{
  font-size: 2em;
}

img {
  max-width: 100%;
  height: auto;
}


nav{
  background-color: #2E353E;
  text-align: center;
  list-style: none;
  width: 100%;
}
a{
  color: #0BC5D8;
}
a:hover{
  color: #EA6E39;
}
a:visited{
  color: #AAAAAA;
}
a:active{
  color: #FF0000;
}

#btn-menu{
	display: none;

}

header label{
       display: none;
       width: 30 px
       height: 30px;
       padding: 10px;
       border-right: 1px solid #fff;
       background: #2E353E;
}
header label:hover{
       cursor: pointer;
       background: #2E353E;
}
.menu ul{
       margin: 0;
       list-style: none;
       padding: 0;
       display: flex;
       
}
.menu li{
       border-right: 1px #fff;
}
.menu li:hover{
       background: #0BC5D8;
}
.menu li a{
       display: block;
       padding: 15px 24px;
       color: #fff;
       text-decoration: none
}
@media (max-width: 768px){
    header label{
         display: block;
    }
    .menu {
       position: absolute;
       background: #2E353E;
       width: 70%;
       margin-left: -100%;
       transition: all 0.5s;
   }
   .menu ul{
       flex-direction: column;

   }
   .menu li{
       border-top: 1px solid white;
   }
   #btn-menu:checked ~ .menu {
       margin: 0;

   }
}
/*Estilos para formulario*/

.contenedor .formulario{
  display: flex;
  justify-content: center;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
}
.formulario form{
  display: flex;
  justify-content: space-around;
  width: 90%;
  flex-wrap: wrap;
}

.formulario form div{
  padding: 10px;
}

/* Estilos para el Footer */

footer{
  background-color: #2E353E;
  color: #fff;
  clear: both;
  line-height: 30px;
  text-align: center;
  padding: 45px;
}
article{
  padding: 30px;
  background-color: #F2F2F2;
  margin: 20px 0;
}
/* Ancho de la página */

.contenedor{
  max-width: 1024px;
  margin: 0 auto;
}

/* logo */

.logo{
  margin: 25px;
  text-align: center;

}


/* Estilo para los botones */



.boton-container{
  text-align: center;
  background-color: #EA6E39;
  margin: 0 auto;
  width: 300px;
}
.boton-container a{
  text-decoration: none;
  color: #fff;
}
/*estos son los cuadritos*/
.boton-container :hover{
  background-color: #1FBEA4;
}
.boton{
  padding: 15px;
}
/* Estilo para los artículos */

article{
  padding: 30px;
  background-color: #F2F2F2;
  margin: 20px 0;
}
.art-image{
  display: inline-block;
  width: 210px;
  margin-right: 10px;
}
.art-cont{
  display: inline-block;
  width: 740px;
  vertical-align: top;
}

figcaption{
  background-color: #1FBEA4;
  color: #fff;
  text-align: center;
  padding: 5px;
}
article h1{
  border-bottom: solid thin black;
}





div.noticia {
  width: 50%;
  margin: 20px auto;
  background-color: #449;
  color: #fff;
  padding: 15px;
}

div.noticia img.izquierda {
  float: left;
  margin-right: 15px;
}

div.noticia img.derecha {
  float: right;
  margin-left: 15px;
}

div.reset {
  clear: both;
}