/* BASE */

html, body {
	height: 100%; /* This enables .slide to go full height */
}

body {
	background-color: #333;
}

/* LAYOUT */

.container {
	height: 100%; /* This enables .slide to go full height */
}

.container, .outer, .middle, .inner { 
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}


/* MODULES */
.outer {
	background: #FF0;
	width: 100%;
	height: 100%; 
	text-align: center;
	padding: 4.5%;
}

.middle {
	background: #FA0;
	width: 100%;
	height: 100%; 
	text-align: center;
	padding: 20% 5% 5%;
}

.inner {
	background: #000;
	width: 100%;
	height: 100%; 
	text-align: center;
}