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

/* 
##############################################################################
Programming // Der Hersteller // www.der-hersteller.de
##############################################################################
*/



/*body
############################################################################*/
body {
	font: 62.5%/1.5em 'open_sanslight', Helvetica, Arial, sans-serif;
	color: rgb(51,51,51);
}




/*typosatz
############################################################################*/
h1, h2, h3, h4, h5, h6 {
}

h1 {
	font-family: 'misobold';
	text-transform: uppercase;
	font-size: 2em;
	line-height: 2em;
	letter-spacing: 0.3em;
	padding: 0 0 0 11.4em;
}
h2 {
	font-family: 'open_sansitalic';
	font-size: 5.5em;
	line-height: 1.3em;
	margin: 0 0 0.1em 0;
}
h3 {
	font-family: 'misobold';
	text-transform: uppercase;
	font-size: 2.5em;
	line-height: 2em;
	letter-spacing: 0.1em;
	margin: 0 0 0.5em 0;
}
h4 {	
	font-family: 'misobold';
	text-transform: uppercase;
	font-size: 1.7em;
	line-height: 1.7em;
	letter-spacing: 0.1em;
	margin: 0 0 0 0;
}
h5 {	
}
p {
	font-size: 1.7em;
	line-height: 1.7em;
	margin: 0 0 1.5em 0;
}
#main ul.list {
	font-size: 1.7em;
	line-height: 1.7em;
	padding: 0;
	margin: 0 0 1.5em 0;
}
#main ul.list li {
	padding-left: 1em;
    position: relative;
}
#main ul.list li:before {
	content: "·";
	position: absolute;
	left: 0;
	font-size: 1.7em;
}
#main a {
	color: rgb(51,51,51);
	text-decoration: underline;
}
#main a:hover,
#main a:active {
	text-decoration: none;
}
b, strong {
	font-family: 'open_sansregular';
}
i, em {
	font-family: 'open_sanslight_italic';
}



/*class
############################################################################*/
.left {
	float:left;
	display:block;
}
.right {
	float:right;
	display:block;
}
.clear {
	clear:both;
}
.column-2 {
	-webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
	-webkit-column-gap: 6em;
    -moz-column-gap: 6em;
    column-gap: 6em;
}


/*layout
############################################################################*/
#wrapper {
}
.section {
	/*margin: 0 auto;
	width: 120em;*/
	padding: 0 4em;
}



/*main
############################################################################*/
#main {
	padding: 6em 0;
}
#main p {
	/*text-align: center;
	padding: 0 12%;*/
}

#intro {
	padding-top: 4em;
	padding-bottom: 4em;
}

#referenzen {
	text-align: center;
	vertical-align: top;
	padding: 4em 2em 2em 2em;
}
#referenzen img.screenshot {
	max-width: 100%;
	height: auto;
	-moz-box-shadow:0 1px 5px 0 rgba(74,70,60,0.4);
	-webkit-box-shadow:0 1px 5px 0 rgba(74,70,60,0.4);
	box-shadow:0 1px 5px 0 rgba(74,70,60,0.4);
}
#referenzen h3 {
	font-size: 2em;
	line-height: 1em;
	margin: 0.5em 0 0 0;
}
#referenzen h4 {
	font-size: 1.7em;
	line-height: 1em;
	margin: 0 0 0.5em 0;
}
#referenzen p {
	font-family: 'open_sansregular';
	font-size: 1.3em;
	line-height: 1.3em;
	margin: 0 0 0 0;
	padding: 0;
}
#referenzen p:last-child {
	margin-top: 0.7em;
}
#referenzen p:last-child img {
	margin: 0 0.3em;
}
#referenzen p a {
	color: rgb(51,51,51);
	text-decoration: none;
}
#referenzen p a:hover {
	text-decoration: underline;
}
#referenzen .article {
	display: inline-block;
	width: 32%;
	height: auto;
	margin: 0 1% 3em 0;
}
#referenzen .article:nth-child(3n) {
	margin-right: 0;
}


/*header
############################################################################*/
#header {
	width: 100%;
}
#header .logo {
	background: rgb(22,94,107);
	color: rgb(255,255,255);
	padding: 2em 0;
}


/*navigation
############################################################################*/
#nav {
	margin: 3em 0 0.5em 0;
}
#nav ul {
	text-align: right;
}
#nav ul li {
	display: inline-block;
	margin: 0 0 0 2em;
}
#nav ul li:first-child {
	margin-left: 0;
}
#nav ul li a {
	font-family: 'misobold';
	text-transform: uppercase;
	font-size: 2em;
	line-height: 2em;
	letter-spacing: 0.2em;
	color: rgb(70,73,77);
	text-decoration: none;
}
#nav ul li a:hover,
#nav ul li a:active {
	opacity: 0.7;
	-webkit-transition: opacity 0.4s ease-in-out;
  	-moz-transition: opacity 0.4s ease-in-out;
  	-o-transition: opacity 0.4s ease-in-out;
  	transition: opacity 0.4s ease-in-out;
}

#media {
	margin: 0 0 4em 0;
}
#media ul {
	text-align: center;
}
#media ul li {
	display: inline-block;
	margin-right: 2em;
	margin-bottom: 1em;
}
#media ul li:nth-child(1),
#media ul li:nth-child(5) {
	margin-right: 4em;
}
#media ul li:nth-child(2),
#media ul li:nth-child(3),
#media ul li:nth-child(4) {
	margin-right: 0.3em;
}
#media ul li:last-child {
	margin-right: 0;
}
#media img {
}
#media ul li a img:hover {
	opacity: 0.7;
	-webkit-transition: opacity 0.4s ease-in-out;
  	-moz-transition: opacity 0.4s ease-in-out;
  	-o-transition: opacity 0.4s ease-in-out;
  	transition: opacity 0.4s ease-in-out;
}

/*footer
############################################################################*/
#footer {
	width: 100%;
	background: rgb(70,73,77);
	font-family: 'open_sansregular';
	color: rgb(255,255,255);
	padding: 4em 0 6em 0;
}
#footer .left a,
#footer .right a {
	color: rgb(255,255,255);
	text-decoration: none;
}
#footer .right {
	width: 50%;
}
#footer .right h3 {
	text-align: right;
	cursor: pointer;
}
#footer .right a:hover,
#footer .left a:hover,
#footer .right a:hover {
	opacity: 0.7;
	-webkit-transition: opacity 0.4s ease-in-out;
  	-moz-transition: opacity 0.4s ease-in-out;
  	-o-transition: opacity 0.4s ease-in-out;
  	transition: opacity 0.4s ease-in-out;
}
#footer p {
	font-size: 1.5em;
	line-height: 1.5em;
}
.toggle-container {
	display: none;
}