/*------------------------------------*\
             Text Effects
\*------------------------------------*/

/*selector models from past strategies*/
/*li .sd-text-effect_gradient, #edit-area .sd-text-effect_gradient, .enable-animation .sd-text-effect_gradient
li .sd-text-effect_gradient >> for slide smenue in editor side
#edit-area .sd-text-effect_gradient >> for edit surface
.enable-animation .sd-text-effect_gradient >> to limit this only for active slide in player*/


.sd-text-effect_gradient { -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); -moz-mask-image: -moz-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); mask-image: gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); }
.sd-text-effect_black-red-gradient , .sd-text-effect_black-red-gradient :nth-child(1n+1){ background: -webkit-linear-gradient(rgba(180,35,41,1), rgba(237,67,74,1)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.sd-text-effect_textglow {-webkit-text-shadow:0 0 1em #AAA; text-shadow: 0 0 1em #AAA; }
.sd-text-effect_shadow { text-shadow:2px 4px 6px black; }
.sd-text-effect_shadow-white { -webkit-text-shadow: 4px 4px 15px white; text-shadow: 4px 4px 15px white; }
.sd-text-effect_black-shadow { -webkit-text-shadow:0.02em 0.04em 0.06em black ; text-shadow:0.02em 0.04em 0.06em black ; }
.sd-text-effect_wshadow { -webkit-text-shadow: 3px 3px 0px rgba(255, 255, 255, 0.4), 6px 6px 0px rgba(255, 255, 255, 0.4); -moz-text-shadow: 3px 3px 0px rgba(255, 255, 255, 0.4), 6px 6px 0px rgba(255, 255, 255, 0.4); text-shadow: 3px 3px 0px rgba(255, 255, 255, 0.4), 6px 6px 0px rgba(255, 255, 255, 0.4); }

/*anaglyph*/
.sd-text-effect_anaglyph {
    text-shadow: -0.06em 0 red, 0.06em 0 cyan;
}

/*scuffed-steel*/
.sd-text-effect_scuffed-steel {
    -webkit-mask-image: url(../../../static/patterns/scuffed-steel.png);
    color: #acacac;
}

/*destruction*/
.sd-text-effect_destruction {
    -webkit-mask-image: url(../../../static/patterns/destruction.png);
    color: #000;
}

/*emboss*/
.sd-text-effect_emboss {
    text-shadow: 0px 1px 1px #fff, 0 -1px 1px #000;
    color: #ddd !important;
}

/*twirl-morph*/
#edit-area .sd-text-effect_morph, .enable-animation .sd-text-effect_morph {
    /*border-radius: 50%;*/
    -webkit-animation: text_twirl 5s linear infinite;
    -moz-animation: text_twirl 5s linear infinite;
    animation: text_twirl 5s linear infinite;
    -webkit-transform-origin: 50% 0%;
    /*transform-origin: 50% 0%;*/  
}

@-webkit-keyframes text_twirl {
  0% {
    border-radius: 50%;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); 
  }
  100% {
    border-radius: 50%;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes text_twirl {
  0% {
     border-radius: 50%;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); 

  }100% {
    border-radius: 50%;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/*@-webkit-keyframes text_twirl {
  0% 20% 50% 80% 100% {-webkit-transform: rotate(360deg) infinite;transform: rotate(360deg) infinite;}
}@keyframes text_twirl {
  0% 20% 50% 80% 100% {-webkit-transform: rotate(360deg) infinite;transform: rotate(360deg) infinite;}
}*/

/*bounce*/
#edit-area .sd-text-effect_bounce, .enable-animation .sd-text-effect_bounce {
    -webkit-animation: bounce 2s ease infinite;
    -moz-animation: bounce 2s ease infinite;
    animation: bounce 2s ease infinite;
}
 
/*3d-text*/
.sd-text-effect_3D-Text,  .sd-text-effect_3d-text{    
    text-shadow: 0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa,
    0 6px 1px rgba(0,0,0,.1),
    0 0 5px rgba(0,0,0,.1),
    0 1px 3px rgba(0,0,0,.3),
    0 3px 5px rgba(0,0,0,.2),
    0 5px 10px rgba(0,0,0,.25),
    0 10px 10px rgba(0,0,0,.2),
    0 20px 20px rgba(0,0,0,.15); 
}

/*scorallable*/
.sd-text-effect_scrollable { 
    overflow: auto;  
}

/*grow*/
#edit-area .sd-text-effect_grow-h, .enable-animation .sd-text-effect_grow-h  {    
    display: inline-block;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
#edit-area .sd-text-effect_grow-h:hover, .enable-animation .sd-text-effect_grow-h:hover {
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
}

.enable-animation.kill-animation * {
    -webkit-animation: none;
    -moz-animation: none;
    -ms-animation: none;
    animation: none;
    -webkit-transition: none;
    transition: none;
}

/*grow+ jumps to front of presentation when in hover*/
#edit-area .sd-text-effect_grow-plus-h, .enable-animation .sd-text-effect_grow-plus-h  {    
    display: inline-block;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
#edit-area .sd-text-effect_grow-plus-h:hover, .enable-animation .sd-text-effect_grow-plus-h:hover {
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
    z-index: 1000000000;
}
/*Shrink on hover*/
#edit-area .sd-text-effect_shrink-h, .enable-animation .sd-text-effect_shrink-h {    
    display: inline-block;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
#edit-area .sd-text-effect_shrink-h:hover, .enable-animation .sd-text-effect_shrink-h:hover {
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
}
/*Pulse on hover*/
#edit-area .sd-text-effect_pulse-h, .enable-animation .sd-text-effect_pulse-h {}
#edit-area .sd-text-effect_pulse-h:hover, .enable-animation .sd-text-effect_pulse-h:hover {
    -webkit-animation-name: pulse;
    -moz-animation-name: pulse;
    -ms-animation-name: pulse;
    animation-name: pulse;
    -webkit-animation-duration: 4s;
    -moz-animation-duration: 4s;
    -ms-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
#edit-area .sd-text-effect_pulse, .enable-animation .sd-text-effect_pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

#edit-area .sd-text-effect_bounce, .enable-animation .sd-text-effect_bounce {
    -webkit-animation: bounce 2s ease infinite;
    animation: bounce 2s ease infinite;
}

/*wobble vertical on hover*/
#edit-area .sd-text-effect_wobble-vertical-h, .enable-animation .sd-text-effect_wobble-vertical-h {
    display: inline-block;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
#edit-area .sd-text-effect_wobble-vertical-h:hover, .enable-animation .sd-text-effect_wobble-vertical-h:hover {
    -webkit-animation-name: wobble-vertical;
    animation-name: wobble-vertical;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;    
}
/*wobble horizontal on hover*/
#edit-area .sd-text-effect_wobble-horizontal-h, .enable-animation .sd-text-effect_wobble-horizontal-h {
    display: inline-block;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
#edit-area .sd-text-effect_wobble-horizontal-h:hover, .enable-animation .sd-text-effect_wobble-horizontal-h:hover {
    -webkit-animation-name: wobble-horizontal;
    animation-name: wobble-horizontal;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;    
}
/*buzz on hover*/
#edit-area .sd-text-effect_buzz-h, .enable-animation .sd-text-effect_buzz-h {
    display: inline-block; 
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
#edit-area .sd-text-effect_buzz-h:hover, .enable-animation .sd-text-effect_buzz-h:hover {
    -webkit-animation-name: buzz;
    animation-name: buzz;
    -webkit-animation-duration: 0.15s;
    animation-duration: 0.15s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
/*flash*/
#edit-area .sd-text-effect_flash, .enable-animation .sd-text-effect_flash {
    -webkit-animation:glowPulse 1.7s ease-out infinite;
    animation:glowPulse 1.7s ease-out infinite;
    text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;
}

/*rotate*/
#edit-area .sd-text-effect_rotate, .enable-animation .sd-text-effect_rotate {
    -webkit-animation:rotate_leftToRight 4s linear infinite;
    animation:rotate_leftToRight 4s linear infinite;
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}
/*blur-text*/
#edit-area .sd-text-effect_blur-text, .enable-animation .sd-text-effect_blur-text {
    -webkit-animation:text-blur 8s ease-out infinite;
    animation:text-blur 8s ease-out infinite;
    text-align: center;
}

/*twirl one time on Hover*/
#edit-area .sd-text-effect_morph-h, .enable-animation .sd-text-effect_morph-h {
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
}
#edit-area .sd-text-effect_morph-h:hover, .enable-animation .sd-text-effect_morph-h:hover {
    border-radius: 50%;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);   
}

/*twirl loop on Hover*/
#edit-area .sd-text-effect_morph-loop-h, .enable-animation .sd-text-effect_morph-loop-h {
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
}
#edit-area .sd-text-effect_morph-loop-h:hover, .enable-animation .sd-text-effect_morph-loop-h:hover {
    -webkit-animation: twirl-loop 5s linear infinite;
    -moz-animation: twirl-loop 5s linear infinite;
    animation: twirl-loop 5s linear infinite;     
}

@-webkit-keyframes twirl-loop {
  0% {
    border-radius: 50%;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); 
  }
  100% {
    border-radius: 50%;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes twirl-loop {
  0% {
     border-radius: 50%;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); 

  }100% {
    border-radius: 50%;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/*entrance effects- prevent entrance effects in player to show up static (and then to do the effect)*/ 
/*entrance effects that have naming convention -effect_entrance*/
#edit-area #scene [class*='-effect_entrance'], 
#scene .slide:not(.enable-animation) [class*='-effect_entrance'], 
/*entrance effects that DO NOT have naming convention -effect_entrance*/
#edit-area #scene .sd-text-effect_fade-in-left, 
#scene .slide:not(.enable-animation) .sd-text-effect_fade-in-left,
#edit-area #scene .sd-text-effect_collapse-in, 
#scene .slide:not(.enable-animation) .sd-text-effect_collapse-in, 
#edit-area #scene .sd-text-effect_fade-in-down, 
#scene .slide:not(.enable-animation) .sd-text-effect_fade-in-down,
/*#edit-area #scene  .sd-image-effect_out-down, */ 
/* .sd-image-effect_out-down appears on slide then does animation   */
#edit-area #scene .sd-text-effect_loading-effect,
#scene .slide:not(.enable-animation) .sd-text-effect_loading-effect,
/*#edit-area #scene .sd-image-effect_blur-to-sharp,
#scene .slide:not(.enable-animation) .sd-image-effect_blur-to-sharp,
#edit-area #scene .sd-image-effect_gray-to-color,
#scene .slide:not(.enable-animation) .sd-image-effect_gray-to-color,
#edit-area #scene .sd-image-effect_right-down,
#scene .slide:not(.enable-animation) .sd-image-effect_right-down,
#edit-area #scene .sd-image-effect_left-down,
#scene .slide:not(.enable-animation) .sd-image-effect_left-down, 
#edit-area #scene .sd-image-effect_sepia-to-color,
#scene .slide:not(.enable-animation).sd-image-effect_sepia-to-color,
#edit-area #scene .sd-image-effect_down-left,
#scene .slide:not(.enable-animation) .sd-image-effect_down-left,
#edit-area #scene .sd-image-effect_left-down,
#scene .slide:not(.enable-animation) .sd-image-effect_left-down,
#edit-area #scene .sd-image-effect_out-up,
#scene .slide:not(.enable-animation) .sd-image-effect_out-up,
#edit-area #scene .sd-image-effect_left-down,
#scene .slide:not(.enable-animation) .sd-image-effect_left-down,
#edit-area #scene .sd-image-effect_up-right,
#scene .slide:not(.enable-animation) .sd-image-effect_up-right, */
#edit-area #scene .sd-video-effect_blur-to-sharp,
#scene .slide:not(.enable-animation) .sd-video-effect_blur-to-sharp,
#edit-area #scene .sd-video-effect_gray-to-color,
#scene .slide:not(.enable-animation) .sd-video-effect_gray-to-color,
#edit-area #scene .sd-video-effect_sepia-to-color
#scene .slide:not(.enable-animation) .sd-video-effect_sepia-to-color
{
   display:none; 
   
}
/*  #edit-area #scene 
#scene .slide:not(.enable-animation) */

/* END - entrance effects- fix*/ 


#edit-area .sd-text-effect_entrance-from-above, .enable-animation .sd-text-effect_entrance-from-above {
    -webkit-animation:entrenceFromAbove 2s ease-in-out 0s forwards;
    -moz-animation:entrenceFromAbove 2s ease-in-out 0s forwards;
    -ms-animation:entrenceFromAbove 2s ease-in-out 0s forwards;
    animation:entrenceFromAbove 2s ease-in-out 0s forwards;
}

#edit-area .sd-text-effect_entrance-from-below, .enable-animation .sd-text-effect_entrance-from-below {
    -webkit-animation:entrenceFromBelow 2s ease-in-out 0s forwards;
    -moz-animation:entrenceFromBelow 2s ease-in-out 0s forwards;
    -ms-animation:entrenceFromBelow 2s ease-in-out 0s forwards;
    animation:entrenceFromBelow 2s ease-in-out 0s forwards;
}

