/*   Content by 
  Druck & Service Garhammer GmbH
  Florian Garhammer
  f.garhammer@garhammer-druck.de
  Tel. +49 9921 882270
==================================================

Mobile Anpassung
  # Mobile	 bis 600px
  # Mobile	 bis 800px
  # Tablet  bis 1024px
  # Screen	1025px bis 1279px
  # BScreen ab 1280px 

  */

/* Mobile	bis 600px
================================================== */

@media (max-width: 600px)	{

.pull-left.item-image > a {
  float: none;
  margin: 0;
  height: auto;
  max-width: 100%;
  overflow:hidden;}

.pull-left.item-image {
  margin: 20px auto;
  overflow: hidden;}
  
.items-leading > div {
    padding: 20px 20px 20px 20px;}

.item-pagenews, .item-page {
    background-color: transparent;
    padding: 0;
	display: inline-block; 
	width: 100%; 
	height: auto;
	border: none;}

#footer2box{
	padding: 10px 5% 10px 5%;	}
	
img.imggrid{
	width: 100%;}
	
.previous > a, .next > a{
	font-size: 70%;}
	
.icon-chevron-right:after, .icon-chevron-left:before {
	font-size: 100%;}
	
.icon-chevron-right:after{
	padding: 0 0 0 5px;}
	
.icon-chevron-left:before {
	padding: 0 5px 0 0;}
	
  
div.white > ul.nav > li > a{
	line-height: 2.5;
	font-size: 14px;}
	
img.bildlinks, img.bildrechts, img.bildeinschub{
 margin-left: auto;
 margin-right: auto;
 float: none;
 display: block;}
 
 .item-page > ul > li {
padding: 5px 30px;}

.item-page > ul > li:first-child {
padding: 15px 30px 5px;}

.item-page > ul > li:last-child {
padding: 5px 30px 15px;}

.dropfiles-single-file a.dropfiles-file-link {
  background: #444 url("../images/download_small.png") no-repeat scroll 20px center;
  padding: 10px 30px 10px 60px;}

.dropfiles-single-file a.dropfiles-file-link:hover {
  background: #444 url("../images/download_small.png") no-repeat scroll 20px center;}

.openlink {
display: none;}

.activeMediaTable td.essential{
padding: 10px;
font-size:0.8em;}

.contact-category > h1 {
  float:none;}

.result-category > span {
    float: none;}
}

/* Mobile	bis 800px
================================================== */

@media (max-width: 800px){

img.beitragsbild {
	float: none;
	margin: 0 20px -8px 0px;}
	
.boxgrey > img {
	margin: -20px auto 20px;
    text-align: center;
    display: block;
	float: none;
	border-left: 5px solid #fff;}
	
.boxgrey {
	color: #707070;
	background-color: #eee;
	border-left: none;}
	
#be1_col1 > .mobile {
    display: block;
	margin: 5px 0px 0px 0px;}	
	
.email, .kontlink > a, .kontlink > span {
	overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;}
  
.kontimg > a > img, .kontimg > span > img {
display:none}

.kontname > a, .kontlink  > a, .kontlink  > span, .kontname > span{
width: 100%;}

h3.item-title > a{
font-size: 20px;}

.categories-list > div > h3.page-header > a:before {
	padding: 6px 10px 40px 3px;}
	
#mod-custom136 .shopbutton {
  width: 100%;
  margin-right: 0%;
  float: none;}
	
#mod-custom136 .shopbutton > tbody > tr > td > a, .shopbutton > tbody > tr > td > a:hover {
  padding: 0.1em 1.5em;}
	
#mod-custom136 .shopbutton {
  margin-bottom: 2px;}
	
#mod-custom136 .accordians label {
 display: block;}
	
.newstitle {
  display: none;}
	
}

/* Mobile	0px bis 1024px
================================================== */

@media (max-width: 1024px)	{
	
.droppicsgallery {
    display: block !important;}

.maxcol {width:100%;}

.leftcols1, .leftcols2, .leftcols3, .leftcols4 {width:100%;}

.cols2, .cols3, .cols4, .be1_col1, .bo1_col1, .fo1_col1, .fo1_col1 {width: 100%; margin: 0;}

#body, #between1box, #bottom1box, #footerbox, #top, #top.fixed-top, #banner {
	width: 100%;
	left: 0;
	margin-left: 0;
	padding: 25px 5% 25px 5%;	}
	
table.quote {
  width: 100%;
  margin: 0;}
	
