/*
	TO CHECK?
		-webkit-font-smoothing: antialiased;

	bigger centered content...
	
	doppelclick?
	
	(check if overlay comes up to hold the new image...)

	http://angrytools.com/gradient/
		ff3.6+
		safari4+,chrome
		safari5.1+,chrome10+
		opera 11.10+
		ie10+
		ie6-9
		background: -moz-radial-gradient(center, ellipse cover, rgba(242,255,242,0.85) 0%, rgba(121,191,185,0) 50%, rgba(0,128,128,0) 100%); 
		background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(242,255,242,0.85)), color-stop(50%, rgba(121,191,185,0)), color-stop(100%, rgba(0,128,128,0))); 
		background:-webkit-radial-gradient(center, ellipse cover, rgba(242,255,242,0.85) 0%, rgba(121,191,185,0) 50%, rgba(0,128,128,0) 100%); 
		background: -o-radial-gradient(center, ellipse cover, rgba(242,255,242,0.85) 0%, rgba(121,191,185,0) 50%, rgba(0,128,128,0) 100%); 		
		background: -ms-radial-gradient(center, ellipse cover, rgba(242,255,242,0.85) 0%, rgba(121,191,185,0) 50%, rgba(0,128,128,0) 100%); 	
		background:radial-gradient(ellipse at center, rgba(242,255,242,0.85) 0%, rgba(121,191,185,0) 50%, rgba(0,128,128,0) 100%); 				
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F2FFF2', endColorstr='#008080',GradientType=1 ); 					
	
	SAMPLE ANIMATIONS
		https://www.creativebloq.com/inspiration/css-animation-examples/2
		
	SPINNER
!		http://tobiasahlin.com/spinkit/

		// Animation durations
		$anim-very-fast: .15s !default;
		$anim-fast: .3s !default;
		$anim-medium: .5s !default;
		$anim-slow: .8s !default;
		$anim-very-slow: 1.2s !default;
		$anim-header-custom: $anim-fast !default;

		https://animejs.com/documentation/#staggeringStartValue
*/
html,body {
	margin: 0px;
	padding: 0px;
	font-family: Kaufland, Helvetica, Arial, Sans-Serif;	
	font-size:10px;
	color:#424242;
	height: 100%;
}

body { 
	margin: 0px;
	padding: 0px;
	overflow: hidden;

}
#preload {
	display: none;
}
#overlay {
	background: rgba(0,0,0,0.74);
	height:100%;
	width:100%;
	overflow:auto;
	display:none;
	z-index:10;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	
	/*
	transition:all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
	-webkit-transition:all 300ms cubic-bezier(0.645, 0.045, 0.355, 1); 
	*/
}
#overlay1,
#overlay2,
#overlay3,
#overlay4,
#overlay5,
#overlay6,
#overlay7,
#overlay8,
#overlay9 {
	max-width: 750px;
	display: inline-block;
	background: rgba(255,255,255,1.0);
	z-index:11;
	text-align: left;
/* center *
		position: relative;
		top: 50%;
		transform: translateY(-50%);
/* center */

	margin-top:22px;
	cursor: default;
	
	/*
	transition:all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
	-webkit-transition:all 300ms cubic-bezier(0.645, 0.045, 0.355, 1); 
	*/	
}
#overlaytitle1,
#overlaytitle2,
#overlaytitle3,
#overlaytitle4,
#overlaytitle5,
#overlaytitle6,
#overlaytitle7,
#overlaytitle8,
#overlaytitle9 {
	display:block;
	font-weight:bold;
	margin:0rem 0 1.1rem;
	width: calc(100% - 4.4rem);
}
#overlaytext1,
#overlaytext2,
#overlaytext3,
#overlaytext4,
#overlaytext5,
#overlaytext6,
#overlaytext7,
#overlaytext8,
#overlaytext9 {
	display:block;
	font-weight:normal;
	margin: 1.1rem 0 0 0;
}
/*
#overlayimage1,
#overlayimage2,
#overlayimage3,
#overlayimage4,
#overlayimage5,
#overlayimage6,
#overlayimage7,
#overlayimage8,
#overlayimage9 {
	float: left;
}
*/
#close {
	position: absolute;
    top: 2.2rem;
    right: 2.2rem;
    cursor: pointer;
	background-color:red;
	-webkit-transition:all 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition:all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
	color:white;
}
#closeInner {
	float: right;
	position: relative;
	left: 1.1rem; 
	cursor: pointer;
	-webkit-transition:all 300ms cubic-bezier(0.645, 0.045, 0.355, 1); transition:all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
	/*background-color:red;
	color:white;
	*/
	color:#424242;
	text-align:right;
	height:4.4rem;
	width:4.4rem;
	text-align:center;
	margin-top: -1.3rem;
}

