@font-face { font-family:'Raleway'; src:url('/font/Raleway-Regular.woff') format('woff'); font-weight:normal; font-style:normal; }
@font-face { font-family:'Raleway'; src:url('/font/Raleway-Italic.woff') format('woff'); font-weight:normal; font-style:italic; }
@font-face { font-family:'Raleway'; src:url('/font/Raleway-Black.woff') format('woff'); font-weight:900; font-style:normal; }
@font-face { font-family:'Raleway'; src:url('/font/Raleway-ExtraBold.woff') format('woff'); font-weight:800; font-style:normal; }
@font-face { font-family:'Raleway'; src:url('/font/Raleway-Bold.woff') format('woff'); font-weight:bold; font-style:normal; }
@font-face { font-family:'Raleway'; src:url('/font/Raleway-SemiBold.woff') format('woff'); font-weight:600; font-style:normal; }
@font-face { font-family:'Raleway'; src:url('/font/Raleway-Medium.woff') format('woff'); font-weight:500; font-style:normal; }
@font-face { font-family:'Raleway'; src:url('/font/Raleway-Light.woff') format('woff'); font-weight:300; font-style:normal; }
@font-face { font-family:'Raleway'; src:url('/font/Raleway-ExtraLight.woff') format('woff'); font-weight:200; font-style:normal; }
@font-face { font-family:'Raleway'; src:url('/font/Raleway-ExtraThin.woff') format('woff'); font-weight:100; font-style:normal; }

