/*=======================

Illustrations section1

=========================*/

.cloud {
  position: absolute;
  z-index: 3;
}

.cloud-1 {
  top: 160px;
  left: 100px;
  width: 150px;
  height: 80px;
  background: url(../img/cloud1.png);
  background-repeat: no-repeat;
  -webkit-animation: moveclouds 180s infinite linear;
  -moz-animation: moveclouds 180s infinite linear;
  -o-animation: moveclouds 180s infinite linear;
  animation: moveclouds 180s infinite linear;
}

.cloud-2 {
  top: 170px;
  left: 60%;
  width: 150px;
  height: 80px;
  background: url(../img/cloud2.png);
  background-repeat: no-repeat;
  -webkit-animation: moveclouds 160s infinite linear;
  -moz-animation: moveclouds 160s infinite linear;
  -o-animation: moveclouds 160s infinite linear;
  animation: moveclouds 160s infinite linear;
}

.cloud-3 {
  top: 150px;
  left: 58%;
  width: 150px;
  height: 80px;
  background: url(../img/cloud3.png);
  background-repeat: no-repeat;
  -webkit-animation: moveclouds 110s infinite linear;
  -moz-animation: moveclouds 110s infinite linear;
  -o-animation: moveclouds 110s infinite linear;
  animation: moveclouds 110s infinite linear;
}

.sun {
  position: absolute;
  right: 20%;
  top: 200px;
  z-index: 3;
  width: 100px;
  height: 100px;
  background: url(../img/sun.png);
  background-repeat: no-repeat;
}

.island {
  position: absolute;
  right: 10%;
  bottom: 150px;
  z-index: 3;
  width: 500px;
  height: 171px;
  background: url(../img/island.png);
  background-repeat: no-repeat;
}

.boat-box {
  position: absolute;
  right: 22%;
  bottom: 200px;
  z-index: 4;
  width: 124px;
  height: 144px;
}

.boat-rotate {
  -webkit-animation: boatrotate 4s infinite linear;
  -moz-animation: boatrotate 4s infinite linear;
  -o-animation: boatrotate 4s infinite linear;
  animation: boatrotate 4s infinite linear;
}

.boat {
  width: 124px;
  height: 144px;
  background: url(../img/boat.png);
  background-repeat: no-repeat;
  -webkit-animation: boatUpDown 4s infinite linear;
  -moz-animation: boatUpDown 4s infinite linear;
  -o-animation: boatUpDown 4s infinite linear;
  animation: boatUpDown 4s infinite linear;
}

/*=======================

Illustrations section2

=========================*/

#carpet-illustration {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50%;
  height: 400px;
}

.curv1 {
  position: absolute;
  top: 0px;
  left: 0;
  width: 100px;
  height: 100px;
  overflow: hidden;
}

.curv1 .curv{
  width: 200px;
  height: 200px;
  border: 40px solid #333;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  margin-top: -100px;
  background: transparent;
  opacity: 0.2;
}

.rect1 {
  position: absolute;
  top: 60px;
  left: 100px;
  width: 200px;
  height: 40px;
}

.rect1 .rectangle {
  width: 200px;
  height: 40px;
  background: #333;
  opacity: 0.2;
}

.curv2 {
  position: absolute;
  top: 60px;
  left: 300px;
  width: 100px;
  height: 200px;
  overflow: hidden;
}

.curv2 .curv{
  width: 200px;
  height: 200px;
  border: 40px solid #333;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  margin-left: -100px;
  background: transparent;
  opacity: 0.2;
}

.rect2 {
  position: absolute;
  top: 220px;
  left: 0px;
  width: 300px;
  height: 40px;
}

.rect2 .rectangle {
  width: 300px;
  height: 40px;
  background: #333;
  opacity: 0.2;
}

.curv3 {
  position: absolute;
  top: 220px;
  left: -100px;
  width: 100px;
  height: 100px;
  overflow: hidden;
}

.curv3 .curv{
  width: 200px;
  height: 200px;
  border: 40px solid #333;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: transparent;
  opacity: 0.2;
}

.focus {
  position: absolute;
  top: 121px;
  left: 0;
  z-index: 3;
  width: 150px;
  height: auto;
  text-align: center;
}

