/* #########################  GLOBAL  ######################### */
*
{
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	font-family: 'commodore';
	
    
}

@font-face 
{
    font-family: 'commodore';
	/* src: local('commodore'); */
    src: url('commodore.woff') format('woff');	
    font-weight: normal;
    font-style: normal;

}

body
{ 
	height: 100%;
	width: 100%;
	background-color: rgba(0,12,0,1);
	overflow: hidden;
	cursor: url('cursor2.cur'), default;
	font-family: 'commodore', sans-serif;

}

a:link 
{ 
	cursor: url('cursor3.cur'), pointer;
}

a:link { color: rgba(0,200,0,1) }
a:visited { color: rgba(0,130,0,1) }
a:hover { color: rgba(150,250,150,1) }

/* #########################  CENTER  ######################### */
#VERTICALCENTER 
{
	width: 10px;
	height: 50%;
	margin-bottom: -525px;
	float: left;
}
#HORIZONTALCENTER
{	
	margin: 0 auto;
	position: relative;
	width: 1400px;
	height: 1050px;
	clear: left;
	background-color: rgba(0,0,0,1);
	z-index:2;	
	overflow: hidden;
}

#CONTAINER_TOP
{	
	position: absolute;
	top: 0px;
	left: 0px;
	width: 1400px;
	height: 280px;
	/* background-color: rgba(50,0,0,1);	 */
	overflow: hidden;
}

#CONTAINER_BOTTOM
{	
	position: absolute;
	top: 280px;
	left: 0px;
	width: 1400px;
	height: 770px;
	/* background-color: rgba(0,0,50,1);	 */
	overflow: hidden;
}

.UPDATE
{
	display: block;
	margin-top: 10%;
    margin-bottom: auto;
	margin-left: auto;
    margin-right: auto;
	width: 550px;
	height: 500px;
	z-index:120;
}




/* #########################  CPU & LOGO  ######################### */
.CPU
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 300px;
	height: 280px;
	z-index:100;
}
.LOGO
{
	position: absolute;
	top: 65px;
	left: 81px;	
	width: 110px;
	height: 100px;
	z-index:120;
}
@keyframes logo_fade_in
{
   0%  	{opacity: 0;} 
   100%	{opacity: 1;}
}
.logo_fade_in
{
  animation-name: logo_fade_in;
  animation-duration: 4s;
}





/* #########################  BANNER  ######################### */
.BANNER
{
	position: absolute;
	top: 0px;
	left: 290px;	
	width: 1100px;
	height: 140px;
	z-index:30;	
	overflow: hidden;
}
@keyframes banner_slide_in
{
   0%   {  transform:translateX(300%) 	}
   25%  {  transform:translateX(300%) 	}
   50%  {  transform:translateX(300%) 	}
   75%  {  transform:translateX(300%) 	}
   100% {  transform:translateX(0px)	}
}
.banner_slide_in
{
	animation-name: banner_slide_in;
	animation-duration: 3.5s;
	animation-fill-mode: forwards; 
}





/* #########################  BANNERTEXT  ######################### */

.BANNERTEXT
{
	position: absolute;
	top: 50px;
	left: 591px;
	width: 498px;
	height: 38px;
	z-index:50;
}
@keyframes bannertext_flash
{
   0%  	{opacity: 0;}
   5%  	{opacity: 0;}
   10%  {opacity: 0;}
   15%  {opacity: 0;}
   20% 	{opacity: 0;}
   25%  {opacity: 0;}
   30%  {opacity: 0;}
   35%  {opacity: 0;}
   40%  {opacity: 0;}
   45% 	{opacity: 0;}
   50%	{opacity: 0;}
   55%  {opacity: 0;}
   60%  {opacity: 0;}
   65%  {opacity: 0;}
   66%  {opacity: 0;}
   67%  {opacity: 0;}
   68%  {opacity: 0;}
   69%  {opacity: 0;}
   70%  {opacity: 1;}
   71%  {opacity: 0;}
   72%  {opacity: 0;}
   73%  {opacity: 0;}
   74%  {opacity: 1;}
   75%  {opacity: 0;}
   76% 	{opacity: 0;}
   77% 	{opacity: 0;}
   78% 	{opacity: 1;}
   79% 	{opacity: 0;}
   80%  {opacity: 1;}
   81%  {opacity: 0;}
   82%  {opacity: 0;}
   83%  {opacity: 1;}
   84%  {opacity: 0;}
   85%  {opacity: 1;}
   86% 	{opacity: 1;}
   87% 	{opacity: 0;}
   88% 	{opacity: 1;}
   89% 	{opacity: 0;}
   90%  {opacity: 1;}
   95%  {opacity: 0;}
   100%	{opacity: 1;}
}
@keyframes bannertext_flash_2
{
   0%  	{opacity: 0;}
   5%  	{opacity: 0;}
   10%  {opacity: 0;}
   15%  {opacity: 1;}
   20% 	{opacity: 0;}
   25%  {opacity: 0;}
   30%  {opacity: 1;}
   35%  {opacity: 0;}
   40%  {opacity: 1;}
   45% 	{opacity: 0;}
   50%	{opacity: 0;}
   55%  {opacity: 0;}
   60%  {opacity: 0;}
   65%  {opacity: 1;}
   66%  {opacity: 0;}
   67%  {opacity: 0;}
   68%  {opacity: 0;}
   69%  {opacity: 0;}
   70%  {opacity: 1;}
   71%  {opacity: 0;}
   72%  {opacity: 0;}
   73%  {opacity: 0;}
   74%  {opacity: 1;}
   75%  {opacity: 0;}
   76% 	{opacity: 0;}
   77% 	{opacity: 0;}
   78% 	{opacity: 1;}
   79% 	{opacity: 0;}
   80%  {opacity: 1;}
   81%  {opacity: 0;}
   82%  {opacity: 0;}
   83%  {opacity: 1;}
   84%  {opacity: 0;}
   85%  {opacity: 1;}
   86% 	{opacity: 1;}
   87% 	{opacity: 0;}
   88% 	{opacity: 1;}
   89% 	{opacity: 0;}
   90%  {opacity: 1;}
   95%  {opacity: 0;}
   100%	{opacity: 1;}
}


