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

/*DISPOSITIVOS MÓVEIS*/

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

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

}

body{
	font-family:Verdana, Geneva, sans-serif;
	/*counter-reset:points;*/
}

section.passatempo-primos{
	width: 90%;
	height: 500px;
	/*padding:10%;*/
	position: relative;
	margin: 70px auto 28px auto;
	background-color: #2b7cb4;
	/*display:flex;*/
	/*flex-direction: row;*/
	/*flex-wrap: wrap;*/
	/*justify-content: space-around;*/
	border-radius: 8px;
	box-shadow: 2px 2px 10px black;
	background-image:	url(../imagem-13-jogos-matematicos/013-005-01-fundo-logotipo-jogos-matematicos.png);
	background-repeat: repeat-y;
	background-position: 50%;
}

.meu-checkbox{
	/*display:none;*/
	display:block;
	width:0px;
	height:0px;
	opacity:0;
	
}

/*BOTAO-1-ANIMACAO*/

.label-box-1 {
	display:block;
	font-size:16px;
	width:40px;
	height:40px;
	position:absolute;
	font-weight:bolder;
	line-height:40px;
	text-align:center;
	margin:21px;
	/*padding:10px;*/
	border-radius: 50%;
	text-decoration:none;
	/*color: black;*/
  	background-color:white;
	box-shadow: 2px 2px 10px black;
	cursor:pointer;
	animation-name: botao1;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	
}

/*label-box-1:a {
  color: black;
  background-color:white;
  text-decoration:none;
}*/

/*label-box-1:hover {
	color: white;
	background-color:black;
	text-decoration:none;
	transition-duration: 0.5s;
}*/

@keyframes botao1 {
  0%   {background-color:red; right:0px; top:0px;}
  25%  {background-color:yellow; right:40px; top:0px;}
  50%  {background-color:blue; right:80px; top:0px;}
  75%  {background-color:green; right:100px; top:0px;}
  100% {background-color:red; right:200px; top:0px;}
}

/*BOTOAO-3 ANIMACAO*/

.label-box-3{
	display:block;
	font-size:16px;
	width:40px;
	height:40px;
	position:absolute;
	font-weight:bolder;
	line-height:40px;
	text-align:center;
	margin:21px;
	/*padding:10px;*/
	border-radius: 50px;
	text-decoration:none;
	/*color: black;*/
  	background-color:white;
	box-shadow: 2px 2px 10px black;
	cursor:pointer;
	animation-name: botao3;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	
}

/*label-box-3:a {
  color: black;
  background-color:white;
  text-decoration:none;
}*/

/*label-box-3:hover {
	color: white;
	background-color:black;
	text-decoration:none;
	transition-duration: 0.5s;
}*/

@keyframes botao3 {
  0%   {background-color:red; left:0px; top:100px;}
  25%  {background-color:yellow; left:40px; top:100px;}
  50%  {background-color:blue; left:80px; top:100px;}
  75%  {background-color:green; left:100px; top:100px;}
  100% {background-color:red; left:200px; top:100px;}
}

/*BOTAO-5-ANIMACAO*/

.label-box-5 {
	display:block;
	font-size:16px;
	width:40px;
	height:40px;
	position:absolute;
	font-weight:bolder;
	line-height:40px;
	text-align:center;
	margin:21px;
	/*padding:10px;*/
	border-radius: 50px;
	text-decoration:none;
	/*color: black;*/
  	background-color:white;
	box-shadow: 2px 2px 10px black;
	cursor:pointer;
	animation-name: botao5;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	
}

label-box-5:a {
  color: black;
  background-color:white;
  text-decoration:none;
}

label-box-5:hover {
	color: white;
	background-color:black;
	text-decoration:none;
	transition-duration: 0.5s;
}

@keyframes botao5 {
  0%   {background-color:red; right:0px; top:200px;}
  25%  {background-color:yellow; right:40px; top:200px;}
  50%  {background-color:blue; right:80px; top:200px;}
  75%  {background-color:green; right:100px; top:200px;}
  100% {background-color:red; right:200px; top:200px;}
}

/*BOTOAO-7 ANIMACAO*/

.label-box-7 {
	display:block;
	font-size:16px;
	width:40px;
	height:40px;
	position:absolute;
	font-weight:bolder;
	line-height:40px;
	text-align:center;
	margin:21px;
	/*padding:10px;*/
	border-radius: 50px;
	text-decoration:none;
	/*color: black;*/
  	background-color:white;
	box-shadow: 2px 2px 10px black;
	cursor:pointer;
	animation-name: botao7;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	
}

label-box-7:a {
  color: black;
  background-color:white;
  text-decoration:none;
}

