@charset "utf-8";

.cssanimation{width: 1024px; height: 576px; }
#cssanimation, #slideranimation{max-width:100%; max-height: calc(56.143vw - 100px);  max-height: calc((100vw - 100px) * 0.5625);}
@media only screen and (max-width: 451px){
	#cssanimation, #slideranimation{max-height: calc(56.143vw - 20px); max-height: calc((100vw - 20px) * 0.5625);}
}

#cssanimation .progressbar{display:block; width:92%; height:12px;  position:absolute; top:auto; bottom:2%; left:4%; cursor:pointer; z-index:5001;}
#cssanimation .progressbar .line{width:100%; height:2px;background: #ccc; position:absolute; top:5px; left:0;}
#cssanimation .progressbar .bar{width:8px; height:8px; background: #000; position:absolute; top:5px; left:0; transform:translate(-3px, -3px); border-radius:50%; }
#cssanimation.noani .progressbar{display:none;}
#cssanimation .progressbar.invis{opacity:0; cursor:auto;}
#cssanimation .progressbar{transition-duration:0.4s; transition-property:opacity;}

.cssanimation_box{position:relative;width: 100%;    height: 100%;}
.cssanimation_box > div{position:relative;width: 100%;    height: 100%;}

.cssanimation_box img{position:absolute; top:0; left:0; opacity: 0; width:100%; height:auto; transition-duration:0.2s; transition-property:opacity;}
.cssanimation_box img.fast{transition-duration:0.1s;}
.cssanimation_box img.slow{transition-duration:1s;}


.s-from-0 .basic_animation .img_1 { opacity: 1; }
.s-from-1.s-upto-2 .basic_animation .img_2 { opacity: 1; }
.s-from-2.s-upto-3 .basic_animation .img_3 { opacity: 1; }
.s-from-3.s-upto-4 .basic_animation .img_4 { opacity: 1; }
.s-from-4.s-upto-5 .basic_animation .img_5 { opacity: 1; }
.s-from-5.s-upto-6 .basic_animation .img_6 { opacity: 1; }
.s-from-6.s-upto-7 .basic_animation .img_7 { opacity: 1; }
.s-from-7.s-upto-8 .basic_animation .img_8 { opacity: 1; }
.s-from-8.s-upto-9 .basic_animation .img_9 { opacity: 1; }
.s-from-9.s-upto-10 .basic_animation .img_10 { opacity: 1; }
.s-from-10.s-upto-11 .basic_animation .img_11 { opacity: 1; }
.s-from-11.s-upto-12 .basic_animation .img_12 { opacity: 1; }
.s-from-12.s-upto-13 .basic_animation .img_13 { opacity: 1; }
.s-from-13.s-upto-14 .basic_animation .img_14 { opacity: 1; }
.s-from-14.s-upto-15 .basic_animation .img_15 { opacity: 1; }
.s-from-15.s-upto-16 .basic_animation .img_16 { opacity: 1; }
.s-from-16.s-upto-17 .basic_animation .img_17 { opacity: 1; }
.s-from-17.s-upto-18 .basic_animation .img_18 { opacity: 1; }
.s-from-18.s-upto-19 .basic_animation .img_19 { opacity: 1; }
.s-from-19.s-upto-20 .basic_animation .img_20 { opacity: 1; }
.s-from-20.s-upto-21 .basic_animation .img_21 { opacity: 1; }
.s-from-21.s-upto-22 .basic_animation .img_22 { opacity: 1; }
.s-from-22.s-upto-23 .basic_animation .img_23 { opacity: 1; }
.s-from-23.s-upto-24 .basic_animation .img_24 { opacity: 1; }
.s-from-24.s-upto-25 .basic_animation .img_25 { opacity: 1; }
.s-from-25.s-upto-26 .basic_animation .img_26 { opacity: 1; }
.s-from-26.s-upto-27 .basic_animation .img_27 { opacity: 1; }
.s-from-27.s-upto-28 .basic_animation .img_28 { opacity: 1; }
.s-from-28.s-upto-29 .basic_animation .img_29 { opacity: 1; }
.s-from-29.s-upto-30 .basic_animation .img_30 { opacity: 1; }
.s-from-30.s-upto-31 .basic_animation .img_31 { opacity: 1; }
.s-from-31.s-upto-32 .basic_animation .img_32 { opacity: 1; }
.s-from-32.s-upto-33 .basic_animation .img_33 { opacity: 1; }
.s-from-33.s-upto-34 .basic_animation .img_34 { opacity: 1; }
.s-from-34.s-upto-35 .basic_animation .img_35 { opacity: 1; }
.s-from-35.s-upto-36 .basic_animation .img_36 { opacity: 1; }
.s-from-36.s-upto-37 .basic_animation .img_37 { opacity: 1; }
.s-from-37.s-upto-38 .basic_animation .img_38 { opacity: 1; }
.s-from-38.s-upto-39 .basic_animation .img_39 { opacity: 1; }
.s-from-39.s-upto-40 .basic_animation .img_40 { opacity: 1; }
.s-from-40.s-upto-41 .basic_animation .img_41 { opacity: 1; }
.s-from-41.s-upto-42 .basic_animation .img_42 { opacity: 1; }
.s-from-42.s-upto-43 .basic_animation .img_43 { opacity: 1; }
.s-from-43.s-upto-44 .basic_animation .img_44 { opacity: 1; }
.s-from-44.s-upto-45 .basic_animation .img_45 { opacity: 1; }
.s-from-45.s-upto-46 .basic_animation .img_46 { opacity: 1; }
.s-from-46.s-upto-47 .basic_animation .img_47 { opacity: 1; }
.s-from-47.s-upto-48 .basic_animation .img_48 { opacity: 1; }
.s-from-48.s-upto-49 .basic_animation .img_49 { opacity: 1; }
.s-from-49.s-upto-50 .basic_animation .img_50 { opacity: 1; }