.bannertext_flash
{
	animation-name: bannertext_flash;
	animation-duration: 6s;
	animation-fill-mode: forwards; 
}
.bannertext_flash_Music
{
	animation-name: bannertext_flash_2;
	animation-duration: 1.7s;
	animation-fill-mode: forwards; 
}




/* #########################  NAVIGATION 1  ######################### */
.NAVIGATION_1
{
	position: absolute;
	top: 140px;
	left: 290px;
	width: 1100px;
	height: 140px;	
	z-index:30;
	overflow: hidden;
}
@keyframes navigation_1_slide_in
{
   0%   {  transform:translateX(300%) 	}
   25%  {  transform:translateX(300%) 	}
   50%  {  transform:translateX(300%) 	}
   60%  {  transform:translateX(300%) 	}
   100% {  transform:translateX(0px)	}
}
.navigation_1_slide_in
{
   animation-name: navigation_1_slide_in;
   animation-duration: 5.5s;
   animation-fill-mode: forwards;
}
.navigation_1_slide_in_music
{
   animation-name: navigation_1_slide_in;
   animation-duration: 3s;
   animation-fill-mode: forwards;
}

@keyframes navigation_1_slide_out
{
   0%   {  transform:translateX(0px) 	}
   /* 25%  {  transform:translateX(300%) 	} */
   /* 50%  {  transform:translateX(300%) 	} */
   /* 75%  {  transform:translateX(300%) 	} */
   100% {  transform:translateX(300%)	}
}
.navigation_1_slide_out
{
   animation-name: navigation_1_slide_out;
   animation-duration: 7s;
   animation-fill-mode: forwards;
}




/* #########################  NAVIGATION 1 CHIPS  ######################### */
.LINK_LED{}

@keyframes n1_chip_fade 
{

  from 
  {
    opacity: 0;
	transform:translateX(900%)
  }

  69% 
  {
    opacity: 0;
    transform: scale3d(2.5, 2.5, 2.5);
	transform:translateX(900%)
  }

  70% 
  {
    opacity: 0;
    transform: scale3d(2.5, 2.5, 2.5)
  }

  71% 
  {
    opacity: 1;
    transform: scale3d(2.5, 2.5, 2.5)
  }

  75% 
  {
    opacity: 1;
    transform: scale3d(1, 1, 1)
  }

  to 
  {
	transform: scale3d(1, 1, 1);
    opacity: 1;
  }
}

.N1_CHIP_1
{
	position: absolute;
	top: 201px;
	left: 412px;
	width: 160px;	
	height: 48px;	
	z-index:30;
	overflow: hidden;
}
.n1_chip_fade_1
{  
	animation-name: n1_chip_fade;
  	animation-duration: 8.5s;
	animation-fill-mode: forwards;
}
.n1_chip_fade_1_singles
{  
	animation-name: n1_chip_fade;
  	animation-duration: 5s;
	animation-fill-mode: forwards;
}
.n1_chip_fade_1_Instruments
{  
	animation-name: n1_chip_fade;
  	animation-duration: 5s;
	animation-fill-mode: forwards;
}
.n1_chip_fade_1_RaMa
{  
	animation-name: n1_chip_fade;
  	animation-duration: 5s;
	animation-fill-mode: forwards;
}
.N1_LED_1
{
	position: absolute;
	top: 166px;
	left: 475px;
	width: 36px;	
	height: 24px;	
	z-index:30;
	overflow: hidden;
}
.LINK .N1_LED_1
{
	position: absolute;
	visibility: hidden;
}
.LINK:hover .N1_LED_1
{
	position: absolute;
	visibility: visible;
}



.N1_CHIP_2
{
	position: absolute;
	top: 201px;
	left: 586px;
	width: 160px;	
	height: 48px;
	z-index:30;
	overflow: hidden;
}
.n1_chip_fade_2
{  
	animation-name: n1_chip_fade;
  	animation-duration: 8.5s;
	animation-fill-mode: forwards;
}
.n1_chip_fade_2_albums
{  
	animation-name: n1_chip_fade;
  	animation-duration: 5.5s;
	animation-fill-mode: forwards;
}
.n1_chip_fade_2_Effects
{  
	animation-name: n1_chip_fade;
  	animation-duration: 5.5s;
	animation-fill-mode: forwards;
}
.n1_chip_fade_2_english
{  
	animation-name: n1_chip_fade;
  	animation-duration: 9.0s;
	animation-fill-mode: forwards;
}
.n1_chip_fade_2_WirUs
{  
	animation-name: n1_chip_fade;
  	animation-duration: 5.5s;
	animation-fill-mode: forwards;
}
.N1_LED_2
{
	position: absolute;
	top: 166px;
	left: 649px;
	width: 36px;	
	height: 24px;	
	z-index:30;
	overflow: hidden;
}
.LINK .N1_LED_2
{
	position: absolute;
	visibility: hidden;
}
.LINK:hover .N1_LED_2
{
	position: absolute;
	visibility: visible;
}



.N1_CHIP_3
{
	position: absolute;
	top: 201px;
	left: 760px;
	width: 160px;	
	height: 48px;	
	z-index:30;
	overflow: hidden;
}
.n1_chip_fade_3
{  
	animation-name: n1_chip_fade;
  	animation-duration: 8.5s;
	animation-fill-mode: forwards;
}
.n1_chip_fade_3_mixes
{  
	animation-name: n1_chip_fade;
  	animation-duration: 6.0s;
	animation-fill-mode: forwards;
}
.n1_chip_fade_3_Presets
{  
	animation-name: n1_chip_fade;
  	animation-duration: 6.0s;
	animation-fill-mode: forwards;
}
.n1_chip_fade_3_art_videos
{  
	animation-name: n1_chip_fade;
  	animation-duration: 5.0s;
	animation-fill-mode: forwards;
}

