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

body {font-family: 'robotolight'; background-color:#eaeddd;}

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

.respic {
	width:100%;
	max-width:1600px;
}

.frame {border:5px solid #97b816; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;}

.downpfeil {width:65px;}
@media screen and (max-width: 1920px) {
.downpfeil {width:50px;}	
}
@media screen and (max-width: 1000px) {
.downpfeil {width:40px;}	
}

.logo {margin-top:80px; max-width:350px; width:80%; height:auto;}
@media screen and (max-width: 1000px) {
.logo {margin-top:30px; max-width:300px; width:80%; height:auto;}	
}
@media screen and (max-width: 600px) {
.logo {margin-top:20px; max-width:200px; width:60%; height:auto;}	
}

.logo_small {width:250px;}
@media screen and (max-width: 750px) {
.logo_small {width:180px;}
}

.footer {border-top:10px solid #eaeddd; font-family: 'robotobold'; letter-spacing:2px; color:#157741; font-size:20px;}
@media screen and (max-width: 1200px) {
.footer {border-top:10px solid #eaeddd; font-family: 'robotobold'; letter-spacing:2px; color:#157741; font-size:16px;}
}

ul {
	width:100%;
	margin:0;
	padding:0;
	margin:auto;
	font-family: 'robotomedium';
}
li {
	margin:auto;
	margin-left:0px;
	width:100%;
	list-style:none;
	padding-top:5px;
	padding-bottom:5px;
	font-family: 'robotomedium';
	font-size:28px;
	line-height:38px; 
	color:#000;
    padding-left: 1em;
    margin-left: 1.2em;
    text-indent: -2em;
	-webkit-box-sizing:border-box; 
	-moz-box-sizing:border-box; 
	box-sizing:border-box;
}

li::before { 
  	content: url(../pics/haken.png);
	padding-right:20px;
}
@media screen and (max-width: 600px) {
li::before { 
  	content: url(../pics/haken_small.png);
	padding-right:20px;
}
}

@media screen and (max-width: 1920px) {
li {
	width:100%;
	font-size:24px;
	line-height:32px; 
    padding-left: 1em;
    margin-left: 1.2em;
    text-indent: -2.3em;
	padding-top:15px;
	padding-bottom:15px;
}
}

@media screen and (max-width: 1200px) {
li {
	width:90%;
	font-size:24px;
	line-height:32px; 
    padding-left: 1em;
    margin-left: 1.2em;
    text-indent: -2.3em;
	padding-top:15px;
	padding-bottom:15px;
}
}

@media screen and (max-width: 600px) {
li {
	width:90%;
	font-size:18px;
	line-height:26px; 
    padding-left: 1em;
    margin-left: 1.2em;
    text-indent: -2.2em;
	padding-top:15px;
	padding-bottom:15px;
}
}

/* VIDEO-Player ------------------------------------------------------------------------------------------------------*/

.video_wrapper {
  position: relative;
  padding-bottom: 56%; /* ratio 16x9 - 63%*/
  height: 0;
  overflow: hidden;
  width:100%;
  margin:auto;
  height: auto;
}

.video_wrapper iframe {

  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  height: 100%;
}

.video_wrapper {
	 background-image: url('../pics/vorschaubild.jpg');
	 background-size: cover;
	 background-position: center center;
	 position: relative;
}
 .video_wrapper .video_trigger {
	 padding: 130px 30px;
	 height: -webkit-calc(100% - 260px);
	 height: -moz-calc(100% - 260px);
	 height: -o-calc(100% - 260px);
	 height: calc(100% - 260px);
	 width: -webkit-calc(100% - 60px);
	 width: -moz-calc(100% - 60px);
	 width: -o-calc(100% - 60px);
	 width: calc(100% - 60px);
	 position: absolute;
	 bottom: 0;
	 z-index: 9;
	 background-color: rgba(21, 119, 65, .7);
	 color: #fff;
}
 .video_wrapper .video_trigger:before {
	 position: absolute;
	 z-index: -1;
	 font-size: 120px;
	 color: rgba(255, 255, 255, .2);
	 width: 120px;
	 height: 120px;
	 line-height: 120px;
	 text-align: center;
	 top: -webkit-calc(50% - 60px);
	 top: calc(50% - 60px);
	 left: -webkit-calc(50% - 60px);
	 left: calc(50% - 60px);
}
 .video_wrapper .video_layer {
	 position: relative;
	 display: none;
	 height: inherit;
	 width: inherit;
	 margin: auto;
}
 .video_wrapper .video_layer iframe {
	 border: 0px none transparent;
	 height: inherit;
	 width: inherit;
	 vertical-align: middle;
}
/* Button */
 .btn {
	 cursor: pointer;
	 display: inline-block;
	 transition: color 0.5s, background-color 0.5s, border 0.5s;
	 padding: 8px 16px 8px 16px;
	 -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
	 font-size: 22px;
	 border: 1px solid #fff;
	 color:rgb(21, 119, 65);
	 font-family: 'robotobold';
}
@media screen and (max-width: 600px) {
 .btn {
	 font-size: 18px;
}
}

 .btn:hover {
	 background-color: transparent;
	 color: #000;
}


.ctabutton 		 {width:90%; max-width:650px; background-color:#97b816; padding:15px 0px 10px 0px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;}
.ctatext         {font-family: 'robotoblack_italic'; color:#fff; font-weight:normal; font-size:40px; line-height:55px; margin:0; padding:0;}
.ctatext a       {font-family: 'robotoblack_italic'; color:#fff; font-weight:normal; font-size:40px; line-height:55px; margin:0; padding:0;}
.ctatext a:hover {font-family: 'robotoblack_italic'; color:#157741; font-weight:normal; font-size:40px; line-height:55px; margin:0; padding:0;}

@media screen and (max-width: 1440px) {
.ctabutton 		 {width:90%; max-width:550px; background-color:#97b816; padding:15px 0px 10px 0px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;}
.ctatext         {font-family: 'robotoblack_italic'; color:#fff; font-weight:normal; font-size:36px; line-height:50px; margin:0; padding:0;}
.ctatext a       {font-family: 'robotoblack_italic'; color:#fff; font-weight:normal; font-size:36px; line-height:50px; margin:0; padding:0;}
.ctatext a:hover {font-family: 'robotoblack_italic'; color:#157741; font-weight:normal; font-size:36px; line-height:50px; margin:0; padding:0;}
}

@media screen and (max-width: 1000px) {
.ctabutton 		 {width:90%; max-width:550px; background-color:#97b816; padding:15px 0px 10px 0px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;}
.ctatext         {font-family: 'robotoblack_italic'; color:#fff; font-weight:normal; font-size:30px; line-height:40px; margin:0; padding:0;}
.ctatext a       {font-family: 'robotoblack_italic'; color:#fff; font-weight:normal; font-size:30px; line-height:40px; margin:0; padding:0;}
.ctatext a:hover {font-family: 'robotoblack_italic'; color:#157741; font-weight:normal; font-size:30px; line-height:40px; margin:0; padding:0;}
}

.greenery1 {padding:1.5%; 0% 2% 0%;}
@media screen and (max-width: 1000px) {
.greenery1 {padding:1%; 0% 1% 0%;}
}

.greenery2 {padding:2%; 0% 2% 0%;}
@media screen and (max-width: 1000px) {
.greenery2 {padding:0%; 0% 0% 0%;}
}

/*----- BASIC EFFECTS ------------------------------------------------------------------------------------------------*/

::selection 		{background: #424242; color: #fff; }
::-moz-selection 	{background: #424242; color: #fff; }

/*----- TYPO ---------------------------------------------------------------------------------------------------------*/

h1 		{font-family: 'robotobold'; font-weight:normal; font-size:50px; line-height:55px; margin:0; padding:0;}
h2 		{font-family: 'robotobold'; font-weight:normal; font-size:50px; line-height:55px; margin:0; padding:0;}
h3 		{font-family: 'robotobold'; font-weight:normal; font-size:36px; line-height:45px; margin:0; padding:0;}
h4 		{font-family: 'robotobold'; font-weight:normal; font-size:28px; line-height:38px; margin:0; padding:0;}
h5 		{font-family: 'robotoregular'; font-weight:normal; font-size:16px; line-height:32px; margin:0; padding:0; margin-top:0px; }
h6 		{font-family: 'robotoregular'; font-weight:normal; font-size:14px; line-height:22px; margin:0; padding:0; margin-top:0px; }
p    	{font-family: 'robotoregular'; font-size:22px; line-height:36px; color:#545454;}
i    	{font-family: 'robotoitalic'; font-weight:normal;}
a    	{font-family: 'robotobold'; font-weight:normal; text-decoration:none; color:#157741;}
a:hover {font-family: 'robotobold'; font-weight:normal; text-decoration:none; color:#97b816;}
strong	{font-family: 'robotobold'; font-weight:normal;}

.grey					{color:#545454;}
.green					{color:#97b816;}
.darkgreen				{color:#157741;}
.brightgreen			{background-color:#f4f8e7;}
.superlightgreen 		{background-color:#b3cb55;}
.white					{color:#ffffff;}
.black					{color:#000000;}
.orange					{color:#f29611;}

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


@media screen and (max-width: 1920px) {
h1 		{font-size:40px; line-height:50px;}
h2 		{font-size:40px; line-height:45px;}
h3 		{font-size:28px; line-height:36px;}
h4 		{font-size:24px; line-height:32px;}
h5 		{font-size:16px; line-height:32px;}
h6 		{font-size:14px; line-height:22px;}
p    	{font-size:22px; line-height:36px;}
}

@media screen and (max-width: 1440px) {
h1 		{font-size:38px; line-height:45px;}
h2 		{font-size:36px; line-height:45px;}
h3 		{font-size:28px; line-height:36px;}
h4 		{font-size:24px; line-height:32px;}
h5 		{font-size:16px; line-height:32px;}
h6 		{font-size:14px; line-height:22px;}
p    	{font-size:18px; line-height:28px;}
}

@media screen and (max-width: 750px) {
h1 		{font-size:32px; line-height:40px;}
h2 		{font-size:26px; line-height:36px;}
h3 		{font-size:24px; line-height:32px;}
h4 		{font-size:20px; line-height:28px;}
h5 		{font-size:16px; line-height:32px;}
h6 		{font-size:14px; line-height:22px;}
p    	{font-size:16px; line-height:24px;}
}

@media screen and (max-width: 600px) {
h1 		{font-size:28px; line-height:34px;}
h2 		{font-size:24px; line-height:32px;}
h3 		{font-size:22px; line-height:28px;}
h4 		{font-size:18px; line-height:26px;}
h5 		{font-size:16px; line-height:32px;}
h6 		{font-size:14px; line-height:22px;}
p    	{font-size:16px; line-height:22px;}
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}