#wrapper-background {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-image: url(../img/background.jpg);
	background-position: center;
	background-size: cover;
}

#wrapper {
	width: 100%;
	min-height: 100vh;
	box-sizing: border-box;
	position: relative;
	z-index: 2;
	padding: 20px 20px 50px;
}

#wrapper > figure {
	position: relative;
	margin: 0 auto;
	height: 50vh;
	width: 80%;
	max-width: 500px;
	background-image: url(../img/logo.png);
	background-position: bottom center;
	background-size: contain;
	background-repeat: no-repeat;
}

#wrapper > figure img {display: none}

#wrapper > article {
	width: 80%;
	position: relative;
	margin: 0 auto;
	padding: 50px 0 30px;
}

h1 {
	font-size: 100px;
	line-height: 100px;
	font-weight: 300;
	margin-bottom: 40px;
}

.box-link {
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid white;
	background-color: rgba(255,255,255,0);
	transition: background-color 0.25s;
}
.box-link:hover {background-color: rgba(255,255,255,0.25)}

footer {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	padding: 0 20px 20px;
}

footer a {white-space: pre}


/* GRID: 1280px */
@media all and (max-width: 1280px) {
	
#wrapper > figure {height: 45vh}	
	
h1 {
	font-size: 80px;
	line-height: 80px;
	margin-bottom: 20px;
}	
	
}


/* GRID: 1024px */
@media all and (max-width: 1024px) {
	
h1 {
	font-size: 60px;
	line-height: 60px;
	margin-bottom: 20px;
}	
	
}


/* GRID: 768px */
@media all and (max-width: 768px) {
	
h1 {
	font-size: 50px;
	line-height: 50px;
	margin-bottom: 10px;
}

#wrapper > article {
    width: 90%;
    padding: 40px 0 30px;
}

.box-link:hover {background-color: rgba(255,255,255,0)}

footer {padding: 0 20px 10px}	
	
}


/* GRID: 440px */
@media all and (max-width: 440px) {
	
#wrapper > figure {width: 90%}

h1 {
	font-size: 40px;
	line-height: 40px;
	margin-bottom: 10px;
}
	
}