.N1_LED_3
{
	position: absolute;
	top: 166px;
	left: 823px;
	width: 36px;	
	height: 24px;
	z-index:30;
	overflow: hidden;
}
.LINK .N1_LED_3
{
	position: absolute;
	visibility: hidden;
}
.LINK:hover .N1_LED_3
{
	position: absolute;
	visibility: visible;
}



.N1_CHIP_4
{
	position: absolute;
	top: 201px;
	left: 934px;
	width: 160px;	
	height: 48px;
	z-index:30;
	overflow: hidden;
}
.n1_chip_fade_4
{  
	animation-name: n1_chip_fade;
  	animation-duration: 8.5s;
	animation-fill-mode: forwards;
}
.n1_chip_fade_4_deutsch
{  
	animation-name: n1_chip_fade;
  	animation-duration: 9.5s;
	animation-fill-mode: forwards;
}
.n1_chip_fade_4_WellenReiter
{  
	animation-name: n1_chip_fade;
  	animation-duration: 6.0s;
	animation-fill-mode: forwards;
}
.N1_LED_4
{
	position: absolute;
	top: 166px;
	left: 997px;
	width: 36px;	
	height: 24px;	
	z-index:30;
	overflow: hidden;
}
.LINK .N1_LED_4
{
	position: absolute;
	visibility: hidden;
}
.LINK:hover .N1_LED_4
{
	position: absolute;
	visibility: visible;
}



.N1_CHIP_5
{
	position: absolute;
	top: 201px;
	left: 1108px;
	width: 160px;	
	height: 48px;	
	z-index:30;
	overflow: hidden;
}
.n1_chip_fade_5
{  
	animation-name: n1_chip_fade;
  	animation-duration: 8.5s;
	animation-fill-mode: forwards;
}
.n1_chip_fade_5_Videos
{  
	animation-name: n1_chip_fade;
  	animation-duration: 6.5s;
	animation-fill-mode: forwards;
}
.n1_chip_fade_5_Synthedit
{  
	animation-name: n1_chip_fade;
  	animation-duration: 6.5s;
	animation-fill-mode: forwards;
}
.n1_chip_fade_5_miscprojects
{  
	animation-name: n1_chip_fade;
  	animation-duration: 6.0s;
	animation-fill-mode: forwards;
}
.N1_LED_5
{
	position: absolute;
	top: 166px;
	left: 1171px;
	width: 36px;	
	height: 24px;
	z-index:30;
	overflow: hidden;
}
.LINK .N1_LED_5
{
	position: absolute;
	visibility: hidden;
}
.LINK:hover .N1_LED_5
{
	position: absolute;
	visibility: visible;
}



/* #########################  NAVIGATION 2 ######################### */

.NAVIGATION_2
{
	position: absolute;
	top: -10px;
	left: 0px;
	width: 300px;	
	height: 770px;	
	z-index:20;
	overflow: hidden;
}
@keyframes navigation_2_slide 
{
   0%   {  transform:translateY(300%) 	}
   25%  {  transform:translateY(300%) 	}
   /* 50%  {  transform:translateY(300%) 	} */
   /* 75%  {  transform:translateY(300%) 	} */
   100% {  transform:translateY(0px)	}
}
.navigation_2_slide
{
	animation-name: navigation_2_slide;
	animation-duration: 2s;
	animation-fill-mode: forwards;
}





/* #########################  NAVIGATION 2 CHIPS  ######################### */

@keyframes n2_chip_fade {
  from 
  {
    opacity: 0;
	transform:translateX(900%)
  }

  69% 
  {
    opacity: 0;
    transform: scale3d(2.5, 2.5, 2.5);
	transform:translateX(900%)
  }

  70% 
  {
    opacity: 0;
    transform: scale3d(2.5, 2.5, 2.5)
  }

  71% 
  {
    opacity: 1;
    transform: scale3d(2.5, 2.5, 2.5)
  }

  75% 
  {
    opacity: 1;
    transform: scale3d(1, 1, 1)
  }

  to 
  {
	transform: scale3d(1, 1, 1);
    opacity: 1;
  }
}

.N2_CHIP_1
{
	position: absolute;
	top: 117px;
	left: 56px;
	width: 160px;	
	height: 48px;	
	z-index:30;
	overflow: hidden;
}
.n2_chip_fade_1
{  
	animation-name: n2_chip_fade;
  	animation-duration: 3.50s;
	animation-fill-mode: forwards;
}
.N2_LED_1
{
	position: absolute;
	top: 123px;
	left: 20px;
	width: 160px;	
	height: 48px;	
	z-index:30;
	overflow: hidden;
}
.LINK .N2_LED_1
{
	position: absolute;
	visibility: hidden;
}
.LINK:hover .N2_LED_1
{
	position: absolute;
	visibility: visible;
}



.N2_CHIP_2
{
	position: absolute;
	top: 192px;
	left: 56px;
	width: 160px;	
	height: 48px;	
	z-index:30;
	overflow: hidden;
}
.n2_chip_fade_2
{  
	animation-name: n2_chip_fade;
  	animation-duration: 3.9s;
	animation-fill-mode: forwards;
}
.N2_LED_2
{
	position: absolute;
	top: 198px;
	left: 20px;
	width: 160px;	
	height: 48px;	
	z-index:30;
	overflow: hidden;
}
.LINK .N2_LED_2
{
	position: absolute;
	visibility: hidden;
}
.LINK:hover .N2_LED_2
{
	position: absolute;
	visibility: visible;
}



