:root, [data-theme="default"] {
  --opacity-ballon: 1;
  --opacity-plane: 1;
  --opacity-witch: 0;
}

@supports (--css: variables) {
  [data-theme="dark"] {
    --opacity-ballon: .5;
    --opacity-plane: .5;
    --opacity-witch: .35;
  }
}

body{
  overflow-x:hidden;
}

@-webkit-keyframes breeze{
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes breeze{
  0% {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -moz-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  100% {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@-webkit-keyframes breeze2{
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes breeze2{
  0% {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -moz-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  100% {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

.svg-tree0{
  position: relative;
  left: 80px;
  top: -125px;
}

.svg-tree{
  position: relative;
  left: -400px;
  top: -5px;
}

.svg-tree2{
  position: relative;
  left: -690px;
  top: -45px;
}

.svg-tree3{
  position: absolute;
  right: -80px;
  top: 50px;
}

.svg-tree4{
  position: absolute;
  right: -62px;
  top: 15px;
}

.svg-tree5{
  position: absolute;
  right: -230px;
  top: 125px;
}

.svg-tree6{
  position: relative;
  left: -1080px;
  top: -70px;
}

.svg-root{
  position: relative;
  left: -825px;
  top: 0px;
}

.tree-group1{
  position: absolute;
  /* width: 80%; */
  min-width: 1000px;
  bottom: 0;
  left: 0;
  right: 0;
  height: 450px;
  max-width: 1100px;
  left: 50%;
  transform: translate(-50%, 0) scale(0.8);
}

.tree-group2{
  position: relative;
}


.svg-root img{
  width: 100%;
}
.tree{
  -webkit-transform-origin: 50% 100%;
  -webkit-animation: breeze 5s ease-out infinite;
  -webkit-transform-origin: 50% bottom;
  transform-origin: 50% 100%;
  animation: breeze 5s ease-out infinite;
  transform-origin: 50% bottom;
}

.tree2{
  -webkit-transform-origin: 50% 100%;
  -webkit-animation: breeze2 5s ease-out infinite;
  -webkit-transform-origin: 50% bottom;
  transform-origin: 50% 100%;
  animation: breeze2 5s ease-out infinite;
  transform-origin: 50% bottom;
}

.tree3{
  -webkit-transform-origin: 50% 100%;
  -webkit-animation: breeze2 10s ease-out infinite;
  -webkit-transform-origin: 50% bottom;
  transform-origin: 50% 100%;
  animation: breeze2 10s ease-out infinite;
  transform-origin: 50% bottom;
}

.tree4{
  -webkit-transform-origin: 50% 100%;
  -webkit-animation: breeze2 3s ease-out infinite;
  -webkit-transform-origin: 50% bottom;
  transform-origin: 50% 100%;
  animation: breeze2 3s ease-out infinite;
  transform-origin: 50% bottom;
}





/*----------------------------car animation--------------------------*/

.car-frame{
  width: 100%;
  max-width: 1366px;
  margin-right: auto;
  margin-left: auto;
  position: absolute;
  bottom: 0;
  height: 100px;
  left: 50%;
  transform: translate(-50%, 0);
}
.car {
  margin-top: -200px;
  width: 300px;
  height: 200px;
  background: url("../images/car.png");
  background-size: cover;
  position: absolute;
  -webkit-animation-name: car;
  -webkit-animation-duration: 10s; 
  -webkit-animation-iteration-count: infinite; 
  -webkit-transform: rotate(15deg);
  animation-name: car;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  transform: rotate(15deg);
  animation-timing-function: linear;
}

@-webkit-keyframes car {
    0%   {left:-620px; top:80px; width: 3px; height: 2px; animation-timing-function: ease-in;}
    80% {left: -250px; top:75px; width: 240px; height: 160px;}
    100%  {left:100px; top:200px; width: 300px; height: 200px;}
}

@keyframes car {
    0%   {left:-620px; top:90px; width: 3px; height: 2px; animation-timing-function: ease-in; transform: rotate(0deg);}
    40% {left: -450px; top:60px; width: 120px; height: 80px; transform: rotate(15deg);}
    65% {left: -250px; top:70px; width: 240px; height: 160px; transform: rotate(15deg);}
    100%  {left:300px; top:260px; width: 300px; height: 200px; transform: rotate(25deg);}
}


.car2 {
  margin-top: -200px;
  right:-590px; top:70px; width: 3px; height: 2px;
  background: url("../images/car2.png");
  background-size: cover;
  position: absolute;
  -webkit-animation-name: car2;
  -webkit-animation-duration: 6s; 
  -webkit-animation-iteration-count: infinite; 
  -webkit-transform: rotate(-15deg);
  -webkit-animation-delay: 0s;
  animation-name: car2;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  transform: rotate(-15deg);
  animation-delay: 3s;
  animation-timing-function: linear;
}

@-webkit-keyframes car2 {
    0%   {right:-500px; top:0px;}
    100%  {right:600px; top:300px;}
}

@keyframes car2 {
    /*0%   {right:-500px; top:0px; width: }
    100%  {right:600px; top:300px;}*/
    0%   {right:-590px; top:70px; width: 3px; height: 2px; animation-timing-function: ease-in; transform: rotate(0deg)}
    40% {right: -425px; top:60px; width: 120px; height: 80px; transform: rotate(-15deg)}
    60% {right: -250px; top:75px; width: 240px; height: 160px; transform: rotate(-15deg)}
    100%  {right:300px; top:260px; width: 300px; height: 200px; transform: rotate(-25deg)}
}

/*------------------galon------------------------*/

.galon{
  width: 98px;
  height: 100px;
  margin-top: 107px;
  position: relative;
  left: 1000px;
}

/*-------------------------welcome face------------------------*/

.welcome-eyes-left{
  border-radius:50%; 
  width:5px; 
  height: 8px; background: #333;
  position: absolute;
  margin-top: 0px;
  margin-left: 104px;
  animation: welcome-eyes-animation 3s infinite;
  -webkit-animation: welcome-eyes-animation 3s infinite;
}

.welcome-eyes-right{
  border-radius:50%; width:5px; height: 8px; background: #333;
  position: absolute;
  margin-top: 0px;
  margin-left: 127px;
  animation: welcome-eyes-animation 3s 0s infinite;
  -webkit-animation: welcome-eyes-animation 3s 0s infinite;
}

.welcome-eyebrow-left{
  position: absolute;
  margin-top: 0px;
  margin-left: 101px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  -webkit-box-shadow: 2px 2px 0 0 #333;
  box-shadow: 2px 2px 0 0 #333;
  -webkit-transform: rotate(220deg);
  transform: rotate(220deg);
  animation: welcome-eyebrow 3s 0s infinite;
  -webkit-animation: welcome-eyebrow 3s 0s infinite;
}

.welcome-eyebrow-right{
  position: absolute;
  margin-top: 0px;
  margin-left: 125px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  -webkit-box-shadow: 2px 2px 0 0 #333;
  box-shadow: 2px 2px 0 0 #333;
  -webkit-transform: rotate(220deg);
  transform: rotate(220deg);
  animation: welcome-eyebrow 3s 0s infinite;
  -webkit-animation: welcome-eyebrow 3s 0s infinite;
}

.welcome-mouth{
  position: absolute;
  top: 92px;
  left: 138px;
  background-color: #fff;
  width: 20px;
  height: 5px;
  border-radius:  0  0 50% 50% /  0px 0px 100% 100%;
  animation: welcome-mouth 3s 0s infinite;
}



@keyframes welcome-eyebrow {
  0%   {top:70px; }
  10% {top:65px; }
  20%  {top:70px; }
  100% {top:70px; }
}

@keyframes welcome-mouth {
  0%   {height: 5px; }
  10% {height: 10px; }
  20%  {height: 5px; }
  100% {height: 5px; }
}

@keyframes welcome-eyes-animation {
    0%   {height: 8px; top: 76px;}
    5% {height: 2px; top: 80px;}
    10%  {height: 8px; top: 76px; }
    100% {height: 8px; top: 76px;}
}

@-webkit-keyframes welcome-eyebrow {
  0%   {top:70px; }
  10% {top:65px; }
  20%  {top:70px; }
  100% {top:70px; }
}

@-webkit-keyframes welcome-mouth {
  0%   {height: 5px; }
  10% {height: 10px; }
  20%  {height: 5px; }
  100% {height: 5px; }
}

@-webkit-keyframes welcome-eyes-animation {
    0%   {height: 8px; top: 76px;}
    5% {height: 2px; top: 80px;}
    10%  {height: 8px; top: 76px; }
    100% {height: 8px; top: 76px;}
}

/*-----------------------------plane----------------------------------*/

.plane-frame{
  width: 100%;
  max-width: 1366px;
  margin-right: auto;
  margin-left: auto;
  position: relative;
}
.plane{
  width: 100px;
  height: 50px;
  background: url("../images/plane.png");
  position: absolute;
  animation-name: plane;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-name: plane;
  -webkit-animation-duration: 20s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  z-index: 2;
  opacity: var(--opacity-plane);
}

.smoke {
  width: 10px;
  height: 5px;
  position: absolute;
  margin-top: 20px;
/*  animation-name: smoke;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-name: smoke;
  -webkit-animation-duration: 20s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;*/
}

.fuego {
  border-radius: 100%;
  position: absolute;
  width:20px;
  height: 10px;
}
.fuego:nth-child(1) {
  animation: fuego 2s 0s infinite;
  -webkit-animation: fuego 2s 0s infinite;
}
.fuego:nth-child(2) {
  animation: fuego 1.5s 0s infinite;
  -webkit-animation: fuego 1.5s 0s infinite;
}
.fuego:nth-child(3) {
  animation: fuego 1s 0s infinite;
  -webkit-animation: fuego 1s 0s infinite;
}
.fuego:nth-child(4) {
  animation: fuego 0.5s 0s infinite;
  -webkit-animation: fuego 0.5s 0s infinite;
}
.fuego:nth-child(5) {
  animation: fuego 0.2s 0s infinite;
  -webkit-animation: fuego 0.2s 0s infinite;
}

@keyframes fuego {
  0%, 100% {
    background: rgba(254, 248, 97, 0.5);
    box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
    transform: translateY(0) scale(1);
  }
  50% {
    background: rgba(255, 50, 0, 0.1);
    box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
  }
}

@-webkit-keyframes fuego {
  0%, 100% {
    background: rgba(254, 248, 97, 0.5);
    box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
    -webkit-transform: translateY(0) scale(1);
  }
  50% {
    background: rgba(255, 50, 0, 0.1);
    box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
  }
}

@keyframes plane {
    0%   {left: -200px; top:0px;  transform: rotate(45deg);}
    25% {left:150px; top:100px;  transform: rotate(0deg);}
    90% {left:1000px; top: 100px;  transform: rotate(0deg);}
    100% {left: 1200px; top:-50px;  transform: rotate(-45deg);}
}

@-webkit-keyframes plane {
    0%   {left: -200px; top:0px;  -webkit-transform: rotate(45deg);}
    25% {left:150px; top:100px;  -webkit-transform: rotate(0deg);}
    90% {left:1000px; top: 100px;  -webkit-transform: rotate(0deg);}
    100% {left: 1200px; top:-50px;  -webkit-transform: rotate(-45deg);}
}

@keyframes smoke {
    0%   {left: -200px; top:0px;  transform: rotate(45deg);}
    25% {left:150px; top:120px;  transform: rotate(0deg);}
    90% {left:1000px; top: 120px;  transform: rotate(0deg);}
    91% {left:1020px; top: 120px;  transform: rotate(0deg);}
    100% {left: 1200px; top:0px; }
}

@-webkit-keyframes smoke {
    0%   {left: -200px; top:0px;  -webkit-transform: rotate(45deg);}
    25% {left:150px; top:120px;  -webkit-transform: rotate(0deg);}
    90% {left:1000px; top: 120px;  -webkit-transform: rotate(0deg);}
    91% {left:1020px; top: 120px;  -webkit-transform: rotate(0deg);}
    100% {left: 1200px; top:0px; }
}

/*-----------------------------air balloon----------------------------------*/

.air-balloon-frame{
  width: 100%;
  max-width: 1366px;
  margin-right: auto;
  margin-left: auto;
  position: relative;

}
.air-balloon{
  top: 0px;
  width: 50px;
  height: 50px;
  background: url("../images/air-balloon.png");
  position: absolute;
  -webkit-animation-name: air-balloon;
  -webkit-animation-duration: 100s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-name: air-balloon;
  animation-duration: 100s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  z-index: 2;
  opacity: var(--opacity-ballon);
}

@-webkit-keyframes air-balloon {
    0%   {left: -200px; top:0px; }
    25% {left:175px; top:120px; }
    50% {left:550px; top: 80px; }
    75% {left:925px; top: 120px; }
    100% {left: 1300px; top:-50px; }
}

@keyframes air-balloon {
    0%   {left: -200px; top:0px; }
    25% {left:175px; top:120px; }
    50% {left:550px; top: 80px; }
    75% {left:925px; top: 120px; }
    100% {left: 1300px; top:-50px; }
}

/*-----------------------------the witch----------------------------------*/

.witch-frame{
  width: 100%;
  max-width: 1366px;
  margin-right: auto;
  margin-left: auto;
  position: relative;

}
.witch{
  top: 0px;
  width: 3%;
  height: 30px;
  background: url("../images/witch.png");
  background-size: cover;
  position: absolute;
  -webkit-animation-name: air-balloon;
  -webkit-animation-duration: 50s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-name: air-balloon;
  animation-duration: 50s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  z-index: 2;
  opacity: var(--opacity-witch);
}

@-webkit-keyframes air-balloon {
    0%   {left: -200px; top:0px; }
    25% {left:175px; top:120px; }
    50% {left:550px; top: 80px; }
    75% {left:925px; top: 120px; }
    100% {left: 1300px; top:-50px; }
}

@keyframes air-balloon {
    0%   {left: -200px; top:0px; }
    25% {left:175px; top:120px; }
    50% {left:550px; top: 80px; }
    75% {left:925px; top: 120px; }
    100% {left: 1300px; top:-50px; }
}



/*-----------------------------tale of cat----------------------------------*/

.tale-frame{
  width: 16px;
  height: 39px;
  margin-right: auto;
  margin-left: auto;
  position: relative;
  margin-left: 0px;
}
.tale{
  top: 258px;
  left: 230px;
  width: 16px;
  height: 39px;
  background: url("../images/tale.png");
  position: absolute;
  -webkit-transform: rotate(-15deg);
  -webkit-animation-name: tale;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  transform: rotate(-15deg);
  animation-name: tale;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes tale {
    0%   {transform: rotate(-15deg); }
    25%   {transform: rotate(0deg); }
    50% { margin-left:-8px; transform: rotate(20deg); }
    75%   {transform: rotate(0deg); }
    100% {transform: rotate(-15deg); }
}

@-webkit-keyframes tale {
    0%   {-webkit-transform: rotate(-15deg); }
    25%   {-webkit-transform: rotate(0deg); }
    50% { margin-left:-8px; -webkit-transform: rotate(20deg); }
    75%   {-webkit-transform: rotate(0deg); }
    100% {-webkit-transform: rotate(-15deg); }
}


/*----------------------------parlour-face------------------------------*/

.parlour-body{
  top: 234px;
  left: 515px;
  width: 125px;
  height: 156px;
  background: url("../images/parlour-face.png");
  position: relative;
}

.parlour-dress{
  top: 78px;
  left: 0px;
  width: 22px;
  height: 35px;
  background: url("../images/parlour-dress.png");
  position: absolute;
}


.parlour-hand{
  top: 24px;
  left: -50px;
  width: 65px;
  height: 86px;
  background: url("../images/parlour-hand.png");
  position: absolute;
  -webkit-animation-name: handshake;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-name: handshake;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.parlour-eyes-left{
  border-radius:50%; 
  width:5px; 
  height: 8px; 
  background: #333;
  position: absolute;
  margin-top: -32px;
  margin-left: 44px;
  animation: welcome-eyes-animation 3s 0s infinite;
  -webkit-animation: welcome-eyes-animation 3s 0s infinite;
}

.parlour-eyes-right{
  border-radius:50%; 
  width:5px; 
  height: 8px; 
  background: #333;
  position: absolute;
  margin-top: -32px;
  margin-left: 67px;
  animation: welcome-eyes-animation 3s 0s infinite;
  -webkit-animation: welcome-eyes-animation 3s 0s infinite;
}

.parlour-mouth{
  position: absolute;
  margin-top: 60px;
  left: 48px;
  background-color: #fff;
  width: 20px;
  height: 5px;
  border-radius:  0  0 50% 50% /  0px 0px 100% 100%;
  animation: welcome-mouth 3s 0s infinite;
  -webkit-animation: welcome-mouth 3s 0s infinite;
}

.parlour-eyebrow-left{
  position: absolute;
  margin-top: -32px;
  margin-left: 40px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  -webkit-box-shadow: 2px 2px 0 0 #333;
  box-shadow: 2px 2px 0 0 #333;
  -webkit-transform: rotate(220deg);
  transform: rotate(220deg);
  animation: welcome-eyebrow 3s 0s infinite;
  -webkit-animation: welcome-eyebrow 3s 0s infinite;
}

.parlour-eyebrow-right{
  position: absolute;
  margin-top: -32px;
  margin-left: 65px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  -webkit-box-shadow: 2px 2px 0 0 #333;
  box-shadow: 2px 2px 0 0 #333;
  -webkit-transform: rotate(220deg);
  transform: rotate(220deg);
  animation: welcome-eyebrow 3s 0s infinite;
  -webkit-animation: welcome-eyebrow 3s 0s infinite;
}

@keyframes handshake{
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  } 
  50% {
    -webkit-transform: rotate(-35deg);
    transform: rotate(-35deg);
    top: 39px;
    left: -60px;
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@-webkit-keyframes handshake{
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  } 
  50% {
    -webkit-transform: rotate(-35deg);
    transform: rotate(-35deg);
    top: 39px;
    left: -60px;
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}


/*--------------------------------------------------screen----------------------------------------------*/

.screen_frame{
  width: 311px;
  height: 191px;  
  position: absolute;
  margin-top:67px;
  margin-left: 416px;
  overflow: hidden;
}
.screen1{
  width: 311px;
  height: 191px;  
  position: absolute;
  background: url("../images/screen1.png");
  animation: screen 15s 0s infinite;
  -webkit-animation: screen 15s 0s infinite;
}

.screen2{
  width: 311px;
  height: 191px;  
  position: absolute;
  background: url("../images/screen2.png");
  margin-left: 311px;
  animation: screen 15s 5s infinite;
  -webkit-animation: screen 15s 5s infinite;
}

.screen3{
  width: 311px;
  height: 191px;  
  position: absolute;
  background: url("../images/screen3.png");
  margin-left: 311px;
  animation: screen 15s 10s infinite;
  -webkit-animation: screen 15s 10s infinite;
}

@keyframes screen{
  0%{
    margin-left:311px;
  }

  10%{
    margin-left:0px;
  }

  30%{
    margin-left:0px;
  }  
  40%{
    margin-left:-311px;
  }

  100%{
    margin-left:-311px;
  }
}

@-webkit-keyframes screen{
  0%{
    margin-left:311px;
  }

  10%{
    margin-left:0px;
  }

  30%{
    margin-left:0px;
  }  
  40%{
    margin-left:-311px;
  }

  100%{
    margin-left:-311px;
  }
}

.workspace-body{
  width: 352px;
  height: 327px;
  position: absolute;
  background: url("../images/workspace-body.png");
  margin-left: 432px;
  margin-top: 47px;
}

.idea-frame{
  margin-top: 0px;
  margin-left: 500px;
  width: 100px;
  height: 100px;
  boder:1px solid #000;
  position: absolute;
}

.idea{
  width: 0px;
  height: 0px;
  position: absolute;
  background: url("../images/idea.png");
  background-size: cover;
  transform: rotate(-15deg);
  animation: idea 10s 0s infinite;
  -webkit-transform: rotate(-15deg);
  -webkit-animation: idea 10s 0s infinite;
}

.idea2{
  width: 0px;
  height: 0px;
  position: absolute;
  background: url("../images/idea.png");
  background-size: cover;
  margin-top: 0px;
  margin-left: 600px;
  transform: rotate(15deg);
  animation: idea2 10s 1s infinite;
  -webkit-transform: rotate(15deg);
  -webkit-animation: idea2 10s 1s infinite;
}

@keyframes idea{
  0%{
    width: 0px;
    height: 0px;
    margin-top: 10px;
    opacity: 0.5;
  }
  10%{
    width: 59px;
    height: 60px;
    margin-top: -20px;
    margin-left: -30px;
    opacity: 1;
  }

  20%{
    margin-top: -10px; 
  }

  30%{
    margin-top: -30px; 
  }

  40%{
    margin-top: -10px; 
  }

  50%{
    margin-top: -30px; 
  }

  60%{
    margin-top: -10px; 
  }

  70%{
    margin-top: -30px; 
  }

  80%{
    margin-top: -10px; 
  }

  90%{
    margin-top: -30px; 
    width: 59px;
    height: 60px;
    opacity: 1;
    margin-left: -30px;
  }

  100%{
    margin-top: 10px;
    margin-left: 0px; 
    width: 0px;
    height: 0px;
  }

}

@keyframes idea2{
  0%{
    width: 0px;
    height: 0px;
    margin-top: 15px;
    margin-left: 115px; 
    opacity: 0.5;
  }
  10%{
    width: 30px;
    height: 30px;
    margin-top: 0px;
    margin-left: 100px;
    opacity: 1;
  }

  20%{
    margin-top: 15px; 
    
  }

  30%{
    margin-top: 0px; 
    
  }

  40%{
    margin-top: 15px; 
   
  }

  50%{
    margin-top: 0px; 
    
  }

  60%{
    margin-top: 15px; 
   
  }

  70%{
    margin-top: 0px; 
    
  }

  80%{
    margin-top: 15px; 
    
  }

  90%{
    margin-top: 0px; 
    width: 30px;
    height: 30px;
    margin-left: 100px;
    opacity: 1;
  }

  100%{
    margin-top: 15px;
    margin-left: 115px; 
    width: 0px;
    height: 0px;
  }
}

@-webkit-keyframes idea{
  0%{
    width: 0px;
    height: 0px;
    margin-top: 10px;
    opacity: 0.5;
  }
  10%{
    width: 59px;
    height: 60px;
    margin-top: -20px;
    margin-left: -30px;
    opacity: 1;
  }

  20%{
    margin-top: -10px; 
  }

  30%{
    margin-top: -30px; 
  }

  40%{
    margin-top: -10px; 
  }

  50%{
    margin-top: -30px; 
  }

  60%{
    margin-top: -10px; 
  }

  70%{
    margin-top: -30px; 
  }

  80%{
    margin-top: -10px; 
  }

  90%{
    margin-top: -30px; 
    width: 59px;
    height: 60px;
    opacity: 1;
    margin-left: -30px;
  }

  100%{
    margin-top: 10px;
    margin-left: 0px; 
    width: 0px;
    height: 0px;
  }

}

@-webkit-keyframes idea2{
  0%{
    width: 0px;
    height: 0px;
    margin-top: 15px;
    margin-left: 115px; 
    opacity: 0.5;
  }
  10%{
    width: 30px;
    height: 30px;
    margin-top: 0px;
    margin-left: 100px;
    opacity: 1;
  }

  20%{
    margin-top: 15px; 
    
  }

  30%{
    margin-top: 0px; 
    
  }

  40%{
    margin-top: 15px; 
   
  }

  50%{
    margin-top: 0px; 
    
  }

  60%{
    margin-top: 15px; 
   
  }

  70%{
    margin-top: 0px; 
    
  }

  80%{
    margin-top: 15px; 
    
  }

  90%{
    margin-top: 0px; 
    width: 30px;
    height: 30px;
    margin-left: 100px;
    opacity: 1;
  }

  100%{
    margin-top: 15px;
    margin-left: 115px; 
    width: 0px;
    height: 0px;
  }
}


.headband-frame{
  width: 42px;
  height: 61px;
  position: absolute;
  margin-top: 102px;
  margin-left: 550px;
}
.headband{
  width: 42px;
  height: 61px;
  position: absolute;
  background: url("../images/headband.png");
  background-size: cover;
  animation: headband 8s 7s infinite;
  -webkit-animation: headband 8s 7s infinite;
}

@keyframes headband{
  0%{
    margin-top:0px;
  }

  10%{
    margin-top: -3px;
    margin-left: -10px;
    transform: rotate(30deg);
  }

  30%{
    margin-top: -3px;
    margin-left: -10px;
    transform: rotate(30deg);
  }

  40%{
    margin-left: 0px;
    margin-top: 0;
    transform: rotate(0deg);
  }

  100%{
    margin-left:  0px;
    transform: rotate(0deg);
  }
}

@-webkit-keyframes headband{
  0%{
    margin-top:0px;
  }

  10%{
    margin-top: -3px;
    margin-left: -10px;
    -webkit-transform: rotate(30deg);
  }

  30%{
    margin-top: -3px;
    margin-left: -10px;
    -webkit-transform: rotate(30deg);
  }

  40%{
    margin-left: 0px;
    margin-top: 0;
    -webkit-transform: rotate(0deg);
  }

  100%{
    margin-left:  0px;
    -webkit-transform: rotate(0deg);
  }
}

/*--------------------------------fan-----------------------------------*/

.fan-frame{
  width: 150px;
  height: 150px;
  position: absolute;
  margin-left: 980px;
  margin-top: 150px;
}
.fan-top{
  width: 150px;
  height: 150px;
  background: url("../images/fan-top.png");
  position: absolute;
  animation:fan-top 8s infinite;
  transform: rotateY(30deg);
  animation-timing-function: linear;
  -webkit-animation:fan-top 8s 0s infinite;
  -webkit-transform: rotateY(30deg); 
  -webkit-animation-timing-function: linear;
}

.centerFan{
  width:30px;
  height:30px;
  position: absolute;
  border-radius:100%;
  margin-top: 60px;
  margin-left: 60px;
  -webkit-animation:rotateAnimation 8s infinite;
  animation:rotateAnimation 8s infinite;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
}
.item1,.item2, .item3{
  width:30px;
  height:50px;
  background: #568ED3;
  position:absolute;
  border-radius:10px; 
  -webkit-box-shadow:1px 1px 20px rgba(255,255,255,.4);
  box-shadow:1px 1px 20px rgba(255,255,255,.4);
}
.item1{
  top:-50px;
  left: 2px;
}
.item2{
  top:10px;
  left: 35px;
  transform: rotate(120deg);
  -webkit-transform: rotate(120deg);
}
.item3{
  top:10px;
  left: -35px;
  transform: rotate(240deg);
  -webkit-transform: rotate(240deg);
}


@-webkit-keyframes rotateAnimation{
  0%{
    -webkit-transform: rotateY(30deg) rotate(7turn);
    -webkit-transform-origin: center;
    margin-left: 50px;
  }
  25%{
    -webkit-transform: rotateY(0deg) rotate(10turn);
    -webkit-transform-origin: center;
    margin-left: 60px;
  }

  50%{
    -webkit-transform: rotateY(30deg) rotate(13turn); /* Safari */
    -webkit-transform-origin: center;
    margin-left: 70px;
  } 

  75%{
    -webkit-transform: rotateY(0deg) rotate(16turn);
    -webkit-transform-origin: center;
    margin-left: 60px;
  }
  100%{
    -webkit-transform-origin: center;
    -webkit-transform: rotateY(30deg) rotate(19turn);
    margin-left: 50px;

  } 
}

@keyframes rotateAnimation{
  0%{
    transform: rotateY(30deg) rotate(7turn);
    transform-origin: center;
    margin-left: 50px;
  }
  25%{
    transform: rotateY(0deg) rotate(10turn);
    transform-origin: center;
    margin-left: 60px;
  }

  50%{
    transform: rotateY(30deg) rotate(13turn); /* Safari */
    transform-origin: center;
    margin-left: 70px;
  } 

  75%{
    transform: rotateY(0deg) rotate(16turn);
    transform-origin: center;
    margin-left: 60px;
  }
  100%{
    transform-origin: center;
    transform: rotateY(30deg) rotate(19turn);
    margin-left: 50px;

  } 
}

@-webkit-keyframes fan-top{
 0%{
    -webkit-transform: rotateY(30deg); /* Safari */
    margin-left: -10px;
 }

 25%{
    -webkit-transform: rotateY(0deg); /* Safari */
    margin-left: 0px;
 }

  50%{
    -webkit-transform: rotateY(30deg); /* Safari */
    margin-left: 10px;
  } 

  75%{
    -webkit-transform: rotateY(0deg); /* Safari */
    margin-left: 0px;
  }

  100%{
    -webkit-transform: rotateY(30deg); /* Safari */
    margin-left: -10px;
  }
}

@keyframes fan-top{
 0%{
    transform: rotateY(30deg);
    margin-left: -10px;
 }

 25%{
    transform: rotateY(0deg);
    margin-left: 0px;
 }

  50%{
    transform: rotateY(30deg);
    margin-left: 10px;
  } 

  75%{
    transform: rotateY(0deg);
    margin-left: 0px;
  }

  100%{
    transform: rotateY(30deg);
    margin-left: -10px;
  }
}

/*-----------------------------------pan-----------------------------------*/
.pan_smoke{
  top: 240px;
  margin-left: -40px;
  position: absolute;
}
.pan{
  width: 76px;
  height: 18px;
  position: absolute;
  background: url("../images/pan.png");
  margin-top:275px;
  margin-left: -40px;
  animation: pan 0.2s 0s infinite;
  -webkit-animation: pan 0.2s 0s infinite;
}

@keyframes pan{
  0%{
    transform: rotate(10deg);
  }

  50%{
    transform: rotate(-10deg);
  }

  100%{
    transform: rotate(10deg);
  }
}

@-webkit-keyframes pan{
  0%{
    -webkit-transform: rotate(10deg); /* Safari */
  }

  50%{
    -webkit-transform: rotate(-10deg); /* Safari */
  }

  100%{
    -webkit-transform: rotate(10deg); /* Safari */
  }
}

/*----------------------------------stove----------------------------------*/
.stove-frame{
  width: 300px;
  position: relative;
  left: -16px;
  top: 352px;
  height: 10px;
}
.stove1 {
  border-radius: 10px;
  position: absolute;
  width: 5px;
  height: 10px;
}
.stove2 {
  border-radius: 10px;
  position: absolute;
  width: 5px;
  height: 10px;
  margin-left: 8px;
}
.stove3 {
  border-radius: 10px;
  position: absolute;
  width: 5px;
  height: 10px;
  margin-left: 16px;
}

.stove4 {
  border-radius: 10px;
  position: absolute;
  width: 5px;
  height: 10px;
  margin-left: 172px;
}
.stove5 {
  border-radius: 10px;
  position: absolute;
  width: 5px;
  height: 10px;
  margin-left: 180px;
}
.stove6 {
  border-radius: 10px;
  position: absolute;
  width: 5px;
  height: 10px;
  margin-left: 188px;
}

.stove-fire {
  border-radius: 100%;
  position: absolute;
  left: 50%;
  margin-left: -2.6px;
  width: 6.66666667px;
  height: 10px;
}
.stove-fire:nth-child(1) {
  animation: stove-fire 2s 0s infinite;
  -webkit-animation: stove-fire 2s 0s infinite;
}
.stove-fire:nth-child(2) {
  animation: stove-fire 1.5s 0s infinite;
  -webkit-animation: stove-fire 1.5s 0s infinite;
}
.stove-fire:nth-child(3) {
  animation: stove-fire 1s 0s infinite;
  -webkit-animation: stove-fire 1s 0s infinite;
}
.stove-fire:nth-child(4) {
  animation: stove-fire 0.5s 0s infinite;
  -webkit-animation: stove-fire 0.5s 0s infinite;
}
.stove-fire:nth-child(5) {
  animation: stove-fire 0.2s 0s infinite;
  -webkit-animation: stove-fire 0.2s 0s infinite;
}

/* ============================================== Animation Fire
*/

@keyframes stove-fire {
  0%, 100% {
    background: rgba(254, 248, 97, 0.5);
    box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
    transform: translateY(0) scale(1);
  }
  50% {
    background: rgba(255, 50, 0, 0.1);
    box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
    transform: translateY(-20px) scale(0);
  }
}

@-webkit-keyframes stove-fire {
  0%, 100% {
    background: rgba(254, 248, 97, 0.5);
    -webkit-box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
    -webkit-transform: translateY(0) scale(1);

  }
  50% {
    background: rgba(255, 50, 0, 0.1);
    -webkit-box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
    -webkit-transform: translateY(-20px) scale(0);
  }
}


/*-----------------------------------shower-----------------------------------*/
.shower-frame{
  width: 47px;
  height: 360px;
  top: 238px;
  margin-left: 72px;
  position: absolute;
  overflow: hidden;
}

.shower{
  background: url("../images/shower.png") no-repeat;
  position: absolute;
  width: 47px;
  height: 26px;
}
.water{
  margin-top: 5px;
  width: 5px;
  height: 8px;
  position: absolute;
  background: #fff;
  border-radius: 50%;
  opacity: 0.5;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
}

.drop1{
  margin-left: 5px;
  animation: water 1.5s 0s infinite;
  -webkit-animation: water 1.5s 0s infinite;
}

.drop2{
  margin-left: 10px;
  animation: water 1.5s 1s infinite;
  -webkit-animation: water 1.5s 1s infinite;
}

.drop3{
  margin-left: 15px;
  animation: water 1.5s 2s infinite;
  -webkit-animation: water 1.5s 2s infinite;
}

@keyframes water{
  0%{
    margin-top:10px;
  }

  100%{
    margin-top:400px;
  }
}

@-webkit-keyframes water{
  0%{
    margin-top:10px;
  }

  100%{
    margin-top:400px;
  }
}



@media (max-width: 1199px){

  body{
    overflow-x: hidden;
  }

  .parlour-body{
    left: 415px;
  }

  .tale{
    left: 130px;
  }

  .galon{
    left: 900px;
  }

  .fan-frame{
    margin-left: 880px;
  }

  .fan-top{
    margin-left: -100px;
  }

  .screen_frame{
    margin-left: 315px;
  }

  .workspace-body{
    margin-left: 332px;
  }

  .study-lamp{
    margin-left: 50px;
  }

  .headband-frame{
    margin-left: 450px;
  }

  .idea-frame{
    margin-left: 400px;
  }

  .centerFan{
    margin-left:-100px;
  }

  .buttons{
    margin-top: -30px;
  }

  .stove-frame{
    left: -116px;
  }

  .pan_smoke{
    margin-left: -150px;
  }
  .pan{
    margin-left: -140px;
  }

  .shower-frame{
    margin-left: -30px;
  }
/*}*/

/*@media (max-width: 991px){*/
  .plane{
    display: none;
  }
  .smoke{
    display: none;
  }
  .fuego{
    display: none;
  }
  .air-balloon{
    display: none;
  }
  .witch{
    display: none;
  }
  .parlour-body{
    display: none;
  }
  .tale{
    display: none;
  }
  .fan-top{
    display: none;
  }

  .fan-frame{
    display: none;
  }
  .screen_frame{
    display: none;
  }


  .study-lamp{
    display: none;
  }

  .workspace-body{
    display: none;
  }

  .idea-frame{
    display: none;
  }

  .headband-frame{
    display: none;
  }

  .galon{
    display: none;
  }
  .tree-group1{
    display: none;
  }

  .tree-group2{
    display: none;
  }

  .car{
    display: none;
  }

  .car2{
    display: none;
  }
  .buttons{
    margin-top: 0px;
  }

  .stove-frame{
    display: none;
  }

  .pan_smoke{
    display: none;
  }
  .pan{
    display: none;
  }

  .shower-frame{
    display: none;
  }
}