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

/* Fonts
------------------------------------------------------------------------------*/
/*@import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,300italic,400italic,700,700italic,600,600italic,800,800italic);*/
/*----------------------------------------------------------------------------*/

/* General
------------------------------------------------------------------------------*/
body {
	font-family: 'American Typewriter';
	font-size: 12px;
	color: #000;
	background-color: #fff;
	
	/*min-width: 960px;*/
	
	position: relative;
}

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


/* General Content
------------------------------------------------------------------------------*/
.general_content {
	text-align: center;
}

.text_based img {
	width: 100%;
	max-width: 400px;
	margin-bottom: 2em;
}

.text_based img.wide {
	max-width: 800px;
}

.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: 24px;
	line-height: 1.4em;
	margin: 0 0 0.8em 0;
	
	font-family: 'American Typewriter';
}

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

.general_content h1 { font-size: 40px; margin: 0 0 1.4em 0; }
.general_content h2 { font-size: 16px; line-height: 2em; }
.general_content h3 { font-size: 14px; }
.general_content h4 { font-size: 14px; }
.general_content h5 { font-size: 14px; }

.general_content h1 {
	font-weight: normal;
}

.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 {
	font-weight: bold;
	color: #000;
	text-decoration: none;
}

.general_content a:hover {
	text-decoration: underline;
}

/* Contraint to keep main content on screen */
.container_wrap {
	margin: 0 auto;	
	max-width: 95vh;
}
/*----------------------------------------------------------------------------*/


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

#header_content {

	background-color: #ccc;
}

#header {
	background-color: #fff;
}

div.wrapper {
	max-width: 1260px;
	padding: 0 20px;
	margin: 0 auto;	
}

#main_menu {
	background-color: #fff;
	font-size: 16px;
	padding: 20px 0;
	text-align: right;
}

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

	border-bottom: 1px solid #fff;
	
}

#main_menu > li > a.active {
	border-bottom: 1px solid #95C11F;
}

#main_menu > li > a:hover {
	border-bottom: 1px solid #95C11F;
}

ul#main_menu > li {
	position: relative;
	display: inline-block;
	float: none;
	padding-left: 0px;
	padding: 0 8px;
}

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

ul#main_menu > li > ul {
	
	font-size: 14px;
	
	display: none;
	text-align: left;
	position: absolute;
	background-color: #fff;
	width: 175px;
	
	margin-top: 0;
	border: 1px solid #ccc;
	z-index: 10	;
}

ul#main_menu > li > ul.open {
	display: block;

}

ul#main_menu > li > ul > li > a {
	display: block;
	color: #666;
	text-decoration: none;
	padding: 6px;
	border: 2px solid #fff;
}

ul#main_menu > li > ul > li > a span {
	font-size: 12px;
	display: block;
	padding-top: 3px;
	line-height: 1.4em;
	color: #999;
}

ul#main_menu > li > ul > li > a:hover {
	background-color: #eee;
}

ul#main_menu > li > ul > li {
	
}

#main {
	min-height: 1200px;
}

#footer_top {
	height: 60px;
	background-color: #333;
}

#footer_main {
	min-height: 100px;
	background-color: #666;
	font-size: 12px;
	color: #fff;
}

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

#footer_main a {
	color: #fff;
	
	text-decoration: none;
}

#footer_main p.credits {
	position: absolute;
	right: 30px; bottom: 30px;
}

#footer_main h3 {
	text-shadow: 1px 1px #333;
	font-weight: bold;
	margin: 0 0 0.8em 0;
	font-size: 16px;
}

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

#footer_main div.footer_col {
	
	
}

#footer_main div.footer_col ul,
#footer_main div.footer_col ul li:last-child {
	margin: 0;
}

#footer_main div.footer_col ul li {
	margin: 0 0 0.8em 0;
}

#logo_main {
	position: absolute;	
}

#logo_main {
	color: #000;
	text-decoration: none;
	font-size: 16px;
	font-weight: bold;
	padding: 30px 0;
}

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

	padding: 0 16px;

	width: 23px;
	height: 45px;
	
}

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

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

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