html,body { margin:0; padding:0; }
body { background-color:#ddd; font-family:Raleway; font-size:16px; color:#52ae32; overflow-y:scroll; }
a { color:#55ae3b; text-decoration:none; }

.noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none;  -moz-user-select: none; -ms-user-select: none; user-select: none; user-drag:none; -webkit-user-drag: none; cursor:default; }

.plainlink { color:#000; text-decoration:none; }
.plainlink:hover { text-decoration:underline; }
.hoverunderline:hover { text-decoration:underline; }

#fsbox { position:fixed; z-index:1000; top:0px; left:0px; width:100%; height:100%; background-color:rgba(30,30,30,0.85); opacity:0; display:none; justify-content:center; align-items:center; cursor:pointer; }
	#fs_mediacontent { width:100%; }
#lightbox { position:fixed; z-index:100; top:80px; width:100%; height:calc(100% - 80px); background-color:rgba(30,30,30,0.85); opacity:0; display:none; }
	#lb_info { box-sizing:border-box; width:400px; height:100%; transform:translateX(-360px); background-color:#fff; padding:20px 10px 20px 20px; font-size:14px; overflow-y:auto; }
		#lb_title { font-size:24px; font-weight:600; margin-bottom:10px; }
		#lb_loca { font-weight:500; }
		#lb_desc { font-weight:300; }
		#lb_text { color:#000; margin-top:20px; padding-right:10px; }
		#lb_thumbs { line-height:0px; margin-top: 14px; padding-bottom:20px; }
			.lb_thumb { height:94px; margin-top:10px; cursor:pointer; opacity:0.3; box-shadow:0 0 4px rgba(0,0,0,0.3); }
			.lb_thumb:nth-child(odd) { margin-right:10px; }
			.lb_thumb:hover { opacity:1; box-shadow:0 0 4px rgba(0,0,0,0.6); }
		#lb_media { position:absolute; top:40px; left:440px; width:calc(100% - 480px); box-shadow:0 0 18px rgba(0,0,0,0.85); line-height:0; }
			#lb_mediacontent { width:100%; }
			#lb_video { width:100%; position:absolute; top:0px; left:0px; }
			#lb_exit { position:absolute; top:-34px; right:-34px; height:30px; width:30px; border-radius:10px; box-shadow:0 0 8px rgba(0,0,0,0.85); opacity: 0.75; cursor:pointer; z-index:1; }
			#lb_exit:hover { opacity:1; }
#port_zoom { position:fixed; height:80%; top:10%; z-index:101; pointer-events:none; }

#header { position:fixed; z-index:200; width:100%; height:80px; background-color:#fff; box-shadow:0 0 8px rgba(0,0,0,0.2); text-align:left; }
	#logo { position:absolute; left:14px; top:12px; height:56px; cursor:pointer; }
	#navi { display:flex; position:absolute; top:42px; right:20%; font-weight:600; }
	#subnavi { display:flex; position:absolute; top:90px; right:8px; font-size:13px; font-weight:700; }
		#subnavi .naviitem { padding:5px 8px 4px 8px; }
		.naviitem { padding:6px 10px 4px 10px; margin:0 8px; cursor:pointer; white-space:nowrap; border-radius:4px; }
		.naviitem:hover { color:#fff; background-color:rgba(82,174,50,0.5); text-shadow:0px 0px 3px rgba(82,174,50,1); }
		.naviitem:last-child { margin:0 0 0 8px; }
		.navihidden { display:none; }
		.naviselected { color: rgb(255, 255, 255); background-color: rgb(82, 174, 50); }
	#portfilter_desk { display:flex; position:absolute; top:90px; right:8px; font-size:13px; font-weight:700; }
		#portfilter_desk .portfilter { padding:5px 8px 4px 8px; }
		.portfilter { padding:6px 10px 4px 10px; margin:0 8px; cursor:pointer; white-space:nowrap; border-radius:4px; }
		.portfilter:hover { color:#fff; background-color:rgba(82,174,50,0.5); text-shadow:0px 0px 3px rgba(82,174,50,1); }
		.portfilter:last-child { margin:0 0 0 8px; }
		.portfilterselected { color: rgb(255, 255, 255); background-color: rgb(82, 174, 50)!important; }
	#portfilter_mobile { display:none; flex-direction:column; position:absolute; top:90px; right:8px; font-size:13px; font-weight:700; }
	.portfilter_row { display:flex; justify-content:flex-end; margin-bottom:2px; }
	#port_navi { position:absolute; bottom:6px; left:20px; }
		#port_navi_prev { height:36px; margin-right:283px; cursor:pointer; }
		#port_navi_next { height:36px; cursor:pointer; }
	
#content { position:relative; z-index:1; box-sizing:border-box; width:60%; min-height:100%; padding-top:80px; margin:0 auto; background-color:#fff; box-shadow:0 0 5px rgba(0,0,0,0.2); }
	#gallery { position:relative; width:100%; overflow:hidden; }
		#imgboxes { position:absolute; z-index:1; width:100%; height:100%; }
			.imgbox { position:absolute; width:100%; height:100%; }
				.gallery_img { position:absolute; width:100%; }
				.gallery_fade { position:absolute; opacity:0; }
		#guibox { position:absolute; z-index:10; width:100%; height:100%; cursor:pointer; }
			#guiback { position:absolute; bottom:0px; width:100%; height:75px; background-color:rgba(50,50,50,0.5); cursor:default; }
			#guitext { position:absolute; bottom:44px; left:12px; width:100%; color:#fff; cursor:default; }
				#guititle { font-size:18px; font-weight:600; }
				#guibody { position:absolute; top:24px; font-size:14px; }
			#galbtns { display:flex; position:absolute; }
				.galbtn { width:12px; height:12px; border-radius:100%; margin:0 6px; border:1px solid #fff; background-color:rgba(255,255,255,0.7); box-shadow:0 0 6px rgba(0,0,0,0.7); opacity:0.35; cursor:pointer; }
	#trailer { color:#000; font-size:18px; text-align:center; margin-top:46px; }
		#trailer_title { font-size:22px; font-weight:600; color:#000; margin-bottom:2px; }
		#trailer_text { font-size:14px; margin-bottom:10px; padding:0 5px; }
			#trailer_text span { white-space:nowrap; }
	#subcontent {  }
		.justified { text-align:justify; }
			.justified p { hyphens:manual; }
		.columncontent { color:#000; font-size:15px; padding:0 40px; max-width:317px; margin:0 auto; }
		#portfolio { display:flex; flex-wrap:wrap; margin-top:43px; }
			.port_item { flex-basis:300px; flex-grow:2; line-height: 0; cursor:pointer; position:relative; display:flex; justify-content:center; align-items:center; overflow:hidden; }
				.port_img { width:100%; box-shadow:inset 0 0 5px rgba(0,0,0,0.2); }
				.port_lbox { background-color:#52ae32; opacity:0; visibility:hidden; border-radius:100%; width:142%; height:142%; transform:scale3d(0,0,1); position:absolute; z-index:2; pointer-events:none; }
				.port_label { position:absolute; z-index:3; height:52px; line-height:100%; pointer-events:none; color:#fff; text-align:center; opacity:0; visibility:hidden; padding:10px; }
					.port_title { font-size:18px; font-weight:600; margin-bottom: 10px; }
					.port_loc { font-size:14px; font-weight:500; }
					.port_desc { font-size:14px; font-weight:300; }
		.accitem { margin-bottom:20px; }
			.acctitle { font-weight:600; color:#52ae32; cursor:pointer; }
			.acctitle:hover { text-decoration:underline; }
				.accarrow { position:relative; top:1px; height:13px; margin-right:5px; }
			.accbody { height:0px; overflow:hidden; }
			.accbody a { color:#000; font-weight:600; }
			.accbody a:hover { text-decoration:underline; }
				.accbody img {  width:310px; border:1px solid #ccc; margin-top:20px; }
#imprint { position:fixed; z-index:3; bottom:0px; left:calc(50% - 90px); width:180px; border-radius:4px 4px 0 0; padding:3px 0 3px 0; text-align:center; cursor:pointer; background-color:rgba(255,255,255,0.9); box-shadow:0 0 3px rgba(0,0,0,0.3); font-size:12px; font-weight:500; color:#000; }
	#imprint:hover { text-decoration:underline; }