@font-face {
  font-family: 'Happy';
  src: url('../assets/fonts/Sweet-Toffee.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
	/*background-color: #FFDAB9;	*/
	background-color: #000;
	-webkit-transition:background-color linear 5s;
	-moz-transition:background-color linear 5s;
	-o-transition:background-color linear 5s;
	-ms-transition:background-color linear 5s;
	transition:background-color linear 5s;
	overflow-x:hidden;
}

/* Overlay */
.lightbox {
  display: none; /* stays hidden at first */
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);

  /* flex will only apply when shown via JS */
  justify-content: center;
  align-items: center;

  z-index: 9999;
}

/* Enlarged image */
.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.5);
  animation: fadeIn 0.3s ease;
}

/* Simple fade-in */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.can-zoom {
  display: none;   /* hidden until button click */
  position: absolute;
  right: 65px;     /* aligns with right album photos */
  top: 360px;      /* sits below the second right photo */
  width: 200px;
  height: auto;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}
.can-zoom:hover {
  opacity: 1;  /* brighten on hover */
}

.container {
	display: none;
	/* The gallery backdrop is position:fixed z-index:30. Without a stacking
	   position of its own the container is non-positioned and paints BELOW it,
	   which put the cake, banner and message behind the photos. 350 sits above
	   the backdrop (30), the ambient balloons (100) and the decorations (300),
	   but below the poppable balloons (400) and the candle UI (500), which must
	   stay clickable in front of the cake. */
	position: relative;
	z-index: 350;
	/* .message is position:absolute with top:80%. Making this element a
	   containing block (above) meant that 80% resolved against the container's
	   collapsed content height instead of the viewport, throwing the message up
	   into the bunting. Full viewport height restores the intended placement. */
	min-height: 100vh;
}
.peach {
	background-color: #FFDAB9;
	
}
.peach-after {
	-webkit-animation:peach_alive linear 8s infinite;
	-moz-animation:peach_alive linear 8s infinite;
	-o-animation:peach_alive linear 8s infinite;
	-ms-animation:peach_alive linear 8s infinite;
	animation:peach_alive linear 8s infinite;
}

@-webkit-keyframes peach_alive {
	0%{
		background-color: #FFDAB9;
	}
	25%{
		background-color: #FFE4B5;
	}
	50%{
		background-color: #FFDAB9;
	}
	75%{
		background-color: #FFEFD5;
	}
	100%{
		background-color: #FFDAB9;
	}
}
@-moz-keyframes peach_alive {
	0%{
		background-color: #FFDAB9;
	}
	25%{
		background-color: #FFE4B5;
	}
	50%{
		background-color: #FFDAB9;
	}
	75%{
		background-color: #FFEFD5;
	}
	100%{
		background-color: #FFDAB9;
	}
}

@-o-keyframes peach_alive {
	0%{
		background-color: #FFDAB9;
	}
	25%{
		background-color: #FFE4B5;
	}
	50%{
		background-color: #FFDAB9;
	}
	75%{
		background-color: #FFEFD5;
	}
	100%{
		background-color: #FFDAB9;
	}
}

@-ms-keyframes peach_alive {
	0%{
		background-color: #FFDAB9;
	}
	25%{
		background-color: #FFE4B5;
	}
	50%{
		background-color: #FFDAB9;
	}
	75%{
		background-color: #FFEFD5;
	}
	100%{
		background-color: #FFDAB9;
	}
}

@keyframes peach_alive {
	0%{
		background-color: #FFDAB9;
	}
	25%{
		background-color: #FFE4B5;
	}
	50%{
		background-color: #FFDAB9;
	}
	75%{
		background-color: #FFEFD5;
	}
	100%{
		background-color: #FFDAB9;
	}
}


.bulb {
	width: 50px;
	height: 50px;
	margin: auto;
	background-repeat: no-repeat no-repeat;
	background-position:center 0px;
	background-size: 50px 50px;
}

.bulb-holder {
	height: 70px;
}

.bulb-glow-yellow {
	background-image: url('../assets/images/bulbs/bulb_yellow.png');
	-webkit-animation: bulb_glow_yellow linear 5s;
	-moz-animation: bulb_glow_yellow linear 5s;
	-o-animation: bulb_glow_yellow linear 5s;
	-ms-animation: bulb_glow_yellow linear 5s;
	animation: bulb_glow_yellow linear 5s;
}