label-box-7:hover {
	color: white;
	background-color:black;
	text-decoration:none;
	transition-duration: 0.5s;
}

@keyframes botao7 {
  0%   {background-color:red; left:0px; top:300px;}
  25%  {background-color:yellow; left:40px; top:300px;}
  50%  {background-color:blue; left:80px; top:300px;}
  75%  {background-color:green; left:100px; top:300px;}
  100% {background-color:red; left:200px; top:300px;}
}

/*BOTAO-9-ANIMACAO*/

.label-box-9 {
	display:block;
	font-size:16px;
	width:40px;
	height:40px;
	position:absolute;
	font-weight:bolder;
	line-height:40px;
	text-align:center;
	margin:21px;
	/*padding:10px;*/
	border-radius: 50px;
	text-decoration:none;
	/*color: black;*/
  	background-color:white;
	box-shadow: 2px 2px 10px black;
	cursor:pointer;
	animation-name: botao9;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	
}

label-box-9:a {
  color: black;
  background-color:white;
  text-decoration:none;
}

label-box-9:hover {
	color: white;
	background-color:black;
	text-decoration:none;
	transition-duration: 0.5s;
}

@keyframes botao9 {
  0%   {background-color:red; right:0px; top:400px;}
  25%  {background-color:yellow; right:40px; top:400px;}
  50%  {background-color:blue; right:80px; top:400px;}
  75%  {background-color:green; right:100px; top:400px;}
  100% {background-color:red; right:200px; top:400px;}
}


/*BOTAO-11-ANIMACAO*/

.label-box-11 {
	display:block;
	font-size:16px;
	width:40px;
	height:40px;
	position:absolute;
	font-weight:bolder;
	line-height:40px;
	text-align:center;
	margin:21px;
	/*padding:10px;*/
	border-radius: 50px;
	text-decoration:none;
	/*color: black;*/
  	background-color:white;
	box-shadow: 2px 2px 10px black;
	cursor:pointer;
	animation-name: botao11;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	
}

label-box-11:a {
  color: black;
  background-color:white;
  text-decoration:none;
}

label-box-11:hover {
	color: white;
	background-color:black;
	text-decoration:none;
	transition-duration: 0.5s;
}

@keyframes botao11 {
  0%   {background-color:red; left:10px; top:0px;}
  25%  {background-color:yellow; left:10px; top:40px;}
  50%  {background-color:blue; left:10px; top:80px;}
  75%  {background-color:green; left:10px; top:100px;}
  100% {background-color:red; left:10px; top:200px;}
}

/*BOTAO-13-ANIMACAO*/

.label-box-13 {
	display:block;
	font-size:16px;
	width:40px;
	height:40px;
	position:absolute;
	font-weight:bolder;
	line-height:40px;
	text-align:center;
	margin:21px;
	/*padding:10px;*/
	border-radius: 50px;
	text-decoration:none;
	/*color: black;*/
  	background-color:white;
	box-shadow: 2px 2px 10px black;
	cursor:pointer;
	animation-name: botao13;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	
}

label-box-13:a {
  color: black;
  background-color:white;
  text-decoration:none;
}

label-box-13:hover {
	color: white;
	background-color:black;
	text-decoration:none;
	transition-duration: 0.5s;
}

@keyframes botao13 {
  0%   {background-color:red; left:100px; bottom:0px;}
  25%  {background-color:yellow; left:100px;  bottom:40px;}
  50%  {background-color:blue;left:100px;  bottom:80px;}
  75%  {background-color:green;left:100px;  bottom:100px;}
  100% {background-color:red; left:100px;  bottom:200px;}
}

/*BOTAO-15-ANIMACAO*/

.label-box-15 {
	display:block;
	font-size:16px;
	width:40px;
	height:40px;
	position:absolute;
	font-weight:bolder;
	line-height:40px;
	text-align:center;
	margin:21px;
	/*padding:10px;*/
	border-radius: 50px;
	text-decoration:none;
	/*color: black;*/
  	background-color:white;
	box-shadow: 2px 2px 10px black;
	cursor:pointer;
	animation-name: botao15;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	
}

label-box-15:a {
  color: black;
  background-color:white;
  text-decoration:none;
}

label-box-15:hover {
	color: white;
	background-color:black;
	text-decoration:none;
	transition-duration: 0.5s;
}

@keyframes botao15 {
  0%   {background-color:red; left:200px; top:0px;}
  25%  {background-color:yellow; left:200px; top:40px;}
  50%  {background-color:blue; left:200px; top:80px;}
  75%  {background-color:green; left:200px; top:100px;}
  100% {background-color:red; left:200px; top:200px;}
}

/*BOTAO-17-ANIMACAO*/

