@font-face {
  font-family: 'MetDemo';
  font-weight: normal;
  font-style: normal; 
  src: url('fonts/notes.svg#MetDemo') format(svg);
}


#visualizer  #visHolder 
{
  position: absolute;
  width: 1280px;
  height: 720px;
  left: 0px;
  top: 0px;
}


/***************************************************
****************** TITLES **************************
***************************************************/

#visualizer #titles 
{
  position: absolute;
  width: 1280px;
  height: 720px;
  left: 0px;
  top: 0px;
  background-color: #d7d7d7;	
}

#visualizer #red_1
{
  position: absolute;
  width: 270px;
  height: 50px;
  left: 504px;
  top: 23px;

  opacity: 0;	

}

#visualizer #red_2
{
  position: absolute;
  width: 270px;
  height: 50px;
  left: 504px;
  top: 112px;

  opacity: 0;	

}

#visualizer #red_3
{
  position: absolute;
  width: 270px;
  height: 50px;
  left: 504px;
  top: 201px;

  opacity: 0;	

}

#visualizer #red_4
{
  position: absolute;
  width: 270px;
  height: 50px;
  left: 504px;
  top: 290px;

  opacity: 0;	

}

#visualizer #red_5
{
  position: absolute;
  width: 270px;
  height: 50px;
  left: 504px;
  top: 380px;

  opacity: 0;	

}

#visualizer #red_6
{
  position: absolute;
  width: 270px;
  height: 50px;
  left: 504px;
  top: 466px;

  opacity: 0;	

}

#visualizer #red_7
{
  position: absolute;
  width: 270px;
  height: 50px;
  left: 504px;
  top: 557px;

  opacity: 0;	

}

#visualizer #red_8
{
  position: absolute;
  width: 270px;
  height: 50px;
  left: 504px;
  top: 647px;

  opacity: 0;	

}

#visualizer #back
{
  position: absolute;
  width: 270px;
  height: 50px;
  left: 0px;
  top: 0px;
  background: #d3241f;
  
 // -webkit-user-select:none; 
 // -webkit-animation-iteration-count: infinite;
 // -webkit-animation-name: 'back_animation';
 // -webkit-animation-duration: .6s ;  
 // -webkit-animation-timing-function: ease-out ; 
 // -webkit-animation-delay: 0s;	

}

@-webkit-keyframes 'back_animation' 
{
   	0%   	{ -webkit-transform: scaleY(1);   }
    5%   	{ -webkit-transform: scaleY(1);    }
    45% 	{ -webkit-transform: scaleY(1);    }
    55% 	{ -webkit-transform: scaleY(1.1);   }
    95% 	{ -webkit-transform: scaleY(1);    }
    100% 	{ -webkit-transform: scaleY(1);    }
}


