:root {
	--PrimaryColor: #2fa72a; /* RBCOM Green */
   /* --Zweitfarbe: #2D76C7; */ /* für box-header: mtr blau. orange: #EF7F33 */
} 

/* START : RESET.CSS */

    /**
    * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
    */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, address, big, cite, code,
    em, img, q, s, small, strong, sub,  b, u, i, center, dl, dt, dd, ol, ul, li,
     form, label, button, legend, caption, table,tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, figure, footer, header, hgroup,
    menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-family:  Arial, 'Calibri', 'sans-serif', Courier, monospace;
	/*font-size: 100%; /* must be after font because otherwise: font:inherit will overwrite the 100% */
    }
	/* removed from list because of odd behaviour: table,tbody, tfoot, thead, tr, th, td, */
	
    /* HTML5 display-role reset for older browsers */
    article, details, figure, footer, header, menu, nav, section {
    display: block;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
    }
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }
/* END : RESET.CSS */


body {
	background-color:#dddddd;
	background-image: url("../img/background.jpg"); /* url("../img/background_winter.jpg"); */
	background-repeat: no-repeat;
	/* line-height: 24px; */
	color:#333;
	font-family:Arial, sans-serif, Verdana, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 24px;
}
p {
	padding: 0 10px;
	margin-bottom: 1.2em;
}
 
ul{
	list-style-image:url(../img/icon/list_icon_square.png);
	margin: 5px 0px 5px 30px;
}
ul.ulsquare{
	list-style-image:url(../img/icon/list_icon_square.png);
}
/* ul.asciisquare {
	list-style: none;
	font-size:10pt;
	margin-left: 10px;
}
ul.asciisquare li::before {
content: "\25A0\ "; color: #2fa721; font-size:12pt;
} */
li {
	padding-bottom: 10px;
	padding-left: 10px; /* between square and text */
}
h1, h2, h3{
	padding: 10px;	
	font-weight: bold;
}
h1 {
	font-size:160%;
}

h2 {
	font-size:140%;
}
h3 {
	font-size:115%;
}
#content h1{
	margin: 20px 0px;
}
#content h1.largeCaption{
	font-size:45px;
	/* font-family: Montserrat; */
	color: #474847;
	margin-top: 60px;
	margin-bottom: 25px;
}
#content h2.largeCaption{
	font-size: 40px;
	/* font-family: Montserrat; */
	color: #474847;
	margin-top: 50px;
	margin-bottom: 25px;
}
#contentheading h1 {
	padding: 0px 10px;
	font-size:160%;
}

#wrapper {
	margin: 0 auto;
	max-width: 1200px; /* previously fixed with but then it doesnt resize downward */
	z-index:0;
}

#contentwrapper {
	margin-top: 20px;
	background-color:#FFFFFF;
}

#social{
	position:absolute;
	right:5px;
	top:5px;
	width: auto; /*400px; */
}

#contentheading{
	min-height:200px;
	
	height: auto;
	width: auto; /* 1180px; */
	padding:10px 10px;
	background-color: #474847;
	position: relative;
	overflow: hidden;
	/* this because the picture frame gets larger with line-height 24 although the text itself doesnt really change
	line-height: 18px;   */
}

