diff --git a/Balloon-Border.png b/Balloon-Border.png new file mode 100644 index 0000000..085f5f0 Binary files /dev/null and b/Balloon-Border.png differ diff --git a/README.md b/README.md index 814c775..69deb1c 100644 --- a/README.md +++ b/README.md @@ -1 +1,34 @@ -# Thei \ No newline at end of file +Happy Birthday + +A Happy Birthday animation design in CSS3, HTML5. + +URL: http://ayusharma.github.io/birthday/ + +Technology Used: HTML5 CSS3 jQuery GNU/Linux Digital Ocean as VPS GIMP + +# Setup + +## If you have python installed: +``` +cd Birthday +``` + +&& + +``` +python -m SimpleHTTPServer --port 8081 +``` + +visit http://localhost:8081 in your browser. + +## If you have nodejs installed +``` +npm install +``` +&& + +``` +npm run server-node +``` +visit http://localhost:8081 in your browser. + diff --git a/b1.png b/b1.png new file mode 100644 index 0000000..ef366a4 Binary files /dev/null and b/b1.png differ diff --git a/b2.png b/b2.png new file mode 100644 index 0000000..98c5863 Binary files /dev/null and b/b2.png differ diff --git a/b3.png b/b3.png new file mode 100644 index 0000000..93c83d7 Binary files /dev/null and b/b3.png differ diff --git a/b4.png b/b4.png new file mode 100644 index 0000000..59248b9 Binary files /dev/null and b/b4.png differ diff --git a/b5.png b/b5.png new file mode 100644 index 0000000..a05d0e4 Binary files /dev/null and b/b5.png differ diff --git a/b6.png b/b6.png new file mode 100644 index 0000000..d09233e Binary files /dev/null and b/b6.png differ diff --git a/b7.png b/b7.png new file mode 100644 index 0000000..466729d Binary files /dev/null and b/b7.png differ diff --git a/banner.png b/banner.png new file mode 100644 index 0000000..1980cfc Binary files /dev/null and b/banner.png differ diff --git a/bd1.jpg b/bd1.jpg new file mode 100644 index 0000000..0e156a2 Binary files /dev/null and b/bd1.jpg differ diff --git a/bulb.png b/bulb.png new file mode 100644 index 0000000..7149386 Binary files /dev/null and b/bulb.png differ diff --git a/bulb_blue.png b/bulb_blue.png new file mode 100644 index 0000000..458ca6d Binary files /dev/null and b/bulb_blue.png differ diff --git a/bulb_green.png b/bulb_green.png new file mode 100644 index 0000000..bdcf694 Binary files /dev/null and b/bulb_green.png differ diff --git a/bulb_orange.png b/bulb_orange.png new file mode 100644 index 0000000..e3b05c6 Binary files /dev/null and b/bulb_orange.png differ diff --git a/bulb_pink.png b/bulb_pink.png new file mode 100644 index 0000000..1c1b686 Binary files /dev/null and b/bulb_pink.png differ diff --git a/bulb_red.png b/bulb_red.png new file mode 100644 index 0000000..46669ab Binary files /dev/null and b/bulb_red.png differ diff --git a/bulb_yellow.png b/bulb_yellow.png new file mode 100644 index 0000000..ca3db93 Binary files /dev/null and b/bulb_yellow.png differ diff --git a/cake.less b/cake.less new file mode 100644 index 0000000..90fe74e --- /dev/null +++ b/cake.less @@ -0,0 +1,271 @@ + + +//////////////////////////////////////////// var + +@D:300px; // Control diameter + +/////////////////////////////////////////// + + + +/* ============================================== POSITION +*/ + +.cake{ + position:absolute; + display:none; + // top:30%; + left:50%; + margin-left:-(@D/2); + width:@D; height:@D; +} + +/* ============================================== BASE +*/ + +.cake:after{ + background:rgba(255,255,255,1); + border-radius:@D; + content:""; + position:absolute; + bottom:0; left:0; + width:@D; height:@D/50; +} + +.cake:before{ + +} + +/* ============================================== Candle +*/ + +.velas{ + background:rgba(255,255,255,1); + border-radius:100%; + position:absolute; + top:50%; left:50%; + margin-left:-(@D/2)/20; + margin-top:-(@D/2)/6; + width:@D/20; height:@D/6; +} + +.velas:after, +.velas:before{ + background:rgba(255,0,0,0.4); + content:""; + position:absolute; + width:100%; height:@D/45; +} + +.velas:after{ + top:25%; left:0; +} + +.velas:before{ + top:45%; left:0; +} + +/* ============================================== Fire +*/ + +.fuego{ + display:none; + border-radius:100%; + box-shadow:0 0 40px 10px rgba(248,233,209,0.2); + position:absolute; + top:-12px; left:50%; + margin-left:-(@D/2)/15; + //margin-top:-(@D/2)/10; + width:@D/15; height:@D/8; +} + +.fuego:nth-child(1){ + -webkit-animation:fuego 2s infinite; + -moz-animation:fuego 2s infinite; + -o-animation:fuego 2s infinite; + -ms-animation:fuego 2s infinite; + animation:fuego 2s infinite; + +} + +.fuego:nth-child(2){ + -webkit-animation:fuego 1.5s infinite; + -moz-animation:fuego 1.5s infinite; + -o-animation:fuego 1.5s infinite; + -ms-animation:fuego 1.5s infinite; + animation:fuego 1.5s infinite; + +} + +.fuego:nth-child(3){ + -webkit-animation:fuego 1s infinite; + -moz-animation:fuego 1s infinite; + -o-animation:fuego 1s infinite; + -ms-animation:fuego 1s infinite; + animation:fuego 1s infinite; +} + +.fuego:nth-child(4){ + -webkit-animation:fuego 0.5s infinite; + -moz-animation:fuego 0.5s infinite; + -o-animation:fuego 0.5s infinite; + -ms-animation:fuego 0.5s infinite; + animation:fuego 0.5s infinite; +} + +.fuego:nth-child(5){ + -webkit-animation:fuego 0.2s infinite; + -moz-animation:fuego 0.2s infinite; + -o-animation:fuego 0.2s infinite; + -ms-animation:fuego 0.2s infinite; + animation:fuego 0.2s infinite; +} + +/* ============================================== Animation Fire +*/ + +@-webkit-keyframes fuego{ + 0%{ + background:rgba(254,248,97,0.5); + -webkit-transform:translateY(0) scale(1); + } + 50%{ + background:rgba(255,50,0,0.1); + -webkit-transform:translateY(-(@D/5)) scale(0); + } + 100%{ + background:rgba(254,248,97,0.5); + -webkit-transform:translateY(0) scale(1); + } +} +@-moz-keyframes fuego{ + 0%{ + background:rgba(254,248,97,0.5); + -moz-transform:translateY(0) scale(1); + } + 50%{ + background:rgba(255,50,0,0.1); + -moz-transform:translateY(-(@D/5)) scale(0); + } + 100%{ + background:rgba(254,248,97,0.5); + -moz-transform:translateY(0) scale(1); + } +} +@-o-keyframes fuego{ + 0%{ + background:rgba(254,248,97,0.5); + -o-transform:translateY(0) scale(1); + } + 50%{ + background:rgba(255,50,0,0.1); + -o-transform:translateY(-(@D/5)) scale(0); + } + 100%{ + background:rgba(254,248,97,0.5); + -o-transform:translateY(0) scale(1); + } +} +@-ms-keyframes fuego{ + 0%{ + background:rgba(254,248,97,0.5); + -ms-transform:translateY(0) scale(1); + } + 50%{ + background:rgba(255,50,0,0.1); + -ms-transform:translateY(-(@D/5)) scale(0); + } + 100%{ + background:rgba(254,248,97,0.5); + -ms-transform:translateY(0) scale(1); + } +} + +@keyframes fuego{ + 0%{ + background:rgba(254,248,97,0.5); + transform:translateY(0) scale(1); + } + 50%{ + background:rgba(255,50,0,0.1); + transform:translateY(-(@D/5)) scale(0); + } + 100%{ + background:rgba(254,248,97,0.5); + transform:translateY(0) scale(1); + } +} + +/* ============================================== Frosting +*/ + +.cobertura{ + background:rgba(236,231,227,1); + border-radius:@D/2; + position:absolute; + top:60%; left:50%; + margin-left:-(@D/2)/1.8; + margin-top:-(@D/2)/10; + width:@D/1.8; height:@D/8; + z-index:10; +} + +.cobertura:after, +.cobertura:before{ + background:rgba(236,231,227,1); + border-radius:@D; + content:""; + position:absolute; + width:@D/20; height:@D/10; +} + +.cobertura:after{ + top:@D/15; right:@D/7; +} + +.cobertura:before{ + top:@D/10; right:@D/11; +} + +/* ============================================== BIZCOCHO +*/ + +.bizcocho{ + background:rgba(109,56,38,1); + position:absolute; + bottom:0; left:50%; + margin-left:-(@D/2)/2; + width:@D/2; height:@D/3; +} + +.bizcocho:after, +.bizcocho:before{ + background:rgba(236,231,227,0.6); + content:""; + position:absolute; + width:100%; height:@D/20; +} + +.bizcocho:after{ + top:30%; left:0; +} + +.bizcocho:before{ + top:60%; left:0; +} + +/* ============================================== TEXT +*/ + +h1, +p{ + font-family: 'Lato', sans-serif; + font-weight: 300; + font-style:italic; + text-align:center; + width:100%; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} diff --git a/cake128.png b/cake128.png new file mode 100644 index 0000000..2ef2521 Binary files /dev/null and b/cake128.png differ diff --git a/effect.js b/effect.js new file mode 100644 index 0000000..0433c43 --- /dev/null +++ b/effect.js @@ -0,0 +1,201 @@ +$(window).load(function(){ + $('.loading').fadeOut('fast'); + $('.container').fadeIn('fast'); +}); +$('document').ready(function(){ + var vw; + $(window).resize(function(){ + vw = $(window).width()/2; + $('#b1,#b2,#b3,#b4,#b5,#b6,#b7').stop(); + $('#b11').animate({top:240, left: vw-350},500); + $('#b22').animate({top:240, left: vw-250},500); + $('#b33').animate({top:240, left: vw-150},500); + $('#b44').animate({top:240, left: vw-50},500); + $('#b55').animate({top:240, left: vw+50},500); + $('#b66').animate({top:240, left: vw+150},500); + $('#b77').animate({top:240, left: vw+250},500); + }); + + $('#turn_on').click(function(){ + $('#bulb_yellow').addClass('bulb-glow-yellow'); + $('#bulb_red').addClass('bulb-glow-red'); + $('#bulb_blue').addClass('bulb-glow-blue'); + $('#bulb_green').addClass('bulb-glow-green'); + $('#bulb_pink').addClass('bulb-glow-pink'); + $('#bulb_orange').addClass('bulb-glow-orange'); + $('body').addClass('peach'); + $(this).fadeOut('slow').delay(5000).promise().done(function(){ + $('#play').fadeIn('slow'); + }); + }); + $('#play').click(function(){ + var audio = $('.song')[0]; + audio.play(); + $('#bulb_yellow').addClass('bulb-glow-yellow-after'); + $('#bulb_red').addClass('bulb-glow-red-after'); + $('#bulb_blue').addClass('bulb-glow-blue-after'); + $('#bulb_green').addClass('bulb-glow-green-after'); + $('#bulb_pink').addClass('bulb-glow-pink-after'); + $('#bulb_orange').addClass('bulb-glow-orange-after'); + $('body').css('backgroud-color','#FFF'); + $('body').addClass('peach-after'); + $(this).fadeOut('slow').delay(6000).promise().done(function(){ + $('#bannar_coming').fadeIn('slow'); + }); + }); + + $('#bannar_coming').click(function(){ + $('.bannar').addClass('bannar-come'); + $(this).fadeOut('slow').delay(6000).promise().done(function(){ + $('#balloons_flying').fadeIn('slow'); + }); + }); + + function loopOne() { + var randleft = 1000*Math.random(); + var randtop = 500*Math.random(); + $('#b1').animate({left:randleft,bottom:randtop},10000,function(){ + loopOne(); + }); + } + function loopTwo() { + var randleft = 1000*Math.random(); + var randtop = 500*Math.random(); + $('#b2').animate({left:randleft,bottom:randtop},10000,function(){ + loopTwo(); + }); + } + function loopThree() { + var randleft = 1000*Math.random(); + var randtop = 500*Math.random(); + $('#b3').animate({left:randleft,bottom:randtop},10000,function(){ + loopThree(); + }); + } + function loopFour() { + var randleft = 1000*Math.random(); + var randtop = 500*Math.random(); + $('#b4').animate({left:randleft,bottom:randtop},10000,function(){ + loopFour(); + }); + } + function loopFive() { + var randleft = 1000*Math.random(); + var randtop = 500*Math.random(); + $('#b5').animate({left:randleft,bottom:randtop},10000,function(){ + loopFive(); + }); + } + + function loopSix() { + var randleft = 1000*Math.random(); + var randtop = 500*Math.random(); + $('#b6').animate({left:randleft,bottom:randtop},10000,function(){ + loopSix(); + }); + } + function loopSeven() { + var randleft = 1000*Math.random(); + var randtop = 500*Math.random(); + $('#b7').animate({left:randleft,bottom:randtop},10000,function(){ + loopSeven(); + }); + } + + $('#balloons_flying').click(function(){ + $('.balloon-border').animate({top:-500},8000); + $('#b1,#b4,#b5,#b7').addClass('balloons-rotate-behaviour-one'); + $('#b2,#b3,#b6').addClass('balloons-rotate-behaviour-two'); + // $('#b3').addClass('balloons-rotate-behaviour-two'); + // $('#b4').addClass('balloons-rotate-behaviour-one'); + // $('#b5').addClass('balloons-rotate-behaviour-one'); + // $('#b6').addClass('balloons-rotate-behaviour-two'); + // $('#b7').addClass('balloons-rotate-behaviour-one'); + loopOne(); + loopTwo(); + loopThree(); + loopFour(); + loopFive(); + loopSix(); + loopSeven(); + + $(this).fadeOut('slow').delay(5000).promise().done(function(){ + $('#cake_fadein').fadeIn('slow'); + }); + }); + + $('#cake_fadein').click(function(){ + $('.cake').fadeIn('slow'); + $(this).fadeOut('slow').delay(3000).promise().done(function(){ + $('#light_candle').fadeIn('slow'); + }); + }); + + $('#light_candle').click(function(){ + $('.fuego').fadeIn('slow'); + $(this).fadeOut('slow').promise().done(function(){ + $('#wish_message').fadeIn('slow'); + }); + }); + + + $('#wish_message').click(function(){ + vw = $(window).width()/2; + + $('#b1,#b2,#b3,#b4,#b5,#b6,#b7').stop(); + $('#b1').attr('id','b11'); + $('#b2').attr('id','b22') + $('#b3').attr('id','b33') + $('#b4').attr('id','b44') + $('#b5').attr('id','b55') + $('#b6').attr('id','b66') + $('#b7').attr('id','b77') + $('#b11').animate({top:240, left: vw-350},500); + $('#b22').animate({top:240, left: vw-250},500); + $('#b33').animate({top:240, left: vw-150},500); + $('#b44').animate({top:240, left: vw-50},500); + $('#b55').animate({top:240, left: vw+50},500); + $('#b66').animate({top:240, left: vw+150},500); + $('#b77').animate({top:240, left: vw+250},500); + $('.balloons').css('opacity','0.9'); + $('.balloons h2').fadeIn(3000); + $(this).fadeOut('slow').delay(3000).promise().done(function(){ + $('#story').fadeIn('slow'); + }); + }); + + $('#story').click(function(){ + $(this).fadeOut('slow'); + $('.cake').fadeOut('fast').promise().done(function(){ + $('.message').fadeIn('slow'); + }); + + var i; + + function msgLoop (i) { + $("p:nth-child("+i+")").fadeOut('slow').delay(800).promise().done(function(){ + i=i+1; + $("p:nth-child("+i+")").fadeIn('slow').delay(1000); + if(i==50){ + $("p:nth-child(49)").fadeOut('slow').promise().done(function () { + $('.cake').fadeIn('fast'); + }); + + } + else{ + msgLoop(i); + } + + }); + // body... + } + + msgLoop(0); + + }); +}); + + + + +//alert('hello'); \ No newline at end of file diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..1c31496 Binary files /dev/null and b/favicon.ico differ diff --git a/hbd.mp3 b/hbd.mp3 new file mode 100644 index 0000000..b5d01ee Binary files /dev/null and b/hbd.mp3 differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..0d9bba6 --- /dev/null +++ b/index.html @@ -0,0 +1,158 @@ + + + + + + + + Happy Birthday + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+

