html, body {
    max-width: 100%;
    overflow-x: hidden;
	overflow-y: hidden;
}

body{
    background: #0687dc;
    background: linear-gradient(90deg, rgba(6,135,220,1) 0%, rgba(152,212,226,1) 100%);
	min-height: 100%;
}

html {
	height: 100%;
}

.wrapper {
    position: relative;
}

.main-container{
    display: flex;
    flex-direction: row;
    flex-grow: 6;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    height: 90vh;
    margin: 0 auto;
    padding-bottom: 15vh;
    z-index: 3;
    position: relative;
}

.container-bar {
	width: 200px;
	border: solid;
	border-color: rgba(255, 255, 255, 1);
	border-width: 1px;
	border-radius: 15px;
	background-color: #ffffff;
	-webkit-filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.4)) ;
	filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.4));	
}

.progresss-bar {
	height: 10px;
	border-radius: 15px;
}

.blue div {
	background-color: #49aee4;   
}

.stripes div {
	-webkit-background-size: 30px 30px;
	-moz-background-size: 30px 30px;
	background-size: 30px 30px;			
	background-image: -webkit-gradient(linear, left top, right bottom,
						color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
						color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
						color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
						to(transparent));
	background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);            
	
	-webkit-animation: animate-stripes 3s linear infinite;
	-moz-animation: animate-stripes 3s linear infinite;       		
}

@-webkit-keyframes animate-stripes { 
	0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}


@-moz-keyframes animate-stripes {
	0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}



 
.left-anim{
width: 15%;
}

.center-anim{
    width: 450px;
}

.right-anim{
width: 15%;
}

.sdw-logo{
/*-webkit-filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.4)) ;
filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.4));*/
-webkit-animation-name: demow-logo;
animation-name: demow-logo;
-webkit-animation-duration:1s;
animation-duration: 1s;
-webkit-animation-delay: 1s;
animation-delay: 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-transform: scale(0,0);
transform: scale(0,0);
}

@-webkit-keyframes demow-logo {
    0% {-webkit-transform: scale(0,0);}
    100% {-webkit-transform: scale(1,1);}
}

@keyframes demow-logo {
    0%{transform: scale(0,0);}
    100%{transform: scale(1,1);}
}

.sdw-logo-h{
    -webkit-transition: transform .3s;
    transition: transform .3s;
	padding-left: 18px;
}

.sdw-logo-h:hover {
    transform: scale(1.1);
}

.progresss {
	-webkit-animation-name: progresss;
	animation-name: progresss;
	-webkit-animation-duration:6s;
	animation-duration: 6s;
	-webkit-animation-delay: 4.5s;
	animation-delay: 4.5s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-transform: scale(0,0);
	transform: scale(0,0);
}

@-webkit-keyframes progresss {
    0% {-webkit-transform: scale(0,0); display: none; opacity: 0;}
	30% {display: block; opacity: 0; }
    100% {-webkit-transform: scale(1,1); display: block; opacity: 1;}
}

@keyframes progresss {
    0% {-webkit-transform: scale(0,0); display: none; opacity: 0;}
	30% {display: block; opacity: 0; }
    100% {-webkit-transform: scale(1,1); display: block; opacity: 1;}
}

/*** ANIM QUENOUILLE PELLE ***/

/*Lets start with the cloud formation rather*/

/*The container will also serve as the SKY*/

body {
	/*To hide the horizontal scroller appearing during the animation*/
	overflow: hidden;
}

.pelle {
 width: 50px;
 z-index: 1;
 position: absolute;
 -webkit-filter: drop-shadow(0px 4px 18px rgba(255, 255, 255, 0.5)) ;
    filter: drop-shadow(0px 4px 18px rgba(255, 255, 255, 0.5));
}

.quenouille {
    width: 50px;
    z-index: 2;
    position: absolute;
    -webkit-filter: drop-shadow(0px 4px 18px rgba(255, 255, 255, 0.5)) ;
    filter: drop-shadow(0px 4px 18px rgba(255, 255, 255, 0.5));
    margin-top: 1000px;
}

.surprise {
	width: 40px;
	z-index: 1;
	position: absolute;
	-webkit-filter: drop-shadow(0px 4px 18px rgba(255, 255, 255, 0.5)) ;
	   filter: drop-shadow(0px 4px 18px rgba(255, 255, 255, 0.5));
	   padding-left: 100%;
	   margin-top: 90vh;
	   transform: scale(0.7) ;
   }

.explosion {
	width: 100%;
	z-index: 0;
	position: absolute;

}

