/*
	LAYOUT GRID
*/

	body {
		font-family: -apple-system, BlinkMacSystemFont, "Roboto", arial, sans-serif;
		color: #808080;
		padding: 0px;
		margin: 0px;
		text-align: center;
		background-image: url("bg.png");
		background-size: 6px;
		background-repeat: repeat;
		background-attachment: fixed;
	}

	a {
		color: #808080;
		text-decoration: none;
		padding: 0;
		margin: 0
	}

	#header {
		margin: 0;
		padding: 0 100px 0 100px;
		height: 60px;
		width: 100vw;
		position: fixed;
		top:0px;
		backdrop-filter: saturate(200%) brightness(120%) blur(20px);
			-webkit-backdrop-filter: saturate(200%) brightness(120%) blur(20px);
		box-sizing: border-box;
		background-image: url("bg.png");
		background-color: rgba(255,255,255,.7);
		background-size: 5px;
		background-repeat: repeat;
		z-index: 5
	}

		#header-align-left {
			width: 423px;
			height: 33px;
			background-size: 423px 33px;
			background-image: url("header-align-left.png");
			position: fixed;
			top: 19px;
			left: 100px;
		}

	#page-body {
		margin-top: 0px;
		padding: 120px 100px 0 100px;
		width: 100vw;
		background-color: white;
		background-image: none;
		box-sizing: border-box;
		text-align: left;
	}

		#content {
			padding-bottom: 50px;
			background-image: none
		}

			.grid-section {
				width: calc(100vw - 200px);
				margin-bottom: 100px;
				border-left: 1px solid rgba(128,128,128,0.30);
				padding-left: 30px
			}

				.section-phase {
					text-transform: uppercase;
					color: #1D72FF;
					font-weight: 500;
					font-size: 10px;
					letter-spacing: 0.9px;
				}

				.section-title {
					text-align: left;
					color: black;
					font-size: 24px;
					width: calc(100vw - 200px);
					margin-bottom: -22px
				}

					.grid {
						width: calc(100vw - 200px);
					}

						.thumbnail-image {
							box-shadow: inset 0 0 0 1px rgba(255,255,255,0), inset 0 0 0 1px rgba(0,0,0,0.15);
							background-attachment: center top;
							background-size: cover;
							border-radius: 5px;
							display: block;
							background-color: grey;
							height: 180px;
							margin: 20px 30px 0 0;
							transition: all .2s ease-in-out
						}

								.thumbnail-A4, .thumbnail-desk, .thumbnail-iPhone {
									height: 202px;
									display: inline-block;
									padding: 0;
									transition: all .1s ease-in-out;
									vertical-align: top;
									margin-top: 22px
								}

									.thumbnail-A4 {width: 156px}

									.thumbnail-desk {width: 340px}

									.thumbnail-iPhone {width: 131px}

							.thumbnail-A4:hover, .thumbnail-desk:hover, .thumbnail-iPhone:hover {
								transform: translateY(-1px);
							}

									.thumbnail-A4:hover .thumbnail-image, .thumbnail-desk:hover .thumbnail-image, .thumbnail-iPhone:hover .thumbnail-image {
										box-shadow: inset 25px 70px 185px 0 rgba(255,255,255,.25),
													inset 0 0 0 1px rgba(0,0,0,.15),
													0 15px 75px -18px rgba(0,0,0,.3);
									}

									.thumbnail-A4:active .thumbnail-image, .thumbnail-desk:active .thumbnail-image, .thumbnail-iPhone:active .thumbnail-image {
										box-shadow: inset 25px 70px 185px 0 rgba(255,255,255,.25),
													inset 0 0 0 1px rgba(0,0,0,.15), 0 15px 75px -18px rgba(0,0,0,.3),
													inset 0 1px 149px 117px rgba(0,0,0,0.10);
									}

						.thumbnail-title {
							margin: 8px 0;
							font-size: 14px
						}

/*
	LAYOUT VIEWER
*/

	/* 1:1 centered images  */

		.full-image-desk, .full-image-1040, .full-image-595, .full-image-iPhone6 {
			border-radius: 5px;
			box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
			margin: 50px 0
		}

			.full-image-desk	{width: 1280px}

			.full-image-1040	{width: 1040px}

			.full-image-595		{width: 595px}

			.full-image-iPhone6 {width: 375px}

	/* Close button */

		#close-button {
			display: block;
			position: fixed;
			top: 20px;
			right: 20px;
			width: 30px;
			height: 30px;
			border-radius: 15px;
			backdrop-filter: blur(12px);
				-webkit-backdrop-filter: blur(12px);
			z-index: 2;
		}

			#close-bg {
				width: 30px;
				height: 30px;
				position: fixed;
				border-radius: 15px;
				margin: 0:
				padding: 0;
				background: rgba(231,231,231,.4);
				transition: all .15s ease-in-out;
			}

				#close-bg:hover {
					background: rgba(200,200,200,.4);
				}

				#close-bg:active {
					background: rgba(150,150,150,.4);
				}

				#close-icon {
					display: block;
					width: 12px;
					height: 12px;
					margin: 9px;
					background-image: url("x.png");
					background-size: 12px 12px; 
					opacity: .5
				}