/**
 * 
 * Design und Layout 'abenaa'
 * 
 * 
 * This file gives an overview of the required CSS definitions which
 * needs to be defined for all Website Baker templates added to the 
 * Website Baker addons repository from June 2008 onwards. 
 * 
 * See http://www.w3.org/TR/CSS21/sample.html for the HTML4 
 * default styles applied if nothing else is specified in your stylesheet.
 *
 * To facilitate adaption, you may want to consider separate stylesheets.
 * One for the layout (container for header, footer, content, menu ...),
 * another one for the HTML elements which are shown in the content areas.
 * This can easily be achieved via @import rules
 * 
 * @author     Ines Gesell
 * @copyright  Ines Gesell
 * @license    http://www.gnu.org/licenses/gpl.html
 * @version    1.0
 * @platform   Website Baker 2.8
 *
*/

/* Body und Sideholder    ============================================================================= */
* {
margin:0;
padding:0;
}

html, body{
    height:100%;
    margin:0;
    padding:0;
}

body {
margin : 0 0 0 0;
padding : 0;
font-family: 'Raleway', sans-serif;
font-size: 1.2em;
font-weight: 400;
color: #5f5f5f;
background-color : #fff;
overflow-x: hidden;
}

img {
max-width: 100%;
height: auto;
}
a {
font-weight: 700;
color : #5c9954;
transition-property: background;
transition-duration: 1.5s;
-moz-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);
animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);
-webkit-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);
}

a:hover {
color: #5f5f5f;
}

@media \0screen {
  img { 
  	width: auto; /* for ie 8 */
  }
}

.section_anchor {
display: none;
}

iframe {
width: 100%;
border: none;
margin-top: 40px;
}

/*  START  ============================================================================= */
.lightcontainer {
margin: 0 auto;
padding: 0;
max-width: 1360px; 
}	

.maincontent {
clear: both;
width: 100%; 
font-size: 0.8125em; 
margin: 0 auto;
padding: 0 0 0 0;
position: relative;
}

#cookie-container, #logocontainer, #navicontainer, #contentcontainer, #contentcontainer_start, #referenzcontainer, #containerbottom   {
width: 100%;
}

#navicontainer {
padding: 0;
margin: 0;
background : #d9e6cd url(img/bg_navi.jpg) top center repeat-x;
}

#logocontainer {
padding: 15px 0 15px 0;
background-color : #f1f1ed;
}

#headercontainer {
text-align: center;
height: auto;
}

.headerbild {
line-height: 0em;
}

#contentcontainer {
padding: 0;
margin: 0;
background : #fff url(img/bg_navi.jpg) top center repeat-x;
}

#contentcontainer_start {
text-align: center;
padding: 0;
margin: 0;
background : #d9e6cd url(img/bg_navi.jpg) top center repeat-x;
}

#containerbottom {
text-align: center;
}

#containerbottom .liste {
text-align: left;
}

#referenzcontainer {
padding: 3% 1% 3% 0;
line-height: 1.9em;
text-align : left;
background-color: #d8d8d8;
text-align: center;
}

@media only screen and (max-width : 414px) {
#referenzcontainer{
display: none;
}
}		

#referenzcontainer p {
padding: 10px 10px 20px 20px;
}

.border {
width: 100%;
background : url(img/border.jpg) top center repeat-x;
padding: 20px 0 0 0;
margin-top: 20px;
}

/* Slider    ============================================================================= */
@media only screen and (max-width : 600px) {
	#wowslider-container1, #headercontainer {
	display: none;
}
}		

/*  SECTIONS     ============================================================================= */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP     ============================================================================= */
.col {
	display: block;
	float:left;
	margin: 0% 0 0% 3.6%;
}

#logocontainer .col {
	margin: 0% 0% 0% 0%;
}

.col:first-child { margin-left: 0; }

@media only screen and (max-width: 1360px) {
	.col { 
		margin: 1% 1% 1% 1%;
	}
	.col:first-child { 
	margin-left: 0.6%; 
	margin-right: 0.6%;
	}
}

@media only screen and (max-width : 800px) {
.col {
	margin: 0% 0 0% 0%;
}
}	


/*  GROUPING     ============================================================================= */
.group:before,
.group:after {
	content:"";
	display:table;
}
.group:after {
	clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}

/*  2 BOXEN   ============================================================================= */
.span_2_of_2 {
	width: 100%;
}

.span_1_of_2 {
	width: 47.2%;
}

