@font-face {
    font-family: 'bebas';
    src: url('BowlbyOne-Regular.otf');
    font-weight: normal;
    font-style: normal;
}

.decor-esquina{
	width: 50px;
	height:50px;
	position: absolute;
	top:-25px;
	left:-25px;
	pointer-events: none;
	z-index: 9999999;
}


#start_btn{

  position: relative;
  top:-148px;
  left: 0
  right: 0;
  margin: auto;
  width: 300px;
  height: 132px;
  z-index: 50;
  font-size: 64px;
  background: #6d9254;
  letter-spacing: 5px;
  background-image: -webkit-linear-gradient(top, #88b46a, #5b9e2b);
  background-image: -moz-linear-gradient(top, #88b46a, #5b9e2b);
  background-image: -ms-linear-gradient(top, #88b46a, #5b9e2b);
  background-image: -o-linear-gradient(top, #88b46a, #5b9e2b);
  background-image: linear-gradient(to bottom, #88b46a, #5b9e2b);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: "bebas";
  color: #ffffff;
  padding: 5px ;
  text-decoration: none;
  text-shadow: 0px 0px 2px rgba(150, 150, 150, 1);
}

#start_btn:hover {
  background: #93b080;
  text-decoration: none;
}

#screen_under{

	width: 1024px;
	height: 1024px;
	position: absolute;
	left: 0;
	top: 0;
	background: black;
	z-index: 10;
	opacity: 0.5;
   
}


#selected_color{

display: none;


}

#selected_tool{

display: none;

}

#selected_size{

display: none;
}

#wrap-canvas{
	
	position: relative;
	left:0;
	top:0;
	background:transparent;
	width: 1000px;
	height:960px;


}

.buttons_tools{
	width: 42px;
	height: 42px;
	background:transparent;
	border-radius: 8px;
	position: absolute;
	left: 65px;
	top:16px
}

.buttons_tools_left {
	width: 42px;
	height: 42px;
	background: transparent;
	border-radius: 8px;
	position: absolute;
	left: 823px;
	top:16px;
}


.buttons_tools_small{
	width: 22px;
	height: 22px;
	background: #000;
	border-radius: 8px;
	position: absolute;
	left: 200px;
	top:16px
}

.color_tray {

	width:84px;
	height: 22px;
	border-radius: 6px;
	background: #0000ff;
	position: absolute;
	z-index: 9999;
	left: 898px;
	top:320px;
	/*border: 1px solid #999;*/
	box-shadow: 2px 2px 2px rgba(0,0,0,0.5);

}

.lond{
	width: 15px;
	height: 15px;
	background: #000;
	border-radius: 50%;
	position: absolute;
	left:258px;

	top:16px;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}

.decor-top{
	width: 500px;
	height: 42px;
	position: absolute;
	top:50px;
	left:0;
	margin: auto;
	right: 0;
	z-index: 999;
		pointer-events: none;
}

.decor-bottom{
	width: 500px;
	height: 42px;
	position: absolute;
	bottom:50px;
	left:0;
	margin: auto;
	right: 0;
	z-index: 999;
		pointer-events: none;
}

.decor-left{
	width: 42px;
	height: 500px;
	position: absolute;
	top:0;
	left:0;
		pointer-events: none;
	bottom: 0;
	margin: auto;	
	z-index: 999;
}

.decor-right{
	width: 42px;
	height: 500px;
	position: absolute;
	top:0;
		pointer-events: none;
	left:0;
	bottom: 0;
	margin: auto;	
	z-index: 999;
}

#wrap-canvas #img-bar{
position: absolute;
right: 10px;
top: 10px;
margin: 0 auto;
  display: block;
  width: 100px;
  height: 900px;


}


#container_coljnr{

	position: absolute;
  	left:     0px;
  	right:     106px;
  	top:  0px;
  	bottom: 0px;
  	margin: auto;
  	height: auto;
  	background: transparent;
}


