/* Global ============================================================ */
body {
  justify-content: center;
  overflow-x: hidden;
}

.opcoes {
  margin: 3rem 3rem 0 3rem;
}

.caixas {
  display: grid;
  justify-content: row;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  grid-column: calc(1/2);
}

#caixa {
  max-width: 433px;
  min-width: 25%;
  justify-content: center;
  display: grid;
  margin: 15px 3% 0px 3%;
  border-radius: 2px;
  position: relative;
  box-shadow: 1px 1px 1px 2px rgba(0, 0, 0, 0.274);
}

.caixas h3, #radio-button, .image, p {
  margin: 0px auto 0px auto;
}

.caixas p {
  font-size: 100%;
  margin-left: 3%;
  margin-right: 3%;
}

#container-botao {
  position: center;
  display: flex;
  justify-content: center;
}

.button {
  margin: auto;
  margin-top: 1rem;
  background-color:#979797;
  border-radius: 6px;
  border:1px solid #888888;
  cursor:pointer;
  color:#ffffff;
  width: 172px;
  padding:20px 50px;
  text-decoration:none;
  text-shadow:0px 1px 0px #000000;
  z-index: 1;
}

#warning{
  visibility: hidden;
  color:#ff0000;
}

#botao-warning {
  display: flex;
  justify-content: center;
}

#botao-warning .active {
  visibility: visible;
}

@media screen and (max-width: 1200px) {
  .caixas {
    flex-direction: column;
    margin: 20px auto auto auto;
  
  }

  #caixa {
    max-width: 300px;
    margin: auto;
    
  }
  
  .caixas .image {
    width: 90%;
  }
}