#edit-area .sd-text-effect_entrance-from-right, .enable-animation .sd-text-effect_entrance-from-right {
    -webkit-animation:entrenceFromRight 2s ease-in-out 0s forwards;
    -moz-animation:entrenceFromRight 2s ease-in-out 0s forwards;
    -ms-animation:entrenceFromRight 2s ease-in-out 0s forwards;
    animation:entrenceFromRight 2s ease-in-out 0s forwards;
}

#edit-area .sd-text-effect_entrance-from-left, .enable-animation .sd-text-effect_entrance-from-left {
    -webkit-animation:entrenceFromLeft 2s ease-in-out 0s forwards;
    -moz-animation:entrenceFromLeft 2s ease-in-out 0s forwards;
    -ms-animation:entrenceFromLeft 2s ease-in-out 0s forwards;
    animation:entrenceFromLeft 2s ease-in-out 0s forwards;
}

#edit-area .sd-text-effect_entrance-fold-from-above, .enable-animation .sd-text-effect_entrance-fold-from-above{
    -webkit-animation:entrenceFoldFromAbove 2s ease-in-out 0s forwards;
    -moz-animation:entrenceFoldFromAbove 2s ease-in-out 0s forwards;
    -ms-animation:entrenceFoldFromAbove 2s ease-in-out 0s forwards;
    animation:entrenceFoldFromAbove 2s ease-in-out 0s forwards;
}
#edit-area .sd-text-effect_entrance-fold-from-below, .enable-animation .sd-text-effect_entrance-fold-from-below{
    -webkit-animation:entrenceFoldFromBelow 2s ease-in-out 0s forwards;
    -moz-animation:entrenceFoldFromBelow 2s ease-in-out 0s forwards;
    -ms-animation:entrenceFoldFromBelow 2s ease-in-out 0s forwards;
    animation:entrenceFoldFromBelow 2s ease-in-out 0s forwards;
}
#edit-area .sd-text-effect_entrance-appear-from-middle, .enable-animation .sd-text-effect_entrance-appear-from-middle{
    -webkit-animation:entrenceAppearFromMiddle 2s ease-in-out 0s forwards;
    -moz-animation:entrenceAppearFromMiddle 2s ease-in-out 0s forwards;
    -ms-animation:entrenceAppearFromMiddle 2s ease-in-out 0s forwards;
    animation:entrenceAppearFromMiddle 2s ease-in-out 0s forwards;
}


/*---------------- Parallax text effects---------------*/
.sd-text-effect_reveal-flip-from-left {
    visibility: hidden;
}
.sd-text-effect_reveal-flip-from-left li:before
{
  display:none;
}
#edit-area .sd-text-effect_reveal-flip-from-left :nth-child(1), .enable-animation .sd-text-effect_reveal-flip-from-left :nth-child(1){
    visibility: visible !important;
  transform-origin:left;
    transform: translateX(-150px) rotateY(50deg);
    animation: flip-from-left 1.5s both, slow-enlarge-text 4s forwards;
    animation-delay: 0s, 1s;
}
#edit-area .sd-text-effect_reveal-flip-from-left :nth-child(2), .enable-animation .sd-text-effect_reveal-flip-from-left :nth-child(2){
    visibility: visible !important;
  transform-origin:left;
    transform: translateX(-150px) rotateY(90deg);
    animation: flip-from-left 1.5s both, slow-enlarge-text 4s forwards;
    animation-delay: 0s, 1s;
}
#edit-area .sd-text-effect_reveal-flip-from-left :nth-child(3), .enable-animation .sd-text-effect_reveal-flip-from-left :nth-child(3){
    visibility: visible !important;
  transform-origin:left;
    transform: translateX(-150px) rotateY(130deg);
    animation: flip-from-left 1.5s both, slow-enlarge-text 4s forwards;
    animation-delay: 0s, 1s;
}
#edit-area .sd-text-effect_reveal-flip-from-left :nth-child(4), .enable-animation .sd-text-effect_reveal-flip-from-left :nth-child(4){
    visibility: visible !important;
  transform-origin:left;
    transform: translateX(-150px) rotateY(170deg);
    animation: flip-from-left 1.5s both, slow-enlarge-text 4s forwards;
    animation-delay: 0s, 1s;
}

@keyframes flip-from-left {
  0%{}
  50% {
    transform:  translate(0);
  }
  100%{transform: rotateY(0);}
}

.sd-text-effect_reveal-from-top {
    visibility: hidden;
}

#edit-area .sd-text-effect_reveal-from-top, .enable-animation .sd-text-effect_reveal-from-top {
    overflow:hidden;
    visibility: visible !important;
}
.sd-text-effect_reveal-from-top li:before
{
  display:none;
}
#edit-area .sd-text-effect_reveal-from-top li, .enable-animation .sd-text-effect_reveal-from-top li {
    visibility: visible !important;
    animation: revealFromTop 1s both, slow-enlarge-text 4s forwards;
    -webkit-animation: revealFromTop 1s both, slow-enlarge-text 4s forwards;
    animation-delay: 0s, 1s;
    -webkit-animation-delay: 0s, 1s;

}
@-webkit-keyframes revealFromTop {
  from {    
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {    
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes revealFromTop {
  from {    
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {    
    -webkit-transform: none;
    transform: none;
  }
}

.sd-text-effect_loading-effect {
    visibility: hidden;
}

#edit-area .sd-text-effect_loading-effect, .enable-animation .sd-text-effect_loading-effect {
    visibility: visible !important;
    text-align:center;
    margin: 49px auto;
    /*color: rgb(0,0,0);*/
    /*font-family: "Montserrat", sans-serif;*/
    /*animation: cssload-breathe 8.05s ease infinite;*/ 
    animation: cssload-breathe 8.05s ease forwards, slow-enlarge-text 4s forwards;    
    animation-delay: 0s, 8.05s;
    -webkit-animation-delay: 0s, 8.05s; 

}
@keyframes cssload-breathe {
    /*0% {
    letter-spacing: 0;
    text-shadow: 0 0 1px white;
    }
    30% {
    color: transparent;
    }*/
    /*50% {*/
    0% {
    letter-spacing: 97px;
    font-size: 0;
    text-shadow: 0 0 6px white;
    }
    60% {
    color: transparent;
    }
    100% {
    letter-spacing: 0;
    text-shadow: 0 0 1px white;
    }
}


@keyframes slow-reduce-text {
  0% {    transform: scale(1.1);    }    
  100% {transform:scale(1);}  
}
@keyframes slow-enlarge-text {
  0% {    transform: scale(1);    }    
  100% {transform:scale(1.07);}  
}
@-webkit-keyframes slow-enlarge-text {
  0% {    transform: scale(1);    }    
  100% {transform:scale(1.07);}  
}

.sd-text-effect_flip-in-x {
    visibility: hidden;
}
#edit-area .sd-text-effect_flip-in-x, .enable-animation .sd-text-effect_flip-in-x {
    
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation: flipInX 1.5s both, slow-enlarge-text 4s forwards;
    animation: flipInX 1.5s both, slow-enlarge-text 4s forwards;    
    animation-delay: 0s, 1.5s;
    -webkit-animation-delay: 0s, 1.5s;
    transform-origin:top;
    -webkit-transform-origin:top;
    visibility: visible !important;
}
@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.sd-text-effect_fade-in-down {
    visibility: hidden;
}
#edit-area .sd-text-effect_fade-in-down, .enable-animation .sd-text-effect_fade-in-down {
    animation: fadeInDown 1s both, slow-enlarge-text 4s forwards;    
    -webkit-animation: fadeInDown 1s both, slow-enlarge-text 4s forwards;    
    animation-delay: 0s, 1s;
    -webkit-animation-delay: 0s, 1s;
    visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}


#edit-area .sd-text-effect_fade-in-left, .enable-animation .sd-text-effect_fade-in-left {
    animation: fadeInLeft 1s ease-in-out both, slowGrow2 4s ease-out forwards;        
    animation-delay: 1s, 2s;
    -webkit-animation-delay: 1s, 2s;
    transform-origin: left;
    -webkit-transform-origin: left;
    visibility: visible !important;
}


@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) scale(1);
    transform: translate3d(-100%, 0, 0) scale(1);
  }
  
  100% {
    opacity: 1;
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
  }
}

@keyframes slowGrow2 {
 from {
    transform: scale(1.03);
 }
 to {    
    transform: scale(1.07);
  }
}

/*-----------------------------------------------------*/


/*------------------------------------*\
             Shape Effects
\*------------------------------------*/

/*Fade out-h*/
#edit-area .sd-shape-effect_fade-out-h, .enable-animation .sd-shape-effect_fade-out-h  {    
    /*display: inline-block;*/
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -ms-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
   /* -webkit-transition: all 1s ease !important;
    transition: all 1s ease !important; 8?*/
}
#edit-area .sd-shape-effect_fade-out-h:hover, .enable-animation .sd-shape-effect_fade-out-h:hover {
   -webkit-opacity: 0.25;
   -moz-opacity: 0.25;
   opacity: 0.25;
}

/*float Right Hover -  horizontal*/

#edit-area .sd-shape-effect_float-right-h, .enable-animation .sd-shape-effect_float-right-h {
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
}
#edit-area .sd-shape-effect_float-right-h:hover, .enable-animation .sd-shape-effect_float-right-h:hover {
    -webkit-transform: translateX(-22px);
    transform: translateX(-22px);
    -webkit-animation-name: hover-horizontal;
    animation-name: hover-horizontal;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

/*float up Hover - Vertical*/
#edit-area .sd-shape-effect_float-up-h, .enable-animation .sd-shape-effect_float-up-h {
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
}

#edit-area .sd-shape-effect_float-up-h:hover, .enable-animation .sd-shape-effect_float-up-h:hover {
    -webkit-transform: translateY(-22px);
    transform: translateY(-22px);
    -webkit-animation-name: hover-vertical;
    animation-name: hover-vertical;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

/*twirl-morph on hover*/
#edit-area .sd-shape-effect_morph-h, .enable-animation .sd-shape-effect_morph-h {
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
}
#edit-area .sd-shape-effect_morph-h:hover, .enable-animation .sd-shape-effect_morph-h:hover {
    border-radius: 50%;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);   
}