#canvas{

  	background:transparent;
  	position: absolute;
  	left:     0px;
  	right:     0px;
  	top:  -25px;
  	bottom: 0px;
  	margin: auto;
  	
 
}




#m_canvas{

  	background:transparent;
  	position: absolute;
  	left:     0px;
  	right:     0px;
  	top:  -25px;
  	bottom: 0px;
  	margin: auto;
  	
 
}

#print {

	position: absolute; top:62px; left: 940px;
	width: 38px;
	height: 38px;
	z-index: 25;
	background:transparent;

	
}

#more {

	position: absolute; top:80px; left: 512px;
	width: 41px;
	height: 41px;
	z-index: 5;
		background:red;


}

#back {

	position: absolute; top:120px; left: 522px;
	width: 41px;
	height: 41px;
	z-index: 5;
	background:red;

}

#tool_to_print_bn{

	position: absolute; top:17px; left: 940px;
	
	background:transparent;

	width: 38px;
	height: 38px;
	z-index: 25;

}

#envelope_alone{

	position: absolute; top:105px; left: 940px;
	 transform: scale(.90,.90);
	background:url(../sobre_alone.png);
	width: 42px;
    height: 42px;
	border-radius:12px;
	background-position: -10px;
    box-shadow: 0 0 13px #000;
    -webkit-border-radius:12px;
    -webkit-box-shadow: 0 0 8px #000;
	z-index: 5;

}

#printcol_alone{

	position: absolute; top:61px; left: 940px;
	 transform: scale(.90,.90);
	background:url(../printcol_alone.png);
	width: 42px;
    height: 42px;
	border-radius:12px;
	background-position: -10px;
    box-shadow: 0 0 13px #000;
    -webkit-border-radius:12px;
    -webkit-box-shadow: 0 0 8px #000;
	z-index: 5;

}

#printbn_alone{
position: absolute; top:17px; left: 940px;
background:url(../print_alone.png);
	width: 42px;
    height: 42px;
	border-radius:12px;
	 transform: scale(.90,.90);
	background-position: -10px -12px;
    box-shadow: 0 0 13px #000;
    -webkit-border-radius:12px;
    -webkit-box-shadow: 0 0 8px #000;
	z-index: 5;
}



#tool_to_clear_all{

	position: absolute; top:63px; left: 895px;
	 transform: scale(.90,.90);
	
	width: 38px;
	height: 38px;
	z-index: 25;

}

#puzzle_alone{

	position: absolute; top:16px; left: 896px;
	 transform: scale(.90,.90);
	background:url(../puzzle_alone.png);
	width: 42px;
    height: 42px;
	border-radius:12px;
	background-position: -10px;
    box-shadow: 0 0 13px #000;
    -webkit-border-radius:12px;
    -webkit-box-shadow: 0 0 8px #000;
	z-index: 5;

}

#tool_to_puzzles{

	position: absolute; top:17px; left: 895px;
	
	background:transparent;

	width: 38px;
	height: 38px;
	z-index: 25;

}



#tool_to_envelope{

	position: absolute; top:106px; left: 941px;
	
	background:transparent;

	width: 38px;
	height: 38px;
	z-index: 25;

}

.img_dec{

	border-radius:12px;
    box-shadow: 0 0 13px #000;
    -webkit-border-radius:12px;
    -webkit-box-shadow: 0 0 8px #000;

}

#tool_pinzell{
	position: absolute; top:192px; left: 940px;
	background:url(../pinzell_0.png);
	 transform: scale(.90,.90);
	width: 42px;
    height: 42px;
	border-radius:12px;
	background-position: -6px;
    box-shadow: 0 0 13px #000;
    -webkit-border-radius:12px;
    -webkit-box-shadow: 0 0 8px #000;
	z-index: 5;
}

#tool_boton_pen {

	position: absolute; top:190px; left: 940px;
	background:transparent;
	width: 38px;
	height: 38px;
	z-index: 25;
}