.N2_CHIP_3
{
	position: absolute;
	top: 267px;
	left: 56px;
	width: 160px;	
	height: 48px;	
	z-index:30;
	overflow: hidden;
}
.n2_chip_fade_3
{  
	animation-name: n2_chip_fade;
  	animation-duration: 4.3s;
	animation-fill-mode: forwards;
}
.N2_LED_3
{
	position: absolute;
	top: 273px;
	left: 20px;
	width: 160px;	
	height: 48px;	
	z-index:30;
	overflow: hidden;
}
.LINK .N2_LED_3
{
	position: absolute;
	visibility: hidden;
}
.LINK:hover .N2_LED_3
{
	position: absolute;
	visibility: visible;
}



.N2_CHIP_4
{
	position: absolute;
	top: 342px;
	left: 56px;
	width: 160px;	
	height: 48px;	
	z-index:30;
	overflow: hidden;
}
.n2_chip_fade_4
{  
	animation-name: n2_chip_fade;
  	animation-duration: 4.7s;
	animation-fill-mode: forwards;
}
.N2_LED_4
{
	position: absolute;
	top: 348px;
	left: 20px;
	width: 160px;	
	height: 48px;	
	z-index:30;
	overflow: hidden;
}
.LINK .N2_LED_4
{
	position: absolute;
	visibility: hidden;
}
.LINK:hover .N2_LED_4
{
	position: absolute;
	visibility: visible;
}



.N2_CHIP_5
{
	position: absolute;
	top: 417px;
	left: 56px;
	width: 160px;	
	height: 48px;	
	z-index:30;
	overflow: hidden;
}
.n2_chip_fade_5
{  
	animation-name: n2_chip_fade;
  	animation-duration: 5.1s;
	animation-fill-mode: forwards;
}
.N2_LED_5
{
	position: absolute;
	top: 423px;
	left: 20px;
	width: 160px;	
	height: 48px;	
	z-index:30;
	overflow: hidden;
}
.LINK .N2_LED_5
{
	position: absolute;
	visibility: hidden;
}
.LINK:hover .N2_LED_5
{
	position: absolute;
	visibility: visible;
}



.N2_CHIP_6
{
	position: absolute;
	top: 492px;
	left: 56px;
	width: 160px;	
	height: 48px;	
	z-index:30;
	overflow: hidden;
}
.n2_chip_fade_6
{  
	animation-name: n2_chip_fade;
  	animation-duration: 5.5s;
	animation-fill-mode: forwards;
}
.N2_LED_6
{
	position: absolute;
	top: 498px;
	left: 20px;
	width: 160px;	
	height: 48px;	
	z-index:30;
	overflow: hidden;
}
.LINK .N2_LED_6
{
	position: absolute;
	visibility: hidden;
}
.LINK:hover .N2_LED_6
{
	position: absolute;
	visibility: visible;
}



.N2_CHIP_7
{
	position: absolute;
	top: 567px;
	left: 56px;
	width: 160px;	
	height: 48px;	
	z-index:30;
	overflow: hidden;
}
.n2_chip_fade_7
{  
	animation-name: n2_chip_fade;
  	animation-duration: 5.9s;
	animation-fill-mode: forwards;
}
.N2_LED_7
{
	position: absolute;
	top: 573px;
	left: 20px;
	width: 160px;	
	height: 48px;	
	z-index:30;
	overflow: hidden;
}
.LINK .N2_LED_7
{
	position: absolute;
	visibility: hidden;
}
.LINK:hover .N2_LED_7
{
	position: absolute;
	visibility: visible;
}




/* #########################  TEXTBLOCK ######################### */

.TEXTBLOCK
{
	position: absolute;
	top: 0px;
	left: 290px;
	width: 1100px;
	height: 770px;	
	z-index:10;
	overflow: hidden;

}
@keyframes textblock_slide
{
   0%   {  transform:translateX(300%) 	}
   25%  {  transform:translateX(300%) 	}
   50%  {  transform:translateX(300%) 	}
   70%  {  transform:translateX(300%) 	}
   100% {  transform:translateX(0px)	}
}
.textblock_slide
{
   animation-name: textblock_slide;
   animation-duration: 4.5s;
   animation-fill-mode: forwards;
}
.textblock_slide_links
{
   animation-name: textblock_slide;
   animation-duration: 3.3s;
   animation-fill-mode: forwards;
}



/* #########################  DISPLAY ######################### */

.DISPLAY
{
	position: absolute;
	top: 77px;
	left: 394px;
	width: 914px;
	height: 616px;
	z-index:20;
	/* overflow: hidden; */
	
}
.DISPLAYTEXT_NEWS
{
	position: absolute;
	top: 10px;
	left: 10px;
	width: 904px;
	height: 606px;		
	z-index:20;
	overflow: auto;
}
.DISPLAYTEXT_MUSIC
{
	position: absolute;
	top: 5px;
	left: 10px;
	width: 904px;
	height: 606px;		
	z-index:20;
	overflow: hidden;
}
.DISPLAYTEXT_ALBUM
{
	position: absolute;
	top: 5px;
	left: 10px;
	width: 904px;
	height: 606px;		
	z-index:20;
	overflow: auto;
}
.DISPLAYTEXT_MIXES
{
	position: absolute;
	top: 10px;
	left: 10px;
	width: 904px;
	height: 606px;		
	z-index:20;
	overflow: hidden;
}
.DISPLAYTEXT_RAMA
{
	position: absolute;
	top: 10px;
	left: 10px;
	width: 904px;
	height: 606px;		
	z-index:20;
	overflow: hidden;
}
.DISPLAYTEXT_WIRUS
{
	position: absolute;
	top: 10px;
	left: 10px;
	width: 904px;
	height: 606px;		
	z-index:20;
	overflow: hidden;
}


