@charset "UTF-8";
/* CSS Document */
html {
	/*text-size-adjust:none;*/
	overflow-y: scroll;
	width: 100%;
	height: 100%;
	/*
	-webkit-hyphens: auto;
hyphens: auto;
	*/
	}
	
* {
	box-sizing: border-box;
	}
body {
	font-family:Helvetica, Arial, sans-serif;
	font-size:16px;
	line-height:22px;
	letter-spacing:0.5px;
	font-weight:400;
	margin:0;
	padding:0;
	}
#inhalt p.grosse-type, #knoepfeUndstoffe p.grosse-type {
	font-size:21px;
	line-height:30px;
	/*
	font-size:64px;
	line-height:68px;
	*/
	letter-spacing:.5px;
	font-weight:800;
 }
#knoepfeUndstoffe p.grosse-type {
	color:white;
	text-shadow: 6px 6px 6px grey;
}

#wrapper {
	position:relative;
	top:0;
	z-index:10;
	background-image: url("img/540x2000-75prozent.png");
    margin:0 auto;
	padding:0;
	padding-top:42px;
	width:540px;
	}
#totalausverkauf, #knoepfeUndstoffe {
	position:relative;
	top:0;
	z-index:10;
	/*background-image: url("img/540x2000-75prozent.png");*/
    margin:0 auto;
	padding:0;
	padding-top:42px;
	width:540px;
}
#inhalt a:link { text-decoration: none; color:#000; border-bottom: solid 1px #000; }
#inhalt a:visited { color: #000 }  
#inhalt a:hover { color: #000; border-bottom: solid 1px #C00; }
#inhalt a:focus {  color: #000; border-bottom: solid 1px #C00; } 
#inhalt a:active {  color: #000; border-bottom: solid 1px #C00; } 

.menu {
	letter-spacing:1px;
	}
.menu ul {	
	list-style-type: none;
	margin:0;
	padding:0;
	}
.menu li  {
	display:inline-block;
	/*
	*display: inline;
	*/
	/*zoom: 1;/*http://stackoverflow.com/questions/14898928/ie8-and-below-inline-block-css*/
	margin-right:4px;
	margin-bottom:4px;
	padding:0;
	}
.menu a:link, 
.menu a:visited { 
	text-decoration: none;
	display:block;
	padding: 10px 25px;
	color: #000;
	background-color:#fff;
	}
.menu a:hover, 
.menu a:focus, 
.menu a:active,
.menu a:visited:hover {
	text-decoration: none;
	display:block;
	padding: 10px 25px;
	background-color: #000;
	color: #fff;
   	-webkit-tap-highlight-color: rgba(0,0,0,0);
	}
.menu li.menu-current a {
	background-color: #000;
	color:#fff;
	}
/*
menu-link weiterleitung auf aktuelle saison wenn sie karten verschickt
*/	
/*
.menu li.menu-first a {
	display:none;
	overflow:hidden;/*ie 7 */

/*
menu-link weiterleitung fertig
*/	
#inhalt {
	margin:40px 0 0 0;
	padding:0;
	line-height:0;
	}
#inhalt p, #knoepfeUndstoffe p {
	padding:0 25px;
	line-height:22px;
	}	
#inhalt img, #knoepfeUndstoffe img {
	padding:0;
	margin:0;
	}
#inhalt div.facebook, #wrapper div.facebook { 
	
	text-align:right;
	}
#inhalt div.facebook a, #wrapper div.facebook a {
	text-decoration: none;
	border-bottom: none;
	/*display:block;*/
	}
#inhalt div.facebook img, #wrapper div.facebook img { 
	max-width:35px;
	margin:25px;
	/*margin-top:0;*/
	margin-left:0;
}
#inhalt div.facebook a:hover img, #wrapper div.facebook a:hover img,
#inhalt div.facebook a:active img, #wrapper div.facebook a:active img, 
#inhalt div.facebook a:focus img, #wrapper div.facebook a:focus img {
	max-width:41px;
	margin-bottom:19px;
	}	

/*	
#galleria img {	
	margin:0;
}	
*/
#logo {
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	z-index:-1;
	}
#logo.alleAusserIE {
	background:url("img/logo-2.png") no-repeat left;
	background-size: contain;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	-ms-background-size: contain;
	position:fixed;
	}
#logo.ieachtoderkleiner {
	background:url("img/logo-weiss-400px.png") no-repeat left top;
	}
/*
allesbloomer---------slideshow navi und seite
*/

.ansichten-navi {
	position:relative;
	top:0;
	z-index:10;
	background-image: url("img/540x2000-65prozent.png");
    margin:0 auto;
	padding:0;
	padding-top:42px;
	width:540px;
	line-height:0;
	}
.ansichten-navi ul {	
	list-style-type: none;
	margin:0;
	padding:0;
	} 
.ansichten-navi li {
	display:inline-block;
	background-color:#FFF;
	width:60px;
	height:42px;
	overflow:hidden;
	}
.ansichten-navi li:nth-child(2) {
	margin-left:calc(50% - 90px); /*60px erste li  +30px hälfte von sich selberl*/
	}
.ansichten-navi li a {
	display:block;
	width:60px;
	height:42px;
	}
.ansichten-navi li a:active, .ansichten-navi li a:hover, .ansichten-navi li a:focus {
	outline:none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

#schliessen  {
	position:absolute;
	right:0;
	width:42px;
	height:42px;
	
}
#schliessen a {
	display:block;
	width:42px;
	height:42px;
	margin:0;
	background:url("img/nadeln-dicker.svg") no-repeat 0px 0px;
	}
#schliessen a:active, #schliessen a:hover, #schliessen a:focus {
	background-position:0px -42px; 
	}


