/*
#main {

    display: block;
    position: relative;
    overflow: auto;
    height: 100%;

}
*/

#animated_source {
  top: 20%;
  display: block;
  position: relative;
  //width: 600px;
  margin: 0 auto;
  left: 0;
  right: 0;
  transform: scale(1.0);
}

/* Photonen */

.red_gradient {
    height: 20px;
    width: 20px;
    background-image: radial-gradient(red, #fff0, #fff0);
}

.blue_gradient {
    height: 20px;
    width: 20px;
    background-image: radial-gradient(blue, #fff0, #fff0);
}
 
#animated_source_photon_blue_1 {
	position: absolute;
	top: 30px;
	left: 4%;
  pointer-events:none;
}
 
#animated_source_photon_blue_2 {
	position: absolute;
	top: 30px;
	left: 4%;
  pointer-events:none;
}

#animated_source_photon_red_1 {
	position: absolute;
	top: 30px;
	left: 4%;
  pointer-events:none;
  transform: rotate(-9deg);
}

#animated_source_photon_red_2 {
	position: absolute;
	top: 30px;
	left: 4%;
  pointer-events:none;
  transform: rotate(9deg);
}

#animated_source_photon_red_3 {
	position: absolute;
	top: 30px;
	left: 4%;
  pointer-events:none;
  transform: rotate(-9deg);
}

#animated_source_photon_red_4 {
	position: absolute;
	top: 30px;
	left: 4%;
  pointer-events:none;
  transform: rotate(9deg);
}

  

 

/* optische Elemente */

.animated_source_element {
	display: block;
	width: 6%;
	height: 70px;
	border: 1px solid #333;
	border-radius: 3px;
	text-align: center;
	font-weight: 500;
	font-size: 13px;
	position: relative;
	float: left;
  background-color: rgba(255,255,255,0.7);
}

.animated_source_element:hover .info {
  color: #fff;
  background: #00aeef;
}
  
#animated_source_laser {
	height: 45px;
	width: 48px;
	top: 14px;
	background-color: #fff;
	z-index: 9;
}
  
#animated_source_l2 {
	left: 15%;
  cursor: pointer;
  position: absolute;
}
  
#animated_source_l2:hover {
   background-color: rgba(200,200,200,0.7);
}

#animated_source_YVO_1 {
	left: 29%;
  cursor: pointer;
  position: absolute;
}

#animated_source_YVO_1 .info {
//  color: #fff;
//  background: #00aeef;
}
  
#animated_source_YVO_1:hover {
   background-color: rgba(200,200,200,0.7);
}
  
#animated_source_YVO_2 {
	left: 73%;
  position: absolute;
  cursor: pointer;
}
  
#animated_source_YVO_2:hover {
   background-color: rgba(200,200,200,0.7);
}
  
#animated_source_BBO_1 {
  position: absolute;
  cursor: pointer;
	left: 49%;
}

#animated_source_BBO_1:hover {
   background-color: rgba(200,200,200,0.7);
}
  
#animated_source_BBO_2 {
  position: absolute;
	left: 56%;
}


.animated_source_yvo1 {
  animation: animated_source_photon_blue_1_yvo1_animation 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  
}

.fiber {
    display: block;
    border: 1px solid;
    width: 28px;
    height: 7px;
    left: 87%;
    border-radius: 3px 0px 0px 3px;
    position: absolute;
}

#fibter1 {
    top: 7px;
    transform: rotate(-6deg);
}

#fibter2 {
    top: 64px;
    transform: rotate(6deg);
}

#fiber1_svg {
    top: -3px;
    left: 90.5%;
    display: block;
    position: absolute;
}

#fiber2_svg {
    display: block;
    position: absolute;
    top: 57px;
    left: 90.5%;
}

#fiber_description {
    font-size: 13px;
    font-weight: 500;
    position: relative;
    display: block;
    top: 20px;
    left: 102%;
    transform: rotate(6deg);
}



