*{
  margin: 0;
  padding: 0;
}

html,
body
{
  padding: 0;
  margin: 0;
}

body{
  background-color: #b3e3fa;
  font-family: 'Avenir Next', 'Helvetica Neue', sans-serif;
  font-weight: normal;
  font-size: 20px;
  margin: 0;
  color: #ffffff;
  overflow-x: hidden; /*hide horizontal scrollbars, since we use the vertical ones to scroll to the right*/

}
  
h1{
  font-weight: 700;
}

h2{
  font-weight: 700;
}

a{
  outline: 0;
  text-decoration: none;
  -webkit-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
  -moz-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
  -o-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
  transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
}

a, a:active, a:focus {
  outline: none;
}

::-webkit-scrollbar
{
  width: 0px;
}
::-webkit-scrollbar-track-piece
{
  background-color: transparent;
  -webkit-border-radius: 6px;
}

.drawer p{
  margin: 0;
}

.stop-scrolling{
  position: fixed;
}


/* ========= CLOUDS ========= */

#container_clouds{
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 300px;
  width: 900px;
}

.window_city_cloud{
  background: url("../images/room/windows/cloud.png") no-repeat center top;
  background-size: 100% auto;
  display: block;
  position: absolute;
  z-index:5;
}

.cloud_city_one{
  width: 50px;
  height: 28px;
  top: 18px;
  z-index:3;
  opacity: .5;
  -webkit-animation: cloudcityone 20s linear infinite; /* Chrome, Safari, Opera */
  -moz-animation: cloudcityone 20s linear infinite; /* Mozilla */
  -o-animation: cloudcityone 20s linear infinite; /* Opera */
  -ms-animation: cloudcityone 20s linear infinite; /* Mozilla */
  animation: cloudcityone 20s linear infinite; /* Rest */
}

/* Chrome, Safari */
@-webkit-keyframes cloudcityone{
    0%{
      left: 0px;
      opacity: 0;
    }
    1%{
      opacity: 1;
    }
    99%{
      opacity: 1;
    }
    100%{
      left: 900px;
      opacity: 0;
    }
}

/* Mozilla */
@-moz-keyframes cloudcityone{
    0%{
      left: 0px;
      opacity: 0;
    }
    1%{
      opacity: 1;
    }
    99%{
      opacity: 1;
    }
    100%{
      left: 900px;
      opacity: 0;
    }
}

/* Opera */
@-o-keyframes cloudcityone{
    0%{
      left: 0px;
      opacity: 0;
    }
    1%{
      opacity: 1;
    }
    99%{
      opacity: 1;
    }
    100%{
      left: 900px;
      opacity: 0;
    }
}

/* Explorer */
@-ms-keyframes cloudcityone{
    0%{
      left: 0px;
      opacity: 0;
    }
    1%{
      opacity: 1;
    }
    99%{
      opacity: 1;
    }
    100%{
      left: 900px;
      opacity: 0;
    }
}

/* Else */
@keyframes cloudcityone{
    0%{
      left: 0px;
      opacity: 0;
    }
    1%{
      opacity: 1;
    }
    99%{
      opacity: 1;
    }
    100%{
      left: 900px;
      opacity: 0;
    }
}

.cloud_city_two{
  width: 36px;
  height: 20px;
  top: 100px;
  z-index:3;
  opacity: .5;
  -webkit-animation: cloudcitytwo 18s linear infinite; /* Chrome, Safari, Opera */
  -moz-animation: cloudcitytwo 18s linear infinite; /* Mozilla */
  -o-animation: cloudcitytwo 18s linear infinite; /* Opera */
  -ms-animation: cloudcitytwo 18s linear infinite; /* Mozilla */
  animation: cloudcitytwo 18s linear infinite; /* Rest */
}

/* Chrome, Safari */
@-webkit-keyframes cloudcitytwo{
    0%{
      left: 50px;
      opacity: 0;
    }
    1%{
      opacity: 1;
    }
    99%{
      opacity: 1;
    }
    100%{
      left: 974px;
      opacity: 0;
    }
}

/* Mozilla */
@-moz-keyframes cloudcitytwo{
    0%{
      left: 50px;
      opacity: 0;
    }
    1%{
      opacity: 1;
    }
    99%{
      opacity: 1;
    }
    100%{
      left: 974px;
      opacity: 0;
    }
}

/* Opera */
@-o-keyframes cloudcitytwo{
    0%{
      left: 50px;
      opacity: 0;
    }
    1%{
      opacity: 1;
    }
    99%{
      opacity: 1;
    }
    100%{
      left: 974px;
      opacity: 0;
    }
}

/* Explorer */
@-ms-keyframes cloudcitytwo{
    0%{
      left: 50px;
      opacity: 0;
    }
    1%{
      opacity: 1;
    }
    99%{
      opacity: 1;
    }
    100%{
      left: 974px;
      opacity: 0;
    }
}

/* Else */
@keyframes cloudcitytwo{
    0%{
      left: 50px;
      opacity: 0;
    }
    1%{
      opacity: 1;
    }
    99%{
      opacity: 1;
    }
    100%{
      left: 974px;
      opacity: 0;
    }
}

.cloud_city_three{
  width: 50px;
  height: 28px;
  top: 150px;
  z-index:3;
  opacity: .5;
  -webkit-animation: cloudcitythree 25s linear infinite; /* Chrome, Safari, Opera */
  -moz-animation: cloudcitythree 25s linear infinite; /* Mozilla */
  -o-animation: cloudcitythree 25s linear infinite; /* Opera */
  -ms-animation: cloudcitythree 25s linear infinite; /* Mozilla */
  animation: cloudcitythree 25s linear infinite; /* Rest */
}

/* Chrome, Safari */
@-webkit-keyframes cloudcitythree{
    0%{
      left: 20px;
      opacity: 0;
    }
    1%{
      opacity: 1;
    }
    99%{
      opacity: 1;
    }
    100%{
      left: 915px;
      opacity: 0;
    }
}

/* Mozilla */
@-moz-keyframes cloudcitythree{
    0%{
      left: 20px;
      opacity: 0;
    }
    1%{
      opacity: 1;
    }
    99%{
      opacity: 1;
    }
    100%{
      left: 915px;
      opacity: 0;
    }
}

/* Opera */
@-o-keyframes cloudcitythree{
    0%{
      left: 20px;
      opacity: 0;
    }
    1%{
      opacity: 1;
    }
    99%{
      opacity: 1;
    }
    100%{
      left: 915px;
      opacity: 0;
    }
}

/* Explorer */
@-ms-keyframes cloudcitythree{
    0%{
      left: 20px;
      opacity: 0;
    }
    1%{
      opacity: 1;
    }
    99%{
      opacity: 1;
    }
    100%{
      left: 915px;
      opacity: 0;
    }
}

/* Else */
@keyframes cloudcitythree{
    0%{
      left: 20px;
      opacity: 0;
    }
    1%{
      opacity: 1;
    }
    99%{
      opacity: 1;
    }
    100%{
      left: 915px;
      opacity: 0;
    }
}

.cloud_city_four{
  width: 36px;
  height: 20px;
  top: 120px;
  z-index:3;
  opacity: .5;
  -webkit-animation: cloudcityfour 30s linear infinite; /* Chrome, Safari, Opera */
  -moz-animation: cloudcityfour 30s linear infinite; /* Mozilla */
  -o-animation: cloudcityfour 30s linear infinite; /* Opera */
  -ms-animation: cloudcityfour 30s linear infinite; /* Mozilla */
  animation: cloudcityfour 30s linear infinite; /* Rest */
}

/* Chrome, Safari */
@-webkit-keyframes cloudcityfour{
    0%{
      left: 0px;
      opacity: 0;
    }
    1%{
      opacity: 1;
    }
    99%{
      opacity: 1;
    }
    100%{
      left: 890px;
      opacity: 0;
    }
}

/* Mozilla */
@-moz-keyframes cloudcityfour{
    0%{
      left: 0px;
      opacity: 0;
    }
    1%{
      opacity: 1;
    }
    99%{
      opacity: 1;
    }
    100%{
      left: 890px;
      opacity: 0;
    }
}

/* Opera */
@-o-keyframes cloudcityfour{
    0%{
      left: 0px;
      opacity: 0;
    }
    1%{
      opacity: 1;
    }
    99%{
      opacity: 1;
    }
    100%{
      left: 890px;
      opacity: 0;
    }
}

/* Explorer */
@-ms-keyframes cloudcityfour{
    0%{
      left: 0px;
      opacity: 0;
    }
    1%{
      opacity: 1;
    }
    99%{
      opacity: 1;
    }
    100%{
      left: 890px;
      opacity: 0;
    }
}

/* Else */
@keyframes cloudcityfour{
    0%{
      left: 0px;
      opacity: 0;
    }
    1%{
      opacity: 1;
    }
    99%{
      opacity: 1;
    }
    100%{
      left: 890px;
      opacity: 0;
    }
}

.cloud_city_five{
  width: 36px;
  height: 20px;
  top: 60px;
  z-index:3;
  opacity: .5;
  -webkit-animation: cloudcityfive 28s linear infinite; /* Chrome, Safari, Opera */
  -moz-animation: cloudcityfive 28s linear infinite; /* Mozilla */
  -o-animation: cloudcityfive 28s linear infinite; /* Opera */
  -ms-animation: cloudcityfive 28s linear infinite; /* Mozilla */
  animation: cloudcityfive 28s linear infinite; /* Rest */
}

/* Chrome, Safari */
@-webkit-keyframes cloudcityfive{
    0%{
      left: 200px;
      opacity: 0;
    }
    1%{
      opacity: 1;
    }
    99%{
      opacity: 1;
    }
    100%{
      left: 910px;
      opacity: 0;
    }
}