@media only screen and (max-width: 800px) {
	.span_2_of_2 {
		width: 98%; 
	}
	.span_1_of_2 {
		width: 98%; 
	}
}

/*  3 BOXEN    ============================================================================= */
.span_3_of_3 {
	width: 100%;
}
.span_2_of_3 {
	width: 65.5%;
}
.span_1_of_3 {
	width: 30.9%;
}

@media only screen and (max-width: 665px) {
	.span_3_of_3 {
		width: 98%; 
	}
	.span_2_of_3 {
		width: 98%; 
	}
	.span_1_of_3 {
		width: 98%;
	}
}

/* 4 BOXEN*   ============================================================================= */
.span_4_of_4 {
	width: 100%; 
}

.span_3_of_4 {
	width: 74.0%; 
}

.span_2_of_4 {
	width: 48.0%; 
}

.span_1_of_4 {
	width: 22.3%; 
}

@media only screen and (max-width: 800px) {
	.span_4_of_4 {
		width: 98%;
	}
	.span_3_of_4 {
		width: 100%;
	}
	.span_2_of_4 {
		width: 98%;
	}
	.span_1_of_4 {
		width: 100%;
	}
}

/*  5 BOXEN    ============================================================================= */
.span_5_of_5 {
	width: 100%;
}

.span_4_of_5 {
  	width: 79.68%; 
}

.span_3_of_5 {
  	width: 59.36%; 
}

.span_2_of_5 {
  	width: 36.25%;
}

.span_1_of_5 {
  	width: 20.0%;
}

@media only screen and (max-width: 600px) {
	.span_5_of_5 {
		width: 98%; 
	}
	.span_4_of_5 {
		width: 98%;
	}
	.span_3_of_5 {
		width: 98%;
	}
	.span_2_of_5 {
		width: 98%;
	}
	.span_1_of_5 {
		width: 98%;
	}
}

/*  5 BOXEN AUSTAUSCHMOTOREN   ============================================================================= */
.span_1_of_6 {
  	width: 17.5%;
}

.span_2_of_6, .span_3_of_6 {
  	width: 32.5%;
}
.span_1_of_6, .span_2_of_6, .span_3_of_6 {
	text-align: center;
	font-family: 'Oswald', sans-serif;
	font-weight: 300;
	font-size: 1.1em;
	padding: 20px 0 20px 0;
}

#logocontainer a, #logocontainer a:hover {
	font-weight: 300;
	color : #6d6d6d;
}

.span_1_of_6 img {
  	margin-right: 10px;
}

@media only screen and (max-width: 1024px) {
.span_2_of_6 {
		width: 100%; 
	}
.span_1_of_6, .span_3_of_6 {
  	width: 32.5%;
}
}

@media only screen and (max-width: 700px) {
.span_1_of_6 {
		width: 50%; 
		padding: 5px 0 5px 0;
	}
.span_3_of_6 {
		display: none; 
		padding: 5px 0 5px 0;
	}
.span_2_of_6 {
	padding: 20px 0 5px 0;
}
}

@media only screen and (max-width: 414px) {
.span_1_of_6 {
		width: 100%; 
	}
}

/*  3 BOXEN Downloadgalerie */
.span_3_of_down {
	width: 71.7%;
}
.span_2_of_down {
	width: 9.0%;
	padding-bottom: 20px;
	font-size: 0.8em;
}
.span_1_of_down {
	width: 4.6%;
	text-align: left;
}

#contentwide .span_3_of_down a {
font-weight: 700;
transition-property: color;
transition-duration: 2.0s;
-moz-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);
animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);
-webkit-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);
}

#contentwide .span_3_of_down p {
font-size: 90%;
margin-top: 5px;
}

@media only screen and (max-width: 768px) {
.span_3_of_down {
	width: 100%;
}
.span_2_of_down {
display: none;
}
.span_1_of_down {
display: none;
}
}

/* Inhalt    ============================================================================= */
#contentwide, #contentwide_start {
line-height: 1.7em;
padding: 30px 0 10px 0;
font-size: 1.2em;
}

@media only screen and (max-width: 1024px) {
#contentwide, #contentwide_start{
padding: 30px 20px 30px 20px;
}
}

@media only screen and (max-width: 800px) {
#contentwide_start .span_1_of_2 {
		text-align: center;
	}
#contentwide_start {
		text-align: center;
	}
#contentwide_start .thumbnail{
		display: inline-block;
	}
}

.center {
text-align: center;
}