@-webkit-keyframes bulb_glow_yellow {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb_yellow.png');
		opacity: 1;
	}
}
@-moz-keyframes bulb_glow_yellow {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb_yellow.png');
		opacity: 1;
	}
}
@-o-keyframes bulb_glow_yellow {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb_yellow.png');
		opacity: 1;
	}
}
@-ms-keyframes bulb_glow_yellow {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb_yellow.png');
		opacity: 1;
	}
}
@keyframes bulb_glow_yellow {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb_yellow.png');
		opacity: 1;
	}
}

.bulb-glow-red {
	background-image: url('../assets/images/bulbs/bulb_red.png');
	-webkit-animation: bulb_glow_red linear 5s;
	-moz-animation: bulb_glow_red linear 5s;
	-o-animation: bulb_glow_red linear 5s;
	-ms-animation: bulb_glow_red linear 5s;
	animation: bulb_glow_red linear 5s;
}

@-webkit-keyframes bulb_glow_red {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb_red.png');
		opacity: 1;
	}
}
@-moz-keyframes bulb_glow_red {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb_red.png');
		opacity: 1;
	}
}
@-o-keyframes bulb_glow_red {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb_red.png');
		opacity: 1;
	}
}
@-ms-keyframes bulb_glow_red {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb_red.png');
		opacity: 1;
	}
}
@keyframes bulb_glow_red {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb_red.png');
		opacity: 1;
	}
}
.bulb-glow-blue {
	background-image: url('../assets/images/bulbs/bulb_blue.png');
	-webkit-animation: bulb_glow_blue linear 5s;
	-moz-animation: bulb_glow_blue linear 5s;
	-o-animation: bulb_glow_blue linear 5s;
	-ms-animation: bulb_glow_blue linear 5s;
	animation: bulb_glow_blue linear 5s;
}

@-webkit-keyframes bulb_glow_blue {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb_blue.png');
		opacity: 1;
	}
}
@-moz-keyframes bulb_glow_blue {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb_blue.png');
		opacity: 1;
	}
}
@-o-keyframes bulb_glow_blue {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb_blue.png');
		opacity: 1;
	}
}
@-ms-keyframes bulb_glow_blue {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb_blue.png');
		opacity: 1;
	}
}
@keyframes bulb_glow_blue {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb_blue.png');
		opacity: 1;
	}
}

.bulb-glow-green {
	background-image: url('../assets/images/bulbs/bulb_green.png');
	-webkit-animation: bulb_glow_green linear 5s;
	-moz-animation: bulb_glow_green linear 5s;
	-o-animation: bulb_glow_green linear 5s;
	-ms-animation: bulb_glow_green linear 5s;
	animation: bulb_glow_green linear 5s;
}

@-webkit-keyframes bulb_glow_green {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb_green.png');
		opacity: 1;
	}
}
@-moz-keyframes bulb_glow_green {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb_green.png');
		opacity: 1;
	}
}
@-o-keyframes bulb_glow_green {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb_green.png');
		opacity: 1;
	}
}
@-ms-keyframes bulb_glow_green {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb_green.png');
		opacity: 1;
	}
}
@keyframes bulb_glow_green {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb_green.png');
		opacity: 1;
	}
}

.bulb-glow-pink {
	background-image: url('../assets/images/bulbs/bulb_pink.png');
	-webkit-animation: bulb_glow_pink linear 5s;
	-moz-animation: bulb_glow_pink linear 5s;
	-o-animation: bulb_glow_pink linear 5s;
	-ms-animation: bulb_glow_pink linear 5s;
	animation: bulb_glow_pink linear 5s;
}

@-webkit-keyframes bulb_glow_pink {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb_pink.png');
		opacity: 1;
	}
}
@-moz-keyframes bulb_glow_pink {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb_pink.png');
		opacity: 1;
	}
}
@-o-keyframes bulb_glow_pink {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb_pink.png');
		opacity: 1;
	}
}
@-ms-keyframes bulb_glow_pink {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb_pink.png');
		opacity: 1;
	}
}
@keyframes bulb_glow_pink {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb_pink.png');
		opacity: 1;
	}
}

.bulb-glow-orange {
	background-image: url('../assets/images/bulbs/bulb_orange.png');
	-webkit-animation: bulb_glow_orange linear 5s;
	-moz-animation: bulb_glow_orange linear 5s;
	-o-animation: bulb_glow_orange linear 5s;
	-ms-animation: bulb_glow_orange linear 5s;
	animation: bulb_glow_orange linear 5s;
}