/* Mozilla */
@-moz-keyframes cloudcityfive{
    0%{
      left: 200px;
      opacity: 0;
    }
    1%{
      opacity: 1;
    }
    99%{
      opacity: 1;
    }
    100%{
      left: 910px;
      opacity: 0;
    }
}

/* Opera */
@-o-keyframes cloudcityfive{
    0%{
      left: 200px;
      opacity: 0;
    }
    1%{
      opacity: 1;
    }
    99%{
      opacity: 1;
    }
    100%{
      left: 910px;
      opacity: 0;
    }
}

/* Explorer */
@-ms-keyframes cloudcityfive{
    0%{
      left: 200px;
      opacity: 0;
    }
    1%{
      opacity: 1;
    }
    99%{
      opacity: 1;
    }
    100%{
      left: 910px;
      opacity: 0;
    }
}

/* Else */
@keyframes cloudcityfive{
    0%{
      left: 200px;
      opacity: 0;
    }
    1%{
      opacity: 1;
    }
    99%{
      opacity: 1;
    }
    100%{
      left: 910px;
      opacity: 0;
    }
}

/* ========= TIME MACHINE ========= */

.tm_right.time_machine{
  display: block;
  width: 272px;
  height: 466px;
  position: absolute;
  bottom: 23px;
  right: 0px;
  z-index: 4;
}

.tm_left.time_machine{
  display: block;
  width: 272px;
  height: 466px;
  position: fixed;
  bottom: 23px;
  left: 0px;
  right: 0px;
  margin: 0 auto;
  z-index: 25;
}

.tm_end.time_machine{
  display: none;
  width: 670px;
  height: 466px;
  position: fixed;
  bottom: 23px;
  left: 0px;
  right: 0px;
  margin: 0 auto;
  z-index: 25;
}

.time_machine_inner{
  position: relative;
  width: 272px;
  height: 466px;
  overflow: hidden;
}

#tm_bulb{
  background: url("../images/time_machine/light_bulb.png") no-repeat left top;
  background-size: 100% auto;
  display: block;
  width: 21px;
  height: 21px;
  position: absolute;
  top: 35px;
  right: 133px;
  z-index: 3;
  border-radius: 50%;
  -webkit-animation: tmbulb 1s linear infinite; /* Chrome, Safari, Opera */
  -moz-animation: tmbulb 1s linear infinite; /* Mozilla */
  -o-animation: tmbulb 1s linear infinite; /* Opera */
  -ms-animation: tmbulb 1s linear infinite; /* Mozilla */
  animation: tmbulb 1s linear infinite; /* Rest */
}

/* Chrome, Safari */
@-webkit-keyframes tmbulb{
    0% {background-color: #ffff00;}
    50% {background-color: #ff0000;}
    100% {background-color: #ffff00;}
}
/* Mozilla */
@-moz-keyframes tmbulb{
    0% {background-color: #ffff00;}
    50% {background-color: #ff0000;}
    100% {background-color: #ffff00;}
}

/* Opera */
@-o-keyframes tmbulb{
    0% {background-color: #ffff00;}
    50% {background-color: #ff0000;}
    100% {background-color: #ffff00;}
}

/* Explorer */
@-ms-keyframes tmbulb{
    0% {background-color: #ffff00;}
    50% {background-color: #ff0000;}
    100% {background-color: #ffff00;}
}

/* Else */
@keyframes tmbulb{
    0% {background-color: #ffff00;}
    50% {background-color: #ff0000;}
    100% {background-color: #ffff00;}
}

#tm_light_bulb{
  background: url("../images/time_machine/light.png") no-repeat left top;
  background-size: 100% auto;
  display: block;
  width: 66px;
  height: 48px;
  position: absolute;
  top: 3px;
  right: 112px;
  z-index: 2;
  -webkit-animation: tmlightbulb 1s linear infinite; /* Chrome, Safari, Opera */
  -moz-animation: tmlightbulb 1s linear infinite; /* Mozilla */
  -o-animation: tmlightbulb 1s linear infinite; /* Opera */
  -ms-animation: tmbulbtmlightbulb 1s linear infinite; /* Mozilla */
  animation: tmlightbulb 1s linear infinite; /* Rest */
}

/* Chrome, Safari */
@-webkit-keyframes tmlightbulb{
    0% {opacity: .3;}
    50% {opacity: 1;}
    100% {opacity: .3;}
}
/* Mozilla */
@-moz-keyframes tmlightbulb{
    0% {opacity: .3;}
    50% {opacity: 1;}
    100% {opacity: .3;}
}

/* Opera */
@-o-keyframes tmlightbulb{
    0% {opacity: .3;}
    50% {opacity: 1;}
    100% {opacity: .3;}
}

/* Explorer */
@-ms-keyframes tmlightbulb{
    0% {opacity: .3;}
    50% {opacity: 1;}
    100% {opacity: .3;}
}

/* Else */
@keyframes tmlightbulb{
    0% {opacity: .3;}
    50% {opacity: 1;}
    100% {opacity: .3;}
}

#tm_relog{
  background-color: #bd9f23;
  display: block;
  width: 68px;
  height: 68px;
  position: absolute;
  top: 107px;
  right: 93px;
  z-index: 6;
  border-radius: 50%;
}

#tm_inner_relog{
  display: block;
  width: 68px;
  height: 68px;
  position: relative;
}

#tm_inner_circle{
  background-color: #ffffff;
  display: block;
  width: 49px;
  height: 49px;
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 1;
  border-radius: 50%;
  border: 4px solid #f5cb2c;
}

#tm_inner_lil_circle{
  background-color: #000000;
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 4;
  border-radius: 50%;
}

#tm_relog_uno, #tm_relog_dos{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#tm_relog_uno{
  background: #000;
  height: 22px;
  width: 4px;
  left: 32px;
  position: absolute;
  top: 16px;
  transform-origin: 50% 80%;
  z-index: 2;
  border-radius: 25%;
  -webkit-animation: relog_rotate 2s infinite linear; /* Chrome, Safari, Opera */
  -moz-animation: relog_rotate 2s infinite linear; /* Mozilla */
  -o-animation: relog_rotate 2s infinite linear; /* Opera */
  -ms-animation: relog_rotate 2s infinite linear; /* Mozilla */
  animation: relog_rotate 2s infinite linear; /* Rest */
}

/* Chrome, Safari */
@-webkit-keyframes relog_rotate {
  100% {
    transform: rotateZ(360deg);
  }
}

/* Mozilla */
@-moz-keyframes relog_rotate {
  100% {
    transform: rotateZ(360deg);
  }
}

/* Opera */
@-o-keyframes relog_rotate {
  100% {
    transform: rotateZ(360deg);
  }
}

/* Explorer */
@-ms-keyframes relog_rotate {
  100% {
    transform: rotateZ(360deg);
  }
}

/* Else */
@keyframes relog_rotate {
  100% {
    transform: rotateZ(360deg);
  }
}

#tm_relog_dos{
  background: #000;
  height: 15px;
  width: 4px;
  left: 32px;
  position: absolute;
  top: 22px;
  transform-origin: 50% 80%;
  z-index: 2;
  border-radius: 30%;
  -webkit-animation: relog_rotate_dos 5s infinite linear; /* Chrome, Safari, Opera */
  -moz-animation: relog_rotate_dos 5s infinite linear; /* Mozilla */
  -o-animation: relog_rotate_dos 5s infinite linear; /* Opera */
  -ms-animation: relog_rotate_dos 5s infinite linear; /* Mozilla */
  animation: relog_rotate_dos 5s infinite linear; /* Rest */
}

/* Chrome, Safari */
@-webkit-keyframes workinghandrelog_rotate_dos {
  100% {
    transform: rotateZ(-360deg);
  }
}

/* Mozilla */
@-moz-keyframes workinghandrelog_rotate_dos {
  100% {
    transform: rotateZ(-360deg);
  }
}

/* Opera */
@-o-keyframes workinghandrelog_rotate_dos {
  100% {
    transform: rotateZ(-360deg);
  }
}

/* Explorer */
@-ms-keyframes workinghandrelog_rotate_dos {
  100% {
    transform: rotateZ(-360deg);
  }
}

/* Else */
@keyframes relog_rotate_dos {
  100% {
    transform: rotateZ(-360deg);
  }
}

#tm_cupula{
  background: url("../images/time_machine/bulb.png") no-repeat left top;
  background-size: 100% auto;
  display: block;
  width: 232px;
  height: 83px;
  position: absolute;
  top: 48px;
  right: 20px;
  z-index: 4;
}

#tm_barra{
  background: url("../images/time_machine/barra.png") no-repeat center top;
  background-size: 100% auto;
  display: block;
  width: 100%;
  height: 10px;
  position: absolute;
  top: 130px;
  right: 0px;
  z-index: 5;
}

#tm_contenido{
  background: url("../images/time_machine/bar.png") repeat center top;
  background-size: 100% auto;
  display: block;
  width: 231px;
  height: 327px;
  position: absolute;
  bottom: 0px;
  right: 20px;
  z-index: 3;
}

#tm_right_tornillo{
  background: url("../images/time_machine/tornillo.png") repeat-y center top;
  background-size: 100% auto;
  display: block;
  width: 20px;
  height: 327px;
  position: absolute;
  bottom: 0px;
  right: 51px;
  z-index: 4;
}

#tm_left_tornillo{
  background: url("../images/time_machine/tornillo.png") repeat-y center top;
  background-size: 100% auto;
  display: block;
  width: 20px;
  height: 327px;
  position: absolute;
  bottom: 0px;
  left: 39px;
  z-index: 4;
}

#tm_stairs{
  background: url("../images/time_machine/stairs.png") repeat-y center top;
  background-size: 100% auto;
  display: block;
  width: 209px;
  height: 39px;
  position: absolute;
  bottom: 0px;
  right: 0px;
  left: 0;
  margin: 0 auto;
  z-index: 6;
}

#tm_entrance{
  background: #000000;
  display: block;
  width: 85px;
  height: 194px;
  position: absolute;
  border-right: 8px solid #bdccd4;
  border-left: 8px solid #bdccd4;
  bottom: 39px;
  right: 0px;
  left: 0;
  margin: 0 auto;
  z-index: 5;
}

#tm_entrance_top{
  background: #000000;
  display: block;
  width: 85px;
  height: 85px;
  position: absolute;
  border: 8px solid #bdccd4;
  border-radius: 50%;
  z-index: 4;
  bottom: 184px;
  right: 0px;
  left: 0;
  margin: 0 auto;
}

