/* Kommentar in CSS */


/* Anfang Fonts einbinden */
/* carter-one-regular - latin */
@font-face {
  font-family: 'Carter One';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/carter1/carter-one-v10-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Carter One'), local('CarterOne'),
       url('../fonts/carter1/carter-one-v10-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/carter1/carter-one-v10-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/carter1/carter-one-v10-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/carter1/carter-one-v10-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/carter1/carter-one-v10-latin-regular.svg#CarterOne') format('svg'); /* Legacy iOS */
}
/* Ende Fonts einbinden */
/* Anfang Fonts einbinden */
/* goeschen-fraktur-regular - latin */
@font-face {
  font-family: 'Bickley Script';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/bickley-script/BickleyScript.eot'); /* IE9 Compat Modes */
  src: local('BickleyScript'), local('bickleyscript'),
       url('../fonts/bickley-script/BickleyScript.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/bickley-script/BickleyScript.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/bickley-script/BickleyScript.woff') format('woff'), /* Modern Browsers */
       url('../fonts/bickley-script/BickleyScript.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/bickley-script/BickleyScript.svg#CarterOne') format('svg'); /* Legacy iOS */
}
/* Ende Fonts einbinden */

@font-face {
  font-family: 'Libre_Baskerville';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Libre_Baskerville/LibreBaskerville-Regular.eot'); /* IE9 Compat Modes */
  src: local('Libre_Baskerville'), local('libre_baskerville'),
       url('../fonts/Libre_Baskerville/LibreBaskerville-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/Libre_Baskerville/LibreBaskerville-Regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/Libre_Baskerville/LibreBaskerville-Regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/Libre_Baskerville/LibreBaskerville-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/Libre_Baskerville/LibreBaskerville-Regular.svg#CarterOne') format('svg'); /* Legacy iOS */
}
/* Ende Fonts einbinden */



body
{
	height:980px;
	width:99%;
	margin:auto;
	background:rgba(0, 0, 0, 1);
}

#mama
{
	position:relative;
	height:100%;
	-background:yellow;
	-overflow:hidden;
}

#content
{
	position:relative;
	display: flex;
	height:100%;
	width:100%;
	overflow:hidden;
}

#wasserkunst
{
	position:relative;
	display:block;
	height:60%;
	max-width:100%;
	min-height:1%;
	margin:auto;
	border:5px solid grey;
	border-radius:20px;
	box-shadow: 0 0 2.0em grey, 0 0 2.0em grey, 0 0 2.0em grey;
	
	-left:10%;
}


#hoover1
{
	position:absolute;
	display:block;
	top:0px;
	left:0px;
	width:40%;
	height:100%;
	background:rgba(99, 55, 155, 0.0);
	z-index:999;
}
#hoover1:hover
{
	cursor:url(../images/home/lkw91.png)60 60, auto;
}

#hoover2
{
	position:absolute;
	display:block;
	bottom:0px;
	right:0px;
	width:40%;
	height:100%;
	background:rgba(99, 55, 155, 0.0);
	z-index:999;
}
#hoover2:hover
{
	-cursor:url(../images/home/sytema91.png)60 60, auto;
}

#leftklick
{
	position:absolute;
	top:50%;
	right:10%;
	color:white;
	font-family: 'Carter One';
	font-size:3vh;
	text-align:center;
	text-shadow:0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000;
	z-index:999;
}

#rightklick
{
	position:absolute;
	top:50%;
	left:10%;
	color:white;
	font-family: 'Carter One';
	font-size:3vh;
	text-align:center;
	text-shadow:0 0 0.2em #000000, 0 0 0.2em #000000, 0 0 0.2em #000000;
	z-index:999;
}

