/* 
	Main CSS-Styles for Wilde Schwäne
	url: http://www.wilde-schwaene-spielzeug.de/
	author: Robert Weber for closingtag 2009
	email: info@closingtag.de
	
	2021 version by kls0e 11/2021 V1.42
*/
@import url("reset.css");

* {

}

html {
	scroll-behavior: smooth;
}

body[id=schwaene] {
	position: relative;
	font-family: Arial, sans-serif;
	font-size: 62.5%;
	line-height: 1;
	margin: 0;
	padding: 0;
	width: 8372px;
	height: 100vh;
	box-sizing: border-box;
	overflow: auto;
	overflow-y: hidden;
	-webkit-touch-callout: none;
 	-webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
  background: url(../img/kls0e2.png) no-repeat;
	background: url("../img/kls0e2.png") no-repeat, linear-gradient(0deg, rgba(242,182,97,0.4289916650253851) 0%, rgba(255,255,255,1) 20%);
}
body[id=schwaene]:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}


body[id=schwaene].start {
}

body[id=schwaene] a:link, body[id=schwaene] a:visited, body[id=schwaene] a {
	color: #000;
}

body[id=schwaene] a:active, body[id=schwaene] a:hover {
	text-decoration: underline;
}

body[id=schwaene].meta {
	background: #cc3333;
	width: 370px;
	padding: 15px 15px 50px;
	color: #fff;
	font-weight: bold;
	height: auto;
  overflow: scroll !important;
}

body[id=schwaene].meta h1, body[id=schwaene].meta h2, body[id=schwaene].meta ul li, body[id=schwaene].meta p {
	font-size: 1.2em;
	line-height: 1.1538;
}

body[id=schwaene].meta ul, body[id=schwaene].meta h1, body[id=schwaene].meta p {
	padding-bottom: 1.1538em;	
}

body[id=schwaene].meta p {
	clear: both;
}

body[id=schwaene].meta a {
	color: #fff;
}

body[id=schwaene].meta ul {
	float: left;
	width: 177px;
	padding: 0 16px 1.1538em 0;
}

body[id=schwaene].meta ul + ul {
	padding-right: 0;
}

body[id=schwaene].start h1 {
	text-indent: -1982em;
	white-space: nowrap;
	background: transparent url(../img/start.png) no-repeat;
	height: 423px;
	width: 413px;
	position: absolute;
	top: 0;
	left: 0;
}

body[id=schwaene] ul.navigation li a:link, body[id=schwaene] ul.navigation li a:visited, body[id=schwaene] ul.navigation li a {
	font-size: 1.7em;
	display: block;
	position: absolute;
	color: #cc3333;
}

body[id=schwaene] ul.navigation li a.home {
	display: block;
	white-space: nowrap;
	text-indent: -19982px;
	position: absolute;
}

body[id=schwaene] ul.start li a.galerie {
	width: 71px;
	height: 59px;
	left: 456px;
	top: 324px;
	padding: 0 0 0 64px;
	background: transparent url(../img/galerie.png) bottom left no-repeat;
}

body[id=schwaene] ul.start li a.schoene {
	width: 350px;
	height: 250px;
	left: 545px;
	top: 355px;
	background: transparent url(../img/kls0e.png) top left no-repeat;
	background-size: 245px auto;
	opacity: 0.91;
	font-size: 12px;
}

div.spanschoene {
	padding-top: 30px;
	padding-left: 72px;
}

body[id=schwaene] ul.start li a.breite {
	width: 350px;
	height: 250px;
	left: 725px;
	top: 290px;
	background: transparent url(../img/kls0e.png) top left no-repeat;
	background-size: 230px auto;
	opacity: 0.85;
	font-size: 12px;
}

div.spanbreite {
	padding-top: 27px;
	padding-left: 74px;
}

body[id=schwaene] ul.start li a.cl0ud {
	width: 350px;
	height: 250px;
	left: 245px;
	top: 365px;
	background: transparent url(../img/kls0e.png) bottom left no-repeat;
	background-size: 280px auto;
	opacity: 0.8;
}

body[id=schwaene] ul.start li a.instagram {
	left: 306px;
	top: 521px;
}

body[id=schwaene] ul.start li a.whatsapp {
	left: 374px;
	top: 517px;
	background: rgba(255, 255, 255, .8);
}

body[id=schwaene] ul.start li a.email {
	left: 445px;
	top: 513px;
}

body[id=schwaene] ul.start li a.kontakt {
	width: 70px;
	height: 58px;
	left: 690px;
	top: 114px;
	padding: 90px 0 0 100px;
	background: transparent url(../img/kontakt.png) bottom left no-repeat;
}

