/* http://meyerweb.com/eric/tools/css/reset/ */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

::selection {background:#414149;  color:#ffffff;}
::-moz-selection  {background:#414149;  color:#ffffff;}
img::selection {background: transparent;} 
img::-moz-selection   { background: transparent; } 

html, body {
	min-height: 100%;
	height: 100%;
}

body {
	font-family:  "helvetica";
	color:#414149;
	background-color: #121215;
	font-size: 16px;
	line-height:22px;
	text-align:center;
	display: table;
	width: 100%;
	overflow:hidden;
}

.clear {clear:both;}
b {font-weight:bold;}
i {font-style:italic;}



canvas#myImg {
	margin-top:0px; 
	display:none;
	position:fixed;
	z-index:99;
	background:#121215;
	margin:auto; 
	overflow:hidden; 
	width:500px;
	height:500px;
	top:50%;
	left:50%;
	margin-top:-300px;
	margin-left:-300px;
	border-radius:1000px;
	border:#121215 solid 50px;
}

#file-input {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}


.screen_waiting {}
.screen_waiting #myImg{display:block; }


/* Dragging a photo over the window: the whole page is the drop target, so the
   feedback is on the "feed me food" label rather than on an outlined box. */
label[for="file-input"] {
	transition: transform 150ms ease-out;
}
body.dragging label[for="file-input"] {
	transform: scale(1.1);
}
body.dragging svg#feed-me-food-svg path {
	fill:#ffffff;
}


.fullscreen {
	display:table-cell;
	vertical-align: middle;
}
.container {display:none; position:relative;}

  .buttons {
	position:absolute;
	top:5px;
	left:5px;
  }
  
  button{
	border:0px solid #49494a; padding:4px 6px; cursor:pointer;font-size:9px;background:#121212; color:white; font-weight:bold; text-transform:uppercase;outline:0;
  }
  button:hover {
	color:#121212; background:white;
  }
  button:active {
	color:white; background:#ef5d5e; cursor:wait;
  }
  button:disabled {
	background:#121212; color:white; opacity:.22; cursor:default; point-events:none;
  }
  .intro {
	height:100%;
	width:100%;
	max-height:15cm;
	max-width:15cm;
	margin: 0 auto;
  }
  
  .intro svg {
	top: 0%;
	left: 0%;
	position: absolute;
	max-height:100%;
	max-width:100%;
	width: 100%;
	height: 100%;
	fill: #ffffff;
	transform: translate(0, 0);
  }
  .intro svg {
  opacity:0;
	transition:opacity 2s;
  }
 svg path { fill:#ffffff; 
  transition:opacity 1s;}
  
  svg .yellow {
	fill:#fadd37;
  }
   svg .green {
	fill:#27aba0;
	animation: flicker2 2.3s infinite linear;
  } 
 svg .red {
	fill:#ef5d5e;
	animation: flicker1 2s infinite linear;
  }
  
  svg .blue {
	fill:#168ed1;
	 animation: upDown 2s infinite ease-in-out;
  }
  
  .intro svg.active  { opacity:1;}
  
  .intro svg.active path.active  { 
	  animation: firstUp .45s forwards ease-out;
  }
  
  svg#skull-svg {
	  margin:0px auto;
	  width:330px;
  }
  svg path {
	  fill:#ffffff;
	}
	
	body.heat svg path {
		
	}

  svg#skull-svg g.skull-top {
    transform: translate(0px, -30px);
  }




  svg#skull-svg path.jaw {
		transition: .5s transform ease-in-out;
		transform: translate(0px, -30px);
	}
	
	svg#skull-svg.active path.jaw {
		transform: translate(0px, 90px);
	}

	svg#feed-me-food-svg {
		height:auto;
		margin:auto;
		width:160px;
		transition:transform .1s,width .1s,opacity .5s ;
		position:relative;
		opacity:0;
	
	}
	.active svg#feed-me-food-svg {	
		width:160px;
		opacity:1;
	}
	svg#feed-me-food-svg:hover  {
		width:170px;
		transform: translate(-0px, -3px);
	}
	svg#feed-me-food-svg:active  {
		/* width:190px;
		transform: translate(-5px, -3px); */
	}

	svg#feed-me-food-svg:hover path  {
		fill:#fadd37;
	}
	svg#feed-me-food-svg:active path  {
		fill:#ffffff;
	}

	label[for="file-input"] {
		position:absolute;
		cursor:pointer;
		left:0;
		width:185px;
		margin-left:-90px;
		left:50%; 
		top:50%;
		margin-top:120px;
	} 


	svg#feed-me-food-svg path {
		fill:#ef5d5e;
	
	}

	.response-message {
		display:block;
		padding:0 30px 30px;
		color:white;
		font-size:20px;
		font-weight:bold;
		bottom: 0px;
    position: absolute;
		width:100%;
		box-sizing: border-box; 
		pointer-events:none;
	}
	.vomit-container {display:none;}

	.vomit .vomit-container {
		display:block;
		width:120px;
		margin-left:-60px;
		left:50%; 
		top:50%;
		margin-top:92px;
		position:absolute;
		z-index: -1;
	}
	.vomit-1 {
		position:absolute;
		height:300px;
		width:100px;
		margin:auto;
		background:url(../images/vomit1.png);
		background-repeat: repeat;
		background-position: 0 0;
		background-size:  100% auto;
		animation: animatedVomit 28s linear infinite;
		left:10px;
		top:0;
	}

	.vomit-2 {
		top:0;
		position:absolute;
		height:300px;
		width:120px;
		margin:auto;
		background:url(../images/vomit2.png);
		background-repeat: repeat;
		background-position: 0 0;
		background-size:  100% auto;
		animation: animatedVomit 40s linear infinite;
	}



