body, h1,h2,h3,h4,h5,h6 {font-family: "Montserrat", sans-serif}
.w3-row-padding img {margin-bottom: 12px}
.bgimg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url('images/shield2.png');
  background-color:#fdf5e6;
  min-height: 100%;
  max-width: 100%;
}
.bgimg2 {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('images/about.jpg');
  background-color:#fdf5e6;
  min-height: 100%;
}
.bgimg2-faqs {
  background-position: center;
  background-repeat: repeat;
  background-size: contain;
  background-image: url('images/story.jpg');
  background-color:#fdf5e6;
  min-height: 100%;
}
.bgimg2a {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url('images/boton.png');
  background-color:#fdf5e6;
  min-height: 100%;
}
.bgimg3 {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('images/homeland.png');
  background-color:#fdf5e6;
  min-height: 100%;
  max-width: 100%;
}
.bgimg4 {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url('images/teams.png');
  background-color:#fdf5e6;
  min-height: 100%;
  max-width: 100%;
}
.topleft {
  position: absolute;
  top: 28px;
  left: 16px;
  font-size: 18px;
}

.w3-pink{
background-color:#ff1d5d;
color:#000;
}
.bottom-left{
  position: absolute;
  text-align: center;
  bottom: 8px;
  left: 16px;
}	
.container-heroes {
  position: relative;
  text-align: center;
  color: white;
}
	
.h1 {
  font-size: 18px;
}

<!-- // this is the other example --> 

* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: block;
}

[class*="col-"] {
  float: left;
  padding: 0px;
}

html {
  font-family: "Lucida Sans", sans-serif;
}


.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 0px;
  margin-bottom: 0px;
  background-color: #ffffff;
  color: #ffffff;
  box-shadow: none;
}

.menu li:hover {
  background-color: #0099cc;
}


/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.col-8-team {width: 66.66%;padding-top:6%;}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
.bottom-left{
  position: absolute;
  text-align: center;
  bottom: -28px;
  left: 16px;
}  
}


/* image effects */
.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}
.container {
  position: relative;
  max-width: fit-content;
  margin: 0 auto;
}
.container-boton {
  position: relative;
  max-width: none;
  margin: 0 auto;
}

.container img {vertical-align: middle;}

.container .content {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0); /* Fallback color */
  background: #ff1d7c29;
  color: #f1f1f1;
  width: 100%;
  padding: 0px;
  padding-left: 1px;
}

.p {
  font-size: 10px
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}
.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
.text {
  background-color: #04AA6D;
  color: white;
  font-size: 10px;
  padding: 16px 32px;
}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}