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

Mobile Anpassung
  # Mobile	bis 600px
  # Tablet 	bis 1000px
  # Screen	1001px bis 1279px
  # BScreen	ab 1280px 

  */




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

@media (max-width: 400px)
	{
.blogbeitrag > table > tbody > tr > td, .item-page > table > tbody > tr > td, .item-page > table {
    width: 100%;
    display: inline-block;
    float: left;}
	
tr:nth-child(even), tr:hover {
  background: none;}

.blogbeitrag > table > tbody > tr > td:first-child, .item-page > table > tbody > tr > td:first-child{
  font-size: 0.9em;
  text-transform: uppercase;
  color: #666;
  background-color: #eee;}
 
.blogbeitrag > table > tbody > tr > td, .item-page  > table > tbody > tr > td{
  background-color: #fff;}
}

@media (max-width: 700px)
	{

.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;
  width: 100% !important;
}
  
.blogbeitrag > table {
	width:100%;
	max-width: 100%;
	white-space:pre-wrap;}
  
#left, .item-pagenews, .item-page {
    background-color: transparent;
    padding: 0;
	display: inline-block; 
	width: 100%; 
	height: auto;
	border: none;}
	
img.imggrid{
	width: 100%;}
	
div.white > ul.nav > li > a {
	line-height: 2.5;
	font-size: 14px;}
	
img.bildlinks, img.bildrechts{
 margin-left: auto;
 margin-right: auto;
 float: none;
 display: block;}
 
#banner {display: none;}

#left{margin: 20px 0 20px 0;}

#bottom1box:before {
	float: none;
	display: block;
	width:100%; 
	height: 80px;}
	
#bo1_col1 {padding: 0;}
	
#bottom1box p:first-child {font-size: 1.3em;}

#left {
  background: none;
  }
  
.unibutton{
  white-space: nowrap;
  margin: 15px 0;
  display: block;
  text-align: center;}

.icon.check:before {padding: 0 10px 0 0;}
	
}


/* Mobile	0px bis 1000px
================================================== */

@media (max-width: 1000px)
	{
.maxcol {width:100%;}

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

.cols2 {width: 100%; margin: 0;}

#body, #between1box, #footerbox, #top, #top.fixed-top, #footer2box {
	width: 100%;
	left: 0;
	margin-left: 0;
	padding: 25px 5% 25px 5%;
	}
	
#bottom1box, #bottom2box {
	width: 100%;
	left: 0;
	margin-left: 0;
	padding: 50px 5% 50px 5%;}	
	
#footerbox {
	padding: 0 5%;
}
	
#nav {display: none;}

#nav_mobile {
	display: block;
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
	opacity: 1;
	max-height: 100%;
	overflow-y: scroll;
	background-color: #333;
	-moz-box-shadow: 3px 3px 3px #999999;
	-webkit-box-shadow: 3px 3px 3px #999999;
	box-shadow-bottom: 3px #999999;
	overflow: -moz-scrollbars-none;
	-ms-overflow-style: none;}

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

#nav_mobile.fixed-navmob {
	opacity: 0.95;
}

#top, #top.fixed-top {
	display: none;
	}

#head {
	padding-top: 70px;
	}

#banner {
	width: 100%;
	left: 0;
	margin-left: 0;
	padding: 0;
	}
	
#logo, #logo.fixed-logo {
	width: 100px;
	margin: auto;
	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;}
	
img.logomob {
	margin: 5px 0 0;
	height: 75px;
	}
	
#left {
	width: 100%;
	overflow: hidden;
	margin: 30px 0 20px 0;}
	
.pull-left.item-image > a, .pull-left.item-image {
  margin: 20px auto;
  overflow: hidden;
  width: 100% !important;}

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

div#fo1_col1.colstwof div.moduletable:last-child {
    float: none;
    width: 100%;
	padding: 0; }
	
.nurmobil {
	display: block;
}

#be1_col1 > .moduletable {
    width: 100%;
    padding: 30px;
    float: none;
    margin-bottom: 15px;
	min-height: auto;
}

a > img.popbutton {
    padding: 0;
    width: 80px;
	margin: -100px -20px 0 0;
    float: right;}
	
#body {
    padding: 0 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
================================================== */
	
.beitragsbild > img, img.beitragsbild  {
  margin: 0 0 20px 0;
  width: 100%;
  }

/* #Forms, Tables & Tabs
================================================== */
	


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

.unibutton {
    font-size: 20px;}
	
p.readmore, p.readmore span {
  font-size: 17px;}
  
.icon.check:before {
    display: block;
    float: left;
	font-size: 1.2em;}
   

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

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

	/* Menu-Zeile Aussehen */
.menudrop, .dropdown {
	display: block;
	color:#FFF;
	border:none;
	position: relative;}

.menudrop {
	padding: 0 5% !important;
	width: 100%;
	height: 84px;}
	
.dropdown {
	background: #333;}

.dropdown:hover {
	background: #ed1b24;}

.homelink {
	padding: 0 !important;
	width: 172px;
	float: left;
}
	
#nav_mobile ul li a:hover {
	background-color: #ed1b24;	}
	
.nav > li {
	border-left: #ed1b24;}

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

#toggle div {
	width: 100%;
	height: 5px;
	background: #ed1b24;
	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: 22px;
	display: block;
	text-decoration: none;
	color: white;
	padding: 20px 5% 20px 5%;
	font-family: 'Rubik', sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	}
	
#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: #333;
	}
	
#nav_mobile ul.nav-child a, .menu_top  {
	background: #555;
	}
	
#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: #ed1b24;
	}
	
#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:#ed1b24;
	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 #ed1b24;
	border: 2px solid #fff;
}	

}


/* Tablet 	741px bis 1000px
================================================== */

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

.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;}
  
.blau a {
  font-size: 18px;
}
  
}

/* Screen	1001px bis 1279px
================================================== */

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

.leftcols1 { width:960px; }
.leftcols2 { width:960px; }
.leftcols3 { width:960px; }
.leftcols4 { width:960px; }
.leftcols1, .leftcols2 {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; }

 
.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; }

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

#top {
	background: #333;
	}
	
#nav {
  left: 400px;
  }
	
.nurmobil {
	display: block;
}

}

/* Screen	min. 1279px
================================================== */

@media (min-width: 1279px){
	
.nav > li {
  border-left: 1px solid #555;
}

.nav > li:last-child {
  border-right: 1px solid #555;
}

.nav > li:hover {
  border-left: 1px solid transparent;
}

.nav > li:last-child:hover {
  border-right: 1px solid transparent;
}
}