/* ========== CANADIAN GEMS ========== */

.maple_gem{
  display: block;
  width: 137px;
  height: 137px;
}

.maple_gem_red{
  background: url(../svg/maple_red.svg) no-repeat center center;
}

.maple_gem_blue{
  background: url(../svg/maple_blue.svg) no-repeat center center;
}

.maple_gem_green{
  background: url(../svg/maple_green.svg) no-repeat center center;
}

.maple_gem_pink{
  background: url(../svg/maple_pink.svg) no-repeat center center;
}

.maple_gem_purple{
  background: url(../svg/maple_purple.svg) no-repeat center center;
}

.maple_gem_yellow{
  background: url(../svg/maple_yellow.svg) no-repeat center center;
}

.gem_fleur_de_lis{
  background: url(../svg/gem_fleur_de_lis.svg) no-repeat center center;
}

.gem_fleur_de_lis_gold{
  background: url(../svg/gem_fleur_de_lis_gold.svg) no-repeat center center;
}

.gem_david{
  background: url(../svg/gem_david.svg) no-repeat center center;
}

.gem_skull{
  background: url(../svg/gem_skull.svg) no-repeat center center;
}

.gem_crown{
  background: url(../svg/gem_crown.svg) no-repeat center center;
}

.gem_pumpkin{
  background: url(../svg/gem_pumpkin.svg) no-repeat center center;
}

.gem_1{
  left: 1900px;
}

.coin_1{
  left: 3488px;
}

.gem_2{
  left: 5347px;
}

.coin_2{
  left: 7795px;
}

.gem_3{
  left: 9800px;
}

.coin_3{
  left: 13562px;
}

.one_dollar{
  width: 147px;
  height: 139px;
  position: absolute;
  bottom: 266px;
  display: block;
  z-index: 11;
}

.container_coin{
  position: relative;
  overflow: hidden;
  z-index: 1;
  perspective: 1000;
}

.shine{
  background: url(../svg/star.svg) no-repeat center center;
  display: block;
  width: 27px;
  height: 27px;
}

.shining_1{
  -webkit-animation: shine 2s infinite linear; /* Chrome, Safari, Opera */
  -moz-animation: shine 2s infinite linear; /* Mozilla */
  -o-animation: shine 2s infinite linear; /* Opera */
  -ms-animation: shine 2s infinite linear; /* Mozilla */
  animation: shine 2s infinite linear; /* Rest */
}