.lamp {
  position: relative;
  z-index: 4;
}

.light {
  position: relative;
  z-index: 5;
  margin-top: -17px;
  animation-name: focus;
  -webkit-animation-name: focus;

  animation-duration: 1s;
  -webkit-animation-duration: 1s;

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

.press-people {
  position: absolute;
  top: 150px;
  left: -150px;
}

.famous {
  position: absolute;
  top: 180px;
  left: 60px;
  z-index: 6;
}

.famous2 {
  position: absolute;
  top: 175px;
  left: 150px;
  z-index: 6;
}

.photo {
  position: absolute;
  top: 140px;
  left: 250px;
  z-index: 6;
}

.security {
  position: absolute;
  top: -20px;
  left: 200px;
  z-index: 6;
}

.bright2,
.bright3 {
  background: #fff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  opacity: 0.2;
  animation-name: flash;
  -webkit-animation-name: flash;

  animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;

  -webkit-animation-timing-function: easy-out; /* Chrome, Safari, Opera */
    animation-timing-function: easy-out;
}

.bright2 {
  top: 10px;
  left: 80px;
}

.bright3 {
  top: 15px;
}

/*=======================

Illustrations section3

=========================*/

#bottle-illustration {
  position: relative;
  padding: 30px;
  width: 50%;
  margin-left: 50%;
}

#bottle {
  position: absolute;
  left: 50px;
}

#bottle > img {
  margin-left: 100px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.bubbles {
  position: absolute;
  top: 18px;
  left: 200px;
  z-index: 3;
}

#bubble1 {
  position: absolute;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #c19f76;
  animation-name: bubbles-slow;
  -webkit-animation-name: bubbles-slow;

  animation-duration: 4s;
  -webkit-animation-duration: 4s;

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;

  -webkit-animation-timing-function: easy-out; /* Chrome, Safari, Opera */
    animation-timing-function: easy-out;
}

#bubble2 {
  position: absolute;
  top: 6px;
  right: -25px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #d8bf9d;
  animation-name: bubbles-med;
  -webkit-animation-name: bubbles-med;

  animation-duration: 3s;
  -webkit-animation-duration: 3s;

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;

  -webkit-animation-timing-function: easy-out; /* Chrome, Safari, Opera */
    animation-timing-function: easy-out;
}

#bubble3 {
  position: absolute;
  top: 20px;
  right: -31px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #eacdb2;
  animation-name: bubbles;
  -webkit-animation-name: bubbles;

  animation-duration: 2s;
  -webkit-animation-duration: 2s;

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;

  -webkit-animation-timing-function: easy-out; /* Chrome, Safari, Opera */
    animation-timing-function: easy-out;
}

.waterfall {
  position: absolute;
  top: 50px;
  left: 210px;
  z-index: 2;
  width: 15px;
  height: 200px;
  background-color: #d8bf9d;
  overflow: hidden;
}

.waterfall-box {
  -webkit-animation: waterfall 1s infinite linear;
  -moz-animation: waterfall 1s infinite linear;
  -o-animation: waterfall 1s infinite linear;
  animation: waterfall 1s infinite linear;

}

.waterfall-loop {
  position: absolute;
  top: 0px;
  left: 0;
  width: 15px;
  height: 70px;
  background: url(../img/waterfall.png);
  background-repeat: no-repeat;
  -webkit-animation: waterfallloop 1s infinite linear;
  -moz-animation: waterfallloop 1s infinite linear;
  -o-animation: waterfallloop 1s infinite linear;
  animation: waterfallloop 1s infinite linear;
}

.floor {
  position: absolute;
  top: 240px;
  left: 168px;
  width: 100px;
}


.lamp-break {
  position: absolute;
  right: 20%;
  width: 60px;
  display: inline-block;
  transform-origin: top center;
  transform:rotate(45deg);
  animation: lamp 3s infinite forwards;
}

.bulb {
  fill:#FBF8CA;
  fill-opacity:0.3;
  animation: bulb .3s .3s 5 cubic-bezier(.26,1.17,.89,-0.74) alternate forwards;
}


.switch {
  transition:transform .3s;
  &:active{
   transform:translateY(5px);
  }
}