#bottom1 div.mod-custom img, #bottom1 .newsflash img {
  width: 100%;}
	
#footer2box{
	width: 100%;
	left: 0;
	margin-left: 0;
	padding: 10px 27% 10px 5%;}
	
#nav{display: none;}

#nav_mobile {
	position: absolute;
	display: block;
	top: 150px;
	left: 0;
	width: 100%;
	overflow-y: scroll;
	max-height: 100%;
	z-index: 199;
	-moz-box-shadow: 3px 3px 3px #707070;
	-webkit-box-shadow: 3px 3px 3px #707070;
	box-shadow-bottom: 3px #707070;
	overflow: -moz-scrollbars-none;
	-ms-overflow-style: none;}

#nav_mobile::-webkit-scrollbar { width: 0 !important; }

#nav_mobile.fixed-navmob {
	position: fixed;
	top: 0;
	opacity: 0.98;}
	
div#social > div.custom{
   display: block;
	right: 90px;
	top: 15px;
	position: fixed;}
	
div#social > div.custom a{
    margin-left: 5px;}
	
#top, #top.fixed-top {
	position: absolute;
	top: 0;
	border-bottom: none;
	z-index: 200;}
		
#topbox {
	left: 0px;
	padding: 0 0 20px 0;
	width: 100%;
	margin: 0;}
	
#head {
	padding-top: 210px;}
	
#logo, #logo.fixed-logo {
	width: 100px;
	margin-left: 20px;
	display: block;
	top: 0;
	float: none;
	position: relative;}

#logo.fixed-logo {
	left: 0;
	opacity: 0;
	transition: 0.5s ease;}

#logo img {
	max-width: 100%;
	margin-right: auto;
	margin-left: auto;
	display: block;}
	
#top.startseite {
  height: 150px;}
	
#banner > div:first-child {
  margin-bottom: 25px;}
	
#left {
	width: 100%;
	padding: 0 0 30px 0;
	overflow: hidden;	}

#footer {
  border-top: none;
  margin-top: 0;}
 
div#fo1_col1.colstwof div.moduletable {
    float: none;
    width: 100%;
	margin: 0 0 50px 0; }

div#fo1_col1.colstwof div.moduletable:last-child {
	margin: 0; }
		  
#between1 {
  padding: 40px 0 0 0; }
  
#between1box {
  padding: 0px 5% 0px 5%;}

/* #Text
================================================== */
h1, h1 a {
  font-size: 28px; }

h2, h2 a {
  font-size: 26px; }

h3, h3 a {
  font-size: 25px; }

h4, h4 a {
  font-size: 24px; }

h5, h5 a {
  font-size: 23px; }
 

  	
/* #Images
================================================== */

p.bildunterschrift {
  margin: 0 0 10px;
  border-radius: 0 0 8px 0;}


/* #Forms, Tables & Tabs
================================================== */
	
td, th{
  padding: 5px 5px;
  font-size: 0.8em;}
  

td:not(:last-child), th:not(:last-child){
  border-right: 1pt solid #fff;}
 
	

	/* =========== Style-Änderungen =============== */

		
.button {
    font-size: 20px;}
	
p.readmore, p.readmore span {
  font-size: 17px;}
  
li.downloads a{
  font-size: 17px;
  line-height: 2.5em;}

.sbutton a, .mbutton a{
  margin: 20px 10px 0 0;}
   

/* #Mobile Menu
================================================== */	

	/* Navigations-Menu ausblenden als Standard */
	
div.moduletable_mobile{
	display: none;}

	/* Menu-Zeile Aussehen */
.menudrop, .dropdown {
	display: block;
	background: #0061ad;
	color:#FFF;
	border:none;
	position: relative;
	text-transform: uppercase;}
	
.nav.menu_top {
  display: block;
}
	
.dropdown {
	background: #444;}

.dropdown:hover {
	background: #0061ad;}
	
.menudrop:hover, #nav_mobile ul li a:hover {
	background-color: #0061ad;}

#toggle {
	width: 28px;
	height: 30px;
	float: right;}

#toggle div {
	width: 100%;
	height: 5px;
	background: white;
	margin: 4px auto;
	transition: all 0.3s;
	backface-visibility: hidden;}

#toggle.on .one {
	transform: rotate(45deg) translate(5px, 5px);
	-moz-transform: rotate(45deg) translate(5px, 5px);
	-webkit-transform: rotate(45deg) translate(5px, 5px);
	-o-transform: rotate(45deg) translate(5px, 5px);
	-ms-transform: rotate(45deg) translate(5px, 5px);}

