/*
*	html5 doctor css reset | http://html5doctor.com/html-5-reset-stylesheet
*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}


.element-animation{

}

@keyframes fire{
	0% {
		transform: rotate(0deg);
	}
	10% {
		transform: rotate(10deg);
	}
	50% {
		transform: rotate(-10deg);
	}
	100% {
		transform:	rotate(0deg);
	}
}

@-moz-keyframes fire{
	0% {
		-moz-transform: rotate(0deg);
	}
	10% {
		-moz-transform: rotate(10deg);
	}
	50% {
		-moz-transform: rotate(-10deg);
	}
	100% {
		-moz-transform:	rotate(0deg);
	}
}

@-webkit-keyframes fire {
	0% {
		-webkit-transform: rotate(0deg);
	}
	10% {
		-webkit-transform: rotate(10deg);
	}
	50% {
		-webkit-transform: rotate(-10deg);
	}
	100% {
		-webkit-transform:	rotate(0deg);
	}
}

@-o-keyframes fire {
	0% {
		-o-transform: rotate(0deg);
	}
	10% {
		-o-transform: rotate(10deg);
	}
	50% {
		-o-transform: rotate(-10deg);
	}
	100% {
		-o-transform:	rotate(0deg);
	}
}

@-ms-keyframes fire {
	0% {
		-ms-transform: rotate(0deg);
	}
	10% {
		-ms-transform: rotate(10deg);
	}
	50% {
		-ms-transform: rotate(-10deg);
	}
	100% {
		-ms-transform:	rotate(0deg);
	}
}






html, body {
	background: #1e1c18;
}

body{
	position: relative;
}

.anniv{
	position: relative;
	left: 0;
	right: 0;
	padding-top: 105%
}

	h1{
		opacity: 0;
		color: white;
		text-align: center;
		position: absolute;
		top: 10%;
		left: 10%;
		right: 10%;
		font-size: 12vw;
		line-height: 1.2;
		font-family: 'Open Sans', Tahoma, sans-serif;
		font-weight: 100;

		-webkit-transition-duration: .5s;
		-o-transition-duration: .5s;
		transition-duration: .5s;
	}

	.gateau{
		position: absolute;
		top: 40%;
		left: 0;
		right: 0;
		background: url('imgs/GateauOptim.svg') no-repeat;
		background-position: center bottom;
		padding-top: 65%;
		z-index: 100;
	}

	.bougies{
		position: absolute;
		top: 40%;
		left: 17%;
		right: 14%;
		height: 20%;
	}

		.bougiesContainer{
			position: relative;
			height: 100%;
			width: 100%;
		}

			.bougie{
				position: absolute;
				height: 100%;
				background: url('imgs/Bougie.svg') no-repeat;
				background-position: center bottom;
			}

				.flamme{
					position: absolute;
					width: 100%;
					height: 80%;
					bottom: 0;
					z-index: 200;
				}

					.flamme.off .flamme1, .flamme.off .flamme2, .flamme.off .flamme3, .flamme.off .flamme4{
						opacity: 0;
					}

					.flamme1, .flamme2, .flamme3, .flamme4{
						position: absolute;
						background-position: center bottom;
						width: 100%;
						height: 57%;
						opacity: 1;

						animation: fire linear 3s;
						animation-iteration-count: infinite;
						transform-origin: 50% 50%;
						-webkit-animation: fire linear 3s;
						-webkit-animation-iteration-count: infinite;
						-webkit-transform-origin: 50% 50%;
						-moz-animation: fire linear 3s;
						-moz-animation-iteration-count: infinite;
						-moz-transform-origin: 50% 50%;
						-o-animation: fire linear 3s;
						-o-animation-iteration-count: infinite;
						-o-transform-origin: 50% 50%;
						-ms-animation: fire linear 3s;
						-ms-animation-iteration-count: infinite;
						-ms-transform-origin: 50% 50%;

						-webkit-transition-duration: .3s;
						-o-transition-duration: .3s;
						transition-duration: .3s;
					}

					.flamme1{
						background: url('imgs/Flamme1.svg') no-repeat;

					}


					.flamme2{
						background: url('imgs/Flamme2.svg') no-repeat;
						
					}


					.flamme3{
						background: url('imgs/Flamme3.svg') no-repeat;
						
					}


					.flamme4{
						background: url('imgs/Flamme4.svg') no-repeat;
						
					}

					.smoke{
						opacity: 0;
						position: absolute;
						background-position: center bottom;
						width: 100%;
						height: 77%;
						bottom: 52%;
						background: url('imgs/Smoke.svg') no-repeat;
						-webkit-transition-duration: .5s;
						-o-transition-duration: .5s;
						transition-duration: .5s;


						animation: fire linear 10s;
						animation-iteration-count: infinite;
						transform-origin: 50% 100%;
						-webkit-animation: fire linear 10s;
						-webkit-animation-iteration-count: infinite;
						-webkit-transform-origin: 50% 100%;
						-moz-animation: fire linear 10s;
						-moz-animation-iteration-count: infinite;
						-moz-transform-origin: 50% 100%;
						-o-animation: fire linear 10s;
						-o-animation-iteration-count: infinite;
						-o-transform-origin: 50% 100%;
						-ms-animation: fire linear 10s;
						-ms-animation-iteration-count: infinite;
						-ms-transform-origin: 50% 100%;
					}

					.flamme.off .smoke{
						opacity: 1;
					}

					.flamme.off.fin .smoke{
						opacity: 0;
					}