#closeInnerX {
	display: inline;
}
#closeInnerX:before {
    content: "\EA37";
	font-family: Icons,Arial,sans-serif;
    font-size: 2.2rem;
    line-height: 2.2rem;
    display: inline-block;
    text-indent: 0;
	margin-top: 1.1rem;
}
#closeX {
	display: inline;
}
#closeX:before {
    content: "\EA37";
	font-family: Icons,Arial,sans-serif;
    font-size: 2.2rem;
    line-height: 2.2rem;
    display: inline-block;
    text-indent: 0;
	margin-top: 1.1rem;
}
#panel {
	/* see script.js, javascript is used, because of dynamic sizes and internet explorer can't handle css variables...  */
}
#text {
	display: flex;
}
#img1text,
#img2text,
#img3text,
#img4text,
#img5text,
#img6text,
#img7text,
#img8text,
#img9text {
	height:100%;
	width:100%;
}
#clickarea1,
#clickarea2,
#clickarea3,
#clickarea4,
#clickarea5,
#clickarea6,
#clickarea7,
#clickarea8,
#clickarea9 {
	/* see script.js, javascript is used, because of dynamic sizes and internet explorer can't handle css variables...  */
	
	opacity:0.0;
	background-size: 100% 100%;

	transition:all 150ms cubic-bezier(0.645, 0.045, 0.355, 1);
	-webkit-transition:all 150ms cubic-bezier(0.645, 0.045, 0.355, 1); 
}
/* div#preload { display: none; } */

/* bouncing *
@keyframes bouncing_indicator {
	0%   { margin-left:0px; }
	100% { margin-left:10px;}
}
@-webkit-keyframes bouncing_indicator {
	0%   { margin-left:0px;}
	100% { margin-left:10px;}
}
@-moz-keyframes bouncing_indicator {
	0%   { margin-left:0px;}
	100% { margin-left:10px;}
}
@-o-keyframes bouncing_indicator {
	0%   { margin-left:0px;}
	100% { margin-left:10px;}
}
/* bouncing */
/* CIRCLE *
@-webkit-keyframes bouncing_indicator {
    from { -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg); }
    to   { -webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}

@-moz-keyframes bouncing_indicator {
    from { -moz-transform: rotate(0deg) translateX(150px) rotate(0deg); }
    to   { -moz-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}

@-o-keyframes bouncing_indicator {
    from { -o-transform: rotate(0deg) translateX(150px) rotate(0deg); }
    to   { -o-transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}

@keyframes bouncing_indicator {
    from { transform: rotate(0deg) translateX(150px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
/* CIRCLE */
#indicator1,
#indicator2,
#indicator3,
#indicator4,
#indicator5,
#indicator6,
#indicator7,
#indicator8,
#indicator9 {
/* see script.js, javascript is used, because of dynamic sizes and internet explorer can't handle css variables...  */
	/*display:none;*/
	pointer-events:none;
}
#spinner1,
#spinner2,
#spinner3,
#spinner4,
#spinner5,
#spinner6,
#spinner7,
#spinner8,
#spinner9
 {
  width: 200px;
  height: 200px;
  position: relative;
  margin: auto;
  pointer-events: none;
  border-radius: 50%;
  background-color: white;
  opacity: 0.18;
   animation: bounce 2.0s 1 cubic-bezier(0.645, 0.045, 0.355, 1); /* POWER FOCUS */
  -webkit-animation: bounce 2.0s 1 cubic-bezier(0.645, 0.045, 0.355, 1); /* POWER FOCUS */
  animation-fill-mode: forwards;
  animation-delay: 2s;
  transform: scale(0.0);
}
@-webkit-keyframes bounce {
	0% { 
		transform: scale(0.0);
		-webkit-transform: scale(0.0);
		-ms-transform: scale(0.0);
	}
	71% { 
		-webkit-transform: scale(1.0)
	}
	100% { 
		transform: scale(0.0);
		-webkit-transform: scale(0.0);
		-ms-transform: scale(0.0);
	}
}
@keyframes bounce {
	0% { 
		transform: scale(0.0);
		-webkit-transform: scale(0.0);
	} 
	29% { 
		transform: scale(1.0);
		-webkit-transform: scale(1.0);
	}
	100% { 
		transform: scale(0.0);
		-webkit-transform: scale(0.0);
	}
}
.siegel-panel {
	float: right;
	padding-top:11px;
	margin-right: -22px;
}
@media(max-width: 768px) {
	.siegel-panel {
		margin-right: -11px;
	}
}
img {
	height: 101px;
	padding-right: 22px;
}
@media(max-width: 768px) {
	img {
		height: 75px;
		padding-right: 11px;
	}
}
@media(max-width: 480px) {
	img {
		height: 50px;
		padding-right: 11px;
	}
}

.noSelect {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.noSelect:focus {
    outline: none !important;
}