* {
	margin: 0;
	padding: 0;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-font-smoothing: subpixel-antialiased;
}

a {
	color: inherit;
	text-decoration: inherit;
}

p a {
	text-decoration: underline;
}

a img {
	border: 0;
}

body {
	overflow: hidden;
}

input {
	border-radius: 0;
	-webkit-appearance: none;
}

.black, .yellow {
	-webkit-transition: opacity 1s;
	transition: opacity 1s;
}

.background {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	-webkit-transition: right 1s, left 1s, opacity 1s;
	transition: right 1s, left 1s, opacity 1s;
	z-index: 2;
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	/* background-image: url('/resources/images/combo.jpg'); */
	background-color: #1a1a1a;
}

.background .frame {
	background-size: auto 100%;
	background-position: top center;
	background-repeat: no-repeat;
	width: 100%; height: 100%;
	background-color: #2e2e2e;
	display: none;
}

.background img {
	display: block;
	margin: 0 auto;
	height: 100%;
	border-right: 10px solid #ffff00;
	/* display: none; */
}

.gutter {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: calc(35% + 960px);
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	background-image: url(/resources/images/christina_02.jpg);
	box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.8);
	z-index: 1;
	opacity: 0;
	-webkit-transition: opacity 1s;
	transition: opacity 1s;
}

.read_more_block {
	display: none;
}

/* MENU */

#menu {
	position: absolute;
	top: 0; left: 0; right: 0;
	font-size: 0px;
	-webkit-transition: right 1s, left 1s;
	transition: right 1s, left 1s;
	z-index: 3;
}

#menu .left, #menu .right {
	display: inline-block;
	vertical-align: top;
	width: 50%;
}

#menu .left {
	padding: 30px 40px;
}

#menu .right {
	padding: 30px;
	text-align: right;
}

#menu .right img {
	margin: 10px;
	cursor: pointer;
	width: 30px;
}

#menu .nav {
	padding: 100px 40px;
	opacity: 0;
	-webkit-transition: opacity 1s;
	transition: opacity 1s;
}

#menu .nav {
	text-align: right;
}

#menu .nav li {
	font: 400 16px 'comfortaa';
	text-transform: uppercase;
	text-align: right;
	list-style-type: none;
	line-height: 28px;
	-webkit-transition: color 250ms;
	transition: color 250ms;
}

#menu .nav li:hover {
	color: #5c5c5c;
}

#menu .nav li.s {
	color: #9B9B9B;
}

#menu .nav li.contact {
	display: inline-block;
}

#menu .nav li.contact a {
	display: none;
}

#menu .nav li.contact:hover a {
	display: inline;
}

#menu .nav li.contact:hover span {
	display: none;
}

.x_image {
	position: relative;
	display: inline-block;
	vertical-align: top;
}

.x_image img {
	position: absolute;
	top: 0; left: 0;
}

.x_image img.aspect {
	position: static;
	opacity: 0;
}

/* PAGE */


#page {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 100%;
	height: 100%;
	-webkit-transition: right 1s, left 1s, box-shadow 1s, opacity 1s;
	transition: right 1s, left 1s, box-shadow 1s, opacity 1s;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	width: 65%;
	z-index: 3;
	opacity: 0;
}

#page .bounds {
	min-height: 100%;
	background-color: white;
	max-width: 960px;
	font-size: 0px;
	padding: 40px;
}

#page .menu li {
	display: inline-block;
	padding-right: 30px;
	-webkit-transition: color 250ms;
	transition: color 250ms;
}

#page .menu li.s {
	color: #9B9B9B;
}

#page .menu li:hover {
	color: #5c5c5c;
}

#page h1, #page .menu {
	font: 500 17px 'comfortaa';
	text-transform: uppercase;
	padding-bottom: 5px;
	border-bottom: 1px solid black;
	margin-bottom: 30px;
	position: relative;
}

#page h2 {
	font: 500 15px 'comfortaa';
	text-transform: uppercase;
	margin-bottom: 15px;
}

#page h2 span {
	text-transform: lowercase;
}

#page h2 strong {
	font-size: 14px;
}


#page h3 {
	font: 500 14px 'comfortaa';
	text-transform: uppercase;
	margin-bottom: 15px;
}