/* alle Ellemente */
.animated_source_photon_blue_1_all {
  animation: animated_source_photon_blue_1_animation_all var(--animation_duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.animated_source_photon_blue_2_all {
  animation: animated_source_photon_blue_2_animation_all var(--animation_duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.animated_source_photon_red_1_all {
  animation: animated_source_photon_red_1_animation_all var(--animation_duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.animated_source_photon_red_2_all {
  animation: animated_source_photon_red_2_animation_all var(--animation_duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.animated_source_photon_red_3_all {
  animation: animated_source_photon_red_3_animation_all var(--animation_duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.animated_source_photon_red_4_all {
  animation: animated_source_photon_red_4_animation_all var(--animation_duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.animated_source_bbo_1_all {
  animation: animated_source_bbo_1_animation_all var(--animation_duration);
  animation-iteration-count: infinite;
 // animation-timing-function: linear;
}

.animated_source_bbo_2_all {
  animation: animated_source_bbo_2_animation_all var(--animation_duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}



/* nur 1x BBO */

.animated_source_photon_blue_1_1xbbo {
  display: none;
  animation: none;
  //animation: animated_source_photon_blue_1_animation_1xbbo var(--animation_duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.animated_source_photon_blue_2_1xbbo {
  animation: animated_source_photon_blue_2_animation_1xbbo var(--animation_duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.animated_source_photon_red_1_1xbbo {
  display: none;
  animation: none;
  //  animation: animated_source_photon_red_1_animation_1xbbo var(--animation_duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.animated_source_photon_red_2_1xbbo {
  display: none;
  animation: none;
  //  animation: animated_source_photon_red_2_animation_1xbbo var(--animation_duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.animated_source_photon_red_3_1xbbo {
  animation: animated_source_photon_red_3_animation_1xbbo var(--animation_duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.animated_source_photon_red_4_1xbbo {
  animation: animated_source_photon_red_4_animation_1xbbo var(--animation_duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.animated_source_bbo_1_1xbbo {
  animation: none;
  //animation: animated_source_bbo_1_animation_1xbbo var(--animation_duration);
  animation-iteration-count: infinite;
 // animation-timing-function: linear;
}

.animated_source_bbo_2_1xbbo {
  animation: animated_source_bbo_2_animation_1xbbo var(--animation_duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}


/* nur 2x BBO */

.animated_source_photon_blue_1_2xbbo {
  animation: none;
  display: none;
  //  animation: animated_source_photon_blue_1_animation_2xbbo var(--animation_duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.animated_source_photon_blue_2_2xbbo {
  animation: animated_source_photon_blue_2_animation_2xbbo var(--animation_duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.animated_source_photon_red_1_2xbbo {
  animation: none;
  display: none;
  //  animation: animated_source_photon_red_1_animation_2xbbo var(--animation_duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.animated_source_photon_red_2_2xbbo {
  animation: none;
  display: none;
  //  animation: animated_source_photon_red_2_animation_2xbbo var(--animation_duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.animated_source_photon_red_3_2xbbo {
  animation: animated_source_photon_red_3_animation_2xbbo var(--animation_duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.animated_source_photon_red_4_2xbbo {
  animation: animated_source_photon_red_4_animation_2xbbo var(--animation_duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.animated_source_bbo_1_2xbbo {
  animation: none;
  animation: animated_source_bbo_1_animation_2xbbo var(--animation_duration);
  animation-iteration-count: infinite;
 // animation-timing-function: linear;
}

.animated_source_bbo_2_2xbbo {
  animation: animated_source_bbo_2_animation_2xbbo var(--animation_duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}






/* nur 2x BBO & l2 */

.animated_source_photon_blue_1_l2 {
  animation: animated_source_photon_blue_1_animation_l2 var(--animation_duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.animated_source_photon_blue_2_l2 {
  animation: animated_source_photon_blue_2_animation_l2 var(--animation_duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.animated_source_photon_red_1_l2 {
  animation: animated_source_photon_red_1_animation_l2 var(--animation_duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.animated_source_photon_red_2_l2 {
  animation: animated_source_photon_red_2_animation_l2 var(--animation_duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.animated_source_photon_red_3_l2 {
  animation: animated_source_photon_red_3_animation_l2 var(--animation_duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.animated_source_photon_red_4_l2 {
  animation: animated_source_photon_red_4_animation_l2 var(--animation_duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.animated_source_bbo_1_l2 {
  animation: animated_source_bbo_1_animation_l2 var(--animation_duration);
  animation-iteration-count: infinite;
 // animation-timing-function: linear;
}

.animated_source_bbo_2_l2 {
  animation: animated_source_bbo_2_animation_l2 var(--animation_duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}





.animated_source_bbo_1 {
  animation: animated_source_bbo_1_animation var(--animation_duration);
  animation-iteration-count: infinite;
 // animation-timing-function: linear;
}

.animated_source_bbo_2 {
  animation: animated_source_bbo_2_animation var(--animation_duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}




/*
.animated_source_arrow_rotate45 {
  animation: rotate_to45 0.8s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  transform: rotate(45deg);
}

.animated_source_arrow_rotate0 {
  animation: rotate_to0 0.5s forwards;
  animation-iteration-count: 1;
  animation-timing-function: linear;
 // transform: rotate(0deg) !important;
}
*/



/*


@keyframes animated_source_photon_blue_1_animation_all {
  0%   {left: 0%;
        opacity: 1;}
  15%   {left: var(--left_blue1_l2-1);}
  21%   {left: var(--left_blue1_l2-2);}
  29%   {left: 29%;}
  41%   {left: 33%;}
  55%   {left: 47%;}
  56%   {left: 48%;}
  59%   {left: 50%;
        opacity:1;}
  60%   {left: 52%;
        opacity:0;}
  100% {left: 98%;
        opacity: 0;}
}

@keyframes animated_source_photon_blue_2_animation_all {
  0%    {left: 0%;
        opacity: 1;}
  15%   {left: var(--left_blue1_l2-1);}
  21%   {left: var(--left_blue1_l2-2);}
  29%   {left: 29%;}
  37%   {left: 33%;}
  51%   {left: 47%;}
  63%   {left: 52%;}
  67%   {left: 55%;
        opacity: 1;}
  68%   {left: 57%;
        opacity: 0;}
  100%  {left: 98%;
        opacity: 0;}
}

@keyframes animated_source_photon_red_1_animation_all {
  0%    {left: 0%;
        opacity: 0;}
  59%   {left: 50%;
        opacity:0;
        width: 20px;
        top: 30px;}
  60%   {opacity:1;}
  65%   {left: var(--left_red1_bbo2-1);}
  73%   {left: var(--left_red1_bbo2-2);
      
        width: 35px;}
  85%   {left: 71%;
      
  }
  93%   {left: 77%;}
 100%   {top: 0px;
        left: 84%;
        width: 35px;}
}

@keyframes animated_source_photon_red_2_animation_all {
  0%   {left: 0%;
        opacity: 0;}
  59%   {left: 50%;
        opacity:0;
        top: 30px;
        width: 20px;}
  60%   {opacity:1;}
  65%   {left: var(--left_red1_bbo2-1);}
  73%   {left: var(--left_red1_bbo2-2);
        width: 35px;}
  85%   {left: 71%;}
  93%   {left: 77%;}
 100%   {top: 60px;
        left: 84%;
        width: 35px;}
}

@keyframes animated_source_photon_red_3_animation_all {
    0%    {left: 0%;
        opacity: 0;
        top: 30px;}
  67%   {left: 55%;
        opacity: 0;}
  67%   {left: 55%;
        top: 30px;
        }
  68%   {opacity: 1;
        width: 20px;}
  73%   {left: var(--left_red3_bbo2-1);
        width: 25px;}
  85%   {left: var(--left_red3_bbo2-2);
        width: 25px;}
  93%   {left: var(--left_red3_bbo2-3);
        width: 35px;}
 100%   {top: 8px;
        left: 84%;
        width: 35px;}
}

@keyframes animated_source_photon_red_4_animation_all {
    0%  {left: 0%;
        opacity: 0;
        top: 30px;}
  67%   {left: 55%;
        opacity: 0;}
  67%   {left: 55%;
        top: 30px;}
  68%   {opacity: 1;
        width: 20px;}
  73%   {left: var(--left_red3_bbo2-1);
        width: 25px;}
  85%   {left: var(--left_red3_bbo2-2);
        width: 25px;}
  93%   {left: var(--left_red3_bbo2-3);
        width: 35px;}
 100%   {top: 52px;
        left: 84%;
        width: 35px;}
}

*/


:root {
  --left_blue1_l2-1: 15%;
  --left_blue1_l2-2: 19%;
  
  --left_red1_bbo2-1: 53%;
  --left_red1_bbo2-2: 59%;
  
  --left_red3_bbo2-1: 59%;
  --left_red3_bbo2-2: 71%;
  --left_red3_bbo2-3: 77%;
  
  --animation_duration: 8s;
}




@keyframes animated_source_photon_blue_1_animation_all {
  0%   {left: 0%;
        opacity: 1;}
  15%   {left: var(--left_blue1_l2-1);}
  21%   {left: var(--left_blue1_l2-2);}
  31%   {left: 29%;}
  43%   {left: 35%;}
  57%   {left: 49%;}
  60%   {opacity:1;}
  61%   {left: 52%;
        opacity:0;}
  100% {left: 98%;
        opacity: 0;}
}

@keyframes animated_source_photon_blue_2_animation_all {
  0%    {left: 0%;
        opacity: 1;}
  15%   {left: var(--left_blue1_l2-1);}
  21%   {left: var(--left_blue1_l2-2);}
  31%   {left: 29%;}
  39%   {left: 35%;}
  53%   {left: 49%;}
  65%   {left: 55%;}
  69%   {opacity: 1;}
  70%   {left: 59%;
        opacity: 0;}
  100%  {left: 98%;
        opacity: 0;}
}

@keyframes animated_source_photon_red_1_animation_all {
  0%    {left: 0%;
        opacity: 0;}
  29%   {left: 29%;}
  41%   {left: 35%;}
  55%   {left: 49%;}
  56%   {left: 50%;}
  60%   {left: 51%;
        opacity:0;
        width: 20px;
        top: 30px;}
  61%   {opacity:1;
        left: 52%;}
  67%   {left: 55%;}
  76%   {left: 62%;
      //  top: 21px;
        width: 35px;}
  87%   {left: 73%;
      //  top: 9px;
  }
  96%   {
    //  top: 7px;
        left: 79%;}
 100%   {top: 0px;
        left: 83%;
        width: 35px;}
}

@keyframes animated_source_photon_red_2_animation_all {
  0%   {left: 0%;
        opacity: 0;}
  29%   {left: 29%;}
  41%   {left: 35%;}
  55%   {left: 49%;}
  56%   {left: 50%;}
  60%   {left: 51%;
        opacity:0;
        top: 30px;
        width: 20px;}
  61%   {opacity:1;
        left: 52%;}
  67%   {left: 55%;}
  76%   {left: 62%;
     //   top: 39px;
        width: 35px;}
  87%   {left: 73%;
     //   top: 51px;
        }
  96%   {
      //  top: 53px;
        left: 79%;}
 100%   {top: 60px;
        left: 83%;
        width: 35px;}
}

@keyframes animated_source_photon_red_3_animation_all {
    0%    {left: 0%;
        opacity: 0;
        top: 30px;}
  69%   {left: 58%;
        opacity: 0;
        top: 30px;}
  70%   {opacity: 1;
        left: 59%;
        width: 20px;}
  76%   {left: 62%;
        width: 24px;}
  87%   {left: 73%;
        width: 24px;}
  96%   {
        left: 79%;
        width: 35px;}
 100%   {top: 8px;
        left: 83%;
        width: 35px;}
}

@keyframes animated_source_photon_red_4_animation_all {
    0%    {left: 0%;
        opacity: 0;
        top: 30px;}
  69%   {left: 58%;
        opacity: 0;
        top: 30px;}
  70%   {opacity: 1;
        left: 59%;
        width: 20px;}
  76%   {left: 62%;
        width: 24px;}
  87%   {left: 73%;
        width: 24px;}
  96%   {
        left: 79%;
        width: 35px;}
 100%   {top: 52px;
        left: 83%;
        width: 35px;}
}






/* nur 1x BBO */

@keyframes animated_source_photon_blue_1_yvo1_animation_1xbbo {
  0%   {left: 0%;
        opacity: 1;
        width: 15px;}
  50%  {opacity: 1;}
  51%  {opacity: 0;}
  100% {left: 100%;
        opacity: 0;}
}

@keyframes animated_source_photon_blue_1_animation_1xbbo {
  0%   {left: 0%;
        opacity: 1;}
  29%   {left: 29%;}
  41%   {left: 35%;}
  55%   {left: 49%;}
  56%   {left: 50%;}
  59%   {left: 52%;
        opacity:1;}
  60%   {left: 53%;
        opacity:0;}
  100% {left: 100%;
        opacity: 0;}
}

@keyframes animated_source_photon_blue_2_animation_1xbbo {
  0%    {left: 0%;
        opacity: 1;}
  56%   {left: 56%;}
  60%   { opacity: 1;}
  61%   {left: 59%;
        opacity: 0;}
  100%  {left: 100%;
        opacity: 0;}
}

@keyframes animated_source_photon_red_1_animation_1xbbo {
  0%    {left: 0%;
        opacity: 0;}
  29%   {left: 29%;}
  41%   {left: 35%;}
  55%   {left: 49%;}
  56%   {left: 50%;}
  59%   {left: 52%;
        opacity:0;
        top: 30px;}
  60%   {opacity:1;}
  65%   {left: 55%;}
  73%   {left: 61%;
        top: 21px;}
  85%   {left: 73%;
        top: 9px;}
  93%   {top: 7px;
        left: 79%;}
 100%   {top: 0px;
        left: 86%}
}

@keyframes animated_source_photon_red_2_animation_1xbbo {
  0%   {left: 0%;
        opacity: 0;}
  29%   {left: 29%;}
  41%   {left: 35%;}
  55%   {left: 49%;}
  56%   {left: 50%;}
  59%   {left: 52%;
        opacity:0;
        top: 30px;}
  60%   {opacity:1;}
  65%   {left: 55%;}
  73%   {left: 61%;
        top: 39px;}
  85%   {left: 73%;
        top: 51px;}
  93%   {top: 53px;
        left: 79%;}
 100%   {top: 60px;
        left: 86%}
}

@keyframes animated_source_photon_red_3_animation_1xbbo {
    0%    {left: 0%;
        opacity: 0;
        top: 30px;}
  59%   {left: 58%;
        opacity: 0;}
  60%   {opacity: 1;
        width: 20px;
        top: 30px;}
  66%   {left: 62%;
        width: 24px;}
  85%   {left: 83%;
        top: 0px;
        opacity: 1;}
  86%   {opacity: 0;
        left: 84%;}
 100%   {left: 86%;
        top: 0px;
        opacity: 0;}
}

@keyframes animated_source_photon_red_4_animation_1xbbo {
    0%    {left: 0%;
        opacity: 0;
        top: 30px;}
  59%   {left: 58%;
        opacity: 0;}
  60%   {opacity: 1;
        width: 20px;
        top: 30px;}
  66%   {left: 62%;
        width: 24px;}
  85%   {left: 83%;
        top: 60px;
        opacity: 1;}
  86%   {opacity: 0;
        left: 84%;}
 100%   {left: 86%;
        top: 60px;
        opacity: 0;}
}

@keyframes animated_source_bbo_1_animation_1xbbo {
  0%   {}
  67%  {background: #fff;}
  68%  {background: #f00;}
  69%  {background: #fff;}
  100% {}
}

@keyframes animated_source_bbo_2_animation_1xbbo {
  0%   {}
  60%  {background: #fff;}
  61%  {background: #f00;}
  63%  {background: #fff;}
  100% {}
}





/* nur 2x BBO */

@keyframes animated_source_photon_blue_1_animation_2xbbo {
  0%   {left: 0%;
        opacity: 1;}
  49%  {left: 49%;}
  61%  {left: 55%;}
  70%  {left: 62%;}
  91% {left: 83%;
        opacity: 1;}
  92% {left: 84%;
        opacity: 0;}  
 100% {left: 85%;
        opacity: 0;}  
}




@keyframes animated_source_photon_blue_2_animation_2xbbo {
  0%   {left: 0%;
        opacity: 1;}
  49%  {left: 49%;}
  61%  {left: 55%;}
  67%  {opacity: 1;}
  68% {opacity: 0;
      left: 59%;}
 100% {left: 85%;
        opacity: 0;}  
}

@keyframes animated_source_photon_red_1_animation_2xbbo {
    0%  {left: 0%;
        opacity: 0;
        top: 30px;}
  29%   {left: 29%;}
  37%   {left: 35%;}
  51%   {left: 49%;}
  63%   {left: 55%;}
  67%   {left: 58%;
        opacity: 0;}
  67%   {left: 58%;
        top: 30px;}
  68%   {opacity: 1;}
  73%   {left: 61%;
        top: 26px;}
  85%   {left: 73%;
        top: 14px;}
  93%   {top: 7px;
        left: 79%;}
 100%   {top: 0px;
        left: 86%}
}

@keyframes animated_source_photon_red_2_animation_2xbbo {
    0%  {left: 0%;
        opacity: 0;
        top: 30px;}
  29%   {left: 29%;}
  37%   {left: 35%;}
  51%   {left: 49%;}
  63%   {left: 55%;}
  67%   {left: 58%;
        opacity: 0;}
  67%   {left: 58%;
        top: 30px;}
  68%   {opacity: 1;}
  73%   {left: 61%;
        top: 34px;}
  85%   {left: 73%;
        top: 46px;}
  93%   {top: 53px;
        left: 79%;}
 100%   {top: 60px;
        left: 86%}
}

@keyframes animated_source_photon_red_3_animation_2xbbo {
    0%    {left: 0%;
        opacity: 0;
        top: 30px;}
  67%   {left: 58%;
        opacity: 0;
        top: 30px;}
  68%   {opacity: 1;
        left: 59%;
        width: 20px;}
  74%   {left: 62%;
        width: 24px;}
  95%   {top: 0px;
        left: 83%;
        width: 24px;
        opacity:1;}
   96%   {left: 84%;
        opacity:0;} 
 100%   {top: 0px;
        left: 84%;
        opacity:0;}
}

@keyframes animated_source_photon_red_4_animation_2xbbo {
    0%    {left: 0%;
        opacity: 0;
        top: 30px;}
  67%   {left: 58%;
        opacity: 0;
        top: 30px;}
  68%   {opacity: 1;
        left: 59%;
        width: 20px;}
  74%   {left: 62%;
        width: 24px;}
  95%   {top: 60px;
        left: 83%;
        width: 24px;
        opacity:1;}
   96%   {left: 84%;
        opacity:0;} 
 100%   {top: 60px;
        left: 84%;
        opacity:0;}
}

@keyframes animated_source_bbo_1_animation_2xbbo {
  0%   {}
  100% {}
}

@keyframes animated_source_bbo_2_animation_2xbbo {
  0%   {}
  67%  {background: #fff;}
  68%  {background: #f00;}
  70%  {background: #fff;}
  100% {}
}






/* nur 2x BBO & l2 */

@keyframes animated_source_photon_blue_1_animation_l2 {
  0%   {left: 0%;
        opacity: 1;}
  15%   {left: var(--left_blue1_l2-1);}
  21%   {left: var(--left_blue1_l2-2);}
  51%   {left: 49%;}
  54%   {opacity:1;}
  55%   {left: 52%;
        opacity:0;}
  100% {left: 98%;
        opacity: 0;}
}

@keyframes animated_source_photon_blue_2_animation_l2 {
  0%    {left: 0%;
        opacity: 1;}
  15%   {left: var(--left_blue1_l2-1);}
  21%   {left: var(--left_blue1_l2-2);}
  51%   {left: 49%;}
  63%   {left: 55%;}
  67%   {opacity: 1;}
  68%   {left: 59%;
        opacity: 0;}
  100%  {left: 98%;
        opacity: 0;}
}

@keyframes animated_source_photon_red_1_animation_l2 {
  0%    {left: 0%;
        opacity: 0;}
  54%   {opacity:0;
        left: 51%;
        width: 20px;
        top: 30px;}
  55%   {opacity:1;
        left: 52%;}
  61%   {left: 55%;}
  70%   {left: 62%;
        width: 35px;}
  91%   {top: 0px;
        left: 83%;
        width: 35px;
        opacity:1;}
  92%   {top: 0px;
        left: 84%;
        opacity:0;}
 100%   {left: 89%;
        opacity:0;} 
}

@keyframes animated_source_photon_red_2_animation_l2 {
  0%    {left: 0%;
        opacity: 0;}
  54%   {opacity:0;
        left: 51%;
        width: 20px;
        top: 30px;}
  55%   {opacity:1;
        left: 52%;}
  61%   {left: 55%;}
  70%   {left: 62%;
        width: 35px;}
  91%   {top: 60px;
        left: 83%;
        width: 35px;
        opacity:1;}
  92%   {top: 61px;
        left: 84%;
        opacity:0;}
 100%   {left: 89%;
        opacity:0;} 
}

@keyframes animated_source_photon_red_3_animation_l2 {
    0%    {left: 0%;
        opacity: 0;
        top: 30px;}
  67%   {left: 58%;
        opacity: 0;
        top: 30px;}
  68%   {opacity: 1;
        left: 59%;
        width: 20px;}
  74%   {left: 62%;
        width: 24px;}
  95%   {top: 8px;
        left: 83%;
        width: 24px;
        opacity:1;}
   96%   {left: 84%;
        opacity:0;} 
 100%   {top: 8px;
        left: 84%;
        opacity:0;}
}

@keyframes animated_source_photon_red_4_animation_l2 {
    0%    {left: 0%;
        opacity: 0;
        top: 30px;}
  67%   {left: 58%;
        opacity: 0;
        top: 30px;}
  68%   {opacity: 1;
        left: 59%;
        width: 20px;}
  74%   {left: 62%;
        width: 24px;}
  95%   {top: 52px;
        left: 83%;
        width: 24px;
        opacity:1;}
   96%   {left: 84%;
        opacity:0;} 
 100%   {top: 52px;
        left: 84%;
        opacity:0;}
}


@keyframes animated_source_bbo_1_animation_l2 {
  0%   {}
  54%  {background: #fff;}
  55%  {background: #f00;}
  57%  {background: #fff;}
  100% {}
}

@keyframes animated_source_bbo_2_animation_l2 {
  0%   {}
  67%  {background: #fff;}
  68%  {background: #f00;}
  70%  {background: #fff;}
  100% {}
}






@keyframes animated_source_photon_blue_1_yvo1_animation_all {
  0%   {left: 0%;
        opacity: 1;
        width: 15px;}
  50%  {opacity: 1;}
  51%  {opacity: 0;}
  100% {left: 100%;
        opacity: 0;}
}

@keyframes animated_source_bbo_1_animation_all {
  0%   {}
  60%  {background: #fff;}
  61%  {background: #f00;}
  63%  {background: #fff;}
  100% {}
}

@keyframes animated_source_bbo_2_animation_all {
  0%   {}
  68%  {background: #fff;}
  69%  {background: #f00;}
  71%  {background: #fff;}
  100% {}
}

@keyframes rotate_to45 {
  0%   {transform: rotate(0deg);}
  100%   {transform: rotate(45deg);}
}

@keyframes rotate_to0 {
  0%   {transform: rotate(45deg);}
  100%   {transform: rotate(0deg);}
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
//  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
	visibility: hidden;
	width: 200px;
	background-color: rgba(0,0,0,0.7);
    //              rgba(0,174,239,0.8);
	color: #fff;
	text-align: center;
	padding: 5px 14px;
	border-radius: 6px;
	position: absolute;
	z-index: 1;
	line-height: 20px;
	margin: 75px -24px;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
  
.info {
	display: block;
	border: 1px solid #535353;
	border-radius: 999px;
	width: 15px;
	height: 15px;
	line-height: 13px;
	margin: 0 auto;
	bottom: 5px;
	position: absolute;
	left: 0;
	right: 0;
	background: #ddd;
	color: #000;
	font-weight: 500;
}

.info:hover {
  background-color: #00aeef;
  color: #fff;
}

#polarization_legend {
    display: block;
    position: absolute;
    top: 19px;
    width: 50px;
}

.photon_pol_blue {
    display: block;
    position: absolute;
    top: 27px;
}

.photon_pol_red {
    display: block;
    position: absolute;
}

#photon_pol_blue_1 {
    left: 11%;
}

#photon_pol_blue_11 {
    left: 11%;
}

#photon_pol_blue_2 {
    left: 24%;
}

#photon_pol_blue_3 {
    left: 24%;
}

#photon_pol_blue_4 {
    left: 38%;
}

#photon_pol_blue_5 {
    left: 44%;
  //  margin-left: -0.5%;
}

#photon_pol_red_1 {
    left: 62.5%;
    top: 5px;
    width: 24px;
}

#photon_pol_red_2 {
    left: 62.5%;
    top: 43px;
    width: 24px;
}

#photon_pol_red_3 {
    left: 61.5%;
    top: -6px;
    width: 35px;
}

#photon_pol_red_4 {
    left: 61.5%;
    top: 53px;
    width: 35px;
}

#photon_pol_red_5 {
    left: 93.5%;
    top: 9px;
    width: 35px;
    height: 13px;
}

#photon_pol_red_6 {
    left: 93.5%;
    top: 47px;
    width: 35px;
    height: 13px;
}

#photon_pol_red_7 {
    left: 93.5%;
    top: 9px;
    width: 35px;
    height: 13px;
}

#photon_pol_red_8 {
    left: 93.5%;
    top: 47px;
    width: 35px;
    height: 13px;
}
  
#animated_source_1 {
    height: 100px;
    width: 100%;
    display: block;
    position: relative;
    z-index: 9;
    border-bottom: 1px solid #aaa;
    padding-bottom: 55px;
}

#animated_source_2 {
    height: 80px;
    width: 100%;
    display: block;
    position: relative;
    margin-top: 16px;
    border-bottom: 1px solid #aaa;
    padding-bottom: 10px;
}

#animated_source_3 {
    height: 80px;
    width: 100%;
    display: block;
    position: relative;
    margin-top: 10px;
}

.animated_source_dirac {
    display: block;
    position: absolute;
    float: left;
    margin-top: 27px;
}

#animated_source_dirac_1 {
    left: 11%;
}

#animated_source_dirac_2 {
    left: 21%;
}

#animated_source_dirac_21 {
    left: 21%;
    display: none;
}

#animated_source_dirac_3 {
    left: 38%;
}

#animated_source_dirac_31 {
    left: 38%;
    display: none;
}

#animated_source_dirac_4 {
    left: 44%;
}

#animated_source_dirac_5 {
    left: 66%;
}

#animated_source_dirac_51 {
    left: 60%;
}

#animated_source_dirac_6 {
    left: 92%;
}

#animated_source_dirac_61 {
    left: 92%;
    display: none;
}

#animated_source_dirac_62 {
    left: 100%;
    display: none;
  
}

.animated_source_arrow {
	width: 9px;
	left: 5%;
	display: block;
	position: absolute;
  float: left;
  top: 19px;
}
  
.animated_source_arrow img {
	width: 7px;
}
  
#animated_source_arrow_1 {
	left: 12%;
}
  
#animated_source_arrow_2 {
	left: 25%;
  top: 21px;
}
  
#animated_source_arrow_2 img {
  transform: rotate(61deg);
  width: 6px;
}
  
#animated_source_arrow_3 {
	left: 25%;
}
  
#animated_source_arrow_4 {
	left: 39%;
}
  
#animated_source_arrow_5 {
	left: 45%;
  top: 21px;
}

#animated_source_arrow_5 img {
	transform: rotate(61deg);
  width: 6px;
}
 
#animated_source_arrow_6 {
	left: 64%;
	top: 0;
}
  
#animated_source_arrow_6 img {
	transform: rotate(61deg);
  width: 6px;
}
  
#animated_source_arrow_7 {
	left: 64%;
	top: 38px;
} 
  
#animated_source_arrow_7 img {
	transform: rotate(61deg);
  width: 6px;
} 
  
#animated_source_arrow_8 {
	left: 64%;
	top: -15px;
}
  
#animated_source_arrow_9 {
	left: 64%;
	top: 45px;
}   
  
#animated_source_arrow_10 {
	left: 96%;
  top: -2px;
}
  
#animated_source_arrow_11 {
	left: 96%;
	top: 36px;
}
  
#animated_source_arrow_12 {
	left: 96%;
	top: 0;
}  
  
#animated_source_arrow_12 img {
	transform: rotate(61deg);
  width: 6px;
}  
  
#animated_source_arrow_13 {
	left: 96%;
	top: 38px;
}

#animated_source_arrow_13 img {
	transform: rotate(61deg);
  width: 6px;
}
  
#animated_source_arrow_entanglement {
	display: block;
	position: absolute;
	width: 41px;
	height: 81px;
	border: 1px solid #999;
	left: 93%;
	border-radius: 10px;
  top: -4px;
}

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
}

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #f00;
}

.arrow-right {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #0096d2;
  float: right;
  cursor: pointer;
  margin-top: 10px;
}

.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  border-right:10px solid #0096d2; 
  float: right;
  cursor: pointer;
  margin-top: 10px;
}