"

+
+
+

T

+
+
+

H

+
+
+

E

+
+
+

A

+
+
+

♥

+
+
+

"

+
+ + + + + +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

It may seem like another year flew by

+

but today is your special day!

+

Let's celebrate you and make it unforgettable.

+

Here's a little something to share in your happiness.

+

Thank you for everything, and may all your dreams come true this year.

+

Happy Birthday, Thea!

+
+
+
+
+
+ + + + + + + + + +
+
+ +
+ + +
+ + + + + + diff --git a/loading.css b/loading.css new file mode 100644 index 0000000..7902d8c --- /dev/null +++ b/loading.css @@ -0,0 +1,119 @@ +/* Absolute Center CSS Spinner */ +.loading { + position: fixed; + z-index: 99999; + height: 2em; + width: 2em; + overflow: show; + margin: auto; + top: 0; + left: 0; + bottom: 0; + right: 0; +} + +/* Transparent Overlay */ +.loading:before { + content: ''; + display: block; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0,0,0,0.3); +} + +/* :not(:required) hides these rules from IE9 and below */ +.loading:not(:required) { + /* hide "loading..." text */ + font: 0/0 a; + color: transparent; + text-shadow: none; + background-color: transparent; + border: 0; +} + +.loading:not(:required):after { + content: ''; + display: block; + font-size: 10px; + width: 1em; + height: 1em; + margin-top: -0.5em; + -webkit-animation: spinner 1500ms infinite linear; + -moz-animation: spinner 1500ms infinite linear; + -ms-animation: spinner 1500ms infinite linear; + -o-animation: spinner 1500ms infinite linear; + animation: spinner 1500ms infinite linear; + border-radius: 0.5em; + -webkit-box-shadow: #FFF 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, #FFF -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0; + box-shadow: #FFF 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, #FFF -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0; +} + +/* Animation */ + +@-webkit-keyframes spinner { + 0% { + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -ms-transform: rotate(0deg); + -o-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -ms-transform: rotate(360deg); + -o-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-moz-keyframes spinner { + 0% { + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -ms-transform: rotate(0deg); + -o-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -ms-transform: rotate(360deg); + -o-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-o-keyframes spinner { + 0% { + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -ms-transform: rotate(0deg); + -o-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -ms-transform: rotate(360deg); + -o-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes spinner { + 0% { + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -ms-transform: rotate(0deg); + -o-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -ms-transform: rotate(360deg); + -o-transform: rotate(360deg); + transform: rotate(360deg); + } +} \ No newline at end of file diff --git a/stylesheet.css b/stylesheet.css new file mode 100644 index 0000000..384a036 --- /dev/null +++ b/stylesheet.css @@ -0,0 +1,1314 @@ +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; +} +.container { + display: none; +} +.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('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('bulb.png'); + opacity: 0; + } + 50%{ + opacity: 1; + } + 100%{ + background-image: url('bulb_yellow.png'); + opacity: 1; + } +} +@-moz-keyframes bulb_glow_yellow { + 0%{ + background-image: url('bulb.png'); + opacity: 0; + } + 50%{ + opacity: 1; + } + 100%{ + background-image: url('bulb_yellow.png'); + opacity: 1; + } +} +@-o-keyframes bulb_glow_yellow { + 0%{ + background-image: url('bulb.png'); + opacity: 0; + } + 50%{ + opacity: 1; + } + 100%{ + background-image: url('bulb_yellow.png'); + opacity: 1; + } +} +@-ms-keyframes bulb_glow_yellow { + 0%{ + background-image: url('bulb.png'); + opacity: 0; + } + 50%{ + opacity: 1; + } + 100%{ + background-image: url('bulb_yellow.png'); + opacity: 1; + } +} +@keyframes bulb_glow_yellow { + 0%{ + background-image: url('bulb.png'); + opacity: 0; + } + 50%{ + opacity: 1; + } + 100%{ + background-image: url('bulb_yellow.png'); + opacity: 1; + } +} + +.bulb-glow-red { + background-image: url('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('bulb.png'); + opacity: 0; + } + 50%{ + opacity: 1; + } + 100%{ + background-image: url('bulb_red.png'); + opacity: 1; + } +} +@-moz-keyframes bulb_glow_red { + 0%{ + background-image: url('bulb.png'); + opacity: 0; + } + 50%{ + opacity: 1; + } + 100%{ + background-image: url('bulb_red.png'); + opacity: 1; + } +} +@-o-keyframes bulb_glow_red { + 0%{ + background-image: url('bulb.png'); + opacity: 0; + } + 50%{ + opacity: 1; + } + 100%{ + background-image: url('bulb_red.png'); + opacity: 1; + } +} +@-ms-keyframes bulb_glow_red { + 0%{ + background-image: url('bulb.png'); + opacity: 0; + } + 50%{ + opacity: 1; + } + 100%{ + background-image: url('bulb_red.png'); + opacity: 1; + } +} +@keyframes bulb_glow_red { + 0%{ + background-image: url('bulb.png'); + opacity: 0; + } + 50%{ + opacity: 1; + } + 100%{ + background-image: url('bulb_red.png'); + opacity: 1; + } +} +.bulb-glow-blue { + background-image: url('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('bulb.png'); + opacity: 0; + } + 50%{ + opacity: 1; + } + 100%{ + background-image: url('bulb_blue.png'); + opacity: 1; + } +} +@-moz-keyframes bulb_glow_blue { + 0%{ + background-image: url('bulb.png'); + opacity: 0; + } + 50%{ + opacity: 1; + } + 100%{ + background-image: url('bulb_blue.png'); + opacity: 1; + } +} +@-o-keyframes bulb_glow_blue { + 0%{ + background-image: url('bulb.png'); + opacity: 0; + } + 50%{ + opacity: 1; + } + 100%{ + background-image: url('bulb_blue.png'); + opacity: 1; + } +} +@-ms-keyframes bulb_glow_blue { + 0%{ + background-image: url('bulb.png'); + opacity: 0; + } + 50%{ + opacity: 1; + } + 100%{ + background-image: url('bulb_blue.png'); + opacity: 1; + } +} +@keyframes bulb_glow_blue { + 0%{ + background-image: url('bulb.png'); + opacity: 0; + } + 50%{ + opacity: 1; + } + 100%{ + background-image: url('bulb_blue.png'); + opacity: 1; + } +} + +.bulb-glow-green { + background-image: url('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('bulb.png'); + opacity: 0; + } + 50%{ + opacity: 1; + } + 100%{ + background-image: url('bulb_green.png'); + opacity: 1; + } +} +@-moz-keyframes bulb_glow_green { + 0%{ + background-image: url('bulb.png'); + opacity: 0; + } + 50%{ + opacity: 1; + } + 100%{ + background-image: url('bulb_green.png'); + opacity: 1; + } +} +@-o-keyframes bulb_glow_green { + 0%{ + background-image: url('bulb.png'); + opacity: 0; + } + 50%{ + opacity: 1; + } + 100%{ + background-image: url('bulb_green.png'); + opacity: 1; + } +} +@-ms-keyframes bulb_glow_green { + 0%{ + background-image: url('bulb.png'); + opacity: 0; + } + 50%{ + opacity: 1; + } + 100%{ + background-image: url('bulb_green.png'); + opacity: 1; + } +} +@keyframes bulb_glow_green { + 0%{ + background-image: url('bulb.png'); + opacity: 0; + } + 50%{ + opacity: 1; + } + 100%{ + background-image: url('bulb_green.png'); + opacity: 1; + } +} + +.bulb-glow-pink { + background-image: url('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('bulb.png'); + opacity: 0; + } + 50%{ + opacity: 1; + } + 100%{ + background-image: url('bulb_pink.png'); + opacity: 1; + } +} +@-moz-keyframes bulb_glow_pink { + 0%{ + background-image: url('bulb.png'); + opacity: 0; + } + 50%{ + opacity: 1; + } + 100%{ + background-image: url('bulb_pink.png'); + opacity: 1; + } +} +@-o-keyframes bulb_glow_pink { + 0%{ + background-image: url('bulb.png'); + opacity: 0; + } + 50%{ + opacity: 1; + } + 100%{ + background-image: url('bulb_pink.png'); + opacity: 1; + } +} +@-ms-keyframes bulb_glow_pink { + 0%{ + background-image: url('bulb.png'); + opacity: 0; + } + 50%{ + opacity: 1; + } + 100%{ + background-image: url('bulb_pink.png'); + opacity: 1; + } +} +@keyframes bulb_glow_pink { + 0%{ + background-image: url('bulb.png'); + opacity: 0; + } + 50%{ + opacity: 1; + } + 100%{ + background-image: url('bulb_pink.png'); + opacity: 1; + } +} + +.bulb-glow-orange { + background-image: url('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('bulb.png'); + opacity: 0; + } + 50%{ + opacity: 1; + } + 100%{ + background-image: url('bulb_orange.png'); + opacity: 1; + } +} +@-moz-keyframes bulb_glow_orange { + 0%{ + background-image: url('bulb.png'); + opacity: 0; + } + 50%{ + opacity: 1; + } + 100%{ + background-image: url('bulb_orange.png'); + opacity: 1; + } +} +@-o-keyframes bulb_glow_orange { + 0%{ + background-image: url('bulb.png'); + opacity: 0; + } + 50%{ + opacity: 1; + } + 100%{ + background-image: url('bulb_orange.png'); + opacity: 1; + } +} +@-ms-keyframes bulb_glow_orange { + 0%{ + background-image: url('bulb.png'); + opacity: 0; + } + 50%{ + opacity: 1; + } + 100%{ + background-image: url('bulb_orange.png'); + opacity: 1; + } +} +@keyframes bulb_glow_orange { + 0%{ + background-image: url('bulb.png'); + opacity: 0; + } + 50%{ + opacity: 1; + } + 100%{ + background-image: url('bulb_orange.png'); + opacity: 1; + } +} + + +/*after music*/ +.bulb-glow-yellow-after { + background-image: url('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('bulb.png'); + } + 50%{ + background-image: url('bulb_yellow.png'); + } + 100%{ + background-image: url('bulb.png'); + } +} +@-moz-keyframes bulb_glow_yellow_after { + 0%{ + background-image: url('bulb.png'); + } + 50%{ + background-image: url('bulb_yellow.png'); + } + 100%{ + background-image: url('bulb.png'); + } +} +@-o-keyframes bulb_glow_yellow_after { + 0%{ + background-image: url('bulb.png'); + } + 50%{ + background-image: url('bulb_yellow.png'); + } + 100%{ + background-image: url('bulb.png'); + } +} +@-ms-keyframes bulb_glow_yellow_after { + 0%{ + background-image: url('bulb.png'); + } + 50%{ + background-image: url('bulb_yellow.png'); + } + 100%{ + background-image: url('bulb.png'); + } +} +@keyframes bulb_glow_yellow_after { + 0%{ + background-image: url('bulb.png'); + } + 50%{ + background-image: url('bulb_yellow.png'); + } + 100%{ + background-image: url('bulb.png'); + } +} + +.bulb-glow-red-after { + background-image: url('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('bulb.png'); + } + 50%{ + background-image: url('bulb_red.png'); + } + 100%{ + background-image: url('bulb.png'); + } +} +@-moz-keyframes bulb_glow_red_after { + 0%{ + background-image: url('bulb.png'); + } + 50%{ + background-image: url('bulb_red.png'); + } + 100%{ + background-image: url('bulb.png'); + } +} +@-o-keyframes bulb_glow_red_after { + 0%{ + background-image: url('bulb.png'); + } + 50%{ + background-image: url('bulb_red.png'); + } + 100%{ + background-image: url('bulb.png'); + } +} +@-ms-keyframes bulb_glow_red_after { + 0%{ + background-image: url('bulb.png'); + } + 50%{ + background-image: url('bulb_red.png'); + } + 100%{ + background-image: url('bulb.png'); + } +} +@keyframes bulb_glow_red_after { + 0%{ + background-image: url('bulb.png'); + } + 50%{ + background-image: url('bulb_red.png'); + } + 100%{ + background-image: url('bulb.png'); + } +} + +.bulb-glow-blue-after { + background-image: url('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('bulb.png'); + } + 50%{ + background-image: url('bulb_blue.png'); + } + 100%{ + background-image: url('bulb.png'); + } +} +@-moz-keyframes bulb_glow_blue_after { + 0%{ + background-image: url('bulb.png'); + } + 50%{ + background-image: url('bulb_blue.png'); + } + 100%{ + background-image: url('bulb.png'); + } +} +@-o-keyframes bulb_glow_blue_after { + 0%{ + background-image: url('bulb.png'); + } + 50%{ + background-image: url('bulb_blue.png'); + } + 100%{ + background-image: url('bulb.png'); + } +} +@-ms-keyframes bulb_glow_blue_after { + 0%{ + background-image: url('bulb.png'); + } + 50%{ + background-image: url('bulb_blue.png'); + } + 100%{ + background-image: url('bulb.png'); + } +} +@keyframes bulb_glow_blue_after { + 0%{ + background-image: url('bulb.png'); + } + 50%{ + background-image: url('bulb_blue.png'); + } + 100%{ + background-image: url('bulb.png'); + } +} +.bulb-glow-green-after { + background-image: url('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('bulb.png'); + } + 50%{ + background-image: url('bulb_green.png'); + } + 100%{ + background-image: url('bulb.png'); + } +} + +@-moz-keyframes bulb_glow_green_after { + 0%{ + background-image: url('bulb.png'); + } + 50%{ + background-image: url('bulb_green.png'); + } + 100%{ + background-image: url('bulb.png'); + } +} +@-o-keyframes bulb_glow_green_after { + 0%{ + background-image: url('bulb.png'); + } + 50%{ + background-image: url('bulb_green.png'); + } + 100%{ + background-image: url('bulb.png'); + } +} +@-ms-keyframes bulb_glow_green_after { + 0%{ + background-image: url('bulb.png'); + } + 50%{ + background-image: url('bulb_green.png'); + } + 100%{ + background-image: url('bulb.png'); + } +} +@keyframes bulb_glow_green_after { + 0%{ + background-image: url('bulb.png'); + } + 50%{ + background-image: url('bulb_green.png'); + } + 100%{ + background-image: url('bulb.png'); + } +} +.bulb-glow-pink-after { + background-image: url('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('bulb.png'); + } + 50%{ + background-image: url('bulb_pink.png'); + } + 100%{ + background-image: url('bulb.png'); + } +} +@-moz-keyframes bulb_glow_pink_after { + 0%{ + background-image: url('bulb.png'); + } + 50%{ + background-image: url('bulb_pink.png'); + } + 100%{ + background-image: url('bulb.png'); + } +} +@-o-keyframes bulb_glow_pink_after { + 0%{ + background-image: url('bulb.png'); + } + 50%{ + background-image: url('bulb_pink.png'); + } + 100%{ + background-image: url('bulb.png'); + } +} +@-ms-keyframes bulb_glow_pink_after { + 0%{ + background-image: url('bulb.png'); + } + 50%{ + background-image: url('bulb_pink.png'); + } + 100%{ + background-image: url('bulb.png'); + } +} +@keyframes bulb_glow_pink_after { + 0%{ + background-image: url('bulb.png'); + } + 50%{ + background-image: url('bulb_pink.png'); + } + 100%{ + background-image: url('bulb.png'); + } +} +.bulb-glow-orange-after { + background-image: url('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('bulb.png'); + } + 50%{ + background-image: url('bulb_orange.png'); + } + 100%{ + background-image: url('bulb.png'); + } +} +@-moz-keyframes bulb_glow_orange_after { + 0%{ + background-image: url('bulb.png'); + } + 50%{ + background-image: url('bulb_orange.png'); + } + 100%{ + background-image: url('bulb.png'); + } +} +@-o-keyframes bulb_glow_orange_after { + 0%{ + background-image: url('bulb.png'); + } + 50%{ + background-image: url('bulb_orange.png'); + } + 100%{ + background-image: url('bulb.png'); + } +} +@-ms-keyframes bulb_glow_orange_after { + 0%{ + background-image: url('bulb.png'); + } + 50%{ + background-image: url('bulb_orange.png'); + } + 100%{ + background-image: url('bulb.png'); + } +} +@keyframes bulb_glow_orange_after { + 0%{ + background-image: url('bulb.png'); + } + 50%{ + background-image: url('bulb_orange.png'); + } + 100%{ + background-image: url('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('b1.png'); +} +#b2,#b22 { + background-image: url('b2.png'); +} +#b3,#b33 { + background-image: url('b3.png'); +} +#b4,#b44{ + background-image: url('b4.png'); +} +#b5,#b55{ + background-image: url('b5.png'); +} +#b6,#b66{ + background-image: url('b6.png'); +} +#b7,#b77{ + background-image: url('b7.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: 9999; +} +.control-panel { + position: fixed; + bottom: 0; + padding:10px 0px 10px 0px; +} +#play, #bannar_coming, #balloons_flying,#cake_fadein,#light_candle,#wish_message,#story { + display: none; +} + +.cake-cover { + margin-top: 50px; +} + + + +.message { + margin-top: 200px; + display: none; +} +.message p { + font-family: 'Signika', sans-serif; + font-size: 30px; + text-transform: uppercase; + color: #C4515C; + text-shadow: 2px 2px 2px #FFF; + display: none; + font-weight: bold; +} + +.btn-primary { + border-color: #466baf; + padding: 10px; + text-transform: uppercase; + font-family: 'Signika', sans-serif; + font-weight: 700; + color: #fff; + background-color: #466baf; +} + .btn-primary:hover, + .btn-primary:focus, + .btn-primary:active, + .btn-primary.active, + .open .dropdown-toggle.btn-primary { + border-color: #fff; + color: #fff; + background-color: #466baf; + } + + + + /*controlling tablet width*/ + /*@media only screen and (max-width: 720px){ + .container { + -webkit-transform: scale(0.9); + } + }*/ \ No newline at end of file diff --git a/uggreen.png b/uggreen.png new file mode 100644 index 0000000..a0c8cba Binary files /dev/null and b/uggreen.png differ diff --git a/vine.png b/vine.png new file mode 100644 index 0000000..8cdfdb6 Binary files /dev/null and b/vine.png differ