/*floating vertical*/
#edit-area .sd-shape-effect_floating-vertical, .enable-animation .sd-shape-effect_floating-vertical {
    -webkit-transform: translateY(-22px);
    transform: translateY(-22px);
    -webkit-animation-name: hover-vertical;
    animation-name: hover-vertical;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}
/*floating horizontal*/
#edit-area .sd-shape-effect_floating-horizontal, .enable-animation .sd-shape-effect_floating-horizontal {
    -webkit-transform: translateX(-22px);
    transform: translateX(-22px);
    -webkit-animation-name: hover-horizontal;
    animation-name: hover-horizontal;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}
/*stroke width*/
#edit-area .sd-shape-effect_stroke-width, .enable-animation .sd-shape-effect_stroke-width {
    -webkit-animation-name: stroke-width;
    animation-name: stroke-width;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}


/*Shape loop pulse*/
#edit-area .sd-shape-effect_pulse, .enable-animation .sd-shape-effect_pulse {
     -webkit-animation: shape-pulse 1.5s infinite ease-in-out alternate;
    animation: shape-pulse 1.5s infinite ease-in-out alternate; 
}

@-webkit-keyframes shape-pulse {
  25% { -webkit-transform: scale(0.9); }
  75% { -webkit-transform: scale(1.1); }
}
@-moz-keyframes shape-pulse {
  25% { -moz-transform: scale(0.9); }
  75% { -moz-transform: scale(1.1); }
}
@-ms-keyframes shape-pulse {
  25% { -ms-transform: scale(0.9); }
  75% { -ms-transform: scale(1.1); }
}
@keyframes shape-pulse {
  25% { transform: scale(0.9); }
  75% { transform: scale(1.1); }
}


/*stroke dash*/
#edit-area .sd-shape-effect_stroke-dash, .enable-animation .sd-shape-effect_stroke-dash {
    stroke-dasharray: 50px;
    -webkit-animation-name: stroke-dash;
    animation-name: stroke-dash;
    -webkit-animation-duration: 9s;
    animation-duration: 9s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.sd-shape-effect_big-dash  {
        stroke-dasharray: 50px;
}
.sd-shape-effect_medium-dash  {
        stroke-dasharray: 20px;
}
.sd-shape-effect_small-dash  {
        stroke-dasharray: 10px;
}

@-webkit-keyframes spinnerRotate
{
    from{-webkit-transform:rotate(0deg);}
    to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes spinnerRotate
{
    from{-moz-transform:rotate(0deg);}
    to{-moz-transform:rotate(360deg);}
}
@-ms-keyframes spinnerRotate
{
    from{-ms-transform:rotate(0deg);}
    to{-ms-transform:rotate(360deg);}
}

#edit-surface .sd-shape-effect_spin,
#scene .sd-shape-effect_spin /*.sd-shape-effect_spin*/{
    /*position:fixed;*/
    top:2%;
    left:0%;
    -webkit-animation-name: spinnerRotate;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spinnerRotate;
    -moz-animation-duration: 5s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spinnerRotate;
    -ms-animation-duration: 5s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
}

/* color to gray loop */
#edit-area .sd-shape-effect_color-to-gray, .enable-animation .sd-shape-effect_color-to-gray {
    -webkit-animation: color-to-gray 5s ease infinite;
    -moz-animation: color-to-gray 5s ease infinite;
    animation: color-to-gray 5s ease infinite; 
}

/* color to gray loop */
@-webkit-keyframes color-to-gray {
  0% {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
  }
  25% {
    filter: grayscale(25%);
    -webkit-filter: grayscale(25%);
  } 
  75% {
    filter: grayscale(75%);
    -webkit-filter: grayscale(75%);
  }      
  100% {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
  }
}

@keyframes color-to-gray {
  0% {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
  }
  25% {
    filter: grayscale(25%);
    -webkit-filter: grayscale(25%);
  } 
  75% {
    filter: grayscale(75%);
    -webkit-filter: grayscale(75%);
  }      
  100% {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
  }
}

/*fill color changes*/
#edit-area .sd-shape-effect_grad-fill, .enable-animation .sd-shape-effect_grad-fill {
    stroke-dasharray: 10px;
    -webkit-animation-name: grad-fill;
    animation-name: grad-fill;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

/*fill color changes for cloud template*/
#edit-area .sd-shape-effect_grad-fill-cloud, .enable-animation .sd-shape-effect_grad-fill-cloud {
    stroke-dasharray: 10px;
    -webkit-animation-name: grad-fill-cloud;
    animation-name: grad-fill-cloud;
    -webkit-animation-duration: 2.5s;
    animation-duration: 2.5s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

/*spotlight*/
#edit-area .sd-shape-effect_spotlight-dissapear, .enable-animation .sd-shape-effect_spotlight-dissapear{}
#edit-area .sd-shape-effect_spotlight-dissapear:hover, .enable-animation .sd-shape-effect_spotlight-dissapear:hover {
    -webkit-animation: spotlight 0.6s ease-in forwards;
    animation: spotlight 0.6s ease-in forwards;
}

/* Quiz Radial */
.sd-shape-effect_quiz-radial {
    border-radius: 78px;
}

/*------------------------------------*\
             Image Effects
\*------------------------------------*/

.sd-image-effect_glow { box-shadow: 0 0 4em #AAA;}
.sd-image-effect_saturate { -webkit-filter: saturate(3.3); }
.sd-image-effect_hue-rotate { -webkit-filter: hue-rotate(330deg); }
.sd-image-effect_shadow { -webkit-box-shadow: 3px 7px 27px #000000; -moz-box-shadow: 3px 7px 27px #000000; box-shadow: 3px 7px 27px #000000; }
.sd-image-effect_grayscale { -webkit-filter: grayscale(95%); -moz-filter: grayscale(95%); filter: grayscale(95%); }

/*flash*/
#edit-area .sd-image-effect_flash, .enable-animation .sd-image-effect_flash {
    -webkit-animation:glowPulse-image 1.7s ease-out infinite;
    animation:glowPulse-image 1.7s ease-out infinite;
    box-shadow: 7px 7px 5px #fff, 7px 7px 7px #fff;
}

/*Glow*/
.sd-image-effect_image-glow { box-shadow: 0 0 3em #AAA; }

/*Purple filter*/ /*sepia(1) hue-rotate(220deg) saturate(5) contrast(3) opacity(.5)*/ 
.sd-image-effect_purple-filter { 
     filter:sepia(1) hue-rotate(220deg) saturate(5) contrast(3) opacity(.5);
     -webkit-filter: sepia(1) hue-rotate(220deg) saturate(5) contrast(3) opacity(.5);

}

/*Stamp*/ /*grayscale(1) contrast(10) opacity(0.2)*/ 
.sd-image-effect_stamp { 
     filter:grayscale(1) contrast(10) opacity(0.2);
     -webkit-filter:grayscale(1) contrast(10) opacity(0.2);
}

/*Soft edge*/ 
.sd-image-effect_soft-edge:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width:100%;
    height: 100%; 
    background: transparent;
    box-shadow: 25px 25px 50px 0 white inset, -25px -25px 50px 0 white inset; 
}

/*Zoom Frame in*/
#edit-area .sd-image-effect_zoom-frame-in-h, .enable-animation .sd-image-effect_zoom-frame-in-h {
      overflow: hidden;
       
    }
#edit-area .sd-image-effect_zoom-frame-in-h .sd-element-image, .enable-animation .sd-image-effect_zoom-frame-in-h .sd-element-image {
      overflow: hidden;
      transform:scale(1.5);
          transform-origin: 50% 50%;
         -moz-transition: transform 1s ease;
        -ms-transition: transform 1s ease;
         transition: transform 1s ease;
    }
#edit-area .sd-image-effect_zoom-frame-in-h .sd-element-image:hover, .enable-animation .sd-image-effect_zoom-frame-in-h .sd-element-image:hover {
   
      transform:scale(1);
}

/*Zoom Frame Out*/
#edit-area .sd-image-effect_zoom-frame-out-h, .enable-animation .sd-image-effect_zoom-frame-out-h {
    overflow: hidden;
      /*width: 100% !important;
      height: 100% !important;*/
}
#edit-area .sd-image-effect_zoom-frame-out-h .sd-element-image:hover, .enable-animation .sd-image-effect_zoom-frame-out-h .sd-element-image:hover {
    -webkit-transition: all 1s ease;
         -moz-transition: all 1s ease;
           -o-transition: all 1s ease;
          -ms-transition: all 1s ease;
              transition: all 1s ease;
    width: 150% !important;
    height: 150% !important;
}


/*Tilt left*/
#edit-area .sd-image-effect_tilt-left-h, .enable-animation .sd-image-effect_tilt-left-h {
    overflow: hidden;
 
    }

#edit-area .sd-image-effect_tilt-left-h .sd-element-image{
     -webkit-transition: all 1s ease;
         -moz-transition: all 1s ease;
           -o-transition: all 1s ease;
          -ms-transition: all 1s ease;
              transition: all 1s ease;
     margin-left: 200px;
}

#edit-area .sd-image-effect_tilt-left-h .sd-element-image:hover, .enable-animation .sd-image-effect_tilt-left-h .sd-element-image:hover {
  margin-left:0;
}

/*Tilt up*/
#edit-area .sd-image-effect_tilt-up-h, .enable-animation .sd-image-effect_tilt-up-h {
    overflow: hidden;
    
}
#edit-area .sd-image-effect_tilt-up-h .sd-element-image, .enable-animation .sd-image-effect_tilt-up-h .sd-element-image{
     -webkit-transition: margin-top 1s ease;
         -moz-transition: margin-top 1s ease;
           -o-transition: margin-top 1s ease;
          -ms-transition: margin-top 1s ease;
              transition: margin-top 1s ease;
     margin-top: 0px;
}

#edit-area .sd-image-effect_tilt-up-h .sd-element-image:hover, .enable-animation .sd-image-effect_tilt-up-h .sd-element-image:hover {
    margin-top: -200px;
}

/*morph on hover*/
#edit-area .sd-image-effect_morph-h, .enable-animation .sd-image-effect_morph-h {
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
}
#edit-area .sd-image-effect_morph-h:hover, .enable-animation .sd-image-effect_morph-h:hover {
    border-radius: 50%;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);   
}

/*focus on hover*/
#edit-area .sd-image-effect_focus-h, .enable-animation .sd-image-effect_focus-h {
    -webkit-transition: all 1s ease !important;
    transition: all 1s ease !important;
}
#edit-area .sd-image-effect_focus-h:hover, .enable-animation .sd-image-effect_focus-h:hover {
    border-radius: 50%;
    border: 70px solid #000;
    -webkit-transform: translateX(-70px) translateY(-70px);
    transform: translateX(-35px) translateY(-35px);
}
/*grow on hover*/
#edit-area .sd-image-effect_shrink-h, .enable-animation .sd-image-effect_shrink-h {}
#edit-area .sd-image-effect_shrink-h:hover, .enable-animation .sd-image-effect_shrink-h:hover {
     -webkit-animation: growImage 4s linear infinite;
     -moz-animation: growImage 4s linear infinite;
    animation: growImage 4s linear infinite;
}
/*flip on hover*/
#edit-area .sd-image-effect_flip-h, .enable-animation .sd-image-effect_flip-h {}
#edit-area .sd-image-effect_flip-h:hover, .enable-animation .sd-image-effect_flip-h:hover {
     -webkit-animation: flipImage 2.5s linear infinite;
    animation: flipImage 2.5s linear infinite;
}
/*flip*/
#edit-area .sd-image-effect_flip, .enable-animation .sd-image-effect_flip {
    -webkit-animation: flipImage 2.5s linear infinite;
    animation: flipImage 2.5s linear infinite;
}