#tool_rubber{
	position: absolute; top:192px; left: 895px;
	 transform: scale(.90,.90);
	background:url(../goma_0.png);
	width: 42px;
    height: 42px;
	border-radius:12px;
	background-position: -6px;
    box-shadow: 0 0 13px #000;
    -webkit-border-radius:12px;
    -webkit-box-shadow: 0 0 8px #000;
	z-index: 5;

}

#tool_boton_rubber {

	position: absolute; top:192px; left: 895px;
   background:transparent;
	width: 38px;
	height: 38px;
	z-index: 25;

}

#tool_bucket {

	position: absolute; top:148px; left: 895px;
	background:url(../pot_0.png);
	width: 42px;
    height: 42px;
	border-radius:12px;
	background-position: -4px;
    box-shadow: 0 0 13px #000;
    -webkit-border-radius:12px;
    -webkit-box-shadow: 0 0 8px #000;
    transform: scale(.90,.90);
	z-index: 5;

}

#tool_boton_bucket {
	position: absolute; top:148px; left: 895px;
	background:transparent;
	width: 38px;
	height: 38px;
	z-index: 25;
}

#tool_xuclador {
	position: absolute; top:148px; left: 940px;
	background: url(../cont_0.png);
	width: 42px;
    height: 42px;
    transform: scale(.90,.90);
	border-radius:12px;
	background-position: -5px -4px;
    box-shadow: 0 0 13px #000;
    -webkit-border-radius:12px;
    -webkit-box-shadow: 0 0 8px #000;
	z-index: 5;
}

#tool_boton_xuclador {
	position: absolute; top:148px; left: 940px;
	background:transparent;
	width: 38px;
	height: 38px;
	z-index: 25;
}

#tool_boton_circle {

	position: absolute; top:240px; left: 944px;
background:transparent;

	width: 38px;
	height: 38px;
	z-index: 25;

}

.img_dec{
	 transform: scale(.90,.90);
}

#tool_boton_rectangle {
	position: absolute; top:240px; left: 895px;
background:transparent;

	width: 38px;
	height: 38px;
	z-index: 25;
}

#tool_undo {
	 transform: scale(.90,.90);
	position: absolute; 
	top:106px; left: 895px;	
	background: url(../white_pill.png);
	width: 42px;
	height: 42px;
	z-index: 5;
	border-radius:12px;

    box-shadow: 0 0 13px #000;
    -webkit-border-radius:12px;
    -webkit-box-shadow: 0 0 8px #000;
	
}


#tool_boton_undo {

	position: absolute; 
	top:105px; left:895px;	
	
	width: 38px;
	height: 38px;
	z-index: 25;
	
}

#button_to_tools {
	 transform: scale(.90,.90);
	top:0;
	left: 0;
	background: url("../img/menu.png");
	width:96px;
	height: 96px;
	position: absolute;

}


#container_tools{
	
	position: absolute;
	top: -250px;
	left: 0;
	background: url("../img/menufullscreen_lite_last.png") no-repeat;
	width: 550px;
	height: 168px;
	z-index: 10;
	height :174px;
}


#paint_loader{

	top:0;
	left: 0;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 32px;
	height: 32px;
	background-color: red;
	margin: auto;
	z-index: 10;
	background: url("../img/ajax_loader.gif");
	display: none;

}


#color1{position: absolute; top:10px; left: 182px; margin: auto; background:red;  width: 38px;height: 38px;z-index: 5;}
#color2{position: absolute; top:60px; left: 182px; margin: auto; background:red;   width: 38px;height: 38px;z-index: 5;}
#color3{position: absolute; top:110px; left: 182px; margin: auto; background:red;   width: 38px;height: 38px;z-index: 5;}