/*
#visualizer #red
{
  position: absolute;
  width: 272px;
  height: 230px;
  left: 504px;
  top: 23px;
  background: url(../images/visualize/titles/red.png);
	

  -webkit-user-select:none; 
  -webkit-animation-iteration-count: 1;
  -webkit-animation-name: 'red_animation';
  -webkit-animation-duration: 30s ;  
  -webkit-animation-timing-function: ease-out ; 
  -webkit-animation-delay: 0s;

}




@-webkit-keyframes 'red_animation' 
{
    0%   	{ top: 23px ;    }
    2% 		{ top: 468px ;   }
    4% 		{ top: 23px ;    }
	6%   	{ top: 468px ;   }
    8% 		{ top: 23px ;    }
    10% 	{ top: 468px ;   }
	12%   	{ top: 23px ;    }
    14% 	{ top: 468px ;   }
    16% 	{ top: 23px ;    }
	18%   	{ top: 468px ;   }
    20% 	{ top: 23px ;    }
    22% 	{ top: 468px ;   }
	24%   	{ top: 23px ;    }
    26% 	{ top: 468px ;   }
    28% 	{ top: 23px ;    }
	30%   	{ top: 468px ;   }
    32% 	{ top: 23px ;    }
    34% 	{ top: 468px ;   }
    36% 	{ top: 23px ;    }
	38%   	{ top: 468px ;   }
    40% 	{ top: 23px ;    }
    42% 	{ top: 468px ;   }
	44%   	{ top: 23px ;    }
    46% 	{ top: 468px ;   }
    48% 	{ top: 23px ;    }
	50%   	{ top: 468px ;   }
    52% 	{ top: 23px ;    }
    54% 	{ top: 468px ;   }
	56%   	{ top: 23px ;    }
    58% 	{ top: 468px ;   }
    60% 	{ top: 23px ;    }
	62%   	{ top: 468px ;   }
    64% 	{ top: 23px ;    }
	68%   	{ top: 468px ;   }
    70% 	{ top: 23px ;    }
    72% 	{ top: 468px ;   }
	74%   	{ top: 23px ;    }
    76% 	{ top: 468px ;   }
    78% 	{ top: 23px ;    }
	80%   	{ top: 468px ;   }
    82% 	{ top: 23px ;    }
    84% 	{ top: 468px ;   }
    86% 	{ top: 23px ;    }
	88%   	{ top: 468px ;   }
    90% 	{ top: 23px ;    }
    92% 	{ top: 468px ;   }
	94%   	{ top: 23px ;    }
    96% 	{ top: 468px ;   }
    100% 	{ top: 23px ;    }

}
*/

#visualizer #titles #line_1
{
  position: absolute;
  width: 1902px;
  height: 35px;
  left: 0px;
  top: 33px;
  background: url(../images/visualize/titles/line_1.png);	
  


}

@-webkit-keyframes 'line_1_animation' 
{
    0%   	{ -webkit-transform: translateX(0px);    }
    50% 	{ -webkit-transform: translateX(-622px);   }
    100% 	{ -webkit-transform: translateX(0px);   }
}

#visualizer #titles #line_2
{
  position: absolute;
  width: 3451px;
  height: 35px;
  left: -2171px;
  top: 122px;
  background: url(../images/visualize/titles/line_2.png);	


}

@-webkit-keyframes 'line_2_animation' 
{
    0%   	{ -webkit-transform: translateX(0px);    }
    50% 	{ -webkit-transform: translateX(2171px);   }
    100% 	{ -webkit-transform: translateX(0px);   }
}

#visualizer #titles #line_3
{
  position: absolute;
  width: 3899px;
  height: 35px;
  left: 0px;
  top: 211px;
  background: url(../images/visualize/titles/line_3.png);	


}

@-webkit-keyframes 'line_3_animation' 
{
    0%   	{ -webkit-transform: translateX(0px);    }
    50% 	{ -webkit-transform: translateX(-2619px);   }
    100% 	{ -webkit-transform: translateX(0px);   }
}

#visualizer #titles #line_4
{
  position: absolute;
  width: 3821px;
  height: 33px;
  left: -2541px;
  top: 300px;
  background: url(../images/visualize/titles/line_4.png);	


}

@-webkit-keyframes 'line_4_animation' 
{
    0%   	{ -webkit-transform: translateX(0px);    }
    50% 	{ -webkit-transform: translateX(2541px);   }
    100% 	{ -webkit-transform: translateX(0px);   }
}

#visualizer #titles #line_5
{
  position: absolute;
  width: 3476px;
  height: 35px;
  left: 0px;
  top: 389px;
  background: url(../images/visualize/titles/line_5.png);	


}

@-webkit-keyframes 'line_5_animation' 
{
    0%   	{ -webkit-transform: translateX(0px);    }
    50% 	{ -webkit-transform: translateX(-2541px);   }
    100% 	{ -webkit-transform: translateX(0px);   }
}