@media only screen and (max-width: 385px) {
#contentwide, #contentwide_start {
padding: 20px 10px 20px 10px;
}
#contentwide p {
clear:both;
}
}

h1 {
text-align: center;
font-size: 2.4em;
color : #5c9954;
margin : 20px 0 30px 0;
padding : 0 0 0 0;
font-family: 'Oswald', sans-serif;
line-height : 1.1em;
font-weight: 400;
}

h2 {
font-size: 1.8em;
line-height: 1.3em;
color : #5c9954;
margin : 5px 0 5px 0;
padding : 0 0 0 0;
font-family: 'Oswald', sans-serif;
font-weight: 400;
}

#contentcontainer_start h2 {
color : #fff;
margin : 25px 0 5px 0;
font-weight: 700;
line-height: 1.0em;
text-shadow: 0 -1px #b8cdad, 1px 0 #b8cdad, 0 1px #b8cdad, -1px 0 #b8cdad;
}

#referenzcontainer h2 {
color : #6d6d6d;
font-weight: 700;
}

#produktbeschreibung h2 {
text-align: center;
}

h3 {
font-size: 1.5em;
line-height: 1.3em;
color : #6d6d6d;
margin : 5px 0 5px 0;
padding : 0 0 0 0;
font-family: 'Oswald', sans-serif;
font-weight: 300;
}

.green {
color : #5c9954;
}

h4 {
font-size: 1.2em;
line-height: 1.2em;
color : #4f534c;
margin : 20px 0 5px 0;
padding : 0 0 0 0;
font-family: 'Oswald', sans-serif;
font-weight: 300;
}

@media only screen and (max-width: 800px) {
h1 {
padding : 0;
font-size: 180%;
line-height : 1.0em;
}
#contentwide .start {
text-align: center;
}
h2, h3, h4 {
font-size: 190%;
}
#contentwide_start h2 {
text-align: center;
}
}

@media only screen and (max-width: 600px) {
h1 {
font-size: 180%;
}
h2 {
font-size: 210%;
line-height: 1.1em;
}
h3, h4 {
padding : 0;
font-size: 140%;
}
}

#contentwide ul, #contentwide_start ul {
margin : 20px 0 25px 0px;
padding : 0;
}

#contentwide ul li, #contentwide_start ul li {
margin:0 0 20px 5px;
padding:0 0 0 25px;
list-style-type: none;
line-height: 1.3em;
background : url(img/li.png) no-repeat 0px 6px;
}

#contentwide p, #contentwide_start p {
margin-top : 20px;
margin-bottom: 20px;
}

hr {
  clear: both; 
  float: none; 
  width: 100%; 
  height: 2px;
  margin: 1.0em 0;
  border: none; 
  background: #cfcfcf;
  background-image: -webkit-gradient(
      linear,
      left top,
      left bottom,
      color-stop(0.5, rgb(207, 207, 207)),
      color-stop(0.5, rgb(255,255,255))
  );
  background-image: -moz-linear-gradient(
      center top,
      rgb(207, 207, 207) 50%,
      rgb(255,255,255) 50%
  );
}

/*  FOOTER 4 BOXEN   ============================================================================= */
#footer {
width: 100%;
padding: 0 0 40px 0;
margin: 0 0 0 0;
color: #fff;
background-color : #5c9954;
}

#footer_4, #footer_1 {
clear: both;
width: 96%; /* 1000px / 1250px */
font-size: 1.0em; /* 13 / 16 */
max-width: 1360px; /* 1360px / 13 */
margin: 0 auto;
padding: 30px 0 10px 0;
line-height: 1.5em;
position: relative;
text-align: center;
}

#footer p {
margin: 0 0 20px 0;
}

#footer h2 {
margin: 20px 0 0 0;
}

@media only screen and (max-width: 800px) {
#footer {
font-size: 1.1em;
line-height: 1.3em;
}
}

/*  FOOTERNAVI  ============================================================================= */
#footer ul {
margin: 0 0 0 0;
padding: 0 0 40px 0;
text-align: center;
border-bottom: 1px solid #76a96f;
}

#footer ul li {
list-style : none;
display: inline-block;
padding: 0 0 0 0;
margin: 0 25px 0 0;
}

@media only screen and (max-width : 800px) {
#footer ul, #footer {
text-align: center;
}
#footer ul li {
float: none;
display:block;
margin: 15px 0 10px 0;
padding: 0;
}
}

#footer ul a {
display : inline-block;
color: #fff;
font-weight: 300;
font-size: 1.5em;
font-family: 'Oswald', sans-serif;	
}