.DISPLAYTEXT_INSTRUMENTS_TITLE
{
	position: absolute;
	top: 13px;
	left: 10px;
	width: 905px;
	height: 606px;
	/* letter-spacing: 5px;	 */
	z-index:20;
	overflow: hidden;
}
.DISPLAYTEXT_SYNCHRONIZER_XL
{
	position: absolute;
	top: 350px;
	left: 10px;
	width: 894px;
	height: 606px;		
	z-index:20;
	overflow: hidden;
}
.DISPLAYTEXT_OXYGENE
{
	position: absolute;
	top: 503px;
	left: 10px;
	width: 894px;
	height: 606px;		
	z-index:20;
	overflow: hidden;
}
.DISPLAYTEXT_SYNCHRONATOR
{
	position: absolute;
	top: 85px;
	left: 490px;
	width: 390px;
	height: 606px;		
	z-index:20;
	overflow: hidden;
}
.DISPLAYTEXT_MIQU
{
	position: absolute;
	top: 400px;
	left: 10px;
	width: 894px;
	height: 606px;		
	z-index:20;
	overflow: hidden;
}
.DISPLAYTEXT_FILTERIUM
{
	position: absolute;
	top: 510px;
	left: 10px;
	width: 894px;
	height: 606px;		
	z-index:20;
	overflow: hidden;
}
.VM_VIDEOS_MIQU
{
	position: absolute;
	top: 82px;
	left: 253px;
	width: 400px;
	height: 300px;	
	z-index:30;
	overflow: hidden;
}
.BUTTON_DOWNLOAD_INSTRUMENTS
{
	position: absolute;
	top: 570px;
	left: 769px;
	width: 130px;
	height: 30px;	
	z-index:50;
	overflow: hidden;
	opacity: 0.0;

}
.BUTTON_DOWNLOAD_INSTRUMENTS:hover
{
	top: 571px;
	left: 769px;
	width: 130px;
	height: 30px;
	opacity: 1.0;
}

.BUTTON_DOWNLOAD_PRESETS_1
{
	position: absolute;
	top: 76px;
	left: 106px;
	width: 250px;
	height: 160px;	
	z-index:50;
	overflow: hidden;
	opacity: 0.0;

}
.BUTTON_DOWNLOAD_PRESETS_1:hover
{
	top: 66px;
	left: 20px;
	width: 422px;
	height: 180px;
	opacity: 1.0;
}
.BUTTON_DOWNLOAD_PRESETS_2
{
	position: absolute;
	top: 76px;
	left: 558px;
	width: 250px;
	height: 160px;	
	z-index:50;
	overflow: hidden;
	opacity: 0.0;

}
.BUTTON_DOWNLOAD_PRESETS_2:hover
{
	top: 66px;
	left: 472px;
	width: 422px;
	height: 180px;
	opacity: 1.0;
}
.BUTTON_DOWNLOAD_PRESETS_3
{
	position: absolute;
	top: 380px;
	left: 106px;
	width: 250px;
	height: 160px;	
	z-index:50;
	overflow: hidden;
	opacity: 0.0;

}
.BUTTON_DOWNLOAD_PRESETS_3:hover
{
	top: 370px;
	left: 20px;
	width: 422px;
	height: 180px;
	opacity: 1.0;
}

.TRACK_DEMO
{
	position: absolute;
	top: 571px;
	left: 144px;
	width: 625px;
	height: 30px;
	z-index:20;
	overflow: hidden;
}
.PRESET_DEMO_01
{
	position: absolute;
	top: 263px;
	left: 25px;
	/* width: 280px; */ 	/* Mit Download Button  */ 
	width: 412px;
	height: 30px;
	z-index:20;
	overflow: hidden;
}
.PRESET_DEMO_02
{
	position: absolute;
	top: 263px;
	left: 477px;
	/* width: 280px; */ 	/* Mit Download Button  */ 
	width: 412px;
	height: 30px;
	z-index:20;
	overflow: hidden;
}
.PRESET_DEMO_03
{
	position: absolute;
	top: 566px;
	left: 25px;
	/* width: 280px; */ 	/* Mit Download Button  */ 
	width: 412px;
	height: 30px;
	z-index:20;
	overflow: hidden;
}
.PRESET_DEMO_04
{
	position: absolute;
	top: 566px;
	left: 477px;
	/* width: 280px; */ 	/* Mit Download Button  */ 
	width: 412px;
	height: 30px;
	z-index:20;
	overflow: hidden;
}

.DISPLAYTEXT_SYNTHEDIT_TOP
{
	position: absolute;
	top: 19px;
	left: 10px;
	width: 900px;
	height: 606px;
	/* letter-spacing: 5px;	 */
	z-index:20;
	overflow: hidden;
}
.DISPLAYTEXT_SYNTHEDIT_BOTTOM
{
	position: absolute;
	top: 490px;
	left: 5px;
	width: 905px;
	height: 606px;
	/* letter-spacing: 0px;	 */
	z-index:20;
	overflow: hidden;
}
.BUTTON_DOWNLOAD_SYNTHEDIT
{
	position: absolute;
	top: 581px;
	left: 392px;
	width: 130px;
	height: 30px;	
	z-index:50;
	overflow: hidden;
	opacity: 0.0;

}
.BUTTON_DOWNLOAD_SYNTHEDIT:hover
{
	top: 581px;
	left: 392px;
	width: 130px;
	height: 30px;
	opacity: 1.0;
}

.BUTTON_LINK_ART_VIDEO
{
	position: absolute;
	top: 576px;
	left: 392px;
	width: 130px;
	height: 30px;	
	z-index:50;
	overflow: hidden;
	opacity: 0.0;

}
.BUTTON_LINK_ART_VIDEO:hover
{
	top: 576px;
	left: 392px;
	width: 130px;
	height: 30px;
	opacity: 1.0;
} 