#linkshoover 
{
	position:absolute;
	top:0px;
	left:0px;
	margin:auto;
	width: 50%;
	height: 100%;
	filter: brightness(0.7) blur(1px);
	color:red;
	font-size:8vh;
	font-weight:bold;
	text-align:center;
	font-family: 'Bickley Script';
	text-shadow:0 0 0.1em #FFFFFF, 0 0 0.1em #FFFFFF, 0 0 0.1em #FFFFFF;
	
	background:rgba(99, 55, 55, 0.0);
	transform:rotate(0deg);
	-border:5px solid red;
	opacity: 1.0;
	transition: background 0.6s ease-in;
	-z-index:999;
}
#linkshoover:hover
{
	-background:rgba(99, 55, 55, 0.0);
	cursor:pointer;
	-opacity: 1;
	-filter: brightness(1.0) blur(0px);
	-cursor:url(../images/home/sytema91.png)60 60, auto;
}
#linkshoover:hover #titel01
{
	-top:15%;
	-right:10%;
	-font-size:8vh;
	-transform: rotate(0deg);
	-text-shadow:-2px 3px 1px black;
	-opacity: 0.0;
}
#linkshoover:hover #titel001
{
	-top:2%;
	-right:-30%;
	-font-size:8vh;
	-transform: rotate(0deg);
	-text-shadow:-2px 3px 1px black;
	-opacity: 1.0;
}
#linkshoover:hover #dreieck
{
	-display:block;
	-left:-55%;
	-top:-55%;
	-opacity: 0.0;
}
p#titel01
{
	position:absolute;
	top:15%;
	right:10%;
	font-family: 'Bickley Script';
	opacity: 0.8;
	transform-origin: 50% 50%;
	transform:rotate(-35deg); 
	transition: all 0.8s;
	z-index:111;
}
p#titel001
{
	position:absolute;
	top:15%;
	right:-30%;
	font-family: 'Bickley Script';
	opacity: 0.0;
	transform-origin: 50% 50%;
	transform:rotate(-35deg); 
	transition: all 0.8s;
	z-index:111;
}
img#dreieck
{
	position:absolute;
	display:block;
	left:0%;
	top:0%;
	width:175%;
	height:150%;
	opacity:0.9;
	transition: all 0.8s;
	-z-index:10;
}
#testdreieck
{
	position:absolute;
	display:block;
	top:0px;
	left:0px;
	width:150%;
	height:100%;
	-z-index:99;
	-border:2px solid red;
}



#rechtshoover 
{
	position:absolute;
	top:0px;
	right:0px;
	margin:auto;
	width: 50%;
	height: 100%;
	filter: brightness(0.7) blur(1px);
	
	color:red;
	font-size:8vh;
	font-weight:bold;
	text-align:center;
	font-family: 'Bickley Script';
	text-shadow:0 0 0.1em #FFFFFF, 0 0 0.1em #FFFFFF, 0 0 0.1em #FFFFFF;
	
	background:rgba(99, 55, 55, 0.0);
	transform:rotate(0deg);
	-border:5px solid white;
	opacity: 1.0;
	transition: background 0.6s ease-in;
	-z-index:999;
}
#rechtshoover:hover 
{
	-background:rgba(99, 55, 55, 0.0);
	cursor:pointer;
	-opacity: 1;
	-filter: brightness(1.0) blur(0px);
	-cursor:url(../images/home/was93.png)60 60, auto;
}
#rechtshoover:hover #titel02
{
	-bottom:9%;
	-left:7%;
	-font-size:8vh;
	-transform: rotate(0deg);
	-text-shadow:-2px 3px 1px black;
	-opacity: 0.0;
}
#rechtshoover:hover #titel002
{
	-bottom:1%;
	-left:-40%;
	-font-size:8vh;
	-transform: rotate(0deg);
	-text-shadow:-2px 3px 1px black;
	-opacity: 1.0;
	-border:2px solid red;
}
#rechtshoover:hover #dreieck2
{
	-display:block;
	-right:-55%;
	-bottom:-55%;
	-opacity: 0.0;
}
p#titel02
{
	position:absolute;
	bottom:22%;
	left:7%;
	font-family: 'Bickley Script';
	opacity: 0.8;
	transform-origin: 50% 50%;
	transform:rotate(-35deg); 
	transition: all 0.8s;
	z-index:111;
	-border:2px solid red;
}
p#titel002
{
	position:absolute;
	bottom:3%;
	left:-40%;
	width:130%;
	font-family: 'Bickley Script';
	opacity: 0.0;
	transform-origin: 50% 50%;
	transform:rotate(-35deg); 
	transition: all 0.8s;
	z-index:111;
}
img#dreieck2
{
	position:absolute;
	display:block;
	right:0%;
	bottom:0%;
	width:175%;
	height:150%;
	opacity:0.9;
	transition: all 0.8s;
}

#testdreieck2
{
	position:absolute;
	display:block;
	top:0px;
	right:0px;
	width:150%;
	height:100%;
	-z-index:1;
	-border:1px solid white;
}








/* Anfang Viewports einbinden berechnen Anfang Viewports einbinden berechnen Anfang Viewports einbinden berechnen*/
@media (max-aspect-ratio: 16/9) and (max-height:1080px){

body
{
	height:980px;
	width:99%;
	margin:auto;
}

#mama
{
	height:100%;
	-background:yellow;
	-overflow:hidden;
}

}

@media (min-aspect-ratio:16/9) and (max-height:1080px){

body
{
	height:980px;
	width:99%;
	margin:auto;
}

#mama
{
	height:100%;
}

}
/* Ende Viewports einbinden berechnen Ende Viewports einbinden berechnen Anfang Viewports einbinden berechnen*/
@media (max-aspect-ratio: 16/9) and (max-height:980px){

body
{
	height:880px;
	width:99%;
	margin:auto;
}

#mama
{
	height:100%;
}

}

