html, body {
	height: 100%;
}

body {
	font-family: "pragmatica-web";
	font-size: 100%;
	font-weight: 500;
	color: #fff;
	background-color: #1e1e1e;
	-webkit-font-smoothing: antialiased;
	-webkit-backface-visibility: hidden;
	background: #1e1e1e;
}

div {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
 	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box; 
}

h1, h2 {
	font-weight: 700;
	padding: 36px 0 6px;
}

h2 {
	font-size: 14px;
	width: 100%;
	text-align: center;
}

a {
	text-decoration: none;
	outline: none;
	color: #fff;
	font-weight: 500;
	opacity: 0.7;
	-webkit-transition: opacity 300ms;
	transition: opacity 300ms;
}

.no-touch a:hover {
	opacity: 1;
	transition: opacity 50ms;
}

/*
*	Page container
*/

	.container {
		background: #1e1e1e;;
		min-width: 320px;
		width: 100%;
		height: 100%;
		min-height: 100%;
		height: auto!important;
		position: relative;
	}

/*
*	Page content
*/
	.blanket {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 997;
		background: #1e1e1e;
		opacity: 1;
		-webkit-transition: all 400ms ease-in-out;
  		   -moz-transition: all 400ms ease-in-out;
  			 -o-transition: all 400ms ease-in-out;
  				transition: all 400ms ease-in-out;
	}

	.blanket.fade {
		opacity: 0;
	}

	.blanket.hide {
		visibility: hidden;
	}

	.blanket.cover {
		opacity: 0.8;
		cursor: pointer;
	}

	/*.content {
		width: 100%;
		height: 100%;
		min-height: 650px;
		max-height: 950px;
		position: relative;
		overflow: hidden;
		top: 50%;
		-webkit-transform: translateY(-50%);
  		transform: translateY(-50%);
	}*/

/*
*	Page sidebar
*/

	.button {
		display: block;
		position: fixed;
		top: 0;
		right: 40px;
		z-index: 999;
		line-height: 16px;
		padding: 14px 0;

	}

	.button, .logo, .logo .mark, .logo .type, .menu, .sections, .showcase, .box img {
		-webkit-transition: all 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000); 
		   -moz-transition: all 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000); 
			 -o-transition: all 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000); 
				transition: all 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
	}

	.logo {
		display: block;
		position: fixed;
		top: 0;
		left: 36px;
		width: 148px;
		height: 44px;
		z-index: 999;
		opacity: 1;
	}

		.logo .mark {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 44px;
			height: 44px;
			background: transparent url(../imgs/logo.svg) center no-repeat;
			background-size: 36px 36px;
		}

		.logo .type {
			display: block;
			position: absolute;
			top: 0;
			left: 44px;
			width: 104px;
			height: 16px;
			padding: 14px 0;
			font-weight: 500;
			text-align: center;
		}

	.menu {
		position: fixed;
		left: -240px;
		top: 0px;
		min-height: 100%;
		height: 100%;
		width: 240px;
		background: #000;
		z-index: 998;
	}

	.menu.is-open {
		-webkit-transform: translateX(240px);
  		transform: translateX(240px);
	}

		.menu .sections {
			position: absolute;
			top: 80px;
			width: 100%;
		}

		.menu a {
			display: block;
			width: 100%;
			padding: 3px 0;
			line-height: 16px;
			text-align: center;
		}

/*
*	Showcase
*/

	.showcase {
		position: absolute;
		width: 100%;
		max-width: 1360px;
		top: 0;
		left: 0;
	}

	.showcase.menu-open {
		-webkit-transform: translateX(100px);
  		transform: translateX(100px);
	}

		.showcase span {
			display: block;
			font-size: 56;
			width: 660px;
			margin: 100px 0 0 100px;
		}

		.showcase .information {
			font-size: 12px;
			line-height: 18px;
			padding: 40px 40px 80px;
			margin: 0 auto;
			max-width: 480px;
		}
			.showcase .information p {
				padding: 0 0 12px;
			}

			.showcase .information ul {
				padding: 0 20px 20px;
				margin: 0;
			}

				.showcase .information ul li {
					padding: 0 0 6px;
				}

	.gallery {
		padding-top: 40px;
	}

	.box {
		margin: 10px 20px;
		background: #000;
	}

		.box img {
			width: 100%;
			height: auto;
		}

			.box img.hide { visibility: hidden;}

			.box img.fade { opacity: 0; }

/*
*	Queries
*/

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


	.sidebar {
		width: 240px;
		height: 100%;
	}

	.logo {
		width: 140px;
		height: 140px;
		left: 50px;
		top: 30px;
	}

		.logo .mark {
			background-size: 100% 100%;
			width: 80px;
			height: 80px;
			left: 30px;
		}

		.logo .type {
			width: 140px;
			left: 0;
			top: 80px;
		}

	.menu {
		-webkit-transform: translateX(240px);
  		transform: translateX(240px);
  		background: #1e1e1e;
	}

		.menu .sections {
			top: 180px;
		}

	.button {
		-webkit-transform: translateY(-44px);
  		transform: translateY(-44px);
	}

	.showcase {
		padding-left: 240px;
	}

	.showcase.menu-open {
		-webkit-transform: translateX(0px);
  		transform: translateX(0px);
	}

/*
	.sidebar .button {
		-webkit-transform: translateY(-100px);
  		transform: translateY(-100px);
	}*/

}