@import url('https://fonts.googleapis.com/css?family=Lato|Oswald|Barrio');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box; /* to avoid adding px to total with padding or borders 
	(space inside object) marging (outside object) will still add to total */
}

html, body{
	height: 100%;
}

nav{
	position: fixed;
	top:0;
	left:0;
	background-color: red;
	color: white;
	width: 100%;
	text-align: center;
	padding: 20px;
	z-index: 999;
	font-size: 28px;
	font-family: 'Barrio', cursive;
	text-decoration:none;
}

a:link {
    text-decoration: none;
    color: white;
}

a:visited {
    text-decoration: none;
    color: white;
}

a:hover {
    text-decoration: underline;
}


section{
	width:100%;
	height:100%;
	position:relative;

}

h1{
	font-family: 'Oswald', cursive;
}

p{
	padding-top:10px;
	text-align: justify;
	font-family: 'Lato', sans-serif;
	font-size: 16px;
}

#s1{
	background:url(../images/s1.jpg) no-repeat;
	background-size: cover;

}

#s1 article{
	width: 30%;
	min-width: 300px;
	background: #fff;
	padding: 20px;
	position:absolute;
	bottom: 40px;
	left: 20px;
	border-radius:10px;
}

#s2{
 	background:url(../images/s2.jpg) no-repeat fixed;
 	background-size: cover;
 }

 #s2 article{
 	width: 30%;
 	min-width: 300px;
	background: #fff;
	padding: 20px;
	position:absolute;
	bottom: 40px;
	right: 20px;
	border-radius:10px;
}

#s3{
 	background:url(../images/s3.jpg);
 	background-size: cover;
 }

#s3 article{
 	width: 25%;
 	min-width: 300px;
	background: #fff;
	padding: 20px;
	position:absolute;
	bottom: 40px;
	left: 20px;
	border-radius:10px;
}