/* FONTS --------------------------------------------------------- */
@font-face{
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Regular.woff2') format('woff2'),
      url('../fonts/Roboto-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face{
  font-family: 'RobotoBold';
  src: url('../fonts/Roboto-Bold.woff2') format('woff2'),
      url('../fonts/Roboto-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

/* BENEFITS --------------------------------------------------------- */
.main-benefits{
  min-width: 320px;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #666766;
  font-weight: 400;
  overflow-x: hidden;
  word-wrap: break-word;
}
.main-benefits h3{
  font-size: 3rem;
}
.main-benefits strong{
  font-family: 'RobotoBold', Arial, Helvetica, sans-serif;
}
.main-benefits .text-green{
  color: #116F71;
}
.main-benefits .container.smallBox{
  max-width: 890px;
}
.main-benefits .btnCustom{
  font-family: 'RobotoBold', Arial, Helvetica, sans-serif;
  display: inline-block;
  background: #116F71;
  font-size: 25px;
  color: #FFFFFF;
  border: 0;
  border-radius: 0;
  width: 100%;
  max-width: 540px;
  padding: 20px;
  cursor: pointer;
  text-align: center;
}
.main-benefits .btnCustom.btnOver{
  position: absolute;
  font-size: 14px;
  bottom: 20px;
  width: 130%;
  padding: 10px 20px;
}
.main-benefits .backgroundGreenLight{
  background: #377E84;
}
.main-benefits .backgroundGreenTransparent{
  background: rgba(17, 111, 113, 0.7)
}
.main-benefits .backgroundGrey{
  background: #F2F2F3;
}
.main-benefits .hero.benefits{
  background: url('../img/hero-benefits.jpg') no-repeat center right;
}
.main-benefits .hero.benefit-dental{
  background: url('../img/hero-benefit-dental.png') no-repeat center right;
}
.main-benefits .hero.benefit-hogar{
  background: url('../img/hero-benefit-hogar.png') no-repeat center right;
}
.main-benefits .hero.benefit-compra{
  background: url('../img/hero-benefit-compra.png') no-repeat center right;
}
.main-aep-v2 .mainBanner .bannerColumn .bannerImage {
  background-position: center right !important;
  background-size: cover !important;
}
.main-benefits .dentalBox{
  background: url('../img/mas-beneficios-dental.jpg') no-repeat center right;
}
.main-benefits .hogarBox{
  background: url('../img/mas-beneficios-ayudahogar.jpg') no-repeat center right;
}
.main-benefits .compraBox{
  background: url('../img/bg-compra-sm.png') no-repeat center right;
}
.main-benefits .otcBox{
  background: url('../img/mas-beneficios-otc.jpg') no-repeat center right;
}
.main-benefits .mesaBox{
  background: url('../img/mas-beneficios-atumesa.jpg') no-repeat center right;
}
.main-benefits .tarjetaBox{
  background: url('../img/mas-beneficios-flexicard.jpg') no-repeat center right;
}
.main-benefits .smartphoneBox{
  background: url('../img/mas-beneficios-smartphone.jpg') no-repeat center right;
}
.main-benefits .hero h2{
  font-family: 'RobotoBold', Arial, Helvetica, sans-serif;
  font-size: 5.3rem;
  line-height: 5.3rem;
}
.main-benefits .benefitBox > div{
  width: 100%;
  padding-top: 100%; /* 1:1 Aspect Ratio */
  position: relative; /* If you want text inside of it */
  background-size: cover;
}
.main-benefits .compraBox{
  background: url('../img/bg-compra-sm.png') no-repeat center center;
}
.main-benefits .benefitBox > div > div{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 20px;
}
.main-benefits .benefitBox h3{
  font-family: 'RobotoBold', Arial, Helvetica, sans-serif;
  font-size: 2.2rem;
  color: #FFFFFF;
}
.main-benefits .benefitBox p{
  font-size: 1.3rem;
  color: #FFFFFF;
  margin: 20px 0;
}
.main-benefits .benefitBox .brandBox{
  color: #FFFFFF;
}
.main-benefits .brandTitle{
  font-size: 3rem;
}
.main-benefits .bannerFull{
  min-height: 440px;
}
.main-benefits .bannerFull.nutrimas{
  background: url('../img/banner-nutrimas.jpg') no-repeat center center;
  background-size: cover;
}
.main-benefits .planDetalleItems{
  width: 100%;
}
.main-benefits .planDetalleItems li{
  font-family: 'RobotoBold', Arial, Helvetica, sans-serif;
  margin: 15px 0;
  font-size: 2rem;
}
.main-benefits .planDetalleItems li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  font-size: 35px;
  line-height: 35px;
  color: #D9E25A; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 0.7em; /* Also needed for space (tweak if needed) */
  flex: 0 0 25px;
}
.main-benefits .socialFooter{
  padding: 30px;
}
.main-benefits .socialFooter i{
  font-size: 30px;
}
.main-benefits .socialFooter li{
  font-family: 'RobotoBold', Arial, Helvetica, sans-serif;
  font-size: 16px;
  margin: 0 5px;
}
.main-benefits .socialFooter li:first-child{
  margin-right: 20px;
}
@media (max-width: 767.98px){
  .main-benefits .bannerFull.nutrimas {
    background-position-x: -600px;
  }
  .main-benefits .benefitBox p {
     font-size: 1.5rem;
  }
  .main-benefits .benefitBox h3{
    font-size: 1.8rem;
  }
}