#contentheading img {
	object-fit: cover; /* important: this prevents image from downscaling and instead together with overflow: hidden; just lets you "crop" the image.  */
	/*object-position: 0 0; */ /* with this, the cropping is not to the center but to the top left */
	min-height: 200px;
}
#contentheading_pad{
	height:300px;
	width: auto; /*1180px;*/
	padding:10px 10px;
	background-color: #474847;
	position: relative;
}
#contentheading .heading{ /* heading in banner image, is not an actual h1 caption but just part of the image, should only be 1 h1 caption per site (SEO) */
	position: absolute;
	top:70px;
	left:10px;
	background:#2fa72a;
	color:#FFFFFF;
	padding:16px;
	font-size:26px;
	font-weight: bold;
	width:auto;
	min-width:150px;
	min-height:25px;
	filter: alpha(opacity=90);         
  	-moz-opacity: 0.9;          
  	-khtml-opacity: 0.9;        
 	opacity: 0.9;
  	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)';
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-topright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
}
#contentheading_pad .heading{
	position: absolute;
	top:90px;
	left:10px;
	background:#2fa72a;
	color:#FFFFFF;
	padding:20px;
	font-size:26px;
	width:auto;
	min-width:150px;
	height:30px;
	filter: alpha(opacity=90);         
  	-moz-opacity: 0.9;          
  	-khtml-opacity: 0.9;        
 	opacity: 0.9;
  	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)';
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-topright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
}
#content {
	float: left;
	background: #FFFFFF;
	max-width: 830px;
	margin-top: 10px;
	padding: 10px;
	
	min-height: 700px;
}
#content a:link{
	color:#2fa72a;
}
#content a:hover{
	color:#474847;
}
#content a:visited{
	color:#2fa72a;
}
#rightcolumn {
	background: #FFFFFF;
	width: 340px;
	float: right; /*left;*/
	padding-right: 10px;
	margin-top: 10px;
}

.slider-wrapper, .slider-wrapper-large, .slider-wrapper-medium, .slider-wrapper-small{
	padding:10px 10px;
	background-color: #474847;
}
.slider-wrapper{
	height:384px;
}
.slider-wrapper-large{
	height:352px;
}
.slider-wrapper-medium{
	height:302px;
}
.slider-wrapper-small{
	height:200px;

}
.submenu {
	background-color:#474847;
	color:#FFFFFF;
	/* width: 340px; */
}
.submenuwhite a{
		display: inline;

	}
.submenuwhite {
		background-color: #ffffff;
		color: #000000;
		border: 1px solid #dedede;
	}
	
.submenu .heading, .heading {
	padding:10px;
	background-color: #2fa72a;
}
.submenu ul{
	list-style:none;
	margin:0;
	padding:0;
	border-top: 1px solid #666666;
}
.submenu p {
	padding-top:5px;
	padding-right: 2px; /* default is 10 */
	margin:0;
}
.submenu li{
	margin: 0;
	padding: 0;
}
.submenu img{
	margin:5px 5px 0 10px;
}
.submenu a {
	display:block;
	padding: 5px 10px;
	/* width: 320px;*/
}
.submenu a:hover {
	background-color: #2fa72a;
	color:#FFFFFF;
	padding: 5px 10px;
}
.boxwhite .heading{
	color: #ffffff;
}
.boxwhite {
	background-color: #ffffff;
	color: #000000;
	/*width: 340px; */
	border: 2px solid #dedede;
}
.boxwhite a.noblock{
	display: inline;
	padding: 0px;
	width: auto;
	color: #000000;
}
.boxwhite img.submenuicon{
	width: 80px;
	margin:5px 20px 20px 10px;
	float: left;
}
.boxwhite img.submenuiconbig{
	width: 200px;
	margin:5px 20px 20px 10px;
	float: none;
}
	
.blue{
	color: #0000cd;
}
.green, a.green:hover,  a.green:link, a.green:visited{
	color: #2fa72a;
}

/* horizontal gray line between paragraphs */ 

