@import url('reset.css');
@import url('common.css');
@import url('nd.css');

/* General
------------------------------------------------------------------------------*/
body {
	font-family: UniversLTPro-45Light;
	font-weight: normal;
	font-style: normal;
	
	
	font-size: 12px;
	color: #666;
	background-color: #fff;
	
	/*min-width: 960px;*/
	
	position: relative;
}

#main div.wrapper {
	padding: 30px 0px;
}

div.content_wrapper {
	margin: 0 16px 0 16px;
}

div.content_wrapper div.content {
	max-width: 800px;
}




/* General Content
------------------------------------------------------------------------------*/
.general_content ul { list-style: disc; }
.general_content ol { list-style: decimal; }

strong { font-weight: bold; }
em { font-style: italic; }

.general_content ul,
.general_content ol {
	margin: 0 0 0 2.5em;
}

.general_content li,
.general_content p {
	font-size: 20px;
	line-height: 1.4em;
	margin: 0 0 0.8em 0;
	
	
	font-weight: 400;
}

.general_content h1 { font-size: 24px; }
.general_content h2 { font-size: 20px; }
.general_content h3 { font-size: 18px; }
.general_content h4 { font-size: 16px; }
.general_content h5 { font-size: 14px; }

.general_content h1,
.general_content h2,
.general_content h3,
.general_content h4,
.general_content h5 {
	font-weight: normal;
	color: #333;
	line-height: 1.4em;
	margin: 0 0 0.8em 0;
}

.general_content div.hl_block {
	background-color: #eee;
	padding: 15px;
	margin: 0 0 1.4em 0;
	border-radius: 8px;
}

* p:last-child {
	margin: 0 0 0 0;
}


.general_content blockquote {
	color: #666;
	background-color: inherit;
	line-height: 1.5em;
	font-style: italic;
	font-size: 120%;
	margin: 0 30px 1.4em 30px; 
	text-indent: 1em;
	padding: 0.5em 0 0 0;	
	position: relative;
	
}

.general_content blockquote p:before,
.general_content blockquote p:after {
	color: #CCC;
	font-size: 200%;
	display: inline;
	line-height: 0;
	position: relative;
}

.general_content blockquote p:before {
	content: '❝';
	top: 0.2em; left: -0.5em;
}

.general_content blockquote p:after {
	content: '❞';
	top: 0.4em; left: 0.2em;
}

.general_content blockquote.long p:before,
.general_content blockquote.long p:after {
	content: none;
}

.general_content blockquote.long {
	background-image: none;
	border-left: 4px solid #ccc;
	padding: 0 1.4em 0 1em;
	margin: 0 0 1.4em 1em;
	text-indent: 0;
}

.general_content p.blockquote_credit {
	text-align: right;
	margin-top: -1em;
	padding-right: 2.3em;
	color: #333;
}

.general_content p.blockquote_credit.stand_alone {
	margin-top: 1.5em;
}

.general_content a {
	color: inherit;
}
/*----------------------------------------------------------------------------*/


body {
	-webkit-text-size-adjust: 100%;
}

#header {
	position: relative;
	height: 170px;
}

div.wrapper {
	position: relative;
	max-width: 1000px;
	padding: 0 20px;
	margin: 0 auto;
	
	box-sizing: border-box;
}

#main_menu {
	background-color: #fff;
	font-size: 24px;
	padding: 24px 0 16px 0;
	text-align: left;
	margin-left: 210px;
}

#main_menu > li > a {
	
	position: relative;
	z-index: 3;
	
	display: block;
	text-decoration: none;
	color: #c6c6c6;
	padding: 0 0 14px 0;
	
	-webkit-transition: all 0.4s; /* Safari */
	transition: all 0.4s;
	
}

#main_menu > li > a > svg {
	
	display: block;
	
	margin-left: 5px;
	
	-ms-transform: rotate(0deg); /* IE 9 */
  -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
  transform: rotate(0deg);
	
	-ms-transform-origin: center middle;
	-webkit-transform-origin: center middle;
	transform-origin: center middle;
	
	position: absolute;
	top: 1.1em; right: 12px;

	-webkit-transition: all 0.4s; /* Safari */
	transition: all 0.4s;
}

#main_menu > li > a.active > svg {
	
	margin-top: 0em;
	
	-ms-transform: rotate(-180deg); /* IE 9 */
  -webkit-transform: rotate(-180deg); /* Chrome, Safari, Opera */
  transform: rotate(-180deg);
	
}

#main_menu > li > a > svg polygon {
	fill: #999 !important;
}

#main_menu > li > a.active > svg polygon {
	fill: #fff !important;
}

#main_menu > li > a.active {
	color: #fff !important;
	background-color: #666 !important;
}

#main_menu > li > a:hover {
	color: #000;
}

ul#main_menu > li {
	position: relative;
	height: 1.3em;
	float: none;
	padding-left: 0px;
}

#main_menu > li.sub_menu > a {
	padding-right: 32px;
}



#main {

}

/* Footer
------------------------------------------------------------------------------*/
#footer_main {
	min-height: 100px;
	font-size: 14px;
}

#footer_main p { margin: 0 0 2em 0; }

#footer_main div.wrapper {
	padding: 30px 20px;
	position: relative;
}

#footer_main a { text-decoration: none; }
#footer_main a:hover { text-decoration: underline; }
/*----------------------------------------------------------------------------*/


#logo_main {
	top: 15px;
	position: absolute;
	left: -70px;
}