.DISPLAYTEXT_LINK_01
{
	position: absolute;
	top: 98px;
	left: 25px;
	width: 190px;
	height: 20px;		
	z-index:50;
	overflow: hidden;
}
.BUTTON_LINK_01
{
	position: absolute;
	top: 20px;
	left: 20px;
	width: 200px;
	height: 100px;	
	z-index:40;
	overflow: hidden;
	opacity: 0.0;
}
.BUTTON_LINK_01:hover
{
	opacity: 1.0;
}

.DISPLAYTEXT_LINK_02
{
	position: absolute;
	top: 98px;
	left: 249px;
	width: 190px;
	height: 20px;		
	z-index:50;
	overflow: hidden;
}
.BUTTON_LINK_02
{
	position: absolute;
	top: 20px;
	left: 244px;
	width: 200px;
	height: 100px;	
	z-index:40;
	overflow: hidden;
	opacity: 0.0;
}
.BUTTON_LINK_02:hover
{
	opacity: 1.0;
}

.DISPLAYTEXT_LINK_03
{
	position: absolute;
	top: 98px;
	left: 475px;
	width: 190px;
	height: 20px;		
	z-index:50;
	overflow: hidden;
}
.BUTTON_LINK_03
{
	position: absolute;
	top: 20px;
	left: 470px;
	width: 200px;
	height: 100px;	
	z-index:40;
	overflow: hidden;
	opacity: 0.0;
}
.BUTTON_LINK_03:hover
{
	opacity: 1.0;
}

.DISPLAYTEXT_LINK_04
{
	position: absolute;
	top: 98px;
	left: 700px;
	width: 190px;
	height: 20px;		
	z-index:50;
	overflow: hidden;
}
.BUTTON_LINK_04
{
	position: absolute;
	top: 20px;
	left: 694px;
	width: 200px;
	height: 100px;	
	z-index:40;
	overflow: hidden;
	opacity: 0.0;
}
.BUTTON_LINK_04:hover
{
	opacity: 1.0;
}

.DISPLAYTEXT_LINK_05
{
	position: absolute;
	top: 217px;
	left: 25px;
	width: 190px;
	height: 20px;		
	z-index:50;
	overflow: hidden;
}
.BUTTON_LINK_05
{
	position: absolute;
	top: 139px;
	left: 20px;
	width: 200px;
	height: 100px;	
	z-index:40;
	overflow: hidden;
	opacity: 0.0;
}
.BUTTON_LINK_05:hover
{
	opacity: 1.0;
}

.DISPLAYTEXT_LINK_06
{
	position: absolute;
	top: 217px;
	left: 249px;
	width: 190px;
	height: 20px;		
	z-index:50;
	overflow: hidden;
}
.BUTTON_LINK_06
{
	position: absolute;
	top: 139px;
	left: 244px;
	width: 200px;
	height: 100px;	
	z-index:40;
	overflow: hidden;
	opacity: 0.0;
}
.BUTTON_LINK_06:hover
{
	opacity: 1.0;
}

.DISPLAYTEXT_LINK_07
{
	position: absolute;
	top: 217px;
	left: 475px;
	width: 190px;
	height: 20px;		
	z-index:50;
	overflow: hidden;
}
.BUTTON_LINK_07
{
	position: absolute;
	top: 139px;
	left: 470px;
	width: 200px;
	height: 100px;	
	z-index:40;
	overflow: hidden;
	opacity: 0.0;
}
.BUTTON_LINK_07:hover
{
	opacity: 1.0;
}

.DISPLAYTEXT_LINK_08
{
	position: absolute;
	top: 217px;
	left: 700px;
	width: 190px;
	height: 20px;		
	z-index:50;
	overflow: hidden;
}
.BUTTON_LINK_08
{
	position: absolute;
	top: 139px;
	left: 694px;
	width: 200px;
	height: 100px;	
	z-index:40;
	overflow: hidden;
	opacity: 0.0;
}
.BUTTON_LINK_08:hover
{
	opacity: 1.0;
}

.DISPLAYTEXT_IMPRESSUM 
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 884px;
	height: 576px;		
	z-index:20;
	border: 10px solid #000;
	padding: 10px;
	overflow: auto;
}

/* #########################  TEXT ######################### */

h1
{
	font-family: 'commodore', sans-serif;
	/* letter-spacing: -1px; */
	color: rgba(250,220,120,1);
	text-shadow: 	
					1px 1px 0px rgba(0,0,0,1),
					1px -1px 0px rgba(0,0,0,1),
					-1px 1px 0px rgba(0,0,0,1),
					-1px -1px 0px rgba(0,0,0,1);
						
}
h2
{
	font-family: 'commodore', sans-serif;
	/* letter-spacing: -1px; */
	color: rgba(230,200,100,1);
	text-shadow: 	
					1px 1px 0px rgba(0,0,0,1),
					1px -1px 0px rgba(0,0,0,1),
					-1px 1px 0px rgba(0,0,0,1),
					-1px -1px 0px rgba(0,0,0,1);
					
}
h3
{
	font-family: 'commodore', sans-serif;
	/* letter-spacing: 0px; */
	color: rgba(270,250,200,1);
	text-shadow: 	
					1px 1px 0px rgba(0,0,0,1),
					1px -1px 0px rgba(0,0,0,1),
					-1px 1px 0px rgba(0,0,0,1),
					-1px -1px 0px rgba(0,0,0,1);
					
}
h4
{
	font-family: 'commodore', sans-serif;
	/* letter-spacing: 0px; */
	color: rgba(270,250,200,1);
	text-shadow: 	
					1px 1px 0px rgba(0,0,0,1),
					1px -1px 0px rgba(0,0,0,1),
					-1px 1px 0px rgba(0,0,0,1),
					-1px -1px 0px rgba(0,0,0,1);
					
}
p
{
	font-family: 'commodore', sans-serif;
	/* letter-spacing: -0.5px; */
	color: rgba(230,200,100,1);
	text-shadow: 	
					1px 1px 0px rgba(0,0,0,1),
					1px -1px 0px rgba(0,0,0,1),
					-1px 1px 0px rgba(0,0,0,1),
					-1px -1px 0px rgba(0,0,0,1);
}