#footer li a:hover, #footer .menu-current a, #footer .menu-parent > a, #footer a:hover {
color: #5c9954;
background-color: #fff;
}

#footer a {
font-weight: 300;
color : #fff;
padding: 4px 10px;
transition-property: color;
transition-duration: 1.5s;
-moz-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);
animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);
-webkit-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);
}

/* Links    ============================================================================= */
a {
text-decoration : none;
border : none;
}

a img {
border : 0 none;
}

.div_link {
clear: both;
width: 100%;
margin: 10px 0 10px 0;
}

#produkte .div_link, #produktbeschreibung .div_link  {
text-align: left;
}

.div_link a {
color: #5c9954;
font-family: 'Oswald', sans-serif;
font-size: 1.3em;
font-weight: 400;
padding: 0px 50px 5px 0;
margin: 0 0 0 0;
background : url(img/div_link.png) no-repeat 100% 0px;
transition-property: all;
transition-duration: 1.5s;
-moz-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);
animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);
-webkit-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);
}

.div_link a:hover {
background : url(img/div_link_hover.png) no-repeat 100% 0px;
color: #6d6d6d;
}

/* Schriften    ============================================================================= */
.fett {
font-weight : 700;
}

.klein {
clear: both;
font-weight : 700;
font-size: 0.8em;
}

#produktbeschreibung .klein {
text-align: center;
margin: 0;
}

.center, .mittig {
text-align: center;
}

.hide {
display : none;
}

.gross {
font-size: 1.3em;
font-weight: 400;
color : #4f534c;
font-family: 'Oswald', sans-serif;
line-height : 1.2em;
letter-spacing: 0;
margin: 0 0 15px 0;
padding: 0 0 0 0;
}

.groesser {
font-size: 1.6em;
font-weight: 400;
color : #4f534c;
font-family: 'Oswald', sans-serif;
line-height : 1.2em;
letter-spacing: 0;
margin: 0 0 15px 0;
padding: 0 0 0 0;
}

/* Bilder    ============================================================================= */
.links {
margin : 0 25px 20px 0;
float : left;
border : none;
}
.rechts {
margin : 0 0 20px 25px;
float : right;
border : none;
}

#contentwide_start img, #containerbottom img{
min-width: 100%;
height: auto;
}

/* Fotogalerie   ============================================================================= */
.highslide-gallery {
text-align: center;
}

.highslide-gallery img:hover {
-webkit-transform:scale(1.08);
transform:scale(1.08);
}

.highslide-gallery img {
width: 18%;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
margin: 5px 5px 5px 5px;
}

@media only screen and (max-width: 1024px) {
.highslide-gallery img {
width: 22%;
height: auto;
margin-right: 10px;
}
}

@media only screen and (max-width: 600px) {
.highslide-gallery img {
width: 45%;
height: auto;
}
}

@media only screen and (max-width: 320px) {
.highslide-gallery img {
width: 97%;
height: auto;
}
}

/* Handelspartner  ============================================================================= */
#handels .col:nth-of-type(4n+5) {
clear: both;
margin-left: 0;
}
#handels .span_1_of_4 {
border-top: 1px solid #cfcfcf;
}

/* Flaggen   ============================================================================= */
.flaggen {
width: auto;
text-align: center;
padding: 5px 0 0 20;
overflow: hidden;
}

.flaggen a {
position: relative;
display: inline-block;
width: 55px;
height: 46px;
margin: 0 0 0 0;
border-radius: 5px;
list-style: none;
text-decoration: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.flaggen:hover a {
margin: 0 8px 0 0;
}

.flaggen a .image {
position: absolute;
width: 55px;
height: 46px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.flaggen a:hover .image {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

.flaggen:hover > a {
opacity: 0.3;
}

.flaggen:hover > a:hover {
opacity: 1;
}

.flaggen a.DE, .flaggen a.EN {
background: none;
padding: 0 5px 0 5px;
}

.flaggen a.DE .image {
background: url(img/de.png) center no-repeat;
}

.flaggen a.EN .image {
background: url(img/en.png) center no-repeat;
}

/* Button Nach Oben  ============================================================================= */
@media only screen and (min-width: 801px) {
#zzNachoben {
position: fixed;
z-index: 1000;
top: 88%;
right: 2%; 
}
#zzNachoben a {
width: 48px;
height: 48px;
display: block;
background: url(img/top.png) no-repeat;
}
#zzNachoben a:hover {
width: 48px;
height: 48px;
display: block;
background: url(img/top_hover.png) no-repeat;
}
}