/*grayscale-h gray to color*/
#edit-area .sd-image-effect_grayscale-h, .enable-animation .sd-image-effect_grayscale-h {
    -webkit-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease !important; /* Fade to color for Chrome and Safari */ 
    transition: all .6s ease !important; 
}
#edit-area .sd-image-effect_grayscale-h:hover, .enable-animation .sd-image-effect_grayscale-h:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
}

/*blur*/
#edit-area .sd-image-effect_blur-h, .enable-animation .sd-image-effect_blur-h {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -webkit-transition: all .6s ease !important; 
    transition: all .6s ease !important; 
}
#edit-area .sd-image-effect_blur-h:hover, .enable-animation .sd-image-effect_blur-h:hover {
    filter: blur(0px);
    -webkit-filter: blur(0px);
}

/*Sepia to Color*/
#edit-area #scene .sd-image-effect_sepia-to-color, :not(.enable-animation) .sd-image-effect_sepia-to-color {
    filter: sepia(100%);
    -webkit-filter: sepia(100%);
    animation: none;
}

#edit-area .sd-image-effect_sepia-to-color, .enable-animation .sd-image-effect_sepia-to-color {
    filter: sepia(0%);
    -webkit-filter: sepia(0%);
    animation: sepia-to-color 2s ease-in;
}
@keyframes sepia-to-color {
  0% {filter: sepia(100%);
    -webkit-filter: sepia(100%);
  }
  50% {filter: sepia(75%);
    -webkit-filter: sepia(75%);
  }
  100% {filter: sepia(0%);
    -webkit-filter: sepia(0%);
  }
}


/*sepia*/
#edit-area .sd-image-effect_sepia-h, .enable-animation .sd-image-effect_sepia-h {
    filter: sepia(100%);
    -webkit-filter: sepia(100%);
    -webkit-transition: all .6s ease !important; 
    transition: all .6s ease !important; 
}
#edit-area .sd-image-effect_sepia-h:hover, .enable-animation .sd-image-effect_sepia-h:hover {
    filter: sepia(0%);
    -webkit-filter: sepia(0%);
}
/*circle fadein*/
#edit-area .sd-image-effect_circle-fadein::after, .enable-animation .sd-image-effect_circle-fadein::after {
    box-shadow: 
            0px 0px 3px rgba(0,0,0,0.6),
        0px 0px 0px 40px rgba(0,0,0,0.3) inset;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
#edit-area .sd-image-effect_circle-fadein:hover, .enable-animation .sd-image-effect_circle-fadein:hover {
        opacity: 1.0;
    box-shadow: 
        0px 0px 3px rgba(0,0,0,0.6),
        0px 0px 0px 0px rgba(0,0,0,0.1) inset;
}
/*gelatine*/
#edit-area .sd-image-effect_gelatine, .enable-animation .sd-image-effect_gelatine {
    -webkit-animation: gelatine 0.5s infinite;
    animation: gelatine 0.5s infinite;
}
/*pulse*/
#edit-area .sd-image-effect_pulse, .enable-animation .sd-image-effect_pulse {
    -webkit-animation: pulse 1.5s infinite ease-in-out alternate;
    animation: pulse 1.5s infinite ease-in-out alternate; 
}
/*hithere*/
#edit-area .sd-image-effect_hithere, .enable-animation .sd-image-effect_hithere {
    
}
#edit-area .sd-image-effect_hithere:hover, .enable-animation .sd-image-effect_hithere:hover {
    -webkit-animation: hithere 1s ease infinite;
    -moz-animation: hithere 1s ease infinite;
    -ms-animation: hithere 1s ease infinite;
    animation: hithere 1s ease infinite;
}
/*bounce*/
#edit-area .sd-image-effect_bounce, .enable-animation .sd-image-effect_bounce {
    -webkit-animation: bounce 2s ease infinite;
    -moz-animation: bounce 2s ease infinite;
    animation: bounce 2s ease infinite;
}
/*hinge-h*/
#edit-area .sd-image-effect_hinge-h, .enable-animation .sd-image-effect_hinge-h {

}
#edit-area .sd-image-effect_hinge-h:hover, .enable-animation .sd-image-effect_hinge-h:hover {
    -webkit-animation: hinge 3s ease infinite;
    animation: hinge 3s ease infinite;
}
/*grow-h*/
#edit-area .sd-image-effect_grow-h, .enable-animation .sd-image-effect_grow-h  {    
    display: inline-block;
    -webkit-transition: all 1s ease !important;
    transition: all 1s ease !important; 
}
#edit-area .edit-wrapper:hover .sd-image-effect_grow-h, .enable-animation .edit-wrapper:hover .sd-image-effect_grow-h {
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
}

/*#edit-area .sd-image-effect_grow-h, .enable-animation .sd-image-effect_grow-h  {    
    display: inline-block;
    -webkit-transition: all 1s ease !important;
    transition: all 1s ease !important; 
}
#edit-area .sd-image-effect_grow-h:hover, .enable-animation .sd-image-effect_grow-h:hover {
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
}*/
/*grow-plus-h*/
#edit-area .sd-image-effect_grow-plus-h, .enable-animation .sd-image-effect_grow-plus-h  {    
    display: inline-block;
    -webkit-transition: all 1s ease !important;
    transition: all 1s ease !important; 
}
#edit-area .sd-image-effect_grow-plus-h:hover, .enable-animation .sd-image-effect_grow-plus-h:hover {
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
    z-index: 1000000000;
}
/*sepia*/
.sd-image-effect_sepia {
    -webkit-filter: sepia(1);
    filter: sepia(1);
}
/*drop-shadow*/
.sd-image-effect_drop-shadow {  
    -webkit-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    3px 3px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         3px 3px 5px 0px rgba(50, 50, 50, 0.75);
}

/* cut image to the rigth */
 #edit-area .sd-image-effect_right-diagnol-crop, .enable-animation .sd-image-effect_right-diagnol-crop{
    -webkit-clip-path: polygon(0% 0%, 53% 1%, 100% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 53% 1%, 100% 100%, 0% 100%);
 }

/* constant blur */
.sd-image-effect_blur {
    filter: blur(5px);
    -webkit-filter: blur(5px);
}

/* blur to sharp*/


#edit-area #scene .sd-image-effect_blur-to-sharp, :not(.enable-animation) .sd-image-effect_blur-to-sharp {
    filter: blur(5px);
    -webkit-filter: blur(5px);
}


#edit-area .sd-image-effect_blur-to-sharp, .enable-animation .sd-image-effect_blur-to-sharp {
    filter: blur(0px);
    -webkit-filter: blur(0px);
    animation: blur-to-sharp 1s ease-in;
}
@keyframes blur-to-sharp {
  0% {filter: blur(5px);
          -webkit-filter: blur(5px);
  }
  50% {filter: blur(3px);
          -webkit-filter: blur(5px);
  }
  100% {filter: blur(0px);
          -webkit-filter: blur(0px);
  }
}


/* Radial */
.sd-image-effect_radial {
    border-radius: 300px;
}

/* Quiz Radial */
.sd-image-effect_quiz-radial {
    border-radius: 78px;
}

/*Auto Scroll old did not work; */
/*#edit-area .sd-image-effect_auto-scroll-up:hover, */
/*.enable-animation .sd-image-effect_auto-scroll-up:hover {
    animation: Auto-Scroll 17s ease-out forwards;
    -webkit-animation: Auto-Scroll 17s ease-out forwards;
    -moz-transform-origin: 0 0 0;
    -webkit-transform-origin: 0 0 0;
    transform-origin: 0 0 0;
}*/

/*Auto Scroll - Pan up*/
#edit-area .sd-image-effect_auto-scroll-up-h, .enable-animation .sd-image-effect_auto-scroll-up-h {
    -webkit-transition: 0.7s;
    -ms-transition: 0.7s;
    -moz-transition: 0.7s;
     transition: 0.7s;
}
#edit-area .sd-image-effect_auto-scroll-up-h:hover, .enable-animation .sd-image-effect_auto-scroll-up-h:hover {
    -webkit-transform: translateY(-50%) translateX(0) translateZ(0);
    transform: translateY(-50%) translateX(0) translateZ(0);
}

/*Twist And Grow On Hover*/
 #edit-area .sd-image-effect_twist-on-hover, .enable-animation .sd-image-effect_twist-on-hover {
  -webkit-transition: 0.7s;
  -ms-transition: 0.7s;
  -moz-transition: 0.7s;
  transition: 0.7s;
}
 #edit-area .sd-image-effect_twist-on-hover:hover, .enable-animation .sd-image-effect_twist-on-hover:hover {
  -webkit-transform: rotate(-9deg) scale(1.35);
  -ms-transform: rotate(-9deg) scale(1.35);
  -moz-transform: rotate(-9deg) scale(1.35);
  transform: rotate(-9deg) scale(1.35);
}

/*Twist And Grow On Hover*/
 #edit-area .sd-image-effect_slow-growth, .enable-animation .sd-image-effect_slow-growth {
  -webkit-transition: 15s linear;
  -ms-transition: 15s linear;
  -moz-transition: 15s linear;
  transition: 15s linear;
  -webkit-transform: scale(1.25);
  -ms-transform: scale(1.25);
  -moz-transform: scale(1.25);
  transform: scale(1.25);
}

/* slow enlarge */

#edit-surface .sd-image-effect_slow-enlarge, .enable-animation .sd-image-effect_slow-enlarge {
  transform-origin:50% 50%;
  animation: slow-enlarge 100s infinite linear;  
}

@keyframes slow-enlarge {
  0% {    transform: scale(1);    }    
  50% {transform:scale(1.2);}
  100%{transform:scale(1);}
}


/* slow enlarge with twist */
#edit-area .sd-image-effect_slow-enlarge-twist, .transtion-done .sd-image-effect_slow-enlarge-twist {
  transform-origin:50% 50%;
animation: slow-enlarge-twist 100s infinite linear;  
}

@keyframes slow-enlarge-twist {
  0% {    transform: scale(1) rotate(0deg);    }    
  50% {transform:scale(1.2) rotate(20deg);}
  100%{transform:scale(1) rotate(0deg);}
}

/*////////////////// Round 2 of Parallax effects //////////////////*/
/*
    .sd-image-effect_out-up
    .sd-image-effect_up-right
    .sd-image-effect_left-down
    .sd-image-effect_down-left
    .sd-image-effect_right-down
    .sd-image-effect_out-down
    */
/* OUT UP */
/* In order for the image not to move up on top, I had to shift the transform origin by 240px for an 1920x1080 image*/

#edit-area #scene .sd-image-effect_out-up1, :not(.enable-animation)  .sd-image-effect_out-up1 { /* Should start already at transition start */
    transform-origin: 100% 240px;
    transform: scale(1.0) translateY(0);
    animation: none;
}

#edit-area .sd-image-effect_out-up1, .enable-animation  .sd-image-effect_out-up1 { /* Should start already at transition start */
    transform-origin: 100% 240px;
    animation: out-up-imagen 8s ease-in both;
}
@keyframes out-up-imagen {
    0% {    transform: scale(1.0) translateY(0);    }    
  /*50% {transform:scale(1.05) translateY(-25px);}  */
  100% {transform:scale(1.05) translateY(-35px);}
}

/*  old effect - keep for backward compatibility - replaced with sd-image-effect_out-up1*/
#edit-area #scene .sd-image-effect_out-up, :not(.enable-animation)  .sd-image-effect_out-up { /* Should start already at transition start */
    transform-origin: 50% 240px;
    transform: scale(1.2) translateY(0);
    animation: none;
}