.FONTSIZE_50
{
	font-size: 50px;
	font-family: 'commodore', sans-serif;
}
.FONTSIZE_40
{
	font-size: 40px;
	font-family: 'commodore', sans-serif;
}
.FONTSIZE_30
{
	font-size: 30px;
	font-family: 'commodore', sans-serif;
}
.FONTSIZE_25
{
	font-size: 25px;
	font-family: 'commodore', sans-serif;
}
.FONTSIZE_20
{
	font-size: 20px;
	font-family: 'commodore', sans-serif;
}
.FONTSIZE_18
{
	font-size: 18px;
	font-family: 'commodore', sans-serif;
}
.FONTSIZE_16
{
	font-size: 16px;
	font-family: 'commodore', sans-serif;
}
.FONTSIZE_15
{
	font-size: 15px;
	font-family: 'commodore', sans-serif;
}
.FONTSIZE_14
{
	font-size: 14px;
	font-family: 'commodore', sans-serif;
}
.FONTSIZE_12
{
	font-size: 12px;
	font-family: 'commodore', sans-serif;
}
.FONTSIZE_05
{
	font-size: 5px;
	font-family: 'commodore', sans-serif;
}
.FONTSIZE_03
{
	font-size: 3px;
	font-family: 'commodore', sans-serif;
}



@keyframes display_fade
{
   0%  	{opacity: 0;}
   70%  {opacity: 0;}
   85%  {opacity: 0;}
   100%	{opacity: 1;}
}
@keyframes display_scale
{
   0%  	{transform: scale3d(0.1, 0.01, 0.01);}
   95%  {transform: scale3d(0.1, 0.01, 0.01);}
   98%  {transform: scale3d(0.9, 0.01, 0.01);}
   100%	{transform: scale3d(1, 1, 1);}
}
@keyframes display_scale_music
{
   0%  	{transform: scale3d(0.1, 0.01, 0.01);}
   80%  {transform: scale3d(0.1, 0.01, 0.01);}
   85%  {transform: scale3d(0.9, 0.01, 0.01);}
   100%	{transform: scale3d(1, 1, 1);}
}
@keyframes display_scale_arts
{
   0%  	{transform: scale3d(0.1, 0.01, 0.01);}
   50%  {transform: scale3d(0.1, 0.01, 0.01);}
   75%  {transform: scale3d(0.9, 0.01, 0.01);}
   100%	{transform: scale3d(1, 1, 1);}
}
.display_anim
{
	animation:
	display_fade 5.5s,
	display_scale 6s;
	animation-fill-mode: forwards;
}
.display_anim_music
{
	animation:
	display_fade 2.2s,
	display_scale_music 3.0s;
	animation-fill-mode: forwards;
}
.display_anim_arts
{
	animation:
	display_fade 0.5s,
	display_scale_arts 1.0s;
	animation-fill-mode: forwards;
}
.display_anim_links
{
	animation:
	display_fade 4s,
	display_scale_music 4.5s;
	animation-fill-mode: forwards;
}

.DISPLAYSWITCH_L
{
	position: absolute;
	top: 454px;
	left: 316px;
	width: 34px;
	height: 44px;	
	z-index:20;
	overflow: hidden;
	opacity: 0.0;
}

.DISPLAYSWITCH_L:hover
{

	opacity: 1.0;
}

.DISPLAYSWITCH_R
{
	position: absolute;
	top: 454px;
	left: 1350px;
	width: 34px;
	height: 44px;	
	z-index:20;
	overflow: hidden;
	opacity: 0.0;
}

.DISPLAYSWITCH_R:hover
{

	opacity: 1.0;
}


/* ######################### MUSIC SINGLES ######################### */






/* #########################  MUSIC ALBUMS ######################### */

.HT_PLAYER_ALBUM
{
	position: absolute;
	top: 100px;
	left: 0px;
	width: 914px;
	height: 516px;	
	z-index:30;
	overflow: hidden;
}



/* #########################  MUSIC MIXES ######################### */

.MC_PLAYER_MIX_001
{
	position: absolute;
	top: 10px;
	left: 10px;
	width: 894px;
	height: 120px;	
	z-index:30;
	overflow: hidden;
}
.MC_PLAYER_TEXT_001 /* TEXT */
{
	position: absolute;
	top: 130px;
	left: 10px;
	z-index:20;
	overflow: hidden;
}
.MC_PLAYER_MIX_002
{
	position: absolute;
	top: 162px;
	left: 10px;
	width: 894px;
	height: 120px;	
	z-index:30;
	overflow: hidden;
}
.MC_PLAYER_TEXT_002 /* TEXT */
{
	position: absolute;
	top: 282px;
	left: 10px;
	z-index:20;
	overflow: hidden;
}
.MC_PLAYER_MIX_003
{
	position: absolute;
	top: 316px;
	left: 10px;
	width: 894px;
	height: 120px;	
	z-index:30;
	overflow: hidden;
}
.MC_PLAYER_TEXT_003 /* TEXT */
{
	position: absolute;
	top: 436px;
	left: 10px;
	z-index:20;
	overflow: hidden;
}
.MC_PLAYER_MIX_004
{
	position: absolute;
	top: 466px;
	left: 10px;
	width: 894px;
	height: 120px;	
	z-index:30;
	overflow: hidden;
}
.MC_PLAYER_TEXT_004 /* TEXT */
{
	position: absolute;
	top: 586px;
	left: 10px;
	z-index:20;
	overflow: hidden;
}
/* #########################  MUSIC VIDEOS ######################### */

