@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=bitter');

*{padding: 0;
margin: 0;
text-align: center;}

nav{    clear: both;
    display: block;
    font-weight: 300;
    font-family: roboto;
    position: relative;
    border-bottom: 3px solid #ccc;
    background-color: black;}

nav ul{list-style: none;
	margin: 0;
	padding: 0;}

nav ul li{display: inline-block;
	position: relative;
	line-height:48px;
	font-size:18px;
	text-transform: uppercase;
	color:#ababab;
	white-space: nowrap;
}

nav ul li a{display: block;
	text-decoration: none;
	color: #FFF;
	padding: 0 18px;}

nav ul li a:hover{background-color: cornflowerblue; color: white}

h1{font-family: roboto, arial;
display: block;
font-size: 4rem;color: black;
padding: 1.5rem; background-color: cornflowerblue;
font-weight: bold}

h2{font-family: roboto, arial;
padding: 1.5rem;
font-size: 1.5rem;color: black;
background-color: cornflowerblue;
text-transform: uppercase;
margin: none}

.texto{padding: 2rem; 
text-align: center;
background-color: white;
font-family: serif ;color: black; clear:both;}
.text{padding: 2rem 2rem 2rem 15rem; 
text-align: center;
background-color: white;
font-family: serif ;color: black; clear:both;}


h3{font-family: roboto, arial;
padding: 1rem;
font-size: 1.5rem;color: black;
background-color: white;
text-transform: uppercase;
margin: none}

p{font-family: roboto, arial;
padding: 1.5rem;
font-size: 1rem; color: black;
background-color: white;

margin: none}

h4{font-family: helvetica, arial;}
h4 a { text-decoration: none; color: black}

h6{font-family: roboto;font-size: 0.75rem}

.subtema{color: black; font-family: roboto; 
background: #fff;
padding: 2rem; text-align: center;margin-top: none}

.objetivo{margin: auto;
    width: 50%;
       padding: 10px;}

.idea{ margin: auto;
    width: 50%;
       padding: 10px;}

header{background-color: darkslateblue;}

main {background: #fff;
font-family: roboto,arial,sans-serif;
padding: 0rem; color: black}

div {max-width:60%; text-align:center;background-color: white; font-family: serif; color: black; padding-left: 15rem;padding-top:1rem; padding-bottom: 1rem}

footer{padding: 2rem; 
text-align: center;
background-color: cornflowerblue;
font-family: serif ;color: black; clear:both;}

header{width: 100%; height: 5rem;
}

article {  text-align: center; width: 25%; float:left;background-color: black}

article img{ margin-top: 1.5rem;text-align:center; width: 100%;
  

transition: filter .5s ease-in-out;
  -webkit-filter: grayscale(0%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(0%); /* FF 35+ */;   }

article img:hover {-webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(100%); /* FF 35+ */}