#color4{position: absolute; top:8px; left: 232px; margin: auto;background:red;   width: 38px;height: 38px;z-index: 5;}
#color5{position: absolute; top:58px; left: 232px; margin: auto;background:red;    width: 38px;height: 38px;z-index: 5;}
#color6{position: absolute; top:108px; left: 232px; margin: auto; background:red; ;  width: 38px;height: 38px;z-index: 5;}

#color7{position: absolute; top:8px; left: 281px; margin: auto; background:red;  width: 38px;height: 38px;z-index: 5;}
#color8{position: absolute; top:58px; left: 281px; margin: auto; background:red;   width: 38px;height: 38px;z-index: 5;}
#color9{position: absolute; top:108px; left: 281px; margin: auto;background:red;    width: 38px;height: 38px;z-index: 5;}

#color10{position: absolute; top:8px; left: 330px; margin: auto; background:red;   width: 38px;height: 38px;z-index: 5;}
#color11{position: absolute; top:58px; left: 330px; margin: auto; background:red;   width: 38px;height: 38px;z-index: 5;}
#color12{position: absolute; top:108px; left: 330px; margin: auto;background:red;    width: 38px;height: 38px;z-index: 5;}

#color13{position: absolute; top:8px; left: 380px; margin: auto;background:red;    width: 38px;height: 38px;z-index: 5;}
#color14{position: absolute; top:58px; left: 380px; margin: auto; background:red;   width: 38px;height: 38px;z-index: 5;}
#color15{position: absolute; top:108px; left: 380px; margin: auto;background:red;    width: 38px;height: 38px;z-index: 5;}

#color16{position: absolute; top:8px; left: 430px; margin: auto; background:red;   width: 38px;height: 38px;z-index: 5;}
#color17{position: absolute; top:58px; left: 430px; margin: auto; background:red;   width: 38px;height: 38px;z-index: 5;}
#color18{position: absolute; top:108px; left: 430px; margin: auto; background:red;   width: 38px;height: 38px;z-index: 5;}

#color19{position: absolute; top:8px; left: 482px; margin: auto; background:red;   width: 38px;height: 38px;z-index: 5;}

#btn_size_5{position: absolute; top:284px; left: 897px; margin: auto; background:transparent;  width: 22px;height: 22px;z-index: 5;}
#btn_size_10{position: absolute; top:284px; left: 930px; margin: auto; background:transparent; width: 22px;height: 22px;z-index: 5;}
#btn_size_15{position:absolute;top:284px;left:960px;margin:auto;background:transparent; width: 22px;height:22px;z-index: 5;}

@media (min-width: 240px) and (max-width: 480px) and (orientation : landscape) {
 	#container_tools{
	 	zoom:75%;
 	}
 	#banner_center{
 		zoom:75%;
 	}
 	#start_btn{
 		zoom:75%;
 	}

 	#cortina_phone_landscape{zoom:75%;}
 	#cortina_phone_portrait{zoom:75%;}
}


@media (min-width: 481px) and (max-width: 640px) and (orientation : landscape) {
	#container_tools{
	 	zoom:85%;
 	}
 	#banner_center{
 		zoom:85%;
 	}
 	#start_btn{
 		zoom:85%;
 	}

 	#cortina_phone_landscape{zoom:85%;}
 	#cortina_phone_portrait{zoom:85%;}
}

@media (min-width: 641px) and (max-width: 800px) and (orientation : landscape) {
	#container_tools{
	 	zoom:95%;
 	}
 	#banner_center{
 		zoom:95%;
 	}
 	#start_btn{
 		zoom:95%;
 	}

 	#cortina_phone_landscape{zoom:95%;}
 	#cortina_phone_portrait{zoom:95%;}
}

@media (min-width: 801px) and (max-width: 1024px) and (orientation : landscape){
	#container_tools{
	 	zoom:95%;
 	}
 	#banner_center{
 		zoom:95%;
 	}
 	#start_btn{
 		zoom:95%;
 	}

 	#cortina_phone_landscape{zoom:95%;}
 	#cortina_phone_portrait{zoom:95%;}
}