#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 {
	opacity: 1;
	top: 22px;
}

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

#menu_switch.active span.menu_line_1,
#menu_switch.active span.menu_line_2 {
	left: 14px;
	top: 22px;
	-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: 22px;
}

#menu_switch.active {
	background-color: #95c11f;
	color: #fff;
}

#menu_switch.active {

}


div.form {
	background-color: #eee;
	text-align: left;
	font-size: 16px;
	max-width: 720px;
	margin: 2em auto;
	padding: 2em;
	box-sizing: border-box;
}

div.form div.field {
	padding: 1em;
	box-sizing: border-box;
}

div.form label {
	width: 100%;
	display: block;
	margin-bottom: 1em;
}

div.form input,
div.form textarea,
div.form select {
	font-size: 16px;
	width: 100%;
	display: block;
	box-sizing: border-box;
}


div.form span.error {
	color: red;
	padding: 1em 0;
	display: block;
	font-size: 14px;
}

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


/* Mobile
------------------------------------------------------------------------------*/

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


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


.general_content h1 { font-size: 30px; }
.general_content h2 { font-size: 14px; }
.general_content h3 { font-size: 12px; }
.general_content h4 { font-size: 12px; }
.general_content h5 { font-size: 12px; }



	
	#menu_switch {
		display: block;
	}
	
	#header {
		background-color: #fff;
	
		
		/*position: fixed;
		top: 0; left: 0; right: 0;*/
		
		height: 45px;
		
	}
	
	#header #logo_main {
		top: 6px;
		padding: 10px 0;
	}
	
	
	#main_menu {
		
		background-color: #95c11f;

		padding: 0 !important;
		
		margin: 0;
		margin-top: 45px;
		
		position: absolute;
		z-index: 10;
		
		left: 0; right: 0;
	}
	
	#main_menu > li > a {
		color: #fff;
		padding: 6px 18px;
	}
	
	#main_menu {
		background-color: #95c11f;
		display: none;
	}
	
	#main_menu.m_visible {
		display: block !important;
	}
	
	#main_menu {
		text-align: left;
	}
	
	ul#main_menu > li {
		display: block;
		padding: 0;
	}
	
	ul#main_menu > li > ul {
		position: static;
		width: auto;
	}
	
	#main_menu > li > a > svg {
		top: 0.5em;
		right: 24px;
	}
	
	#main_menu > li > a:hover {
		background-color: #b0d157;
		border-bottom: none;
	}

	#main_menu > li > a {
		padding: 18px 20px;
		border-bottom: none !important;
	}



	div.form {
		padding: 0.5em;
		box-sizing: border-box;
	}

	div.form div.field {
		padding: 0.5em 0em;
	}
		
}
/*----------------------------------------------------------------------------*/
div#bg_overlay.show {
	opacity: 1;
}

div#bg_overlay {
	-webkit-transition: opacity 0.4s; /* Safari */
	transition: opacity 0.4s;
	
	opacity: 0;
	background-color: rgba(0,0,0,0.3);
	position: absolute;
	z-index: -100;
	
	left: 0; right: 0; top: 0; bottom: 0;
}

div#bg_overlay.off {
	z-index: -100;
	-webkit-transition: z-index 0s; /* Safari */
	transition: z-index 0s;
	
	-webkit-transition-delay: 0.4s; /* Safari */
	transition-delay: 0.4s;
}





		.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: 67.66667%; /* 3:3 Aspect Ratio */
		  position: relative; /* If you want text inside of it */
		  padding-bottom: 100px;
			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.image_container {
			float: left;
			display: inline-block;
			position: relative;
		}

		.container_wrap div.sub span.image_container p {
			text-align: center;
			position: absolute;
			bottom: -100px; left: 0; right: 0;
			font-weight: bold;
			color: #000;
			font-size: 16px;
		}

		.container_wrap div.sub span.image_container 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;
}