/* Content by 
   LIEBL Systems GmbH
   Peter Schmid
   pschmid@liebl-systems.de
   Telefon: 0800 099 3000
   Fax: 0800 099 3000
==================================================

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

  */




/* Mobile 0px bis 700px
================================================== */

@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;
}
  
.items-leading > div {
  padding: 20px 20px 20px 20px;
}

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

#col2 > .moduletable.rot {padding: 20px;}
#col2 > .moduletable.grau {padding: 20px;}

#footerbox1, #footerbox2, #footerbox3, #footerbox4, #footerbox5 {
  float: left;
  max-width: inherit;
  width: 100%;
  margin: 20px 0;
}

#groundbox {
  padding: 10px 5% 10px 5%;
}

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;}
 
img.portrait {
 max-width: 30%;
 margin-right: 10px;
}
 
#contact_mobile {
  right: 16% !important;
}

#banner-mob {
	display: block !important;
}

form.buchung {
  margin-left: 0;
}

#bottom1 {
  display: none;
}

#banner {
  display: none;
}

}


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

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

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

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

#anfrage {
  display: none;
}

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

#contentbottom1, #contentbottom2 {
  float: left;
  margin-right: 0;
  width: 100%;
}

div.blau {
  padding: 20px;
  margin: 20px 0;
  top: 0;
}

#col2 > .moduletable.rot {border-left: 1px solid #ed1b24;}
#col2 > .moduletable.grau {border-left: 1px solid #d6d6d6;}

#footerbox {
  padding: 0 5%;
}

#footerbox1, #footerbox2, #footerbox3, #footerbox4, #footerbox5 {
  float: left;
  max-width: 100%;
  margin: 20px 0;
  margin-right: 6%;
}

#groundbox{
  width: 100%;
  left: 0;
  margin-left: 0;
  padding: 10px 5% 10px 5%;
}

#nav, #bottom2 {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: #9b252d;
  -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;
}

#contact_mobile {
  position: absolute;
  float: right;
  right: 12%;
  top: 22px;
  z-index: 200;
}

#contact_mobile a.mob_icon {
  padding: 10px 5px;
  display: inline;
  z-index: 100;
}

#contact_mobile span.mob_icon {
  font-size: 34px;
  color: #ffffff;
}

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

#topbox {}

#head, #head.fixed-head {
  margin-top: 80px;
}

#banner {
  width: 100%;
  left: 0;
  margin-left: 0;
  padding: 0;
}

#banner-mob {
  display: none;
}

#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: 20px 0 0 0;
}
  
#left {
  width: 100%;
  overflow: hidden;
}

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

div.span6:nth-child(odd), div.span6:nth-child(even)  {
  width: 100%;
  float: left;
  margin-right: 0;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

div.span6:nth-child(odd) {
  border-bottom: 1px dotted #cccccc;
  padding-bottom: 40px;
}

/* #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;}
  
.beitragsbild > img, img.beitragsbild  {
  margin: 0 0 20px 0;
  width: 100%;
  }
  
.neuling > img, img.neuling, .pull-left.item-image img {
  margin: 0 0 20px 0;
  width: 100%;
  max-height: none;
  max-width: none;
  }

/* #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 {
  font-size: 20px;}
  
p.readmore, p.readmore span {
  font-size: 17px;}
  
li.downloads a{
  font-size: 22px;
  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;
  color:#FFF;
  border:none;
  position: relative;}

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

.dropdown:hover {
  background: #ed1b24;}

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

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

#toggle div {
  width: 100%;
  height: 5px;
  background: #ffffff;
  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 (Version 2)*/
#drop.open + 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: 'Raleway', sans-serif;
  font-weight: 500;
  }
  
#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: #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;
}
  
img.sponsoren {
  width: auto;  
  }
  
td{
  padding: 15px 10px;
  font-size: 1em;}
  
.neuling > img, img.neuling {
  margin: 0 20px 20px 0;
  max-height: none;
  max-width: 320px;
  }
  
}

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

.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; }
  
#anfrage {
  display: none;
}

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

#top {
  background: #9b252d;
  }

.nurmobil {
  display: block;
}

#col2 > .moduletable.rot {border-left: 1px solid #ed1b24;}
#col2 > .moduletable.grau {border-left: 1px solid #d6d6d6;}

}