* {
  margin: 0;
  padding: 0;
}

body {
  background: rgb(123, 158, 158);
}

/* "contenedor" donde están los hexágonos */

#hexGrid {
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  margin: 0 auto;
  /*   overflow: visible; */
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  list-style-type: none;
}

/* "contenedor" donde están los hexágonos */

.hex {
  position: relative;
}

.hex:after {
  content: '';
  display: block;
  padding-bottom: 86.602%;
  /* =  100 / tan(60) * 1.5 */
}

.hexagono {
  width: 85%;
  height: 85%;
  margin-top: 10%;
  cursor: pointer;
}

.hexagono:hover {
  opacity: 0.7;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#contenedor-pastillas {
  background-color: white;
  padding: 5%;
  width: 90%;
  opacity: 0.8;
  border-radius: 15px;
  margin-top: 105px;
}

.hexIn {
  position: absolute;
  /*   width:100%; */
  padding-bottom: 110.851%;
}

/* .navbar .nav-item .nav-link {
  padding-right: 6px;
  padding-left: 6px;
} */

/*** HEXAGON SIZING AND EVEN ROW INDENTATION *****************************************************************/

@media (min-width:1200px) {
  /* <- 5-4  hexagons per row */
  #hexGrid {
    padding-bottom: 4.4%;
  }
  .hex {
    width: 20%;
    /* = 100 / 5 */
  }
  .hex:nth-child(9n+6) {
    /* first hexagon of even rows */
    margin-left: 10%;
    /* = width of .hex / 2  to indent even rows */
  }
}

@media (max-width: 1199px) and (min-width:901px) {
  /* <- 3-2  hexagons per row -ORIGINAL = max-width: 900px-*/
  #hexGrid {
    padding-bottom: 7.4%;
    width: 50%;
  }
  .hex {
    width: 33.333%;
    /* = 100 / 3 */
  }
  .hex:nth-child(5n+4) {
    /* first hexagon of even rows */
    margin-left: 16.666%;
    /* = width of .hex / 2  to indent even rows */
  }
  .img-branel-logo-head {
    width: 115px;
    border-radius: 3px;
    margin-bottom: -70px;
    border: 2px solid white;
  }
}

@media (max-width: 900px) and (min-width:601px) {
  /* <- 3-2  hexagons per row -ORIGINAL = max-width: 900px-*/
  #hexGrid {
    padding-bottom: 7.4%;
    width: 70%;
  }
  .hex {
    width: 33.333%;
    /* = 100 / 3 */
  }
  .hex:nth-child(5n+4) {
    /* first hexagon of even rows */
    margin-left: 16.666%;
    /* = width of .hex / 2  to indent even rows */
  }
  .img-branel-logo-head {
    width: 105px;
    border-radius: 3px;
    margin-bottom: -50px;
    border: 2px solid white;
  }
}

@media (max-width: 600px) and (min-width: 451px) {
  /* <- 2-1  hexagons per row */
  #hexGrid {
    padding-bottom: 13.2%;
    width: 50%;
  }
  .hex {
    width: 50%;
    /* = 100 / 2 */
  }
  .hex:nth-child(3n+3) {
    /* first hexagon of even rows */
    margin-left: 25%;
    /* = width of .hex / 2  to indent even rows */
  }
  .hexagono {
    width: 85%;
    height: 85%;
  }
  #contenedor-pastillas .my-4 {
    margin: 1% !important;
  }
  .img-branel-logo-head {
    width: 95px;
    border-radius: 3px;
    margin-bottom: -50px;
    border: 2px solid white;
  }
}

@media (max-width: 450px) {
  /* <- 2-1  hexagons per row */
  #hexGrid {
    padding-bottom: 15%;
    width: 60%;
  }
  .hex {
    width: 50%;
    /* = 100 / 2 */
  }
  .hex:nth-child(3n+3) {
    /* first hexagon of even rows */
    margin-left: 25%;
    /* = width of .hex / 2  to indent even rows */
  }
  .hexagono {
    width: 91%;
    height: 91%;
  }
  #contenedor-pastillas .my-4 {
    margin: 1% !important;
  }
  .hexagono:hover {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -ms-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    transition: all 0.1s ease;
  }
  .img-branel-logo-head {
    width: 85px;
    border-radius: 3px;
    margin-bottom: -40px;
    border: 2px solid white;
  }
}