.label-box-17 {
	display:block;
	font-size:16px;
	width:40px;
	height:40px;
	position:absolute;
	font-weight:bolder;
	line-height:40px;
	text-align:center;
	margin:21px;
	/*padding:10px;*/
	border-radius: 50px;
	text-decoration:none;
	/*color: black;*/
  	background-color:white;
	box-shadow: 2px 2px 10px black;
	cursor:pointer;
	animation-name: botao17;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	
}

label-box-17:a {
  color: black;
  background-color:white;
  text-decoration:none;
}

label-box-17:hover {
	color: white;
	background-color:black;
	text-decoration:none;
	transition-duration: 0.5s;
}

@keyframes botao17 {
  0%   {background-color:red; left:200px; bottom:0px;}
  25%  {background-color:yellow; left:200px; bottom:40px;}
  50%  {background-color:blue; left:200px; bottom:80px;}
  75%  {background-color:green; left:200px; bottom:100px;}
  100% {background-color:red; left:200px; bottom:200px;}
}


/*BOTAO-19-ANIMACAO*/

.label-box-19 {
	display:block;
	font-size:16px;
	width:40px;
	height:40px;
	position:absolute;
	font-weight:bolder;
	line-height:40px;
	text-align:center;
	margin:21px;
	/*padding:10px;*/
	border-radius: 50px;
	text-decoration:none;
	/*color: black;*/
  	background-color:white;
	box-shadow: 2px 2px 10px black;
	cursor:pointer;
	animation-name: botao19;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	
}

label-box-19:a {
  color: black;
  background-color:white;
  text-decoration:none;
}

label-box-19:hover {
	color: white;
	background-color:black;
	text-decoration:none;
	transition-duration: 0.5s;
}

@keyframes botao19 {
  0%   {background-color:red; left:150px; top:0px;}
  25%  {background-color:yellow; left:150px; top:40px;}
  50%  {background-color:blue; left:150px; top:80px;}
  75%  {background-color:green; left:150px; top:100px;}
  100% {background-color:red; left:150px; top:200px;}
}

/*BOTAO-21-ANIMACAO*/

.label-box-21 {
	display:block;
	font-size:16px;
	width:40px;
	height:40px;
	position:absolute;
	font-weight:bolder;
	line-height:40px;
	text-align:center;
	margin:21px;
	/*padding:10px;*/
	border-radius: 50px;
	text-decoration:none;
	/*color: black;*/
  	background-color:white;
	box-shadow: 2px 2px 10px black;
	cursor:pointer;
	animation-name: botao21;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	
}

label-box-21:a {
  color: black;
  background-color:white;
  text-decoration:none;
}

label-box-21:hover {
	color: white;
	background-color:black;
	text-decoration:none;
	transition-duration: 0.5s;
}

@keyframes botao21 {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:20px; top:20px;}
  50%  {background-color:blue; left:50px; top:50px;}
  75%  {background-color:green; left:100px; top:100px;}
  100% {background-color:red; left:150px; top:150px;}
}


/*BOTAO-23-ANIMACAO*/

.label-box-23 {
	display:block;
	font-size:16px;
	width:40px;
	height:40px;
	position:absolute;
	font-weight:bolder;
	line-height:40px;
	text-align:center;
	margin:21px;
	/*padding:10px;*/
	border-radius: 50px;
	text-decoration:none;
	/*color: black;*/
  	background-color:white;
	box-shadow: 2px 2px 10px black;
	cursor:pointer;
	animation-name: botao23;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	
}

label-box-23:a {
  color: black;
  background-color:white;
  text-decoration:none;
}

label-box-23:hover {
	color: white;
	background-color:black;
	text-decoration:none;
	transition-duration: 0.5s;
}

@keyframes botao23 {
  0%   {background-color:red; right:0px; top:0px;}
  25%  {background-color:yellow; right:50px; top:50px;}
  50%  {background-color:blue; right:100px; top:100px;}
  75%  {background-color:green; right:180px; top:180px;}
  100% {background-color:red;right:200px; top:200px;}
}

checkbox1, checkbox9, checkbox15, checkbox21{
	visibility:hidden;
}


/*CONTADOR*/

.counter-reset{
   counter-reset: checkboxcounter;
}

.counter-print::after{
   content: "Total: " counter(checkboxcounter);
   position: absolute;
   font-size: 20px;
   font-weight:bolder;
   line-height: 30px;
   text-align: center;
    text-shadow: white 1px 1px;
   display: block;
   width: 150px;
   height: 30px;
   margin:-50px 0px 0px 0px;
   background-color:#FC0;
   box-shadow: 2px 2px 10px black;
   border-radius: 4px;
}

.meu-checkbox:checked{
   counter-increment: checkboxcounter;
   visibility:hidden;
}

/*CONTADOR*/

}