/* Chrome, Safari */
@-webkit-keyframes shine {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/* Mozilla */
@-moz-keyframes shine {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/* Opera */
@-o-keyframes shine {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/* Explorer */
@-ms-keyframes shine {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/* Else */
@keyframes shine {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.shining_2{
  -webkit-animation: shine_t 2s infinite linear; /* Chrome, Safari, Opera */
  -moz-animation: shine_t 2s infinite linear; /* Mozilla */
  -o-animation: shine_t 2s infinite linear; /* Opera */
  -ms-animation: shine_t 2s infinite linear; /* Mozilla */
  animation: shine_t 2s infinite linear; /* Rest */
}

/* Chrome, Safari */
@-webkit-keyframes shine_t {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

/* Mozilla */
@-moz-keyframes shine_t {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

/* Opera */
@-o-keyframes shine_t {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

/* Explorer */
@-ms-keyframes shine_t {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

/* Else */
@keyframes shine_t {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

.shining_3{
  -webkit-animation: shine 2.5s infinite linear; /* Chrome, Safari, Opera */
  -moz-animation: shine 2.5s infinite linear; /* Mozilla */
  -o-animation: shine 2.5s infinite linear; /* Opera */
  -ms-animation: shine 2.5s infinite linear; /* Mozilla */
  animation: shine 2.5s infinite linear; /* Rest */
}

.shining_4{
  -webkit-animation: shine 2.3s infinite linear; /* Chrome, Safari, Opera */
  -moz-animation: shine 2.3s infinite linear; /* Mozilla */
  -o-animation: shine 2.3s infinite linear; /* Opera */
  -ms-animation: shine 2.3s infinite linear; /* Mozilla */
  animation: shine 2.3s infinite linear; /* Rest */
}

.shine_1{
  position: absolute;
  top: 0;
  left: 57px;
  z-index: 1;
}

.shine_2{
  position: absolute;
  top: 50px;
  right: 20px;
  z-index: 1;
}

.shine_3{
  position: absolute;
  top: 100px;
  left: 36px;
  z-index: 1;
}

.shine_4{
  position: absolute;
  top: 0px;
  left: 55px;
  z-index: 1;
}

.shine_5{
  position: absolute;
  top: 61px;
  right: 0px;
  z-index: 1;
}

.shine_6{
  position: absolute;
  top: 109px;
  left: 23px;
  z-index: 1;
}

.shine_7{
  position: absolute;
  top: 38px;
  left: 0px;
  z-index: 1;
}

.shine_8{
  position: absolute;
  top: 58px;
  left: 0px;
  z-index: 1;
}

.shine_9{
  position: absolute;
  top: 109px;
  left: 47px;
  z-index: 1;
}

.shine_10{
  position: absolute;
  top: 87px;
  left: 81px;
  z-index: 1;
}

.shine_11{
  position: absolute;
  top: 64px;
  left: 81px;
  z-index: 1;
}

.shine_12{
  position: absolute;
  top: 80px;
  left: 82px;
  z-index: 1;
}

.shine_13{
  position: absolute;
  top: 108px;
  left: 46px;
  z-index: 1;
}

.shine_14{
  position: absolute;
  top: 55px;
  left: 28px;
  z-index: 1;
}

.shine_15{
  position: absolute;
  top: 55px;
  left: 82px;
  z-index: 1;
}

.shine_16{
  position: absolute;
  top: 21px;
  left: 111px;
  z-index: 1;
}

.shine_17{
  position: absolute;
  top: 42px;
  left: 113px;
  z-index: 1;
}

.shine_18{
  position: absolute;
  top: 38px;
  left: 83px;
  z-index: 1;
}

.shine_19{
  position: absolute;
  top: 56px;
  left: 19px;
  z-index: 1;
}

.shine_20{
  position: absolute;
  top: 89px;
  left: 56px;
  z-index: 1;
}

.main_coin_1d{
  width: 137px;
  height: 137px;
  display: block;
}

.rotate_coin{
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; 
}

.d1_front{
  background: url(../svg/1d_front.svg) no-repeat center center;
  width: 137px;
  height: 137px;
  display: block;
    -webkit-animation: Rotate 2000ms linear 0ms infinite;
    -moz-animation: Rotate 2000ms linear 0ms infinite;
    -o-animation: Rotate 2000ms linear 0ms infinite;
    -ms-animation: Rotate 2000ms linear 0ms infinite;
    animation: Rotate 2000ms linear 0ms infinite;
}

.d1_back{
  background: url(../svg/1d_back.svg) no-repeat center center;
  width: 137px;
  height: 137px;
  display: block;
    -webkit-animation: BackRotate 2000ms linear 00ms infinite;
    -moz-animation: BackRotate 2000ms linear 00ms infinite;
    -o-animation: BackRotate 2000ms linear 00ms infinite;
    -ms-animation: BackRotate 2000ms linear 00ms infinite;
    animation: BackRotate 2000ms linear 0ms infinite;
    }

/* Chrome, Safari */
@-webkit-keyframes Rotate {
  from {transform:rotateY(0deg);}
  to {transform:rotateY(360deg);}
}

/* Mozilla */
@-moz-keyframes Rotate {
  from {transform:rotateY(0deg);}
  to {transform:rotateY(360deg);}
}

/* Opera */
@-o-keyframes Rotate {
  from {transform:rotateY(0deg);}
  to {transform:rotateY(360deg);}
}

/* Explorer */
@-ms-keyframes Rotate {
  from {transform:rotateY(0deg);}
  to {transform:rotateY(360deg);}
}

/* Else */
@keyframes Rotate {
  from {transform:rotateY(0deg);}
  to {transform:rotateY(360deg);}
}

/* Chrome, Safari */
@-webkit-keyframes BackRotate {
  from {transform:rotateY(180deg);}
  to {transform:rotateY(540deg);}
}

/* Mozilla */
@-moz-keyframes BackRotate {
  from {transform:rotateY(180deg);}
  to {transform:rotateY(540deg);}
}

/* Opera */
@-o-keyframes BackRotate {
  from {transform:rotateY(180deg);}
  to {transform:rotateY(540deg);}
}

/* Explorer */
@-ms-keyframes BackRotate {
  from {transform:rotateY(180deg);}
  to {transform:rotateY(540deg);}
}

/* Else */
@keyframes BackRotate {
  from {transform:rotateY(180deg);}
  to {transform:rotateY(540deg);}
}


.d2_front{
  background: url(../svg/2d_front.svg) no-repeat center center;
  width: 137px;
  height: 137px;
  display: block;
    -webkit-animation: Rotate 2000ms linear 0ms infinite;
    -moz-animation: Rotate 2000ms linear 0ms infinite;
    -o-animation: Rotate 2000ms linear 0ms infinite;
    -ms-animation: Rotate 2000ms linear 0ms infinite;
    animation: Rotate 2000ms linear 0ms infinite;
}

.d2_back{
  background: url(../svg/2d_back.svg) no-repeat center center;
  width: 137px;
  height: 137px;
  display: block;
    -webkit-animation: BackRotate 2000ms linear 00ms infinite;
    -moz-animation: BackRotate 2000ms linear 00ms infinite;
    -o-animation: BackRotate 2000ms linear 00ms infinite;
    -ms-animation: BackRotate 2000ms linear 00ms infinite;
    animation: BackRotate 2000ms linear 0ms infinite;
}

/* Chrome, Safari */
@-webkit-keyframes Rotate {
  from {transform:rotateY(0deg);}
  to {transform:rotateY(360deg);}
}

/* Mozilla */
@-moz-keyframes Rotate {
  from {transform:rotateY(0deg);}
  to {transform:rotateY(360deg);}
}

/* Opera */
@-o-keyframes Rotate {
  from {transform:rotateY(0deg);}
  to {transform:rotateY(360deg);}
}

/* Explorer */
@-ms-keyframes Rotate {
  from {transform:rotateY(0deg);}
  to {transform:rotateY(360deg);}
}

/* Else */
@keyframes Rotate {
  from {transform:rotateY(0deg);}
  to {transform:rotateY(360deg);}
}

/* Chrome, Safari */
@-webkit-keyframes BackRotate {
  from {transform:rotateY(180deg);}
  to {transform:rotateY(540deg);}
}

/* Mozilla */
@-moz-keyframes BackRotate {
  from {transform:rotateY(180deg);}
  to {transform:rotateY(540deg);}
}

/* Opera */
@-o-keyframes BackRotate {
  from {transform:rotateY(180deg);}
  to {transform:rotateY(540deg);}
}

/* Explorer */
@-ms-keyframes BackRotate {
  from {transform:rotateY(180deg);}
  to {transform:rotateY(540deg);}
}

/* Else */
@keyframes BackRotate {
  from {transform:rotateY(180deg);}
  to {transform:rotateY(540deg);}
}

.c50_front{
  background: url(../svg/c50_front.svg) no-repeat center center;
  width: 137px;
  height: 137px;
  display: block;
    -webkit-animation: Rotate 2000ms linear 0ms infinite;
    -moz-animation: Rotate 2000ms linear 0ms infinite;
    -o-animation: Rotate 2000ms linear 0ms infinite;
    -ms-animation: Rotate 2000ms linear 0ms infinite;
    animation: Rotate 2000ms linear 0ms infinite;
}

.c50_back{
  background: url(../svg/c50_back.svg) no-repeat center center;
  width: 137px;
  height: 137px;
  display: block;
    -webkit-animation: BackRotate 2000ms linear 00ms infinite;
    -moz-animation: BackRotate 2000ms linear 00ms infinite;
    -o-animation: BackRotate 2000ms linear 00ms infinite;
    -ms-animation: BackRotate 2000ms linear 00ms infinite;
    animation: BackRotate 2000ms linear 0ms infinite;
}

.floatin_gem{
    -webkit-animation: floating 3s infinite ease-in-out;
    -moz-animation: floating 3s infinite ease-in-out;
    -o-animation: floating 3s infinite ease-in-out;
    -ms-animation: floating 3s infinite ease-in-out;
    animation: floating 3s infinite ease-in-out;
}

/* Chrome, Safari */
@-webkit-keyframes floating {
    from {-moz-transform:translate(0, 0px);}
    65% {-moz-transform:translate(0, 15px);}
    to {-moz-transform: translate(0, -0px);} 
}

/* ================= TEXT INSIDE ================= */

.description_toronto,
.description_text{
  position: fixed;
  z-index: 201;
  bottom: 360px;
  width: 347px;
  left: 0;
  right: 0;
  margin: 0 auto;
  font-family: 'Quicksand', 'Helvetica Neue', sans-serif;
}

.talk_bubble{
  text-align: center;
  background: #00ace4;
  width: 347px;
  border-radius: 25px;
  padding: 15px;
}

.talk_tale{
  background: url(../svg/talk_tale.svg) no-repeat center top;
  background-size: cover;
  display: block;
  width: 50px;
  height: 50px;
  margin-left: 210px;
}

.description_text{
  display: none;
}

.description_in{
  width: 176px;
  height: auto;
  text-align: right;
  display: inline-block;
  vertical-align: top;
}

.description_inside{
  width: 100%;
  height: auto;
  text-align: center;
  display: inline-block;
  vertical-align: top;
}

.scrollable{
  width: 100px;
  height: 79px;
  display: inline-block;
  margin: 0 auto;
  vertical-align: top;
}

.mouse{
  background: url(../svg/home/mouse.svg) no-repeat center top;
  background-size: cover;
  width: 21px;
  height: 29px;
  margin: 0 auto;
  display: block;
}

.mouse_text{
  font-size: 12px;
  color: #ffffff;
  text-align: center;
  margin: 5px 0;
}

.mouse_arrow{
  background: url(../svg/home/mouse_arrow.svg) no-repeat center top;
  background-size: cover;
  width: 15px;
  height: 27px;
  margin: 0 auto;
  display: block;
  margin-bottom: 5px;
}

.close_btn{
  background: #7adcf9;
  position: absolute;
  top: 0px;
  left:388px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  z-index: 8;
  text-align: center;
  font-size: 25px;
  font-weight: 300;
  cursor: pointer;
  text-indent: 3px;
  -webkit-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
  -moz-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
  -o-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
  -ms-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
  transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
}

.close_btn:hover{
  background: #c1272d;
}

.work_dot{
  display: block;
  width: 10px;
  height: 10px;
  background: #ffffff;
  border-radius: 50%;
  -webkit-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
  -moz-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
  -o-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
  -ms-transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
  transition:all 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
  text-align: center;
}

.work_dot:hover{
  -webkit-transform:scale(2, 2);
  -moz-transform:scale(2, 2);
  -o-transform:scale(2, 2);
  -ms-transform:scale(2, 2);
  transform:scale(2, 2);
  cursor: pointer;
}

.click{
  cursor: pointer;
}

.bold_text{
  font-weight: bold;
}

.italic{
  font-style: italic;
}

.click:hover {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

/* ================= WALKING JERRY ================= */

.jerry_walking{
  display: block;
  width: 98px;
  height: 300px;
  position: fixed;
  bottom: 23px;
  left: 0px;
  right: 0px;
  margin: 0 auto;
  z-index: 30;
}

.jerry_steps{
  background: url(../svg/walking/jerry_walking.svg) no-repeat;
  display: none;
  width: 98px;
  height: 300px;
  -webkit-animation: caminando 1s steps(2) infinite;
  -moz-animation: caminando 1s steps(2) infinite;
  -o-animation: caminando 1s steps(2) infinite;
  -ms-animation: caminando 1s steps(2) infinite;
  animation: caminando 1s steps(2) infinite;
}

@-webkit-keyframes caminando {
  0% {
    background-position: -98px 0px;
  }
  100% {
    background-position: 97px 0px;
  }
}

.jerry_stop{
  background: url(../svg/walking/jerry_stop.svg) no-repeat;
  width: 98px;
  height: 300px;
}

/* ================= TEXT ================= */

.text_found{
  position: fixed;
  bottom: 412px;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 347px;
  height: auto;
  display: block;
  z-index: 5;
  font-family: 'Quicksand', 'Helvetica Neue', sans-serif;
  text-align: center;
  display: none;
  font-weight: bold;
}

.name_one{
  font-size: 30px;
}

.btn_gold .close_btn{
  left: 355px;
}

/* ========== FLAGS ========== */

.flag{
  display: block;
  width: 72px;
  height: 50px;
  position: absolute;
  bottom: 195px;
  z-index: 4;
}

.flag_in{
  width: 72px;
  height: 50px;
  position: absolute;
  margin: 0 auto;
  top:0px;
  right:0px;
  -webkit-animation: flag_waving .3s steps(2) infinite;
  -moz-animation: flag_waving .3s steps(2) infinite;
  -o-animation: flag_waving .3s steps(2) infinite;
  -ms-animation: flag_waving .3s steps(2) infinite;
  animation: flag_waving .3s steps(2) infinite;
}

/* Chrome, Safari */
@-webkit-keyframes flag_waving {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 0px -100px;
  }
}

/* Mozilla */
@-moz-keyframes flag_waving {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 0px -100px;
  }
}

/* Opera */
@-o-keyframes flag_waving {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 0px -100px;
  }
}

/* Explorer */
@-ms-keyframes flag_waving {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 0px -100px;
  }
}

/* Else */
@keyframes flag_waving {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 0px -100px;
  }
}


.flag_toronto{
  background: url(../svg/flags/toronto.svg) repeat-x center top;
}

.flag_uk{
  background: url(../svg/flags/uk.svg) repeat-x center top;
}

.flag_canada{
  background: url(../svg/flags/canada.svg) repeat-x center top;
}

.flag_ontario{
  background: url(../svg/flags/ontario.svg) repeat-x center top;
}

.flag_rede{
  background: url(../svg/flags/red_ensign.svg) repeat-x center top;
}

.flag_bluej{
  background: url(../svg/flags/blue.svg) repeat-x center top;
}

.flag_gay{
  background: url(../svg/flags/gay.svg) repeat-x center top;
}

.flag_quebec{
  background: url(../svg/flags/quebec.svg) repeat-x center top;
}

.flag_ville{
  background: url(../svg/flags/ville_qbc.svg) repeat-x center top;
}

.flag_france{
  background: url(../svg/flags/france.svg) repeat-x center top;
}

.flag_mexico{
  background: url(../svg/flags/mexico.svg) repeat-x center top;
}

.flag_royal{
  background: url(../svg/flags/royal.svg) repeat-x center top;
}

.flag_england{
  background: url(../svg/flags/england.svg) repeat-x center top;
}

.flag_usa{
  background: url(../svg/flags/usa.svg) repeat-x center top;
}

.flag_israel{
  background: url(../svg/flags/israel.svg) repeat-x center top;
}

.flag_vaticano{
  background: url(../svg/flags/vaticano.svg) repeat-x center top;
}

.flag_one{
  left: 1210px;
}

.flag_two{
  left: 1302px;
}

.flag_three{
  left: 1769px;
}

.flag_four{
  left: 1862px;
}

.flag_five{
  left: 1954px;
}

.flag_six{
  left: 2047px;
}

.flag_seven{
  left: 2415px;
  bottom: 85px;
}

.flag_eight{
  left: 2497px;
  bottom: 85px;
}

.flag_nine{
  left: 5160px;
  bottom: 104px;
  z-index: 6;
}

.flag_ten{
  left: 5203px;
  bottom: 104px;
  z-index: 5;
}

.flag_eleven{
  left: 5244px;
  bottom: 104px;
}

.flag_twelve{
  left: 11519px;
  bottom: 385px;
}

.flag_thirteen{
  left: 11613px;
  bottom: 385px;
}

.flag_fourteen{
  left: 11778px;
  bottom: 59px;
  z-index: 6;
}

.flag_fifteen{
  left: 11832px;
  bottom: 59px;
  z-index: 5;
}

.flag_sixteen{
  left: 11871px;
  bottom: 59px;
}

.flag_seventeen{
  left: 12931px;
  bottom: 281px;
}

.flag_ford{
  left: 9563px;
  bottom: 145px;
}

.flag_mcd{
  left: 6925px;
  bottom: 190px;
}

.flag_blue{
  left: 13607px;
  bottom: 134px;
  z-index: 5;
}

.flag_gay_1{
  left: 15004px;
  bottom: 133px;
}

.flag_gay_2{
  left: 15120px;
  bottom: 188px;
}

.flag_gay_3{
  left: 15402px;
  bottom: 202px;
}

.flag_gay_4{
  left: 15522px;
  bottom: 182px;
}

.flag_gay_5{
  left: 15784px;
  bottom: 132px;
}

/* ========== FLAGS QUEBEC ========== */

.flag_q_one{
  left: 107px;
  bottom: 387px;
}

.flag_q_two{
  left: 273px;
  bottom: 387px;
}

.flag_q_1{
  left: 846px;
  bottom: 209px;
}

.flag_q_2{
  left: 1141px;
  bottom: 303px;
}

.flag_q_3{
  left: 1616px;
  bottom: 218px;
}

.flag_q_4{
  left: 1730px;
  bottom: 218px;
}

.flag_q_5{
  left: 1841px;
  bottom: 218px;
}

.flag_q_6{
  left: 1948px;
  bottom: 218px;
}

.flag_q_7{
  left: 2857px;
  bottom: 232px;
}

.flag_q_8{
  left: 4096px;
  bottom: 442px;
}

.flag_q_9{
  left: 4394px;
  bottom: 476px;
}

.flag_q_10{
  left: 4564px;
  bottom: 248px;
  z-index: 6;
}

.flag_q_11{
  left: 4668px;
  bottom: 248px;
  z-index: 6;
}

.flag_q_12{
  left: 5729px;
  bottom: 216px;
}

.flag_q_13{
  left: 6190px;
  bottom: 234px;
}

.flag_q_14{
  left: 6291px;
  bottom: 234px;
}

.flag_q_15{
  left: 6540px;
  bottom: 205px;
}

.flag_q_16{
  left: 7399px;
  bottom: 235px;
}

.flag_q_17{
  left: 10467px;
  bottom: 386px;
}

.flag_q_18{
  left: 10588px;
  bottom: 386px;
}

.flag_q_19{
  left: 10710px;
  bottom: 386px;
}

.flag_q_20{
  left: 10820px;
  bottom: 386px;
}

.flag_q_21{
  left: 11313px;
  bottom: 386px;
}

.flag_q_22{
  left: 13327px;
  bottom: 506px;
}

/* ========== FLAGS FRANCE ========== */

.flag_f_1{
  left: 462px;
  bottom: 382px;
  z-index: 5;
}

.flag_f_2{
  left: 4881px;
  bottom: 481px;
}

.flag_f_3{
  left: 7025px;
  bottom: 524px;
}

.flag_f_4{
  left: 9804px;
  bottom: 491px;
}

.flag_f_5{
  left: 11050px;
  bottom: 491px;
}

/* ========== FLAGS MEXICO ========== */

.flag_m_1{
  left: 1450px;
  bottom: 473px;
  z-index: 5;
}

.flag_m_2{
  left: 3382px;
  bottom: 391px;
  z-index: 5;
}

.flag_m_3{
  left: 5111px;
  bottom: 541px;
  z-index: 5;
}

.flag_m_4{
  left: 6461px;
  bottom: 435px;
  z-index: 6;
}

.flag_m_5{
  left: 9005px;
  bottom: 407px;
  z-index: 6;
}

.flag_m_6{
  left: 3607px;
  bottom: 380px;
  z-index: 5;
}

/* ========== FLAGS UK ========== */

.flag_uk_1{
  left: 159px;
  bottom: 552px;
  z-index: 5;
}

.flag_uk_2{
  left: 1524px;
  bottom: 424px;
  z-index: 5;
}

.flag_uk_3{
  left: 2896px;
  bottom: 534px;
  z-index: 5;
}

.flag_uk_4{
  left: 3625px;
  bottom: 513px;
  z-index: 5;
}

.flag_uk_5{
  left: 3804px;
  bottom: 513px;
  z-index: 5;
}

.flag_uk_6{
  left: 6025px;
  bottom: 192px;
  z-index: 5;
}

.flag_uk_7{
  left: 7714px;
  bottom: 459px;
  z-index: 5;
}

.flag_uk_8{
  left: 7380px;
  bottom: 247px;
  z-index: 5;
}

.flag_uk_9{
  left: 7526px;
  bottom: 247px;
  z-index: 5;
}

.flag_uk_10{
  left: 7673px;
  bottom: 247px;
  z-index: 5;
}

.flag_uk_11{
  left: 7816px;
  bottom: 247px;
  z-index: 5;
}

.flag_uk_12{
  left: 7962px;
  bottom: 247px;
  z-index: 5;
}

.flag_uk_13{
  left: 9790px;
  bottom: 452px;
  z-index: 6;
}

.flag_uk_14{
  left: 10673px;
  bottom: 514px;
  z-index: 6;
}

.flag_uk_15{
  left: 13246px;
  bottom: 445px;
  z-index: 6;
}

/* ========== RIVER QUEBEC ========== */

.water_1{
  background: url(../svg/quebec/water_1.svg) repeat-x left bottom;
  z-index: 10;
  width: 100%;
  height: 111px;
  position: absolute;
  bottom: 49px;
  left: 0px; 
}

.water_2{
  background: url(../svg/quebec/water_2.svg) repeat-x left bottom;
  z-index: 10;
  width: 100%;
  height: 111px;
  position: absolute;
  bottom: 0px;
  left: 0px; 
}

.line_2{
  bottom: 82px;
  z-index: 9;
}

.line_3{
  bottom: 123px;
  z-index: 8;
}

.line_4{
  bottom: 156px;
  z-index: 7;
}

.line_5{
  bottom: 188px;
  z-index: 6;
}

.line_6{
  bottom: 224px;
  z-index: 5;
}

.floating,
.floating_2{
  animation: floating 1.5s infinite;
  -webkit-animation: floating 1.5s infinite;
  -o-animation: floating 1.5s infinite;
  -moz-animation: floating 1.5s infinite;
  -ms-animation: floating 1.5s infinite;
}

.floating_2{
  animation-duration: 2s; 
  -webkit-animation-duration: 2s;
  -o-animation-duration: 2s;
  -moz-animation-duration: 2s;
  -ms-animation-duration: 2s;
}

/* Chrome, Safari */
@-webkit-keyframes floating {
  0% {
    -webkit-transform: translateY(0%);  
  }
  50% {
    -webkit-transform: translateY(8%);  
  } 
  100% {
    -webkit-transform: translateY(0%);
  }     
}

/* Mozilla */
@-moz-keyframes floating {
  0% {
    -moz-transform: translateY(0%);  
  }
  50% {
    -moz-transform: translateY(8%);  
  } 
  100% {
    -moz-transform: translateY(0%);
  }     
}

/* Opera */
@-o-keyframes floating {
  0% {
    -o-transform: translateY(0%);  
  }
  50% {
    -o-transform: translateY(8%);  
  } 
  100% {
    -o-transform: translateY(0%);
  }     
}

/* Explorer */
@-ms-keyframes floating {
  0% {
    -ms-transform: translateY(0%);  
  }
  50% {
    -ms-transform: translateY(8%);  
  } 
  100% {
    -ms-transform: translateY(0%);
  }     
}

/* Else */
@keyframes floating {
  0% {
    transform: translateY(0%);  
  }
  50% {
    transform: translateY(8%);  
  } 
  100% {
    transform: translateY(0%);
  }     
}

.petata .ojos_container{
  position: relative;
  width: 100px;
  height: 60px;
  left: 18px;
}

.petata .ojo_left{
  display: block;
  position: absolute;
  bottom: 7px;
  left: 41px;
  width: 6px;
  height: 6px;
  background-color: #29abe2;
  border-radius: 50%;
  -webkit-animation: ojo_cerrado_c 2s linear infinite; /* Chrome, Safari, Opera */
  -moz-animation: ojo_cerrado_c 2s linear infinite; /* Mozilla */
  -o-animation: ojo_cerrado_c 2s linear infinite; /* Opera */
  -ms-animation: ojo_cerrado_c 2s linear infinite; /* Mozilla */
  animation: ojo_cerrado_c 2s linear infinite; /* Rest */
}

.petata .ojo_right{
  display: block;
  position: absolute;
  bottom: 7px;
  right: 39px;
  width: 6px;
  height: 6px;
  background-color: #29abe2;
  border-radius: 50%;
  -webkit-animation: ojo_cerrado_c 2s linear infinite; /* Chrome, Safari, Opera */
  -moz-animation: ojo_cerrado_c 2s linear infinite; /* Mozilla */
  -o-animation: ojo_cerrado_c 2s linear infinite; /* Opera */
  -ms-animation: ojo_cerrado_c 2s linear infinite; /* Mozilla */
  animation: ojo_cerrado_c 2s linear infinite; /* Rest */
}

/* Chrome, Safari */
@-webkit-keyframes ojo_cerrado_c{
    0%,40%,60%, 100% { height: 6px;}
    50% { height: 2px;}
}

/* Mozilla */
@-moz-keyframes ojo_cerrado_c{
    0%,40%,60%, 100% { height: 6px;}
    50% { height: 2px;}
}

/* Opera */
@-o-keyframes ojo_cerrado_c{
    0%,40%,60%, 100% { height: 6px;}
    50% { height: 2px;}
}

/* Explorer */
@-ms-keyframes ojo_cerrado_c{
    0%,40%,60%, 100% { height: 6px;}
    50% { height: 2px;}
}

/* Else */
@keyframes ojo_cerrado_c{
    0%,40%,60%, 100% { height: 6px;}
    50% { height: 2px;}
}

.petata.petata_black .ojo_right,
.petata.petata_black .ojo_left{
  background-color: #000000;
}

.petata.petata_black .ojos_container{
  left: 14px;
}

.arm_right{
  -webkit-animation: aright 2.5s infinite;
  -moz-animation: aright 2.5s infinite;
  -o-animation: aright 2.5s infinite;
  -ms-animation: faright 2.5s infinite;
  animation: aright 2.5s infinite;
}

@-webkit-keyframes aright{
  0%, 100% {
     -webkit-transform: rotate(-30deg);-webkit-transform-origin: bottom left;
  }
  50% {
     -webkit-transform: rotate(0deg);-webkit-transform-origin: bottom left;
  }
}
@-moz-keyframes aright{
  0%, 100% {
     -moz-transform: rotate(-30deg);-moz-transform-origin: bottom left;
  }
  50% {
     -moz-transform: rotate(0deg);-moz-transform-origin: bottom left;
  }
}
@-o-keyframes aright{
  0%, 100% {
     -o-transform: rotate(-30deg);-o-transform-origin: bottom left;
  }
  50% {
     -o-transform: rotate(0deg);-o-transform-origin: bottom left;
  }
}
@-ms-keyframes aright{
  0%, 100% {
     -ms-transform: rotate(-30deg);-ms-transform-origin: bottom left;
  }
  50% {
     -ms-transform: rotate(0deg);-ms-transform-origin: bottom left;
  }
}
@keyframes aright{
  0%, 100% {
     transform: rotate(-30deg);transform-origin: bottom left;
  }
  50% {
     transform: rotate(0deg);transform-origin: bottom left;
  }
}

/*============= FINAL ============*/

.texto_feliz{
  font-family: 'Gibson', sans-serif;
  font-size: 40px;
  font-weight: 600;
  text-align: center;
  color: #ffffff;
  position: fixed;
  top: 10px;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 500px;
  z-index: 1;
  text-transform: uppercase;
  display: none;
}

.advice{
  font-size: 21px;
  display: inline-block;
  background-color: #ff0000;
  padding: 15px;
  border-radius: 15px 0 0 15px;
  border-right-style: solid;
  border-right-width: 2px;
  border-right-color: #f2664f;
}

a.link_next_city{
  display: inline-block;
  color: #ffffff;
  text-transform: uppercase;
  padding: 16px;
  background-color: #c1272d;
  border-radius: 0 16px 16px 0;
  border-left-style: solid;
  border-left-width: 2px;
  border-left-color: #981b1f;
}

a.link_next_city:hover{
  background-color: #ff0000;
}

.city_stuff_square{
  width: 324px;
  height: 470px;
  position: absolute;
  bottom: 0px;
  right: 0px;
  display: none;
}

/* TORONTO */

.escritorio_end{
  background: url(../svg/end/escritorio.svg) no-repeat center top;
  width: 118px;
  height: 120px;
  position: absolute;
  bottom: 0px;
  right: 0px;
}

.moose_head{
  background: url(../svg/end/moose_head.svg) no-repeat center top;
  width: 130px;
  height: 138px;
  position: absolute;
  top: 0px;
  right: 20px;
}

.lil_flag_can{
  background: url(../svg/end/lil_flag_can.svg) no-repeat center top;
  width: 36px;
  height: 69px;
  position: absolute;
  bottom: 122px;
  left: 274px;
}

.photo_can{
  background: url(../svg/end/photo_can.svg) no-repeat center top;
  width: 40px;
  height: 48px;
  position: absolute;
  bottom: 120px;
  left: 223px;
  z-index: 10;
}

.back_board{
  background: url(../svg/end/back_board.svg) no-repeat center top;
  width: 273px;
  height: 182px;
  position: absolute;
  bottom: 145px;
  left: 0px;
}

.back_board_line{
  background: url(../svg/end/back_board_lines.svg) no-repeat center top;
  width: 256px;
  height: 151px;
  position: absolute;
  bottom: 159px;
  left: 8px;
  z-index: 2;
}

.back_board_pin{
  background: url(../svg/end/back_board_pin.svg) no-repeat center top;
  width: 43px;
  height: 23px;
  position: absolute;
  bottom: 170px;
  left: 148px;
  z-index: 4;
}

.map_ontario{
  background: url(../svg/end/map_ontario.svg) no-repeat center top;
  width: 232px;
  height: 147px;
  position: absolute;
  bottom: 158px;
  left: 24px;
  z-index: 1;
}

.square_flag_can{
  background: url(../svg/end/square_flag_can.svg) no-repeat center top;
  width: 51px;
  height: 25px;
  position: absolute;
  bottom: 275px;
  left: 206px;
  z-index: 4;
}

.square_flag_tor_on{
  background: url(../svg/end/square_flag_tor_on.svg) no-repeat center top;
  width: 51px;
  height: 56px;
  position: absolute;
  bottom: 163px;
  left: 15px;
  z-index: 4;
}

.end_gem{
  background: url(../svg/maple_red.svg) no-repeat center center;
  background-size: 100% 100%;
  position: absolute;
  bottom: 135px;
  left: 99px;
  margin: 0 auto;
  width: 75px;
  height: 75px;
  display: none;
  z-index: 6;
}

.container_end_gem{
  position: absolute;
  width: 75px;
  height: 75px;
}

.shine_end_1{
  position: absolute;
  top: 26px;
  left: -4px;
  z-index: 1;
}

.shine_end_2{
  position: absolute;
  top: 45px;
  left: 41px;
  z-index: 1;
}

.shine_end_3{
  position: absolute;
  top: -3px;
  left: 32px;
  z-index: 1;
}

/* QUEBEC */

.ad_qc .advice{
  background-color: #29abe2;
  border-right-color: #6dcff6;
}

.ad_qc  a.link_next_city{
  background-color: #0071bc;
  border-left-color: #054f85;
}

.ad_qc  a.link_next_city:hover{
  background-color: #29abe2;
}

.lil_flag_qc{
  background: url(../svg/end/lil_flag_qc.svg) no-repeat center top;
  width: 41px;
  height: 69px;
  position: absolute;
  bottom: 120px;
  left: 274px;
}

.maple_qc{
  background: url(../svg/end/maple_qc.svg) no-repeat center top;
  width: 49px;
  height: 57px;
  position: absolute;
  bottom: 120px;
  left: 224px;
  z-index: 5;
}

.man_qc{
  background: url(../svg/end/man_qc.svg) no-repeat center top;
  width: 93px;
  height: 106px;
  position: absolute;
  bottom: 0px;
  left: 86px;
}

.hat_qc{
  background: url(../svg/end/hat_qc.svg) no-repeat center top;
  width: 74px;
  height: 145px;
  position: absolute;
  bottom: 234px;
  left: -109px;
  z-index: 6;
}

.square_flag_vqc{
  background: url(../svg/end/square_flag_vqc.svg) no-repeat center top;
  width: 40px;
  height: 24px;
  position: absolute;
  bottom: 161px;
  left: 18px;
  z-index: 2;
}

.square_flag_qc{
  background: url(../svg/end/square_flag_qc.svg) no-repeat center top;
  width: 51px;
  height: 25px;
  position: absolute;
  bottom: 275px;
  left: 150px;
  z-index: 2;
}

.map_qc{
  background: url(../svg/end/map_qc.svg) no-repeat center top;
  width: 232px;
  height: 146px;
  position: absolute;
  bottom: 159px;
  left: 22px;
}

.end_gem.eg_qc{
  background: url(../svg/gem_fleur_de_lis.svg) no-repeat center center;
}

.back_board_pin.pin_qc{
  bottom: 200px;
  left: 164px;
}

/* MEXICO */

.ad_mx .advice{
  background-color: #22b573;
  border-right-color: #afdbbd;
}

.ad_mx  a.link_next_city{
  background-color: #006837;
  border-left-color: #00401c;
}

.ad_mx  a.link_next_city:hover{
  background-color: #22b573;
}

.back_board_pin.pin_mx{
  bottom: 209px;
  left: 87px;
}

.end_gem.eg_mx{
  background: url(../svg/gem_skull.svg) no-repeat center center;
}

.shine_end_4{
  position: absolute;
  top: -11px;
  left: 32px;
  z-index: 1;
}

.lil_flag_mx{
  background: url(../svg/end/lil_flag_mx.svg) no-repeat center top;
  width: 36px;
  height: 69px;
  position: absolute;
  bottom: 120px;
  left: 274px;
}

.cactus{
  background: url(../svg/end/cactus.svg) no-repeat center top;
  width: 89px;
  height: 136px;
  position: absolute;
  bottom: 0px;
  left: 78px;
}

.tequila{
  background: url(../svg/end/tequila.svg) no-repeat center top;
  width: 38px;
  height: 32px;
  position: absolute;
  bottom: 120px;
  left: 242px;
}

.sombrero{
  background: url(../svg/end/sombrero.svg) no-repeat center top;
  width: 137px;
  height: 184px;
  position: absolute;
  bottom: 158px;
  left: -457px;
  z-index: 7;
}

.end_sugar_skull{
  background: url(../svg/halloween/lil_sugar_skull.svg) no-repeat center top;
  width: 24px;
  height: 33px;
  position: absolute;
  bottom: 120px;
  left: 212px;
}

.square_flag_mx{
  background: url(../svg/end/square_flag_mx.svg) no-repeat center top;
  width: 51px;
  height: 25px;
  position: absolute;
  bottom: 275px;
  left: 206px;
  z-index: 4;
}

.map_mx{
  background: url(../svg/end/map_mx.svg) no-repeat center top;
  width: 254px;
  height: 151px;
  position: absolute;
  bottom: 156px;
  left: 15px;
}

/* PARIS */

.ad_gold .advice{
  background-color: #f5cb2c;
  border-right-color: #fff381;
}

.ad_gold  a.link_next_city{
  background-color: #f2b62f;
  border-left-color: #cd9b24;
}

.ad_gold  a.link_next_city:hover{
  background-color: #f5cb2c;
}

.back_board_pin.pin_ps{
  bottom: 249px;
  left: 123px;
}

.end_gem.eg_ps{
  background: url(../svg/gem_fleur_de_lis_gold.svg) no-repeat center center;
}

.map_ps{
  background: url(../svg/end/map_ps.svg) no-repeat center top;
  width: 164px;
  height: 152px;
  position: absolute;
  bottom: 155px;
  left: 99px;
}

.square_flag_ps{
  background: url(../svg/end/square_flag_ps.svg) no-repeat center top;
  width: 51px;
  height: 25px;
  position: absolute;
  bottom: 253px;
  left: 25px;
  z-index: 4;
}

.shield_ps{
  background: url(../svg/end/shield_ps.svg) no-repeat center top;
  width: 51px;
  height: 54px;
  position: absolute;
  bottom: 186px;
  left: 26px;
}

.canasta{
  background: url(../svg/end/canasta.svg) no-repeat center top;
  width: 125px;
  height: 116px;
  position: absolute;
  bottom: 0px;
  left: 51px;
}

.lil_teur{
  background: url(../svg/end/lil_teur.svg) no-repeat center top;
  width: 41px;
  height: 97px;
  position: absolute;
  bottom: 120px;
  left: 251px;
}

.lil_wine{
  background: url(../svg/end/lil_wine.svg) no-repeat center top;
  width: 48px;
  height: 75px;
  position: absolute;
  bottom: 120px;
  left: 206px;
  z-index: 2;
}

.lil_flag_ps{
  background: url(../svg/end/lil_flag_ps.svg) no-repeat center top;
  width: 36px;
  height: 69px;
  position: absolute;
  bottom: 120px;
  left: 296px;
}

/* LONDON */

.back_board_pin.pin_ln{
  bottom: 151px;
  left: 116px;
}

.end_gem.eg_ln{
  background: url(../svg/gem_crown.svg) no-repeat center center;
}

.lil_flag_uk{
  background: url(../svg/end/lil_flag_uk.svg) no-repeat center top;
  width: 46px;
  height: 69px;
  position: absolute;
  bottom: 120px;
  left: 262px;
}

.ribbon_uk{
  background: url(../svg/end/ribbon_uk.svg) no-repeat center top;
  width: 272px;
  height: 68px;
  position: absolute;
  bottom: 268px;
  left: -346px;
  z-index: 7;
}

.map_uk{
  background: url(../svg/end/map_uk.svg) no-repeat center top;
  width: 173px;
  height: 282px;
  position: absolute;
  bottom: 105px;
  left: 29px;
}

.queen_uk{
  background: url(../svg/end/queen.svg) no-repeat center top;
  width: 97px;
  height: 136px;
  position: absolute;
  bottom: 214px;
  left: 213px;
}

.phone_uk{
  background: url(../svg/london/jerryphone.svg) no-repeat center top;
  background-size: 100% 100%;
  width: 25px;
  height: 59px;
  position: absolute;
  bottom: 120px;
  left: 225px;
}


.post_uk{
  background: url(../svg/london/post.svg) no-repeat center top;
  background-size: 100% 100%;
  width: 59px;
  height: 138px;
  position: absolute;
  bottom: 0px;
  left: 52px;
}


/* END */

.texto_feliz span{
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  text-transform: none;
  display: block;
  letter-spacing: 1px;
}

.texto_feliz span a{
  color:#00ace4;
  text-decoration: underline;
}

.final_gem{
  background: url(../svg/gem_crown.svg) no-repeat center center;
  background-size: 100% 100%;
  position: absolute;
  width: 65px;
  height: 65px;
  z-index: 6;
  bottom: 223px;
  left: 17px;
}

.final_gem.fg_m{
  background: url(../svg/maple_red.svg) no-repeat center center;
  left: 147px;
}

.final_gem.fg_q{
  background: url(../svg/gem_fleur_de_lis.svg) no-repeat center center;
  left: 225px;
}

.final_gem.fg_p{
  background: url(../svg/gem_pumpkin.svg) no-repeat center center;
  left: 69px;
  bottom: 95px;
}

.final_gem.fg_f{
  background: url(../svg/gem_fleur_de_lis_gold.svg) no-repeat center center;
  left: 172px;
  bottom: 95px;
}

.final_gem.fg_mx{
  background: url(../svg/gem_skull.svg) no-repeat center center;
  left: 277px;
  bottom: 95px;
}

.sleeping_jerry{
  background: url(../svg/end/sleeping_jerry.svg) no-repeat center top;
  width: 141px;
  height: 293px;
  position: absolute;
  bottom: 0px;
  left: 250px;
}

.sleeping_jerry_mouth{
  display: block;
  width: 25px;
  height: 15px;
  background-color: #231F20;
  position: absolute;
  top: 46px;
  right: 54px;
  border-radius: 10px;
  z-index: 2;
  -webkit-animation: speak 2s infinite;
  -moz-animation: speak 2s infinite;
  -o-animation: speak 2s infinite;
  -ms-animation: speak 2s infinite;
  animation: speak 2s infinite;
}

@keyframes speak {
  0% {
    -webkit-transform: scale(0.5);
    -webkit-transform-origin: 50% 50%;
    -moz-transform: scale(0.5);
    -moz-transform-origin: 50% 50%;
    -o-transform: scale(0.5);
    -o-transform-origin: 50% 50%;
    -ms-transform: scale(0.5);
    -ms-transform-origin: 50% 50%;
    transform: scale(0.5);
    transform-origin: 50% 50%;
    transition:.3s;
    }
  50% {
    -webkit-transform: scale(1.2);
    -webkit-transform-origin: 50% 50%;
    -moz-transform: scale(1.2);
    -moz-transform-origin: 50% 50%;
    -o-transform: scale(1.2);
    -o-transform-origin: 50% 50%;
    -ms-transform: scale(1.2);
    -ms-transform-origin: 50% 50%;
    transform: scale(1.2);
    transform-origin: 50% 50%;
    transition:.3s;
  }
  100% {
    -webkit-transform: scale(0.5);
    -webkit-transform-origin: 50% 50%;
    -moz-transform: scale(0.5);
    -moz-transform-origin: 50% 50%;
    -o-transform: scale(0.5);
    -o-transform-origin: 50% 50%;
    -ms-transform: scale(0.5);
    -ms-transform-origin: 50% 50%;
    transform: scale(0.5);
    transform-origin: 50% 50%;
    transition:.3s;
    }
}

.sleeping_jerry_drop{
  background: url(../svg/end/saliva.svg) no-repeat center top;
  width: 6px;
  height: 15px;
  position: absolute;
  top: 55px;
  right: 58px;
  z-index: 1;
  -webkit-animation: droping 2s infinite;
  -moz-animation: droping 2s infinite;
  -o-animation: droping 2s infinite;
  -ms-animation: droping 2s infinite;
  animation: droping 2s infinite;
}

@-webkit-keyframes droping{
  0%, 100% {
       top: 55px;
  }
  50% {
       top: 60px;
  }
}

@-moz-keyframes droping{
  0%, 100% {
       top: 55px;
  }
  50% {
       top: 60px;
  }
}

@-o-keyframes droping{
  0%, 100% {
       top: 55px;
  }
  50% {
       top: 60px;
  }
}

@-ms-keyframes droping{
  0%, 100% {
       top: 55px;
  }
  50% {
       top: 60px;
  }
}

@keyframes droping{
  0%, 100% {
       top: 55px;
  }
  50% {
       top: 60px;
  }
}

.glass_container{
  background: url(../svg/end/glass_container.svg) no-repeat center top;
  width: 358px;
  height: 309px;
  position: absolute;
  bottom: 0px;
  left: 0px;
}

.glass_container_in{
  width: 358px;
  height: 309px;
  position: relative;
  bottom: 0;
  left: 27px;
}

.shine_final_1{
  position: absolute;
  bottom: 250px;
  left: -8px; 
}

.shine_final_2{
  position: absolute;
  bottom: 294px;
  left: 33px; 
}

.shine_final_3{
  position: absolute;
  bottom: 234px;
  left: 77px; 
}

.shine_final_4{
  position: absolute;
  bottom: 216px;
  left: 97px; 
}

.shine_final_5{
  position: absolute;
  bottom: 284px;
  left: 111px; 
}

.shine_final_6{
  position: absolute;
  bottom: 259px;
  left: 181px; 
}

.shine_final_7{
  position: absolute;
  bottom: 232px;
  left: 202px; 
}


.shine_final_8{
  position: absolute;
  bottom: 292px;
  left: 253px; 
}


.shine_final_9{
  position: absolute;
  bottom: 214px;
  left: 285px; 
}

.shine_final_10{
  position: absolute;
  bottom: 91px;
  left: 45px; 
}

.shine_final_11{
  position: absolute;
  bottom: 166px;
  left: 88px; 
}

.shine_final_12{
  position: absolute;
  bottom: 131px;
  left: 128px; 
}

.shine_final_13{
  position: absolute;
  bottom: 107px;
  left: 149px; 
}

.shine_final_14{
  position: absolute;
  bottom: 158px;
  left: 214px; 
}

.shine_final_15{
  position: absolute;
  bottom: 115px;
  left: 232px; 
}

.shine_final_16{
  position: absolute;
  bottom: 135px;
  left: 254px; 
}

.shine_final_17{
  position: absolute;
  bottom: 166px;
  left: 283px; 
}

.shine_final_18{
  position: absolute;
  bottom: 107px;
  left: 336px; 
}

.book_case_end{
  background: url(../svg/end/book_case_end.svg) no-repeat center bottom;
  width: 99px;
  height: 113px;
  position: absolute;
  bottom: 0px;
  left: 423px;
}

.rick{
  width: 106px;
  height: 224px;
  position: absolute;
  bottom: 0px;
  left: 509px;
}

.rick_body{
  background: url(../svg/end/rick.svg) no-repeat center top;
  width: 106px;
  height: 224px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 2;
}

.rick_hand{
  background: url(../svg/end/rick_hand.svg) no-repeat center top;
  width: 54px;
  height: 20px;
  position: absolute;
  left: 0px;
  z-index: 1;
  bottom: 126px;
  -webkit-animation: aleft 2.5s infinite;
  -moz-animation: aleft 2.5s infinite;
  -o-animation: aleft 2.5s infinite;
  -ms-animation: aleft 2.5s infinite;
  animation: aleft 2.5s infinite;
}

/* Chrome, Safari */
@-webkit-keyframes aleft{
  0%, 100% {
     -webkit-transform: rotate(30deg);-webkit-transform-origin: bottom right;
  }
  50% {
     -webkit-transform: rotate(0deg);-webkit-transform-origin: bottom right;
  }
}

/* Mozilla */
@-moz-keyframes aleft{
  0%, 100% {
     -moz-transform: rotate(30deg);-moz-transform-origin: bottom right;
  }
  50% {
     -moz-transform: rotate(0deg);-moz-transform-origin: bottom right;
  }
}

/* Opera */
@-o-keyframes aleft{
  0%, 100% {
     -o-transform: rotate(30deg);-o-transform-origin: bottom right;
  }
  50% {
     -o-transform: rotate(0deg);-o-transform-origin: bottom right;
  }
}

/* Explorer */
@-ms-keyframes aleft{
  0%, 100% {
     -ms-transform: rotate(30deg);-ms-transform-origin: bottom right;
  }
  50% {
     -ms-transform: rotate(0deg);-ms-transform-origin: bottom right;
  }
}

/* Else */
@keyframes aleft{
  0%, 100% {
     transform: rotate(30deg);transform-origin: bottom right;
  }
  50% {
     transform: rotate(0deg);transform-origin: bottom right;
  }
}

.rick .ojos_container{
  position: absolute;
  height: 22px;
  width: 32px;
  right: 19px;
  top: 30px;
  z-index: 3;
}

.morty .ojos_container{
  position: absolute;
  height: 22px;
  width: 32px;
  right: 12px;
  top: 10px;
}

.morty{
  background: url(../svg/end/morty.svg) no-repeat center top;
  width: 52px;
  height: 138px;
  position: absolute;
  bottom: 0px;
  left: 635px;
}

.lil_ojo_left{
  display: block;
  position: absolute;
  bottom: 7px;
  left: 8px;
  width: 4px;
  height: 4px;
  background-color: #000000;
  border-radius: 50%;
  -webkit-animation: lil_ojo_cerrado 2s linear infinite; /* Chrome, Safari, Opera */
  -moz-animation: lil_ojo_cerrado 2s linear infinite; /* Mozilla */
  -o-animation: lil_ojo_cerrado 2s linear infinite; /* Opera */
  -ms-animation: lil_ojo_cerrado 2s linear infinite; /* Mozilla */
  animation: lil_ojo_cerrado 2s linear infinite; /* Rest */
}

.lil_ojo_right{
  display: block;
  position: absolute;
  bottom: 7px;
  right: 7px;
  width: 4px;
  height: 4px;
  background-color: #000000;
  border-radius: 50%;
  -webkit-animation: lil_ojo_cerrado 2s linear infinite; /* Chrome, Safari, Opera */
  -moz-animation: lil_ojo_cerrado 2s linear infinite; /* Mozilla */
  -o-animation: lil_ojo_cerrado 2s linear infinite; /* Opera */
  -ms-animation: lil_ojo_cerrado 2s linear infinite; /* Mozilla */
  animation: lil_ojo_cerrado 2s linear infinite; /* Rest */
}

/* Chrome, Safari */
@-webkit-keyframes lil_ojo_cerrado{
    0%,40%,60%, 100% { height: 4px;}
    50% { height: 1px;}
}

/* Mozilla */
@-moz-keyframes lil_ojo_cerrado{
    0%,40%,60%, 100% { height: 4px;}
    50% { height: 1px;}
}

/* Opera */
@-o-keyframes lil_ojo_cerrado{
    0%,40%,60%, 100% { height: 4px;}
    50% { height: 1px;}
}

/* Explorer */
@-ms-keyframes lil_ojo_cerrado{
    0%,40%,60%, 100% { height: 4px;}
    50% { height: 1px;}
}

/* Else */
@keyframes lil_ojo_cerrado{
    0%,40%,60%, 100% { height: 4px;}
    50% { height: 1px;}
}


.inner_menu_text{
  height: 283px;
  display: block;
  padding: 10px;
  text-align: center;
  color: #ffffff;
}

/* ++++++++++ Effects ++++++++++ */

.arm_left{
  -webkit-animation: aleft 2.5s infinite;
  -moz-animation: aleft 2.5s infinite;
  -o-animation: aleft 2.5s infinite;
  -ms-animation: aleft 2.5s infinite;
  animation: aleft 2.5s infinite;
}
@-webkit-keyframes aleft{
  0%, 100% {
     -webkit-transform: rotate(30deg);-webkit-transform-origin: bottom right;
  }
  50% {
     -webkit-transform: rotate(0deg);-webkit-transform-origin: bottom right;
  }
}
@-moz-keyframes aleft{
  0%, 100% {
     -moz-transform: rotate(30deg);-moz-transform-origin: bottom right;
  }
  50% {
     -moz-transform: rotate(0deg);-moz-transform-origin: bottom right;
  }
}
@-o-keyframes aleft{
  0%, 100% {
     -o-transform: rotate(30deg);-o-transform-origin: bottom right;
  }
  50% {
     -o-transform: rotate(0deg);-o-transform-origin: bottom right;
  }
}
@-ms-keyframes aleft{
  0%, 100% {
     -ms-transform: rotate(30deg);-ms-transform-origin: bottom right;
  }
  50% {
     -ms-transform: rotate(0deg);-ms-transform-origin: bottom right;
  }
}

.arm_right{
  -webkit-animation: aright 2.5s infinite;
  -moz-animation: aright 2.5s infinite;
  -o-animation: aright 2.5s infinite;
  -ms-animation: faright 2.5s infinite;
  animation: aright 2.5s infinite;
}
@-webkit-keyframes aright{
  0%, 100% {
     -webkit-transform: rotate(-30deg);-webkit-transform-origin: bottom left;
  }
  50% {
     -webkit-transform: rotate(0deg);-webkit-transform-origin: bottom left;
  }
}
@-moz-keyframes aright{
  0%, 100% {
     -moz-transform: rotate(-30deg);-moz-transform-origin: bottom left;
  }
  50% {
     -moz-transform: rotate(0deg);-moz-transform-origin: bottom left;
  }
}
@-o-keyframes aright{
  0%, 100% {
     -o-transform: rotate(-30deg);-o-transform-origin: bottom left;
  }
  50% {
     -o-transform: rotate(0deg);-o-transform-origin: bottom left;
  }
}
@-ms-keyframes aright{
  0%, 100% {
     -ms-transform: rotate(-30deg);-ms-transform-origin: bottom left;
  }
  50% {
     -ms-transform: rotate(0deg);-ms-transform-origin: bottom left;
  }
}
@keyframes aright{
  0%, 100% {
     transform: rotate(-30deg);transform-origin: bottom left;
  }
  50% {
     transform: rotate(0deg);transform-origin: bottom left;
  }
}

.open_mouth{
  display: block;
  width: 12px;
  height: 8px;
  background-color: #231F20;
  position: absolute;
  top: 48px;
  right: 32px;
  border-radius: 10px;
  z-index: 2;
  -webkit-animation: speak 1s infinite;
  -moz-animation: speak 1s infinite;
  -o-animation: speak 1s infinite;
  -ms-animation: speak 1s infinite;
  animation: speak 1s infinite;
}