@media (min-width: 240px) and (max-width: 480px) and (orientation : portrait) {
 	#container_tools{
	 	zoom:60%;
 	}
 	#banner_center{
 		zoom:60%;
 	}
 	#start_btn{
 		zoom:60%;
 	}

 	#cortina_phone_landscape{zoom:60%;}
 	#cortina_phone_portrait{zoom:60%;}
}

@media (min-width: 481px) and (max-width: 640px) and (orientation : portrait) {
	#container_tools{
	 	zoom:70%;
 	}
 	#banner_center{
 		zoom:70%;
 	}
 	#start_btn{
 		zoom:70%;
 	}

 	#cortina_phone_landscape{zoom:70%;}
 	#cortina_phone_portrait{zoom:70%;}
}

@media (min-width: 641px) and (max-width: 800px) and (orientation : portrait) {
	#container_tools{
	 	zoom:80%;
 	}
 	#banner_center{
 		zoom:80%;
 	}
 	#start_btn{
 		zoom:80%;
 	}

 	#cortina_phone_landscape{zoom:80%;}
 	#cortina_phone_portrait{zoom:80%;}
}

@media (min-width: 801px) and (max-width: 1024px) and (orientation : portrait){
	#container_tools{
	 	zoom:90%;
 	}
 	#banner_center{
 		zoom:90%;
 	}
 	#start_btn{
 		zoom:90%;
 	}

 	#cortina_phone_landscape{zoom:90%;}
 	#cortina_phone_portrait{zoom:90%;}

}


/*cambi last*/

#cortina{

	width: 1024px;
	height: 1024px;
	background: white;
	position: absolute;
	top:0;
	left:0;
	z-index: 99999;

}

#cortina_phone_landscape{

	width: 397px;
	height: 234px;
	z-index: 9999999;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	background-image: url("../mobile_device_landscape.png");
	display: none;
 	
}

#cortina_phone_portrait{

	width: 234px;
	height: 397px;
	z-index: 9999999;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	background-image: url("../mobile_device_portrait.png");
	display: none;
 	
}

/*@media (min-width: 1600px){
	.safari-mac #tool_rubber, .safari-mac #tool_boton_rubber, .safari-mac #tool_boton_bucket, .safari-mac #tool_boton_rectangle, .safari-mac #tool_bucket, .safari-mac #tool_undo, .safari-mac #tool_to_puzzles, .safari-mac #puzzle_alone, .safari-mac #tool_boton_undo, .safari-mac #tool_to_clear_all {
		left:1055px;
	}
	
	.safari-mac #print, .safari-mac #tool_pinzell, .safari-mac #tool_boton_circle, .safari-mac #tool_boton_pen, .safari-mac #tool_xuclador, .safari-mac #tool_boton_xuclador, .safari-mac #tool_to_envelope, .safari-mac #envelope_alone, .safari-mac #printbn_alone, .safari-mac #printcol_alone, .safari-mac #tool_to_print_bn{
		left:1100px;
	}
	
	.safari-mac #btn_size_5{
	 left:1057px;
	}
	
	.safari-mac #btn_size_10{
	 left:1090px;
	}
	
	.safari-mac #btn_size_15{
	 left:1120px;
	}
}*/

@media (min-width: 240px) and (max-width: 480px) and (orientation : landscape) {

 	#cortina_phone_landscape{zoom:60%;}
 	#cortina_phone_portrait{zoom:60%;}
}


@media (min-width: 481px) and (max-width: 640px) and (orientation : landscape) {
	
 	#cortina_phone_landscape{zoom:60%;}
 	#cortina_phone_portrait{zoom:60%;}
}

@media (min-width: 641px) and (max-width: 800px) and (orientation : landscape) {

 	#cortina_phone_landscape{zoom:70%;}
 	#cortina_phone_portrait{zoom:70%;}
}

