html {font-family: 'Open Sans', sans-serif; font-size: 22px; line-height: 30px; font-weight: lighter;}
@media screen and (max-width : 680px){ html {font-size: 14px; line-height: 19px;} }
body {margin: 0px;}
* {margin: 0; padding: 0;}
.clear {clear: both;}
img {border: 0px;}




@media screen and (max-width : 680px){ .novis680 {display: none;} }




/* NAV */


nav {display: flex; justify-content: center;}
nav a{display: block; padding: 12px 15px; text-decoration: none;}
nav a:hover{}


@media screen and (max-width : 680px){
nav {display: block;}
nav a {width: 94%; padding: 12px 3%; border-bottom: 1px solid #E7E7E7;}
}

/********/






.colordiv {padding: 4%; text-align: center; position: relative;}
.colordiv:after {content: ""; display: block; margin: auto; width: 5%; height: 0%; padding-bottom: 5%; position: absolute; bottom: 0; left: calc(47.5%); transform: translate(0px, 50%) rotate(45deg);}
.colordiv h1 {font-size: 80px; line-height: 90px; text-transform: uppercase; font-family: 'Yanone Kaffeesatz', sans-serif;}

.bigsubtitle {font-size: 50px; line-height: 70px; text-transform: uppercase;}


@media screen and (max-width : 1000px){
	.colordiv h1 {font-size: 50px; line-height: 60px;}
	.bigsubtitle {font-size: 40px; line-height: 50px;}
}

@media screen and (max-width : 680px){
	.colordiv:after {width: 8%; padding-bottom: 8%;}
	.colordiv h1 {font-size: 30px; line-height: 40px;}
	.bigsubtitle {font-size: 30px; line-height: 40px;}
}

@media screen and (max-width : 480px){
	.colordiv h1 {font-size: 21px; line-height: 26px;}
	.bigsubtitle {font-size: 16px; line-height: 25px;}
}







.nummer {width: 620px; height: 265px; margin: 1% auto; background: url(img/nummer.png);}
@media screen and (max-width : 680px){ .nummer, .nummer a {display: block; width: 98%; height: 0; padding-bottom: 40.017%; margin: 1% auto; background: url(img/nummer-res.png); background-size: 100%;} }



.backgrounddiv {padding: 0 6%; margin: 6% 0; text-align: center; position: relative;}
.backgrounddiv h2 {font-size: 50px; line-height: 70px; text-transform: uppercase; font-family: 'Yanone Kaffeesatz', sans-serif;}
.backgrounddiv p, .colordiv p, .colordiv2 p {max-width: 1200px; margin: 2% auto;}

@media screen and (max-width : 680px){
	.backgrounddiv h2 {font-size: 25px; line-height: 30px;}
}








.colordiv2 {padding: 5% 0 2% 0; text-align: center; position: relative;}
.colordiv2:before {content: ""; display: block; margin: auto; width: 5%; height: 0%; padding-bottom: 5%; position: absolute; top: 0; left: calc(47.5%); transform: translate(0px, -50%) rotate(45deg);}
.colordiv2 h1 {font-size: 100px; line-height: 110px; text-transform: uppercase; font-family: 'Yanone Kaffeesatz', sans-serif;}

@media screen and (max-width : 680px){
	.colordiv2:before {width: 8%; padding-bottom: 8%;}
}







.liste1 {max-width: 1000px; padding-left: 8%; margin: 20px auto; text-align: left; list-style-type: none;}
.liste1 li {margin-bottom: 1%;}
.liste1 li:before {font-family: FontAwesome; content: "\f0da"; margin-right: 10px;}


.liste2 {text-align: left; max-width: 900px; margin: 50px auto 0 auto; list-style-type: none;}
.liste2 li {margin-bottom: 5%;}
.liste2 p {clear: both; margin-top: 15px; width: 100%;}
@media screen and (max-width : 680px){
	.liste2 li {margin-bottom: 20%;}
	.liste2 p {margin-top: 3%;}
}









footer {width: 100%; padding: 20px 0; text-align: center;}








/* ------BILDER------ */
.pictureleft {display: block; float: left; margin-right: 1%;}
.pictureright {display: block; float: right; margin-left: 1%;}
.picturefull {display: block; width: 96%; margin: 1% auto;}
.pictureborder {padding: 1%;}

.pw20 {width: 20%;}
.pw25 {width: 25%;}
.pw30 {width: 30%;}
.pw35 {width: 35%;}
.pw40 {width: 40%;}

.mw200 {max-width: 200px;}
.mw250 {max-width: 250px;}
.mw300 {max-width: 300px;}
.mw350 {max-width: 350px;}
.mw400 {max-width: 400px;}
.mw450 {max-width: 450px;}
.mw500 {max-width: 500px;}
.mw550 {max-width: 550px;}
.mw600 {max-width: 600px;}
.mw650 {max-width: 650px;}
.mw700 {max-width: 700px;}
.mw750 {max-width: 750px;}
.mw800 {max-width: 800px;}

.mt1 {margin-top: 1%;}



/***** FARBANGABEN *****/
nav {background: #FFF;}

html, a {color: #333;}

.colordiv, .colordiv2, .colordiv:after, nav a:hover {background: #622837; color: #CCC;}
.colordiv h1, nav a:hover {color: #f17b33;}
.bigsubtitle {color: #FFF;}
.backgrounddiv, .colordiv2:before {background: #FFF;}
.colordiv2 h1 {color: #FFF;}


.liste1 li:before, .iconbox .iconboxtxt h2:before, nav a {color: #f17b33;}





footer {background: #333; color: #999;}


.pictureborder {box-shadow: 0 0 5px rgba(0,0,0, 0.3); background: #FFF;}




/*!
*  Font Awesome 4.4.0 by @davegandy - http://fontawesome.io - @fontawesome
*  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/@font-face{font-family:'FontAwesome';src:url('fonts/fontawesome-webfont.eot?v=4.4.0');src:url('fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'),url('fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'),url('fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'),url('fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'),url('fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');font-weight:normal !important;font-style:normal}