#toggle.on .two {
	opacity: 0;}

#toggle.on .three {
	transform: rotate(-45deg) translate(7px, -8px);
	-moz-transform: rotate(-45deg) translate(7px, -8px);
	-webkit-transform: rotate(-45deg) translate(7px, -8px);
	-o-transform: rotate(-45deg) translate(7px, -8px);
	-ms-transform: rotate(-45deg) translate(7px, -8px);}

div.menupfeil {
	float: right;
	width: 30px;
	height: 40px;
	background: url('../images/pfeil.png') 0 0 no-repeat;
	-webkit-transition: 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    -moz-transition: 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    -o-transition: 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    transition: 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);}

label.menuoffen div.menupfeil {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);}

	/* Dropdown auf Klick */
[id^=drop]:checked + div.moduletable_mobile {
	display: block;}
	
[id^=drop]:checked ~ ul.nav-child {
	display: block !important;}
	
[id^=drop] {
	display: none;}

	 
	/* =========== Menu Ebene 1 =============== */
	
#nav_mobile a, li:hover ul.nav-child a, .menudrop, .dropdown {
	font-size: 27px;
	display: block;
	text-decoration: none;
	color: white;
	padding: 20px 5% 20px 5%;
	font-family: 'Oswald', sans-serif;
	font-weight: 700;}
	
#nav_mobile ul li {
	/*Linien Farben zwischen den li Elementen*/
	border-bottom: 1px solid #4a4a4a;
	margin-left: 0;
	float: none;
	display: block;}
	
#nav_mobile ul li:last-child  {
    border-bottom: none;}
	
#nav_mobile ul li:first-child {
	border-top: 2px solid #fff;}
	
#nav_mobile ul li a {
	background: #444;}
	
#nav_mobile ul.nav-child a, .menu_top  {
	background: #777;}
	
#nav_mobile ul.nav-child a, #nav_mobile ul.nav-child a:hover {
	padding: 20px 15px 20px 12%;
	font-size: 20px;}
	
	
	/* =========== Menu Ebene 2 =============== */
	
#nav_mobile ul.nav-child {
	display: none;
	position: relative;
	background-color: inherit;
	top: 0;
	border-radius: 0;
	padding: 0;
	opacity: 1;
	visibility: inherit;}
	
#nav_mobile ul.nav-child li ul li {
	border: none;
	border-top: 1px solid #aaa;  /*Linien Farben zwischen den li Elementen in der 2. Menüebene*/
	border-bottom: 1px solid #666666;}
	
#nav_mobile ul.nav-child a:hover {
	background-color: #0061ad;	}
	
#nav_mobile ul.nav-child li ul li:first-child {
	border-top: 1px solid #666666;  /*Linien Farben zwischen den Links in der 2. Menüebene und der 1. Menüebene*/
	}
	
#nav_mobile ul.nav-child li ul li:last-child {
	border-bottom: none;	}
	
#nav_mobile li.active ul.nav-child {
	position: relative;
	left: 0;	}
	
.menu_top li:hover a, .menu_top li:hover span {
  border-bottom: none;}
  /* #Back-to-Topic
--------------------------------------------------------- */
#gototop {
    background: url('../images/backtotopic_roll_s.png') 13px 13px no-repeat;
	height: 60px;
	width: 60px;
	background-color:#0061ad;
	border-radius: 3px;
	border: 2px solid #fff;
	margin: 0 30px 30px 0;}	

#gototop:hover {
    background: url('../images/backtotopic_roll_s.png') 13px 13px no-repeat #0061ad;
	border: 2px solid #fff;}

  /* #iframe-scroll
--------------------------------------------------------- */
.scroll-wrapper {
	-webkit-overflow-scrolling: touch;
	overflow-x: scroll;}	
	
select.inputbox {
    border-radius: 0;
    margin: 25px 0 25px 0;
    background-color: #fff;
	width:100%;}
	
table.portfoliomenu {
  width: 48%;
  margin-right: 2%;
  margin-bottom: 2%;
  height: 40vw;} 
	
table.portfoliomenu h4{
	font-size: 1.2em;}
	
#mwall_items_1 .mwall-detail-box .mwall-item-info a {
  color: #0061ad !important;}
	
#mwall_items_1 .mwall-detail-box .mwall-item-info a:hover {
  color: #358BCF !important;}
	
#social .btn {
  margin: -30px 0 0 0;
}
	
}


/* Tablet 	741px bis 1024px
================================================== */