.s-2 .basic_animation .img_2,
.s-3 .basic_animation .img_3,
.s-4 .basic_animation .img_4,
.s-5 .basic_animation .img_5,
.s-6 .basic_animation .img_6,
.s-7 .basic_animation .img_7,
.s-8 .basic_animation .img_8,
.s-9 .basic_animation .img_9,
.s-10 .basic_animation .img_10,
.s-11 .basic_animation .img_11,
.s-12 .basic_animation .img_12,
.s-13 .basic_animation .img_13,
.s-14 .basic_animation .img_14,
.s-15 .basic_animation .img_15,
.s-16 .basic_animation .img_16,
.s-17 .basic_animation .img_17,
.s-18 .basic_animation .img_18,
.s-19 .basic_animation .img_19,
.s-20 .basic_animation .img_20,
.s-21 .basic_animation .img_21,
.s-22 .basic_animation .img_22,
.s-23 .basic_animation .img_23,
.s-24 .basic_animation .img_24,
.s-25 .basic_animation .img_25,
.s-26 .basic_animation .img_26,
.s-27 .basic_animation .img_27,
.s-28 .basic_animation .img_28,
.s-29 .basic_animation .img_29,
.s-30 .basic_animation .img_30,
.s-31 .basic_animation .img_31,
.s-32 .basic_animation .img_32,
.s-33 .basic_animation .img_33,
.s-34 .basic_animation .img_34,
.s-35 .basic_animation .img_35,
.s-36 .basic_animation .img_36,
.s-37 .basic_animation .img_37,
.s-38 .basic_animation .img_38,
.s-39 .basic_animation .img_39,
.s-40 .basic_animation .img_40,
.s-41 .basic_animation .img_41,
.s-42 .basic_animation .img_42,
.s-43 .basic_animation .img_43,
.s-44 .basic_animation .img_44,
.s-45 .basic_animation .img_45, 
.s-46 .basic_animation .img_46, 
.s-47 .basic_animation .img_47, 
.s-48 .basic_animation .img_48,
.s-49 .basic_animation .img_49,
.s-50 .basic_animation .img_50{ transition-delay:0.2s; }





.s-last #dm360_replay{display:block;}
.s-last.noani #dm360_replay{display:none;}



/*Animation 1*/


.cssanimation_box .animation_1_0 .img_1 { opacity: 1; }
.cssanimation_box .animation_1 img{width:auto; height:100%; }
.cssanimation_box .animation_1 .img_left{height: 81%; left: -10%;    bottom: -10.18%; top: auto; z-index:1;}
.cssanimation_box .animation_1 .img_right{ bottom: -10.18%; top: auto; right:-18.143%; left:auto; z-index:2;}



