@import url('https://fonts.googleapis.com/css?family=Orbitron:700');

@font-face{font-family:'Museo Slab Regular';src:url("../fonts/Museo_Slab_500.otf")}
@font-face{font-family:'Museo Slab 900';src:url("../fonts/Museo_Slab_900.otf")}
@font-face{font-family:'Museo Slab 700';src:url("../fonts/Museo_Slab_700.otf")}

/* ---------------------------------- */
 .one-k {
	 font-family: 'Orbitron', monospace;
	 font-weight: 700;
	 font-size: 20vw;
	 perspective: 200px;
	 perspective-origin: top center;
	 color: #ffd950;
}
 @media (min-width: 600px) {
	 .one-k {
		 font-size: 120px;
	}
}
 .one-k .word {
	 transform: rotateX(15deg);
	 display: inline-block;
	 transform-style: preserve-3d;
}
 .one-k .char {
	 display: inline-block;
	 transform-style: preserve-3d;
	 position: relative;
	 animation: celebration-dance 0.7s linear infinite alternate;
	 animation-delay: calc(-.2s * var(--char-index));
	 transform-origin: center bottom;
}
 .one-k .char:before, .one-k .char:after {
	 content: attr(data-char);
	 position: absolute;
	 top: 0;
	 left: 0;
	 opacity: 0.4;
	 transform-style: preserve-3d;
	 transform: translate3d(0, 3px, -10px);
}
 .one-k .char:after {
	 transform: translate3d(0, 3px, -20px);
	 opacity: 0.2;
}
 .one-k .char self[data-char=","] {
	 vertical-align: 0.1em;
}
/* ---------------------------------- */
 .dance-container {
	 height: 60%;
	 max-height: 15vw;
	 position: absolute;
	 bottom: 34%;
	 left: 0;
	 right: 0;
	 display: flex;
	 width: 100%;
	 justify-content: center;
	 align-items: center;
	 animation: fade-in 0.4s linear 0s both;
}
 @media (min-width: 600px) {
	 .dance-container {
		 max-height: 90px;
	}
}
 @keyframes fade-in {
	 from {
		 opacity: 0;
	}
}
 .avatar-container {
	 display: inline-block;
	 height: 100%;
	 animation: celebration-dance 0.7s linear infinite alternate;
	 transform-origin: center bottom;
}
 .avatar-container.-david {
	 animation-delay: -0.35s;
}
 .avatar {
	 height: 100%;
	 width: auto;
	 animation: do-a-flip 14s linear -0.7s infinite;
	 transform-origin: 60% center;
}
 .-david .avatar {
	 transform-origin: 40% center;
}
 .avatar svg {
	 height: 100%;
	 transform: translateX(10%);
}
 .-david .avatar svg {
	 transform: translateX(-10%);
}
 @keyframes celebration-dance {
	 0% {
		 transform: translate3d(0, -30%, 0) scaleY(1);
		 animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
	}
	 50% {
		 transform: translate3d(0, 0, 0) scaleY(1.2) scaleX(0.9);
	}
	 70% {
		 transform: translate3d(0, 0, 0) scaleY(0.9) scaleX(1);
	}
	 100% {
		 transform: translate3d(0, 0, 0) scaleY(0.8) scaleX(1.1);
	}
}
 @keyframes do-a-flip {
	 0% {
		 transform: rotate(0deg);
	}
	 21% {
		 transform: rotate(0deg);
		 animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	 28% {
		 transform: rotate(-360deg);
	}
	 71% {
		 transform: rotate(-360deg);
		 animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	 78% {
		 transform: rotate(360deg);
	}
	 100% {
		 transform: rotate(360deg);
	}
}


.happy {
	font-family:'Museo Slab 700';
	width: 100%;
	padding: 175px 0;
	color: #ffa05b;
  font-size: 50px;
}

/*Rotate number*/
#number {
		-webkit-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
		from {
				-webkit-transform: rotate(0deg);
		}
		to {
				-webkit-transform: rotate(359deg);
		}
}


/*Contador*/
.aniversary{
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	height: 400px;
	padding: 60px;
	position: relative;
}
.aniversary .contador {
	font-family:'Museo Slab 700';
	width: 100%;
	padding: 175px 0;
}
.aniversary .contador .cartel {
  display: inline-block;
  height: 109px;
  padding: 10px 0px 5px 0px;
  text-align: center;
  width: 109px;
}
.aniversary .contador .cartel>div{
  animation: fade 3s;
  color: #ffffff; //#ffa05b;
  font-size: 50px;
  line-height: 30px;
  margin-top: 5px;
}

@media (max-width: 450px) {  
  .contenedor {
    margin-top: 15%;
  }
  .banner {
   margin-bottom: 30px; 
  }
  .cartel {
    height: 99px;
    width: 99px;
  }
  .cartel>div{
    font-size: 45px;
  }
  .cartel>div>h3 {
    font-size: 15px;
    margin-top: 0px;
  }
}
@keyframes fade {
    0%   {
      opacity: 0;
  }
    30%   {
      opacity: 0;
  }  
    100% {
      opacity: 1;
  }
}

/*Confeti*/
.conf0{fill:#FC6394;}
.conf1{fill:#EF3C8A;}
.conf2{fill:#5ADAEA;}
.conf3{fill:#974CBE;}
.conf4{fill:#3CBECD;}
.conf5{fill:#813BBE;}
.conf6{fill:#F9B732;}
.conf7{display:none;fill:none;stroke:#000000;stroke-miterlimit:10;}
.conf8{fill:none;stroke:#F9B732;stroke-width:9;stroke-linecap:round;stroke-miterlimit:10;}


.confetti-cone{
  transform-origin: 200px 50px;
  animation:confetti-cone1 1.2s ease infinite;
}
@keyframes confetti-cone1{
	0%{
	   transform:translate(40px, 95px)  rotate(45deg) scale(1, 1);
	}
	15%{
	   transform:translate(10px, 145px)  rotate(45deg) scale(1.1, 0.85);

	}
	100%{
	  transform:translate(40px, 105px)  rotate(45deg) scale(1, 1);
	}
 }

 svg.c-left{
 	top: 245px;
 	left: 235px;
 	position: absolute;
 	width: 500px;
 }
 svg.c-right {
 	position: absolute;
 	top: 0;
 	right: 0;
 	transform: rotate(265deg);
 	width: 500px;
 }

#yellow-strip {
  fill:none;
  stroke:#F9B732;
  stroke-width:9;
  stroke-linecap:round;
  stroke-miterlimit:10;
  animation: confdash 1.2s ease infinite;
}


@keyframes confdash {
	0%{
	  stroke-dasharray:1000;
	  stroke-dashoffset:500;
	  transform:translate(-30px, 30px);
	  opacity:0;
	}
	2%{
	  stroke-dasharray:1000;
	  stroke-dashoffset:500;
	  transform:translate(-30px, 30px);
	  opacity:0;
	}
	35%{
	stroke-dasharray:1000;
	stroke-dashoffset:900;
	transform:translate(-2px, 0px);
	opacity:1;
	}

	85%{
	  stroke-dasharray:1000;
	  stroke-dashoffset:1000;
	  transform:translate(1px, -5px);
	  opacity:1;
	}
	  90%{
	  stroke-dashoffset:1000;
	   stroke-dashoffset:1000;
	  transform:translate(2px, -8px);
	  opacity:0;
	}
	  100%{
	  stroke-dashoffset:1000;
	   stroke-dashoffset:500;
	  transform:translate(2px, -8px);
	  opacity:0;
	}
}



#a2{
  transform-origin: 310.9px 241px;
  animation: confa 1.2s ease-out infinite;
}

#a1
{transform-origin: 276px 246px;
  animation: confa 1.2s ease-out infinite;
}

@keyframes confa {
	0%{
	  opacity:0;
	  transform: translate(-30px, 20px) rotate(0);
	}
	15%{
	  opacity:1;
	  transform: translate(25px, -10px) rotate(60deg);
	}
	80%{
	  opacity:1;
	  transform: translate(33px, -18px) rotate(180deg);
	}
	100%{
	  opacity:0;
	  transform: translate(37px, -23px) scale(0.5)rotate(230deg);
	}
}


#b1{
  transform-origin: 195.2px 232.6px;
  animation: confb 1.2s ease-out infinite;
}

#b2{
  transform-origin: 230.8px 219.8px;
  animation: confb 1.2s ease-out infinite;
}
#b3 {transform-origin: 222.8px 190.6px;
  animation: confb 1.2s ease-out infinite;
}

#b4 {transform-origin: 262px 188.5px;
  animation: confb 1.2s ease-out infinite;
}

#b5 {transform-origin: 282.3px 170.6px;
  animation: confb 1.2s ease-out infinite;
}


@keyframes confb {
	0%{
	  opacity:0;
	  transform: translate(-30px, 20px) rotate(0);
	}
	12%{
	  opacity:1;
	  transform: translate(25px, -10px) rotate(60deg);
	}
	76%{
	  opacity:1;
	  transform: translate(33px, -18px) rotate(180deg);
	}
	100%{
	  opacity:0;
	  transform: translate(37px, -23px) scale(0.5) rotate(240deg);
	}
}

#c1 {transform-origin: 174.8px 183.4px;
  animation: confc 1.2s ease-out infinite;
}
#c2{
  transform-origin: 178.9px 156.2px;
  animation: confc 1.2s ease-out infinite;
}

#c3{
  transform-origin: 206.7px 140px;
  animation: confc 1.2s ease-out infinite;
}

