body {background-image:url(img/fondo.jpeg);
height: 100%;
margin:0;
}


#menu{width: 100%;
max-width: 800px;
margin: 0 auto}
.topnav {
  background-color:#aacfcf;
  overflow: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 20000;
}

/* plop*/
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 7px 20px;
  text-decoration: none;
  font-size: 30px;
    font-family: 'Amatic SC', cursive;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color:#aacfcf;
  color: white;
}

.topnav .icon {
  display: none;
}

h1 {
font-size: 6em;
color: #398a8a;
text-transform: inherit;
font-family: 'Amatic SC', cursive;
text-align: center;
margin-bottom: 10px;
margin-top: -10px;

}

h2{
font-family: 'Poppins', sans-serif;
margin-left: 5%;
margin-right: 5%;
}

.contenedor{position: absolute;
top: 50px;
left:0 auto;
width: 100%
z-index: 2000;   

}

.contenedor2{position: absolute;
left:0 auto;
width: 100%
z-index: 2000;   

}

.contenedor3{position: absolute;
left: 0;
top:0;
width: 100%}

p{font-family: 'Indie Flower', cursive;
margin-left: 1%;
margin-right: 1%;
margin-top:0;
font-size: 1.1em;}

span {
  border-right: .05em solid;
 animation: caret 1s steps(1) infinite;
}

}
#notita{position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
 margin-right: 50%;
    z-index: 999;}

img {width: 60%; height: 50;}

@keyframes caret {
  50% {
    border-color: transparent;
  }
}

.info, .infografia , .infografia2{
text-align: center; width: 100%
}

.info video {
width: 100%;
}

.infografia img {
width: 90%;
}

.infografia2 img {
width: 80%;
}

.principal{
text-align: center;

}

.principal img{
width: 100%;

}

q{
font-style: italic;
    
}

.fondo{
background-color:pink;
margin-left: 15%;
margin-right: 15%;
padding-top:20px;
}


#creditos {margin-left: 250px}
#creditos img {width: 75%; margin-top: 50px;}
#footer {background-color: #aacfcf;
width: 100%;
height: 120px;}
#footer h4 {
    color: white;
    text-align: center;
    font-size: 1.6em;
	font-family: 'Amatic SC', cursive;
	margin-top: 10px;
	 text-shadow: 1.5px 1.5px #77EDED;
   }



















































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

	.codrops-icon span {
		display: none;
	}

	.related {
		font-size: 80%;
	}

}

/* Código respondive para menú hamburguesa */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
    
    .topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
  font-size: 17px;
}
    
	
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: fixed;widows: 100%;top: 0;left: 0;}
  .topnav.responsive a.icon {
    position: fixed;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

@media screen and (max-width: 600px) {
	.info {width: 100%}
	.info iframe {width: 100%}
	.info video {width: 100%}
	.info img {width: 100%}
	h1 {font-size: 4em}
	.infografia {width: 100%}
	.infografia img {width: 100%}
	#creditos {width: 100%;
	margin-left: 0}
	#creditos img {width: 100%}
}