.s-from-0 .cssanimation_box .animation_1_1 .img_1 { opacity: 1; }
.s-from-1 .cssanimation_box .animation_1_1 .img_2 { opacity: 1; }
.s-from-2 .cssanimation_box .animation_1_1 .img_3 { opacity: 1; }
.s-from-3 .cssanimation_box .animation_1_1 .img_3 { opacity: 0; }

.s-from-0 .cssanimation_box .animation_1_1 .display_1 { opacity: 1; }
.s-from-2 .cssanimation_box .animation_1_1 .display_2 { opacity: 1; }
.s-from-3 .cssanimation_box .animation_1_1 .display_2 { opacity: 0; }


.s-from-0 .cssanimation_box .animation_1_2 .img_1 { opacity: 1; }
.s-from-1 .cssanimation_box .animation_1_2 .img_2 { opacity: 1; }
.s-from-2 .cssanimation_box .animation_1_2 .img_3 { opacity: 1; }
.s-from-3 .cssanimation_box .animation_1_2 .img_3 { opacity: 0; }
.s-from-4 .cssanimation_box .animation_1_2 .img_3 { opacity: 1; }
.s-from-5 .cssanimation_box .animation_1_2 .img_3 { opacity: 0; }
.s-from-6 .cssanimation_box .animation_1_2 .img_3 { opacity: 1; }
.s-from-7 .cssanimation_box .animation_1_2 .img_3 { opacity: 0; }
.s-from-8 .cssanimation_box .animation_1_2 .img_3 { opacity: 1; }
.s-from-9 .cssanimation_box .animation_1_2 .img_3 { opacity: 0; }

.s-from-10 .cssanimation_box .animation_1_2 .img_4 { opacity: 1; }
.s-from-11 .cssanimation_box .animation_1_2 .img_4 { opacity: 0; }
.s-from-12 .cssanimation_box .animation_1_2 .img_4 { opacity: 1; }
.s-from-13 .cssanimation_box .animation_1_2 .img_4 { opacity: 0; }
.s-from-14 .cssanimation_box .animation_1_2 .img_4 { opacity: 1; }
.s-from-15 .cssanimation_box .animation_1_2 .img_4 { opacity: 0; }
.s-from-16 .cssanimation_box .animation_1_2 .img_4 { opacity: 1; }
.s-from-17 .cssanimation_box .animation_1_2 .img_4 { opacity: 0; }

.s-from-0 .cssanimation_box .animation_1_2 .display_3 { opacity: 1; }
.s-from-2 .cssanimation_box .animation_1_2 .display_4 { opacity: 1; }
.s-from-4 .cssanimation_box .animation_1_2 .display_5 { opacity: 1; }
.s-from-6 .cssanimation_box .animation_1_2 .display_6 { opacity: 1; }
.s-from-8 .cssanimation_box .animation_1_2 .display_7 { opacity: 1; }
.s-from-10 .cssanimation_box .animation_1_2 .display_7 { opacity: 0; }
.s-from-12 .cssanimation_box .animation_1_2 .display_6 { opacity: 0; }
.s-from-14 .cssanimation_box .animation_1_2 .display_5 { opacity: 0; }
.s-from-16 .cssanimation_box .animation_1_2 .display_4 { opacity: 0; }


.s-from-0 .cssanimation_box .animation_1_3 .img_1 { opacity: 1; }
.s-from-1 .cssanimation_box .animation_1_3 .img_2 { opacity: 1; }
.s-from-2 .cssanimation_box .animation_1_3 .img_3 { opacity: 1; }
.s-from-3 .cssanimation_box .animation_1_3 .img_3 { opacity: 0; }

.s-from-0 .cssanimation_box .animation_1_3 .display_1 { opacity: 1; }
.s-from-2 .cssanimation_box .animation_1_3 .display_8 { opacity: 1; }


