@charset "UTF-8";

/* 
© HTML/CSS/Bilder/Video:
Dominic Schläpfer
Cavelti AG
Wilerstrasse 73
9201 Gossau
071 388 81 71
dschlaepfer@cavelti.ch
einfach gut gelöst.
*/


/* Browser-Reset */
* {
padding: 0%;
margin: 0%;
}

header, section, footer, aside, nav, article, figure {
display: block;	
}


/* Body-Font */
body {
font-family: 'Comfortaa', Verdana, Arial, sans-serif;
font-size: 16px;
font-weight: normal;
}


/* Zentrierter Wrapper */
#wrapper {
width: 1084px;
height: auto;
margin: 0% auto;
}


/* Header mit Logo und Nav */
header {
width: auto;
height: 5.8em;
}


/* Wesbo-Logo */
#logo {
float: left;	
width: 7.9335793357933575%; /* 86 / 1084 */
height: 10.14760147601476%; /* 110 / 1084 */
}

/* IE9-Problem (Rahmen um Links)*/
#logo img {
border: none;
}

#logo a img {
border: 0px;
}

article a {
border: none;
}

article a img {
border: 0px;
}

/* Kundenlogos Referenzen */
.klogo {
margin-top: 3%;
width: 25%;
height: auto;
}


/* Navigation */
nav {
width: 100%;
margin: 0% 0% 0.46125461254612543% 11.992619926199263%;
clear: both;
}

nav ul {
overflow: hidden;
transition: max-height 0.4s;
-webkit-transition: max-height 0.4s;
-ms-transition: max-height 0.4s;
-moz-transition: max-height 0.4s;
-o-transition: max-height 0.4s;
}

nav ul li {
list-style: none;
display: inline;
margin-left: 9.22509225092251%; /* 100 / 1084 */
font-size: 0.813em;
font-weight: 300;
letter-spacing: 0.02em;
}

/* Responsive Navigation Burger Button*/
.burgerbutton{
font-family: sans-serif;
font-weight: lighter;
font-size: 3em;
display: none;
color: #ada239;
}


/* Linkeigenschaften */
a, a:link, a:visited {
text-decoration: none;
color: #000;
}

a.active, a:hover {
text-decoration: none;
color: #ada239;
}

a:hover.referenzen {
color: #000;
}

a.referenzen {
color: #867e27;
}

/* IE10-Problem */
a:active {
background-color: transparent;
}


/* Section */
section {
width: 100%;
height: 18.938em;
margin-top: 3.125em;
}


/* Figure (Bild) */
figure.fltlft {
width: 50%;
height: 100%;
float: left;	
}

figure.fltrgt {
width: 50%;
height: 100%;
float: right;	
}

.img {
width: 100%;
height: 100%;	
}


/* Article */
article {
width: 40.533%;
height: 90.3%;
float: left;
background-color: #ECE9D2;
padding: 2.7675276752767526% 2.7675276752767526% 0% 6.7%;
}

hr {
width: 40%;
border: 0.0625em solid #ada239;
margin-top: 6.2%;
margin-bottom: 6.2%;
text-align: left;
}


/* iFrame */
iframe {
width: 100%;
height: 18.938em;
border: none;
}


/* Schriftformate */
h1 {
text-indent: -9999px;
}

h2 {
font-size: 1.5em;
font-weight: 400;
color: #867e27;
letter-spacing: 0.03em;
}

p {
font-size: 0.9em;
color: #867e27;
line-height: 1.9em;
font-weight: 300;
letter-spacing: 0.015em;
}


/* Button */
.button {
width: auto;
height: auto;
display: inline-block;
background-color: #ada239;
margin: 3% 1.5% 0% 0%;
padding: 2.5%;
font-size: 0.9em;
color: #fff;
}

.button:hover {
display: inline-block;
background-color: #867e27;
text-decoration: none;
}

.button a, .button a:hover {
text-decoration: none;
color: #fff;
}


/* Footer */
footer {
font-size: 0.75em;
margin: 4.1512915129151295% 0%;
}




/* media query Tablet */
@media screen and (max-width:1087px){


body {
font-size: 16px;
}


/* Zentrierter Wrapper */
#wrapper {
width: 80%;
}


/* Wesbo-Logo */
#logo {
float: left;	
width: 7.9335793357933575%; 
height: 10.14760147601476%; 
}


/* Navigation (z-index wegen Image-Slider)*/
nav {
position:absolute;
width: 63%;
z-index: 10;
}

nav ul {
max-height: 0;
}

nav ul li {
background-color: #EEE;
box-sizing: border-box;
display: block;
padding: 5%;
margin: 0% 0% 0% 50%; 
font-size: 1.1em;
}


/* Responsive Navigation Burger Button*/
.burgerbutton {
display: block;
text-align: right;
box-sizing: border-box;
cursor: pointer;
}

.animation {
max-height: 45em;
}


/* Section */
section {
width: 85%;
height: auto;
margin-top: 10%;
}


/* Figure (Bild) */
figure.fltlft {
width: 109%;
height: auto;
float: none;	
}

figure.fltrgt {
width: 109%;
height: auto;
float: none;	
}

.img {
width: 108.3%;
height: auto;
vertical-align: bottom;	
}


/* Article */
article {
width: 108%;
height: auto;
float: none;
background-color: #ECE9D2;
padding: 5%;
}

hr {
width: 30%;
border: 0.0625em solid #ada239;
margin: 6% 0%;
text-align: left;
}

/* Responsive-Design-Problem bei Artikel ohne Bild */
article.nopic {
margin-top: 10%;
}


/* iFrame */
iframe {
width: 108.3%;
height: 26.563em;
}

div.slider {
width: 108.2%;
}


/* Schriftformate */
h2 {
font-size: 1.4em;
letter-spacing: 0.03em;
}

p {
font-size: 0.9em;
line-height: 1.7em;
}


/* Button */
.button {
width: auto;
height: auto;
display: inline-block;
background-color: #ada239;
margin-top: 4.3%;
padding: 2.5%;
font-size: 1em;
color: #fff;
}

footer {
display: inline-block;
width: auto;
}


}



/* media query Handy */
@media screen and (max-width:750px){ 


/* Article */
article {
width: 102%;
padding: 8%;
}


}