body, #container-timer, .card-header{
   transition: all ease 0.1s;
}
.circle{
  width: 350px;
  height: 350px;
  margin: 0 auto;
  padding: 0 10px;
  position: relative;
  text-align: center;
}
.circle span{
   display: none;
   transition: all ease 0.3s;
}

.circle span.animation-block{display: block;}

.circle strong, .circle span {
  position: absolute;
  top: 50%;
  left: 0;
  width: 350px;
  transform: translate(0%, -50%);
  text-align: center;
  line-height: 40px;
  font-size: 5.5rem;
  color: white;
  transition: all ease 0.3s;
}
.circle strong.animation-small{
   font-size: 1.5rem;
   top: 40%;
}
.circle canvas {
  max-width: 100%;
  max-height: 100%;
}
.card{
   width: 370px;
   min-height: 45vh;
   height: auto;
   margin: 150px auto;
   border: none;
}
.card-header{padding: 0;}
.settings{
   padding: 1rem 1.25rem 0  1.25rem;
}
.card-body{padding: 0 1.25rem 1.25rem 1.25rem;}
.card-body > p,
#table-count tbody, #table-pre-car tbody{font-size: 1.5rem;}
#inputs-timer{
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: row;
}
#inputs-timer > label{
   font-size: 3rem;
}
#inputs-timer > input{
   width: 100px;
   height: 100px;
   border: 0;
   font-size: 4rem;
   outline: none;
   text-align: center;
}
.container-settings > img{
   max-width: 250px;
   max-height: auto;
   margin-bottom: 10%;
}
.settings > img{
   max-width: 90px;
   max-height: auto;
}
.btn-lg{
   padding: 1rem;
   font-size: 1.7rem;
}
.nav-tabs, .nav-link{font-size: 0.79rem;}
.media > img{max-width: 50px; height: auto;}
.bg-10-segundos{
   background-color: #2e7d32;
}
.bg-descanso{ background-color: #b71c1c;}
@media (max-width: 576px){
   .card{
      width: 100%;
      /* min-height: 100vh; */
      margin: 0;
   }
};