/* -------------
---- CSS RESET ------
------------------*/

* {
	margin: 0;
	padding: 0;
}


/* --------------------------
---- @media Rule Media Query Breakpoints-----
Mobile: 0px - 480px wide
Large Mobile (Phablet): 481px - 768px wide
Tablet: 769px - 1365px wide
Laptop: 1366px wide
Desktop: 1920px wide

----------------------------
*/

/* --------------------------
---- MOBILE DISPLAY (1-479px WIDE but making 767 to bring it up to ) ------
----------------------------*/

@media screen and (max-width: 767px) {
	figure#mobile {
		width: 375px;
		height: 627px;
		margin-top: 2vh auto 0 auto;
	}

		h1 {
			color: white;
			padding-top: 80%;
		}

		h4, h5 {
			display: none;
		}
}

/* --------------------------
---- TABLET DISPLAY (769-1365px WIDE) ------
----------------------------*/

@media screen and (min-width: 768px) and (max-width: 1365px) {
	figure#tablet {
		width: 768px;
		height: 1024px;
		margin: 2vh auto 0 auto;
	}

		h4 {
			color: white;
			padding-top: 60%;
		}

		h1, h5 {
			display: none;
		}
}

/* --------------------------
---- LAPTOP DISPLAY (1366-1919px WIDE) ------
----------------------------*/

@media screen and (min-width: 1366px) and (max-width: 1919px) {
	figure#laptop {
		width: 1366px;
		height: 768px;
		margin: 2vh auto 0 auto;
	}

		h5 {
			color: white;
			padding-top: 25%;
		}

		h1, h4 {
			display: none;
		}

}


/* --------------------------
---- HTML5 SEMANTIC TAGS ----
----------------------------*/

section {
	width: 12.4vw;
	height: 100vh;
	float: left;
}

/* --------------------------
---- CSS COLOR CLASSES ------
----------------------------*/

.red {
	background-color: red;
}

.orange {
	background-color: orange;
}

.yellow {
	background-color: yellow;
}

.green {
	background-color: green;
}

.cyan {
	background-color: cyan;
}

.blue {
	background-color: blue;
}

.purple {
	background-color: purple;
}

.magenta {
	background-color: magenta;
}