/* 
.x1 {
    
	-webkit-animation: moveQP 8.5s linear infinite;
	-moz-animation: moveQP 8.5s linear infinite;
	-o-animation: moveQP 8.5s linear infinite;
    animation: moveQP 8.5s linear infinite;
}

.x2 {
	
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0.6;

	-webkit-animation: moveQP 7s linear infinite;
	-moz-animation: moveQP 7s linear infinite;
	-o-animation: moveQP 7s linear infinite;
    animation: moveQP 7s linear infinite;
}

.x3 {
	
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.8; 
	
	-webkit-animation: moveQP 5.5s linear infinite;
	-moz-animation: moveQP 5.5s linear infinite;
	-o-animation: moveQP 5.5s linear infinite;
    animation: moveQP 5.5s linear infinite;
}

.x4 {
	
	-webkit-transform: scale(0.75);
	-moz-transform: scale(0.75);
	transform: scale(0.75);
	opacity: 0.75; 
	
	-webkit-animation: moveQP 4.2s linear infinite;
	-moz-animation: moveQP 4.2s linear infinite;
	-o-animation: moveQP 4.2s linear infinite;
    animation: moveQP 4.2s linear infinite;
}

.x5 {
	
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.8;
	
	-webkit-animation: moveQP 3s linear infinite;
	-moz-animation: moveQP 3s linear infinite;
	-o-animation: moveQP 3s linear infinite;
    animation: moveQP 3s linear infinite;
}
*/

.p1 {
    left: 1800px;
    
    -webkit-animation: moveQP 8.5s linear infinite;
	-moz-animation: moveQP 8.5s linear infinite;
	-o-animation: moveQP 8.5s linear infinite;
    animation: moveQP 8.5s linear infinite;
}

.p2 {
    left: 680px;
    -webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0.6; 
	-webkit-animation: moveQP 7s linear infinite;
	-moz-animation: moveQP 7s linear infinite;
	-o-animation: moveQP 7s linear infinite;
    animation: moveQP 7s linear infinite;   
}

.p3 {
	left: 1025px;
    -webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.8;
	-webkit-animation: moveQP 5.7s linear infinite;
	-moz-animation: moveQP 5.7s linear infinite;
	-o-animation: moveQP 5.7s linear infinite;
    animation: moveQP 5.7s linear infinite;
}

.p4 {
	left: 1455px; 
    -webkit-transform: scale(0.75);
	-moz-transform: scale(0.75);
	transform: scale(0.75);
	opacity: 0.75;
	-webkit-animation: moveQP 4.2s linear infinite;
	-moz-animation: moveQP 4.2s linear infinite;
	-o-animation: moveQP 4.2s linear infinite;
    animation: moveQP 4.2s linear infinite;
}

.p5 {
	left: 310px;
    -webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.8; 
	-webkit-animation: moveQP 3s linear infinite;
	-moz-animation: moveQP 3s linear infinite;
	-o-animation: moveQP 3s linear infinite;
    animation: moveQP 3s linear infinite; 
}

.q1 {
    left: 465px;
    
    animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
    -webkit-animation: moveQP 8.1s linear infinite;
	-moz-animation: moveQP 8.1s linear infinite;
	-o-animation: moveQP 8.1s linear infinite;
    animation: moveQP 8.1s linear infinite;
}

.q2 {
    left : 110px;
    animation-delay: .7s;
    -webkit-animation-delay: .7s;
    -webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0.6; 
	-webkit-animation: moveQP 7.3s linear infinite;
	-moz-animation: moveQP 7.3s linear infinite;
	-o-animation: moveQP 7.3s linear infinite;
    animation: moveQP 7.3s linear infinite; 
}

.q3 {
    left: 1585px;
    
    animation-delay: .6s;
    -webkit-animation-delay: .6s;
    -webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.8;
	-webkit-animation: moveQP 5.2s linear infinite;
	-moz-animation: moveQP 5.2s linear infinite;
	-o-animation: moveQP 5.2s linear infinite;
    animation: moveQP 5.2s linear infinite;
}

.q4 {
    left: 1225px;
    animation-delay: .5s;
    -webkit-animation-delay: .5s;
    -webkit-transform: scale(0.75);
	-moz-transform: scale(0.75);
	transform: scale(0.75);
	opacity: 0.75;
	-webkit-animation: moveQP 4.6s linear infinite;
	-moz-animation: moveQP 4.6s linear infinite;
	-o-animation: moveQP 4.6s linear infinite;
    animation: moveQP 4.6s linear infinite;
}

.q5 {
    left: 795px;
    animation-delay: .2s;
    -webkit-animation-delay: .2s;
    -webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.8; 
	-webkit-animation: moveQP 2.7s linear infinite;
	-moz-animation: moveQP 2.7s linear infinite;
	-o-animation: moveQP 2.7s linear infinite;
    animation: moveQP 2.7s linear infinite; 
}

@-webkit-keyframes moveQP {
	0% {margin-top: 1000px;}
	100% {margin-top: -250px;}
}
@-moz-keyframes moveQP {
	0% {margin-top: 1000px;}
	100% {margin-top: -250px;}
}
@-o-keyframes moveQP {
	0% {margin-top: 1000px;}
	100% {margin-top: -250px;}
}

@keyframes moveQP {
    0% {margin-top: 1000px;}
	100% {margin-top: -250px;}
}


@media screen and (max-width:500px) {
	.anim-mob-no {
	  display: none!important;
	}

	.main-container{
		padding-bottom: 8vh!important;
	}

	.container-bar {
		width: 150px!important;
	}
	
	.progresss-bar {
		height: 8px;
		border-radius: 15px;
	}
  }

  @media screen and (min-width:500px) {
	.surprise {
	  display: none!important;
	}
  }

/********