@charset "utf-8";

@font-face {font-family: "DINRoundWeb-Light";src: url("../Fonts/DINRoundWeb-Light.woff")}
@font-face {font-family: "DINRoundWeb-Bold";src: url("../Fonts/DINRoundWeb-Bold.woff")}
* {font-family: "DINRoundWeb-Light";margin: 0;line-height: 115%} 

details > summary {
  list-style: none;
  display: inline;
}

details summary::-webkit-details-marker {
  display:none;
}


html{height:100%;margin:0;padding:0}
section, footer{margin-top:1em;margin-left: 15em;margin-right:15em;min-width: 25em}	
nav{position:fixed;top:0;left:0;background:#F39900;z-index: 1} 
aside{position:fixed;top:0;right:0;background:#FFE948}
article{display:inline-block;vertical-align:middle;width:24em;padding-left:1em;padding-right:1em;padding-bottom:0;margin-left:1em;margin-right:1em;}
footer{padding:1em;width:35em}
address{font-style:normal}
a{color:black;text-decoration:none}
h1{font-family: 'DINRoundWeb-Bold'}
h2{color: #FFC000;font-family: 'DINRoundWeb-Bold'}
nav, aside{width: 14em;height: 100%}
li:first-child {margin-top:0.5em}
span.spamschutz {display:none;}

.shake {animation: shake 4000ms ease-in-out both; transition: background 5s ease-in-out; animation-iteration-count: infinite;}
.homeButton {margin-top:2em}
.navigationIcon:hover, .ReferenceLinkIcon:hover{transform: scale(1.25, 1.25)}
.ReferenceDocumentIcon:hover, .ReferenceLinkIcon:hover{transform: scale(1.25, 1.25)}
.navigationIcon {width:2em;height:2em;margin-top:0.5em;margin-right:0.5em;margin-left:0.5em;transition: all .3s ease-in-out}
.navigationTextSummary {font-family: 'DINRoundWeb-Bold';font-size:1.1em;color: #FFFFFF;display:none}
.navigationText {position:relative;font-family: 'DINRoundWeb-Bold';top:-0.5em;font-size:1.1em;color: #FFFFFF}
.navigationContact {position:relative;margin-left:0.2cm;text-decoration:none;font-size:1.1em;color: #FFFFFF}
.SMSIcon {margin-top:-1em;margin-left:-0.2em;margin-bottom:1em;width:100%;max-width:310px;height:100%;max-height:69px;transition: all .3s ease-in-out}
.SMSIcon:hover{transform: scale(1.1, 1.1)}
.twitter-follow-button{margin-top:-4em;transition: all .3s ease-in-out}
.twitter-follow-button:hover{transform: scale(1.1, 1.1)}

.pageTitle {display:table-cell;vertical-align: middle;text-align: center;font-size:2em;color:#666;height:6em;z-index:20}
.productNumber{font-size:11em;font-weight: bold;color:#FFC000;position:relative;max-height:0;max-width:0}

div.referenceItem{margin-bottom:0;}
img.ReferenceLogo {height:2em;margin-top: 0.7em;margin-bottom: 0.7em;margin-left:1em;}
img.ReferenceLogoHigh {height:4em;margin-top: 0.5em;margin-bottom: 0.0em;margin-left:1em;}
img.ReferenceLinkIcon {width:2em;margin-top: 0.7em;margin-bottom: 0.7em; transition: all .3s ease-in-out}
div.ReferenceDocument {margin-left:3em;margin-top:-1.7em}
img.ReferenceDocumentIcon {width:2em;transition: all .3s ease-in-out}
div.ReferenceEmployee {margin-left:3em;margin-top:-1.7em}
div.ReferenceEmployeeTitle {margin-left:3em;margin-top:0em}
div.ReferenceEmployeeRole {margin-left:3em;margin-top:0.5em}
div.ReferenceEmployeeEmail {margin-left:3em;margin-top:0em}
img.ReferenceEmployeeIcon {width:2em;transition: all .3s ease-in-out}

.boldFont {font-weight: 900}
.orangeAndBold {color: #FFC000;font-family: 'DINRoundWeb-Bold';}
.indexImage{position:relative}
.productImage{position:relative; animation: showFAQAnswer 1500ms ease-in-out both}
.productDetailIcon{width:2em;height:2em;position:relative;transition: all .3s ease-in-out;}
.productDetailIcon:hover{transform: scale(1.25, 1.25);}
.productDetailIconERP {left:-6em; top:0.7em}
.productDetailIconCRM {left:2em; top:5.4em}

.detailArticle{padding-left:0;margin-left:0;margin-top:2em;}
.prevPageButton{top:1.5em;left:15.5em}
.homePageButton{top:1.5em;left:16em}
.nextPageButton{top:1.5em; left:16.5em}
.productNumber4number {left: 1.5em; top: 0.45em}
.productNumber4digit{left: 1.9em; top: 0.47em}
.productNumber5number {left: 1.5em; top: 0.25em}
.productNumber5digit{left: 1.9em; top: 0.25em}

.questionlist{margin-left:1em}
.questionlistheader{background: #EEE;font-size:1em;margin-top:3em;padding-top:0.5em;padding-bottom:0.15em;transition: background 0.4s ease-in-out}
.questionlistheader:hover{background: #F39900}
.question{cursor: pointer; display: block;padding-top:0.2em;padding-bottom:0.1em;transition: background 0.3s ease-in-out;background: #DDD}
.question:hover{background: #FFE948}
.question + input{display: none;}

.question + input + div > div{display:none}
.question + input:checked + div > div{display:block}

.question + input + div{max-height:0px; transition: max-height 0ms} 
.question + input:checked + div{max-height:750px; transition: max-height 500ms}

.questionImage {width:1em;height:1em;position:relative;top:0.12em}
.answer{margin-top:0.5em;margin-bottom:0.5em;max-width:40em; animation: showFAQAnswer 700ms ease-in-out both}
.answerpoint{margin-top:0.25em}

.showLemon{animation: showLemon 1000ms ease-in-out both; transition: background 5s ease-in-out}
.subPageLink {text-decoration-line: underline;white-space: nowrap;z-index:200}
.subPageLink:hover {color: #FFC000;font-weight: bold;text-decoration-line: none;}
.showOrange{animation: showOrange 1650ms ease-in-out both; transition: background 5s ease-in-out}
.showJuice{animation: showJuice 1800ms ease-in-out both; transition: background 5s ease-in-out}
.showCake{animation: showCake 1950ms ease-in-out both; transition: background 5s ease-in-out}
.showPress{animation: showPress 2100ms ease-in-out both; transition: background 5s ease-in-out}
.showLogo{animation: showLogo 2250ms ease-in-out both; transition: background 5s ease-in-out}
.showSMS{animation: showSMS 5000ms ease-in-out both}
.showNews{animation: showNews 2000ms ease-in-out both}
.showDocuments{animation: showNews 1000ms ease-in-out both}
.showProducts{animation: showProducts 750ms ease-in-out both}
.ordinalReferences {margin-left:16em;margin-bottom:3em;margin-top:0}



@keyframes showFAQAnswer {from {opacity:0.01;transform:scale(0.8)} to {opacity:1;transform:scale(1.0)}}
@keyframes showLemon {0% {opacity:0.01;transform:scale(0.8)} 100% {opacity:1;transform:scale(1.0)}}
@keyframes showOrange {0% {opacity:0.01} 9% {opacity:0.01;transform:scale(0.8)} 100% {opacity:1;transform:scale(1.0)}}
@keyframes showJuice {0% {opacity:0.01} 17% {opacity:0.01;transform:scale(0.8)} 100% {opacity:1;transform:scale(1.0)}}
@keyframes showCake {0% {opacity:0.01} 23% {opacity:0.01;transform:scale(0.8)} 100% {opacity:1;transform:scale(1.0)}}
@keyframes showPress {0% {opacity:0.01} 29% {opacity:0.01;transform:scale(0.8)} 100% {opacity:1;transform:scale(1.0)}}
@keyframes showLogo {0% {opacity:0.01} 33% {opacity:0.01;transform:scale(0.8)} 100% {opacity:1;transform:scale(1.0)}}
@keyframes showSMS {0% {opacity:0.01} 30% {opacity:0.01} 100% {opacity:1}}
@keyframes showNews {0% {opacity:0.01} 30% {opacity:0.01} 100% {opacity:1}}
@keyframes showProducts {0% {opacity:0.01} 100% {opacity:1}}
@keyframes shake {0% {transform:rotate(-10deg)} 92% {transform:rotate(-10deg)} 94% {transform:rotate(-8deg)} 96% {transform:rotate(-12deg)} 98% {transform:rotate(-8deg)} 100% {transform:rotate(-10deg)}}

@media print {
	nav, aside{display: none;}
	section {margin:0}
	.productDetailIcon {display:none}
	.ignorePrinting {display:none}
}

@media only screen and (max-width: 87em) {
	h1{margin-top:0.25em;margin-bottom:0.25em}
	article{margin-top:0;margin-bottom:0}
	article:nth-child(2n+3) {margin-left: 15em; margin-top:-3em}
}

@media only screen and (max-width: 82em) {
	.questionlist{margin-left:0}
}
	
@media only screen and (max-width: 75em) {
	footer{width:30em}
	article{margin-top:0;margin-bottom:0}
	article:nth-child(2n+3) {margin-left: 7em; margin-top:-1em}
}

@media only screen and (max-width: 65em) {
	footer{width:10em}
	article{margin-top:0;margin-bottom:0}
	article:nth-child(2n+3) {margin-left: 1em; margin-top:0}
/*	.AnlassDiv{width:100%}
	.Anlassh2{width:95%}} */
	
@media only screen and (max-width: 57em) {
	article{margin:0}
	article:nth-child(2n+3) {margin-left: auto; margin-top:auto}	
	aside {left:42em}
	.referenzen{max-width:20em}
}

@media only screen and (max-width: 43em) {
	nav {width:43em;height:3em;max-height:3em;overflow:hidden;z-index:3}
	section {margin-left:0; margin-top:3.5em}
	aside {left:27em; width:24em}
	footer {margin-left:0}
	.navigationText{display:none}
	.navigationPosition{display:inline}
	.detailArticle{padding-left:1em}
	.prevPageButton{left:0;padding-bottom:1em}
	.homePageButton{left:0.5em;padding-bottom:1em}
	.nextPageButton{left:1em;padding-bottom:1em}
	.questionlist{margin-left:1em}
	.ordinalReferences {margin-left:2em;margin-bottom:3em}
	.navigationTextSummary {display:inline}

}

@media only screen and (max-width: 26em) {
	section {margin-left:0; margin-top:3.5em; min-width: 0; margin-right: 1em}
	article {width:100%; padding-right:1em}	
	footer {min-width: 0; width:100%; padding:0}
	.productNumber4number {left: 0.4em; z-index:2}
	.productNumber4digit{left: 0.8em; top: 0.47em; z-index:2}
	.productNumber5number {left: 0.7em; top: 0.25em; z-index:2}
	.productNumber5digit{left: 1.1em; top: 0.25em; z-index:2}
	.navigationIcon {width:2.8em; height:2.8em;	margin-top:0.1em; margin-right:0.1em; margin-left:0.5em}
	.productDetailIcon{width:2.8em;height:2.8em}
	.productDetailIconCloudApps {margin-right: 5em}
	.productDetailIconERP {margin-left: -0.5em; margin-right:-10em; top:1em}
	.productDetailIconNew {margin-right:8em; margin-bottom:1em;}
	.productDetailIconCRM {left: -9.5em;top:7em}
}