#edit-area .sd-image-effect_out-up, .enable-animation  .sd-image-effect_out-up { /* Should start already at transition start */
    transform-origin: 50% 240px;
    animation: out-up-image 8s ease-in both;
}
@keyframes out-up-image {
    0% {    transform: scale(1.2) translateY(0);    }    
  50% {transform:scale(1.25) translateY(-25px);}  
  100% {transform:scale(1.28) translateY(-35px);}
}
/* UP RIGHT - adapted for full-screen full-hd images*/

#edit-area #scene .sd-image-effect_up-right1, :not(.enable-animation) .sd-image-effect_up-right1 {
  transform-origin:50% 840px;
  transform: scale(1.0) translateY(0);
  animation: none;  
}

#edit-area .sd-image-effect_up-right1, .enable-animation  .sd-image-effect_up-right1 {
  transform-origin:50% 840px;
animation: up-right-imagen 8s ease-in both;  
}
@keyframes up-right-imagen {
  0% {    transform: scale(1.0) translateY(0);    }      
  100% {transform:scale(1.05) translateY(-25px);}  

}

/*  old effect - keep for backward compatibility - replaced with sd-image-effect_up-right1*/
#edit-area #scene .sd-image-effect_up-right, :not(.enable-animation) .sd-image-effect_up-right {
  transform-origin:50% 840px;
  transform: scale(1.2) translateY(0);
  animation: none;  
}

#edit-area .sd-image-effect_up-right, .enable-animation  .sd-image-effect_up-right {
  transform-origin:50% 840px;
animation: up-right-image 8s ease-in both;  
}
@keyframes up-right-image {
  0% {    transform: scale(1.2) translateY(0);    }      
  100% {transform:scale(1.28) translateY(-25px);}  

}

/* LEFT DOWN */

#edit-area #scene .sd-image-effect_left-down1, :not(.enable-animation)  .sd-image-effect_left-down1 {
    transform-origin:10% 50%;
    transform: scale(1.0) translateX(0);
    animation: none; 
}

#edit-area .sd-image-effect_left-down1, /*.transtion-done*/.enable-animation  .sd-image-effect_left-down1 {
    transform-origin:10% 50%;
    animation: left-down-imagen 8s ease-in both;  
}
@keyframes left-down-imagen {
  0% {    transform: scale(1.0) translateX(0);    }       
  100% {transform:scale(1.05) translateX(30px);}  
}

/*  old effect - keep for backward compatibility - replaced with sd-image-effect_up-right1*/
#edit-area #scene .sd-image-effect_left-down, :not(.enable-animation)  .sd-image-effect_left-down {
    transform-origin:10% 50%;
    transform: scale(1.3) translateX(0);
    animation: none; 
}

#edit-area .sd-image-effect_left-down, /*.transtion-done*/.enable-animation  .sd-image-effect_left-down {
    transform-origin:10% 50%;
    animation: left-down-image 8s ease-in both;  
}
@keyframes left-down-image {
  0% {    transform: scale(1.3) translateX(0);    }       
  100% {transform:scale(1.38) translateX(30px);}  
}

/* DOWN LEFT */

#edit-area #scene .sd-image-effect_down-left1, :not(.enable-animation)  .sd-image-effect_down-left1 {
    transform-origin:100% 50%;
    transform: scale(1.0) translateY(0);
    animation: none;  
}

#edit-area .sd-image-effect_down-left1, /*.transtion-done*/.enable-animation  .sd-image-effect_down-left1 {
    transform-origin:100% 50%;
    transform: scale(1.0) translateY(0);
    animation: down-left-imagen 8s ease-in both;  
}
@keyframes down-left-imagen {
  0% {    transform: scale(1.0) translateY(0);    }      
  100% {transform:scale(1.07) translateY(20px);}  
}

/*  old effect - keep for backward compatibility - replaced with sd-image-effect_up-right1*/
#edit-area #scene .sd-image-effect_down-left, :not(.enable-animation)  .sd-image-effect_down-left {
    transform-origin:50% 50%;
    transform: scale(1.2) translateY(0);
    animation: none;  
}

#edit-area .sd-image-effect_down-left, /*.transtion-done*/.enable-animation  .sd-image-effect_down-left {
    transform-origin:50% 50%;
    transform: scale(1.2) translateY(0);
    animation: down-left-image 8s ease-in both;  
}
@keyframes down-left-image {
  0% {    transform: scale(1.2) translateY(0);    }      
  100% {transform:scale(1.28) translateY(20px);}  
}

/* RIGHT DOWN */

#edit-area #scene .sd-image-effect_right-down1, :not(.enable-animation)  .sd-image-effect_right-down1 {
    transform-origin:100% 50%;
    transform: scale(1.0) translateX(0);
    animation: none;  
}

#edit-area .sd-image-effect_right-down1, .enable-animation  .sd-image-effect_right-down1 {
    transform-origin:100% 50%;
    animation: right-down-imagen 8s ease-in both;  
}
@keyframes right-down-imagen {
  0% {    transform: scale(1.0) translateX(0);    }      
  100% {transform:scale(1.05) translateX(-65px);}  
}

/*  old effect - keep for backward compatibility - replaced with sd-image-effect_right-down1*/
#edit-area #scene .sd-image-effect_right-down, :not(.enable-animation)  .sd-image-effect_right-down {
    transform-origin:70% 50%;
    transform: scale(1.4) translateX(0);
    animation: none;  
}

#edit-area .sd-image-effect_right-down, .enable-animation  .sd-image-effect_right-down {
    transform-origin:70% 50%;
    animation: right-down-image 8s ease-in both;  
}
@keyframes right-down-image {
  0% {    transform: scale(1.4) translateX(0);    }      
  100% {transform:scale(1.37) translateX(-65px);}  
}


/*gray to color*/

#edit-area #scene .sd-image-effect_gray-to-color, :not(.enable-animation) .sd-image-effect_gray-to-color {
filter: grayscale(100%); /* IE6-9 */
    -webkit-filter: grayscale(100%);
}  

#edit-area .sd-image-effect_gray-to-color, .enable-animation .sd-image-effect_gray-to-color {
    /*-webkit-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
    filter: grayscale(0%); /* IE6-9 */
    -webkit-filter: grayscale(0%); /* Chrome 19+ & Safari 6+ */
    animation: gray-to-color-image 2s ease-in;  
}
@keyframes gray-to-color-image {
  0% {filter: grayscale(100%);
    -webkit-filter: grayscale(100%); }
 25% {filter: grayscale(1000%);
    -webkit-filter: grayscale(1000%); }  
  50% {filter: grayscale(80%);
    -webkit-filter: grayscale(80%); }
  75% {filter: grayscale(40%);
    -webkit-filter: grayscale(40%); }        
  100% {filter: none; 
    -webkit-filter: grayscale(0%); }  
}

/* OUT DOWN */
#edit-area .sd-image-effect_out-down1, /*.transtion-done*/.enable-animation  .sd-image-effect_out-down1 {
    transform-origin:50% 50%;
    animation: out-down-imagen 8s ease-in both;  
}

#edit-area #scene  .sd-image-effect_out-down1,
#scene .slide:not(.enable-animation) .sd-image-effect_out-down1{
  animation:none;
  transform: scale(1.0) translateY(0); 
}

@keyframes out-down-imagen {
  0% {    transform: scale(1.0) translateY(0);    }      
  100% {transform:scale(1.07) translateY(-45px);}  
}

/*  old effect - keep for backward compatibility - replaced with sd-image-effect_out-down1*/
#edit-area .sd-image-effect_out-down, /*.transtion-done*/.enable-animation  .sd-image-effect_out-down {
    transform-origin:50% 50%;
    animation: out-down-image 8s ease-in both;  
}

#edit-area #scene  .sd-image-effect_out-down,
#scene .slide:not(.enable-animation) .sd-image-effect_out-down{
  animation:none;
  transform: scale(1.2) translateY(0); 
}

@keyframes out-down-image {
  0% {    transform: scale(1.2) translateY(0);    }      
  100% {transform:scale(1.12) translateY(-45px);}  
}



/*/////////////////////////////////////////////////////////////////////*/

/* collapse text in */
/*#edit-area .sd-text-effect_collapse-in, .enable-animation .sd-text-effect_collapse-in {
  transform-origin:50% 50%;
  animation: text-zoom-out 0.5s ease-in-out both, slow-enlarge 100s infinite linear forwards;  
  animation-delay: 0s, 0.5s;
}*/

/* collapse text in */
#edit-area .sd-text-effect_collapse-in, .enable-animation .sd-text-effect_collapse-in {
/*#edit-area .sd-text-effect_collapse-in, .transtion-done .sd-text-effect_collapse-in {*/
  transform-origin:50% 50%;
  animation: text-zoom-out 0.5s ease-in-out both, slow-reduce-text 4s cubic-bezier(.07,.82,.03,1) forwards;  
  animation-delay: 0s, 0.5s;
}



@keyframes text-zoom-out {
   0% {    transform: scale(20);  opacity:0;    }      
  100%{transform:scale(1.1); opacity:1;}
}


/* test with masking in chrome
.sd-image-effect_tri-shape-1{
    clip-path: url("https://resources.emaze.com/vbcommon/css/animations.css?v=V3.0.8582.636492053233727274#tri-shape-1");
    -webkit-clip-path: polygon(34% 0px, 56% 0px, 92% 33%, 35% 100%);
}
.sd-image-effect_tri-shape-2{
    clip-path: url("https://resources.emaze.com/vbcommon/css/animations.css?v=V3.0.8582.636492053233727274#tri-shape-2");
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.sd-image-effect_tri-shape-3{
   clip-path: url("https://resources.emaze.com/vbcommon/css/animations.css?v=V3.0.8582.636492053233727274#tri-shape-3");
   -webkit-clip-path: polygon(0 0, 41% 47%, 0 100%);
}
.sd-image-effect_conus-pattern{
-webkit-mask: url("https://resources.emaze.com/vbcommon/travel-agency/css/amir_cones.png");
}
.sd-image-effect_plane{
-webkit-mask: url("https://resources.emaze.com/vbcommon/travel-agency/css/airplane.png");
-webkit-mask-size: 100%;
}
.sd-image-effect_conus{
-webkit-mask: url("https://resources.emaze.com/vbcommon/travel-agency/css/amir_cones.png");
-webkit-mask-size: 100%;
}
*/


/*------------------------------------*\
                video
\*------------------------------------*/

.sd-video-effect_shadow { 
     -webkit-box-shadow: 3px 7px 27px #000000; -moz-box-shadow: 3px 7px 27px #000000; box-shadow: 3px 7px 27px #000000; 
 }
 
.sd-video-effect_grayscale { 
     -webkit-filter: grayscale(95%); -moz-filter: grayscale(95%); filter: grayscale(95%); 
 }
 
.sd-video-effect_sepia { 
     -webkit-filter: sepia(0.9); -moz-filter: sepia(0.9); filter: sepia(0.9); 
}
 
/* Quiz Radial */
.sd-video-effect_quiz-radial {
    border-radius: 78px;
}

/* blur to sharp - Video*/
#edit-area .sd-video-effect_blur-to-sharp, .enable-animation .sd-video-effect_blur-to-sharp {
    filter: blur(0px);
    -webkit-filter: blur(0px);
    animation: blur-to-sharp 2s;
}
@keyframes blur-to-sharp {
  0% {filter: blur(5px);
          -webkit-filter: blur(5px);
  }
  50% {filter: blur(3px);
          -webkit-filter: blur(5px);
  }
  100% {filter: blur(0px);
          -webkit-filter: blur(0px);
  }
}