#visualizer #titles #line_6
{
  position: absolute;
  width: 3663px;
  height: 33px;
  left: -2383px;
  top: 477px;
  background: url(../images/visualize/titles/line_6.png);	


}

@-webkit-keyframes 'line_6_animation' 
{
    0%   	{ -webkit-transform: translateX(0px);    }
    50% 	{ -webkit-transform: translateX(2383px);   }
    100% 	{ -webkit-transform: translateX(0px);   }
}

#visualizer #titles #line_7
{
  position: absolute;
  width: 2945px;
  height: 33px;
  left: 0px;
  top: 567px;
  background: url(../images/visualize/titles/line_7.png);	


}

@-webkit-keyframes 'line_7_animation' 
{
    0%   	{ -webkit-transform: translateX(0px);    }
    50% 	{ -webkit-transform: translateX(-1665px);   }
    100% 	{ -webkit-transform: translateX(0px);   }
}

#visualizer #titles #line_8
{
  position: absolute;
  width: 2267px;
  height: 33px;
  left: -987px;
  top: 656px;
  background: url(../images/visualize/titles/line_8.png);	


}

@-webkit-keyframes 'line_8_animation' 
{
    0%   	{ -webkit-transform: translateX(0px);    }
    50% 	{ -webkit-transform: translateX(987px);   }
    100% 	{ -webkit-transform: translateX(0px);   }
}





/**************************************************
****************** WAVES **************************
**************************************************/

#visualizer #waves 
{
  position: absolute;
  width: 1280px;
  height: 720px;
  left: 0px;
  top: 0px;
  background: url(../images/visualize/waves/waves_bg.png);	

}


#visualizer #lights 
{
  position: absolute;
  width: 269px;
  height: 245px;
  left: 102px;
  top: 151px;
  background: url(../images/visualize/waves/waves_light.png);	

  -webkit-user-select:none; 
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: 'lights_animation';
  -webkit-animation-duration: .6s ;  
  -webkit-animation-timing-function: linear ; 
  -webkit-animation-delay: 0s;
  
}

@-webkit-keyframes 'lights_animation' 
{
    0%   	{ opacity: 0;   }
    5%   	{ opacity: 1;   }
    45% 	{ opacity: 1;   }
    55% 	{ opacity: 1;   }
    95% 	{ opacity: 1;   }
    100% 	{ opacity: 0;   }
}



#visualizer #waves_holder
{
  position: absolute;
  width: 1079px;
  height: 495px;
  left: 102px;
  top: 149px;
  overflow: hidden;

 -webkit-user-select:none; 
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: 'waves_bounce_animation';
  -webkit-animation-duration: .6s ;  
  -webkit-animation-timing-function: linear ; 
  -webkit-animation-delay: 0s;
}

@-webkit-keyframes 'waves_bounce_animation' 
{
    0%   	{ -webkit-transform: scaleY(1);   }
    5%   	{ -webkit-transform: scaleY(1);    }
    45% 	{ -webkit-transform: scaleY(1);    }
    55% 	{ -webkit-transform: scaleY(1.1);   }
    95% 	{ -webkit-transform: scaleY(1);    }
    100% 	{ -webkit-transform: scaleY(1);    }
}


#visualizer #wave_1
{
  position: absolute;
  width: 2166px;
  height: 495px;
  left: 0px;
  top: 20px;

  -webkit-user-select:none; 
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: 'wave_1_animation';
  -webkit-animation-duration: 10s ;  
  -webkit-animation-timing-function: linear ; 
  -webkit-animation-delay: 0s;

}

@-webkit-keyframes 'wave_1_animation' 
{
    0%   	{ -webkit-transform: translateX(0px);   }
    100% 	{ -webkit-transform: translateX(-1083px);   }
}

#visualizer #wave_1 #wave_1_1
{
  position: absolute;
  width: 361px;
  height: 452px;
  left: 0px;
  top: 0px;
  background: url(../images/visualize/waves/wave_element_1.png);	
}

