body{
  font-family: "Roboto",sans-serif;
	margin: 10px auto;
/*background: #6441A5;  /* fallback for old browsers */
/*background: -webkit-linear-gradient(to right, #2a0845, #6441A5);  /* Chrome 10-25, Safari 5.1-6 */
/*background: linear-gradient(to right, #2a0845, #6441A5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#378943+0,6cc950+13,378943+48,378943+48 */
background: #378943; /* Old browsers */
background: -moz-linear-gradient(top, #378943 0%, #6cc950 13%, #378943 48%, #378943 48%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #378943 0%,#6cc950 13%,#378943 48%,#378943 48%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #378943 0%,#6cc950 13%,#378943 48%,#378943 48%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#378943', endColorstr='#378943',GradientType=0 ); /* IE6-9 */
	}


.img-referenzen {
	width: 30%;
	display: inline-block;
	margin-right: 10px;
	margin-bottom: 10px;
	border: 1px solid #ccc;
}

.img-referenzen a {
	background: white;
}

@media screen and (max-width: 601px) {
	.img-referenzen {
		width: 45%;
		}
		}
	
.button a {
	text-decoration: none;
	color: black;
	background-color: white;
	padding: 5px;
	display: inline-block;
	position: relative;
	top: -25px;
}

.button a:hover {
	color: white;
	background-color: #46b258;
}


* {
	text-align: center;
	}
	
header {
		background: white;
}		

.cleaner {
	clear: both;
}

.logo {
	margin: 0 auto;
	padding-top: 20px;
}

.logo img {
	width: 300px;
}


@media screen and (min-width: 601px) {
	.logo img {
		width: 400px;
	}
}

.float-right {
	float: right;
	width: 30%;
	margin-left: 40px;
}

.float-right img {
	width: 100%;
	height: auto;
}

.float-left {
	float: left;
	width: 30%;
	margin-right: 40px;
}

.float-left img {
	width: 100%;
	height: auto;
}

.wrapper {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 0;
}

footer {
	text-align: center;
	background: white;
}

article {
	padding: 40px;
	background: white;
}

article.green {
	background: #46b258;
}

article.blue {
	background: rgba(0,0,0,0.2);
}

article.gray {
	background: #d6e7d8;
}

.head-image {
	padding: 0;
	margin: 20px 0 0 0;
}

.head-image img {
	width: 100%;
	height: auto;
	padding: 0;
}

.image img {
	width: 100%;
	height: auto;
}

main {display: block;}


h1 {
	font-size: 32pt;
	font-weight: 900;
	color: #46b258;
	margin-top: 0;
}

@media screen and (max-width: 601px) {
	h1 {
		font-size: 22pt;
	}
}



h2, h3 {
	color: #46b258;
	font-size: 26pt;
}

@media screen and (max-width: 601px) {
	h2, h3 {
		font-size: 22pt;
	}
}


.green h1, .green h2, .green h3, .green p,
.blue p, .blue strong, b,
.blue h1, .blue h2, .blue h3 
 {
	color: white;
}

ul {
	list-style: none;
	padding-left: 0px;
}

li {
    margin: 0 0 0 20%;
    padding: 0 0 22px 40px;
    background-image: url("../images/list-style.png");
    background-repeat: no-repeat;
    background-position: 1px 2px;
    line-height: 1.4;
    font-size: 22px;
    text-align: left;
    }
    
@media screen and (max-width: 601px) {
	li {
		margin-left: 0px;
	}
}


.blue p {
	max-width: 500px;
	margin: 0 auto;
	margin-bottom: 30px;
	line-height: 1.8em;
}

.green p {
	max-width: 500px;
	margin: 15px auto;
}



.blockquote {
  font-family: "Roboto",sans-serif;
	margin: 0 auto;
    max-width: 500px;
    padding: 0.35em 40px;
    line-height: 1.45;
    position: relative;
    color: #383838;
}

.blockquote:before {
    display: block;
    padding-left: 10px;
    content: "\00AB";
    font-size: 80px;
    position: absolute;
    left: -20px;
    top: -40px;
    color: rgba(255, 255, 255, 0.3);
}

.blockquote:after {
    display: block;
    padding-left: 10px;
    content: "\00BB";
    font-size: 80px;
    position: absolute;
    right: -20px;
    bottom: 0px;
    color: rgba(255, 255, 255, 0.3);
}



footer {
	padding: 20px;
}

.social {
	margin: 10px;
}