/*gray to color*/
#edit-area .sd-video-effect_gray-to-color, .enable-animation .sd-video-effect_gray-to-color {
    filter: grayscale(0%); /* IE6-9 */
    -webkit-filter: grayscale(0%); /* Chrome 19+ & Safari 6+ */
    animation: gray-to-color-video 2s ease;  
}
@keyframes gray-to-color-video {
  0% {filter: grayscale(100%);
    -webkit-filter: grayscale(100%); }
 25% {filter: grayscale(1000%);
    -webkit-filter: grayscale(1000%); }  
  50% {filter: grayscale(80%);
    -webkit-filter: grayscale(80%); }
  75% {filter: grayscale(40%);
    -webkit-filter: grayscale(40%); }        
  100% {filter: none; 
    -webkit-filter: grayscale(0%); }  
}

/*Sepia to Color*/

#edit-area .sd-video-effect_sepia-to-color, .enable-animation .sd-video-effect_sepia-to-color {
    filter: sepia(0%);
    -webkit-filter: sepia(0%);
    animation: sepia-to-color-video 5s;
}


#edit-area .sd-video-effect_sepia-to-color, .enable-animation .sd-video-effect_sepia-to-color {
    filter: sepia(0%);
    -webkit-filter: sepia(0%);
    animation: sepia-to-color-video 2s;
}
@keyframes sepia-to-color-video {
  0% {filter: sepia(100%);
    -webkit-filter: sepia(100%);
  }
  50% {filter: sepia(75%);
    -webkit-filter: sepia(75%);
  }
  100% {filter: sepia(0%);
    -webkit-filter: sepia(0%);
  }
}

/*Glow*/
.sd-video-effect_glow { -webkit-box-shadow:0 0 1em #AAA;box-shadow: 0 0 1em #AAA; }

/*Purple filter*/ /*sepia(1) hue-rotate(220deg) saturate(5) contrast(3) opacity(.5)*/ 
.sd-video-effect_purple-filter { 
     filter:sepia(100%) hue-rotate(220deg) saturate(5) contrast(3) opacity(.5);
     -webkit-filter: sepia(1) hue-rotate(220deg) saturate(5) contrast(3) opacity(.5);
}

/*Stamp*/ /*grayscale(1) contrast(10) opacity(0.2)*/ 
.sd-video-effect_stamp { 
     filter:grayscale(1) contrast(10) opacity(0.2);
     -webkit-filter: grayscale(1) contrast(10) opacity(0.2);
}



/*Saturate */ /*.saturate { -webkit-filter: saturate(4); filter: saturate(4); } */
.sd-video-effect_saturate { -webkit-filter: saturate(4); filter: saturate(4);}

/*stroke dash-loop*/
#edit-area .sd-video-effect_stroke-dash, .enable-animation .sd-video-effect_stroke-dash {
    stroke-dasharray: 50px;
    -webkit-animation-name: stroke-dash;
    animation-name: stroke-dash;
    -webkit-animation-duration: 9s;
    animation-duration: 9s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}

/*stroke Long dash*/
.sd-video-effect_big-dash  {
       border-style:dashed;
}
.sd-video-effect_medium-dash  {
        stroke-dasharray: 20px;
}
.sd-video-effect_small-dash  {
        stroke-dasharray: 10px;
}

/*Hue*/
.sd-video-effect_hue-rotate { -webkit-filter: hue-rotate(330deg); }

/*Soft edge*/ 
.sd-video-effect_soft-edge { 
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width:100%;
    height: 100%; 
    background: transparent;
    box-shadow: 25px 25px 50px 0 white inset, -25px -25px 50px 0 white inset; 
}

/*------------------------------------*\
        test erea
\*------------------------------------*/

#wrapper .sd-text-effect_test-note {
    color: black;
    font-family: 'varela-round', 'RobotoExt', 'å Žæ–‡ç»†é»‘', 'STXihei', 'NotoSansDevanagari', 'NotoNaskhArabic', 'Roboto-Cyrillic', 'Roboto-Cyrillic-Ext', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','Osaka', 'メイリオ', 'Meiryo', 'ï¼­ï¼³ Ｐゴシック', 'MS PGothic', 'almoni-dl-aaa-400'; line-height: 1.1em;
    font-weight: 100;
    border: 1px solid black;
    border-radius: 5px; 
    background-color: rgba(0,0,0,0.4);
    visibility: visible;
}

    #wrapper .sd-text-effect_test-note:after {
  content: 'notes do not show on play';
  position: absolute;
  font-size: 35px;
  top: -29%;
  right: 0;
  transform: rotate(18deg);
  visibility: hidden;
  transition: 0.3s;
    }

    #wrapper .sd-text-effect_test-note:hover:after {
        visibility: visible;
    }

.sd-text-effect_test-note {
    visibility: hidden;
}

#wrapper .sd-shape-effect_test-note{
    opacity: 0.4;
    visibility: visible;
}

.sd-shape-effect_test-note {
    visibility: hidden;
}

/* removed
.sd-text-effect_none:before, #sd-text-effect .sd-text-effect_none:before { content: 'None'; }
*/
/*------------------------------------*\
        Dropdown menu Overrides
\*------------------------------------*/

/* text */
[dropdown='sd-text-effect'] .sd-text-effect_none:before, #sd-text-effect .sd-text-effect_none:before { content: 'None'; }
[dropdown='sd-text-effect'] .sd-text-effect_scorallable:before, #sd-text-effect .sd-text-effect_scorallable:before { content: 'Scroll'; }
[dropdown='sd-text-effect'] .sd-text-effect_shadow:before, #sd-text-effect .sd-text-effect_shadow:before { content: 'Shadow'; }
[dropdown='sd-text-effect'] .sd-text-effect_shadow-white:before, #sd-text-effect .sd-text-effect_shadow-white:before { content: 'White Shadow'; }
[dropdown='sd-text-effect'] .sd-text-effect_black-shadow:before, #sd-text-effect .sd-text-effect_black-shadow:before { content: 'Black Shadow'; }
[dropdown='sd-text-effect'] .sd-text-effect_wshadow:before, #sd-text-effect .sd-text-effect_wshadow:before { content: 'wShadow'; }
[dropdown='sd-text-effect'] .sd-text-effect_gradient:before, #sd-text-effect .sd-text-effect_gradient:before { content: 'Gradient *'; }
[dropdown='sd-text-effect'] .sd-text-effect_black-red-gradient:before, #sd-text-effect .sd-text-effect_black-red-gradient:before { content: 'Black to Red *'; }
[dropdown='sd-text-effect'] .sd-text-effect_textglow:before, #sd-text-effect .sd-text-effect_textglow:before { content: 'Glow'; }
[dropdown='sd-text-effect'] .sd-text-effect_3D-Text:before, #sd-text-effect .sd-text-effect_3D-Text:before { content: '3D Text'; }
[dropdown='sd-text-effect'] .sd-text-effect_grow-h:before, #sd-text-effect .sd-text-effect_grow-h:before { content: 'Grow (Hover)'; }
[dropdown='sd-text-effect'] .sd-text-effect_grow-plus-h:before, #sd-text-effect .sd-text-effect_grow-plus-h:before { content: 'Grow + (Hover)'; }
[dropdown='sd-text-effect'] .sd-text-effect_shrink-h:before, #sd-text-effect .sd-text-effect_shrink-h:before { content: 'Shrink (Hover)'; }
[dropdown='sd-text-effect'] .sd-text-effect_pulse-h:before, #sd-text-effect .sd-text-effect_pulse-h:before { content: 'Pulse (Hover)'; }
[dropdown='sd-text-effect'] .sd-text-effect_wobble-vertical-h:before, #sd-text-effect .sd-text-effect_wobble-vertical-h:before { content: 'V-Wobble (Hover)'; }
[dropdown='sd-text-effect'] .sd-text-effect_wobble-horizontal-h:before, #sd-text-effect .sd-text-effect_wobble-horizontal-h:before { content: 'H-Wobble (Hover)'; }
[dropdown='sd-text-effect'] .sd-text-effect_buzz-h:before, #sd-text-effect .sd-text-effect_buzz-h:before { content: 'Buzz (Hover)'; }
[dropdown='sd-text-effect'] .sd-text-effect_morph-h:before, #sd-text-effect .sd-text-effect_morph-h:before { content: 'Twirl (Hover)'; }
[dropdown='sd-text-effect'] .sd-text-effect_flash:before, #sd-text-effect .sd-text-effect_flash:before { content: 'Flash (Loop)'; }
[dropdown='sd-text-effect'] .sd-text-effect_rotate:before, #sd-text-effect .sd-text-effect_rotate:before { content: '3D Rotate (Loop)'; }
[dropdown='sd-text-effect'] .sd-text-effect_blur-text:before, #sd-text-effect .sd-text-effect_blur-text:before { content: 'Blur *(Loop)'; }
[dropdown='sd-text-effect'] .sd-text-effect_entrance-from-above:before, #sd-text-effect .sd-text-effect_entrance-from-above:before { content: 'From Above (Entrance)'; }
[dropdown='sd-text-effect'] .sd-text-effect_entrance-from-below:before, #sd-text-effect .sd-text-effect_entrance-from-below:before { content: 'From Below (Entrance)'; }
[dropdown='sd-text-effect'] .sd-text-effect_entrance-from-right:before, #sd-text-effect .sd-text-effect_entrance-from-right:before { content: 'From Right (Entrance)'; }
[dropdown='sd-text-effect'] .sd-text-effect_entrance-from-left:before, #sd-text-effect .sd-text-effect_entrance-from-left:before { content: 'From Left (Entrance)'; }

[dropdown='sd-text-effect'] .sd-text-effect_entrance-fold-from-above:before, #sd-text-effect .sd-text-effect_entrance-fold-from-above:before { content: 'Fold From Above (Entrance)'; }
[dropdown='sd-text-effect'] .sd-text-effect_entrance-fold-from-below:before, #sd-text-effect .sd-text-effect_entrance-fold-from-below:before { content: 'Fold From Below (Entrance)'; }
[dropdown='sd-text-effect'] .sd-text-effect_entrance-appear-from-middle:before, #sd-text-effect .sd-text-effect_entrance-appear-from-middle:before { content: 'Appear From Middle (Entrance)'; }

[dropdown='sd-text-effect'] .sd-text-effect_test-note:before, #sd-text-effect .sd-text-effect_test-note:before { content: 'test note'; }
DESCRIPTION .sd-text-effect_collapse-in:before { content: 'Collapse In'; }

DESCRIPTION .sd-text-effect_flip-in-x:before { content: 'Flip In X'; }
DESCRIPTION .sd-text-effect_fade-in-down:before { content: 'Fade In Down'; }
DESCRIPTION .sd-text-effect_fade-in-left:before { content: 'Fade In Left'; }
DESCRIPTION .sd-text-effect_loading-effect:before { content: 'Loading Effect'; }
DESCRIPTION .sd-text-effect_reveal-from-top:before { content: 'Reveal From Top'; }
DESCRIPTION .sd-text-effect_reveal-flip-from-left:before { content: 'Flip From Left'; }

