/*---------------------------------DRAG'N'DROP--------------------------------*/

.draggable {
	position: absolute;
	cursor : pointer;
}

.droppable {
}

/*---------------------------------FOND--------------------------------*/
	* {
	margin : 0;
	padding : 0;

	}
	
	html {
	margin:0;
	padding:0;
	background: rgba(0,0,0,1);
	}

	body{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	overflow-x:hidden;
	overflow-y:hidden;
	/*font-family: 'Lato', Calibri, Arial, sans-serif;*/
	background: rgba(0,0,0,1);
	}
		
/*---------------------------------ZONES--------------------------------*/
	
header {
	width:100%;
	height:45px;
	/*background: rgba(0,0,0,0.9);*/
	background-color : #302d28;
	position:fixed;
	z-index:50;
}

#container {
	position:fixed;
	width: 99%;
	height:100%;
	margin: auto;
	left:0.5%;
	background: url(../img/kitchen.png) no-repeat center fixed; 
		  -webkit-background-size: contain; /* pour Chrome et Safari */
		  -moz-background-size: contain; /* pour Firefox */
		  -o-background-size: contain; /* pour Opera */
		  background-size: contain; /* version standardisée */
}


/*---------------------------------ELEMENTS--------------------------------*/
#element_pot{
position:fixed;
z-index:100;
top:8%;
left:2%;
width:13%;
height:auto;
}

#element_conserve{
position:fixed;
z-index:100;
top:11.5%;
left:37.5%;
width:6%;
height:auto;
}

#element_fruit{
position:fixed;
z-index:100;
bottom:23%;
left:30%;
width:13%;
height:auto;
}

#monster1 {
	/*crevette*/
	width:8%;
	height: auto;
	top:18%;
	left:35%;
}

#monster2 {
	/*coq*/
	width:5%;
	height: auto;
	top:32%;
	right:10%;
}

#monster3 {
	/*tortue*/
	width:7%;
	height: auto;
	top:10%;
	left:10%;

}

#monster4 {
	/*autruc*/
	width:6%;
	height:auto;
	bottom:23%;
	right:15%;
}

#monster5 {
	/*dino*/
	width:8%;
	height: auto;
	bottom:22%;
	left:37%;
}

#monster6 {
	/*diablotin*/
	width:5%;
	height: auto;
	bottom:38%;
	left:3%;
}


/*---------------------------------HEADER--------------------------------*/
button {
	border: none;
	padding: 0.6em 1.2em;
	background: #504d48;
	color: #fff;
	font-family: "idolwildregular", Helvetica, sans-serif;
	font-size: 0.8em;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	display: inline-block;
	margin: 3px 2px;
	border-radius: 2px;
	width:auto;
}

button:hover {
	background: rgba(0,0,0,1);
}

#header1{
width:30%;
float:left;
}

#header3{
width:30%;
float:right;
}

#header3 button{
margin-top: 7px;
float:right;
margin-right : 3px;
}

#header1 button{
margin-top: 7px;
margin-left : 3px;
}

#header2 {
width:30%;
float:left;
color:white;
text-align: center;
font-size: 2.5em;
font-family: "idolwildregular", Helvetica, sans-serif;
margin-right:4%;
margin-left:4%;
}

.fb_iframe_widget {
margin-right: 20px;
}

#twitter-widget-0 {
margin-top : 5px;}


/*---------------------------------MIXER--------------------------------*/

#mixer {
	width: 33%;
	position:fixed;
	right:20%;
	bottom:1%;
}

#imgmixer{
	margin:0;
	padding:0;
	z-index : 1;
	height:100%;
	width:100%;
}


#dropzone {
	position: absolute;
	height:40%;
	width:30%;
	left:40%;
	top:10%;
	z-index: 30;	
}


#button{
background:url("../img/button_push.png") no-repeat center center;
			-webkit-background-size: cover;
			-moz-background-size: cover; 
			-o-background-size: cover; 
			background-size: cover;
position:absolute;
cursor:pointer;
z-index:50;
height:10%;
width:12%;
top:66%;
left:47%;
}

#button:hover {
background:url("../img/button.png") no-repeat center center;
			-webkit-background-size: cover;
			-moz-background-size: cover; 
			-o-background-size: cover; 
			background-size: cover;
}

/*---------------------------------DESTRUCTION--------------------------------*/

#objectDestruction{
	z-index: 40;
	position:absolute;
	width:10%;
	height:auto;
}

#objectEnd{
	z-index: 40;
	width:10%;
	position:absolute;
	height:auto;
}

/*---------------------------------ANIMATION DESTRUCTION--------------------------------*/
.anim_destruction{ 
-webkit-animation-name: anim_destruction;
-webkit-animation-duration:1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;

}

   @-webkit-keyframes anim_destruction {
	  0% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1) rotateY(0deg);
    -moz-transform: scale(1, 1) rotateY(0deg);
    -ms-transform: scale(1, 1) rotateY(0deg);
    -o-transform: scale(1, 1) rotateY(0deg);
    transform: scale(1, 1) rotateY(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: scale(0, 0) rotateY(360deg);
    -moz-transform: scale(0, 0) rotateY(360deg);
    -ms-transform: scale(0, 0) rotateY(360deg);
    -o-transform: scale(0, 0) rotateY(360deg);
    transform: scale(0, 0) rotateY(360deg);
	
  }	
		
	}