@charset "UTF-8";
/*****************************************
 * Pagesystem II responsive stylesheet
 *
 * Copyright 2015, contria Pagesystem II
 *****************************************/


/*** Tablets-Layout iPad portrait / Mobile-Layout iPhone landscape ***/
@media screen and ( max-width: 1020px ) {
	
	#topbar { height:40px; max-width:100%; padding-top:0; border-bottom:1px solid #9C9FA0; overflow:hidden; background:url('/design/res/logo_contria_mobile.png') no-repeat scroll 15px 8px / 220px 24px #fff; }
	#topbar > #logo { background-color:transparent; height:40px; margin:0; width:260px; max-width:100%; }
	
	#topbar > #logo > img,
	.main_nav,
	.sub_nav,
	.cntnav		{ display:none; }
	#logo_mobile	{ display:block; width:300px; height:40px; background:url('/design/res/logo_contria_mobile.png') no-repeat scroll 10px 10px / 220px 24px #fff; }
	
	#vpchgbt	{ display:block !important; }
	
	#sw_menu { width:40px; height:40px; display:block; position:fixed; top:0; right:0; background:url('/design/res/mobile_menu_bt.png') no-repeat 0 0 #fff; cursor:pointer; z-index: 105; }
	#mnav_shade {
		display:none;
		opacity:0;
		height:100%;
		width:100%;
		position:fixed;
		cursor:pointer;
		z-index: 100;
		background: rgba(216, 216, 216, 0.7);
		background: -moz-linear-gradient(50deg, rgba(240, 240, 240, 0.9) 27%, rgba(200, 200, 200, 0.8) 100%);
		background: -webkit-linear-gradient(50deg, rgba(240, 240, 240, 0.9) 27%, rgba(200, 200, 200, 0.8) 100%);
		background: -o-linear-gradient(50deg, rgba(240, 240, 240, 0.9) 27%, rgba(200, 200, 200, 0.8) 100%);
		background: -ms-linear-gradient(50deg, rgba(240, 240, 240, 0.9) 27%, rgba(200, 200, 200, 0.8) 100%);
		background: linear-gradient(120deg, rgba(240, 240, 240, 0.9) 27%, rgba(200, 200, 200, 0.8) 100%);
	}
	#mnav_shade.show {
		display:block;
	}
	
	#mnav_shade + #mnav_box {
		display:block;
		position:fixed;
		overflow:hidden;
		width:0;
		height:100%;
		z-index: 103;
		background: #fff;
		border:1px solid #555;
		border-left:none;
		-webkit-box-shadow: 2px 2px 2px 0px rgba(50, 50, 50, 0.66);
		-moz-box-shadow:    2px 2px 2px 0px rgba(50, 50, 50, 0.66);
		box-shadow:         2px 2px 2px 0px rgba(50, 50, 50, 0.66);
		-moz-border-radius-topright: 5px;
		-webkit-border-top-right-radius: 5px;
		border-top-right-radius: 5px;
		-moz-border-radius-bottomright: 5px;
		-webkit-border-bottom-right-radius: 5px;
		border-bottom-right-radius: 5px;
	}
	
	#mnav_box > #nav_mobile		{ height:100%; width:100%; position:absolute; bottom:0; overflow:auto; }
	
	#nav_mobile 			{ font-size:20px; color:#000000; }
	#nav_mobile ul 			{ margin:0; padding:0; list-style-type:none; }
	#nav_mobile > ul 		{ padding:2px 10px; overflow:hidden; }
	#nav_mobile li 			{ display:block; text-align:left; }
	#nav_mobile a 			{ color:#FFFFFF; display:block; padding:10px 0 8px 20px; margin-bottom:1px; font-weight:normal; white-space:nowrap; position:relative; top:-1px; }
	#nav_mobile ul.deep_2 > li > a 	{ padding-left: 35px; font-size:18px; }
	#nav_mobile ul.deep_3 > li > a 	{ padding-left: 50px; font-size:16px; }
	#nav_mobile ul.deep_4 > li > a 	{ padding-left: 65px; font-size:14px; }

	#nav_mobile ul li 		{ display: none; }
	#nav_mobile li > a:link,
	#nav_mobile li > a:visited 	{ color: #000000; }
	#nav_mobile li.active > a	{ color: #009bde; }
	#nav_mobile > ul > li:first-child  { border-top:1px solid #9C9FA0; }
	#nav_mobile > ul > li		{ border-bottom:1px solid #9C9FA0; }
	#nav_mobile > ul > li.active,
	#nav_mobile > ul > li.parent 	{ border-bottom:1px solid #1A88D3; }
	#nav_mobile > ul > li.active,
	#nav_mobile > ul > li.parent	{ border-top:1px solid #1A88D3; position:relative; top:-1px; }
	#nav_mobile > ul > li.active > a,
	#nav_mobile > ul > li.parent > a { padding-top:3px; }
	#nav_mobile > ul > li.active:before,
	#nav_mobile > ul > li.parent:before {
		content:"";
		display:block;
		position:relative; 
		margin:0 auto;
		top:-1px;
		width: 0px;
		height: 0px;
		border-style: solid;
		border-width: 8px 8px 0;
		border-color: #ffffff transparent transparent;
		-webkit-filter: drop-shadow(0 1px 0 #1A88D3);
		-moz-filter: drop-shadow(0 1px 0 #1A88D3);
		-ms-filter: drop-shadow(0 1px 0 #1A88D3);
		-o-filter: drop-shadow(0 1px 0 #1A88D3);
		filter: drop-shadow(0 1px 0 #1A88D3);
	}
	#nav_mobile > ul > li li.active > a:before {
		content: ">";
		left: 10px;
		margin: 0 auto;
		position: absolute;
		width: 0;
	}
	#nav_mobile > ul > li ul.deep_2 > li.active > a:before { left:20px; }
	#nav_mobile > ul > li ul.deep_3 > li.active > a:before { left:35px; }
	#nav_mobile > ul > li ul.deep_4 > li.active > a:before { left:50px; }
	#nav_mobile > ul > li,
	#nav_mobile li.active,
	#nav_mobile li.active ul,
	#nav_mobile li.active > li,
	#nav_mobile li.parent,
	#nav_mobile li.parent > ul,
	#nav_mobile > ul > li ul,
	#nav_mobile > ul > li > ul li,
	#nav_mobile ul li.current 	{ display: block; }
	#nav_mobile > ul > li.closed > ul,
	#nav_mobile li ul 		{ display: none; }
	#nav_mobile li.parent ul,
	#nav_mobile li.active ul 	{ display: block; }
	
	#nav_mobile .mmnu_bt {
		background:#9C9FA0 none repeat scroll 0 0;
		border:2px solid red;
		border-radius:100%;
		content:"";
		height:30px;
		width:30px;
		position: absolute;
		right:30px;
	}
	#nav_mobile .mmnu_bt.open:after {
		content:"";
		display:block;
		position:relative; 
		margin:0 auto;
		top:-1px;
		width: 0px;
		height: 0px;
		border-style: solid;
		border-width: 8px 8px 0;
		border-color: #ffffff transparent transparent;
		-webkit-filter: drop-shadow(0 1px 0 #9C9FA0);
		-moz-filter: drop-shadow(0 1px 0 #9C9FA0);
		-ms-filter: drop-shadow(0 1px 0 #9C9FA0);
		-o-filter: drop-shadow(0 1px 0 #9C9FA0);
		filter: drop-shadow(0 1px 0 #9C9FA0);
	}
	#nav_mobile .mmnu_bt.closed:after {
		content:"";
		display:block;
		position:relative; 
		margin:0 auto;
		top:-1px;
		width: 0px;
		height: 0px;
		border-style: solid;
		border-width: 8px 8px 0;
		border-color: #ffffff transparent transparent;
		-webkit-filter: drop-shadow(0 1px 0 #9C9FA0);
		-moz-filter: drop-shadow(0 1px 0 #9C9FA0);
		-ms-filter: drop-shadow(0 1px 0 #9C9FA0);
		-o-filter: drop-shadow(0 1px 0 #9C9FA0);
		filter: drop-shadow(0 1px 0 #9C9FA0);
	}
	
	#nav_mobile div.mnavbt {
		height: 20px;
		width: 20px;
		border: 1px solid #9c9fa0;
		border-radius: 15px;
		display: inline-block;
		z-index:30;
		float: right;
		position: relative;
		top: -35px;
		cursor:pointer;
	}
	#nav_mobile li > a + div.mnavbt::after {
		width: 0;
		height: 0;
		content:"";
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-bottom: 6px solid #fff;
		-webkit-filter: drop-shadow(0 -2px 0 #9c9fa0);
		-moz-filter: drop-shadow(0 -2px 0 #9c9fa0);
		-ms-filter: drop-shadow(0 -2px 0 #9c9fa0);
		-o-filter: drop-shadow(0 -2px 0 #9c9fa0);
		filter: drop-shadow(0 -2px 0 #9c9fa0);
		position:absolute;
		top:8px;
		right:4px;
	}
	#nav_mobile li.closed > a + div::after { 
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-top: 6px solid #fff;
		border-bottom: 0;
		-webkit-filter: drop-shadow(0 2px 0 #9c9fa0);
		-moz-filter: drop-shadow(0 2px 0 #9c9fa0);
		-ms-filter: drop-shadow(0 2px 0 #9c9fa0);
		-o-filter: drop-shadow(0 2px 0 #9c9fa0);
		filter: drop-shadow(0 2px 0 #9c9fa0);
		top:6px;
	}
	
	
	#nav_mobile li.closed > ul { display:none; }
	
	
	body						{ min-width:auto; }
	#content, footer				{ width:100%; padding:0; overflow: hidden; }
	footer > div					{ padding-left:15px; padding-right:15px; }
	
	
	#content > article				{ width:auto; margin:0 auto; padding:20px 0 10px; }
	#content > article > *				{ max-width:92% }
	#content article.onerow > div			{ width:92%; }
	#content > article > div			{ word-wrap:break-word; }
	
	#content > article.treerow > div,
	#content > article.tworow2to1 > div,
	#content > article.onerow > div,
	#content > article.onerownav > div		{ margin:0 4%; }
	
	#content > article.onerownav > div		{ width:92%; }
	
	#content > article.treerow > div		{ width:28%; }
	
	#content > article.tworow > div,
	#content > article.tworownav > div		{ width:45%; }
	
	#content > article.tworow > div	+ div
	#content > article.tworownav > div + div,
	#content > article.treerow > div + div,
	#content > article.tworow2to1 > div + div	{ margin-left:0; }
	
	#content > article.tworow2to1 > div		{ width:60%; }
	#content > article.tworow2to1 > div + div	{ width:28%; }
	
	
	
	#content > article.tworownav > div.cntnav,
	#content > article.onerownav > div.cntnav	{ display:none; }
	
	#content > article.tworow > div			{ width:auto; }
	
	#content article.onerow > div img,
	#content article.onerownav > div img		{ max-width:100%; height:auto !important; }
	
	#content p.indented				{ padding-left:100px; }
	
	#content article.teaser 			{ margin:15px 4% 0; max-width:92%; padding-top:52.25%; }
	#content article.teaser > .slider		{ max-width:100%; }
	article.teaser .slides				{ width:100%; display:block; }
	article.teaser .slides > div			{ width:100%; }
	article.teaser .slide > .img			{ width:100%; height:auto; position:relative; }
	article.teaser .slide > .img img		{ width:100% !important; height:auto !important; }
	article.teaser .slide > .ct1			{ max-width:80%; }
	
	#content article.treemovies.svn1 > div.col1 > div,
	#content article.treemovies.svn2 > div.col2 > div,
	#content article.treemovies.svn3 > div.col3 > div,
	#content article.treemovies.svn1 > div.col1 > div > iframe,
	#content article.treemovies.svn2 > div.col2 > div > iframe,
	#content article.treemovies.svn3 > div.col3 > div > iframe	{ width:100%; height:100%; margin-right:0 !important; }
	#content article.treemovies.svn1 > div.col1 > div + div,
	#content article.treemovies.svn2 > div.col2 > div + div,
	#content article.treemovies.svn3 > div.col3 > div + div		{ width:100%; }
	
	#vpchgbt.moblogo > div { background-position:13px 6px !important; border:1px solid #a0a1a1 !important; }
	
	.contactform input,
	.contactform select,
	.contactform textarea	{ width:93%; padding:0 3%; }
	.contactform select	{ width:99.8%; }
	.contactform .form.line > #plz	{ width:20%; margin-right:4%; }
	.contactform .form.line > #city	{ width:60%; }
	
	#content article.onerow.tbl { overflow-x:scroll; width:92%; margin: 10px auto; padding:0; padding-bottom:20px; -webkit-box-shadow: -11px 0px 15px -5px rgba(0,0,0,0.5), 11px 0px 15px -5px rgba(0,0,0,0.5); -moz-box-shadow: -11px 0px 15px -5px rgba(0,0,0,0.5), 11px 0px 15px -5px rgba(0,0,0,0.5); box-shadow: -11px 0px 15px -5px rgba(0,0,0,0.5), 11px 0px 15px -5px rgba(0,0,0,0.5); }
	#content article.onerow.tbl > div { width:960px; margin:0; }
	
	#content article.tworow { width:92%; margin: auto; }
	#content article.tworow > div { margin:0; width:100%; max-width:100%; }
	#content article.tworow > div + div { margin-top:25px; margin-left:0; }
	#content article.tworow.tbl table { width:100%; }
	
	#content article.onerow.stdbox > div { width:72%; padding:20px 10%; margin:0 4%; }
	
	#content article.onerow.tbl { overflow-x:scroll; }

}

@media screen and ( max-width: 959px ) {
	body { min-width:0; }
	#content article.treemovies > div + div + div	{ margin-top:30px; }
	#content article.treemovies > div + div		{ margin-right:50px; }
}

/*** Mobile-Layout iPhone portrait ***/
@media screen and ( max-width: 768px) {
	
	#content > article.tworownav > div,
	#content > article.tworownav > div + div,
	#content > article.treerow > div,
	#content > article.treerow > div + div		{ margin:0 4%; width:92%; }
	#content > article.tworownav > div + div,
	#content > article.treerow > div + div		{ margin-top:20px; }
	#content p.indented				{ padding-left:60px }
	

}
@media screen and ( max-width: 767px) {
	#content article.treemovies > div + div		{ margin-right:0; }
}

@media screen and ( max-width: 629px ) {
	#content article.treemovies > div + div		{ margin-top:30px; }
	#content article.treemovies > div,
	#content article.treemovies > div + div		{ margin-right:50px; }
}


/*** Mobile-Layout iPhone no retina portrait ***/
@media screen and ( max-width: 459px) {
	footer { height: 70px; }
	footer .copyright { margin-top:10px; }
}