/* Global */

body, html {
font-family: "Open Sans", Arial, sans-serif;
font-size: 1em;
color: #000000;
line-height: 1.6em;
font-weight: 300;
height: 100%;
width: 100%;
min-width: 320px;
margin: 0px;
padding: 0px;
text-align: left;
background: #e0e1e1;
-ms-text-size-adjust: none;
-webkit-text-size-adjust: none;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}


img { border: 0px; text-decoration: none; border-style: none; border-width: 0; }
a { outline: 0; -moz-outline: 0 }
b, strong { font-weight: 600; }
i, em { font-style: italic; }
form { margin: 0px; padding: 0px; }
p { margin: 0px; padding: 0px; }
ul { margin: 0px; padding: 0px; }
li { margin-left: 15px; }
.mi { display: inline-block; }
.wh100 { width: 100%; height: auto; }
.fs { font-size: 70%; line-height: 125%; }
.fm { font-size: 85%; line-height: 125%; }
.FA { font-family: 'FontAwesome'; }

.dispb { display: block; }
.dispn { display: none; }

.cb {
clear: both;
}

.fl {
float: left;
}

.fr {
float: right;
}

.do {
display: inline-block;
}

.mo {
display: none;
}

.wsnw { white-space: nowrap; }

* { 
box-sizing: border-box;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}


/* Headlines */

h1, h2, h3, #q1, #q2, #q3, #newsletter, #footer {
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}

h1 {
color: #5f9233;
font-weight: 600;
font-size: 2.3em;
line-height: 1.2em;
margin: 0px auto;
text-align: center;
padding: 0px 20px 20px 0px;
}

h2 {
color: #b7292b;
font-weight: 300;
font-size: 1.4em;
line-height: 115%;
padding: 0px 0px 30px 0px;
}


h3 {
color: #b7292b;
font-weight: 400;
font-size: 1.1em;
line-height: 115%;
padding: 5px 0px 5px 0px;
margin: 0px;
}



/* Container */

#wrapper {
position: relative;
width: 100%;
max-width: 900px;
margin: 0px auto;
padding: 0px 50px 0px 50px;
z-index: 1;
}

#hw {
position: fixed;
top: 0px;
width: 100%;
height: 60px;
background: #5bb5d8;
z-index: 99;
text-align: center;
}

#header {
position: relative;
width: 100%;
max-width: 1200px;
height: 60px;
margin: 0px auto;
}

.headerlogo {
position: absolute;
left: 20px;
width: 300px;
height: auto;
padding: 15px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}


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

#footer {
width: 100%;
max-width: 800px;
background: #5bb5d8;
text-align: center;
margin: 0px auto;
font-weight: 400;
position: relative;
}

#footer a {
text-decoration: none;
}

#footer a:hover {
text-decoration: underline;
}

#foo-l {
position: absolute;
left: 0px;
top: 0px;
padding: 35px 0px 35px 25px;
text-align: left;
}

#foo-r {
position: absolute;
right: 0px;
top: 0px;
padding: 35px 25px 35px 0px;
text-align: right;
}

#foo-c {
padding: 35px 0px 35px 0px;
}

.visual {
position: relative;
width: 100%;
max-width: 800px;
margin: 0px auto;
line-height: 0px;
}

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



/* Sections */

section {
display: block;
width: 100%;
max-width: 800px;
background: #ffffff;
text-align: left;
margin: 0px auto;
padding: 120px 25px 120px 25px;
}


.conleft {
float: left;
width: 48%;
}

.conright {
float: right;
width: 48%;
}




@media only screen and (max-width: 1000px) {

.do {
display: none;
}


}



@media only screen and (max-width: 800px) {

.mo { display: inline-block; }

#wrapper {
position: relative;
width: 100%;
max-width: 1000px;
margin: 0px auto;
padding: 0px 0px 0px 0px;
z-index: 1;
}

#hw {
position: fixed;
top: 0px;
width: 100%;
height: 60px;
background: #5bb5d8;
z-index: 99;
text-align: center;
box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}

section {
display: block;
width: 100%;
max-width: 800px;
background: #ffffff;
text-align: left;
margin: 0px auto;
padding: 80px 20px 80px 20px;
}

#foo-l {
position: relative;
left: auto;
top: auto;
padding: 35px 20px 20px 20px;
text-align: left;
width: 100%;
}

#foo-r {
position: relative;
left: auto;
top: auto;
padding: 20px 20px 35px 20px;
text-align: left;
width: 100%;
}

#foo-c {
padding: 0px 20px 0px 20px;
text-align: left;
width: 100%;
}

}



@media only screen and (max-width: 600px) {

.headerlogo {
position: absolute;
left: 20px;
width: 240px;
height: auto;
padding: 17px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}


.conleft {
float: none;
width: 100%;
}

.conright {
float: none;
width: 100%;
padding: 20px 0px 0px 0px;
}

}



@media only screen and (max-width: 400px) {



}