#page h4 {
	font: 600 14px 'comfortaa';
	/* text-transform: uppercase; */
	margin-bottom: 15px;
}

#page p {
	font: 300 14px 'Roboto Slab';
	margin-bottom: 15px;
	color: #303030;
	line-height: 1.5;
}

#page hr {
	border: 0;
	border-bottom: 1px dashed #737373;
	margin-bottom: 15px;
}

#page .post {
	border-bottom: 1px dashed #737373;
	padding-bottom: 10px;
	margin-bottom: 30px;
}

#page .post .column {
	display: inline-block;
	vertical-align: top;
}

#page .post .column:nth-of-type(1) {
	width: 33.33%;
}

#page .post .column:nth-of-type(2) {
	padding-left: 30px;
	width: 66.66%;
}

#page .post img, #page .post iframe {
	width: 100%;
	margin-bottom: 15px;
}

#page .duo {
	border-bottom: 1px dashed #737373;
}

#page .duo.read_more {
	padding-top: 30px;
	display: none;
}

p.read_more {
	cursor: pointer;
}

#page .duo .column {
	display: inline-block;
	vertical-align: top;
	width: 50%;
}

#page .duo .column:nth-of-type(1) {
	padding-right: 15px;
}

#page .duo .column:nth-of-type(2) {
	padding-left: 15px;
}

#page .duo .column img {
	width: 100%;
	margin-bottom: 30px;
}

#page .quote {
	border-bottom: 1px dashed #737373;
	padding-bottom: 10px;
	margin-bottom: 30px;
}

#page .duo .quote {
	border: 0;
}

#page .column:nth-of-type(2) .quote {
	padding-top: 40px;
}

#page .column:nth-of-type(2) .quote p {
	text-align: right;
}

#page .quote p:nth-of-type(1) {
	font: 300 14px 'Roboto Slab';
	line-height: 1.5;
	margin-bottom: 10px;
	position: relative;
}

#page .quote p:nth-of-type(1):before {
	content: '"';
	position: relative;
	font: 300 24px 'Roboto Slab';
	left: -5px;
}

#page .quote p:nth-of-type(1):after {
	content: '"';
	position: absolute;
	font: 300 24px 'Roboto Slab';
	width: 10px;
	text-align: right;
}

#page .quote p:nth-of-type(2) {
	font: 300 12px 'Roboto Slab';
	position: relative;
	font-style: italic;
}

#page .quote p:nth-of-type(2):before {
	content: '- ';
}

#page .gallery {
	border-bottom: 1px dashed #737373;
	padding-bottom: 30px;
	margin-bottom: 30px;
}

#page .gallery .column {
	display: inline-block;
	vertical-align: top;
	width: 33.33%;
}

#page .gallery .column:nth-of-type(1) {
	padding-right: 10px;
}

#page .gallery .column:nth-of-type(2) {
	padding-left: 5px;
	padding-right: 5px;
}

#page .gallery .column:nth-of-type(3) {
	padding-left: 10px;
}

#page .gallery .column img {
	width: 100%;
	margin-bottom: 10px;
}

#page .shop .column {
	display: inline-block;
	vertical-align: top;
}

#page .shop .column:nth-of-type(1) {
	width: 60%;
}

#page .shop .column:nth-of-type(2) {
	width: 40%;
	padding-left: 30px;
}

#page .shop .clp {
	height: 102px;
	margin-bottom: 15px;
}

#page .shop .clp img {
	float: left;
	margin-right: 10px;
}

#page .shop .clp p {
	font: 300 16px 'comfortaa';
	line-height: 22px;
	max-width: 300px;
}

#page .shop p strong {
	font: 500 14px 'comfortaa';
}

#page .shop ul {
	margin-bottom: 15px;
}

#page .shop li {
	margin-bottom: 5px;
}

#page .shop li.all {
	margin-top: 10px;
}

#page .shop ul h3 {
	margin: 0;
	cursor: pointer;
}

#page .shop ul h3:after {
	content: ' >';
}

#page .shop li.s h3:after {
	content: ' >>';
}

#page .shop li p:nth-of-type(1) {
	margin-top: 15px;
}

#page .shop .group {
	margin-bottom: 60px;
}

