/*
____________________________________________________
____________________________________________________
___________________ LAPTOP SCREEN __________________
______________________ 1355 PX _____________________
____________________________________________________
____________________________________________________
*/

@media screen and (max-width: 1366px) {

	body {
		background-image: url("../img/diagonal_lines_7_8px.png");
	}

	h2 {
		font-size: 1em;
	}

		header img.header-icons {
			width: 20px;
		}

	figcaption {
		font-size: 0.8em;
	}

}

/*
____________________________________________________
____________________________________________________
___________________ IPAD PORTRAIT __________________
______________________ 768 PX _____________________
____________________________________________________
____________________________________________________
*/

@media screen and (max-width: 768px) {

	section {
		margin: 2% 0 0 2%;
		width: 96%;
		display: block;
	}

	div#gallery-frame {
		height: 60vw;
	}

}

/*
____________________________________________________
____________________________________________________
___________________ SMALL MOBILE ___________________
______________________ 500 PX ______________________
____________________________________________________
____________________________________________________
*/

@media screen and (max-width: 500px) {

	body {
		background-image: url("../img/diagonal_lines_9_6px.png");
	}

	header {
		margin: 5% auto 0 auto;
		width: 90%;
	}

	header img#create-logo {
		margin-top: 5%;
		width: 80%;
	}

		.header-banner {
			padding-bottom: 5%;
		}

		.header-banner span {
			font-size: 0;
		}

		h2 {
			font-size: 1em;
		}

		header img.header-icons {
			width: 20px;
		}

	section {
		margin: 5% 0 0 5%;
		width: 90%;
	}

	div#gallery-frame {
		height: 80vh;
	}

		figcaption {
			width: 90%;
			margin: 5%;
		}

	footer {
		margin: 5% 0 5% 5%;
		width: 80%;
		padding: 5%;
	}

	footer div {
		width: 100%;
		display: block;
		text-align: center;
	}

		footer div#footer-right {
			margin-top: 1em;
			text-align: center;
		}

}

/*
____________________________________________________
____________________________________________________
____________________ TINY MOBILE ___________________
______________________ 400 PX ______________________
____________________________________________________
____________________________________________________
*/

@media screen and (max-width: 400px) {

	h2 {
		font-size: 0.8em;
	}

	header img.header-icons {
		width: 15px;
	}
}