#c4{
  transform-origin: 213.5px 120.2px;
  animation: confc 1.2s ease-out infinite;
}

@keyframes confc {
	0%{
	  opacity:0.7;
	  transform: translate(-30px, 20px) rotate(0);
	}
	18%{
	  opacity:1;
	  transform: translate(5px, -10px) rotate(60deg);
	}
	76%{
	  opacity:1;
	  transform: translate(13px, -18px) rotate(180deg);
	}
	100%{
	  opacity:0;
	  transform: translate(17px, -23px) scale(0.5) rotate(230deg);
	}
}

#d1{
  transform-origin: 127px 176px;
  animation: confd 1.2s ease-out infinite;
}
#d2 {transform-origin: 133px 118px;
  animation: confd 1.2s ease-out infinite;
}
#d3{ transform-origin: 152px 100px;
  animation: confd 1.2s ease-out infinite;
}

@keyframes confd {
	0%{
	  opacity:0.7;
	  transform: translate(-20px, 20px) rotate(0);
	}
	18%{
	  opacity:1;
	  transform: translate(-5px, -10px) rotate(60deg);
	}
	76%{
	  opacity:1;
	  transform: translate(-8px, -18px) rotate(180deg);
	}
	100%{
	  opacity:0;
	  transform: translate(-10px, -23px) scale(0.5) rotate(230deg);
	}
}