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

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

  */




/* Mobile	0px 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;}
	
p.taubenhead{
    margin: 20px 0px;}
	
.taubengeschlecht{
  font-size: 20px;  }

.taubenzuechter{
  font-size: 20px; }
	
.taubenzusatz{
  font-size: 20px;}
  
img.taube {	
	margin: 5px auto;
	max-width: 100%;
	}
}

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

@media (max-width: 1000px)
	{
.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{
	width: 100%;
	left: 0;
	margin-left: 0;
	padding: 25px 5% 25px 5%;
	}
	
#footer2box{
	width: 100%;
	left: 0;
	margin-left: 0;
	padding: 10px 5% 10px 5%;
	}
	
#nav, #bottom2, #banner {display: none;}

#nav_mobile {
	position: absolute;
	display: block;
	top: 215px;
	left: 0;
	width: 100%;
	overflow-y: scroll;
	max-height: 100%;
	z-index: 100;
	-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 {
	position: fixed;
	top: 0;
	opacity: 0.95;}
 
 #language {
   position: relative;
    margin: -20px 5% 0 5%;}
  
 #language > div > p.strong {
	font-size: 0.7em;
	padding: 0 0 5px 0;}
  	
#top, #top.fixed-top {
	position: absolute;
	top: 0;
	border-bottom: none;
	z-index: 200;
	}
	
#top {
	border-bottom: none;
	padding: 0;
	height: 215px;
	}
	
#topbox {
	left: 0px;
	padding: 0 0 20px 0;
	width: 100%;
	margin: 0;	}
	
	
#head {
	padding-top: 260px;}
	
#logo, #logo.fixed-logo {
	width: 200px;
	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;}
	
#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; }
		  

/* #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
================================================== */

img.iconimage {
    float: none;
	clear: both;
	margin-bottom: 30px;
	display: block;}
  
img.sponsoren {
	width: 40%;
	margin: 5%;}

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

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

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

.button-info {
		width: 100%;}
		
.button {
    font-size: 20px;}
	
p.readmore, p.readmore span {
  font-size: 17px;}
  
li.downloads A, li.downloads{
  font-size: 22px;}

li.downloads{
  background: url(../images/lidownloads.png) 0px 22px no-repeat;
  padding: 5px 10px 5px 20px; }
  
.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: #62accb;
	color:#FFF;
	border:none;
	position: relative;
	text-transform: uppercase;	}
	
.dropdown {
	background: #444 url(../images/plus.png) no-repeat 93% 22px;	}

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

#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: 'Bitter', 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%;
	}
	
	
	/* =========== 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: #62accb;
	}
	
#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:#62accb;
	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 #62accb;
	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;}
  
img.sponsoren {
	width: auto;  
	}
	
td{
  padding: 15px 10px;
  font-size: 1em;}
  

	}

/* 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, .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; }

#banner, #topbox, #between1box, #body, #endbox, #bottom1box, #footerbox, #footer2box {
    position: relative;
    left: 50%;
    margin-left: -480px;
    width: 960px;
    height: auto;}
	
#nav {
    top: 122px;
    left: 320px;}
	
 #language {
  left: 800px;
  width: 200px; }
	
.menu_top a, .menu_top span {
    font: 700 18px 'Bitter',serif;}
  
.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;
}
  }

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

@media (min-width: 1280px){
#main{
	padding: 80px 0px; }
	
	}