/* //////////////////////////// MEDIA QUERIES ///////////////////////////////// */


@media only screen and (max-width: 768px) {

	svg#skull-svg {
	  margin:0px auto;
	  width:200px;
  }
	

	svg#feed-me-food-svg {
		width:100px;
	}
	.active svg#feed-me-food-svg {	
		width:120px;
		opacity:1;
	}
	svg#feed-me-food-svg:hover  {
		width:130px;
		transform: translate(-5px, -2px);
	}
	svg#feed-me-food-svg:active  {
		/* width:110px;
		transform: translate(2.5px, 1px); */
	}


	label[for="file-input"] {
		width:120px;
		margin-left:-60px;
		margin-top:70px;
	} 


	svg#skull-svg.active path.jaw {
		transform: translate(0px, 120px);
	}
	canvas#myImg {
		width:300px;
		height:300px;
		margin-top:-200px;
		margin-left:-200px;
	}

	.response-message {
		bottom: 30px;
	}

	.vomit .vomit-container {
    display: block;
		width: 80px;
    margin-left: -40px;
    left: 50%;
    top: 50%;
    margin-top: 55px;
	}

	.vomit-1 {
		width:70px;
		left:5px;
	}
	.vomit-2 {
		width:80px;
	}

}





/* //////////////////////////// ANIMATIONS ///////////////////////////////// */


@keyframes upDown {
	0% {transform: translate(0px, 0px);}
	50% {transform: translate(0px, 10px);}
  }


@keyframes firstUp {
	0% {transform: translate(0px, 0px); opacity:1;}
  70% {opacity:0;}
	100% {transform: translate(0px, -300px);opacity:0; }
  }

@keyframes flicker1 {
	0% { opacity: .9;}
  10% { opacity: .7;}
	75% {opacity: 1;}
   90% {opacity: .95;}
  100% {opacity: .75;}
}
@keyframes flicker2 {
  15% { opacity: 1;}
	35% {opacity: .8;}
   65% {opacity: .95;}
  100% {opacity: .75;}
}

@keyframes animatedVomit {
  from {background-position: 0 0;}
  to {background-position:0 10000px;}
}