/*
portrait and landscape iPhone4 = 480px  x 320px / iPhone5 = 320 x 568 / iphone 6 = 375px  667px / ipad = 768 1024
*/
@media only screen 
and (min-width : 668px) 
and (max-width : 1024px) { /* 768 neu 16.3.26. */
#logo.alleAusserIE {
	background:url("img/logo-2.png") no-repeat left top;
	background-size: 58px 350px ;
	}

#inhalt div.facebook a:hover img, #wrapper div.facebook a:hover img,
#inhalt div.facebook a:active img, #wrapper div.facebook a:active img,
#inhalt div.facebook a:focus img, #wrapper div.facebook a:focus img {
	max-width:35px;
	margin-bottom:25px;
	}	
}

@media only screen 
and (min-width : 320px) 
and (max-width : 667px) {
body {
	font-size:14px;
	}
#inhalt p.grosse-type, #knoepfeUndstoffe p.grosse-type {
	font-size:18px;
	line-height:24px;
	letter-spacing:.5px;
	font-weight:800;
 }
#wrapper {
	background-image: url("img/5bg-weiss-1px-65-prozent.png")repeat;
	
	width:60%;
	padding-top:16px;
	}
#totalausverkauf	{
	/*background-image: url("img/totalausverkauf.png")repeat;*/
	width:60%;
	}
#inhalt img, #totalausverkauf img, #knoepfeUndstoffe img {
	width:100%;
	height:auto;
	}
		
#inhalt, #knoepfeUndstoffe {
	margin:20px 0 0 0;
	}
#inhalt p, #knoepfeUndstoffe p {
	padding:0 7px;
	line-height:20px;
	}
.menu a:link, .menu a:visited, .menu a:active, .menu a:hover,.menu a:focus { 
	padding: 8px 16px;
	}	

#logo.alleAusserIE {
	background:url("img/logo-2.png") no-repeat left top;
	background-size: 37px 220px ;	
	}
#logo.alles-bloomer {
	background:url("img/logo-2.png") no-repeat left top;
	background-size: contain ;	
	}

.ansichten-navi {
	background-image:none;
	width:158px;
	width:100%;
	padding-top:8px;
	}
	
.ansichten-navi ul {
	/*float:right;	*/
	list-style-type: none;
	margin:0;
	padding:0;
	margin-right:8px;
	} 
	
.ansichten-navi li:first-child {
	/*display:inline-block;*/
	position:absolute;
	right:126px;
	background-color:#FFF;
	width:60px;
	height:42px;
	overflow:hidden;
	}
.ansichten-navi li:nth-child(2) {
	position:absolute;
	right:58px;		
	}
.ansichten-navi li:nth-child(3) {
	position:absolute;
	margin-right:8px;		
	}
	/*
.ansichten-navi li:first-child {margin-left:50%;}
.ansichten-navi li:first-child {margin-left:0;}	
.ansichten-navi li:nth-child(2) {
	margin-left:calc(50% - 90px); /*60px erste li  +30px hälfte von sich selberl*/
	/*margin-left:0;*/
	/*margin-right:25%;*/
	
/*
#prevslide:active, #prevslide:hover, #prevslide:focus { background-position:0px -38px;}
#nextslide:active, #nextslide:hover, #nextslide:focus { background-position:0px -38px;}
*/
.ansichten-navi li a {
	display:block;
	width:60px;
	height:84px;
	background-color:rgba(255, 255, 255, 0.7);
	background-color:#fff;
	}
/*	
#schliessen  {
	position:relative;
	width:38px;
	height:38px;
	overflow:hidden;
	}
#schliessen a {
	background:url("img/nadeln-dicker-38x76.svg") no-repeat 0px 0px;
	}
#schliessen a:active, #schliessen a:hover, #schliessen a:focus {
	background-position:0px -38px; 
	}
*/
	#inhalt div.facebook a img, #wrapper div.facebook a img {
		max-width:25px;
	}
#inhalt div.facebook a:hover img, #wrapper div.facebook a:hover img, 
#inhalt div.facebook a:active img, #wrapper div.facebook a:active img,
#inhalt div.facebook a:focus img, #wrapper div.facebook a:focus img {
	max-width:35px;
	margin-bottom:25px;
	}	
	
}
@media only screen 
and (min-width : 320px) 
and (max-width : 667px) 
and (orientation : landscape) {
#logo.alleAusserIE {
	background:url("img/logo-2.png") no-repeat left top;
	background-size: contain ;	
	}
#inhalt p.grosse-type, #knoepfeUndstoffe p.grosse-type {
	font-size:21px;
	line-height:30px;
	letter-spacing:.5px;
	font-weight:800;
 }
/*
prozent smiley
https://www.mediaevent.de/tutorial/css-position-absolute-in-relative.html -> CSS Slideshow mit relativer und absoluter Positionierung
*/

}
.bild-container {
	position:relative;
}
.saison-bild, .prozent-ohne-smiley, .prozent-mit-smiley {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:auto;
	z-index:500;
}
.prozent-ohne-smiley {
	z-index:1000;
}
.prozent-mit-smiley {
	z-index:2000;
}
.platzhalter {
	visibility:hidden;
	width:100%;
	height:auto;
	position:relative;/*braucht ein relativ postioniertes bild, sonst fällt sein container aus dem flow*/
}
@-webkit-keyframes smiley-blink {
	0% { opacity:0; }
	33% { opacity:1; }
	66% { opacity:1; }
	100% { opacity:0; }
}

.prozent-ohne-smiley {
  -webkit-animation-name: smiley-blink;
  -webkit-animation-duration: 2s;
 -webkit-animation-iteration-count: infinite;
  /* weitere animation-Eigenschaften */
}