@keyframes bulb {
  to {
    fill-opacity:1;
    fill:#FBF8CA;
  }
}

@-moz-keyframes lamp {
    from { -moz-transform: rotate(-10deg); }
    50%  { -moz-transform: rotate(10deg); }
    to   { -moz-transform: rotate(-10deg); }
}
@-webkit-keyframes lamp {
    from { -webkit-transform: rotate(-10deg); }
    50%  { -webkit-transform: rotate(10deg); }
    to   { -webkit-transform: rotate(-10deg); }
}
@keyframes lamp {
    from { transform: rotate(-10deg); }
    50%  { transform: rotate(10deg); }
    to   { transform: rotate(-10deg); }
}


/*=======================

Illustrations section 4

=========================*/

#wish-illustration {
  width: 50%;
  height: 400px;
  margin-left: 50%;
}

#wish-row {
  position: relative;
  width: 100%;
  padding: 10% 0;
}

.wish {
  display: inline-block;
  width: 150px;
  height: 150px;
}

#wish1 {
  background-image: url('../img/bubble1.png');
  background-position: 50%;
  background-size: auto 80%;
  background-repeat: no-repeat;

  -webkit-animation-name: zoom-slow;
          animation-name: zoom-slow;

  -webkit-animation-duration: 4s;
          animation-duration: 4s;

  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;

}

#wish2 {
  background-image: url('../img/bubble2.png');
  background-position: 50%;
  background-size: auto 100%;
  background-repeat: no-repeat;
  -webkit-animation-name: zoom;
          animation-name: zoom;

  -webkit-animation-duration: 4s;
          animation-duration: 4s;

  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;

  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;

}

#wish3 {
  background-image: url('../img/bubble3.png');
  background-position: 50%;
  background-size: auto 100%;
  background-repeat: no-repeat;

  -webkit-animation-name: zoom-slow;
          animation-name: zoom-slow;

  -webkit-animation-duration: 4s;
          animation-duration: 4s;

  -webkit-animation-delay: 1s;
          animation-delay: 1s;

  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;

}

@-webkit-keyframes zoom {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.5, .5, .5);
            transform: scale3d(.5, .5, .5);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1.6,1.6,1.6);
            transform: scale3d(1.6,1.6,1.6);
  }
}

@keyframes zoom {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.5, .5, .5);
            transform: scale3d(.5, .5, .5);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1.6,1.6,1.6);
            transform: scale3d(1.6,1.6,1.6);
  }
}

@-webkit-keyframes zoom-slow {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.5, .5, .5);
            transform: scale3d(.5, .5, .5);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1.2,1.2,1.2);
            transform: scale3d(1.2,1.2,1.2);
  }
}

@keyframes zoom-slow {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.5, .5, .5);
            transform: scale3d(.5, .5, .5);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1.2,1.2,1.2);
            transform: scale3d(1.2,1.2,1.2);
  }
}

/*=======================

Illustrations section5

=========================*/

#ticket-illustration {
  position: relative;
  text-align: right;
  width: 50%;
  margin-left: 50%;
}

#ticket-box {
  position: relative;
  top: 50px;
  left: 30px;
  width: 450px;
  height: 229px;
  background-image: url('../img/ticket.png');
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 100%;
}

#ticket-illustration .pulse{
  position: absolute;
  top: 0;
  left: 0px;
}




/*=======================

Illustrations section6

=========================*/

/* Secret millionaire */
.absolute {
  position: absolute;
  top: 0;
  left: 15px;
}

.absolute1 {
  z-index: 4;
}
.absolute2 {
  z-index: 3;
  top: 74px;
  left: 74px;
  -moz-transform-origin: 50% 0px;
  -moz-animation-duration: 2s;
  -moz-animation-name: pendulum;
  -moz-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 20px;
  -webkit-animation-duration: 2s;
  -webkit-animation-name: pendulum;
  -webkit-animation-iteration-count: infinite;
  transform-origin: 50% 0px;
  animation-duration: 2s;
  animation-name: pendulum;
  animation-iteration-count: infinite;
}
.absolute3 {
  z-index: 2;
  top: 74px;
  left: 68px;
  -moz-transform-origin: 50% 0px;
  -moz-animation-duration: 2s;
  -moz-animation-name: pendulum;
  -moz-animation-iteration-count: infinite;
  -webkit-transform-origin: 40% 20px;
  -webkit-animation-duration: 2s;
  -webkit-animation-name: pendulum;
  -webkit-animation-iteration-count: infinite;
  transform-origin: 40% 0px;
  animation-duration: 2s;
  animation-name: pendulum;
  animation-iteration-count: infinite;
}

