@font-face{
	font-family:'hotsweatregular';
	src: url('../fonts/hotsweat-webfont.eot');
    src: url('../fonts/hotsweat-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/hotsweat-webfont.woff') format('woff'),
		 url('../fonts/hotsweat-webfont.ttf') format('truetype'),
		 url('../fonts/hotsweat-webfont.svg#hotsweatregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face{
	font-family:'brotherhood_scriptregular';
	src: url('../fonts/brotherhood_script-webfont.eot');
    src: url('../fonts/brotherhood_script-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/brotherhood_script-webfont.woff') format('woff'),
		 url('../fonts/brotherhood_script-webfont.ttf') format('truetype'),
		 url('../fonts/brotherhood_script-webfont.svg#brotherhood_scriptregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

html, body{
  margin : 0px;
  width : 100%;
  height : 100%;
  overflow: hidden;
  background-color: #000000;
  font-family: sans-serif;
}

#cake {
  display: block;
  position: relative;
  margin: -10em auto 0 auto;
}

#title{
text-align:center;
  font-size:3em;
  bottom: 0px;
  margin:0 auto; 
font-family: 'hotsweatregular';
background: -webkit-gradient(linear, left top, right top, from(#FF1177), to(#FF1177), color-stop(0.5, #fff)) 0 0 repeat;
-webkit-background-size: 125px;

color: #111111;
-webkit-background-clip: text;

-webkit-animation-name: color_shine;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
}

#message{
text-align:center;
  font-size:2.5em;
  bottom: 0px;
  margin:0 auto; 
font-family: 'brotherhood_scriptregular';
background: -webkit-gradient(linear, left top, right top, from(#FF9900), to(#FF9900), color-stop(0.5, #fff)) 0 0 repeat;
-webkit-background-size: 125px;

color: #FF9900;
-webkit-background-clip: text;

-webkit-animation-name: color_shine;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes color_shine
{
0%
{
background-position: top left;
}
100%
{
background-position: top right;
}
}

#canvas {
	cursor: crosshair;
	display: block;
}

.velas {
  background: #ffffff;
  border-radius: 10px;
  position: absolute;
  top: 228px;
  left: 50%;
  margin-left: -2.5px;
  margin-top: -8.33333333px;
  width: 5px;
  height: 35px;
  -webkit-transform: translateY(-300px);
  -ms-transform: translateY(-300px);
  transform: translateY(-300px);
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: in 500ms 6s ease-out forwards;
  animation: in 500ms 6s ease-out forwards;
}

.velas-1 {
  background: #ffffff;
  border-radius: 10px;
  position: absolute;
  top: 228px;
  left: 49%;
  margin-left: -2.5px;
  margin-top: -8.33333333px;
  width: 5px;
  height: 35px;
  -webkit-transform: translateY(-300px);
  -ms-transform: translateY(-300px);
  transform: translateY(-300px);
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: in 550ms 6s ease-out forwards;
  animation: in 550ms 6s ease-out forwards;
}

.velas1 {
  background: #ffffff;
  border-radius: 10px;
  position: absolute;
  top: 228px;
  left: 51%;
  margin-left: -2.5px;
  margin-top: -8.33333333px;
  width: 5px;
  height: 35px;
  -webkit-transform: translateY(-300px);
  -ms-transform: translateY(-300px);
  transform: translateY(-300px);
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: in 550ms 6s ease-out forwards;
  animation: in 550ms 6s ease-out forwards;
}

.velas-2 {
  background: #ffffff;
  border-radius: 10px;
  position: absolute;
  top: 228px;
  left: 48%;
  margin-left: -2.5px;
  margin-top: -8.33333333px;
  width: 5px;
  height: 35px;
  -webkit-transform: translateY(-300px);
  -ms-transform: translateY(-300px);
  transform: translateY(-300px);
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: in 600ms 6s ease-out forwards;
  animation: in 600ms 6s ease-out forwards;
}

.velas2 {
  background: #ffffff;
  border-radius: 10px;
  position: absolute;
  top: 228px;
  left: 52%;
  margin-left: -2.5px;
  margin-top: -8.33333333px;
  width: 5px;
  height: 35px;
  -webkit-transform: translateY(-300px);
  -ms-transform: translateY(-300px);
  transform: translateY(-300px);
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: in 600ms 6s ease-out forwards;
  animation: in 600ms 6s ease-out forwards;
}

.velas-3 {
  background: #ffffff;
  border-radius: 10px;
  position: absolute;
  top: 228px;
  left: 47%;
  margin-left: -2.5px;
  margin-top: -8.33333333px;
  width: 5px;
  height: 35px;
  -webkit-transform: translateY(-300px);
  -ms-transform: translateY(-300px);
  transform: translateY(-300px);
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: in 650ms 6s ease-out forwards;
  animation: in 650ms 6s ease-out forwards;
}

.velas3 {
  background: #ffffff;
  border-radius: 10px;
  position: absolute;
  top: 228px;
  left: 53%;
  margin-left: -2.5px;
  margin-top: -8.33333333px;
  width: 5px;
  height: 35px;
  -webkit-transform: translateY(-300px);
  -ms-transform: translateY(-300px);
  transform: translateY(-300px);
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: in 650ms 6s ease-out forwards;
  animation: in 650ms 6s ease-out forwards;
}

.velas-4 {
  background: #ffffff;
  border-radius: 10px;
  position: absolute;
  top: 228px;
  left: 46%;
  margin-left: -2.5px;
  margin-top: -8.33333333px;
  width: 5px;
  height: 35px;
  -webkit-transform: translateY(-300px);
  -ms-transform: translateY(-300px);
  transform: translateY(-300px);
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: in 700ms 6s ease-out forwards;
  animation: in 700ms 6s ease-out forwards;
}

.velas4 {
  background: #ffffff;
  border-radius: 10px;
  position: absolute;
  top: 228px;
  left: 54%;
  margin-left: -2.5px;
  margin-top: -8.33333333px;
  width: 5px;
  height: 35px;
  -webkit-transform: translateY(-300px);
  -ms-transform: translateY(-300px);
  transform: translateY(-300px);
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: in 700ms 6s ease-out forwards;
  animation: in 700ms 6s ease-out forwards;
}

.velas-5 {
  background: #ffffff;
  border-radius: 10px;
  position: absolute;
  top: 228px;
  left: 45%;
  margin-left: -2.5px;
  margin-top: -8.33333333px;
  width: 5px;
  height: 35px;
  -webkit-transform: translateY(-300px);
  -ms-transform: translateY(-300px);
  transform: translateY(-300px);
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: in 750ms 6s ease-out forwards;
  animation: in 750ms 6s ease-out forwards;
}

.velas5 {
  background: #ffffff;
  border-radius: 10px;
  position: absolute;
  top: 228px;
  left: 55%;
  margin-left: -2.5px;
  margin-top: -8.33333333px;
  width: 5px;
  height: 35px;
  -webkit-transform: translateY(-300px);
  -ms-transform: translateY(-300px);
  transform: translateY(-300px);
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: in 750ms 6s ease-out forwards;
  animation: in 750ms 6s ease-out forwards;
}

.velas6 {
  background: #ffffff;
  border-radius: 10px;
  position: absolute;
  bottom: 28px;
  left: 55%;
  margin-left: -2.5px;
  margin-top: -8.33333333px;
  width: 5px;
  height: 35px;
  -webkit-transform: translateY(30px);
  -ms-transform: translateY(30px);
  transform: translateY(30px);
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: in 750ms 6s ease-out forwards;
  animation: in 750ms 6s ease-out forwards;
}

.velas:after,
.velas:before {
  background: rgba(255, 0, 0, 0.4);
  content: "";
  position: absolute;
  width: 100%;
  height: 2.22222222px;
}

.velas:after {
  top: 25%;
  left: 0;
}

.velas:before {
  top: 45%;
  left: 0;
}

.velas-1:after,
.velas-1:before {
  background: rgba(255, 0, 0, 0.4);
  content: "";
  position: absolute;
  width: 100%;
  height: 2.22222222px;
}

.velas-1:after {
  top: 25%;
  left: 0;
}

.velas-1:before {
  top: 45%;
  left: 0;
}

.velas1:after,
.velas1:before {
  background: rgba(255, 0, 0, 0.4);
  content: "";
  position: absolute;
  width: 100%;
  height: 2.22222222px;
}

.velas1:after {
  top: 25%;
  left: 0;
}

.velas1:before {
  top: 45%;
  left: 0;
}

.velas-2:after,
.velas-2:before {
  background: rgba(255, 0, 0, 0.4);
  content: "";
  position: absolute;
  width: 100%;
  height: 2.22222222px;
}

.velas-2:after {
  top: 25%;
  left: 0;
}

.velas-2:before {
  top: 45%;
  left: 0;
}

.velas2:after,
.velas2:before {
  background: rgba(255, 0, 0, 0.4);
  content: "";
  position: absolute;
  width: 100%;
  height: 2.22222222px;
}

.velas2:after {
  top: 25%;
  left: 0;
}

.velas2:before {
  top: 45%;
  left: 0;
}

.velas-3:after,
.velas-3:before {
  background: rgba(255, 0, 0, 0.4);
  content: "";
  position: absolute;
  width: 100%;
  height: 2.22222222px;
}

.velas-3:after {
  top: 25%;
  left: 0;
}

.velas-3:before {
  top: 45%;
  left: 0;
}

.velas3:after,
.velas3:before {
  background: rgba(255, 0, 0, 0.4);
  content: "";
  position: absolute;
  width: 100%;
  height: 2.22222222px;
}

.velas3:after {
  top: 25%;
  left: 0;
}

.velas3:before {
  top: 45%;
  left: 0;
}

.velas-4:after,
.velas-4:before {
  background: rgba(255, 0, 0, 0.4);
  content: "";
  position: absolute;
  width: 100%;
  height: 2.22222222px;
}

.velas-4:after {
  top: 25%;
  left: 0;
}

.velas-4:before {
  top: 45%;
  left: 0;
}

.velas4:after,
.velas4:before {
  background: rgba(255, 0, 0, 0.4);
  content: "";
  position: absolute;
  width: 100%;
  height: 2.22222222px;
}

.velas4:after {
  top: 25%;
  left: 0;
}

.velas4:before {
  top: 45%;
  left: 0;
}

.velas-5:after,
.velas-5:before {
  background: rgba(255, 0, 0, 0.4);
  content: "";
  position: absolute;
  width: 100%;
  height: 2.22222222px;
}

.velas-5:after {
  top: 25%;
  left: 0;
}

.velas-5:before {
  top: 45%;
  left: 0;
}

.velas5:after,
.velas5:before {
  background: rgba(255, 0, 0, 0.4);
  content: "";
  position: absolute;
  width: 100%;
  height: 2.22222222px;
}

.velas5:after {
  top: 25%;
  left: 0;
}

.velas5:before {
  top: 45%;
  left: 0;
}

.fuego {
  border-radius: 100%;
  position: absolute;
  top: -20px;
  left: 50%;
  margin-left: -2.2px;
  width: 6.66666667px;
  height: 18px;
}

.fuego:nth-child(1) {
  -webkit-animation: fuego 2s 6.5s infinite;
  animation: fuego 2s 6.5s infinite;
}

.fuego:nth-child(2) {
  -webkit-animation: fuego 1.5s 6.5s infinite;
  animation: fuego 1.5s 6.5s infinite;
}

.fuego:nth-child(3) {
  -webkit-animation: fuego 1s 6.5s infinite;
  animation: fuego 1s 6.5s infinite;
}

.fuego:nth-child(4) {
  -webkit-animation: fuego 0.5s 6.5s infinite;
  animation: fuego 0.5s 6.5s infinite;
}

.fuego:nth-child(5) {
  -webkit-animation: fuego 0.2s 6.5s infinite;
  animation: fuego 0.2s 6.5s infinite;
}

@-webkit-keyframes fuego {
  0%, 100% {
    background: rgba(254, 248, 97, 0.5);
    -webkit-box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
    box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
    -webkit-transform: translateY(0) scale(1);
    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);
    box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
    -webkit-transform: translateY(-20px) scale(0);
    transform: translateY(-20px) scale(0);
  }
}

@keyframes fuego {
  0%, 100% {
    background: rgba(254, 248, 97, 0.5);
    -webkit-box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
    box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
    -webkit-transform: translateY(0) scale(1);
    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);
    box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
    -webkit-transform: translateY(-20px) scale(0);
    transform: translateY(-20px) scale(0);
  }
}

@-webkit-keyframes in {
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes in {
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}