@-webkit-keyframes bulb_glow_orange {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb_orange.png');
		opacity: 1;
	}
}
@-moz-keyframes bulb_glow_orange {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb_orange.png');
		opacity: 1;
	}
}
@-o-keyframes bulb_glow_orange {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb_orange.png');
		opacity: 1;
	}
}
@-ms-keyframes bulb_glow_orange {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb_orange.png');
		opacity: 1;
	}
}
@keyframes bulb_glow_orange {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb_orange.png');
		opacity: 1;
	}
}


/*after music*/
.bulb-glow-yellow-after {
	background-image: url('../assets/images/bulbs/bulb_yellow.png');
	-webkit-animation: bulb_glow_yellow_after linear 1s infinite;
	-moz-animation: bulb_glow_yellow_after linear 1s infinite;
	-o-animation: bulb_glow_yellow_after linear 1s infinite;
	-ms-animation: bulb_glow_yellow_after linear 1s infinite;
	animation: bulb_glow_yellow_after linear 1s infinite;
}

@-webkit-keyframes bulb_glow_yellow_after {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
	50%{
		background-image: url('../assets/images/bulbs/bulb_yellow.png');
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
}
@-moz-keyframes bulb_glow_yellow_after {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
	50%{
		background-image: url('../assets/images/bulbs/bulb_yellow.png');
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
}
@-o-keyframes bulb_glow_yellow_after {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
	50%{
		background-image: url('../assets/images/bulbs/bulb_yellow.png');
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
}
@-ms-keyframes bulb_glow_yellow_after {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
	50%{
		background-image: url('../assets/images/bulbs/bulb_yellow.png');
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
}
@keyframes bulb_glow_yellow_after {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
	50%{
		background-image: url('../assets/images/bulbs/bulb_yellow.png');
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
}

.bulb-glow-red-after {
	background-image: url('../assets/images/bulbs/bulb_red.png');
	-webkit-animation: bulb_glow_red_after linear 1.2s infinite;
	-moz-animation: bulb_glow_red_after linear 1.2s infinite;
	-o-animation: bulb_glow_red_after linear 1.2s infinite;
	-ms-animation: bulb_glow_red_after linear 1.2s infinite;
	animation: bulb_glow_red_after linear 1.2s infinite;
}

@-webkit-keyframes bulb_glow_red_after {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
	50%{
		background-image: url('../assets/images/bulbs/bulb_red.png');
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
}
@-moz-keyframes bulb_glow_red_after {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
	50%{
		background-image: url('../assets/images/bulbs/bulb_red.png');
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
}
@-o-keyframes bulb_glow_red_after {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
	50%{
		background-image: url('../assets/images/bulbs/bulb_red.png');
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
}
@-ms-keyframes bulb_glow_red_after {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
	50%{
		background-image: url('../assets/images/bulbs/bulb_red.png');
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
}
@keyframes bulb_glow_red_after {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
	50%{
		background-image: url('../assets/images/bulbs/bulb_red.png');
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
}

.bulb-glow-blue-after {
	background-image: url('../assets/images/bulbs/bulb_blue.png');
	-webkit-animation: bulb_glow_blue_after linear 1.4s infinite;
	-moz-animation: bulb_glow_blue_after linear 1.4s infinite;
	-o-animation: bulb_glow_blue_after linear 1.4s infinite;
	-ms-animation: bulb_glow_blue_after linear 1.4s infinite;
	animation: bulb_glow_blue_after linear 1.4s infinite;
}

@-webkit-keyframes bulb_glow_blue_after {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
	50%{
		background-image: url('../assets/images/bulbs/bulb_blue.png');
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
}
@-moz-keyframes bulb_glow_blue_after {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
	50%{
		background-image: url('../assets/images/bulbs/bulb_blue.png');
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
}
@-o-keyframes bulb_glow_blue_after {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
	50%{
		background-image: url('../assets/images/bulbs/bulb_blue.png');
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
}
@-ms-keyframes bulb_glow_blue_after {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
	50%{
		background-image: url('../assets/images/bulbs/bulb_blue.png');
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
}
@keyframes bulb_glow_blue_after {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
	50%{
		background-image: url('../assets/images/bulbs/bulb_blue.png');
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
}
.bulb-glow-green-after {
	background-image: url('../assets/images/bulbs/bulb_green.png');
	-webkit-animation: bulb_glow_green_after linear 1.8s infinite;
	-moz-animation: bulb_glow_green_after linear 1.8s infinite;
	-o-animation: bulb_glow_green_after linear 1.8s infinite;
	-ms-animation: bulb_glow_green_after linear 1.8s infinite;
	animation: bulb_glow_green_after linear 1.8s infinite;
}

@-webkit-keyframes bulb_glow_green_after {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
	50%{
		background-image: url('../assets/images/bulbs/bulb_green.png');
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
}

@-moz-keyframes bulb_glow_green_after {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
	50%{
		background-image: url('../assets/images/bulbs/bulb_green.png');
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
}
@-o-keyframes bulb_glow_green_after {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
	50%{
		background-image: url('../assets/images/bulbs/bulb_green.png');
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
}
@-ms-keyframes bulb_glow_green_after {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
	50%{
		background-image: url('../assets/images/bulbs/bulb_green.png');
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
}
@keyframes bulb_glow_green_after {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
	50%{
		background-image: url('../assets/images/bulbs/bulb_green.png');
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
}
.bulb-glow-pink-after {
	background-image: url('../assets/images/bulbs/bulb_pink.png');
	-webkit-animation: bulb_glow_pink_after linear 2s infinite;
	-moz-animation: bulb_glow_pink_after linear 2s infinite;
	-o-animation: bulb_glow_pink_after linear 2s infinite;
	-ms-animation: bulb_glow_pink_after linear 2s infinite;
	animation: bulb_glow_pink_after linear 2s infinite;
}

@-webkit-keyframes bulb_glow_pink_after {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
	50%{
		background-image: url('../assets/images/bulbs/bulb_pink.png');
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
}
@-moz-keyframes bulb_glow_pink_after {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
	50%{
		background-image: url('../assets/images/bulbs/bulb_pink.png');
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
}
@-o-keyframes bulb_glow_pink_after {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
	50%{
		background-image: url('../assets/images/bulbs/bulb_pink.png');
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
}
@-ms-keyframes bulb_glow_pink_after {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
	50%{
		background-image: url('../assets/images/bulbs/bulb_pink.png');
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
}
@keyframes bulb_glow_pink_after {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
	50%{
		background-image: url('../assets/images/bulbs/bulb_pink.png');
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
}
.bulb-glow-orange-after {
	background-image: url('../assets/images/bulbs/bulb_orange.png');
	-webkit-animation: bulb_glow_orange_after linear 2.2s infinite;
	-moz-animation: bulb_glow_orange_after linear 2.2s infinite;
	-o-animation: bulb_glow_orange_after linear 2.2s infinite;
	-ms-animation: bulb_glow_orange_after linear 2.2s infinite;
	animation: bulb_glow_orange_after linear 2.2s infinite;
}

@-webkit-keyframes bulb_glow_orange_after {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
	50%{
		background-image: url('../assets/images/bulbs/bulb_orange.png');
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
}
@-moz-keyframes bulb_glow_orange_after {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
	50%{
		background-image: url('../assets/images/bulbs/bulb_orange.png');
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
}
@-o-keyframes bulb_glow_orange_after {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
	50%{
		background-image: url('../assets/images/bulbs/bulb_orange.png');
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
}
@-ms-keyframes bulb_glow_orange_after {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
	50%{
		background-image: url('../assets/images/bulbs/bulb_orange.png');
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
}
@keyframes bulb_glow_orange_after {
	0%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
	50%{
		background-image: url('../assets/images/bulbs/bulb_orange.png');
	}
	100%{
		background-image: url('../assets/images/bulbs/bulb.png');
	}
}
audio {
	display: none;
}

.bannar {
	max-width: 100%;
	-webkit-transform:translate(0px,-500px);
	-moz-transform:translate(0px,-500px);
	-o-transform:translate(0px,-500px);
	-ms-transform:translate(0px,-500px);
	transform:translate(0px,-500px);

}
.bannar-come {
	-webkit-animation: bannar_come linear 6s;
	-webkit-transform:translate(0px,0px);
	-moz-animation: bannar_come linear 6s;
	-moz-transform:translate(0px,0px);
	-o-animation: bannar_come linear 6s;
	-o-transform:translate(0px,0px);
	-ms-animation: bannar_come linear 6s;
	-ms-transform:translate(0px,0px);
	animation: bannar_come linear 6s;
	transform:translate(0px,0px);
}
@-webkit-keyframes bannar_come {
	0%{
		-webkit-transform:translate(0px,-1000px);
	}
	33%{
		-webkit-transform:translate(0px,0px);
		-webkit-transform:rotate(10deg);
		/*-webkit-transform:scale(1.5);*/
	}
	66% {
		-webkit-transform:translate(0px,100px);
		-webkit-transform:rotate(-10deg);
	}
	100% {
		-webkit-transform:translate(0px,0px);
	}
}
@-moz-keyframes bannar_come {
	0%{
		-moz-transform:translate(0px,-1000px);
	}
	33%{
		-moz-transform:translate(0px,0px);
		-moz-transform:rotate(10deg);
		/*-webkit-transform:scale(1.5);*/
	}
	66% {
		-moz-transform:translate(0px,100px);
		-moz-transform:rotate(-10deg);
	}
	100% {
		-moz-transform:translate(0px,0px);
	}
}
@-o-keyframes bannar_come {
	0%{
		-o-transform:translate(0px,-1000px);
	}
	33%{
		-o-transform:translate(0px,0px);
		-o-transform:rotate(10deg);
		/*-webkit-transform:scale(1.5);*/
	}
	66% {
		-o-transform:translate(0px,100px);
		-o-transform:rotate(-10deg);
	}
	100% {
		-o-transform:translate(0px,0px);
	}
}
@-ms-keyframes bannar_come {
	0%{
		-ms-transform:translate(0px,-1000px);
	}
	33%{
		-ms-transform:translate(0px,0px);
		-ms-transform:rotate(10deg);
		/*-webkit-transform:scale(1.5);*/
	}
	66% {
		-ms-transform:translate(0px,100px);
		-ms-transform:rotate(-10deg);
	}
	100% {
		-ms-transform:translate(0px,0px);
	}
}o
@keyframes bannar_come {
	0%{
		transform:translate(0px,-1000px);
	}
	33%{
		transform:translate(0px,0px);
		transform:rotate(10deg);
		/*-webkit-transform:scale(1.5);*/
	}
	66% {
		transform:translate(0px,100px);
		transform:rotate(-10deg);
	}
	100% {
		transform:translate(0px,0px);
	}
}

.balloons {
	position: fixed;
	bottom: -200px;
	opacity: 0.6;
	z-index: 99;
	width: 100px;
	height: 183px;
	background-repeat: no-repeat no-repeat;
	background-size: 100px 183px;
}
.balloons h2 {
	text-transform: uppercase;
	font-family: 'Signika', sans-serif;
	font-size: 50px;
	color: #BF4136;
	text-shadow: 5px 5px 5px #FFF;
	display: none;
}
#b1,#b11 {
	background-image: url('../assets/images/balloons/b1.png');
}
#b2,#b22 {
	background-image: url('../assets/images/balloons/b2.png');
}
#b3,#b33 {
	background-image: url('../assets/images/balloons/b3.png');
}
#b4,#b44{
	background-image: url('../assets/images/balloons/b4.png');
}
#b5,#b55{
	background-image: url('../assets/images/balloons/b5.png');
}
#b6,#b66{
	background-image: url('../assets/images/balloons/b6.png');
}
#b7,#b77{
	background-image: url('../assets/images/balloons/b7.png');
}
#b8,#b88{
	background-image: url('../assets/images/balloons/b8.png');
}
.balloons-rotate-behaviour-one {
	-webkit-animation: balloons_rotate_one linear 10s infinite;
	-webkit-transform: rotate(30deg);
	-moz-animation: balloons_rotate_one linear 10s infinite;
	-moz-transform: rotate(30deg);
	-o-animation: balloons_rotate_one linear 10s infinite;
	-o-transform: rotate(30deg);
	-ms-animation: balloons_rotate_one linear 10s infinite;
	-ms-transform: rotate(30deg);
	animation: balloons_rotate_one linear 10s infinite;
	transform: rotate(30deg);
}
@-webkit-keyframes balloons_rotate_one {
	0% {
		-webkit-transform: rotate(30deg);
	}
	50% {
		-webkit-transform: rotate(-30deg);
	}
	100% {
		-webkit-transform: rotate(30deg);
	}
}
@-moz-keyframes balloons_rotate_one {
	0% {
		-moz-transform: rotate(30deg);
	}
	50% {
		-moz-transform: rotate(-30deg);
	}
	100% {
		-moz-transform: rotate(30deg);
	}
}
@-o-keyframes balloons_rotate_one {
	0% {
		-o-transform: rotate(30deg);
	}
	50% {
		-o-transform: rotate(-30deg);
	}
	100% {
		-o-transform: rotate(30deg);
	}
}
@-ms-keyframes balloons_rotate_one {
	0% {
		-ms-transform: rotate(30deg);
	}
	50% {
		-ms-transform: rotate(-30deg);
	}
	100% {
		-ms-transform: rotate(30deg);
	}
}
@keyframes balloons_rotate_one {
	0% {
		transform: rotate(30deg);
	}
	50% {
		transform: rotate(-30deg);
	}
	100% {
		transform: rotate(30deg);
	}
}
.balloons-rotate-behaviour-two {
	-webkit-animation: balloons_rotate_two linear 10s infinite;
	-webkit-transform: rotate(-20deg);
	-moz-animation: balloons_rotate_two linear 10s infinite;
	-moz-transform: rotate(-20deg);
	-o-animation: balloons_rotate_two linear 10s infinite;
	-o-transform: rotate(-20deg);
	-ms-animation: balloons_rotate_two linear 10s infinite;
	-ms-transform: rotate(-20deg);
	animation: balloons_rotate_two linear 10s infinite;
	transform: rotate(-20deg);
}
@-webkit-keyframes balloons_rotate_two {
	0% {
		-webkit-transform: rotate(-20deg);
	}
	50% {
		-webkit-transform: rotate(20deg);
	}
	100% {
		-webkit-transform: rotate(-20deg);
	}
}
@-moz-keyframes balloons_rotate_two {
	0% {
		-moz-transform: rotate(-20deg);
	}
	50% {
		-moz-transform: rotate(20deg);
	}
	100% {
		-moz-transform: rotate(-20deg);
	}
}
@-o-keyframes balloons_rotate_two {
	0% {
		-o-transform: rotate(-20deg);
	}
	50% {
		-o-transform: rotate(20deg);
	}
	100% {
		-o-transform: rotate(-20deg);
	}
}
@-ms-keyframes balloons_rotate_two {
	0% {
		-ms-transform: rotate(-20deg);
	}
	50% {
		-ms-transform: rotate(20deg);
	}
	100% {
		-ms-transform: rotate(-20deg);
	}
}
@keyframes balloons_rotate_two {
	0% {
		transform: rotate(-20deg);
	}
	50% {
		transform: rotate(20deg);
	}
	100% {
		transform: rotate(-20deg);
	}
}

.balloon-border{
	position: fixed;
	top:100%;
	opacity: 0.5;
	z-index: 190; /* balloon band; was 9999 and covered the confetti + lightbox */
	pointer-events: none;
}
.control-panel {
	position: fixed;
	bottom: 0;
	padding:10px 0px 10px 0px;
}
/* Every button except the first starts hidden; effect.js reveals them in order. */
#play, #bannar_coming, #pop_balloons, #light_candle, #blow_candles, #wish_message, #story {
	display: none;
}

.cake-cover {
	margin-top: 50px;
}

.message {
  /* Fixed, not absolute: as an absolute box its top:80% resolved against
     .container's height, which made placement depend on how tall the
     container happened to be. Anchoring to the viewport bottom keeps the
     text just above the button row at every screen size, and is stable
     regardless of how many lines are visible at once. */
  position: fixed;
  left: 50%;
  bottom: 16vh;
  transform: translateX(-50%);
  width: 90%;
  max-width: 900px;
  text-align: center;
  display: none;              /* hidden until triggered */
  z-index: 2000;              /* above the cake and every decoration */
}

.message p {
  font-family: 'Happy', sans-serif;
  /* was a fixed 60px, which overflowed narrow screens */
  font-size: clamp(26px, 6vw, 60px);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--bd-berry);
  /* Heavy cream halo: this text sits over the photo background. */
  text-shadow: 0 2px 3px var(--bd-cream), 0 -2px 3px var(--bd-cream),
               2px 0 3px var(--bd-cream), -2px 0 3px var(--bd-cream),
               0 4px 16px rgba(255,249,242,0.9);
  display: none;              /* controlled by JS */
  font-weight: bold;
  margin: 15px 0;             /* spacing between lines */
}

.btn-primary {
        border-color: transparent;
        padding: 11px 22px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-family: 'Signika', sans-serif;
        font-weight: 700;
        border-radius: 999px;
        color: var(--bd-cream);
        background-color: var(--bd-rose);
        box-shadow: 0 6px 18px var(--bd-shadow);
        transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .open .dropdown-toggle.btn-primary {
        border-color: transparent;
        color: var(--bd-cream);
        background-color: var(--bd-berry);
        transform: translateY(-2px);
        box-shadow: 0 10px 24px var(--bd-shadow-lg);
    }



    /*controlling tablet width*/
    /*@media only screen and (max-width: 720px){
    	.container {
    		-webkit-transform: scale(0.9);
    	}
    }*/