/* shapes */
[dropdown='sd-shape-effect'] .sd-shape-effect_none:before, #sd-shape-effect .sd-shape-effect_none:before { content: 'None'; }
[dropdown='sd-shape-effect'] .sd-shape-effect_floating-vertical:before, #sd-shape-effect .sd-shape-effect_floating-vertical:before { content: 'V-Float (Loop)'; }
[dropdown='sd-shape-effect'] .sd-shape-effect_floating-horizontal:before, #sd-shape-effect .sd-shape-effect_floating-horizontal:before { content: 'H-Float (Loop)'; }
[dropdown='sd-shape-effect'] .sd-shape-effect_stroke-width:before, #sd-shape-effect .sd-shape-effect_stroke-width:before { content: 'Stroke Pulse *(Loop)'; }
[dropdown='sd-shape-effect'] .sd-shape-effect_stroke-dash:before, #sd-shape-effect .sd-shape-effect_stroke-dash:before { content: 'Stroke Dash *(Loop)'; }
[dropdown='sd-shape-effect'] .sd-shape-effect_grad-fill:before, #sd-shape-effect .sd-shape-effect_grad-fill:before { content: 'Fill Color (Loop)'; }
[dropdown='sd-shape-effect'] .sd-shape-effect_grad-fill2:before, #sd-shape-effect .sd-shape-effect_grad-fill2:before { content: 'H-Gradient *(Loop)'; }
[dropdown='sd-shape-effect'] .sd-shape-effect_grad-fill6:before, #sd-shape-effect .sd-shape-effect_grad-fill6:before { content: 'V-Gradient *(Loop)'; }
[dropdown='sd-shape-effect'] .sd-shape-effect_grad-fill-cloud:before, #sd-shape-effect .sd-shape-effect_grad-fill-cloud:before { content: 'Colors *(Loop)'; }
[dropdown='sd-shape-effect'] .sd-shape-effect_spotlight-dissapear:before, #sd-shape-effect .sd-shape-effect_spotlight-dissapear:before { content: 'spotlight(hover) *'; }
[dropdown='sd-shape-effect'] .sd-shape-effect_quiz-radial:before, #sd-shape-effect .sd-shape-effect_quiz-radial:before { content: 'Quiz Radius'; }
[dropdown='sd-shape-effect'] .sd-shape-effect_big-dash:before, #sd-shape-effect .sd-shape-effect_big-dash:before { content: 'Big Dash'; }
[dropdown='sd-shape-effect'] .sd-shape-effect_medium-dash:before, #sd-shape-effect .sd-shape-effect_medium-dash:before { content: 'Medium Dash'; }
[dropdown='sd-shape-effect'] .sd-shape-effect_small-dash:before, #sd-shape-effect .sd-shape-effect_small-dash:before { content: 'Small Dash'; }

[dropdown='sd-shape-effect'] .sd-shape-effect_test-note:before, #sd-shape-effect .sd-shape-effect_test-note:before { content: 'test note'; }


/* images */
[dropdown='sd-image-effect'] .sd-image-effect_none:before, #sd-image-effect .sd-image-effect_none:before { content: 'None'; }
[dropdown='sd-image-effect'] .sd-image-effect_morph-h:before, #sd-image-effect .sd-image-effect_morph-h:before { content: 'Twirl (Hover)'; }
[dropdown='sd-image-effect'] .sd-image-effect_shrink-h:before, #sd-image-effect .sd-image-effect_shrink-h:before { content: 'Pulse (Hover)'; }
[dropdown='sd-image-effect'] .sd-image-effect_flip-h:before, #sd-image-effect .sd-image-effect_flip-h:before { content: '3D Rotate *(Hover)'; }
[dropdown='sd-image-effect'] .sd-image-effect_grow-h:before, #sd-image-effect .sd-image-effect_grow-h:before { content: 'Grow (Hover)'; }
[dropdown='sd-image-effect'] .sd-image-effect_grow-plus-h:before, #sd-image-effect .sd-image-effect_grow-plus-h:before { content: 'Grow + (Hover)'; }
[dropdown='sd-image-effect'] .sd-image-effect_flip:before, #sd-image-effect .sd-image-effect_flip:before { content: '3D Rotate *(Loop)'; }
[dropdown='sd-image-effect'] .sd-image-effect_grayscale-h:before, #sd-image-effect .sd-image-effect_grayscale-h:before { content: 'Gray to Color *'; }
[dropdown='sd-image-effect'] .sd-image-effect_blur-h:before, #sd-image-effect .sd-image-effect_blur-h:before { content: 'Blur to Color *'; }
[dropdown='sd-image-effect'] .sd-image-effect_sepia-h:before, #sd-image-effect .sd-image-effect_sepia-h:before { content: 'Sepia to Color *'; }
[dropdown='sd-image-effect'] .sd-image-effect_pulse:before, #sd-image-effect .sd-image-effect_pulse:before { content: 'Ameba (Loop)'; }
[dropdown='sd-image-effect'] .sd-image-effect_hithere:before, #sd-image-effect .sd-image-effect_hithere:before { content: 'Hi There (Hover)'; }
[dropdown='sd-image-effect'] .sd-image-effect_bounce:before, #sd-image-effect .sd-image-effect_bounce:before { content: 'Bounce (Loop)'; }
[dropdown='sd-image-effect'] .sd-image-effect_hinge-h:before, #sd-image-effect .sd-image-effect_hinge-h:before { content: 'Hinge (Hover)'; }
[dropdown='sd-image-effect'] .sd-image-effect_glow:before, #sd-image-effect .sd-image-effect_glow:before { content: 'Glow'; }
[dropdown='sd-image-effect'] .sd-image-effect_saturate:before, #sd-image-effect .sd-image-effect_saturate:before { content: 'Saturate *'; }
[dropdown='sd-image-effect'] .sd-image-effect_hue-rotate:before, #sd-image-effect .sd-image-effect_hue-rotate:before { content: 'Hue *'; }
[dropdown='sd-image-effect'] .sd-image-effect_shadow:before, #sd-image-effect .sd-image-effect_shadow:before { content: 'Shadow *'; }
[dropdown='sd-image-effect'] .sd-image-effect_grayscale:before, #sd-image-effect .sd-image-effect_grayscale:before { content: 'Grayscale *'; }
[dropdown='sd-image-effect'] .sd-image-effect_sepia:before, #sd-image-effect .sd-image-effect_sepia:before { content: 'Sepia *'; }
[dropdown='sd-image-effect'] .sd-image-effect_drop-shadow:before, #sd-image-effect .sd-image-effect_drop-shadow:before { content: 'Shadow'; }
[dropdown='sd-image-effect'] .sd-image-effect_right-diagnol-crop:before, #sd-image-effect .sd-image-effect_right-diagnol-crop:before { content: 'Right Diagnol Crop'; }
[dropdown='sd-image-effect'] .sd-image-effect_blur:before, #sd-image-effect .sd-image-effect_blur:before { content: 'Blur *'; }
[dropdown='sd-image-effect'] .sd-image-effect_radial:before, #sd-image-effect .sd-image-effect_radial:before { content: 'Radial'; }
[dropdown='sd-image-effect'] .sd-image-effect_auto-scroll-up:before, #sd-image-effect .sd-image-effect_auto-scroll-up:before { content: 'Auto Scroll'; }
[dropdown='sd-image-effect'] .sd-image-effect_quiz-radial:before, #sd-image-effect .sd-image-effect_quiz-radial:before { content: 'Quiz Radius'; }
[dropdown='sd-image-effect'] .sd-image-effect_twist-on-hover:before, #sd-image-effect .sd-image-effect_twist-on-hover:before { content: 'Twist (Hover)'; }
[dropdown='sd-image-effect'] .sd-image-effect_slow-growth:before, #sd-image-effect .sd-image-effect_slow-growth:before { content: 'Slow Growth'; }

DESCRIPTION .sd-image-effect_slow_enlarge:before { content: 'Slow Enlarge'; }
DESCRIPTION .sd-image-effect_slow_enlarge_twist:before { content: 'Slow Enlarge + Twist'; }
DESCRIPTION .sd-image-effect_out-up:before { content: 'Out Up'; }
DESCRIPTION .sd-image-effect_up-right:before { content: 'Up Right'; }
DESCRIPTION .sd-image-effect_left-down:before { content: 'Left Down'; }
DESCRIPTION .sd-image-effect_down-left:before { content: 'Down Left'; }
DESCRIPTION .sd-image-effect_right-down:before { content: 'Right Down'; }
DESCRIPTION .sd-image-effect_out-down:before { content: 'Out Down'; }


/* video */
DESCRIPTION .sd-video-effect_none:before { content: 'None'; }
DESCRIPTION .sd-video-effect_shadow:before { content: 'shadow'; }
DESCRIPTION .sd-video-effect_grayscale:before { content: 'grayscale'; }
DESCRIPTION .sd-video-effect_sepia:before { content: 'Sepia'; }
DESCRIPTION .sd-video-effect_quiz-radial:before { content: 'Quiz Radius'; }

/*------------------------------------*\
              Keyframes
\*------------------------------------*/

/*entrenceFoldFromAbove */
@-webkit-keyframes entrenceFoldFromAbove {
  0% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
  }

  100% {
    -webkit-transform: rotateX(0px);
    transform: rotateX(0px);
  }
}

@keyframes entrenceFoldFromAbove {
  0% {
    opacity: 1;
    visibility: visible;
    transform: rotateX(-90deg);
  }

  100% {
    transform: rotateX(0px);
  }
}

/*entrenceFoldFromBelow */
@-webkit-keyframes entrenceFoldFromBelow {
  0% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
  }

  100% {
    -webkit-transform: rotateX(0px);
    transform: rotateX(0px);
  }
}

@keyframes entrenceFoldFromBelow {
  0% {
    opacity: 1;
    visibility: visible;
    transform: rotateX(90deg);
  }

  100% {
    transform: rotateX(0px);
  }
}

/*entrenceAppearFromMiddle*/
@-webkit-keyframes entrenceAppearFromMiddle {
  0% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: scale(0,1);
    transform: scale(0,1);
  }

  100% {
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
  }
}

@keyframes entrenceAppearFromMiddle {
  0% {
    opacity: 1;
    visibility: visible;
    transform: scale(0,1);
  }

  100% {
    transform: scale(1,1);
  }
}


/* Entrence From Above */
@-webkit-keyframes entrenceFromAbove {
  0% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(-3000px);
    transform: translateY(-3000px);
  }

  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@keyframes entrenceFromAbove {
  0% {
    opacity: 1;
    visibility: visible;
    transform: translateY(-3000px);
  }

  100% {
    transform: translateY(0px);
  }
}

/* Entrence From Below */
@-webkit-keyframes entrenceFromBelow {
  0% {
    -webkit-transform: translateY(3000px);
    transform: translateY(3000px);
  }

  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@keyframes entrenceFromBelow {
  0% {
    transform: translateY(3000px);
  }

  100% {
    transform: translateY(0px);
  }
}

/* Entrence From Right */
@-webkit-keyframes entrenceFromRight {
  0% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(3000px);
    transform: translateX(3000px);
  }

  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}

@keyframes entrenceFromRight {
  0% {
    opacity: 1;
    visibility: visible;
    transform: translateX(3000px);
  }

  100% {
    transform: translateX(0px);
  }
}

/* Entrence From Left */
@-webkit-keyframes entrenceFromLeft {
  0% {
    -webkit-transform: translateX(-3000px);
    transform: translateX(-3000px);
  }

  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}

@keyframes entrenceFromLeft {
  0% {
    transform: translateX(-3000px);
  }

  100% {
    transform: translateX(0px);
  }
}



/* Auto Scroll */
@-webkit-keyframes Auto-Scroll {
  0% {
    -webkit-transform: translateY(0) translateX(0) translateZ(0);
    transform: translateY(0) translateX(0) translateZ(0);
  }

  100% {
    -webkit-transform: translateY(-50%) translateX(0) translateZ(0);
    transform: translateY(-50%) translateX(0) translateZ(0);
  }
}

@keyframes Auto-Scroll {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-50%) translateX(0) translateZ(0);
  }
}


/* Hover vertical */
@-webkit-keyframes hover-vertical {
  50% {
    -webkit-transform: translateY(-11px);
    transform: translateY(-11px);
  }

  100% {
    -webkit-transform: translateY(-22px);
    transform: translateY(-22px);
  }
}

@keyframes hover-vertical {
  50% {
    -webkit-transform: translateY(-11px);
    transform: translateY(-11px);
  }

  100% {
    -webkit-transform: translateY(-22px);
    transform: translateY(-22px);
  }
}