.pendulum {
  position: absolute;
  margin: 0 auto;
  width: 24px;
}

/* Derrochador millionaire */
.pulse {
  position: absolute;
}

.pulse1 {
  z-index: 2;
  top: 98px;
  left: 154px;
  animation-name: pulse;
  -webkit-animation-name: pulse;

  animation-duration: 1.2s;
  -webkit-animation-duration: 1.2s;

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

.pulse2 {
  top: 109px;
  left: 167px;
  z-index: 3;
  animation-name: pulse;
  -webkit-animation-name: pulse;

  animation-duration: 1s;
  -webkit-animation-duration: 1s;

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}


.fadeOutUp {
  position: absolute;
}

.fume1 {
  top: 43px;
  left: 158px;
  -webkit-animation-name: fadeOutUp;
          animation-name: fadeOutUp;

  -webkit-animation-duration: 1s;
          animation-duration: 1s;

  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.fume2 {
  top: 52px;
  left: 156px;
  -webkit-animation-name: fadeOutUp;
          animation-name: fadeOutUp;

  -webkit-animation-duration: 1s;
          animation-duration: 1s;

  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}


/* Solidary millionaire */
.send {
  top: 0px;
  left: 0px;
  -webkit-animation-name: fadeOutUp;
          animation-name: fadeOutUp;

  -webkit-animation-duration: 4s;
          animation-duration: 4s;

  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.food1 {
  top: -100px;
  right: 50px;
  z-index: 4;
  width: 80px;
  height: 140px;
  -webkit-animation: movefood 8s infinite linear;
  -moz-animation: movefood 8s infinite linear;
  -o-animation: movefood 8s infinite linear;
  animation: movefood 8s infinite linear;
}

.food2 {
  top: -80px;
  right: 100px;
  z-index: 3;
  width: 50px;
  height: 88px;
  opacity: 0.8;
  -webkit-animation: movefood 15s infinite linear;
  -moz-animation: movefood 15s infinite linear;
  -o-animation: movefood 15s infinite linear;
  animation: movefood 15s infinite linear;
}

.food3 {
  top: -40px;
  right: 20px;
  z-index: 2;
  width: 40px;
  height: 70px;
  opacity: 0.6;
  -webkit-animation: movefood 25s infinite linear;
  -moz-animation: movefood 25s infinite linear;
  -o-animation: movefood 25s infinite linear;
  animation: movefood 25s infinite linear;
}

.bulb {
  top: 20px;
  left: 88px;
  z-index: 4;
  animation-name: pulse;
  -webkit-animation-name: pulse;

  animation-duration: 1.2s;
  -webkit-animation-duration: 1.2s;

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}
.bright {
  top: 6px;
  left: 69px;
  z-index: 3;
  background: #ffdd00;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  opacity: 0.2;
  animation-name: zoomIn;
  -webkit-animation-name: zoomIn;

  animation-duration: 1s;
  -webkit-animation-duration: 1s;

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;

  -webkit-animation-timing-function: easy-out; /* Chrome, Safari, Opera */
    animation-timing-function: easy-out;
}

/*
==============================================
Clouds animation
==============================================
*/

@-webkit-keyframes moveclouds {
  from{margin-left:-100px}to{margin-left:1920px}
}

@-moz-keyframes moveclouds {
  from{margin-left:-100px}to{margin-left:1920px}
}

@-o-keyframes moveclouds {
  from{margin-left:-100px}to{margin-left:1920px}
}
@keyframes moveclouds {
  from{margin-left:-100px}to{margin-left:1920px}
}

/*
==============================================
Boat animation
==============================================
*/

@-webkit-keyframes boatUpDown {
  0% {transform: translate3d(0, 0, 0);}
  25% {transform: translate3d(0, 3px, 0);}
  50% {transform: translate3d(0, 0, 0);}
  75% {transform: translate3d(0, -3px, 0);}
  100% {transform: translate3d(0, 0, 0);}
}

@keyframes boatUpDown {
  0% {transform: translate3d(0, 0, 0);}
  25% {transform: translate3d(0, 3px, 0);}
  50% {transform: translate3d(0, 0, 0);}
  75% {transform: translate3d(0, -3px, 0);}
  100% {transform: translate3d(0, 0, 0);}
}

@-webkit-keyframes boatrotate {
    from {transform: rotate(-2deg); }
    50%  {transform: rotate(2deg); }
    to   {transform: rotate(-2deg); }
}

@-moz-keyframes boatrotate {
    from {transform: rotate(-2deg); }
    50%  {transform: rotate(2deg); }
    to   {transform: rotate(-2deg); }
}

@-o-keyframes boatrotate {
    from {transform: rotate(-2deg); }
    50%  {transform: rotate(2deg); }
    to   {transform: rotate(-2deg); }
}
@keyframes boatrotate {
    from {transform: rotate(-2deg); }
    50%  {transform: rotate(2deg); }
    to   {transform: rotate(-2deg); }
}

/*
==============================================
Pendulum animation
==============================================
*/

@-moz-keyframes pendulum {
    from { -moz-transform: rotate(-2deg); }
    50%  { -moz-transform: rotate(2deg); }
    to   { -moz-transform: rotate(-2deg); }
}
@-webkit-keyframes pendulum {
    from { -webkit-transform: rotate(-2deg); }
    50%  { -webkit-transform: rotate(2deg); }
    to   { -webkit-transform: rotate(-2deg); }
}
@keyframes pendulum {
    from { transform: rotate(-2deg); }
    50%  { transform: rotate(2deg); }
    to   { transform: rotate(-2deg); }
}

/*
==============================================
Pulse animation
==============================================
*/

@keyframes pulse {
  0% {transform: scale(0.9);}
  50% {transform: scale(1);}
  100% {transform: scale(0.9);}
}

@-webkit-keyframes pulse {
  0% {-webkit-transform: scale(0.95);}
  50% {-webkit-transform: scale(1);}
  100% {-webkit-transform: scale(0.95);}
}

/*
==============================================
FadeOut animation
==============================================
*/

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}

/*
==============================================
Food animation
==============================================
*/

@-webkit-keyframes movefood {
  from{margin-top:0px}to{margin-top:370px}
}

@-moz-keyframes movefood {
  from{margin-top:0px}to{margin-top:370px}
}

@-o-keyframes movefood {
  from{margin-top:0px}to{margin-top:370px}
}
@keyframes movefood {
  from{margin-top:0px}to{margin-top:370px}
}

/*
==============================================
Brightness animation
=============================================8
*/

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 0.2;
  }
}