body[id=schwaene] ul.start li a.regenbogen {
	width: 270px;
	height: 150px;
	left: 520px;
	top: 15px;
	padding: 0px 0 0 0px;
	background: transparent url(../img/regenbogen.png) bottom left no-repeat;
	/* opacity: 0.95; */
  background-size: 270px 150px;
  z-index: -5;
}

body[id=schwaene] ul.start li a.ueberuns {
	width: 73px;
	height: 55px;
	left: 674px;
	top: 501px;
	padding: 30px 0 0 30px;
	background: transparent url(../img/ueberuns.png) bottom left no-repeat;
}

body[id=schwaene] #galerie {
	position: absolute;
	left: 1565px;
	top: 0;
	height: 100%;
}

body[id=schwaene] #galerie h2 {
	position: absolute;
	top: 39px;
	left: 67px;
	background: transparent url(../img/cloud1.png) top left no-repeat;
	color: #fff;
	width: 211px;
	height: 91px;
	padding: 35px 0 0 45px;
	font-size: 1.7em;
	font-weight: normal;
}

body[id=schwaene] #galerie ul#products {
	font-size: 1.05em;
	color: #333;
	line-height: 1.2;
}

body[id=schwaene] #galerie ul#products li {
	position: absolute;
}

body[id=schwaene] #galerie ul#products li img {
	position: absolute;
}

body[id=schwaene] #galerie ul#products li h3 {
	padding-bottom: 1.1538em;
	letter-spacing: 1px;
}

body[id=schwaene] #galerie ul#products li p {
	line-height: 1.2;
	padding-bottom: 1.1538em;
}

.gruppeninfo {
	font-size: xx-small;
	font-style: italic;
}

body[id=schwaene] #galerie ul#products li#bear {
	left: 140px;
	top: 499px;
	background: transparent url(../img/frame1.png) no-repeat top left;
	width: 298px;
	height: 177px;
	padding: 20px 20px 0 20px;
}

body[id=schwaene] #galerie ul#products li#bear img {
	left: 45px;
	top: -284px;
}

body[id=schwaene] #galerie ul#products li#instruments {
	left: 600px;
	top: 64px;
	background: transparent url(../img/frame2.png) no-repeat top left;
	width: 298px;
	height: 184px;
	padding: 40px 30px 0 30px;
}

body[id=schwaene] #galerie ul#products li#instruments img {
	left: -70px;
	top: 284px;
}

body[id=schwaene] #galerie ul#products li#jonglieren {
	left: 1130px;
	top: 474px;
	background: transparent url(../img/frame3.png) no-repeat top left;
	width: 301px;
	height: 193px;
	padding: 20px 20px 0 20px;
}

body[id=schwaene] #galerie ul#products li#jonglieren img {
	left: 45px;
	top: -275px;
}

body[id=schwaene] #galerie ul#products li#wuerfel {
	left: 1855px;
	top: 94px;
	background: transparent url(../img/frame4.png) no-repeat top left;
	width: 302px;
	height: 140px;
	padding: 40px 40px 0 40px;
}

body[id=schwaene] #galerie ul#products li#wuerfel img {
	left: -25px;
	top: 210px;
}

body[id=schwaene] #galerie ul#products li#klappern {
	left: 2300px;
	top: 474px;
	background: transparent url(../img/frame5.png) no-repeat top left;
	width: 313px;
	height: 204px;
	padding: 30px 30px 0 30px;
}

body[id=schwaene] #galerie ul#products li#klappern img {
	left: 145px;
	top: -232px;
}

body[id=schwaene] #galerie ul.navigation .home {
	width: 33px;
	height: 85px;
	left: 755px;
	top: 574px;
	background: transparent url(../img/ueberuns.png) bottom left no-repeat;
}

body[id=schwaene] #galerie ul.navigation .ueberuns {
	width: 73px;
	height: 25px;
	left: 785px;
	top: 634px;
}

body[id=schwaene] #galerie ul.navigation .kontakt {
	left: 683px;
	top: 604px;
}

body[id=schwaene] #searchgame,
body[id=schwaene] #galerie #manufactures {
	display: block;
	position: absolute;
	left: 2810px;
	top: 114px;
	color: #fff;
	text-align: center;
	font-size: 1.2em;
	line-height: 1.1538;	
}

body[id=schwaene] #searchgame {
	top: 14px;
	left: 4490px;
	width: 200px;
}

