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

/* General
------------------------------------------------------------------------------*/
body {
	font-family: objektiv-mk1, sans-serif; 
	font-weight: 300;
	font-style: normal;
	
	
	font-size: 12px;
	color: #666;
	background-color: #fff;
	
	/*min-width: 960px;*/
	
	position: relative;
}

html,
body {
	left: 0; right: 0; top: 0; bottom: 0;
}

body.menu_open {
	overflow: hidden;
}

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

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


/* 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;
}

.general_content {
	position: relative;
}
/*----------------------------------------------------------------------------*/


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

#header {
	z-index: 10;
	position: fixed;
	top: 0; left: 0; right: 0;
}

#header div.header_content {
	z-index: 1000;
	position: relative;
	border-top: 1px solid #fff;
	background-color: blue;
	width: 100%;
	box-sizing: border-box;
}

#header div.wrapper {
	z-index: 1000;
	margin: 30px;
	position: relative;
}

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

/* Footer
------------------------------------------------------------------------------*/
#footer_main {
	min-height: 0px;
	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 {
	position: absolute;
	top: 10px;
	left: 0;
	z-index: 9;
	opacity: 1;
	-webkit-transition: all 0.3s; /* Safari */
	transition: all 0.3s;

	width: 150px; height: auto;
	max-width: 150px;
}

#menu_switch {
	display: block;
	position: absolute;
	top: 12px;
	font-size: 36px;
	text-decoration: none;
	color: #999;

	padding: 0 0;
	
	right: 0px;

	width: 62px !important;
	height: 62px;
	
	z-index: 11;

	-webkit-transition: all 0.5s; /* Safari */
	transition: all 0.5s;

	/*border: 2px solid #d0d0d0;
	border-radius: 50%;
	box-sizing: border-box;
	overflow: hidden;*/
}

#menu_switch img {

	opacity: 1;
}


#menu_switch.open img  {
	opacity: 0.3;

	-webkit-transform: rotateY(0deg); /* Safari prior 9.0 */
  	transform: rotateY(0deg); /* Standard syntax */
}


	#logo_main.spin3d img,
	#menu_switch.spin3d img {
		animation-duration: 0.5s;
  	animation-name: menu_icon_rotate;
	}

	#logo_main.spin3drev img,
	#menu_switch.spin3drev img {
		animation-duration: 0.5s;
  	animation-name: menu_icon_rotate_rev;
	}





@keyframes menu_icon_rotate {
	from {
		-webkit-transform: rotateY(0deg); /* Safari prior 9.0 */
  	transform: rotateY(0deg); /* Standard syntax */
  	animation-timing-function: ease-in-out;
  	opacity: 1;
	}

	50% {
		-webkit-transform: rotateY(180deg); /* Safari prior 9.0 */
  	transform: rotateY(180deg); /* Standard syntax */
  	animation-timing-function: ease-in-out;
  	opacity: 1;
	}

	to {
		-webkit-transform: rotateY(360deg); /* Safari prior 9.0 */
  	transform: rotateY(360deg); /* Standard syntax */
  	animation-timing-function: ease-in-out;
  	opacity: 0.3;
	}
}

@keyframes menu_icon_rotate_rev {
	from {
		-webkit-transform: rotateY(0deg); /* Safari prior 9.0 */
  	transform: rotateY(0deg); /* Standard syntax */
  	animation-timing-function: ease-in-out;
  	opacity: 0.3;
	}

	50% {
		-webkit-transform: rotateY(180deg); /* Safari prior 9.0 */
  	transform: rotateY(180deg); /* Standard syntax */
  	animation-timing-function: ease-in-out;
  	opacity: 0.3;
	}

	to {
		-webkit-transform: rotateY(360deg); /* Safari prior 9.0 */
  	transform: rotateY(360deg); /* Standard syntax */
  	animation-timing-function: ease-in-out;
  	opacity: 1;
	}
}


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 {
	
}

	#main_menu {
		
		background-color: #485156;
		font-size: 20px;
		padding: 0;
		
		margin-left: 0;
		
		margin-top: 0;
		
		position: fixed;
		z-index: 10;
		left: 0; right: 0; bottom: 100%; top: 0;
		
		-webkit-transition: all 0.5s; /* Safari */
		transition: all 0.5s;
		
		z-index: 10;
		
		overflow: hidden;

		scrollbar-width: none;
		
		width: 100%;
		
	}
	
	#main_menu.open .menu_header {
		display: block;
	}
	
	#main_menu .menu_header {
		background-color: #485156;
		background: linear-gradient(0deg, rgba(72,81,86,0) 0%, rgba(72,81,86,1) 30%);
		left: 0; top: 0;
		position: fixed;
		width: 100%; height: 150px;
		display: none;
	}
	
	#main_menu > li > a {
		color: #fff;
		padding: 6px 18px;
	}
	
	#main_menu > li > a:hover {
		color: #fff;
	}
	
	#main_menu {

	}
	
	#main_menu.m_visible {

		left: 0; 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;
}