/* Cookies ============================================================================= */
#cookie-container {
width: 100%;
position: fixed;
bottom: 0px;
left: 0;
background-color: #111111;
z-index: 500000;
overflow: hidden;
-webkit-transition: all 1.9s;
-moz-transition: all 1.9s;
transition: all 1.9s;
}
div#cookie-notice {
box-sizing: border-box;
background-color: #111111;
text-align: center;
color: #fff;
display: block;
font-size: 1.0em;
width: 100%;
max-width: 1360px;
padding: 20px 4px;
margin: 0 auto;
z-index: 10;
}
div#cookie-notice #cookie-notice-close { 
float:right;
background: #FF0000;
color: #ffffff;
font-weight: bold;
padding: 10px;
margin-left: 20px;
cursor: pointer;
border-radius: 4px;
}
#cookie-container a {
color: #5c9954;
font-weight: 700;
}
/* Shrink    ============================================================================= */
@media only screen and (min-width: 1400px) {
#logocontainer {
width: 100%;
position: fixed;
top: 0px;
left: 0;
z-index: 100;
overflow: hidden;
-webkit-transition: all 1.9s;
-moz-transition: all 1.9s;
transition: all 1.9s;
}
#navicontainer {
width: 100%;
position: fixed;
top: 120px;
left: 0;
z-index: 101;
-webkit-transition: top 0.6s;
-moz-transition: top 0.6s;
transition: top 0.6s;
}
#headercontainer {
max-width: 1600px;
text-align: center;
margin: 220px auto 0 auto;
height: auto;
padding: 0;
}
.nav li a {
-webkit-transition: all 0.6s;
-moz-transition: all 0.6s;
transition: all 0.6s;
}
#logocontainer.shrink {
height: 0px;
}
#navicontainer.shrink {
top:-10px;
background-image : none;
border-bottom: 1px solid #5c9954;
}
.nav.shrink li a {
padding-top: 10px;
padding-bottom: 10px;
}
}

/*  Suche */
.searchstring {
width: 70%;
color : #6d6d6d;
font-family: 'Oswald', sans-serif;
font-weight: 300;
font-size: 1.3em;
background : none;
-moz-box-shadow:inset 1px 1px 4px #d0d0d0;
-webkit-box-shadow:inset 1px 1px 4px #d0d0d0;
box-shadow:inset 1px 1px 4px #d0d0d0;
border : 1px solid #d0d0d0;
padding : 0.2em;
}

#logocontainer .submitbutton {
padding: 0 0 0 8px;
vertical-align: middle;
}

.searchbutton {
clear: both;
margin : 10px 0 10px 0;
font-family: 'Raleway', sans-serif;
font-weight: 400;
font-size: 1.0em;
text-transform: uppercase;
padding : 1.5% 5% 1.5% 5%;
width : auto;
height : auto;
color: #fff;
background-color: #5c9954;
border: none;
text-shadow: none;
}

.search-textfield {
width : 23%;
border : 1px solid #d0d0d0;
padding : 0.4em;
font-size: 0.9em;
font-family: 'Raleway', sans-serif;
color : #5f5f5f;
background : none;
-moz-box-shadow:inset 1px 1px 4px #d0d0d0;
-webkit-box-shadow:inset 1px 1px 4px #d0d0d0;
box-shadow:inset 1px 1px 4px #d0d0d0;
}

@media only screen and (max-width: 800px) {
.search-textfield {
width : 73%;
}
}

@media only screen and (max-width: 414px) {
.search-textfield {
width : 53%;
}
}

.searchbutton {
clear: both;
margin : 10px 0 10px 0;
font-family: 'Raleway', sans-serif;
font-weight: 400;
font-size: 1.0em;
text-transform: uppercase;
padding : 6px 30px 6px 30px;
width : auto;
height : auto;
color: #fff;
background-color: #9e2e3b;
border: none;
text-shadow: none;
}

/*  Accordion Script */
.accord-content { display: none;}
.accord-header { 
cursor: pointer; 
background-color: #d9e6cd;
padding: 4px 20px 4px 20px;
margin-bottom: 10px;
}

.toggle-icon { 
float: right;
}

.toggle-icon:before {
content: '\002B';
color: #fff;
font-weight: bold;
font-size: 3em;
float: right;
margin-left: 20px;
}

.toggle-icon.active::after {
content: "\2212";
}