#visualizer #wave_1 #wave_1_2
{
  position: absolute;
  width: 361px;
  height: 452px;
  left: 361px;
  top: 0px;
  background: url(../images/visualize/waves/wave_element_1.png);	
}

#visualizer #wave_1 #wave_1_3
{
  position: absolute;
  width: 361px;
  height: 452px;
  left: 722px;
  top: 0px;
  background: url(../images/visualize/waves/wave_element_1.png);	
}

#visualizer #wave_1 #wave_1_4
{
  position: absolute;
  width: 361px;
  height: 452px;
  left: 1083px;
  top: 0px;
  background: url(../images/visualize/waves/wave_element_1.png);	
}

#visualizer #wave_1 #wave_1_5
{
  position: absolute;
  width: 361px;
  height: 452px;
  left: 1444px;
  top: 0px;
  background: url(../images/visualize/waves/wave_element_1.png);	
}
#visualizer #wave_1 #wave_1_6
{
  position: absolute;
  width: 361px;
  height: 452px;
  left: 1805px;
  top: 0px;
  background: url(../images/visualize/waves/wave_element_1.png);	
}


#visualizer #wave_2
{
  position: absolute;
  width: 2166px;
  height: 495px;
  left: 0px;
  top: 147px;

  -webkit-user-select:none; 
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: 'wave_2_animation';
  -webkit-animation-duration: 5s ;  
  -webkit-animation-timing-function: linear ; 
  -webkit-animation-delay: 0s;

}

@-webkit-keyframes 'wave_2_animation' 
{
    0%   	{ -webkit-transform: translateX(0px);   }
    100% 	{ -webkit-transform: translateX(-1098px);   }
}

#visualizer #wave_2 #wave_2_1
{
  position: absolute;
  width: 549px;
  height: 202px;
  left: 0px;
  top: 0px;
  background: url(../images/visualize/waves/wave_element_2.png);	
}

#visualizer #wave_2 #wave_2_2
{
  position: absolute;
  width: 549px;
  height: 202px;
  left: 549px;
  top: 0px;
  background: url(../images/visualize/waves/wave_element_2.png);	
}

#visualizer #wave_2 #wave_2_3
{
  position: absolute;
  width: 549px;
  height: 202px;
  left: 1098px;
  top: 0px;
  background: url(../images/visualize/waves/wave_element_2.png);	
}

#visualizer #wave_2 #wave_2_4
{
  position: absolute;
  width: 549px;
  height: 202px;
  left: 1647px;
  top: 0px;
  background: url(../images/visualize/waves/wave_element_2.png);	
}


#visualizer #wave_3
{
  position: absolute;
  width: 2128px;
  height: 495px;
  left: 0px;
  top: 195px;

  -webkit-user-select:none; 
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: 'wave_2_animation';
  -webkit-animation-duration: 15s ;  
  -webkit-animation-timing-function: linear ; 
  -webkit-animation-delay: 0s;

}

@-webkit-keyframes 'wave_2_animation' 
{
    0%   	{ -webkit-transform: translateX(0px);   }
    100% 	{ -webkit-transform: translateX(-1096px);   }
}

#visualizer #wave_3 #wave_3_1
{
  position: absolute;
  width: 274px;
  height: 102px;
  left: 0px;
  top: 0px;
  background: url(../images/visualize/waves/wave_element_3.png);	
}

#visualizer #wave_3 #wave_3_2
{
  position: absolute;
  width: 274px;
  height: 102px;
  left: 274px;
  top: 0px;
  background: url(../images/visualize/waves/wave_element_3.png);	
}

#visualizer #wave_3 #wave_3_3
{
  position: absolute;
  width: 274px;
  height: 102px;
  left: 548px;
  top: 0px;
  background: url(../images/visualize/waves/wave_element_3.png);	
}

