.container {
  width: 90%;
  margin: 50px auto;
}
.heading {
  text-align: center;
  font-size: 30px;
  margin-bottom: 50px;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-flow: wrap;
}

.card {
  width: 45%;
  background: #fff;
  border: 1px solid #ccc;
  margin-bottom: 50px; /* ESPAÇO DA ALTURA DE UM BLOCO PRA OUTRO  */
  transition: 0.3s;
}

.card-header > h1 , h2 { font-weight: 700; }

.card-header {
  line-height: 0px; /* ESPAÇO DE UM TEXTO pra outro ABAIXO */
  text-align: center;
  /*padding: 50px 10px;  PRIMEIRO ESPACAMENTO ALTURA... SEGUNDo DISTANCIA LATERAIs */
    padding: 20px 10px;  /* PRIMEIRO ESPACAMENTO ALTURA... SEGUNDo DISTANCIA LATERAIs */
  /*padding-top: 20px;  /* PRIMEIRO ESPACAMENTO ALTURA... SEGUNDo DISTANCIA LATERAIs */

  background: linear-gradient(to right, #ff416c, #ff4b2b);
  color: #fff;
}

.card-body {
  /*padding: 30px 20px;  PRIMEIRO ESPACAMENTO ALTURA... SEGUNDo DISTANCIA LATERAIs */
  padding: 30px 0px; /* PRIMEIRO ESPACAMENTO ALTURA... SEGUNDo DISTANCIA LATERAIs */
  text-align: center;
  font-size: 18px;
}

.card-body .btn {
  font-weight: 700;
  display: block;
  color: #fff;
  text-align: center;
  background: linear-gradient(to right, #ff416c, #ff4b2b);
  margin-top: 30px;
  text-decoration: none;
  padding: 10px 5px;
}

.btn:hover {
  background: orange;
}
.btn:focus {
  background: black;
}




.card-body > .BOT_LOT:hover {
  color: white;
  background: #0d0d0d;
}
.card-body > .BOT_LOT:focus {
  color: white;
  background: #1a0d00;
}

.card-body > .BTN_GRADI_QUINA{
  color: #fff;
  text-align: center;
  background: linear-gradient(to right, #3333ff, #000066);
}

.card-body > .BTN_GRADI_DIASORTE{
  color: #fff;
  text-align: center;
  background: linear-gradient(to right, #ffb31a, #996600);
}



/* ----------------------- */
/* ----------------------- */
/* ----------------------- */
/* ----------------------- */
.card-body > .BOTAO_VOLTAR__PAG_PRINCIPAL, .card-body > .BOTAO_VER_RESUL_COMPLETO{
  color: #fff;
  text-align: center;
  background: linear-gradient(to right, #4d4dff, #0000ff);
}



.card-body > .BOTAO_VOLTAR__PAG_PRINCIPAL:hover, .card-body > .BOTAO_VER_RESUL_COMPLETO:hover{
  color: black;
  text-align: center;
  background: linear-gradient(to right, #ff5c33, #ff3300);
}



.card-body > .BOTAO_VOLTAR__PAG_PRINCIPAL:focus, .card-body > .BOTAO_VER_RESUL_COMPLETO:focus{
  color: black;
  text-align: center;
  background: linear-gradient(to right, #ffff00, #ffff00);
}

/* ----------------------- */
/* ----------------------- */
/* ----------------------- */
/* ----------------------- */
/* ----------------------- */

.card-body > .BOTAO_VER_ARTIGO{
  color: #fff;
  text-align: center;
  background: linear-gradient(to right, #ff0066, #80002a);
}



.card-body > .BOTAO_VER_ARTIGO:hover{
  color: black;
  text-align: center;
  background: linear-gradient(to right, #ff5c33, #ff3300);
}



.card-body > .BOTAO_VER_ARTIGO:focus{
  color: black;
  text-align: center;
  background: linear-gradient(to right, #ffff00, #ffff00);
}

/* ----------------------- */
/* ----------------------- */
/* ----------------------- */
/* ----------------------- */
/* ----------------------- */




.card-body > .BTN_GRADI_MEGASENA{
  color: #fff;
  text-align: center;
  background: linear-gradient(to right, #00b300, #004d00);
}


.card-body > .BTN_GRADI_LOTOFACIL{
  color: #fff;
  text-align: center;
  background: linear-gradient(to right, #ff33cc, #b30086);
}


.card-body > .BTN_GRADI_LOTOMANIA{
  color: #fff;
  text-align: center;
  background: linear-gradient(to right, #ff8533, #ff6600);
}


.card-body > .BTN_GRADI_DUPLASENA{
  color: #fff;
  text-align: center;
  background: linear-gradient(to right, #ff1a1a, #800000);
}


.card-body > .BTN_GRADI_TIMEMANIA{
  color: black;
  text-align: center;
  background: linear-gradient(to right, #ffff4d, #ffff00);
}


.card-body > .BTN_GRADI_SUPERSETE{
  color: black;
  text-align: center;
  background: linear-gradient(to right, #1aff1a, #00b300);
}







.card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 40px -10px rgba(0, 0, 0, 0.25);
}

@media screen and (max-width: 1000px) {
  .card {
    width: 40%;
  }
}

@media screen and (max-width: 620px) {
  .container {
    width: 100%;
  }

  .heading {
    padding: 20px;
    font-size: 20px;
  }

  .card {
    width: 80%;
  }
}