@media (min-width: 801px) and (max-width: 1024px) and (orientation : landscape){

 	#cortina_phone_landscape{zoom:80%;}
 	#cortina_phone_portrait{zoom:80%;}
}


@media (min-width: 240px) and (max-width: 480px) and (orientation : portrait) {
 
 	#cortina_phone_landscape{zoom:50%;}
 	#cortina_phone_portrait{zoom:50%;}
}

@media (min-width: 481px) and (max-width: 640px) and (orientation : portrait) {

 	#cortina_phone_landscape{zoom:60%;}
 	#cortina_phone_portrait{zoom:60%;}
}

@media (min-width: 641px) and (max-width: 800px) and (orientation : portrait) {

 	#cortina_phone_landscape{zoom:70%;}
 	#cortina_phone_portrait{zoom:70%;}
}

@media (min-width: 801px) and (max-width: 1024px) and (orientation : portrait){

 	#cortina_phone_landscape{zoom:80%;}
 	#cortina_phone_portrait{zoom:80%;}

}

#button_to_description {

	bottom:0;
	left: 0;
	background: url("../img/icona_paper.png");
	width:96px;
	height: 96px;
	position: absolute;
}


#menu_to_description{



}


.anim_pot.active {
	
	z-index: 12;
    width: 42px;
    height: 42px;
	border-radius:12px;
    box-shadow: 0 0 13px #000;
    -webkit-border-radius:12px;
    -webkit-box-shadow: 0 0 8px #000;
    -moz-border-radius:12px;
    -moz-box-shadow: 0 0 8px #000;
	background-image: url("../pot_now.png");
	transform: scale(.90,.90);

	-webkit-animation: _anim_pot 1.8s steps(12) infinite;
    animation: _anim_pot 1.8s steps(12) infinite;
    -moz-animation:_anim_pot 1.8s steps(12) infinite;

}

.anim_pot{
	
 	transform: scale(.90,.90);

}

@-webkit-keyframes _anim_pot {
   0% { background-position:    -8px; }
    60% { background-position: -778px; }
      100% { background-position: -778px; }
}


@keyframes _anim_pot {
    0%{ background-position:    -8px; }
      60% { background-position: -778px; }
        100% { background-position: -778px; }
}

.anim_pinzell.active {

    width: 42px;
    height: 42px;
	border-radius:12px;
	z-index: 10;

    box-shadow: 0 0 13px #000;
    -webkit-border-radius:12px;
    -webkit-box-shadow: 0 0 8px #000;
	background-image: url("../pinzell_now.png");
	-webkit-animation: _anim_pinzell 1.8s steps(16) infinite;
    animation: _anim_pinzell 1.8s steps(16) infinite;

}

.anim_pinzell{
	
 	transform: scale(.90,.90);
 	
    animation-play-state:"paused";
	-webkit-animation-play-state : "paused";

}

@-webkit-keyframes _anim_pinzell {
  0%{ background-position:    -10px; }
     60% { background-position: -1034px; }
     100% { background-position: -1034px; }
}


@keyframes _anim_pinzell {
   0%{ background-position:    -10px; }
     60% { background-position: -1034px; }
     100% { background-position: -1034px; }
}




.anim_comptegotes.active {

    width: 42px;
    height: 42px;
	border-radius:12px;
    box-shadow: 0 0 13px #000;
    -webkit-border-radius:12px;
    -webkit-box-shadow: 0 0 8px #000;
	background-image: url("../comptegotes_now.png");
	 
    -webkit-animation:  _anim_comptegotes 1.8s steps(12) infinite;
            animation:  _anim_comptegotes 1.8s steps(12) infinite;

}
.anim_comptegotes{
	
	z-index: 10;
 transform: scale(.90,.90);
	background-image: url("pot.png")

    animation-play-state:"paused";
	-webkit-animation-play-state : "paused";

}

@-webkit-keyframes _anim_comptegotes {
 0%{ background-position:    -8px -6px  }
    60% { background-position: -752px -6px }
    100% { background-position: -752px -6px }
}