/*Animation 2*/
.animation_2{width: 56.143%; border-left: solid 1px #BCBCBC; border-right: solid 1px #BCBCBC;margin: 0 auto;}


/*Animation 5*/
.touchpoint{width:13px; height:13px;   position:absolute; top: 35%; left: 11%; transition-timing-function: linear;}
.touchpoint_click{width:100%; height:100%; background:#d8d8d8; border-radius:50%; box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.85);}
@keyframes touchpoint_click {
  0%   {transform: scale(1);}
  50%  {transform: scale(0.7);}
  100% {transform: scale(1);}
}

@keyframes touchpoint_click_wait {
  0%   {transform: scale(1);}
  25%  {transform: scale(0.7);}
  50% {transform: scale(1);}
  100% {transform: scale(1);}
}


.arrow_right{position:absolute; top: 6.5%;    left: 53%; opacity:0;}
.arrow_right::after, .arrow_right::before {width:2px; height:10px; transform:rotate(45deg); background:#fff; content: "";     display: block;     transform-origin: top right;}
.arrow_right::before {transform:rotate(-45deg); transform-origin: bottom right; }

.arrow_left{position:absolute; top: 6.5%;    left: 47%; opacity:0;}
.arrow_left::after, .arrow_left::before {width:2px; height:10px; transform:rotate(-45deg); background:#fff; content: "";     display: block;     transform-origin: top left;}
.arrow_left::before {transform:rotate(45deg); transform-origin: bottom left; }

.arrow_bot{position:absolute; top: 2.5%;   left: 49.75%; opacity:0;}
.arrow_bot::after, .arrow_bot::before {height:2px; width:10px; transform:rotate(45deg); background:#000; content: "";     display: block;     transform-origin: bottom right;}
.arrow_bot::before {transform:rotate(135deg); transform-origin: bottom right;}

@keyframes arrow_click {
  0%   {opacity:0;}
  25%   {opacity:1;}
  50%  {opacity:1;}
  75%  {opacity:1;}
  100% {opacity:0;}
}




/* --- 1.4 PICUS --- */
.cssanimation_box .animation_picus_1_4 img{transition-duration:0s;}
.s-2  .animation_picus_1_4 .arrow_right{animation-name: arrow_click;  animation-duration: .8s; }
.s-from-4  .animation_picus_1_4 .arrow_right{animation-name: arrow_click;  animation-duration: .8s; animation-iteration-count: 9}
.s-13  .animation_picus_1_4 .arrow_bot{animation-name: arrow_click;  animation-duration: 1.5s;}







/* --- 4.2 PICUS --- */

.cssanimation_box .animation_picus_4_2 img{transition-duration:0s;}
.animation_picus_4_2 .touchpoint{ top: 55%; left: 20%; }
.animation_picus_4_2 .touchpoint{transition-duration: 1s;}
.s-from-1  .animation_picus_4_2 .touchpoint{ top: 23.3%;     left: 50.2%;}
.s-from-2  .animation_picus_4_2 .touchpoint_click{animation-name: touchpoint_click;  animation-duration: 0.3s;}
.s-from-3  .animation_picus_4_2 .touchpoint{display:none;}

.s-3  .animation_picus_4_2 .arrow_right{animation-name: arrow_click;  animation-duration: 0.75s;}
.s-5  .animation_picus_4_2 .arrow_right{animation-name: arrow_click;  animation-duration: 0.75s;}
.s-7  .animation_picus_4_2 .arrow_right{animation-name: arrow_click;  animation-duration: 0.75s;}

.s-8  .animation_picus_4_2 .arrow_bot{animation-name: arrow_click;  animation-duration: 1s;}


/* --- 4.3 PICUS --- */

.cssanimation_box .animation_picus_4_3 img{transition-duration:0s;}
.animation_picus_4_3 .touchpoint{ top: 55%; left: 20%; }
.animation_picus_4_3 .touchpoint{transition-duration: 1s;}

/*menue*/
.s-from-1  .animation_picus_4_3 .touchpoint{ top: 32.5%;     left: 46.6%;}
.s-2  .animation_picus_4_3 .touchpoint_click{animation-name: touchpoint_click;  animation-duration: 0.3s;}
/*ok*/
.s-from-6 .animation_picus_4_3 .touchpoint{transition-duration: .5s;}
.s-from-7  .animation_picus_4_3 .touchpoint{ top: 32.5%;     left: 53.8%;}
.s-8 .animation_picus_4_3 .touchpoint_click{animation-name: touchpoint_click;  animation-duration: 0.3s; }
/*edit*/
.s-from-9  .animation_picus_4_3 .touchpoint{ top: 32.5%;     left: 50.2%;}
.s-10 .animation_picus_4_3 .touchpoint_click{animation-name: touchpoint_click;  animation-duration: 0.3s;}
/*next*/
.s-from-11  .animation_picus_4_3 .touchpoint{ }
.s-12 .animation_picus_4_3 .touchpoint_click{animation-name: touchpoint_click;  animation-duration: 0.3s;}
/*ok*/
.s-from-19  .animation_picus_4_3 .touchpoint{ top: 32.5%;     left: 53.8%;}
.s-20 .animation_picus_4_3 .touchpoint_click{animation-name: touchpoint_click;  animation-duration: 0.3s;}


.s-3  .animation_picus_4_3 .arrow_right{animation-name: arrow_click;  animation-duration: 0.75s;}
.s-5  .animation_picus_4_3 .arrow_right{animation-name: arrow_click;  animation-duration: 0.75s;}
.s-7  .animation_picus_4_3 .arrow_right{animation-name: arrow_click;  animation-duration: 0.75s;}

.s-from-14 .animation_picus_4_3 .arrow_left{animation-name: arrow_click;  animation-duration: 0.8s; animation-iteration-count: 5;}



/* --- 4.3 PICUS 2 --- */

.cssanimation_box .animation_picus2_4_3 img{transition-duration:0s;}
.animation_picus2_4_3 .touchpoint{ top: 55%; left: 20%; }
.animation_picus2_4_3 .touchpoint{transition-duration: 1s;}

/*menue*/
.s-from-1  .animation_picus2_4_3 .touchpoint{ top: 32.5%;     left: 46.6%;}
.s-2  .animation_picus2_4_3 .touchpoint_click{animation-name: touchpoint_click;  animation-duration: 0.3s;}
/*ok*/


.s-from-3 .animation_picus2_4_3 .touchpoint{transition-duration: .5s;}

.s-from-5  .animation_picus2_4_3 .touchpoint{ top: 32.5%;     left: 53.8%;}
.s-6 .animation_picus2_4_3 .touchpoint_click{animation-name: touchpoint_click;  animation-duration: 0.3s; }

.s-from-7  .animation_picus2_4_3 .touchpoint{ top: 32.5%;     left: 50.2%;}
.s-8 .animation_picus2_4_3 .touchpoint_click{animation-name: touchpoint_click;  animation-duration: 0.3s; }

.s-from-19  .animation_picus2_4_3 .touchpoint{ top: 32.5%;     left: 50.2%;}
.s-20 .animation_picus2_4_3 .touchpoint_click{animation-name: touchpoint_click;  animation-duration: 0.3s; }

.s-from-21  .animation_picus2_4_3 .touchpoint{ top: 32.5%;     left: 53.8%;}
.s-22 .animation_picus2_4_3 .touchpoint_click{animation-name: touchpoint_click;  animation-duration: 0.3s; }


.s-3  .animation_picus2_4_3 .arrow_right{animation-name: arrow_click;  animation-duration: 0.75s;}

.s-10 .animation_picus2_4_3 .arrow_left{animation-name: arrow_click;  animation-duration: 0.75s; }
.s-12 .animation_picus2_4_3 .arrow_left{animation-name: arrow_click;  animation-duration: 0.75s; }
.s-14 .animation_picus2_4_3 .arrow_left{animation-name: arrow_click;  animation-duration: 0.75s; }
.s-16 .animation_picus2_4_3 .arrow_left{animation-name: arrow_click;  animation-duration: 0.75s; }
.s-18 .animation_picus2_4_3 .arrow_left{animation-name: arrow_click;  animation-duration: 0.75s; }





/* --- 5.2 PICUS --- */
.cssanimation_box .animation_picus_5_2 img{transition-duration:0s;}
.animation_picus_5_2 .touchpoint{ top: 55%; left: 20%; }
.animation_picus_5_2 .touchpoint{transition-duration: 1s;}
.s-from-1  .animation_picus_5_2 .touchpoint{ top: 33%;    left: 53.7%;}
.s-2  .animation_picus_5_2 .touchpoint_click{animation-name: touchpoint_click;  animation-duration: 0.3s;}

.s-from-3  .animation_picus_5_2 .touchpoint{ left: 50.2%;transition-duration: 0.3s;}
.s-4  .animation_picus_5_2 .touchpoint_click, .s-5  .animation_picus_5_2 .touchpoint_click{animation-name: touchpoint_click;  animation-duration: 0.6s; animation-iteration-count: 2;}

.s-6  .animation_picus_5_2 .arrow_right{animation-name: arrow_click;  animation-duration: 0.75s;}

.s-from-8  .animation_picus_5_2 .touchpoint{ left: 53.7%;}
.s-9  .animation_picus_5_2 .touchpoint_click{animation-name: touchpoint_click;  animation-duration: 0.3s;}

.s-10  .animation_picus_5_2 .arrow_right{animation-name: arrow_click;  animation-duration: 0.75s;}

.s-12  .animation_picus_5_2 .touchpoint_click, .s-13  .animation_picus_5_2 .touchpoint_click{animation-name: touchpoint_click_wait;  animation-duration: 1s; animation-iteration-count: 2;}

.s-from-14  .animation_picus_5_2 .touchpoint{display:none;}

.s-15  .animation_picus_5_2 .arrow_bot{animation-name: arrow_click;  animation-duration: 1s;}
.s-17  .animation_picus_5_2 .arrow_bot{animation-name: arrow_click;  animation-duration: 1s;}
.s-19  .animation_picus_5_2 .arrow_bot{animation-name: arrow_click;  animation-duration: 1s;}
.s-21  .animation_picus_5_2 .arrow_bot{animation-name: arrow_click;  animation-duration: 1s;}
.s-23  .animation_picus_5_2 .arrow_bot{animation-name: arrow_click;  animation-duration: 1s;}
.s-25  .animation_picus_5_2 .arrow_bot{animation-name: arrow_click;  animation-duration: 1s;}
.s-27  .animation_picus_5_2 .arrow_bot{animation-name: arrow_click;  animation-duration: 1s;}
.s-29  .animation_picus_5_2 .arrow_bot{animation-name: arrow_click;  animation-duration: 1s;}
.s-31  .animation_picus_5_2 .arrow_bot{animation-name: arrow_click;  animation-duration: 1s;}
.s-33  .animation_picus_5_2 .arrow_bot{animation-name: arrow_click;  animation-duration: 1s;}
.s-35  .animation_picus_5_2 .arrow_bot{animation-name: arrow_click;  animation-duration: 1s;}
.s-37  .animation_picus_5_2 .arrow_bot{animation-name: arrow_click;  animation-duration: 1s;}
.s-39  .animation_picus_5_2 .arrow_bot{animation-name: arrow_click;  animation-duration: 1s;}


/* --- 5.3 PICUS --- */

.cssanimation_box .animation_picus_5_3 img{transition-duration:0s;}
.s-from-3.s-upto-14 .animation_picus_5_3 .arrow_left{animation-name: arrow_click;  animation-duration: .8s; animation-iteration-count: 10;}

.s-from-16.s-upto-17 .animation_picus_5_3 .arrow_left{animation-name: arrow_click;  animation-duration: .8s; animation-iteration-count: 1;}
.s-from-20.s-upto-21 .animation_picus_5_3 .arrow_left{animation-name: arrow_click;  animation-duration: .8s; animation-iteration-count: 1;}

.animation_picus_5_3 .touchpoint{ top: 55%; left: 20%; }
.animation_picus_5_3 .touchpoint{transition-duration: 1s;}
.s-from-1  .animation_picus_5_3 .touchpoint{ top: 33%;    left: 53.7%;}
.s-2  .animation_picus_5_3 .touchpoint_click{animation-name: touchpoint_click;  animation-duration: 0.3s;}


.s-14  .animation_picus_5_3 .touchpoint_click{animation-name: touchpoint_click;  animation-duration: 0.3s;}

.s-from-17  .animation_picus_5_3 .touchpoint{ left: 50.2%;transition-duration: 0.3s;}
.s-18  .animation_picus_5_3 .touchpoint_click{animation-name: touchpoint_click;  animation-duration: 0.3s;}

.s-from-21  .animation_picus_5_3 .touchpoint{ left: 53.7%;}
.s-22  .animation_picus_5_3 .touchpoint_click{animation-name: touchpoint_click;  animation-duration: 0.3s;}





/* --- 5.2 PICUS 2--- */
.cssanimation_box .animation_picus2_5_2 img{transition-duration:0s;}
.animation_picus2_5_2 .touchpoint{ top: 55%; left: 20%; }
.animation_picus2_5_2 .touchpoint{transition-duration: 0s;}
.s-from-1  .animation_picus2_5_2 .touchpoint{ top: 33%;    left: 53.7%; transition-duration: 1s;}
.s-2  .animation_picus2_5_2 .touchpoint_click{animation-name: touchpoint_click;  animation-duration: 0.3s;}

.s-3  .animation_picus2_5_2 .arrow_right{animation-name: arrow_click;  animation-duration: 0.75s;}
.s-5  .animation_picus2_5_2 .arrow_right{animation-name: arrow_click;  animation-duration: 0.75s;}
.s-7  .animation_picus2_5_2 .arrow_right{animation-name: arrow_click;  animation-duration: 0.75s;}
.s-9  .animation_picus2_5_2 .arrow_right{animation-name: arrow_click;  animation-duration: 0.75s;}
.s-11  .animation_picus2_5_2 .arrow_right{animation-name: arrow_click;  animation-duration: 0.75s;}


.s-from-12  .animation_picus2_5_2 .touchpoint{ left: 50.2%;transition-duration: 0.3s;}
.s-13  .animation_picus2_5_2 .touchpoint_click{animation-name: touchpoint_click;  animation-duration: 0.3s; }


.s-15  .animation_picus2_5_2 .arrow_right{animation-name: arrow_click;  animation-duration: 0.75s;}

.s-from-16  .animation_picus2_5_2 .touchpoint{left: 53.7%;transition-duration: 0.3s;}
.s-17  .animation_picus2_5_2 .touchpoint_click{animation-name: touchpoint_click;  animation-duration: 0.3s; }


.s-from-18  .animation_picus2_5_2 .touchpoint{display:none;}

.s-19  .animation_picus2_5_2 .arrow_bot{animation-name: arrow_click;  animation-duration: 1s;}
.s-21  .animation_picus2_5_2 .arrow_bot{animation-name: arrow_click;  animation-duration: 1s;}
.s-23  .animation_picus2_5_2 .arrow_bot{animation-name: arrow_click;  animation-duration: 1s;}
.s-25  .animation_picus2_5_2 .arrow_bot{animation-name: arrow_click;  animation-duration: 1s;}
.s-27  .animation_picus2_5_2 .arrow_bot{animation-name: arrow_click;  animation-duration: 1s;}
.s-29  .animation_picus2_5_2 .arrow_bot{animation-name: arrow_click;  animation-duration: 1s;}
.s-31  .animation_picus2_5_2 .arrow_bot{animation-name: arrow_click;  animation-duration: 1s;}
.s-33  .animation_picus2_5_2 .arrow_bot{animation-name: arrow_click;  animation-duration: 1s;}
.s-35  .animation_picus2_5_2 .arrow_bot{animation-name: arrow_click;  animation-duration: 1s;}
.s-37  .animation_picus2_5_2 .arrow_bot{animation-name: arrow_click;  animation-duration: 1s;}
.s-39  .animation_picus2_5_2 .arrow_bot{animation-name: arrow_click;  animation-duration: 1s;}
.s-41  .animation_picus2_5_2 .arrow_bot{animation-name: arrow_click;  animation-duration: 1s;}
.s-43  .animation_picus2_5_2 .arrow_bot{animation-name: arrow_click;  animation-duration: 1s;}


/* --- 5.3 PICUS 2 --- */

.cssanimation_box .animation_picus2_5_3 img{transition-duration:0s;}

.animation_picus2_5_3 .touchpoint{ top: 55%; left: 20%; }
.animation_picus2_5_3 .touchpoint{transition-duration: 0s;}
.s-from-1  .animation_picus2_5_3 .touchpoint{ top: 33%;    left: 53.7%; transition-duration: 1s;}
.s-2  .animation_picus2_5_3 .touchpoint_click{animation-name: touchpoint_click;  animation-duration: 0.3s;}



.s-3  .animation_picus2_5_3 .arrow_right{animation-name: arrow_click;  animation-duration: 0.75s;}
.s-5  .animation_picus2_5_3 .arrow_right{animation-name: arrow_click;  animation-duration: 0.75s;}
.s-7  .animation_picus2_5_3 .arrow_right{animation-name: arrow_click;  animation-duration: 0.75s;}
.s-9  .animation_picus2_5_3 .arrow_right{animation-name: arrow_click;  animation-duration: 0.75s;}


.s-11  .animation_picus2_5_3 .touchpoint_click{animation-name: touchpoint_click;  animation-duration: 0.3s;}

.s-from-12  .animation_picus2_5_3 .touchpoint{ left: 50.2%;transition-duration: 0.3s;}
.s-13  .animation_picus2_5_3 .touchpoint_click{animation-name: touchpoint_click;  animation-duration: 0.3s; }


.s-15  .animation_picus2_5_3 .arrow_right{animation-name: arrow_click;  animation-duration: 0.75s;}

.s-from-16  .animation_picus2_5_3 .touchpoint{ left: 50.2%;transition-duration: 0.3s;}
.s-17  .animation_picus2_5_3 .touchpoint_click{animation-name: touchpoint_click;  animation-duration: 0.3s; }

.s-19  .animation_picus2_5_3 .arrow_right{animation-name: arrow_click;  animation-duration: 0.75s;}


.s-from-20  .animation_picus2_5_3 .touchpoint{ left: 50.2%;transition-duration: 0.3s;}
.s-21  .animation_picus2_5_3 .touchpoint_click{animation-name: touchpoint_click;  animation-duration: 0.3s; }

.s-from-22  .animation_picus2_5_3 .touchpoint{ left:53.7%;transition-duration: 0.3s;}
.s-23  .animation_picus2_5_3 .touchpoint_click{animation-name: touchpoint_click;  animation-duration: 0.3s; }



.s-25  .animation_picus2_5_3 .arrow_right{animation-name: arrow_click;  animation-duration: 0.75s;}
.s-27  .animation_picus2_5_3 .arrow_right{animation-name: arrow_click;  animation-duration: 0.75s;}
.s-29  .animation_picus2_5_3 .arrow_right{animation-name: arrow_click;  animation-duration: 0.75s;}
.s-31  .animation_picus2_5_3 .arrow_right{animation-name: arrow_click;  animation-duration: 0.75s;}
.s-33  .animation_picus2_5_3 .arrow_right{animation-name: arrow_click;  animation-duration: 0.75s;}
.s-35  .animation_picus2_5_3 .arrow_right{animation-name: arrow_click;  animation-duration: 0.75s;}
.s-37  .animation_picus2_5_3 .arrow_right{animation-name: arrow_click;  animation-duration: 0.75s;}
.s-39  .animation_picus2_5_3 .arrow_right{animation-name: arrow_click;  animation-duration: 0.75s;}
.s-41  .animation_picus2_5_3 .arrow_right{animation-name: arrow_click;  animation-duration: 0.75s;}




/*
.s-from-3.s-upto-14 .animation_picus2_5_3 .arrow_left{animation-name: arrow_click;  animation-duration: .8s; animation-iteration-count: 10;}

.s-from-16.s-upto-17 .animation_picus2_5_3 .arrow_left{animation-name: arrow_click;  animation-duration: .8s; animation-iteration-count: 1;}
.s-from-20.s-upto-21 .animation_picus2_5_3 .arrow_left{animation-name: arrow_click;  animation-duration: .8s; animation-iteration-count: 1;}

.animation_picus2_5_3 .touchpoint{ top: 55%; left: 20%; }
.animation_picus2_5_3 .touchpoint{transition-duration: 1s;}
.s-from-1  .animation_picus2_5_3 .touchpoint{ top: 33%;    left: 53.7%;}
.s-2  .animation_picus2_5_3 .touchpoint_click{animation-name: touchpoint_click;  animation-duration: 0.3s;}


.s-14  .animation_picus2_5_3 .touchpoint_click{animation-name: touchpoint_click;  animation-duration: 0.3s;}

.s-from-17  .animation_picus2_5_3 .touchpoint{ left: 50.2%;transition-duration: 0.3s;}
.s-18  .animation_picus2_5_3 .touchpoint_click{animation-name: touchpoint_click;  animation-duration: 0.3s;}

.s-from-21  .animation_picus2_5_3 .touchpoint{ left: 53.7%;}
.s-22  .animation_picus2_5_3 .touchpoint_click{animation-name: touchpoint_click;  animation-duration: 0.3s;}
*/