body {
	background: white;
	font-family: 'Roboto Mono', monospace;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: .3px;
	color: black;
	margin: 0;
	padding: 0;
}

p a {
	font-weight: bold;
	text-decoration: none;
	color: black;
	box-shadow: 0 2px 0 0 #FFFFFF, 0 3px 0 0 rgba(0,0,0,.15);
	transition: all .15s
}

	p a:hover {
		box-shadow: 0 2px 0 0 #FFFFFF, 0 3px 0 0 rgba(0,0,0,.5);
	}

/*
	FULL LAYOUT
*/

	@media (min-width: 506px) {
		#mobile-layout {
			display: none
		}
	}

	#full-layout {
		height: 100vh;
		box-sizing: border-box;
	}

		#full-header {
			position: fixed;
			width: 100vw;
			min-height: 50px;
			background-color: white;
			padding: 0;
			margin: 0;
			z-index: 2
		}

			.header-col {
				width: 25vw;
				display: inline-block;
				margin: 0;
				margin-right: -7px;
				padding: 0;
				padding-top: 30px;
				padding-right: 5.5%;
				min-height: 50px;
				box-sizing: border-box;
				vertical-align: top;
			}

				.header-col p {
					margin: 0 0 8px 0
				}

				#header-col-1 {
					padding-left: 30px;
				}

					#full-logo {
						width: 130px;
						height: 23px;
						background-size: 130px 23px;
						background-image: url(logo.png);
					}

				#header-col-2 {
					padding-bottom: 25px;
				}

				#header-col-3 {
					padding-bottom: 25px
				}

		#full-content {
			width: 100vw;
			height: calc(80vh);
			background-color: black;
			position: fixed;
			top: 20%;
			z-index: 1;
		}

			.content-col {
				width: 25vw;
				display: inline-block;
				margin: 0;
				padding: 0;
				min-height: 50px;
				box-sizing: border-box;
				margin-right: -7px;
				margin-bottom: -3px;
				height: 100%;
				background-size: cover;
				background-position: center
			}

				#content-col-1 {background-image: url(col-1.jpg)}
				#content-col-2 {background-image: url(col-2.jpg)}
				#content-col-3 {background-image: url(col-3.jpg)}
				#content-col-4 {background-image: url(col-4.jpg)}


/*
	IPAD ADJUSTMENT
*/

	@media (max-width: 1024px) {
		#full-content {
			width: 100vw;
			height: calc(70vh);
			background-color: black;
			position: fixed;
			top: 30%;
			z-index: 1;
		}
	}


/*
	MOBILE LAYOUT
*/

	/* Desk with phone-sized window... I mean, I guess? */
		@media (max-width: 505px) {
			#full-layout {display:none;}
		}

	/* Actual mobile devices */
		@media (max-device-width: 505px) {
			#full-layout {
				display:none;
			}
			#mobile-layout {
				display: block;
				height: 100vh;
				width: 100vw;
				box-sizing: border-box;
			}
		}

	#mobile-logo {
		width: 136px;
		height: 24px;
		background-size: 136px 24px;
		background-image: url(logo.png);
		margin: 17px 0 0 15px
	}

	.modal-window {
	  position: fixed;
	  background-color: rgba(0, 0, 0, .2);
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left: 0;
	  z-index: 3;
	  opacity: 0;
	  pointer-events: none;
	  -webkit-transition: all .2s;
	  -moz-transition: all .2s;
	  transition: all .2s;
	}

		.modal-window:target {
		  opacity: 1;
		  pointer-events: auto;
		}

				#mobile-about-box {
					position: fixed;
					top: 0;
					width: 100vw;
					min-height: 50px;
					background-color: white;
					padding: 0;
					margin: 0;
					z-index: 3;
					visibility: visible;
					opacity: 1;
				}

					#mobile-about-box:target {
						visibility: visible;
						opacity: 1;
					}

					#mobile-close-button {
						position: fixed;
						right: 20px;
						top: 22px
					}

						#mobile-close-button p {
							margin: 0
						}

					#mobile-about-text {
						margin: 35px
					}

						#mobile-contact-button {
							margin-top: 30px
						}

	#mobile-header {
		position: fixed;
		top: 0;
		width: 100vw;
		height: 60px;
		background-color: white;
		padding: 0;
		margin: 0;
		z-index: 2;
	}

		#mobile-about-button {
			position: fixed;
			right: 20px;
			top: 22px
		}

			#mobile-about-button p {
				margin: 0
			}

	#mobile-content {
		width: 100vw;
		height: calc(100vh - 60px);
		background-color: black;
		position: absolute;
		top: 60px;
		z-index: 1;
	}

		.content-row {
			width: 100vw;
			display: block;
			margin: 0;
			padding: 0;
			min-height: 50px;
			box-sizing: border-box;
			margin-right: 0px;
			margin-bottom: 0px;
			height: calc(25vh - 15px);
			background-size: cover;
			background-position: center
		}

			#mobile-row-1 {background-image: url(row-1.jpg)}
			#mobile-row-2 {background-image: url(row-2.jpg)}
			#mobile-row-3 {background-image: url(row-3.jpg)}
			#mobile-row-4 {background-image: url(row-4.jpg)}