@charset "UTF-8";
/* CSS Document */

/* Reset */



*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

* {
	margin:0;
	padding:0;
	list-style:none;
	font-family: 'Poppins', sans-serif;
	font-weight: 200;

}

body{
	margin:0px;
	padding:0px;
    color: #717276;
  -ms-hyphens: auto; /* ab IE10 */
  -moz-hyphens: auto; /* seit Firefox 6 */
  -webkit-hyphens: auto; /* seit Safari 5.1 (OS X), Safari 4.1 (iOS) */
  hyphens: auto;
	}


h1 {
	font-weight: 500;
	font-size: 184%;
    text-transform: uppercase;
    padding-bottom: 15px;
}

h2 {
	font-weight: normal;
	font-size: 160%;
    padding-bottom: 20px;
	background:url("../grafik/bg-h2.gif") no-repeat bottom center;
}

h3 {
	font-weight: normal;
	font-size: 300%;
    margin-bottom: 10px;
}

h4 {
	font-weight: normal;
	font-size: 160%;
    padding-bottom: 10px;
}

p { 
    font-size: 120%;
    margin:0px 0 20px 0;
    line-height: 150%;
	font-family: 'Poppins', sans-serif;
}

.tx-large  { font-size: 140%;
    line-height: 140%; }

a { 
    font-size: 100%;
    text-decoration: none;
    color: #727272;
    }

a:hover{ 
    text-decoration: underline; }


.tx-weiss a { 
    font-size: 100%;
    text-decoration: none;
    color: #fff;
    text-decoration: underline;
    }

.weiss a { 
    font-size: 100%;
    text-decoration: none;
    color: #727272;
    text-decoration: underline;
    }

.weiss a:hover { 
    color: #e84124;
    }

li{
	list-style: none;
	padding: 10px 5px 5px 0px;
	padding-left: 20px;
	margin-left: 5px;
	display: block;
	background-image: url(../grafik/list.svg);
	background-position: left top 11px;
	background-repeat: no-repeat;
	background-size: 12px;
}


li:last-child{
	margin-bottom: 15px;
}

/*====================================== HEAD ======================================*/


header {
	width:1500px;
	margin: auto;
	padding: 2% 0% 0% 0%;
}

.logo {
	width: 70%;
	max-width:250px;
	padding:1em;
	padding-top: 35px;
	float: left;
	text-decoration:none;
	color:#fff;
}

.logo img{
	width:100%;
}

.slogan-head{
	font-size: 300%;
	padding: 5% 0 0 20%;
	color: #fff;
	font-weight: 200;
	font-family: 'Oswald', sans-serif; 
	}

.slogan-head .tx-orange{
	color: #e84124;
	font-weight: 400;
	font-family: 'Oswald', sans-serif; 
	}