#instagram_icon {
	position: absolute;
	right: 12px;
	top: 14px;
	opacity: 0.2;
	-webkit-transition: all 0.4s; /* Safari */
}

#instagram_icon:hover {
	opacity: 0.8;
	
}

#menu_switch {
	display: none;
	position: absolute;
	right: 0;
	font-size: 36px;
	text-decoration: none;
	color: #999;

	padding: 0 16px;

	width: 23px;
	height: 45px;
	
	z-index: 11;

}

#menu_switch:hover span {
	opacity: 0.8;
}

#menu_switch span {
	position: absolute;
	display: block;
}

#menu_switch span {
	
	width: 28px; height: 3px;
	background-color: #000;
	opacity: 0.2;
	top: 12px;
}

#menu_switch.active span {
	background-color: #fff !important;
	opacity: 1;
}

#menu_switch span.menu_line_1,
#menu_switch span.menu_line_2,
#menu_switch span.menu_line_3 {
	left: 14px;
	-webkit-transition: all 0.4s; /* Safari */
	transition: all 0.3s;
	
	
}

#menu_switch span.menu_line_1 {
	top: 14px;	
}

#menu_switch span.menu_line_2 {
	top: 20px;
}

#menu_switch span.menu_line_3 {
	top: 26px;
}

#menu_switch.active span.menu_line_1,
#menu_switch.active span.menu_line_2 {
	left: 14px;
	top: 20px;
	-ms-transform: rotate(135deg); /* IE 9 */
	-webkit-transform: rotate(135deg); /* Chrome, Safari, Opera */
	transform: rotate(135deg);
	
	-ms-transform-origin: center middle;
	-webkit-transform-origin: center middle;
	transform-origin: center middle;
}

#menu_switch.active span.menu_line_2 {
	opacity: 0;
}

#menu_switch.active span.menu_line_3 {
	left: 14	px;
	-ms-transform: rotate(-135deg); /* IE 9 */
	-webkit-transform: rotate(-135deg); /* Chrome, Safari, Opera */
	transform: rotate(-135deg);
	
	-ms-transform-origin: center middle;
	-webkit-transform-origin: center middle;
	transform-origin: center middle;
	
	top: 20px;
}

#menu_switch.active {
	color: #fff;
}


div.image_tiles {
	display: block;
	max-width: 1240px;
	width: 100%;
	box-sizing: border-box;

}

div.image_tiles > div {

	float: left;
	width: 33.3333%;
	overflow: hidden;
	padding: 0 16px 32px 16px;
	
	box-sizing: border-box;

}

div.image_tiles > div.open {
	float: none;
	width: auto;
	clear: both;
}

div.image_tiles.full > div {
	width: 100%;
}

div.image_tiles > div > div {
	position: relative;
	overflow: hidden;
}

div.image_tiles > div > div > img.shaper {
	display: block;
	width: 100%; height: auto;
}

div.image_tiles > div > div > img.work {
	display: block;
	position: absolute;
	width: 100%; height: auto;
	top: 0;
}

div.image_tiles > div > div img.landscape {
	width: auto; height: 100%;
}

div.image_tiles > div > div img.portrait {
	
}




/*----------------------------------------------------------------------------*/


/* Mobile
------------------------------------------------------------------------------*/
@media only screen and (max-width: 1180px) {
	#logo_main {
		top: 15px;
		position: absolute;
		left: 16px;
	}
	#main_menu {
		margin-left: 280px;
	}
}

@media only screen and (max-width: 767px) {
	div.image_tiles > div {
		width: 100%;
	}
}

@media only screen and (max-width:1000px) {
	/*div.image_tiles > div {
		display: block;
		margin: 0 0 32px 0;
		position: relative;
		left: 0;
		height: auto;
		width: 100%; padding-top:100%;
	}
	
	div.image_tiles > div > div {
		width: auto; height: auto;
	}*/
	
}

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

}

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

}


@media only screen and (max-width: 640px) {
	
	#menu_switch {
		display: block;
	}
	
	#instagram_icon {
		top: 45px;
	}
	
	#header {
		background-color: #fff;
	
		
		/*position: fixed;
		top: 0; left: 0; right: 0;*/
		
		height: 125px;
		
	}
	
	#header #logo_main {
		top: 12px;
		left: 12px;
	}
	
	#header #logo_main img {
		width: 140px; height: auto;
	}
	
	
	#main_menu {
		
		background-color: rgb(230,0,126);
		font-size: 24px;
		padding: 70px 0 0 4px;
		
		margin-left: 0;
		
		margin-top: 0;
		
		position: fixed;
		z-index: 10;
		left: 100%; right: 0; bottom: 0; top: 0;
		
		-webkit-transition: all 0.5s; /* Safari */
		transition: all 0.5s;
		
		z-index: 10;
		
		overflow: hidden;
		
		width: 100%;
		
	}
	
	#main_menu > li > a {
		color: #fff;
		padding: 6px 18px;
	}
	
	#main_menu > li > a:hover {
		color: #fff;
	}
	
	#main_menu {

	}
	
	#main_menu.m_visible {

		left: 66px; right: 0; bottom: 0; top: 0;
	}
	
	#main_menu {
		text-align: left;
	}
	
	#main_menu > li > a > svg {
		top: 0.5em;
		right: 24px;
	}
	
	#main_menu > li > a.active > svg {

	}
	
	#main_menu > li > a > svg polygon {
	fill: #fff !important;
}

.general_content li,
.general_content p {
	font-size: 16px;
	
	
}

}




/*----------------------------------------------------------------------------*/