/* Hover horizontal */
@-webkit-keyframes hover-horizontal {
  50% {
    -webkit-transform: translateX(-11px);
    transform: translateX(-11px);
  }

  100% {
    -webkit-transform: translateX(-22px);
    transform: translateX(-22px);
  }
}

@keyframes hover-horizontal {
  50% {
    -webkit-transform: translateX(-11px);
    transform: translateX(-11px);
  }

  100% {
    -webkit-transform: translateX(-22px);
    transform: translateX(-22px);
  }
}

/* Wobble Vertical */
@-webkit-keyframes wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }

  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }

  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }

  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }

  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }

  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }

  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }

  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }

  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
/* Wobble Horizontal */
@-webkit-keyframes wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }

  33.3% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }

  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }

  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }

  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }

  33.3% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }

  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }

  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }

  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
/* Buzz */
@-webkit-keyframes buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}

@keyframes buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}
/* Hover Shadow */
@-webkit-keyframes hover {
  50% {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
  }

  100% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}

@keyframes hover {
  50% {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
  }

  100% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}
/*stroke-width*/
@-webkit-keyframes stroke-width {
  100% {
    stroke-width: 20px;
  }
}

@keyframes stroke-width {
  100% {
    stroke-width: 20px;
  }
}
/*stroke-dash*/
@-webkit-keyframes stroke-dash {
  to {
    stroke-dashoffset: 1000;
  }
}

@keyframes stroke-dash {
  to {
    stroke-dashoffset: 1000;
  }
}


@keyframes glowPulse{
  from{
      /*text-shadow:0px 0px 10px #fff,
      0px 0px 10px #fff, 
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #7B96B8,
      0px 0px 150px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px -10px 100px #7B96B8,
      0px -10px 100px #7B96B8;*/
      text-shadow:0px 0px 10px #fff,
      0px 0px 10px #fff, 
      0px 0px 25px #fff,
      0px 10px 100px #7B96B8,
      0px -10px 100px #7B96B8;
    }
}
@-webkit-keyframes glowPulse{
  from{
      text-shadow:0px 0px 10px #fff,
      0px 0px 10px #fff, 
      0px 0px 25px #fff,
      0px 10px 100px #7B96B8,
      0px -10px 100px #7B96B8;
    }
}

@keyframes glowPulse-image{
  from{
      box-shadow:0px 0px 10px #fff,
      0px 0px 10px #fff, 
      0px 0px 25px #fff,
      0px 10px 100px #7B96B8,
      0px -10px 100px #7B96B8;
    }
}
@-webkit-keyframes glowPulse-image{
  from{
      box-shadow:0px 0px 10px #fff,
      0px 0px 10px #fff, 
      0px 0px 25px #fff,
      0px 10px 100px #7B96B8,
      0px -10px 100px #7B96B8;
    }
}

@keyframes rotate_leftToRight {
    from    {  
                -webkit-transform: rotateY(0deg);
                transform: rotateY(0deg);
            }
    to      {
                -webkit-transform: rotateY(360deg);
                transform: rotateY(360deg);
            }
}

@-webkit-keyframes rotate_leftToRight {
    from    {  
                -webkit-transform: rotateY(0deg);
                transform: rotateY(0deg);
            }
    to      {
                -webkit-transform: rotateY(360deg);
                transform: rotateY(360deg);
            }
}

@keyframes growImage {
    0% { -webkit-transform: scale(1); }
    30% { -webkit-transform: scale(1); }
    40% { -webkit-transform: scale(1.08); }
    50% { -webkit-transform: scale(1); }
    60% { -webkit-transform: scale(1); }
    70% { -webkit-transform: scale(1.05); }
    80% { -webkit-transform: scale(1); }
    100% { -webkit-transform: scale(1); }
}
@-webkit-keyframes growImage {
    0% { -webkit-transform: scale(1); }
    30% { -webkit-transform: scale(1); }
    40% { -webkit-transform: scale(1.08); }
    50% { -webkit-transform: scale(1); }
    60% { -webkit-transform: scale(1); }
    70% { -webkit-transform: scale(1.05); }
    80% { -webkit-transform: scale(1); }
    100% { -webkit-transform: scale(1); }
}

@-webkit-keyframes flipImage {
    100% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
}
@keyframes text-blur {
   0% {  
        letter-spacing: inherit;
        -webkit-filter: blur(0px);
        filter: blur(0px);
        
    }
    25% {  
        letter-spacing: inherit;
        -webkit-filter: blur(0px);
        filter: blur(0px);
        
    }
    48% {  
        letter-spacing: 1em;
        -webkit-filter: blur(15px);
        filter: blur(15px);
        
    }
    52% {  
        letter-spacing: 1em;
        -webkit-filter: blur(15px);
        filter: blur(15px);
        
    }
    75% {
        letter-spacing: inherit;
        -webkit-filter: blur(0px);
        filter: blur(0px);
    }
    100% {
        letter-spacing: inherit;
        -webkit-filter: blur(0px);
        filter: blur(0px);
    }
}
@-webkit-keyframes text-blur {
    0% {  
        letter-spacing: inherit;
        -webkit-filter: blur(0px);
        
    }
    25% {  
        letter-spacing: inherit;
        -webkit-filter: blur(0px);
        
    }
    48% {  
        letter-spacing: 1em;
        -webkit-filter: blur(15px);
        
    }
    52% {  
        letter-spacing: 1em;
        -webkit-filter: blur(15px);
        
    }
    75% {
        letter-spacing: inherit;
        -webkit-filter: blur(0px);
    }
    100% {
        letter-spacing: inherit;
        -webkit-filter: blur(0px);
    }
}
@keyframes grad-fill {
    0% {
        fill: blue;
    }
    100% {
        fill: red;
    }
}
@-webkit-keyframes grad-fill {
    0% {
        fill: blue;
    }
    100% {
        fill: red;
    }
}

@keyframes grad-fill-cloud {
    0% { fill: #d6363d; }
    100%{ fill: #636466; }
}
@-webkit-keyframes grad-fill-cloud {
    0% { fill: #d6363d; }
    100%{ fill: #636466; }
}

@-webkit-keyframes gelatine {
  from, to { -webkit-transform: scale(1, 1); transform: scale(1, 1); }
  25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); }
  50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); }
  75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); }
}@keyframes gelatine {
  from, to { -webkit-transform: scale(1, 1); transform: scale(1, 1); }
  25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); }
  50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); }
  75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); }
}
@-webkit-keyframes pulse {
  25% { -webkit-transform: scale(0.9); }
  75% { -webkit-transform: scale(1.1); }
}
@-moz-keyframes pulse {
  25% { -moz-transform: scale(0.9); }
  75% { -moz-transform: scale(1.1); }
}
@-ms-keyframes pulse {
  25% { -ms-transform: scale(0.9); }
  75% { -ms-transform: scale(1.1); }
}
@keyframes pulse {
  25% { transform: scale(0.9); }
  75% { transform: scale(1.1); }
}
@-webkit-keyframes hithere {
  30% { -webkit-transform: scale(1.2); transform: scale(1.2); }
  40%, 70% { -webkit-transform: rotate(-20deg) scale(1.2); transform: rotate(-20deg) scale(1.2); }
  50% { -webkit-transform: rotate(20deg) scale(1.2); transform: rotate(20deg) scale(1.2); }
  80% { -webkit-transform: rotate(0deg) scale(1.2); transform: rotate(0deg) scale(1.2); }
  100% { -webkit-transform: scale(1); transform: scale(1); }
}
@-moz-keyframes hithere {
  30% { -moz-transform: scale(1.2); transform: scale(1.2); }
  40%, 70% { -moz-transform: rotate(-20deg) scale(1.2); transform: rotate(-20deg) scale(1.2); }
  50% { -moz-transform: rotate(20deg) scale(1.2); transform: rotate(20deg) scale(1.2); }
  80% { -moz-transform: rotate(0deg) scale(1.2); transform: rotate(0deg) scale(1.2); }
  100% { -moz-transform: scale(1); transform: scale(1); }
}
@-ms-keyframes hithere {
  30% { -ms-transform: scale(1.2); transform: scale(1.2); }
  40%, 70% { -ms-transform: rotate(-20deg) scale(1.2); transform: rotate(-20deg) scale(1.2); }
  50% { -ms-transform: rotate(20deg) scale(1.2); transform: rotate(20deg) scale(1.2); }
  80% { -ms-transform: rotate(0deg) scale(1.2); transform: rotate(0deg) scale(1.2); }
  100% { -ms-transform: scale(1); transform: scale(1); }
}
}@keyframes hithere {
  30% { -webkit-transform: scale(1.2); transform: scale(1.2); }
  40%, 60% { -webkit-transform: rotate(-20deg) scale(1.2); transform: rotate(-20deg) scale(1.2); }
  50% { -webkit-transform: rotate(20deg) scale(1.2); transform: rotate(20deg) scale(1.2); }
  70% { -webkit-transform: rotate(0deg) scale(1.2); transform: rotate(0deg) scale(1.2); }
  100% { -webkit-transform: scale(1); transform: scale(1); }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);transform: translateY(0);}
  40% {-webkit-transform: translateY(-30px);transform: translateY(-30px);}
  60% {-webkit-transform: translateY(-15px);transform: translateY(-15px);}
}@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);transform: translateY(0);}
  40% {-webkit-transform: translateY(-30px);transform: translateY(-30px);}
  60% {-webkit-transform: translateY(-15px);transform: translateY(-15px);}
}
@-webkit-keyframes hinge {
  0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; }  
  10%, 30% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; }  
  20% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 
  35% { -webkit-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 
  50% { -webkit-transform: translateY(700px); transform: translateY(700px); opacity: 0; }
  100% { -webkit-transform: translateY(700px); transform: translateY(700px); opacity: 0; }
}@keyframes hinge {
  0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; }  
  20%, 60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; }  
  40% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 
  70% { -webkit-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 
  100% { -webkit-transform: translateY(700px); transform: translateY(700px); opacity: 0; }
}

/* spotlight */
@keyframes spotlight{
    0%{
        opacity: 0.3;
    }
    30%{
        opacity: 0.5;
    }
    100%{
        opacity: 0;
    }
}
@-ms-keyframes spotlight{
    0%{
        opacity: 0.3;
    }
    30%{
        opacity: 0.5;
    }
    100%{
        opacity: 0;
    }
}
@-webkit-keyframes spotlight{
    0%{
        opacity: 0.3;
    }
    30%{
        opacity: 0.5;
    }
    100%{
        opacity: 0;
    }
}
@-o-keyframes spotlight{
    0%{
        opacity: 0.3;
    }
    30%{
        opacity: 0.5;
    }
    100%{
        opacity: 0;
    }
}
@-moz-keyframes spotlight{
    0%{
        opacity: 0.3;
    }
    30%{
        opacity: 0.5;
    }
    100%{
        opacity: 0;
    }
}


/*<global theme settings>*/
[data-autoplay=true] { /*eliminate transitions from slides that have autoplay*/
    -webkit-animation-duration: 0 !important;
    -moz-animation-duration: 0 !important;
    -o-animation-duration: 0 !important;
    animation-duration: 0 !important;
    -moz-animation-delay: 0 !important;
    -o-animation-delay: 0 !important;
    -webkit-animation-delay: 0 !important;
    animation-delay: 0 !important;
    -moz-transition-duration: 0!important;
    -o-transition-duration: 0!important;
    -webkit-transition-duration: 0!important;
    transition-duration: 0!important;
    -moz-transition-delay: 0!important;
    -o-transition-delay: 0!important;
    -webkit-transition-delay: 0!important;
    transition-delay: 0!important;
}

/*</global theme settings>*/