/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
=-=-=- STYLES DESIGNED AND BUILT BY IAN BESLER -=-=-=
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */

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

	* {
		margin: 0;
		padding: 0;
		text-align: center;
		font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
		margin: auto;
	}
	
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-=-=-= THESE CLASSES MAKE THE FIGCAPTION TEXT -=-=-= 
=-=-=-= INVISIBLE UNTIL IT GETS MADE VISIBLE -=-=-=-
-=-=-=-=-=-=- IN THE MEDIA RULES BELOW =-=-=-=-=-=-=
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */
	.show-mobile,.show-tablet,.show-laptop,.show-desktop {
		display: none;
	}

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
-=-=-=-=-= MOBILE DISPLAY -=-=-=-=-=-
=-=-=- (0px WIDE - 512px WIDE) -=-=-=
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

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

		figure#mobile {
			max-width: 375px;
			height: 234px;
			background-image: url('../img/mojave-mobile-375px.jpg');
			background-size: contain;
			background-repeat: no-repeat;
		}

		.show-mobile {
			display: initial;
		}

	}

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-=-=-=-=- TABLET SCREEN DISPLAY -=-=-=-=
=-=-=- (513px WIDE - 1365px WIDE) =-=-=-
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */

	@media screen and (min-width: 513px) and (max-width: 1365px) {

		figure#tablet {
			max-width: 768px;
			height: 480px;
			background-image: url('../img/mojave-tablet-768px.jpg');
			background-size: contain;
			background-repeat: no-repeat;
		}

		.show-tablet {
			display: initial;
		}

	}

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
-=-=-=-=-=-= LAPTOP DISPLAY -=-=-=-=-=--=
=-=-=- (1366px WIDE - 1920px WIDE) -=-=-=
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

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

		figure#laptop {
			max-width: 1366px;
			height: 854px;
			background-image: url('../img/mojave-laptop-1366px.jpg');
			background-size: contain;
			background-repeat: no-repeat;
		}

		.show-laptop {
			display: initial;
		}

	}

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
-=-=-= DESKTOP OR TELEVISION DISPLAY =-=-=-
=-=-=- (1920px OR WIDER BREAKPOINT) =-=-=-=
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

	@media screen and (min-width: 1920px) {

		figure#desktop {
			max-width: 1920px;
			height: 1200px;
			background-image: url('../img/mojave-desktop-1920px.jpg');
			background-size: contain;
			background-repeat: no-repeat;
		}

		.show-desktop {
			display: initial;
		}

	}