grid-container {
  justify-content: center;
  padding: 20px;
  margin: 0 auto;
  border: none;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-column-gap: 40px;
  grid-row-gap: 50px;
}

.mastergrid {
  margin-top: 20px;
  justify-content: center;
  border-radius: 20px;
  max-width: 1200px;
}

.grid-principal {
  text-align: center;
  grid-column-start: 1;
  grid-column-end: 5;
}

.grid-principal h2 {
  font-style: normal;
  font-weight: bold;
  line-height: 42px;
  text-align: center;
  color: #FFFFFF;
}

.nivel {
  width: 250px;
  height: 230px;
  border-radius: 30px;
  grid-area: "nivel";
  text-align: center;
  background-color: #fff;
}

/* ContainerGrid da Legenda do card*/
.nivelleg {
  display: grid;
  grid-column: 1 / 3;
}

/* Grid da Legenda do card*/
.nivel1 {
  grid-area: 1;
}

.nivel img {
  width: 50%;
  margin-top: 10px;
}

.nivel p {
  margin-top: 10px;
  font-style: normal;
  font-weight: bold;
  line-height: 42px;
  text-align: center;
  color: #DB0000;
}

.nivel h4 {
  margin-top: 5px;
  color: rgb(0, 0, 0);
}

@media (max-width: 1165px) {
  grid-container {
    padding: 20px;
    margin: 0 auto;
    border: 0px solid #fff;
    grid-gap: 40px;
    grid-row-gap: 50px;
    grid-template-columns: auto auto;
  }

  .grid-principal {
    grid-column: 1 / 3;
  }
}

.mastergrid {
  grid-column: 1 / 3;
  max-width: 600px;
  padding: 20px;
}

@media (max-width: 570px) {
  grid-container {
    grid-template-columns: auto;
    justify-content: center;
    margin: 0 auto;
    border: 0px solid #fff;
    grid-gap: 40px;
    grid-row-gap: 50px;
    grid-column: 1 / 1;
  }

  .grid-principal {
    text-align: center;
    grid-column: 1 / 1;
  }

  .grid-principal h2 {
    padding: 20px;
  }

  .mastergrid {
    max-width: 286px;
    padding: 20px;
  }
}
.blood01{
  content:url('../img/bloodlevel/bloodlevel-3.png');
}
.blood02 {  
  content:url('../img/bloodlevel/bloodlevel-2.png');  
}
.blood03 {
  content:url('../img/bloodlevel/bloodlevel-1.png')
}
.rangeslider{
  padding-top: 10px;
}