@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: 'Open Sans', sans-serif;
	font-size: 12px;
	color: #666;
	background-color: #fff;
	
	/*min-width: 960px;*/
	
	position: relative;
}

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




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

.general_content li,
.general_content p {
	font-size: 14px;
	line-height: 1.4em;
	margin: 0 0 0.8em 0;
	
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
}

.general_content h1 { font-size: 22px; }
.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-family: 'Oswald', sans-serif;
	color: #333;
	line-height: 1.4em;
	margin: 0 0 0.8em 0;
}

.general_content div.hl_block {
	float: left;
	width: 100%;
	display: block;
	color: #fff;
	background-color: #666699;
	padding: 15px;
	margin: 1em 0 2em 0;
	border-radius: 8px;
	box-sizing: border-box;
}

* 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: #6666cc;
}


div.section {
	overflow: hidden;
	clear: both;
	margin-bottom: 1em;
	padding-bottom: 1em;
	padding-top: 1em;
	border-bottom: 1px dashed #ccc;
}

div.section > p:last-child {
	padding-bottom: 2em;
}

img.full {
	display: block;
	width: 100%; height: auto;
	margin-bottom: 1em;
}

img.side_max_half {
	display: block;
	width: 50%; height: auto;
	max-width: 300px;
	padding: 0 0 1em 2em;
	float: right; clear: right;
	/*box-sizing: border-box;*/
}

img.side_max_half.no_limit {
	max-width: inherit;
}

a.img_link {
	color: #000;
	text-decoration: none;
}

a.img_link h2::after {
	content: " ▶︎";
}

div.social_icons {
	overflow: hidden;
	margin-bottom: 20px;
}

div.social_icons a img,
div.social_icons a {
	width: 40px; height: 40px;
	display: block;
}

div.social_icons a {
	float: left;
	letter-spacing: 0;
	margin-left: 10px;
	border: 1px solid #ccc;
}

div.social_icons a:first-child {
	margin-left: 0;
}

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


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

#header_line {
	height: 30px;
	background-color: #666;
}

#header_line p {
	color: #fff;
	font-size: 14px;
	line-height: 30px;
}

#header_content {

	background-color: #ccc;
}


#header {
	
	border-top: 1px solid #ccc;
	
	background-color: #fff;
	
	/*
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 10;
	*/
	box-shadow: 0 2px 2px rgba(0,0,0,0.3);
}

#header_line {
	/*margin-top: 80px;*/
}


div.wrapper {
	max-width: 920px;
	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: #999;
	padding: 12px 12px;
	
	-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 {
	background-color: #eee;
}

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

#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: 600px;
}

#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 {
	top: 15px;
	position: absolute;	
}

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

	padding: 0 16px;

	width: 23px;
	height: 45px;
	border-left: 1px solid #ccc;
}

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

#menu_switch span {
	
	width: 25px; height: 3px;
	background-color: #666;
	
	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: 12px;	
}

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

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

#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 {
	background-color: #666;
	color: #fff;
}

#menu_switch.active {

}

div.box_set {
	width: 100%;
	background-color: #eee;
	overflow: hidden;
}

div.box_set > div {
	margin: 0;
	float: left;
}

div.box_set.max_2 > div {
	width: 50%;
}

div.box_set.max_3 > div {
	width: 33.3333%;
}

div.box_set.max_4 > div {
	width: 25%;
	margin: 0;
	float: left;
}

div.box_set > div > div p {
	line-height: 240px;
}

div.box_set.max_2 > div > div { width: 320px; }

div.box_set.max_2.middle > div:first-child div {
	margin: 0 0 0 auto;
}
div.box_set.max_2.middle > div:last-child div {
	margin: 0 auto 0 0;
}

div.box_set.max_2.middle > div:nth-child(2) div {
	background-color: rgba(255,255,255,1);
	position: relative;
	overflow: visible;
}

div.box_set.max_2.middle > div:nth-child(2) div svg {
	position: absolute;
	left: -29px;
	top: 50%; margin-top: -30px;
}

div.box_set.max_2.middle > div:nth-child(2) div svg polygon {
	fill: #fff;
}

div.box_set.max_3 > div > div { width: 320px; }
div.box_set.max_4 > div > div { width: 240px; }

div.box_set > div > div {
	overflow: hidden;
	text-align: center;
	height: 240px;
	margin: 0 auto;
	background-color: rgba(255,255,255,0.5);
}

div.box_set > div:nth-child(1) {
	background-color: #cf4546;
}
div.box_set > div:nth-child(2) {
	background-color: #cf9f88;
}
div.box_set > div:nth-child(3) {
	background-color: #7dbcbf;
}
div.box_set > div:nth-child(4) {
	background-color: #507596;
}

.vidwrap_full_width_16_9 {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
	margin-bottom: 1em;
}
.vidwrap_full_width_16_9 iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}



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


/* Mobile
------------------------------------------------------------------------------*/
@media only screen and (max-width: 665px) {
	div.box_set.max_2 > div {
		width: 100%;
	}
	
	div.box_set.max_2.middle > div:first-child div,
	div.box_set.max_2.middle > div:last-child div {
		margin: 0 auto 0 auto;
	}
	
	
	div.box_set.max_2.middle > div:nth-child(2) div svg {

		
		position: absolute;
		left: 50%;
		top: 0px;
		margin-top: -90px;
		margin-left: -30px;
		
		-ms-transform: rotate(90deg); /* IE 9 */
	  -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
	  transform: rotate(90deg);
		
		-ms-transform-origin: left bottom;
		-webkit-transform-origin: left bottom;
		transform-origin: left bottom;
	}
	
}

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

@media only screen and (max-width: 1000px) {
	div.box_set.max_4 > div {
		width: 50%;
	}
}

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


@media only screen and (max-width: 640px) {
	
	img.side_max_half {
		width: 100%;
		max-width: inherit;
	}
	
	#menu_switch {
		display: block;
	}
	
	#header {
		background-color: #fff;
	
		
		/*position: fixed;
		top: 0; left: 0; right: 0;*/
		
		height: 45px;
		
	}
	
	#header #logo_main {
		top: 2px;
	}
	
	#header #logo_main img {
		width: 140px; height: auto;
	}
	
	#footer_main p.credits {
		position: static;
		margin-top: 1em;
	}
	
	#main_menu {
		
		background-color: #666;
		font-size: 14px;
		padding: 4px 0;
		
		margin-top: 45px;
		
		position: absolute;
		z-index: 10;
		
		left: 0; right: 0;
		
		
		
	}
	
	#main_menu > li > a {
		color: #fff;
		padding: 6px 18px;
	}
	
	#main_menu {
		display: none;
	}
	
	#main_menu.m_visible {
		display: block !important;
	}
	
	#main_menu {

		text-align: left;
		
	}
	
	ul#main_menu > li {
		display: block;
	}
	
	ul#main_menu > li > ul {
		position: static;
		width: auto;
	}
	
	#main_menu > li > a > svg {
		top: 0.5em;
		right: 24px;
	}
	
	#main_menu > li > a.active > svg {

	}
	
	ul#main_menu > li > ul > li > a {
		padding: 6px 14px;
	}
	
	#main_menu > li > a:hover {
		background-color: #999;
	}
	
	#main_menu > li > a > svg polygon {
	fill: #fff !important;
}
	
	
}
/*----------------------------------------------------------------------------*/
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;
}