#previous {
  -webkit-border-radius: 40;
  -moz-border-radius: 40;
  border-radius:5px;
  font-family: Arial;
  color: #ffffff;
  font-size: 14px;
  background: #1caab1;
  text-decoration: none;
  width:30px;
}
#next {
  -webkit-border-radius: 40;
  -moz-border-radius: 40;
  border-radius:5px;
  font-family: Arial;
  color: #ffffff;
  font-size: 14px;
  background: #1caab1;
  text-decoration: none;
  width:30px;
}

.btn:hover {
  background: #2bb1b3;
  text-decoration: none;
}
#page1,
#page2,
#page3 {
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	display:none;
	background-repeat:no-repeat;
	-webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
}

#page1{
	background-color:#1caab1;
	background-image: url("vidal2.jpg");

}
#rect2{
	background-color:#48484a;
	width:100%;
	height:100px;
	top:7%;
	position:absolute;

	-webkit-animation-duration: 3.5s;
	animation-duration: 3.5s;
	-webkit-animation-name: slideIn;
	animation-name: slideIn;
}


#rect{
	background-color:#48484a;
	width:100%;
	height:50px;
	top:7%;
	position:absolute;

		-webkit-animation-duration: 3.5s;
	animation-duration: 3.5s;
	-webkit-animation-name: slideIn;
	animation-name: slideIn;
}


#page2{
	background-image: url("lopez.jpg");
}

#page3{
	background-image: url("kid.jpg");
}

nav {
	position:absolute;
	text-align:center;
	bottom:20px;
}
img {
    float: left;
    position: fixed;
}

h5 {
	position: fixed;
	font-family:"Roboto Slab", serif;
	font-weight:700;
	color:#1caab1;
	font-size:60px;
	top:3%;
	left:60%;

	-webkit-animation-duration: 5s;
	animation-duration: 5s;
	-webkit-animation-name: slideIn;
	animation-name: slideIn;
}

h4 {
	position: fixed;
	font-family:"Roboto Slab", serif;
	font-weight:300;
	color:white;
	font-size:30px;
	top:5%;
	left:5%;

	-webkit-animation-duration: 2.5s;
	animation-duration: 2.5s;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}
	h3 {
	position: fixed;
	font-family:"Roboto Slab", serif;
	font-weight:400;
	color:#1caab1;
	font-size:80px;
	top:55%;
	left:60%;
		-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-name: slideIn;
	animation-name: slideIn;
}

	h2 {
	position: fixed;
	font-family:"Roboto Slab", serif;
	font-weight:400;
	color:#1caab1;
	font-size:80px;
	top:55%;
	left:70%;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-name: slideIn;
	animation-name: slideIn;

}


h1 {
	position: fixed;
	font-family:"Roboto Slab", serif;
	font-weight:300;
	color:white;
	font-size:30px;
	top:5%;
	left:5%;

	-webkit-animation-duration: 2.5s;
	animation-duration: 2.5s;
	-webkit-animation-name: slideIn;
	animation-name: slideIn;
}


@-webkit-keyframes slideIn{
	0%{
		opacity:0;
		margin-left:90%;
	}
	100%{
		opacity:1;
		margin-left:0%;
	}}
@keyframes slideIn{
	0%{
		opacity:0;
		margin-left:90%;
	}

	100%{
		opacity:1;
		margin-left:0%;
	}}

@media all and (min-width: 400px) {
	    h1 {font-size:15px;}
	    h2 {font-size:40px;}
	    h3 {font-size:40px;}
	    h4 {font-size:15px;}
	    #rect2{height:50px;}
	    h5 {font-size:20px;}

	}
@media all and (min-width: 500px) {
	    h1 {font-size:15px;}
	    h2 {font-size:40px;}
	    h3 {font-size:40px;}
	    h4 {font-size:15px;}
	    h5 {font-size:20px;}
	}

@media all and (min-width: 600px) {
	    h1{font-size:30px;}
	    h5 {font-size:60px;}
	    h2 {font-size:80px;}
	    h3 {font-size:80px;}
	    h4 {font-size:30px;}
	     h5 {font-size:80px;}
	}