@import url(https://fonts.googleapis.com/css?family=Open+Sans);

/* Import von weiteren CSS-Dateien */
@import url("default-settings.css");

html, body {
font-family: 'Open Sans', Verdana, Geneva, sans-serif; 
font-size: 18px; line-height: 30px; 
color: #000;
/* Woerter in die naechste Zeile umbrechen, wenn sie ansonsten das umschliessende Element verlassen wuerden. */
word-wrap:break-word;
height: 100%;
}
html { overflow: scroll; overflow-x: auto; 
background-color: #FFF;
}


/* ----------------------------------------------------------------------------------
   Schriften + Generelle CSS-Anpassungen fuer diese Webseite
---------------------------------------------------------------------------------- */ 
a { text-decoration: underline; color: #000; }
a:hover { text-decoration: none; color: #0d4692; }
a:active, a:focus { outline: 0; }
a:hover img { opacity: 0.8; }

ul { margin: 0 0 10px 0; }
ul li { list-style-type: square; list-style-position: outside; margin: 0 0 10px 15px; padding: 0; }

h1, h2, h3, h4, h5, h6 { font-family: Verdana, Geneva, sans-serif; font-weight: normal; font-style: normal; font-size: 14px; line-height: 20px; margin: 0 0 30px 0; color: #0d4692; }
h1, .like_h1 { font-size: 80px; line-height: 90px; margin: 0 0 10px 0; }
h2, .like_h2 { font-size: 25px; line-height: 30px; margin: 0 0 10px 0; }
h3, .like_h3 { font-size: 25px; line-height: 30px; color: #000; } 
h4, .like_h4 { font-size: 18px; } 
h5, .like_h5 { font-size: 14px; } 
h6, .like_h6 { font-size: 12px; } 

em { font-style: italic; font-weight: 400; }
strong { font-weight: 700; }
p { margin: 0 0 20px 0; padding: 0;}
td { padding: 0 8px 6px 0; vertical-align: top; }

hr { clear: both; height: 1px; width: 100%; margin: 0 0 20px 0; border: none; background-color: #000; } 

/* ----------------------------------------------------------------------------------
   CSS-Einstellungen fuer das Addon Modulhelper (bzw. bw_modulhelper)
---------------------------------------------------------------------------------- */ 
/* ------------ Outer Box ------------ */
/* Ausgangswerte: (Seitenbreite: 1600px | Abstand: 30px) */
.outer_box { clear: both; display: block; float: left; width: 96.25%; margin: 0 0 1.88% 1.88%; padding: 0; }
.box_width_1_2 { clear: none; width: 47.19%; }
.box_width_1_3 { clear: none; width: 30.83%; }
.box_width_2_3 { clear: none; width: 63.54%; }
.box_width_1_4 { clear: none; width: 22.66%; }

@media all and (max-width:480px) {
.outer_box { clear: both; float: none; width: 96.25%; margin: 0 0 1.88% 1.88%; }
} 

.text { padding: 60px 60px 30px 60px; }

.box_blue,
.box_green { display: block; position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0; padding: 45px 0 0 0; z-index: 1; }

.box_logo { display: block; position: absolute; top: 0; left: 0; width: 100%; height: auto; margin: 0; padding: 0; z-index: 10; text-align: center; }

.box_blue .text,
.box_green .text { padding-top: 150px; margin-bottom: 30px; }

.box_blue .text { background-color: #d5edf9; }
.box_green .text { background-color: #dae2d1; }
.box_green .text h2 { color: #238034; }


a.link_box { color: #000; text-decoration: none; }
a.link_box:hover { color: #000; text-decoration: none; }
a.link_box:hover img { opacity: 1.0; }
a.link_box:hover h2,
a.link_box:hover h3 { color: #FFF; }
a.link_box:hover .box_blue .text { background-color: #0d4692; color: #FFF; }
a.link_box:hover .box_green .text { background-color: #238034; color: #FFF; }

/* ----------------------------------------------------------------------------------
   Ausrichtung der Seite und der <div>-Container (Reihenfolge von oben nach unten)
---------------------------------------------------------------------------------- */ 
#page, #content { display: block; position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0; padding: 0; z-index: 1; }

#page { width: 1600px; min-height: 100%; margin: 0 auto; padding: 150px 0 0 0; background-image: url(bg_page.jpg); background-position: center top; background-repeat: no-repeat; }

#content { padding: 0; }


/* ----------------------------------------------------------------------------------
   Responsive Webdesign
---------------------------------------------------------------------------------- */ 
@media all and (min-width:1px) {
#page { width: 100%; max-width: 1600px; min-width: 300px; overflow: hidden; }
}

@media all and (max-width:1600px) {
/* mit dem Setzen der Breite auf geht das reponsive Webdesign erst richtig los */
#page { width: 100%; min-width: 300px; overflow: hidden; }

}

@media all and (max-width:980px) {
h1 { font-size: 60px; line-height: 70px; } 

.text { padding: 40px 40px 20px 40px; }

.box_blue .text, .box_green .text { padding-top: 60px; }

} 

@media all and (max-width:768px) {
h1 { font-size: 50px; line-height: 60px; } 

.outer_box { clear: both; float: none; width: auto; margin: 0 10px 30px 10px; }

.text { padding: 20px 20px 10px 20px; }

.box_blue .text, .box_green .text { padding-top: 120px; margin-bottom: 20px;  }

} 

@media all and (max-width:480px) {
h1 { font-size: 40px; line-height: 50px; } 

.text { padding: 20px 10px 10px 10px; }

.box_blue .text, .box_green .text { padding-top: 60px; }

}