#visualizer #wave_3 #wave_3_4
{
  position: absolute;
  width: 274px;
  height: 102px;
  left: 822px;
  top: 0px;
  background: url(../images/visualize/waves/wave_element_3.png);	
}

#visualizer #wave_3 #wave_3_5
{
  position: absolute;
  width: 274px;
  height: 102px;
  left: 1096px;
  top: 0px;
  background: url(../images/visualize/waves/wave_element_3.png);	
}
#visualizer #wave_3 #wave_3_6
{
  position: absolute;
  width: 274px;
  height: 102px;
  left: 1370px;
  top: 0px;
  background: url(../images/visualize/waves/wave_element_3.png);	
}

#visualizer #wave_3 #wave_3_7
{
  position: absolute;
  width: 274px;
  height: 102px;
  left: 1644px;
  top: 0px;
  background: url(../images/visualize/waves/wave_element_3.png);	
}
#visualizer #wave_3 #wave_3_8
{
  position: absolute;
  width: 274px;
  height: 102px;
  left: 1918px;
  top: 0px;
  background: url(../images/visualize/waves/wave_element_3.png);	
}



/**************************************************
****************** PUZZLE **************************
**************************************************/

#visualizer #puzzle
{
	
  position: absolute;
  width: 1280px;
  height: 720px;
  left: 0px;
  top: 0px;

}


#visualizer #puzzle #piece_1
{	
  position: absolute;
  width: 330px;
  height: 216px;
  left: 0px;
  top: 0px;
  background: url(../images/visualize/puzzle/image_01_1.png);
}

#visualizer #puzzle #piece_2
{	
  position: absolute;
  width: 330px;
  height: 288px;
  left: 0px;
  top: 216px;
  background: url(../images/visualize/puzzle/image_01_2.png);
}

#visualizer #puzzle #piece_3
{	
  position: absolute;
  width: 330px;
  height: 216px;
  left: 0px;
  top: 504px;
  background: url(../images/visualize/puzzle/image_01_3.png);
}

#visualizer #puzzle #piece_4
{	
  position: absolute;
  width: 620px;
  height: 97px;
  left: 330px;
  top: 0px;
  background: url(../images/visualize/puzzle/image_01_4.png);
}

#visualizer #puzzle #piece_5
{	
  position: absolute;
  width: 620px;
  height: 119px;
  left: 330px;
  top: 97px;
  background: url(../images/visualize/puzzle/image_01_5.png);
}

#visualizer #puzzle #piece_6
{	
  position: absolute;
  width: 620px;
  height: 85px;
  left: 330px;
  top: 216px;
  background: url(../images/visualize/puzzle/image_01_6.png);
}

#visualizer #puzzle #piece_7
{	
  position: absolute;
  width: 620px;
  height: 119px;
  left: 330px;
  top: 301px;
  background: url(../images/visualize/puzzle/image_01_7.png);
}

#visualizer #puzzle #piece_8
{	
  position: absolute;
  width: 620px;
  height: 84px;
  left: 330px;
  top: 420px;
  background: url(../images/visualize/puzzle/image_01_8.png);
}

#visualizer #puzzle #piece_9
{	
  position: absolute;
  width: 620px;
  height: 119px;
  left: 330px;
  top: 504px;
  background: url(../images/visualize/puzzle/image_01_9.png);
}

#visualizer #puzzle #piece_10
{	
  position: absolute;
  width: 620px;
  height: 97px;
  left: 330px;
  top: 623px;
  background: url(../images/visualize/puzzle/image_01_10.png);
}

#visualizer #puzzle #piece_11
{	
  position: absolute;
  width: 330px;
  height: 216px;
  left: 950px;
  top: 0px;
  background: url(../images/visualize/puzzle/image_01_11.png);
}

#visualizer #puzzle #piece_12
{	
  position: absolute;
  width: 330px;
  height: 288px;
  left: 950px;
  top: 216px;
  background: url(../images/visualize/puzzle/image_01_12.png);
}

