body{
  background-color:black;
}
.calavera-crazy{
  display:none;
}
.show{
  display:block;
}
.button{
  margin: 0 auto;
  width: 340px;
}
.btn {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Courier New;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

/*SVG*/

.svg{
  width:100%;
  height: auto;
  position: relative !important;
  text-align: center;
}

.Calavera-Eddy {
  -webkit-animation-name: bounce;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite; 
  -webkit-animation-timing-function:ease-in;
  
  animation-name: bounce;
  animation-duration: 5s;
  animation-iteration-count: infinite; 
  animation-timing-function:ease-in;
}

@-webkit-keyframes bounce {
  0%   {transform: translateY(0);}
  25%  {transform: translateY(10px);}
  75%  {transform: translateY(-10px);}
  100% {transform: translateY(0px);}
}

.Shadowz {
  -webkit-animation-name: shrinks;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite; 
  -webkit-animation-timing-function:ease-in;
  -webkit-transform-origin: 50%;
  
  animation-name: shrink;
  animation-duration: 5s;
  animation-iteration-count: infinite; 
  animation-timing-function:ease-in;
  transform-origin: 50%;
}

@-webkit-keyframes shrink {
  0%   { -webkit-transform: scaleX(1) scaleY(1); }
  25%  { -webkit-transform: scaleX(0.75) scaleY(1); }
  75%  { -webkit-transform: scaleX(1.05) scaleY(1); }
  100% { -webkit-transform: scaleX(1) scaleY(1); }
}

@keyframes shrink {
  0%   { -webkit-transform: scaleX(1) scaleY(1); }
  25%  { -webkit-transform: scaleX(0.75) scaleY(1); }
  75%  { -webkit-transform: scaleX(1.05) scaleY(1); }
  100% { -webkit-transform: scaleX(1) scaleY(1); }
}

.Eyes .eye{
  -webkit-animation-name: blink;
  -webkit-animation-duration: 8s;
  -webkit-animation-iteration-count: infinite; 
  -webkit-transform-origin: 50%;
  
  animation-name: blink;
  animation-duration: 8s;
  animation-iteration-count: infinite; 
  transform-origin: 50%;
}

@-webkit-keyframes blink { 
  0% { -webkit-transform: scaleX(1) scaleY(1); } 
  1% { -webkit-transform: scaleX(1.3) scaleY(0.1); } 
  2% { -webkit-transform: scaleX(1) scaleY(1); } 
  60% { -webkit-transform: scaleX(1) scaleY(1); } 
  61% { -webkit-transform: scaleX(1.3) scaleY(0.1);} 
  62% { -webkit-transform: scaleX(1) scaleY(1); } 
  70% { -webkit-transform: scaleX(1) scaleY(1); } 
  71% { -webkit-transform: scaleX(1.3) scaleY(0.1);} 
  72% { -webkit-transform: scaleX(1) scaleY(1); } 
  100% { -webkit-transform: scaleX(1) scaleY(1); }
}

@keyframes blink { 
  0% { transform: scaleX(1) scaleY(1); } 
  1% { transform: scaleX(1.3) scaleY(0.1); } 
  2% { transform: scaleX(1) scaleY(1); } 
  60% { transform: scaleX(1) scaleY(1); } 
  61% { transform: scaleX(1.3) scaleY(0.1);} 
  62% { transform: scaleX(1) scaleY(1); } 
  70% { transform: scaleX(1) scaleY(1); } 
  71% { transform: scaleX(1.3) scaleY(0.1);} 
  72% { transform: scaleX(1) scaleY(1); } 
  100% { transform: scaleX(1) scaleY(1); }
}

.crazyfill{
animation-name: homeCycle; 
animation-duration:1s; 
animation-direction:alternate; 
animation-iteration-count:infinite; 

-webkit-animation-name: homeCycle; 
-webkit-animation-duration:1s; 
-webkit-animation-direction:alternate; 
-webkit-animation-iteration-count:infinite;
}

.letsgetfreaky{
animation-name: emohCycle; 
animation-duration:1s; 
animation-direction:alternate; 
animation-iteration-count:infinite; 

-webkit-animation-name: emohCycle; 
-webkit-animation-duration:1s; 
-webkit-animation-direction:alternate; 
-webkit-animation-iteration-count:infinite;
}

@keyframes homeCycle 
{
  0% {fill:#7BEC7C;} 
  20% {fill:#7BE7EC;} 
  40% {fill:#AD7BEC;} 
  60% {fill:#EC7BA9;} 
  80% {fill:#ECB87B;}
  100% {fill:#7BEC7C;}
} 

@-webkit-keyframes homeCycle 
{ 
  0% {fill:#7BEC7C;} 
  20% {fill:#7BE7EC;} 
  40% {fill:#AD7BEC;} 
  60% {fill:#EC7BA9;} 
  80% {fill:#ECB87B;}
  100% {fill:#7BEC7C;}
}

@keyframes emohCycle 
{
  0% {background-color: #7BEC7C;} 
  80% {background-color: #7BE7EC;} 
  60% {background-color: #AD7BEC;} 
  40% {background-color: #EC7BA9;} 
  20% {background-color: #ECB87B;}
  100% {background-color: #7BEC7C;}
} 

@-webkit-keyframes emohCycle 
{ 
  0% {background-color: #7BEC7C;} 
  80% {background-color: #7BE7EC;} 
  60% {background-color: #AD7BEC;} 
  40% {background-color: #EC7BA9;} 
  20% {background-color: #ECB87B;}
  100% {background-color: #7BEC7C;}
}