/*
  /////////////////////////////
    Sustentabilidad variables
  /////////////////////////////
*/

:root {
  --Yellow: #FFB804;
  --Yellow100: #FFA200;
  --YellowNeutrum: #DCFF00;
  --Green50: #9EF01A;
  --Green100: #00D959;
  --Green200: #49CC4B;
  --Green300: #83B12A;
  --Green400: #63930a;
  --Green450: #83B12A;
  --GreenSustentabilidad: #C3DB72;
  --GreenNeutrum: #013519;
  --Red100: #C4361B;
  --Purple100: #A296F4;
  --Purple200: #5E1E72;
  --LightBlue: #4ACBE2;
  --Blue200: #158EAB;
  --Blue100: #158EAB;
  --Blue400: #3093B6;
  --Aqua: #4ACBE2;
  --DarkAqua: #1AAABF;
  --LinearGradient: linear-gradient(90deg, #FF6B00 0%, #622398 63.20%, #002D74 100%);
  --LinearGradientGreen: linear-gradient(to right, #92eb36, #50cdd1);
  --Gray300: #D0D5DD;
  --White: #FFF;
}

.text-gradient, .text-gradient sub, .text-gradient sup {
  background: var(--LinearGradientGreen);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/*
   /////////////////////////////
    Textos
  /////////////////////////////
*/

h1, .h1 {
  font-size: 3rem;
}
@media(max-width:768px) {
  h1, .h1 {
    font-size: 2.5rem;
  }
}

/*
   /////////////////////////////
    Contenedores de img fluida
  /////////////////////////////
*/
.sust-row-img {
    min-height:450px;
}

@media(min-width:769px) {
  section.sust-row-img {
    align-items: center;
    display: flex;
  }
}

@media(max-width:768px) {
  .sust-row-img img.object-fit-cover, .sust-row-img picture {
    position: relative !important;
    width: 100% !important;
    height: 300px !important;
  }
  .sust-row-img {
    min-height: fit-content;
  }
}

/*
   /////////////////////////////
    Sustentabilidad Colores
  /////////////////////////////
*/
.purple-100 {
  color: var(--Purple100);
}
.green-50 {
  color: var(--Green50) !important;
}
.green-100 {
  color: var(--Green100) !important;
}
.green-300 {
  color: var(--Green300) !important;
}
.green-neutrum {
  color: var(--GreenNeutrum) !important;
}
.blue-200 {
  color: var(--Blue200) !important;
}
.yellow-100 {
    color: var(--Yellow100);
}
.light-blue {
  color: var(--LightBlue);
}
.yellow-neutrum {
  color: var(--YellowNeutrum);
}
.yellow-100 {
  color: var(--Yellow100);
}
.yellow {
    color: var(--Yellow);
}
.aqua {
  color: var(--Aqua);
}
.dark-aqua {
  color: var(--DarkAqua)
}

.light-green {
  color: var(--GreenSustentabilidad);
}
.red-100 {
  color: var(--Red100) !important;
}
.text-gradient {
  background: var(--LinearGradientGreen);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/*
   /////////////////////////////
    Sustentabilidad Backgrounds
  /////////////////////////////
*/

.bg-purple {
  background-color: var(--Purple100);
}
.bg-light-blue {
  background-color: var(--LightBlue);
}
.bg-aqua {
  background-color: var(--Aqua);
}
.bg-dark-aqua {
  background-color: var(--DarkAqua)
}
.bg-blue-200 {
  background-color: var(--Blue200) !important;
}
.bg-blue-400 {
  background-color: var(--Blue400);
}
.bg-green {
  background-color: var(--Green200);
}
.bg-green-400 {
  background-color: var(--Green400);
}
.bg-light-green {
  background-color: var(--GreenSustentabilidad);
}
.bg-green-neutrum {
  background-color: var(--GreenNeutrum);
}
.bg-yellow-neutrum {
  background-color: var(--YellowNeutrum);
}
.bg-yellow {
  background-color: var(--Yellow);
}

.bg-dark-gray {
    background-color: var(--Gray300);
    color: var(--White)
}

/*
   /////////////////////////////
    highlight numeros verdes grandes
  /////////////////////////////
*/

.data-marker {
  font-size: 80px !important;
  font-weight: 500;
}

.data-highlight {
  font-size: 80px;
  font-weight: 700;
  /*text-shadow: 2px 2px 3px #0000005c;*/
}


.data-highlight-text {
  font-size: 28px;
  font-weight: 700;

}

.sustainability-border:after {
  content: '';
  width: 1px;
  height: 25%;
  position: absolute;
  background: var(--Blue600);
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
}

.sust-highligth-block {
  min-height: 350px;
}

@media(max-width:990px){
  .sust-highligth-block {
    min-height: fit-content;
  }
  .sustainability-border:after {
    display:none;
  }
}

/*
   /////////////////////////////
    Sustentabilidad banners
  /////////////////////////////
*/
a.btn-cta.btn-wh.orange-600.btn-small {
  color: var(--Orange600) !important;
}

  .sustentabilidad-banner:before {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #0000003d !important;
    content: '';
    z-index: 2;
  }

  .sustentabilidad-banner .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
  }

.neutrum-lightgreen {
  color: var(--neutrumLightGreen) !important;
}

.sustentabilidad-banner {
  height: 75vh;
  position: relative;
}


.img-overflow-right img {
  object-position: left;
  right: 0;
}

.img-overflow-container img {
  right: 0;
  object-position: left;
}

.overflow-left.img-overflow-container img {
  left: 0;
  object-position: right;
}

@media (max-width: 767px) {

  section#gestion-sustentable picture {
    position: relative !important;
  }

  section.img-overflow-container {
    height: fit-content !important;
  }

  .img-overflow-container picture {
    position: relative;
    padding: 0px;
    height: 300px !important;
  }

  .img-overflow-container img {
    height: 100% !important;
    position: relative !important;
    width: 100% !important;
    right: auto;
    top: auto !important;
    object-fit: cover !important;
  }

  .overflow-left.img-overflow-container img {
    object-position: right !important;
  }
}
/*
   /////////////////////////////
    Sustentabilidad navbar
  /////////////////////////////
*/
.nav--list-item a{
    transition:0.3s all;
}

  .nav--list-item a:hover {
    color: var(--Orange600) !important;
  }

/*  @media (max-width: 1299px) AND (min-width: 991px) {
    .nav--list-item a {
      font-size: 16px !important;
    }
  }*/

.nav--list-item a {
  font-size: 1.2rem;
}
@media (max-width:1360px) {
  .nav--list-item a {
    font-size: 1rem;
  }
}
@media (max-width:1199px) {
  .nav--list-item {
    width: 100%;
    display: flex;
    flex-flow: column;
    justify-content: start;
    align-items: start;
  }
  .nav--list-item a {
    font-size: 1.2rem;
    width: 100%;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
  }

  .sust-sub-menu {
    position: relative;
    border: none;
    transition: 0.3s all;
  }
}

  @media (max-width:991px) {
    .nav--list-item a {
      font-size: 1.2rem;
    }
  }