.YT_MUSIC_VIDEOS
{
	position: absolute;
	top: 77px;
	left: 394px;
	width: 914px;
	height: 616px;	
	z-index:30;
	overflow: hidden;
}
.YT_MUSIC_VIDEOS_2
{
	position: absolute;
	top: 177px;
	left: 394px;
	width: 914px;
	height: 516px;	
	z-index:30;
	overflow: hidden;
}
.YT_ART_VIDEOS
{
	position: absolute;
	top: 10px;
	left: 10px;
	width: 894px;
	height: 556px;	
	z-index:30;
	overflow: hidden;
}
.YT_ART_VIDEOS_TEXT
{
	position: absolute;
	top: 0px;
	left: 10px;
	width: 894px;
	height: 120px;	
	z-index:30;
	overflow: hidden;
}

.YT_MUSIC_VIDEOS_TEXT
{
	position: absolute;
	top: 0px;
	left: 10px;
	width: 894px;
	height: 120px;	
	z-index:30;
	overflow: hidden;
}
.YT_MUSIC_VIDEOS_TEXT_2
{
	position: absolute;
	top: 35px;
	left: 10px;
	width: 894px;
	height: 120px;	
	z-index:30;
	overflow: hidden;
}

/* #########################  ARTS VIDEOS ######################### */

.YT_ARTS_VIDEOS
{
	position: absolute;
	top: 77px;
	left: 394px;
	width: 914px;
	height: 616px;	
	z-index:30;
	overflow: hidden;
}


.VM_ARTS_VIDEOS
{
	position: absolute;
	top: 77px;
	left: 394px;
	width: 914px;
	height: 616px;	
	z-index:30;
	overflow: hidden;
}

/* #########################  LINKS ######################### */


.LINKS
{
	position: absolute;
	top: 77px;
	left: 394px;
	width: 914px;
	height: 616px;	
	z-index:25;
	overflow: hidden;	
}



@keyframes link_fade {
  from 
  {
    opacity: 0;
	transform:translateX(9000%)	
  }

  95% 
  {
    opacity: 0;
	transform:translateX(9000%)
  }

  98% 
  {
    opacity: 0;
	transform:translateX(0%)
  }


  to 
  {
    opacity: 1;
  }
}
.link_fade
{
   animation-name: link_fade;
   animation-duration: 4.5s;
   animation-fill-mode: forwards;
}

@keyframes link_fade_2 {
  from 
  {

	transform:translateX(9000%)	
  }


  99% 
  {

	transform:translateX(9000%)
  }


  to 
  {
    transform:translateX(0%)
  }
}
.link_fade_2
{
   animation-name: link_fade_2;
   animation-duration: 3.0s;
   animation-fill-mode: forwards;
}

@keyframes link_fade_3 {
  from 
  {

	transform:translateX(9000%)	
  }


  99% 
  {

	transform:translateX(9000%)
  }


  to 
  {
    transform:translateX(0%)
  }
}
.link_fade_3
{
   animation-name: link_fade_3;
   animation-duration: 1.5s;
   animation-fill-mode: forwards;
}

/* #########################  PRESETS ######################### */

.PRESETS
{
	position: absolute;
	top: 77px;
	left: 394px;
	width: 914px;
	height: 616px;	
	z-index:25;
	overflow: hidden;	
}

.PST_TILE_01
{
	position: absolute;
	top: 70px;
	left: 10px;
	width: 200px;
	height: 200px;	
	z-index:20;
	overflow: hidden;
}
.PST_TILE_02
{
	position: absolute;
	top: 70px;
	left: 241px;
	width: 200px;
	height: 200px;	
	z-index:20;
	overflow: hidden;
}
.PST_TILE_03
{
	position: absolute;
	top: 70px;
	left: 474px;
	width: 200px;
	height: 200px;	
	z-index:20;
	overflow: hidden;
}
.PST_TILE_04
{
	position: absolute;
	top: 70px;
	left: 705px;
	width: 200px;
	height: 200px;	
	z-index:20;
	overflow: hidden;
}



.PLAYERWINDOW
{
	position: absolute;
	top: 100px;
	left: 0px;
	width: 914px;
	height: 616px;
	z-index:20;
	overflow: hidden;
	/* background-color: rgba(100,100,200,1); */
}

.TRACK_001
{
	position: absolute;
	top: 10px;
	left: 10px;
	width: 445px;
	height: 30px;
	z-index:20;
	overflow: hidden;
}
.TRACK_002
{
	position: absolute;
	top: 60px;
	left: 10px;
	width: 445px;
	height: 30px;
	z-index:20;
	overflow: hidden;
}
.TRACK_003
{
	position: absolute;
	top: 110px;
	left: 10px;
	width: 445px;
	height: 30px;
	z-index:20;
	overflow: hidden;
}
.TRACK_004
{
	position: absolute;
	top: 160px;
	left: 10px;
	width: 445px;
	height: 30px;
	z-index:20;
	overflow: hidden;
}
.TRACK_005
{
	position: absolute;
	top: 210px;
	left: 10px;
	width: 445px;
	height: 30px;
	z-index:20;
	overflow: hidden;
}
.TRACK_006
{
	position: absolute;
	top: 260px;
	left: 10px;
	width: 445px;
	height: 30px;
	z-index:20;
	overflow: hidden;
}
.TRACK_007
{
	position: absolute;
	top: 310px;
	left: 10px;
	width: 445px;
	height: 30px;
	z-index:20;
	overflow: hidden;
}
.TRACK_008
{
	position: absolute;
	top: 360px;
	left: 10px;
	width: 445px;
	height: 30px;
	z-index:20;
	overflow: hidden;
}
.TRACK_009
{
	position: absolute;
	top: 410px;
	left: 10px;
	width: 445px;
	height: 30px;
	z-index:20;
	overflow: hidden;
}
.TRACK_010
{
	position: absolute;
	top: 460px;
	left: 10px;
	width: 445px;
	height: 30px;
	z-index:20;
	overflow: hidden;
}