.dz_animate_this {
    min-width: 350px;
    width: auto;
    max-width: 500px;
}


.animation-control-lights .light-1,
.animation-control-lights .light-1-rays,
.animation-control-lights .light-2,
.animation-control-lights .light-2-rays,
.animation-control-lights .light-3,
.animation-control-lights .light-3-rays {
 opacity:0;
 transition:all 1s
}
.animation-control-lights.animate .light-1,
.animation-control-lights.animate .light-1-rays,
.animation-control-lights.animate .light-2,
.animation-control-lights.animate .light-2-rays,
.animation-control-lights.animate .light-3,
.animation-control-lights.animate .light-3-rays {
 opacity:1
}
.animation-control-disturb .clipped g {
 -webkit-transform:translateY(-22%);
 -moz-transform:translateY(-22%);
 -ms-transform:translateY(-22%);
 -o-transform:translateY(-22%);
 transform:translateY(-22%);
 transition:all 1s ease-in-out
}
.animation-control-disturb.animate .clipped g {
 -webkit-transform:translateY(0);
 -moz-transform:translateY(0);
 -ms-transform:translateY(0);
 -o-transform:translateY(0);
 transform:translateY(0)
}
.animation-switch-sockets .cls-screen {
 transition:all .5s ease-in-out
}
.animation-switch-sockets .cls-light,
.animation-switch-sockets .cls-light-rays {
 opacity:0;
 transition:all .7s ease-in-out .3s
}
.animation-switch-sockets .left-fish,
.animation-switch-sockets .right-fish,
.animation-switch-sockets .bottom-fish {
 transition:all .7s ease-in-out .3s
}
.animation-switch-sockets.animate .cls-screen {
 opacity:0
}
.animation-switch-sockets.animate .cls-light,
.animation-switch-sockets.animate .cls-light-rays {
 opacity:1
}
.animation-switch-sockets.animate .left-fish {
 -webkit-transform:translate(-5px,5px);
 -moz-transform:translate(-5px,5px);
 -ms-transform:translate(-5px,5px);
 -o-transform:translate(-5px,5px);
 transform:translate(-5px,5px)
}
.animation-switch-sockets.animate .right-fish {
 -webkit-transform:translate(10px,0px);
 -moz-transform:translate(10px,0px);
 -ms-transform:translate(10px,0px);
 -o-transform:translate(10px,0px);
 transform:translate(10px,0px)
}
.animation-switch-sockets.animate .bottom-fish {
 -webkit-transform:translate(10px,-5px);
 -moz-transform:translate(10px,-5px);
 -ms-transform:translate(10px,-5px);
 -o-transform:translate(10px,-5px);
 transform:translate(10px,-5px)
}
.animation-capable-stage .cls-capable-light {
 opacity:0;
 transition:opacity 1s ease-in-out 2s
}
.animation-capable-stage .cls-capable-screen {
 opacity:1;
 transition:opacity .5s ease-in-out 3s
}
.animation-capable-stage .cls-capable-screen-light {
 opacity:0;
 transition:opacity .5s ease-in-out 3.5s
}
.animation-capable-stage .clipped g {
 -webkit-transform:translateY(-100%);
 -moz-transform:translateY(-100%);
 -ms-transform:translateY(-100%);
 -o-transform:translateY(-100%);
 transform:translateY(-100%);
 transition:transform 2s ease-in-out
}
.animation-capable-stage.animate .clipped g {
 -webkit-transform:translateY(18%);
 -moz-transform:translateY(18%);
 -ms-transform:translateY(18%);
 -o-transform:translateY(18%);
 transform:translateY(18%)
}
.animation-capable-stage.animate .cls-capable-light,
.animation-capable-stage.animate .cls-capable-screen-light {
 opacity:1
}
.animation-capable-stage.animate .cls-capable-screen {
 opacity:0
}
.animation-capable-stage-alt .cls-capable-screen {
 opacity:0;
 transition:opacity .5s ease-in-out .75s
}
.animation-capable-stage-alt .cls-circle-1 {
 opacity:0;
 transition:opacity .25s ease-in-out
}
.animation-capable-stage-alt .cls-circle-2 {
 opacity:0;
 transition:opacity .25s ease-in-out .25s
}
.animation-capable-stage-alt .cls-circle-3 {
 opacity:0;
 transition:opacity .25s ease-in-out .5s
}
.animation-capable-stage-alt .cls-circle-4 {
 opacity:0;
 transition:opacity .25s ease-in-out .75s
}
.animation-capable-stage-alt .cls-circle-5 {
 opacity:0;
 transition:opacity .25s ease-in-out 1s
}
.animation-capable-stage-alt.animate .cls-capable-screen,
.animation-capable-stage-alt.animate .cls-circle-1,
.animation-capable-stage-alt.animate .cls-circle-2,
.animation-capable-stage-alt.animate .cls-circle-3,
.animation-capable-stage-alt.animate .cls-circle-4,
.animation-capable-stage-alt.animate .cls-circle-5 {
 opacity:1
}
.animation-control-scenes .cls-scenes-light,
.animation-control-scenes .cls-scenes-light-rays {
 opacity:0;
 transition:all 2s ease-in-out
}
.animation-control-scenes .clipped g {
 -webkit-transform:translateY(-100%);
 -moz-transform:translateY(-100%);
 -ms-transform:translateY(-100%);
 -o-transform:translateY(-100%);
 transform:translateY(-100%);
 transition:all 1s ease-in-out
}
.animation-control-scenes.animate .cls-scenes-light,
.animation-control-scenes.animate .cls-scenes-light-rays {
 opacity:1
}
.animation-control-scenes.animate .clipped g {
 -webkit-transform:translateY(18%);
 -moz-transform:translateY(18%);
 -ms-transform:translateY(18%);
 -o-transform:translateY(18%);
 transform:translateY(18%)
}
.dz-teaser .animation-control-scenes .cls-scenes-light,
.dz-teaser .animation-control-scenes .cls-scenes-light-rays {
 transition-delay:1s
}
.dz-teaser .animation-control-scenes .clipped g {
 transition-delay:1s
}
.animation-motion-detect .cls-light-group {
 opacity:0;
 transition:opacity 1s ease-in-out .5s
}
.animation-motion-detect.animate .cls-light-group {
 opacity:1
}
.animation-motion-detect.animate .cls-detection {
 -webkit-animation:blinkFast .5s ease-in-out forwards;
 animation:blinkFast .5s ease-in-out forwards
}
.dz-teaser .animation-motion-detect .cls-light-group {
 transition-delay:2.5s
}
.dz-teaser .animation-motion-detect.animate .cls-detection {
 -webkit-animation-delay:2s;
 -moz-animation-delay:2s;
 -o-animation-delay:2s;
 animation-delay:2s
}
.clipboard-blink {
 -webkit-animation:blinkFast .5s ease-in-out forwards;
 animation:blinkFast .5s ease-in-out forwards
}
.animation-control-distance .cls-hand {
 -webkit-transform:translate(-35px,5px);
 -moz-transform:translate(-35px,5px);
 -ms-transform:translate(-35px,5px);
 -o-transform:translate(-35px,5px);
 transform:translate(-35px,5px);
 transition:transform .75s ease-in-out
}
.animation-control-distance .cls-light-rays,
.animation-control-distance .cls-light-1,
.animation-control-distance .cls-light-2 {
 opacity:1;
 transition:opacity .75s ease-in-out .75s
}
.animation-control-distance.animate .cls-hand {
 -webkit-transform:translate(0,0);
 -moz-transform:translate(0,0);
 -ms-transform:translate(0,0);
 -o-transform:translate(0,0);
 transform:translate(0,0)
}
.animation-control-distance.animate .cls-light-rays,
.animation-control-distance.animate .cls-light-1,
.animation-control-distance.animate .cls-light-2 {
 opacity:0
}
.animation-smart-home .cls-smart-light,
.animation-smart-home .cls-smart-light-rays,
.animation-smart-home .cls-smart-dots circle {
 opacity:0;
 transition:opacity 1s ease-in-out
}
.animation-smart-home .cls-smart-screen {
 transition:opacity 1s ease-in-out
}
.animation-smart-home.animate .cls-smart-screen {
 opacity:.1
}
.animation-smart-home.animate .cls-smart-light,
.animation-smart-home.animate .cls-smart-light-rays,
.animation-smart-home.animate .cls-smart-dots circle {
 opacity:1
}
.animation-smart-lamps .cls-lamps-trigger,
.animation-smart-lamps .cls-lamps-light {
 opacity:0
}
.animation-smart-lamps .cls-lamps-trigger {
 transition:opacity .5s ease-in-out
}
.animation-smart-lamps .cls-lamps-light {
 transition:opacity 1s ease-in-out .5s
}
.animation-smart-lamps.animate .cls-lamps-trigger,
.animation-smart-lamps.animate .cls-lamps-light {
 opacity:1
}
.animation-night-motion .cls-night-light {
 opacity:0;
 transition:opacity 1s ease-in-out .5s
}
.animation-night-motion.animate .cls-night-move {
 transform-origin:center bottom;
 -webkit-animation:nightWalk 1.5s ease-in-out forwards;
 animation:nightWalk 1.5s ease-in-out forwards
}
.animation-night-motion.animate .cls-night-light {
 opacity:1
}
.animation-protection .cls-protection-plane {
 transition:transform 1s ease-in-out
}
.animation-protection .cls-protection-light {
 opacity:0;
 transition:opacity 1s ease-in-out
}
.animation-protection.animate .cls-protection-plane {
 -webkit-transform:translate(30px,-30px);
 -moz-transform:translate(30px,-30px);
 -ms-transform:translate(30px,-30px);
 -o-transform:translate(30px,-30px);
 transform:translate(30px,-30px)
}
.animation-protection.animate .cls-protection-light {
 opacity:1
}
.animation-night-timing .cls-night-timing-light {
 opacity:0;
 transition:opacity 2s ease-in-out
}
.animation-night-timing.animate .cls-night-timing-light {
 opacity:1
}
.animation-voice-control .cls-voice-sound-1,
.animation-voice-control .cls-voice-sound-2,
.animation-voice-control .cls-voice-light {
 opacity:0
}
.animation-voice-control .cls-voice-sound-1 {
 transition:opacity 1s ease-in-out
}
.animation-voice-control .cls-voice-sound-2 {
 transition:opacity 1s ease-in-out 1s
}
.animation-voice-control .cls-voice-light {
 transition:opacity 1s ease-in-out 2s
}
.animation-voice-control.animate .cls-voice-sound-1,
.animation-voice-control.animate .cls-voice-sound-2,
.animation-voice-control.animate .cls-voice-light {
 opacity:1
}
.animation-control-range .cls-range-person {
 transition:transform .4s ease-in-out
}
.animation-control-range .cls-range-marker {
 fill:#fff;
 transition:fill .3s ease-in-out .4s
}
.animation-control-range .cls-range-light {
 opacity:0;
 transition:opacity .3s ease-in-out .8s
}
.animation-control-range.animate .cls-range-person {
 -webkit-transform:translateX(-50px);
 -moz-transform:translateX(-50px);
 -ms-transform:translateX(-50px);
 -o-transform:translateX(-50px);
 transform:translateX(-50px)
}
.animation-control-range.animate .cls-range-marker {
 fill:#6eb8cb
}
.animation-control-range.animate .cls-range-light {
 opacity:1
}
.animation-communication .cls-communicate-device-1,
.animation-communication .cls-communicate-device-2,
.animation-communication .cls-communicate-device-3 {
 opacity:0
}
.animation-communication .cls-communicate-device-1 {
 transition:opacity .33s ease-in-out
}
.animation-communication .cls-communicate-device-2 {
 transition:opacity .33s ease-in-out .33s
}
.animation-communication .cls-communicate-device-3 {
 transition:opacity .34s ease-in-out .66s
}
.animation-communication.animate .cls-communicate-device-1,
.animation-communication.animate .cls-communicate-device-2,
.animation-communication.animate .cls-communicate-device-3 {
 opacity:1
}
.animation-click .cls-click-finger {
 -webkit-transform:translate(18%,50%);
 -moz-transform:translate(18%,50%);
 -ms-transform:translate(18%,50%);
 -o-transform:translate(18%,50%);
 transform:translate(18%,50%)
}
.animation-click.animate .cls-click-finger {
 animation:clickFingerTap 2500ms ease-in-out forwards
}
@keyframes clickFingerTap {
 75%,
 100% {
  -webkit-transform:none;
  -moz-transform:none;
  -ms-transform:none;
  -o-transform:none;
  transform:none
 }
 87.5% {
  -webkit-transform:translate(0.5%,1%);
  -moz-transform:translate(0.5%,1%);
  -ms-transform:translate(0.5%,1%);
  -o-transform:translate(0.5%,1%);
  transform:translate(0.5%,1%)
 }
}
.animation-click-double .cls-click-finger {
 -webkit-transform:translate(-40%,70%);
 -moz-transform:translate(-40%,70%);
 -ms-transform:translate(-40%,70%);
 -o-transform:translate(-40%,70%);
 transform:translate(-40%,70%)
}
.animation-click-double.animate .cls-click-finger {
 animation:clickFingerTap 2250ms ease-in-out forwards
}
@keyframes clickFingerTap {
 75% {
  -webkit-transform:translate(0%,-1%);
  -moz-transform:translate(0%,-1%);
  -ms-transform:translate(0%,-1%);
  -o-transform:translate(0%,-1%);
  transform:translate(0%,-1%)
 }
 87.5%,
 100% {
  -webkit-transform:none;
  -moz-transform:none;
  -ms-transform:none;
  -o-transform:none;
  transform:none
 }
}
.animation-light .cls-light-bulb {
 transition:fill 2000ms ease-in-out
}
.animation-light.animate .cls-light-bulb {
 fill:#ffc857
}
.animation-dim-lights .cls-lights-lamp {
 transition:fill 2000ms ease-in-out
}
.animation-dim-lights.animate .cls-lights-lamp {
 fill:#ffc857
}
.animation-color .cls-color-change {
 transition:transform 1000ms ease
}
.animation-color .cls-color-change-3 {
 transition-delay:2000ms
}
.animation-color .cls-color-change-4 {
 transition-delay:3000ms
}
.animation-color .cls-color-change-5 {
 transition-delay:1000ms
}
.animation-color .cls-color-change-2 .cls-color-10,
.animation-color .cls-color-change-2 .cls-color-4 {
 stroke:#858685
}
.animation-color .cls-color-change-3 .cls-color-10,
.animation-color .cls-color-change-3 .cls-color-4 {
 stroke:#1e1e1c
}
.animation-color.animate .cls-color-change-5 {
 -webkit-transform:translate(120px,120px);
 -moz-transform:translate(120px,120px);
 -ms-transform:translate(120px,120px);
 -o-transform:translate(120px,120px);
 transform:translate(120px,120px)
}
.animation-color.animate .cls-color-change-2 {
 -webkit-transform:translate(120px,-120px);
 -moz-transform:translate(120px,-120px);
 -ms-transform:translate(120px,-120px);
 -o-transform:translate(120px,-120px);
 transform:translate(120px,-120px)
}
.animation-color.animate .cls-color-change-3 {
 -webkit-transform:translate(-120px,120px);
 -moz-transform:translate(-120px,120px);
 -ms-transform:translate(-120px,120px);
 -o-transform:translate(-120px,120px);
 transform:translate(-120px,120px)
}
.animation-color.animate .cls-color-change-4 {
 -webkit-transform:translate(-120px,-120px);
 -moz-transform:translate(-120px,-120px);
 -ms-transform:translate(-120px,-120px);
 -o-transform:translate(-120px,-120px);
 transform:translate(-120px,-120px)
}
.animation-control-temperature .cls-temperature-6 {
 stroke-dashoffset:200px;
 stroke-dasharray:200px;
 transition:stroke-dashoffset 1000ms ease-in-out
}
.animation-control-temperature.animate .cls-temperature-6 {
 stroke-dashoffset:0
}
@keyframes growLines {
 to {
  stroke-dashoffset:0
 }
}
.animation-control-smartphone .cls-smartphone-finger {
 -webkit-transform:translate(18%,50%);
 -moz-transform:translate(18%,50%);
 -ms-transform:translate(18%,50%);
 -o-transform:translate(18%,50%);
 transform:translate(18%,50%)
}
.animation-control-smartphone .cls-smartphone-window {
 fill:#ffc857
}
.animation-control-smartphone.animate .cls-smartphone-finger {
 animation:smartphoneFingerTap 2500ms ease-in-out forwards
}
.animation-control-smartphone.animate .cls-smartphone-button {
 fill:#69aec0;
 transition:fill 500ms ease 2000ms
}
.animation-control-smartphone.animate .cls-smartphone-window {
 fill:transparent;
 transition:fill 500ms ease 2800ms
}
@keyframes smartphoneFingerTap {
 75% {
  -webkit-transform:translate(-0.5%,-1%);
  -moz-transform:translate(-0.5%,-1%);
  -ms-transform:translate(-0.5%,-1%);
  -o-transform:translate(-0.5%,-1%);
  transform:translate(-0.5%,-1%)
 }
 87.5%,
 100% {
  -webkit-transform:none;
  -moz-transform:none;
  -ms-transform:none;
  -o-transform:none;
  transform:none
 }
}
.animation-interface .cls-interface-finger {
 -webkit-transform:translate(15%,40%);
 -moz-transform:translate(15%,40%);
 -ms-transform:translate(15%,40%);
 -o-transform:translate(15%,40%);
 transform:translate(15%,40%)
}
.animation-interface.animate .cls-interface-finger {
 animation:smartphoneFingerTap 1500ms ease-in-out forwards
}
.animation-interface.animate .cls-interface-button {
 fill:#69aec0;
 transition:fill 500ms ease 1200ms
}
.animation-smart-project .cls-project-bulb {
 opacity:0;
 transition:opacity 2000ms ease
}
.animation-smart-project.animate .cls-project-bulb {
 opacity:1
}
.animation-management .cls-management-web {
 opacity:0;
 transition:opacity 2200ms ease-in-out
}
.animation-management .cls-management-web-2 {
 transition-delay:250ms
}
.animation-management .cls-management-web-3 {
 transition-delay:550ms
}
.animation-management .cls-management-web-4 {
 transition-delay:700ms
}
.animation-management .cls-management-web-5 {
 transition-delay:850ms
}
.animation-management.animate .cls-management-web {
 opacity:1
}
.animation-objects .cls-objects-border {
 opacity:0;
 transition:opacity .5s ease-in-out .75s
}
.animation-objects .cls-box-1 {
 opacity:0;
 transition:opacity .25s ease-in-out
}
.animation-objects .cls-box-2 {
 opacity:0;
 transition:opacity .25s ease-in-out .25s
}
.animation-objects .cls-box-3 {
 opacity:0;
 transition:opacity .25s ease-in-out .5s
}
.animation-objects .cls-box-4 {
 opacity:0;
 transition:opacity .25s ease-in-out .75s
}
.animation-objects .cls-box-5 {
 opacity:0;
 transition:opacity .25s ease-in-out 1s
}
.animation-objects.animate .cls-objects-border,
.animation-objects.animate .cls-box-1,
.animation-objects.animate .cls-box-2,
.animation-objects.animate .cls-box-3,
.animation-objects.animate .cls-box-4,
.animation-objects.animate .cls-box-5 {
 opacity:1
}
.animation-recommend.animate .cls-recommend-2 {
 animation:handShake 500ms ease-in-out forwards
}
@keyframes handShake {
 50% {
  -webkit-transform:translateY(5%);
  -moz-transform:translateY(5%);
  -ms-transform:translateY(5%);
  -o-transform:translateY(5%);
  transform:translateY(5%)
 }
 0%,
 100% {
  -webkit-transform:none;
  -moz-transform:none;
  -ms-transform:none;
  -o-transform:none;
  transform:none
 }
}
.animation-install tspan,
.animation-install text {
 stroke:none;
 fill:#1e1e1c
}
.animation-install .cls-install-connections {
 opacity:0;
 transition:opacity 1s ease
}
.animation-install.animate .cls-install-connections {
 opacity:1
}
.animation-app-installer .cls-installer-icons {
 -webkit-transform:translateY(70%);
 -moz-transform:translateY(70%);
 -ms-transform:translateY(70%);
 -o-transform:translateY(70%);
 transform:translateY(70%);
 transition:transform 3000ms ease-in-out
}
.animation-app-installer.animate .cls-installer-icons {
 -webkit-transform:none;
 -moz-transform:none;
 -ms-transform:none;
 -o-transform:none;
 transform:none
}
.pane-automation {
 overflow:hidden;
 position:relative;
 width:100%;
 max-width:1200px;
 margin:0 auto
}
.pane-automation .pane-automation__title {
 width:100%;
 max-width:1000px;
 position:absolute;
 left:50%;
 top:60px;
 text-align:center;
 z-index:10;
 color:#fff;
 font-weight:600;
 font-size:2.77777778em;
 line-height:1.08em;
 font-family:"Dosis",Arial,Helvetica,sans-serif;
 font-style:normal;
 font-weight:700;
 text-shadow:2px 2px 5px rgba(29,29,27,.25);
 -webkit-transform:translateX(-50%);
 -moz-transform:translateX(-50%);
 -ms-transform:translateX(-50%);
 -o-transform:translateX(-50%);
 transform:translateX(-50%)
}
.pane-automation .pane__intro-images {
 position:relative;
 height:750px
}
.pane-automation .pane__intro-images.animate .pane__intro-image {
 opacity:0;
 visibility:hidden
}
.pane-automation .pane__intro-images.animate .pane__intro-image+.pane__intro-image {
 opacity:1;
 visibility:visible
}
.pane-automation .pane__intro-image {
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 height:100%;
 transition:all .5s 1s;
 background-position:50% 50%;
 background-size:cover;
 background-repeat:no-repeat
}
.pane-automation .pane__intro-image:nth-of-type(1) {
 background-image:url("/admin/app/dingz/theme/default/css/../images/content/1-bathroom-dark.jpg")
}
.pane-automation .pane__intro-image:nth-of-type(2) {
 background-image:url("/admin/app/dingz/theme/default/css/../images/content/2-bathroom-bright.jpg")
}
.pane-automation .pane__intro-image+.pane__intro-image {
 opacity:0;
 visibility:hidden
}