/* Wietler Responsive CSS */

#header { height: auto; }
#header > .boxshadow > img {
	height: auto;
	width: 100%;
}

#header_mobile {
	background-color: #fff;
	border-bottom: 5px solid #646770;
	display: none;
	height: 65px;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 99;
}
#link_logo {
  background: #fff url("../gfx/wietler-logo-small.png") no-repeat scroll 0 0;
  display: block;
  height: 65px;
  text-indent: -999em;
  width: 200px;
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
	#link_logo {
  	background-image: url("../gfx/wietler-logo-small-2x.png");
		background-size: 200px 65px;
	}
}

#show_navi {
  display: none;
}
#btn_show_navi {
  cursor: pointer;
  display: none;
  font-size: 17px;
  line-height: 20px;
  position: fixed;
  right: 20px;
  top: 22px;
  z-index: 100;
}
#btn_show_navi::before {
  content: "\2630";
  display: inline-block;
  margin-right: 4px;
}
#show_navi:checked ~ #btn_show_navi::before {
  content: "X";
}

#navi_main .navi_main_sub, #navi_main .show_sub, #navi_main .btn_show_sub {
	display: none;
}

#navi_main .btn_show_sub {
  cursor: pointer;
  display: none;
  height: 40px;
  position: absolute;
  right: 5px;
  top: 5px;
  width: 40px;
}
#navi_main .btn_show_sub::after {
  color: #fff;
  content: "\25BC";
  display: block;
  font-size: 16px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  width: 40px;
}
#navi_main .show_sub:checked + .btn_show_sub::after {
  content: "\25B2";
}

#navi_main .navi_main_sub {
	margin-top: 14px;
}
#navi_main .navi_main_sub > li {
  line-height: 40px;
  min-height: 40px;
}




/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
	
	#page { width: 100%; }
	
	#content {
		padding: 380px 20px 80px;
		padding-top: 40vw;
		padding-top: -webkit-calc(100px + 30vw);
		padding-top: calc(100px + 30vw);
		width: auto;
	}
	
	#content_body { width: auto; }
	
	#content_lcol {
		float: none;
		width: auto;
	}
	
	#content_rcol {
		float: left;
		margin: 30px 30px 0 0;
	}
	
	#content_mcol {
		float: left;
		margin: 30px 0 0 0;
	}
	
	#content_sidecol {
		margin-left: 210px;
		position: relative;
		right: auto;
		top: 0;
		width: auto;
	}
	
	#navi_sub {
		top: 380px;
		top: 40vw;
		top: -webkit-calc(100px + 30vw);
		top: calc(100px + 30vw);
	}
	
	#navi_main {
		left: auto;
		right: 20px;
	}
	
	#header {
		height: auto;
		width: 100%;
	}
	#header > .boxshadow {
		overflow: hidden;
		width: auto;
	}
	
	#header_contenttext {
		left: 0;
		right: 0;
		top: 25%;
	}
	
	#footer {
		padding: 0 20px;
		max-width: 1000px;
		width: 80%;
		width: -webkit-calc(100% - 40px);
		width: calc(100% - 40px);
	}
	#footer:after {
		clear: both;
		content: "";
		display: block;
	}
	#footer > span {
		float: left;
	}
	#footer > span + span {
		float: right;
	}
	#footer a {
		left: 0;
	}
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
	
	#header_mobile {
		display: block;
	}
	#btn_show_navi {
		display: block;
	}
	
	#navi_main {
		background-color: #9a9daa;
		height: 0;
		left: 0;
		overflow: hidden;
		position: fixed;
		right: 0;
		top: 70px;
		transition: height 0.5s ease 0s;
		z-index: 101;
	}
	#show_navi:checked ~ #navi_main, #navi_main.open {
		height: 100%;
		overflow-y: scroll;
	}
	#navi_main li {
		float: none;
		height: auto;
		line-height: 50px;
		min-height: 50px;
		position: relative;
		width: auto;
	}
	#navi_main > li + li {
		border-top: 1px solid #646770;
	}
	#navi_main li a {
		background: #9a9daa;
	}
	#navi_main li a:hover, #navi_main li a.selected {
		background: #646770;
	}
	#navi_main .btn_show_sub {
		display: block;
	}
	#navi_main .show_sub:checked ~ .navi_main_sub, #navi_main .show_sub:checked + .btn_show_sub + .navi_main_sub {
		display: block;
	}
	
	#header_contenttext {
		display: none;
	}
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 600px) {
	#header_starttext {
		display: none;
	}
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
	
	#content_body {
		margin-left: 0;
	}
	
	#content_sidecol {
		margin-left: 0;
	}
	
	#navi_sub {
		display: none;
	}
}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
	
}