#visualizer #puzzle #piece_13
{	
  position: absolute;
  width: 330px;
  height: 216px;
  left: 950px;
  top: 504px;
  background: url(../images/visualize/puzzle/image_01_13.png);
}


#visualizer #puzzle #piece_1_b
{	
  position: absolute;
  width: 330px;
  height: 216px;
  left: 0px;
  top: 0px;
  background: url(../images/visualize/puzzle/image_02_1.png);
  opacity: 0;
}

#visualizer #puzzle #piece_2_b
{	
  position: absolute;
  width: 330px;
  height: 288px;
  left: 0px;
  top: 216px;
  background: url(../images/visualize/puzzle/image_02_2.png);
  opacity: 0;
}

#visualizer #puzzle #piece_3_b
{	
  position: absolute;
  width: 330px;
  height: 216px;
  left: 0px;
  top: 504px;
  background: url(../images/visualize/puzzle/image_02_3.png);
  opacity: 0;
}

#visualizer #puzzle #piece_4_b
{	
  position: absolute;
  width: 620px;
  height: 97px;
  left: 330px;
  top: 0px;
  background: url(../images/visualize/puzzle/image_02_4.png);
  opacity: 0;
}

#visualizer #puzzle #piece_5_b
{	
  position: absolute;
  width: 620px;
  height: 119px;
  left: 330px;
  top: 97px;
  background: url(../images/visualize/puzzle/image_02_5.png);
  opacity: 0;
}

#visualizer #puzzle #piece_6_b
{	
  position: absolute;
  width: 620px;
  height: 85px;
  left: 330px;
  top: 216px;
  background: url(../images/visualize/puzzle/image_02_6.png);
  opacity: 0;
}

#visualizer #puzzle #piece_7_b
{	
  position: absolute;
  width: 620px;
  height: 119px;
  left: 330px;
  top: 301px;
  background: url(../images/visualize/puzzle/image_02_7.png);
  opacity: 0;
}

#visualizer #puzzle #piece_8_b
{	
  position: absolute;
  width: 620px;
  height: 84px;
  left: 330px;
  top: 420px;
  background: url(../images/visualize/puzzle/image_02_8.png);
  opacity: 0;
}

#visualizer #puzzle #piece_9_b
{	
  position: absolute;
  width: 620px;
  height: 119px;
  left: 330px;
  top: 504px;
  background: url(../images/visualize/puzzle/image_02_9.png);
  opacity: 0;
}

#visualizer #puzzle #piece_10_b
{	
  position: absolute;
  width: 620px;
  height: 97px;
  left: 330px;
  top: 623px;
  background: url(../images/visualize/puzzle/image_02_10.png);
  opacity: 0;
}

#visualizer #puzzle #piece_11_b
{	
  position: absolute;
  width: 330px;
  height: 216px;
  left: 950px;
  top: 0px;
  background: url(../images/visualize/puzzle/image_02_11.png);
  opacity: 0;
}

#visualizer #puzzle #piece_12_b
{	
  position: absolute;
  width: 330px;
  height: 288px;
  left: 950px;
  top: 216px;
  background: url(../images/visualize/puzzle/image_02_12.png);
  opacity: 0;
}

#visualizer #puzzle #piece_13_b
{	
  position: absolute;
  width: 330px;
  height: 216px;
  left: 950px;
  top: 504px;
  background: url(../images/visualize/puzzle/image_02_13.png);
  opacity: 0;
}


/*****************************************
******* STANDARD ANIMATIONS   ************
*****************************************/


@-webkit-keyframes 'fade_in' 
{
    0%   	{ opacity: 0;    }
    100% 	{ opacity: 1;    }
}

@-webkit-keyframes 'fade_out' {
    0%   	{ opacity: 1;    }
    100% 	{ opacity: 0;    }
}