﻿/* Basic ____________________________________________________ */
	
	@media all {
	
		body 														{  }
		address														{ font-style: normal; }
		
		div.frame 													{ position: relative; text-align: left; }
		div.frame a.mobilelogo										{ display: none; position: absolute; width: <%=pr(120,320)%>%; margin-top: <%=pr(25,320)%>%; left: 50%; transform: translateX(-50%); z-index: 20; }
		div.frame a.mobilelogo.intro								{ position: relative; }
		div.frame a.mobilelogo img									{ width: 100%; }
		
		div.loadBreadcrumb											{ display: none; }
		
		.centercontent,
		.centercontent [data-centercontent="force"].centercontent	{ width: 96%; max-width: 1170px; margin-left: auto; margin-right: auto; }
		.centercontent .centercontent								{ width: auto; max-width: none; margin-left: 0px; margin-right: 0px; }
		
		.largespace 												{ padding: <%=pr(180,1920)%>% 0px; }
		.standardspace												{ padding: calc(80px + <%=pr(50,1500)%>%) 0px; }
		.standardspace + .standardspace 							{ padding-top: 0px; }
		.standardspace.bgweb + .standardspace.bgweb2				{ padding-top: <%=pr(120,1500)%>%; }
		.standardspace.bgweb2 + .standardspace.bgweb				{ padding-top: <%=pr(120,1500)%>%; }
		.standardspace.bgweb2 + .standardspace.bgbar				{ padding-top: <%=pr(120,1500)%>%; }
		.standardspace.bgweb + .standardspace.bgbar					{ padding-top: <%=pr(120,1500)%>%; }
		.standardspace.bgbar + .standardspace.bgweb2 				{ padding-top: <%=pr(120,1500)%>%; }
		.standardspace + .standardspace.bghighlight2				{ padding-top: <%=pr(120,1500)%>%; }
		
		.standardspacetop											{ padding-top: 90px; }
		.standardspacebottom 										{ padding-bottom: <%=pr(100,1170)%>%; }
		
		div.heightselector 											{ position: absolute; top: -1000px; height: 0px; }
		
		picture,
		picture a													{ display: block; position: relative; }
		picture img													{ -webkit-transition: opacity 500ms; transition: opacity 500ms; opacity: 1; filter: alpha(opacity = 100); }
		picture.picture-loading:before								{ content: ''; border: 5px solid #f3f3f3; border-top: 5px solid #555555; border-radius: 50%; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0px 0px -20px; animation: spin 1.6s linear infinite; -webkit-animation: spin 1.6s linear infinite; -moz-animation: spin 1.6s linear infinite; }
		picture.picture-loading img									{ opacity: 0; filter: alpha(opacity = 0); }
		
		video + .video-controls										{ display: none; }
		video + .video-controls.loaded								{ display: block; }
		video + .video-controls > div								{ position: absolute; left: 50%; top: 50%; z-index: 2; cursor: pointer; }
		video + .video-controls > div:before						{ content: ''; position: absolute; width: 50px; height: 50px; border: 5px solid #FFFFFF; -webkit-border-radius: 50%; border-radius: 50%; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; }
		video + .video-controls > div.play							{ width: 0; height: 0; border-top: 16px solid transparent; border-left: 20px solid #FFFFFF; border-bottom: 16px solid transparent; margin: -16px 0px 0px -6px; }
		video + .video-controls > div.play:before					{ left: -44px; top: -30px; }
		video + .video-controls > div.pause							{ width: 8px; height: 26px; border-right: 6px solid #FFFFFF; border-left: 6px solid #FFFFFF; margin: -13px 0px 0px -10px; }
		video + .video-controls > div.pause:before					{ left: -26px; top: -17px; }
		video + .video-controls .play:hover:before,
		video + .video-controls .pause:hover:before					{ transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); }
		video + .video-controls > div.pause							{ display: none; }
		video + .video-controls.playing > div.play					{ display: none; }
		video + .video-controls.playing > div.pause					{ display: block; }
		
		.clearbefore:before,
		.clearafter:after,
		.clearbeforeafter:before,
		.clearbeforeafter:after										{ content: ''; clear: both; display: block; font-size: 0px; height: 0px; line-height: 0px; overflow: hidden; text-indent: -100px; }
		
		.vAlignHelper:before										{ content: ''; display: inline-block; vertical-align: middle; height: 100%; }
		.box-resizing.vAlignHelper:before,
		.box-resizing .vAlignHelper:before							{ content: none; }
		.vAlignCenter												{ display: inline-block; vertical-align: middle; }
		.vAlignTop													{ display: inline-block; vertical-align: top; }
		.vAlignBottom												{ display: inline-block; vertical-align: bottom; }
	
	}
	
	@media (max-width: 680px) {
	
		div.frame a.mobilelogo										{ display: block; }
		.mobilemenuopen div.frame a.mobilelogo						{ position: fixed; top: 0; }
	
	}
	
	
/* Change following classes and media-queries to your needs ______________ */
	
	@media (max-width: 1023px) {
	
		.aboveTabletBreakpoint										{ display: none !important; }
		.centercontent,
		.centercontent [data-centercontent="force"].centercontent	{ width: <%=pr(620,700)%>%; }
	
	}
	
	@media (min-width: 1024px) {
	
		.belowTabletBreakpoint										{ display: none !important; }
	
	}
	
	@media (max-width: 739px) {
	
		.aboveMobileBreakpoint										{ display: none !important; }
	
	}
	
	@media (min-width: 740px) {
	
		.belowMobileBreakpoint										{ display: none !important; }
	
	}
	
	@media (max-width: 680px) {
	
		.centercontent,
		.centercontent [data-centercontent="force"].centercontent	{ width: <%=pr(272,320)%>%; }
	
	}
	
	
	
/* Web Content _________________________________________________________________ */
	
	@media all {
	
		/* div.pagecontent												{ margin: 80px 0px 0px 0px; } */
	
	}
	
	@media (max-width: 680px) {
	
		div.frame														{ margin: 0px 0px 50px 0px; }
	
	}
	
	
/* Footer ________________________________________________________________ */
	
	@media all {
	
		/* footer.pagefooter 											{ position: relative; clear: both; }
		
		footer.pagefooter address									{  }
		footer.pagefooter address span								{ display: block; }
		footer.pagefooter address span	span						{ display: inline; }
		
		footer.pagefooter span.copyright							{ float: left; display: inline; }
		
		footer.pagefooter nav.footernavi							{ float: left; display: inline; }
		
		footer.pagefooter a.publisher								{ float: right; display: inline; white-space: nowrap; }
		
		footer.pagefooter a.publisher img							{ vertical-align: text-bottom; margin: 0px 0px -5px 0px; }	 */
	
	}
	
	
/* __________________________________________________________________ End */