.bg-light-white{
    background-color:#f2f2f2 !important
}

.bg-gray{
    background-color: #95a2a7 !important
}

.bg-dark-gray{
    background-color:#23323e !important
}

.bg-pink{
    background-color:#E358A0 !important;
    background-image: url(/img/bg-desempleo.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    
}

.bg-yellow{
    background-color:#ffd800 !important
}

.bg-blue{
     background-color:#3f7ce8 !important;
     background-image: url(/img/salario-familiar/bg-salariofamiliar.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.bg-light-blue{
    background-color:#26b6cf !important
}

.bg-red{
    background-color:#E0004D !important;
    background-image: url(/img/bg-10ale.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    color:#23323e;
}
.bg-red span{color:#23323e !important;}
.bg-red span b{color:#E0004D !important;}

.hover-bars {
  position: relative;
  overflow: hidden;
}
.hover-bars .more {
  position: absolute;
  bottom: 0;
  right: 30px;
  z-index: 3;
  color: #fff;
}
.hover-bars.panel-open > img {
  opacity: 0.1;
}
.hover-bars .bars {
  width: 40vw;
  z-index: 4;margin-left: 110px;
}
.hover-bars .bars .mobile-panel {
  display: none;
}
.hover-bars .bars .bar {    cursor: pointer;
  display: block;
  width: 100%;
  font-size: 20px;
  line-height: 20px;
  font-weight: 600;
  text-align: center;
  transition: 300ms ease all;
   padding: 3rem !important;
   margin-bottom: 4px;
}
.hover-bars .bars .bar span {
  display: block;
  transition: 300ms ease all;
  color: #fff;
}
.hover-bars .bars .bar:hover, .hover-bars .bars .bar:focus, .hover-bars .bars .bar[aria-expanded=true] {
  color: #fff;
  /*width: calc(100% + 80px);*/
  box-shadow: 0px -10px 10px 0px rgba(10, 2, 40, 0.25);
}
.hover-bars .bars .bar:hover span, .hover-bars .bars .bar:focus span, .hover-bars .bars .bar[aria-expanded=true] span {
  font-weight: 700;
  transform: scale(1.25);
}
.hover-bars .info {
  width: 60vw;
  position: relative;
  margin-left: -140px;
}
.hover-bars .info .panel {
  position: absolute;
  width: calc(100% - 80px);
  height: 100%;
  top: 0;
  left: 80px;
  right: 0;
  bottom: 0;
  transition: 300ms ease all;
  padding: 0 5vw;
}
.hover-bars .info .panel[aria-hidden=true] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.hover-bars * {
  position: relative;
  z-index: 2;
}
.hover-bars > img {
  transition: 300ms ease all;
  position: absolute;
  z-index: 1;
  bottom: 0;
  right: 0;
  display: block;
  max-width: 82vw;
  height: auto;
  max-height: 100%;
}

.hover-bars .img{ width: 655px; max-width: 100%;}
#vamospormas .titulo{display: block;
    text-align: center;
        font-size: 2.5rem !important;}
#vamospormas .titulo strong{display: block;}
#vamospormas .icono{    width: 40px;
    display: inline-block;
    margin-right: 4px;}
#vamospormas .bar span{display: inline-block;font-family: 'LFT Etica Display Hv';
    font-size: 1.8rem;line-height: 1.7rem;}
#vamospormas{padding-bottom: 2rem;}

@media screen and (max-width: 768px) {
    
    #vamospormas .titulo{font-size: 2rem;width: 90%;
    margin: 0 auto;}
    #vamospormas .titulo strong{    display: inline;}
    
  .hover-bars > img {
    max-width: 100vw;
    margin-right: -5vw;
  }
  .hover-bars .more {
    width: 50vw;
    right: 0;
    text-align: center;
  }
}
@media screen and (max-width: 992px) {
    #vamospormas .bar span{
        font-size: 1.4rem;
    line-height: 1.3rem;
    }
    .hover-bars .bars,.hover-bars .info{margin-left: 0;}
  .hover-bars .more {
    position: relative;
    margin-top: 1.5rem;
    width: calc(95vw - 30px);
    left: 5vw;
    white-space: nowrap;
    font-size: 3.7vw;
    line-height: 3.7vw;
    padding: 14px;
  }
  .hover-bars > img {
    display: none;
  }
  .hover-bars .info {
    display: none;
  }
  .hover-bars .bars {
    width: 100vw;
  }
  .hover-bars .bars .mobile-panel {
    text-align: center;
    padding: 3rem 5vw;
  }
  .hover-bars .bars .mobile-panel[aria-hidden=false] {
    display: block;
  }
  .hover-bars .bars .bar {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4vw;
    line-height: 4vw;
    padding-left: 5vw !important;
    padding-right: 5vw !important;
    white-space: nowrap;
   
  }
  .hover-bars .bars .bar:hover, .hover-bars .bars .bar:focus, .hover-bars .bars .bar[aria-expanded=true] {
    width: 100%;
    box-shadow: none;
  }
  .hover-bars .bars .bar:hover span, .hover-bars .bars .bar:focus span, .hover-bars .bars .bar[aria-expanded=true] span {
    font-weight: 600;
    transform: none;
  }
  .hover-bars .bars .bar[aria-expanded=true]:after {
    transform: rotate(-180deg);
  }
  .hover-bars .bars .bar:after {
    display: block;
    content: "";
    width: 15px;
    height: 15px;
    background-image: url(/assets/images/icons/carrot.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    margin-left: 10px;
    transition: 300ms ease all;
  }
}