@charset "utf-8";
/* CSS Document */

*{
margin:0;
paddig:0;
box-sizing:border-box;

}

section.jogo {
	position: relative;
	width: 500px;
	height: 500px;
	margin: 20px auto 20px auto;
	padding: 0px;
	border: 0.5px solid rgba(255,255,255,0.5);
	border-radius:5px;
	box-shadow: 0px 0px 10px rgba(0,0,0,1);
	/*overflow:hidden;*/
	background-color:rgba(43,124,180,0.8);
	background-image:	url(../imagem-13-jogos-57-quadrado-magico-3x3-figuras-geometricas/quadrado-magico-3x3-figuras-geometricas-fundo.png),
	url(../imagem-13-jogos-matematicos/000-fundo-jogos-matematicos-100px100px.png);
	/*background-repeat: repeat-y;*/
	background-repeat: no-repeat;
	background-position: /*center*/ /*bottom*/;
	background-position: center bottom, top right;
	/*diplay:flex;*/ /*OBSERVACAO: BUG? display flex não funcionou*/
	/*flex-direction:row;*/
	/*flex-wrap: wrap;*/
	/*justify-content: space-around;*/
	
}

.bloco {
	float: left;
	margin: 5px;
	border-radius: 5px;
	background-color: white;
	box-shadow: 0px 0px 5px black;
	width: 58px;/*128px*/
	height: 58px;/*128px*/
	background-image:;
	background-size: calc(100% - 10px);
	background-position: center;
	background-repeat: no-repeat;
}

.peca-03-triangulo{
	float: left;
	margin: 0px;
	width: 83px;
	height: 82px;
	background-image:	url(../imagem-13-jogos-57-quadrado-magico-3x3-figuras-geometricas/peca-03-triangulo.png);
	/*background-size: calc(100% - 10px);*/
	background-position: center;
	background-repeat: no-repeat;
}


.peca-04-quadrado{
	float: left;
	margin: 0px;
	width: 83px;
	height: 82px;
	background-image:	url(../imagem-13-jogos-57-quadrado-magico-3x3-figuras-geometricas/peca-04-quadrado.png);
	/*background-size: calc(100% - 10px);*/
	background-position: center;
	background-repeat: no-repeat;
}


.peca-05-pentagono{
	float: left;
	margin: 0px;
	width: 83px;
	height: 82px;
	background-image:	url(../imagem-13-jogos-57-quadrado-magico-3x3-figuras-geometricas/peca-05-pentagono.png);
	/*background-size: calc(100% - 10px);*/
	background-position: center;
	background-repeat: no-repeat;
}

.peca-06-hexagono{
	float: left;
	margin: 0px;
	width: 83px;
	height: 82px;
	background-image:	url(../imagem-13-jogos-57-quadrado-magico-3x3-figuras-geometricas/peca-06-hexagono.png);
	/*background-size: calc(100% - 10px);*/
	background-position: center;
	background-repeat: no-repeat;
}

.peca-07-heptagono{
	float: left;
	margin: 0px;
	width: 83px;
	height: 82px;
	background-image:	url(../imagem-13-jogos-57-quadrado-magico-3x3-figuras-geometricas/peca-07-heptagono.png);
	/*background-size: calc(100% - 10px);*/
	background-position: center;
	background-repeat: no-repeat;
}

.peca-08-octogono{
	float: left;
	margin: 0px;
	width: 83px;
	height: 82px;
	background-image:	url(../imagem-13-jogos-57-quadrado-magico-3x3-figuras-geometricas/peca-08-octogono.png);
	/*background-size: calc(100% - 10px);*/
	background-position: center;
	background-repeat: no-repeat;
}

.peca-09-eneagono{
	float: left;
	margin: 0px;
	width: 83px;
	height: 82px;
	background-image:	url(../imagem-13-jogos-57-quadrado-magico-3x3-figuras-geometricas/peca-09-eneagono.png);
	/*background-size: calc(100% - 10px);*/
	background-position: center;
	background-repeat: no-repeat;
}

.peca-10-decagono{
	float: left;
	margin: 0px;
	width: 83px;
	height: 82px;
	background-image:	url(../imagem-13-jogos-57-quadrado-magico-3x3-figuras-geometricas/peca-10-decagono.png);
	/*background-size: calc(100% - 10px);*/
	background-position: center;
	background-repeat: no-repeat;
}

.peca-11-hendecagono{
	float: left;
	margin: 0px;
	width: 83px;
	height: 82px;
	background-image:	url(../imagem-13-jogos-57-quadrado-magico-3x3-figuras-geometricas/peca-11-hendecagono.png);
	/*background-size: calc(100% - 10px);*/
	background-position: center;
	background-repeat: no-repeat;
}

.draggable {
	position: relative;
	top: 0px;
	left: 0px;
	transition: transform 0.3s linear z-index 0.3 linear;
	z-index: 0;
}

.dragging {
	transform: scale(1.1);
	z-index: 999;
}


/*AQUI COMEÇA COMANDO RESPONSIVO PARA 480PX*/

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

*{
	margin:0;
	padding:0;
	box-sizing:border-box;

}

section.jogo {
	position: relative;
	width: 380px;
	height: 600px;
	margin: 20px auto 20px auto;
	padding: 0px;
	border: 0.5px solid rgba(255,255,255,0.5);
	border-radius:5px;
	box-shadow: 0px 0px 10px rgba(0,0,0,1);
	/*overflow:hidden;*/
	background-color:rgba(43,124,180,0.8);
	background-image:	url(../imagem-13-jogos-57-quadrado-magico-3x3-figuras-geometricas/quadrado-magico-3x3-figuras-geometricas-fundo.png);
	/*background-repeat: repeat-y;*/
	background-repeat: no-repeat;
	background-position: /*center */bottom;
	/*diplay:flex;*/ /*OBSERVACAO: BUG? display flex não funcionou*/
	/*flex-direction:row;*/
	/*flex-wrap: wrap;*/
	/*justify-content: space-around;*/
	
}

}


/*AQUI COMEÇA COMANDO RESPONSIVO PARA 480PX*/

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

*{
	margin:0;
	padding:0;
	box-sizing:border-box;

}

section.jogo {
	position: relative;
	width: 270px;
	height: 600px;
	margin: 20px auto 20px auto;
	padding: 0px;
	border: 0.5px solid rgba(255,255,255,0.5);
	border-radius:5px;
	box-shadow: 0px 0px 10px rgba(0,0,0,1);
	/*overflow:hidden;*/
	background-color:rgba(43,124,180,0.8);
	background-image:	url(../imagem-13-jogos-57-quadrado-magico-3x3-figuras-geometricas/quadrado-magico-3x3-figuras-geometricas-fundo.png);
	/*background-repeat: repeat-y;*/
	background-repeat: no-repeat;
	background-position: /*center*/ bottom;
	/*diplay:flex;*/ /*OBSERVACAO: BUG? display flex não funcionou*/
	/*flex-direction:row;*/
	/*flex-wrap: wrap;*/
	/*justify-content: space-around;*/
	
}

}