/*
==============================================
flash
=============================================8
*/

@keyframes flash {
  0% {
    opacity: 0.5;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

/*
==============================================
Focus animation
=============================================8
*/

@keyframes focus {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 0.3;
  }
}


/*
==============================================
Bubble animation
=============================================8
*/

@keyframes bubbles-slow {
  0% {
    opacity: 0.9;
    -webkit-transform: scale3d(.8, .8, .8);
            transform: scale3d(.8, .8, .8);
  }

  50% {
    opacity: 1;
  }
}

@keyframes bubbles-med {
  0% {
    opacity: 0.7;
    -webkit-transform: scale3d(.6, .6, .6);
            transform: scale3d(.6, .6, .6);
  }

  50% {
    opacity: 1;
  }
}

@keyframes bubbles {
  0% {
    opacity: 0.5;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

/*
==============================================
Waterfall animation
=============================================8
*/

@keyframes waterfall {
  0% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}

@-webkit-keyframes waterfallloop {
  from{margin-top:-100px}to{margin-top:200px}
}

@-moz-keyframes waterfallloop {
  from{margin-top:-100px}to{margin-top:200px}
}

@-o-keyframes waterfallloop {
  from{margin-top:-100px}to{margin-top:200px}
}
@keyframes waterfallloop {
  from{margin-top:-100px}to{margin-top:200px}
}




@media (max-width: 1199px) {
  .illustration {
    display: none;
  }
}