body[id=schwaene] #kontakt {
	position: absolute;
	left: 4846px;
	top: 0;
	height: 100%;	
}

body[id=schwaene] #kontakt p {
	font-size: 1.7em;
	line-height: 1.3333;
}

body[id=schwaene] #kontakt h2 {
	position: absolute;
	top: 14px;
	left: 125px;
	width: 256px;
	height: 125px;
	background: transparent url(../img/kommvorbei.png) no-repeat;
	text-indent: -1982em;
}

body[id=schwaene] #kontakt .email {
	position: absolute;
	left: 280px;
	top: 149px;
	width: 300px;
	text-align: center;
}

body[id=schwaene] #kontakt #addressone {
	position: absolute;
	top: 177px;
	left: -31px;
	width: 200px;
	height: 172px;
	background: transparent url(../img/address1.png) no-repeat;	
	padding: 360px 386px 0 70px;
	text-align: center;
}

body[id=schwaene] #kontakt #addresstwo {
	position: absolute;
	top: 85px;
	left: 617px;
	width: 258px;
	height: 413px;
	background: transparent url(../img/address2.png) no-repeat;	
	padding: 135px 0 0 330px;
	text-align: center;
}

body[id=schwaene] #kontakt ul.navigation .home {
	width: 89px;
	height: 40px;
	left: 520px;
	top: 655px;
	background: transparent url(../img/galerie.png) bottom left no-repeat;
}

body[id=schwaene] #kontakt ul.navigation .galerie {
	width: 71px;
	left: 584px;
	top: 634px;
}

body[id=schwaene] #kontakt ul.navigation .ueberuns {
	left: 450px;
	top: 649px;
	width: 80px;
}


body[id=schwaene] #ueberuns {
	position: absolute;
	left: 6360px;
	top: 0;
	height: 100%;
}

body[id=schwaene] #ueberuns h2 {
	position: absolute;
	left: 3px;
	top: 494px;
	text-indent: -1982em;
	background: transparent url(../img/unddassindwir.png);
	width: 256px;
	height: 128px;
}

body[id=schwaene] #ueberuns h2#ciao {
	left: 1685px;
	top: 4px;
	background: transparent url(../img/tschuess.png);
	width: 184px;
	height: 344px;
}

body[id=schwaene] #ueberuns .column {
	width: 409px;
	float: left;
	margin: 234px 30px 0 276px;
	font-size: 1.7em;
	line-height: 1.3333;
	color: #555;
}

body[id=schwaene] #ueberuns .column + .column {
	margin-left: 0;
}

body[id=schwaene] #ueberuns .column p {
	padding-bottom: 1.3333em;
}

body[id=schwaene] #imprint {
	display: block;
	position: absolute;
	top: 118px;
	left: 1523px;
	width: 178px;
	height: 81px;
	background: transparent url(../img/imprint.png);
	font-size: 1.2em;
	line-height: 1.1538;
	color: #fff;
	padding: 35px 0 0;
	text-align: center;
}

body[id=schwaene] #ueberuns ul.navigation .home {
	width: 89px;
	height: 40px;
	left: 465px;
	top: 94px;
	background: transparent url(../img/galerie.png) bottom right no-repeat;
}

body[id=schwaene] #ueberuns ul.navigation .galerie {
	width: 71px;
	left: 415px;
	top: 94px;
}

body[id=schwaene] #ueberuns ul.navigation .kontakt {
	left: 450px;
	top: 69px;
	width: 80px;
}

#overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(39, 170, 245, 0.46);
  background-color: linear-gradient(black, gray, white);
  z-index: 2; */* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
  float: left;
 background: url(../img/start.png) no-repeat rgba(255, 232, 203, 0.80); 
  }

#kls0e{
/*  position: relative;
  top: 20%;
  left: 20%; */
  font-size: 1.9em;
  color: #111;
  /*transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);*/
  padding: 10%;
  padding-left: 10vw;
  padding-top: 10vh; 
  line-height: 1.4em;  
  font-family: 'Pangolin', cursive;
  }

#kls0e a {
  color: #ca2f30;
  font-weight: bold;
}

#teaser {
	background: -webkit-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,.8));
	padding-top: 150px;
	padding: 50px;
/*	max-width: 50vh; */
	height: 100%;
	max-width:  100vw;
	font-size: 1.7em;
  color: #555;
	line-height: 1.4em;  
  font-family: 'Pangolin', cursive;
}

.pr0div ul li{
list-style-type:none;
display:flex;
justify-content:space-between;
flex-direction:row;
flex-flow:row wrap;
}