.index-head{	 
  background: url(../images/head-index.jpg) no-repeat center center; 
  height: 55vh;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.bereiche-head{	 
  background: url(../images/head-bereiche.jpg) no-repeat center center; 
  height: 55vh;
	position: relative;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.philo-head{	 
  background: url("../images/head-philo.jpg") no-repeat center center; 
  height: 55vh;
	position: relative;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.kontakt-head{	 
  background: url("../grafik/karte-osterhof.svg") no-repeat right top; 
  height: 55vh;
	position: relative;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.kontakt-head iframe{	
	width: 100%;
	height: 55vh;
}

.head-link{
	position: absolute;
	bottom: 10%;
	width: 90px;
    height: 90px;
	left: 50%;
	margin-left: -55px;
	background: rgba(255, 255, 255, 0) url("../grafik/pfeil-down.png") no-repeat scroll center top 33px / 45% auto;
	transition: all 0.4s ease 0s;
    border-radius: 100px;
    border: 7px solid #fff;
}

.head-link:hover{
	background: rgba(255, 255, 255, 0) url("../grafik/pfeil-down.png") no-repeat scroll center top 33px / 45% auto;
	color: #ffffff;
	bottom: 9%;
	transition: all 0.6s ease 0s;
}

.maps{	
	width: 50%;
    height: 100%;
	margin: auto;
	
}


/* ---------------------------------- CONTENT ---------------------------------- */

section {
	width: 100%;
	clear: both;
} 

.main {
	width: 91.66%;
	max-width: 1280px;
	margin: auto;
	clear: both;
}

.box {
	width: 95%;
	max-width: 2000px;
	margin: auto;
	clear: both;
}

.box-bereiche{
	width: 95%;
	max-width: 2000px;
	clear: both;
	padding:10% 3% 0 0;
	position: relative;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


.landwirtschaft{	 
  background: url("../images/bereiche-landwirtschaft.jpg") no-repeat left center; 
}

.windkraft{	 
  background: url("../images/bereiche-windkraft.jpg") no-repeat left center; 
}

.pv{	 
  background: url("../images/bereiche-pv.jpg") no-repeat left center; 
}

.flaechenmanagement{	 
  background: url("../images/bereiche-flaechenmanagement.jpg") no-repeat left center; 
}

.landwirtschaft, .flaechenmanagement, .pv, .windkraft{	 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
	
}



a.button1 {
    background: rgba(255, 255, 255, 1);
    color: #e84124;
	text-decoration: none;
	padding: 10px;
	transition: 0.2s;
	text-decoration: none;
	font-size: 100%;
	font-weight: 300;
}

.button1:hover, .weiss a:hover.button1 {
    border: 1px solid #fff;
    background: rgba(0, 0, 0, 0);
    color: #fff;
	text-decoration: none;
}

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

/*----------- icon ----------- */


.icon-head{
	width:95%;
	max-width:1200px;
	margin: auto;
}

.icon-bereiche{
	float: left;
	text-align: center;
	width: 20%;
	height: 20%;
	padding: 3%;
	margin: 0 2% 0 2%; 
	margin-top: 45vh;
	background-color:#e84124; 
}
.icon{
    position: absolute;
    width: 50%;
    height: 50%;
    margin-left: -25%;
    left: 50%;
    bottom: -60px;
    text-align: center;
}


.icon img, .icon-bereiche img, .icon-bereiche-short img{
	width: 50%;
	margin-top: 10%;
	margin-bottom: 3%;
}


.icon-bereiche-short img{
	width: 80%;
	margin-top: 15%;
	margin-bottom: 3%;
}

.icon-bereiche-short{
	float: left;
	text-align: center;
	width: 17%;
	height: 17%;
	padding: 2%;
	margin: 0 2% 0 0%; 
	background-color:#e84124; 
}


.icon a, .icon-bereiche a{
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
}

/* ---------------------------------- EIN - AUSBLENDEN ---------------------------------- */

.ct-block, .cm-block, .cs-block, .block-16 { display: none; }


/* ---------------------------------- SPALTEN ---------------------------------- */

.cd,.cd1,.cd2,.cd3,.cd4,.cd5,.cd6,.cd7,.cd8,.cd9,.cd10,.cd11,.cd12,
.ct,.ct1,.ct2,.ct3,.ct4,.ct5,.ct6,.ct7,.ct8,.ct9,.ct10,.ct11,.ct12,
.cm,.cm1,.cm2,.cm3,.cm4,.cm5,.cm6,.cm7,.cm8,.cm9,.cm10,.cm11,.cm12,
.cs,.cs1,.cs2,.cs3,.cs4,.cs5,.cs6,.cs7,.cs8,.cs9,.cs10,.cs11,.cs12 {
	float: left;
}

.cd1 { width:8.33%; }

.cd2 { width:16.66%; }

.cd3 { width:25%; }

.cd4 { width:33.33%; }

.cd5 { width:41.66%; }

.cd6 { width:50%; }

.cd7 { width:58.33%; }

.cd8 { width:66.66%; }

.cd9 { width:75%; }

.cd10 { width:83.33%; }

.cd11 { width:91.66%; }

.cd12 {	width:100%; }


/* ---------------------------------- SPALTEN - AUSRICHTUNG ---------------------------------- */

.cr { float: right; }
	
.cl { float: left; }

.cc { float: none; margin: auto; }

.relativ { position: relative; }

.absolut { position: absolute; }

/* ---------------------------------- TEXTE - AUSRICHTUNG ---------------------------------- */

.tx-center { text-align: center; }
.tx-left { text-align: left; }
.tx-right {text-align: right; }




/* ---------------------------------- BG ---------------------------------- */


.bg-logo{
	background:url("../grafik/bg-logo.png") no-repeat center center;
}


.bg-schnell{
	background:url("../grafik/bg-schnell.png") no-repeat center bottom;
    min-height: 475px;
}



/* ---------------------------------- FARBEN ---------------------------------- */


.weiss { background-color: #ffffff; }

.grau { background-color: #666; }

.blau{ background-color: #254676; }

.orange { background-color:#e84124; }




.tx-weiss { color: #ffffff; }

.tx-grau { color: #333; }

.tx-blau { color: #254676; }

.tx-orange { color:#e84124; }




/* ---------------------------------- ABSTÄNDE ---------------------------------- */

.pd-10 {
	padding-left: 10px;
	padding-right: 10px;
}
.pd-15 {
	padding-left: 15px;
	padding-right: 15px;
}
.pd-25 {
	padding-left: 25px;
	padding-right: 25px;
}

.pd-50 {
	padding: 5%;
}

.pd-3 {
	padding: 3%;
}

.mgt-bereiche {
	margin-top: 20vh;
}

.mg-2 {
	margin: 2%;
}


/* ---------------------------------- TRENNER ---------------------------------- */


.trenner {
	width: 100%;
	height: 1px;
	clear:both;
}

.trenner-head {
	width: 100%;
	clear:both;
	height: 165px;
}

.trenner-50 {
	width: 100%;
	clear:both;
	height: 3vw;
}

.trenner-25 {
	width: 100%;
	clear:both;
	height: 2vw;
}

.trenner-10 {
	width: 100%;
	clear:both;
	height: 1vw;
}



	
	
/* ---------------------------------- FOOTER ---------------------------------- */

footer{
    width:100%;
    padding: 5% 0% 1% 0%;
    line-height: 150%;
}

footer div{
    padding: 0.5% 3% 1% 3%;
}

footer .logo{
    width:100px;
    float: left;
	padding: 0px 10px 0px 10px;
}

footer .logo img{
    width:100%;
}

footer a{
	color:#e84124;
	padding: 0px 0px 0px 10px;
	font-size: 135%;
	font-weight: 400;
	font-family: 'Oswald', sans-serif;
}


/* ---------------------------------- UP SCROLLER  ---------------------------------- */

.scrollup{
    width:40px;
    height:40px;
    position:fixed;
	z-index:30;
    bottom:60px;
    right:0px;
    display:none;
    text-indent:-9999px;
    background: url(../grafik/icon_top.png) no-repeat;
}





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

.icon a, .icon-bereiche a{
	font-size: 80%;
}





@media only screen and (max-width: 1730px) { 
.icon{
    position: absolute;
    width: 65%;
    height: 65%;
    margin-left: -32.5%;
    left: 50%;
    bottom: -50px;
    text-align: center;
}
}





@media only screen and (max-width: 1600px) { 
header {
	width:100%;
}
    
    .block-16 { display:block;   }
	
}





@media only screen and (max-width: 1280px) { 
    
    
.logo-nav{
	width: 33%;
}

.icon-head{
	width:90%;
}
	.icon a{
		font-size: 90%;
	}

/*
.index-head{	 
	background: url("../images/head-index-mobil.jpg") no-repeat top center; }*/
	
	
/* ---------------------------------- SPALTEN ---------------------------------- */

.ct1 { width:8.33%; }

.ct2 { width:16.66%; }

.ct3 { width:25%; }

.ct4 { width:33.33%; }

.ct5 { width:41.66%; }

.ct6 { width:50%; }

.ct7 { width:58.33%; }

.ct8 { width:66.66%; }

.ct9 { width:75%; }

.ct10 { width:83.33%; }

.ct11 { width:91.66%; }

.ct12 {	width:100%; }

	
/* ---------------------------------- AUSRICHTUNG ---------------------------------- */

    .ct-l{
        float: left;
    }
    .ct-r{
        float: right;
    }
    .ct-c{
        float: none;
        margin: auto;
    }
    .ct-i100 img{
        width: 100%;
    }
	
/* ---------------------------------- EIN - AUSBLENDEN ---------------------------------- */
	
.ct-none { display: none; }
	
.ct-block { display: block; }	
	
	
/* ---------------------------------- TEXTE ---------------------------------- */


h3 { font-size: 200%; }

h2 {font-size: 130%; }

h1 {font-size: 130%; }

p { font-size: 85%; }
	
.tx-large  { font-size: 110%; }	
	
/* ---------------------------------- Icon ---------------------------------- */

.icon-bereiche{
	width: 22.5%;
	height: 22.5%;
	padding: 1%;
	margin: 0 1% 0 1%; 
	margin-top: 45vh;
	background-color:#e84124; 
	font-size: 100%;
}
	
.icon{
    position: absolute;
    width: 80%;
    height: 80%;
    margin-left: -40%;
    left: 50%;
    bottom: -60px;
    text-align: center;
	font-size: 80%;
}
	
/* ---------------------------------- TRENNER ---------------------------------- */	

.trenner-50 {
	width: 100%;
	clear:both;
	height: 50px;
}

.trenner-25 {
	width: 100%;
	clear:both;
	height: 25px;
}

.trenner-10 {
	width: 100%;
	clear:both;
	height: 10px;
}

} /* ------- ENDE 1280 ----- */



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

/* ---------------------------------- SPALTEN ---------------------------------- */

.cm1 { width:8.33%; }

.cm2 { width:16.66%; }

.cm3 { width:25%; }

.cm4 { width:33.33%; }

.cm5 { width:41.66%; }

.cm6 { width:50%; }

.cm7 { width:58.33%; }

.cm8 { width:66.66%; }

.cm9 { width:75%; }

.cm10 { width:83.33%; }

.cm11 { width:91.66%; }

.cm12 {	width:100%; }
		
/* ---------------------------------- EIN - AUSBLENDEN ---------------------------------- */
	
.cm-none { display: none; }
	
.cm-block { display: block; }	

	
/* ---------------------------------- AUSRICHTUNG ---------------------------------- */

    .cm-l{
        float: left;
    }
    .cm-r{
        float: right;
    }
    .cm-c{
        float: none;
        margin: auto;
    }    
    
    .cmtx-l{
        text-align: left;
    }
    .cmtx-r{
        text-align: right;
    }
    .cmtx-c{
        text-align:center;
    }
    .cm-i100 img{
        width: 100%;
    }
	
	
/* ---------------------------------- ABSTÄNDE ---------------------------------- */

.pd-15 {
	padding-left: 10px;
	padding-right: 10px;
}
.pd-25 {
	padding-left: 15px;
	padding-right: 15px;
}
	
	
	
	
/* ---------------------------------- TEXTE ---------------------------------- */


h3 { font-size: 150%; }

h2 {font-size: 130%; }

h1 {font-size: 130%; }

p { font-size: 95%; }
		
.tx-large  { font-size: 100%; line-height: 130%; }	
	
	
	
/* ---------------------------------- Icon ---------------------------------- */

.icon-bereiche{
	width: 22.5%;
	height: 22.5%;
	padding: 1%;
	margin: 0 1% 0 1%; 
	margin-top: 40vh;
	background-color:#e84124; 
	font-size: 80%;
}
	
.icon{
    position: absolute;
    width: 50%;
    height: 50%;
    margin-left: -25%;
    left: 50%;
    bottom: -60px;
    text-align: center;
	font-size: 80%;
}
	
/* ---------------------------------- SONSTIGES ---------------------------------- */	
/*
.index-head{	 
	background: url("../images/head-index-smart.jpg") no-repeat top center; }*/
    footer .cr{
        float:left;
        width: 100%;
    }
	
	

.head-link{
	bottom: 4%;
	width: 70px;
    height: 70px;
	background: rgba(255, 255, 255, 0) url("../grafik/pfeil-down.png") no-repeat scroll center top 25px / 45% auto;
	transition: all 0.4s ease 0s;
    border-radius: 100px;
    border: 4px solid #fff;
}

.kontakt-head{	 
  background: url("../grafik/karte-osterhof.svg") no-repeat right top; 
  height: 35vh;
	position: relative;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
	
} /* ------- ENDE 880 ----- */

@media only screen and (max-width: 660px) { 	
    footer .cl{
        width: 100%;
    }    
    
    footer .cr{
        float:right;
    }
	
	
/* ---------------------------------- Icon ---------------------------------- */


.icon-head{
	width:95%;
	max-width:1200px;
	margin: auto;
}

.icon-bereiche{
	width: 45%;
	height: 45%;
	padding: 2%;
	margin: 1% 2.5% 1% 2.5%; 
	background-color:#e84124; 
	font-size: 80%;
}
	
} /* ------- ENDE 660 ----- */


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

/* ---------------------------------- SPALTEN ---------------------------------- */

.cs1 { width:8.33%; }

.cs2 { width:16.66%; }

.cs3 { width:25%; }

.cs4 { width:33.33%; }

.cs5 { width:41.66%; }

.cs6 { width:50%; }

.cs7 { width:58.33%; }

.cs8 { width:66.66%; }

.cs9 { width:75%; }

.cs10 { width:83.33%; }

.cs11 { width:91.66%; }

.cs12 {	width:100%; }
		
.main {	width: 90%; }	
	
	
/* ---------------------------------- EIN - AUSBLENDEN ---------------------------------- */
	
.cs-none { display: none; }
	
.cs-block { display: block; }

.cs-c{ float: none; margin:auto;	}
	
.cs-img100 img { width:100%;}
		
	
/* ---------------------------------- TEXTE ---------------------------------- */


h3 { font-size: 150%; }

h2, h1 {font-size: 105%; }

.cs-block h1 {font-size: 200%; }

p,.tx-large { font-size: 95%; }
	
	
/* ---------------------------------- CONTENT ---------------------------------- */
	

.box-bereiche{
	width: 100%;
}	

.landwirtschaft{	 
  background: url("../images/bereiche-landwirtschaft.jpg") no-repeat center center; 
}	

.windkraft{	 
  background: url("../images/bereiche-windkraft.jpg") no-repeat center center; 
}	

.pv{	 
  background: url("../images/bereiche-pv.jpg") no-repeat center center; 
}	

.flaechenmanagement{	 
  background: url("../images/bereiche-flaechenmanagement.jpg") no-repeat bottom center; 
}

.kontakt-head{	 
  background: url("../grafik/karte-osterhof.svg") no-repeat center center; 
  height: 45vh;
	position: relative;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 200%;
}
	

	
.icon{
    position: absolute;
    width: 50%;
    height: 50%;
    margin-left: -25%;
    left: 50%;
    bottom: 60px;
    text-align: center;
	font-size: 80%;
}

	.icon a{
		font-size: 120%;
	}
	
	
/* ---------------------------------- ABSTÄNDE ---------------------------------- */

.pd-15 {
	padding-left: 0px;
	padding-right: 0px;
}
.pd-25 {
	padding-left: 10px;
	padding-right: 10px;
}

} /* ------- ENDE 600 ----- */




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

.kontakt-head{	 
  background: url("../grafik/karte-osterhof.svg") no-repeat center center; 
  height: 45vh;
	position: relative;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 250%;
}

	.icon a{
		font-size: 100%;
	}

	
}