@keyframes _anim_comptegotes {
0%{ background-position:    -8px -6px  }
    60% { background-position: -752px -6px }
    100% { background-position: -752px -6px }
}



.anim_goma.active {

    width: 42px;
    height: 42px;
	border-radius:12px;
    box-shadow: 0 0 13px #000;
     transform: scale(.90,.90);
    -webkit-border-radius:12px;
    -webkit-box-shadow: 0 0 8px #000;
	background-image: url("../goma_now.png");
    -webkit-animation: _anim_goma 3s steps(16) infinite;
    animation: _anim_goma 3s steps(16) infinite;


}
.anim_goma{
	
	z-index: 10;

 transform: scale(.90,.90);

    animation-play-state:"paused";
	-webkit-animation-play-state : "paused";

}

@-webkit-keyframes _anim_goma {
0%{ background-position:    -8px; }
60%{ background-position: -1000px; }
100%{ background-position: -1000px; }
}


@keyframes _anim_goma {
0%{ background-position:    -8px; }
60%{ background-position: -1000px; }
100%{ background-position: -1000px; }
}


.anim_printbn.active {

    width: 42px;
    height: 42px;
	border-radius:12px;
    box-shadow: 0 0 13px #000;
     transform: scale(.90,.90);
    -webkit-border-radius:12px;
    -webkit-box-shadow: 0 0 8px #000;
	background-image: url("../printbn.png");
    -webkit-animation: _anim_printbn 1.6s steps(7) infinite;
    animation: _anim_printbn 1.6s steps(7) infinite;


}
.anim_printbn{
	
	z-index: 10;

 transform: scale(.90,.90);

    animation-play-state:"paused";
	-webkit-animation-play-state : "paused";

}

@-webkit-keyframes _anim_printbn {
   0%{ background-position:    -16px; }
    60%{ background-position: -546px; }
    100%{ background-position: -546px; }
}


@keyframes _anim_printbn {
    0% { background-position:    -16px; }
     60%{ background-position: -546px; }
     100% { background-position: -546px; }
}


.anim_printcol.active {

    width: 42px;
    height: 42px;
	border-radius:12px;
    box-shadow: 0 0 13px #000;
    transform: scale(.90,.90);
    -webkit-border-radius:12px;
    -webkit-box-shadow: 0 0 8px #000;
	background-image: url("../img/print_color.png");
   	-webkit-animation: _anim_printcol 1.6s steps(7) infinite;
    animation: _anim_printcol 1.6s steps(7) infinite;
}

.anim_printcol{
	
	z-index: 10;
	
 transform: scale(.90,.90);

    animation-play-state:"paused";
	-webkit-animation-play-state : "paused";

}

@-webkit-keyframes _anim_printcol {
   0%{ background-position:    -10px; }
     60% { background-position: -443px; }
     100% {background-position: -443px}
}


@keyframes _anim_printcol {
      0%{ background-position:    -10px; }
     60% { background-position: -443px; }
     100% {background-position: -443px}
}


.anim_envelope.active {

    width: 42px;
    height: 42px;
	border-radius:12px;
    box-shadow: 0 0 13px #000;
     transform: scale(.90,.90);
    -webkit-border-radius:12px;
    -webkit-box-shadow: 0 0 8px #000;
	background-image: url("../img/sobre.png");
    -webkit-animation: _anim_envelope 2.5s steps(4) infinite;
    animation: _anim_envelope 2.5s steps(4) infinite;

}

.anim_envelope{
	
	z-index: 10;
	
	background-image: url("pot.png")
 transform: scale(.90,.90);

    animation-play-state:"paused";
	-webkit-animation-play-state : "paused";

}

@-webkit-keyframes _anim_envelope {
     0% { background-position:    -10px; }
    60% { background-position: -256px; }
    100% { background-position: -256px; }
}