hr.middleLine{
	margin: 30px auto;
	border: 1px solid #dedede;
	width: 50%;
}
/* horizontal line */
.splitter{
	border-top: 1px solid #CCCCCC;
	margin: 0px 10px 0px 10px;
}
a.greyBtn		  { color:#fff !important; display:block; line-height:30px; width:160px; padding:5px; text-align:center;}
a.greyBtn:link    { color:#fff !important; background-color:#474847; }
a.greyBtn:visited { color:#fff !important; background-color:#474847; }
a.greyBtn:hover   { color:#fff !important; background-color:#2fa72a; }
a.greyBtn:active  { color:#fff !important; background-color:#2fa72a; }
a.tranBtn		  { color:#2fa72a !important; display:block; line-height:30px; width:160px; padding:5px; text-align:center;}
a.tranBtn:link    { color:#2fa72a !important; background-color:#ffffff;}
a.tranBtn:visited { color:#2fa72a !important; background-color:#ffffff;}
a.tranBtn:hover   { color:#666666 !important; background-color:#ffffff;}
a.tranBtn:active  { color:#666666 !important; background-color:#ffffff;}
/*LINKS*/
a:link, a:visited {
	color:#FFFFFF;
	text-decoration:none;
}
a:hover {
	color:#FFFFFF;
}

/* gewerbeverband pfaffenhofen */
a.gvp:link{
	position:relative;
	display:block;
	width:128px;
	height:128px;
	background-image:url(../img/gewerbeverband.png);
	margin: auto;
}
.tel{
	position:relative;
	color: #ffffff;
	float:right;
	display:block;
	margin:0 0 0 5px;
	padding:0 40px 0 10px;
	background:#474847;
	line-height: 32px;
	background-image:url(../img/icon/phone_32x32_gray.png);
	background-repeat:no-repeat;
	background-position:right;
	border-radius:3px;
	-moz-border-radius: 3px;
}
.tel:hover{
	background-image:url(../img/icon/phone_32x32.png);	
}
a.mail:link{
	position:relative;
	float:right;
	display:block;
	width:32px;
	height:32px;
	margin:0 0 0 5px;
	padding:0;
	background-image:url(../img/icon/email_32x32_gray.png);
}
a.mail:hover{
	background-image:url(../img/icon/email_32x32.png);
}
.partnerTable{
	margin-left:10px;
	
}
.partnerTable tr{
 	border-bottom:1px solid #CCCCCC;
	border-top:1px solid #CCCCCC;
	
}
.partnerTable tr td{
	padding:10px 0px;
}
.TopTable{
	margin-left:10px;
}
.TopTable tr{
 	border-top:1px solid #CCCCCC;
	}
.TopTable tr td{
	padding:10px 0px;
}

/* modern tables realized with responsive css */
section {
  display: table;
  width: 100%;
  padding: 0 10px;
}

section > * {
  display: table-row;
}

section .col {
  display: table-cell;
}

.kursiv{
	font-style:italic;
}
.centerImg{
	margin: 0 auto;
	display: block;
	text-align:center;
}
.handwritten{
	font-family: 'Nothing You Could Do';
	font-size:36px;
}
p.downloadText{ /* super small text*/
	font-size: 70%;
}
.sliderImg{
	padding:0;!important
	margin:0;!important
	float:none;!important
}


/* gray boxees on the right side */
.boxGray{
	width: auto;
	min-width:300px;  
	color:#ffffff ;
	background-color: #474847;
	margin-bottom:  15px;
}

.boxGray .boxContent{
	padding: 10px 5px;
}

/* Flexboxen - kleine Boxen mit Rahmen */
.flexContainerVertical, .flexContainerHorizontal{
	display: flex;
	flex-wrap: wrap; /* in nächste Zeile wenn nicht in eine Zeile passt */
    text-align: left;
    position: relative;
    justify-content: center; 
	line-height: 150%;
    /*margin: 20px; */ /* would override centering via margin-left: auto; */
    /* margin-top: 20px;  now set in .content instead */
}
.flexContainerVertical{
	flex-direction: column;
}
.flexContainerHorizontal{
	flex-direction: row;
	border-bottom: 1px solid #eeeeee;
	padding-bottom: 25px; /* spacy */
	margin-bottom: 15px;
	align-items: center; /* so images are vertically centered */
}

footer {
	min-height: 150px;
	width: auto;
	background-color: #474847;
	clear: both;
	color: #FFFFFF;
	border-bottom: solid 10px #2fa72a;
	font-family: verdana, arial;
	line-height: 150%;

}
footer.flexContainerHorizontal{
	justify-content: space-between;
	border-bottom: 0px solid black;
}

.flexBox, .flexBoxMedium, .flexBoxCenter, .flexBoxImage, .flexBoxLarge{ /* box mit bild und text darunter */
	min-width: 200px;
	text-align: left;
	margin: 5px;
	padding: 5px;
	
}

 .flexBoxCenter{
	text-align: center;
 }
/* PC view only */
@media only screen and (min-width: 1200px) {
	.flexBox{
		max-width: 800px;  
		min-height: 200px;
	}
	.flexBoxMedium{
		max-width: 400px; /* 400px will lead to image + text in ueber uns to be displayed next to each other */
		min-height: 200px;
	}
	.flexBoxLarge{
		min-width: 380px;  
		min-height: 200px;
	}
	.flexBoxImage{
		min-width: 350px;  /* super important that this is relatively large, otherwise the right column will scale larger based on the text length and there wont be neat columns */
		min-height: 200px;
		margin-top: 30px;
	}
	.flexBoxImageSmall{
		min-width: 200px;   
		min-height: 180px;
		margin-top: 20px;
		margin-bottom: 40px;
	}
	.flexBoxImage img, .flexBoxImageSmall img{
		max-width: 300px;
		object-fit: contain; /* super important: default is 'cover' which stretches and upscales the image to the full width */
		margin: auto; /* horizontal center image. needs display: block; */
		display: block;
	}
	footer{
		font-size: 0.8em;
	}
}

img.terragaminglogo{
	margin-top:20px;
	margin-left:80px;
	max-width:250px;
}
img.terragpremiumpartnerlogo{
	margin:20px 50px;
}
/* MOBILE view +++++++++++++++++++++ */
@media only screen and (max-width: 1099px) {
	body, footer, #content, ul, li, #rightcolumn, p{
		font-size: 17px;
		line-height: 28px;
		max-height: 999999px; /* this because google on android resizes short texts to larger font-size no matter what you do... */
		
		
	}
	body{
		background-image: none;
		background-color: #ffffff;
	}
	#content h1.largeCaption{
		font-size: 32px; /* not larger than 32px because long headlines like Nachhaltigkeitsstrategie will be too large */
		line-height: 40px;
		min-width: 40%; /* without a min-width it uses the actual width, which is too large */
	}	
	#content h2.largeCaption{
		font-size: 30px;
		line-height: 38px;
	}

	.mobileHidden{
		visibility: collapse;
	}
	.nivo-caption{
		visibility: hidden;
	}
	.flexBox{
		width: 100%;
		flex-wrap: wrap;
		/* max-width: 1000px; */
	}
	.flexContainerHorizontal{
		flex-direction: column; /* all is column now, no weird boxes next to each other? */
		flex-wrap:wrap; /* to unset no-wraps from pc setting */
	}
	#wrapper {
		width: auto;
	}
	img {
		width: auto; /* 100% scales, auto does NOT downscale but also scales larger */
		max-width: 100%;  /* 100% prevents larger than original size but only if width: auto is set */
		object-fit: contain;
	}
	.slider-wrapper, .slider-wrapper-large, .slider-wrapper-medium, .slider-wrapper-small{
		height: auto;
	}
	
	#rightcolumn{
		clear: both;
		float: none;
		width: auto; 	/*	width: 100%; */ /* to un-setting fixed width */
		margin-left: 10px;
	}
	#content{ /* has on pc version 830 px because of the two columns */
		max-width: 1000px;
		float: none;
	}
	
	a.greyBtn{
		width: 100%;
	}
	img.terragaminglogo, img.terragpremiumpartnerlogo{
		margin-top: 0px;
		margin-left: 0px;
		margin-right: 0px;
		object-fit: contain;
}