@media (min-aspect-ratio:16/9) and (max-height:980px){

body
{
	height:880px;
	width:99%;
	margin:auto;
}

#mama
{
	height:100%;
}

}
/* Ende Viewports einbinden berechnen Ende Viewports einbinden berechnen Anfang Viewports einbinden berechnen*/
@media (max-aspect-ratio: 16/9) and (max-height:880px){

body
{
	height:780px;
	width:99%;
	margin:auto;
}

#mama
{
	height:100%;
}


}

@media (min-aspect-ratio:16/9) and (max-height:880px){

body
{
	height:780px;
	width:99%;
	margin:auto;
}

#mama
{
	height:100%;
}

}
/* Ende Viewports einbinden berechnen Ende Viewports einbinden berechnen Anfang Viewports einbinden berechnen*/
@media (max-aspect-ratio: 16/9) and (max-height:780px){

body
{
	height:680px;
	width:99%;
	margin:auto;
}

#mama
{
	height:100%;
}

}

@media (min-aspect-ratio:16/9) and (max-height:780px){

body
{
	height:680px;
	width:99%;
	margin:auto;
}

#mama
{
	height:100%;
}

}
/* Ende Viewports einbinden berechnen Ende Viewports einbinden berechnen Anfang Viewports einbinden berechnen*/
@media (max-aspect-ratio: 16/9) and (max-height:680px){

body
{
	height:580px;
	width:99%;
	margin:auto;
}

#mama
{
	height:100%;
}

}

@media (min-aspect-ratio:16/9) and (max-height:680px){

body
{
	height:580px;
	width:99%;
	margin:auto;
}

#mama
{
	height:100%;
}

}
/* Ende Viewports einbinden berechnen Ende Viewports einbinden berechnen Anfang Viewports einbinden berechnen*/
@media (max-aspect-ratio: 16/9) and (max-height:580px){

body
{
	height:480px;
	width:99%;
	margin:auto;
}

#mama
{
	height:100%;
}

}

@media (min-aspect-ratio:16/9) and (max-height:580px){

body
{
	height:480px;
	width:99%;
	margin:auto;
}

#mama
{
	height:100%;
}

}
/* Ende Viewports einbinden berechnen Ende Viewports einbinden berechnen Anfang Viewports einbinden berechnen*/
@media (max-aspect-ratio: 16/9) and (max-height:480px){

body
{
	height:380px;
	width:99%;
	margin:auto;
}

#mama
{
	height:100%;
}

}

@media (min-aspect-ratio:16/9) and (max-height:480px){

body
{
	height:380px;
	width:99%;
	margin:auto;
}

#mama
{
	height:100%;
}

}
/* Ende Viewports einbinden berechnen Ende Viewports einbinden berechnen Anfang Viewports einbinden berechnen*/








/* #content
{

	-background:yellow;
	overflow:hidden;
	-overflow-y: hidden;
}

#dreieck 
{
	position:absolute;
	top:-1050px;
	left:-1050px;
	margin:auto;
	width: 250%;
	height: 1000px;
	background:rgba(99, 55, 55, 0.9);
	transform:rotate(-35deg);
	border:5px solid red;
	opacity: 0.8;
	transition: background 0.2s ease-in;
}
#dreieck:hover 
{
	background:rgba(99, 99, 99, 0.0);
	cursor:pointer;
	opacity: 1;
	
}


#dreieck2
{
	position:absolute;
	top:-330px;
	left:-330px;
	margin:auto;
	width: 250%;
	height: 1000px;
	background:rgba(55, 99, 55, 0.9);
	transform:rotate(-35deg);
	border:5px solid red;
	opacity: 0.8;
	transition: background 0.2s ease-in;
}
#dreieck2:hover 
{
	background:rgba(99, 99, 99, 0.0);
	cursor:pointer;
	opacity: 1;
	
} */










/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* MEDIA QUERY 1080px*/

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (max-width:1080px) {


}
/* ENDE MEDIA QUERY min-*/



/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* MEDIA QUERY 980px*/

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (max-width:980px) {


}
/* ENDE MEDIA QUERY max-*/



/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* MEDIA QUERY 880px*/

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (max-width:880px) {
	
	

}
	
	
/* ENDE MEDIA QUERY max-*/


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* MEDIA QUERY 780px*/

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (max-width:780px) {
	
#wasserkunst
{
	height:50%;
}

}


/* ENDE MEDIA QUERY */



/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* MEDIA QUERY 680px*/

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (max-width:680px) {
	



}
/* ENDE MEDIA QUERY */


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* MEDIA QUERY 580px*/

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (max-width:580px) {
	

#wasserkunst
{
	height:40%;
}


}
/* ENDE MEDIA QUERY */


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* MEDIA QUERY 480px*/

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (max-width:480px) {

#wasserkunst
{
	height:30%;
}

}
/* ENDE MEDIA QUERY */