*{margin:0px; padding:0px;box-sizing:content-box;}
.conte{min-height:500px;width:100%;display:flex;flex-flow:column;justify-content:center;align-items:center;}
table,tr,th,td{border:1px solid black;border-collapse:collapse;}
th,td{padding:0.5rem 1rem}
.rwcc, .inputs{height:auto;width:100%;display:flex;flex-flow:row wrap;justify-content:center;align-items:center;}
.brujula{height:400px;width:400px;position:relative}
.flecha{height:300px;width:30px;position:absolute;left:196px;top:60px;opacity:0.8}
.rot{animation:procesoac 2s 0s linear forwards;}
.btn { height:30px;width:100px;padding:10px;background:orange;color:white;border-radius:10px;cursor:hand;cursor:pointer;}
.divco{width:100%;font-size:1.2rem;color:black;display:flex;flex-flow:column;justify-content:center;align-items:center;margin-top:2rem}
label{width:50%;display:flex;flex-flow:row wrap;justify-content:center;align-items:center;margin-bottom:1rem}
h3{width:auto;}
.inco{width:50%;margin:0 1rem;border:1px solid black;font-size:1.2rem;text-align:center;}
.cttb{width:100%;display:flex;flex-flow:row;justify-content:center;align-items:center;}
@keyframes procesoac{
from {
	transform:rotate(0deg);
  }
  to {
  transform:var(--my-var);
 }
}
@media(max-width:550px){
.inputs{width:100%;display:flex;flex-flow:column;justify-content:center;align-items:center;margin-bottom:1rem}
label{width:100%;display:flex;flex-flow:column;justify-content:center;align-items:center;margin-bottom:1rem}
h3{display:block;width:100%;text-align:center}
.inco{width:90%;margin:0 1rem;border:1px solid black;font-size:1.2rem;text-align:center;}
th,td{padding:0.2rem 0.3rem}
.cttb{width:100%;display:flex;flex-flow:row;justify-content:flex-start;align-items:center;}
}
.off{display:none}