#page .shop .group h3:before {
	content: '> ';
}

#page .shop .item {
	border: 1px dashed #737373;
	padding: 15px 15px 0px 15px;
	position: relative;
	margin-bottom: 15px;
}

#page .shop .item h4:nth-of-type(2) {
	position: absolute;
	top: 15px; right: 15px;
}

#page .shop .item .more {
	display: none;
}

#page .shop .item table {
	font: 300 16px 'Roboto Slab';
	margin-bottom: 15px;
	color: #303030;
	table-layout: fixed;
}

#page .shop .item td:nth-of-type(1) {
	width: 60px;
}

#page .shop .item td:nth-of-type(2):before {
	content: ': ';
}

form {
	display: inline-block;
	vertical-align: top;
}

.button {
	border-radius: 3px;
	background-color: #1F4FA6;
	color: white;
	font: 500 14px 'comfortaa';
	padding: 5px 10px;
	display: inline-block;
	vertical-align: top;
	margin-right: 10px;
	margin-bottom: 15px;
	cursor: pointer;
	border: 0;
}

#page .shop .item .button:nth-of-type(4) {
	position: absolute;
	right: 15px;
	margin: 0;
}

.shop_control {
	position: absolute;
	right: -10px;
	bottom: -10px;
}

/* STATE */

body .black {
	opacity: 0;
}

body.open .black {
	opacity: 1;
}

body.open .yellow {
	opacity: 0;
}

body.open .gutter {
	opacity: 1;
}

body.open .background {
	right: 65%;
}

body.open .background .frame {
	/* background-position: right top; */
}

body.open #menu {
	right: 65%;
}

body.open #menu .nav {
	opacity: 1;
}

body.open #page {
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.8);
	left: 35%;
	opacity: 1;
}

.mobile {
	display: none;
}

@media (max-width: 1230px) {
	#menu, body.open #menu {
		width: auto;
		position: relative;
		left: 0; right: 0;
	}
	
	#page {
		position: absolute;
		top: 100%; right: 0; bottom: 0; left: 0;
		-webkit-transition: top 1s, box-shadow 1s;
		transition: top 1s, box-shadow 1s;
		width: 100%;
	}
	
	body.open #page {
		left: 0; right: 0;
		top: 380px;
	}
	
	body {
		overflow: auto;
	}

	.background, body.open .background {
		right: 0;
	}
	
	.background .frame, body.open .background .frame {
		background-position: top center;
		background-size: cover;
		display: block;
	}
	
	.background img {
		display: none;
	}
	
	.gutter {
		display: none;
	}
	
	#menu .nav {
		padding: 0px 40px 40px 40px;
	}
	
	#menu .nav li.contact a {
		display: inline;
	}
	
	#menu .nav li.contact span {
		display: none;
	}
	
	#page .bounds {
		max-width: none;
	}
}

@media (max-width: 800px) {
	#page, #menu, body.open #page, body.open #menu {
		width: auto;
		position: relative;
		left: 0; right: 0; top: 0;
		opacity: 1;
	}

	.desktop {
		display: none;
	}
	
	.mobile {
		display: block;
	}
	
	#page .bounds {
		padding: 20px;
	}
	
	#menu .left {
		padding: 10px 20px;
	}
	
	#menu .left img {
		width: 180px;
	}
	
	#menu .right {
		padding: 10px;
	}
	
	#menu .nav {
		height: 0px;
		padding: 20px;
		-webkit-transition: height 1s, margin 1s;
		transition: height 1s, margin 1s;
		margin-top: -30px;
	}
	
	body.open #menu .nav {
		height: 250px;
		margin-top: 0px;
	}
	
	.column {
		display: block !important;
		width: auto !important;
		padding: 0 !important;
	}
	
	.background .frame, body.open .background .frame {
		background-position: top center;
	}
	
	body.open .background .frame {
		opacity: 1;
	}
	
	.background .frame {
		opacity: 0;
		-webkit-transition: opacity 1s;
		transition: opacity 1s;
	}
	
	.background.fixed .frame {
		opacity: 1;
	}
	
	body {
		-webkit-overflow-scrolling: touch;
	}
	
	.background, body.open .background {
		/* position: absolute; */
	}
}