/* CSS Document */
/*-------------------------------------------*/

	#zona_trabajo{
		  min-height: 100%;
		  left: 0px;
		  top: 32px;
		  width: 100%;
		  border-radius: 12px;
		  position: absolute;	
	}
	.fondonoticia
	{
	    background-image: url(../images/tema/noticia.png);
    background-size: 98%;
    height: 370px;
    background-repeat: no-repeat;
    width: 514px;
    padding-right: 0px;
    margin-left: 20px;
	}
	
	.fondotitular
	{
	background-image: url(../images/tema/titular.png);
    background-size: 98%;
   	 width: 400px;
	height: 280px;
	position:relative;
		    left: 23%;
		    top: 31px;
    background-repeat: no-repeat;
    position: relative;
	animation: 2s rotate ease-in-out;
	cursor: url(../images/cursor/hand.cur) , auto!important;
	    z-index: 3000;
	}
	
	@keyframes rotate {
   	 0% {  
	     width: 500px;
    height: 330px;
    left: 15%;
    top: -36px;
	 transition: 2.5s ease;
 	-moz-transition: 2.5s ease; /* Firefox */
 	-webkit-transition: 2.5s ease; /* Chrome - Safari */
 	-o-transition: 2.5s ease; /* Opera */
	 transform : rotate(360deg);
	-moz-transform : rotate(360deg); /* Firefox */
	-webkit-transform : rotate(360deg); /* Chrome - Safari */
	-o-transform : rotate(360deg); /* Opera */
	 }
	  100%
	 {
		    width: 400px;
			height: 280px;    
			left: 23%;
		    top: 31px;
	 }
	}
	
	#manito
	{
	    color: #1976D2;
    font-size: 37px;
    padding: 12px 5px 12px 12px;
    animation: 2s aum infinite;
    z-index: 2;
    position: relative;
    left: -6px;
    top: 8px;
	}
	@keyframes aum {
   	 50% { opacity: 0;
    filter: alpha(opacity=0); /* For IE8 and earlier */}
	}
	.boton {
    color: white;
    text-shadow: -1px -1px 1px #000, 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000;
    width: 100px;
    height: 50px;
    text-align: center;
    font-family: Chewy;
    font-size: 19px;
    background-color: #FFC107;
    border-radius: 20px 7px 20px 7px;
    padding: 12px;
    cursor: url(../images/cursor/hand.cur) , auto!important;
	}
	.partes div
	{
		width:80%;
		margin:0px auto;
		padding:5px;
		background-color:white;
		font-family:chewy;
		font-size:25px;
		border-radius:12px;
		color:blue;
		margin:3px;
		text-align:center;		
	}
	
	.arrastrable
	{
	    width: 103px;
    float: left;
    font-family: Chewy;
    text-stroke: 1px black;
    color: white;
    text-align: center;
    font-size: 20px;
    margin-top: 5px;
    margin-right: 3px;
	}
	
	#arras_incorrecto
	{
		display:none;
		    position: relative;
    left: 559px;
    top: -104px;
    transform: rotate(-53deg);
    width: 139px;
    z-index: 2000;
	}
	
	.verificar
	{
	position: absolute;
    right: 218px;
    top: 73px;
    z-index: 3;
    padding: 0px 24px 20px 22px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.87);
	display:none;
	}
	
	#contenedorPiezas
	{
	    background-color: white;
    height: 222px;
    border: 3px dashed orange;
    padding: 4px;
    width: 118px;
	}
	.contenedorPieza div
	{
		margin:0px;
	}
	.aljuego
	{
	    position: absolute;
    top: 309px;
    width: 176px;
    left: 342px;
    color: #593820;
    background-color: #FFD180;
    border-radius: 12px;
    padding: 6px;
    font-size: 23px;
    text-align: center;
    font-family: Chewy;
    animation: 2s milatido infinite;
    cursor: url(../images/cursor/hand.cur), auto;
	}
	.bgcolor1 { background-color:#F44336; }
 .bgcolor2 { background-color:#E91E63; }
 .bgcolor3 { background-color:#9C27B0; }
 .bgcolor4 { background-color:#3F51B5; }
 .bgcolor5 { background-color:#2196F3; }
 .bgcolor6 { background-color:#009688; }
 .bgcolor7 { background-color:#43A047; }
 .bgcolor8 { background-color:#EF6C00; }
 .bgcolor9 { background-color:#FF5722; }
 .bgcolor10 { background-color:#607D8B; }
 
  .textcolor1 { color:#F44336; }
 .textcolor2 { color:#E91E63; }
 .textcolor3 { color:#9C27B0; }
 .textcolor4 { color:#3F51B5; }
 .textcolor5 { color:#2196F3; }
 .textcolor6 { color:#009688; }
 .textcolor7 { color:#43A047; }
 .textcolor8 { color:#EF6C00; }
 .textcolor9 { color:#FF5722; }
 .textcolor10 { color:#607D8B; }

	#imagen .contenedorPieza{   
	opacity: 0.5;
    z-index: 5;
    width: 102px;
    height: 28px;
    background-color: white;
    position: absolute;
    border: 2px dotted orange;}
	#imagen #pieza_Que {left: 212px;   top: -30px;}
	#imagen #pieza_Donde { left: -79px;  top: 287px;}
	#imagen #pieza_Como {  left: 366px;  top: 337px; }
	#imagen #pieza_Cuando { left: 465px;   top: 99px;}
	#imagen #pieza_Quien { right: 491px;  top: 230px;}
	#imagen #pieza_Por-que { left: 464px;  top: 197px; }
	
	#imagen .flecha{z-index:1;  width:95px; height: 3px; background-color: orange; position:absolute; opacity:0.3;}
	#imagen #flecha_Que {left: 131px;   top: 42px;    -ms-transform: rotate(-41deg);    -webkit-transform: rotate(-41deg);    transform: rotate(-41deg);   width: 145px;}
	#imagen #flecha_Donde { left: 21px;   top: 283px;  -ms-transform: rotate(-16deg);  -webkit-transform: rotate(-16deg);    transform: rotate(-16deg);    width: 115px;}
	#imagen #flecha_Como { left: 368px; top: 323px; -ms-transform: rotate(29deg); -webkit-transform: rotate(29deg); transform: rotate(29deg);  width: 50px;}	
	#imagen #flecha_Cuando {left: 223px; top: 130px; -ms-transform: rotate(-11deg);  -webkit-transform: rotate(-11deg); transform: rotate(-11deg);  width: 244px;}
	#imagen #flecha_Quien { right: 434px;   top: 190px;   -ms-transform: rotate(137deg);   -webkit-transform: rotate(137deg);    transform: rotate(137deg);   width: 116px;}
	#imagen #flecha_Por-que {left: 192px; top: 199px;  -ms-transform: rotate(4deg);  -webkit-transform: rotate(4deg);  transform: rotate(4deg); width: 273px;}	

@keyframes milatido {
		from { transform: none; }
		50% { transform: scale(1.1); }
		to { transform: none; }
	}