@keyframes _anim_envelope {
    0%{ background-position:    -10px; }
    60% { background-position: -256px; }
    100% { background-position: -256px; }
}


.anim_puzzle.active {

    width: 42px;
    height: 42px;
	border-radius:12px;
    box-shadow: 0 0 13px #000;
    transform: scale(.90,.90);
    -webkit-border-radius:12px;
    -webkit-box-shadow: 0 0 8px #000;
	background-image: url("../puzzle_blanc.png");
    -webkit-animation: _anim_puzzle 1.4s steps(8) infinite;
    animation: _anim_puzzle 1.4s steps(8) infinite;

}


.anim_puzzle{
	
	z-index: 10;	
	background-image: url("pot.png")
    transform: scale(.90,.90);
    animation-play-state:"paused";
	-webkit-animation-play-state : "paused";

}
@-webkit-keyframes _anim_puzzle {
     0% { background-position:    -10px; }
     50% { background-position: -537px; }
     100% { background-position: -537px; }
}
@keyframes _anim_puzzle {
     0% { background-position:    -10px; }
     50% { background-position: -537px; }
     100% { background-position: -537px; }
}

.anim_fletxa.active {
	-webkit-animation:_anim_fletxa 4s linear infinite;
	-moz-animation:_anim_fletxa 4s linear infinite;
    animation:_anim_fletxa  4s linear infinite;
    -ms-animation:_anim_fletxa  4s linear infinite;
}

.anim_fletxa{
	border-radius: 8px;
	z-index: 10;
	left: 865px;
	top: 96px;
    width: 42px;
    height: 42px;
	background:  url("../fletxa.png") no-repeat center;
	-moz-animation-play-state : "paused";
	-webkit-animation-play-state : "paused";
}

@-webkit-keyframes _anim_fletxa { 
	60% { -webkit-transform: rotate(-360deg); }
	100% { -webkit-transform: rotate(-360deg); }
}

@-moz-keyframes _anim_fletxa { 
	60% { -moz-transform: rotate(-360deg);  }
	100% { -moz-transform: rotate(-360deg); }
}

@keyframes _anim_fletxa 100% { 
	60% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); }
	100% {-webkit-transform: rotate(-360deg); transform:rotate(-360deg);} 
}

@-ms-keyframes _anim_fletxa { 
	60% { -ms-transform: rotate(-360deg);}
 	100% { -ms-transform: rotate(-360deg); }
}

.anim_clear.active{
	 transform: scale(.90,.90);
	-webkit-animation:_anim_fletxa2 4s linear infinite;
	-moz-animation:_anim_fletxa2 4s linear infinite;
	-ms-animation:_anim_fletxa2 4s linear infinite;
    animation:_anim_fletxa2  4s linear infinite;
}

.anim_clear{
	border-radius: 8px;
	z-index: 10;
    width: 42px;
    height: 42px;
    top:51px;
    left:819px;
	background: url("../clear_all.png") no-repeat center;
    transform: scale(.90,.90);
	-webkit-animation-play-state : "paused";
	-moz-animation-play-state : "paused";
	border-radius:12px;
    box-shadow: 0 0 13px #000;
    -webkit-border-radius:12px;
    -webkit-box-shadow: 0 0 8px #000;
}

@-moz-keyframes _anim_fletxa2 { 
	60% { -moz-transform: scale(0,0); }
	100% { -moz-transform: scale(0,0); }
}
@-ms-keyframes _anim_fletxa2 { 
	60% { -ms-transform: scale(0,0);  }
	100% { -ms-transform: scale(0,0); }
}

@-webkit-keyframes _anim_fletxa2 { 
	60% { -webkit-transform: scale(0,0); }
	100% { -webkit-transform: scale(0,0); }
}

@keyframes _anim_fletxa2 100% { 
	60% { -webkit-transform: scale(0,0); transform:scale(0,0); }
	100% { -webkit-transform: scale(0,0); transform:scale(0,0); }
}