#main_menu.open {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

#main_menu div.content {
	max-width: 800px;
	margin: 100px auto 0 auto;
	box-sizing: border-box;
	color: #fff;
	padding: 30px;
	font-size: 20px;
}

#main_menu div.content hr {
	border : 0;
	height: 0; border-bottom: 1px solid #fff;
}

#main_menu div.content {
	line-height: 1.6em;
}

#main_menu div.content p {
	margin: 0.8em 0;
}

#main_menu div.content p.copyright {
	font-size: 0.8em;
}

#main_menu div.content a {
	color: #A4ACB0;
	text-decoration: none;
}
#main_menu div.content a:hover {
	color: #fff;
}

#main_menu div.content div.social {
	position: relative;
	margin-top: -46px;
	right: 0;
	float: right;
}

#main_menu div.content div.social ul li {
	display: inline-block;
}
#main_menu div.content div.social ul li a {
	border-radius: 50%;
	width: 35px; height: 35px;
	display: inline-block;
	float: left;
	margin-left: 6px;
}

#main_menu div.content div.social ul li a:hover {
	opacity: 0.4;
}

.container_wrap {
			position: relative;
			overflow: hidden;		
		}
		
		.container_wrap .prev {
			z-index: 3;
			position: absolute;
			left: 0; right: 50%;
			top: 0; bottom: 0;
		}

		.container_wrap .next {
			z-index: 3;
			position: absolute;
			left: 50%; right: 0;
			top: 0; bottom: 0
		}

		.container_wrap .container {
		  width: 100%;
		  padding-top: 100%; /* 1:1 Aspect Ratio */
		  position: relative; /* If you want text inside of it */
		  
			overflow: hidden; 
			scrollbar-width: none;
			scroll-snap-type: x mandatory;
			scroll-snap-points-x: repeat(100%);

			/* -webkit-overflow-scrolling: touch; */
		}


		/* If you want text inside of the container */
		.container_wrap .img_set {
		  position: absolute;
		  top: 0;
		  left: 0;
		  bottom: 0;
		  right: 0;
		}

		.container_wrap div.sub span {
			float: left;
			display: inline-block;
		}

		.container_wrap div.sub span p {
			text-align: center;
			position: absolute;
			bottom: 0; left: 0; right: 0;
		}

		.container_wrap div.sub span img {
		display: block;
		  width: 100%; height: auto;
		}


		@media (hover: none) {

			img { scroll-snap-align: start; }

			.container_wrap .container {
				overflow: auto; 
				-webkit-overflow-scrolling: touch;
			}

			.container_wrap .prev,
			.container_wrap .next {
				display: none;
			}

		}


		@media (hover: hover) {

			.container_wrap .prev,
			.container_wrap .next {
				display: block;
			}

		}


.container_wrap .prev {
	cursor: url('../images/arrow_left_small.png') 15 15, auto !important;
}

.container_wrap .next {
	cursor: url('../images/arrow_right_small.png') 15 15, auto !important;
}

.container_wrap div.sub p {
	color: #fff;
}


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


/* Mobile
------------------------------------------------------------------------------*/
@media only screen and (max-width: 1180px) {


}

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

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

	#main_menu div.content {
		margin: 60px auto 0 auto;
		font-size: 14px;
	}
	
	#main_menu .menu_header {
		height: 95px;
	}
	
	#header #logo_main {
	}

	#header div.wrapper {
		margin: 15px;
	}

	#header div.wrapper #logo_main {
		width: 120px !important;
	}

	#menu_switch {
		width: 48px !important;
		height: 48px;
		top: 8px;
	}

	#main_menu div.content {
		padding: 15px;
	}
	
}

@media (hover: none) {
	.container .prevContainer,
	.container .nextContainer {
		display: none;
	}
}
/*----------------------------------------------------------------------------*/