@media (min-width: 741px) and (max-width: 1024px){

.button-info {
		width: auto;}
		
h1, h1 a {
  font-size: 36px; }

h2, h2 a {
  font-size: 32px; }

h3, h3 a {
  font-size: 28px; }

h4, h4 a {
  font-size: 26px; }

h5, h5 a {
  font-size: 24px; }

p, span, li, ol, ul, table {
  font-size: 18px;}
  
img.sponsoren {
	width: auto;	}
	
td{font-size: 1em;}
	
#mod-custom136 .shopbutton {
  width: 32%;
  margin-right: 1%;}
	}



/* Screen	1025px bis 1279px
================================================== */

@media (min-width: 1025px) and (max-width: 1279px){

.leftcols1 { width:960px; }
.leftcols2 { width:960px; }
.leftcols3 { width:960px; }
.leftcols4 { width:960px; }
.leftcols1, .leftcols2, .leftcols3, .leftcols4 {margin: 0 0 0 0; float: left; }

.cols2 {width: 960px; }
.cols3 {width: 960px; }
.cols4 {width: 960px; }
.cols2, .cols3, .cols4 {float: left; margin: 0 40px 0 0; }

.items-leading > div {margin: 0 0 50px 0;
 float: left;
 width: 460px;
 height: auto;
 display: block;}
 
 .items-leading > div:nth-child(2n+1) {margin: 0 40px 50px 0}

.botmargin {margin: 0 0 50px 0;
 float: left;
 width: 290px;
 height: auto;
 display: block;}
 
.botmargin img {max-width: 100%}
 
.botmargin:nth-child(2) {margin: 0px 45px 50px 45px;}
 
.colstwof2, .colstwo2  {
  width: 460px; 
  float: left; 
  margin: 0 0 0 0; }
  
.colstwo2 {
  margin: 0 0 0 40px; }
	
table.portfoliomenu {
  width: 31%;
  margin-right: 2%;
  margin-bottom: 2%;
  height: 23vw;}
  
/**
#logo {
	margin: auto;
	display: block;
	float: none;
	position:relative;}


#logo img {
	width: 150px;
	margin-right: auto;
	margin-left: auto;
	display: block;
	}
**/

#banner, #topbox, #between1box, #body, #endbox, #bottom1box, #footerbox, #footer2box {
    position: relative;
    left: 50%;
    margin-left: -480px;
    width: 960px;
    height: auto;}
	
/**
#top {
  height: 250px;}

#nav {
  top: 202px;
  left: 0px;}
**/
  
.items-leading{
  float: left;}
  
.items-leading > div {
    padding: 20px 20px 20px 20px;}

.pull-left.item-image > a {
  float: none;
  margin: 0;
  height: auto;
  max-width: 100%;}

.pull-left.item-image {
  margin: 20px auto;
  overflow: hidden;}
  
#users-profile-core > dl{
margin-bottom: 25px;}
	
.menu_top a, .menu_top span {
    font: 700 14px 'Oswald', sans-serif;
	padding: 0 8px;}
	
.menu_top li:hover ul.nav-child a {
  font: 700 16px 'Oswald', sans-serif;}
	
.menu_top li:hover a, .menu_top li:hover span {
  padding: 15px 8px;}

.menu_top span.nav-header:hover {
	padding: 15px 8px;}
	
#nav {
  top: 107px;
  left: 170px;}
	
.menu_top ul.nav-child {
    top: 42px;}
	
}


/* Screen	1280px bis 1599px
================================================== */

@media (min-width: 1280px) and (max-width: 1599px){
.menu_top span, .menu_top a {
  font: 700 18px 'Oswald', sans-serif;}
}

/* BScreen	ab 1280px 
================================================== */

@media (min-width: 1280px){
#main{
	padding: 50px 0 50px; }
	
div.blognews > div.items-leading > div > p{ 
width: 445px;
float: right;}
}


/* Screen	min. 1600px
================================================== */

@media (min-width: 1600px){
	
.leftcols1 { width:1600px; }
.leftcols2 { width:1200px; }
.leftcols1, .leftcols2 {margin: 0 0 0 0; float: left; }

.cols2 {width: 360px; }
.botmargin {margin: 0 0 50px 0;}

#topbox, #banner, #between1box, #body, #bottom1box, #bottom2box, #footerbox, #footer2box {
  position: relative;
  left: 50%;
  margin-left: -800px;
  width: 1600px;
  height: auto;
  z-index: 50; }
	
.fixed-top #social {
    top: 65px;}	
}