/* 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 */






#words01
{
	position:absolute;
	top:35%;
	left:15%;
	height:10%;
	width:15%;
	margin:auto;
	font-family: 'Carter One';
	font-size:2.6vw;
	color:rgba(255, 55, 55, 0.4);
	background:rgba(222, 0, 0, 0.0);
	transform: rotate(-10deg);
	writing-mode: lr-tb;
	z-index: 995;
}
.classname01 
{animation: cssAnimation1 5s  1 ease-in-out;
-animation-delay: 2s;

} 
@keyframes cssAnimation1 
{
	0%   { transform:  rotate(-90deg) scale(3.5) skew(90deg) translate(-200px,-300px);}
	70%  { transform:  rotate(0deg) scale(1.0) skew(0deg) translate(00px);}
	70%  {color:rgba(99, 99, 99, 1);}
	100%  {color:rgba(255, 55, 55, 0.4);}
  } 

#words02
{
	position:absolute;
	top:25%;
	left:75%;
	height:10%;
	width:15%;
	margin:auto;
	font-family: 'Carter One';
	font-size:2.6vw;
	color:rgba(255, 55, 55, 0.4);
	background:rgba(222, 0, 0, 0.0);
	transform: rotate(10deg);
	writing-mode: lr-tb;
	z-index: 995;
}
.classname02 
{animation: cssAnimation2 5s  1 ease;

} 
@keyframes cssAnimation2 
{
	0%   { transform:  rotate(-90deg) scale(3.5) skew(90deg) translate(300px,200px);}
	70%  { transform:  rotate(0deg) scale(1.0) skew(0deg) translate(00px);}
	70%  {color:rgba(99, 99, 99, 1);}
	100%  {color:rgba(255, 55, 55, 0.4);}
  }
  
#words03
{
	position:absolute;
	top:70%;
	left:78%;
	height:10%;
	width:15%;
	margin:auto;
	font-family: 'Carter One';
	font-size:2.6vw;
	color:rgba(255, 55, 55, 0.4);
	background:rgba(222, 0, 0, 0.0);
	transform: rotate(-25deg);
	writing-mode: lr-tb;
	z-index: 995;
}
.classname03 
{animation: cssAnimation3 5s  1 ease;

} 
@keyframes cssAnimation3 
{
	0%   { transform:  rotate(-90deg) scale(3.5) skew(90deg) translate(-8300px,-100px);}
	70%  { transform:  rotate(0deg) scale(1.0) skew(0deg) translate(00px);}
	70%  {color:rgba(99, 99, 99, 1);}
	100%  {color:rgba(255, 55, 55, 0.4);}
  }
#words03:hover
{
	cursor:url(../images/home/youtube1.png), auto;
}
  
#words04
{
	position:absolute;
	top:75%;
	left:2%;
	height:10%;
	width:15%;
	margin:auto;
	font-family: 'Carter One';
	font-size:2.6vw;
	color:rgba(255, 55, 55, 0.4);
	background:rgba(222, 0, 0, 0.0);
	transform: rotate(32deg);
	writing-mode: lr-tb;
	z-index: 995;
}
.classname04 
{animation: cssAnimation4 5s  1 ease;

} 
@keyframes cssAnimation4 
{
	0%   { transform:  rotate(-90deg) scale(3.5) skew(90deg) translate(-300px,100px);}
	70%  { transform:  rotate(0deg) scale(1.0) skew(0deg) translate(00px);}
	70%  {color:rgba(99, 99, 99, 1);}
	100%  {color:rgba(255, 55, 55, 0.4);}
  }
  
#words05
{
	position:absolute;
	top:45%;
	left:72%;
	height:10%;
	width:15%;
	margin:auto;
	font-family: 'Carter One';
	font-size:2.6vw;
	color:rgba(255, 55, 55, 0.4);
	background:rgba(222, 0, 0, 0.0);
	transform: rotate(49deg);
	writing-mode: lr-tb;
	z-index: 995;
}
.classname05 
{animation: cssAnimation4 5s  1 ease;

} 
@keyframes cssAnimation5 
{
	0%   { transform:  rotate(-90deg) scale(3.5) skew(90deg) translate(-300px,100px);}
	70%  { transform:  rotate(0deg) scale(1.0) skew(0deg) translate(00px);}
	70%  {color:rgba(99, 99, 99, 1);}
	100%  {color:rgba(255, 55, 55, 0.4);}
  }
  
#words06
{
	position:absolute;
	top:60%;
	left:12%;
	height:10%;
	width:15%;
	margin:auto;
	font-family: 'Carter One';
	font-size:2.6vw;
	color:rgba(255, 55, 55, 0.4);
	background:rgba(222, 0, 0, 0.0);
	transform: rotate(-44deg);
	writing-mode: lr-tb;
	z-index: 995;
}
.classname06 
{animation: cssAnimation4 5s  1 ease;

} 
@keyframes cssAnimation6 
{
	0%   { transform:  rotate(-90deg) scale(3.5) skew(90deg) translate(-300px,100px);}
	70%  { transform:  rotate(0deg) scale(1.0) skew(0deg) translate(00px);}
	70%  {color:rgba(99, 99, 99, 1);}
	100%  {color:rgba(255, 55, 55, 0.4);}
  }
  
#words07
{
	position:absolute;
	top:85%;
	left:45%;
	height:10%;
	width:15%;
	margin:auto;
	font-family: 'Carter One';
	font-size:2.6vw;
	color:rgba(255, 55, 55, 0.4);
	background:rgba(222, 0, 0, 0.0);
	transform: rotate(0deg);
	writing-mode: lr-tb;
	z-index: 995;
}
.classname07 
{animation: cssAnimation7 8s  1 ease;

} 
@keyframes cssAnimation7 
{
	0%   { transform:  rotate(90deg) scale(3.5) skew(90deg) translate(-300px,100px);}
	70%  { transform:  rotate(0deg) scale(1.0) skew(0deg) translate(00px);}
	70%  {color:rgba(99, 99, 99, 1);}
	100%  {color:rgba(255, 55, 55, 0.4);}
  }
  
  
  
  
  /* @-moz-keyframes cssAnimation {from { -moz-transform:  rotate(0deg) scale(1.5) skew(20deg) translate(-300px); }  to { -moz-transform:  rotate(360deg) scale(0.217) skew(20deg) translate(-300px); } } 
  @-o-keyframes cssAnimation {from { -o-transform:  rotate(0deg) scale(1.5) skew(20deg) translate(-300px); }  to { -o-transform:  rotate(360deg) scale(0.217) skew(20deg) translate(-300px); } } */





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



}

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



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



}

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



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




}

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



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



}

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



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



}

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



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



}

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



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



}

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



}
/* 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) {
	


}


/* ENDE MEDIA QUERY */



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

/* MEDIA QUERY 680px*/

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



}
/* ENDE MEDIA QUERY */


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

/* MEDIA QUERY 580px*/

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




}
/* ENDE MEDIA QUERY */


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

/* MEDIA QUERY 480px*/

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



}
/* ENDE MEDIA QUERY */