#wrapper {
    margin-top: 0px;
}

.share .email a {
  background-image: url("https://static.univision.com/especiales/noticias/infografias/plantilla-infografia/template-2023/assets/email_transparent.png")
}
.entrada {
  background: #0A8664;
    max-width: 100%;
    color: #fff;
    padding-bottom: 54px;
    padding-top: 8px;
}

.entrada h1 {
  max-width: 326px;
  margin: 16px auto;
}
div.entradilla a {
  color: #ffffff;
  border-bottom: 1px solid #fff;
  padding-bottom:0.02em;
}

.before_title {
  background: #0A8664;
  max-width: 100%;
  text-align: center;
  margin: 0;
  padding: 48px 0 0;
}

.before_title img {
  max-width: 345px;
}

/*BEFORE TITLE ANIM*/
.before_title {
  position: relative;
}

.before_title .anim {
  width: 100%;
  height: 200px;
}
.before_title .anim img {
  position: absolute;
  position: absolute;
  top: calc(50% - 88px);
  left: calc(50% - 172px);
  transition: opacity 1s ease-in-out;
  opacity: 0;
}

.before_title .anim img.active {
  opacity: 1;
}

.entrada .autores, .entrada .autores a, .entrada .fecha {
  color: #fff;
}
.grafico_ai2, .graphic_video {
    margin: 0;
    padding-bottom: 80px;
}

.grafico_ai2 .paragraph {
  padding: 0;
}
.graphic_regular {
  margin: 0;
  padding-bottom: 40px;
}

.graphic_regular .paragraph {
  padding: 0;
}

.grafico_ai2 {
  padding: 0 15px;
}
.interactivo .paragraph, .interactivo h2 {
  padding: 0 15px;
}
.share .texto {
  color: #fff;
}
#sticky {
    position: sticky;
    position: -webkit-sticky;
    background-color: #fff;
    text-align: center;
    /* transition: all 1s; */
    height: 200px;
    top:0px;
    z-index: 20;
}
.dollar {
    position: relative;
    width: 90%;
    text-align: left;
    max-width: 180px;
    /* transition: all 1s; */
    color: #000;
    margin: 0 auto;
}

#sticky .drop {
    border: 0;
    height: 70px;
    position: relative;
    margin-top: -60px;
    bottom: 0;
    box-shadow: 4px 11px 13px -5px rgba(163,157,157,0.65);
    -webkit-box-shadow: 4px 11px 13px -5px rgba(163,157,157,0.65);
    -moz-box-shadow: 4px 11px 13px -5px rgba(163,157,157,0.65);
    width: calc(100% + 30px);
    left: -15px;
}
.shadespace {
    display: inline-block;
    width: calc(45% + 10px);
    text-align: center;
    width: 60px;
    /* transition: all 1s; */
}

#sticky .shadespace {
    display: none;
}
#sticky .shadespace.view {
    display: block;
}
.shadespace2 {
    margin-left: 47%;
}

.shadespace3 {
    margin-left: 69%;
}

.shadespace4 {
    margin-left: 79%;
}


.shadespace5 {
    margin-left: 81%;
}

.shadespace6 {
  margin-left: 84%;
}

.camt {
    margin-top: 16px;
    text-align: left;
    display: inline-block;
    padding: 3px 10px;
    margin-left: 0;
    color: #fff;
    background-color: #19B5B5;
    /* transition: all 1s; */
}

.shadespace1 .camt {
    margin-left:50%;
}
.shadespace2 .camt {
    background-color: #AD79BF;
}

.shadespace3 .camt {
    background-color: #E02E4B;
    margin-left: -30px;
}

.shadespace4 .camt {
    background-color: #C6BB45;
    margin-left: -30px;
}

.shadespace5 .camt {
  background-color: #70AAFA;
  margin-left: 0px;
}


.shadespace6 .camt {
  background-color: #AD79BF;
  margin-left: 0px;
}


.infor {
    position: relative;
    width: calc(45% + 0px);
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #000;
    margin-left: 0px;
    font-family: 'Roboto Condensed','sans-serif';
    font-weight: 700;
    line-height: 20px;
    font-size: 16px;
    /* transition: all 1s; */
}

#sticky .infor {
    display: none;
}
#sticky .infor.view {
    display: block;
}
.infor2 {
    width: 27%;
    margin-left: 45%;
}

.infor3 {
    width: 10%;
    margin-left: 72%;
}

.infor4 {
    width: 8%;
    margin-left: 82%;
}


.infor5 {
    width: 8%;
    margin-left: 90%;
}


.infor6 {
  width: 4%;
  margin-left: 98%;
}

.infor .texto {
    /* transition: all 1s; */
    width: 185px;
    margin-left: -40px;
    text-align: center;
    transition: opacity .1s;
    margin-bottom: -4px;
}

#sticky .infor .texto {
    display: none;
}
#sticky .infor.view .texto {
    opacity: 1;
    display: block;
}
.infor.infor2 .texto {
    margin-left: -73px;
}
.infor.infor3 .texto {
    margin-left: -90px;
}

.infor.infor4 .texto, .infor.infor5 .texto  {
    margin-left: -100px;
}

.infor.infor6 .texto {
  margin-left: -98px;
}
.infor::before {
    content: '';
    position: absolute;
    left:0;
    bottom:-8px;
    border-left: 1px solid #000;
    height: 8px;
    width: 1px;
}


.infor::after {
    content: '';
    position: absolute;
    right:0;
    bottom:-8px;
    border-right: 1px solid #000;
    height: 8px;
    width: 1px;
}

.paragraph.note {
  font-family: 'Roboto', serif;
  color:#808080;
  font-size: 14px;
  line-height: 21px;
}

.billete {
    position: relative;
}
.billete .shade {
    position: absolute;
    height: calc(100% + 10px);
    width: calc(45% + 0px);
    top:-5px;
    left: 0px;
 
    background-color: rgba(25, 181, 181, 0.30);
    border-right: 1px solid #19B5B5;
}


#sticky .billete .shade {
    display: none;
}
#sticky .billete .shade.view {
    display: block;
}
.billete .shade2 {
    border-right: 1px solid #AD79BF;    
    background: rgba(173, 121, 191, 0.30);
    width: 27%;
    left: 45%;
}

.billete .shade3 {
    border-right: 1px solid #E02E4B;
    background: rgba(224, 46, 75, 0.30);
    width: 10%;
    left: 72%;
}

.billete .shade4 {
    border-right: 1px solid #C6BB45;
    background: rgba(198, 187, 69, 0.30);
    width: 8%;
    left: 82%;
}

.billete .shade5 {
    border-right: 1px solid #70AAFA;
    background: rgba(112, 170, 250, 0.30);
    width: 8%;
    left: 90%;
}

.billete .shade6 {
  border-right: 1px solid #AD79BF;    
  background: rgba(173, 121, 191, 0.30);
  width: 4%;
  left: 98%;
}

/*INTERACTIVO 1*/
.interactivo {
    background: #FFF7E7;
    padding: 1px 0;
}

.interactivo h2 {
  margin-top: 32px;
  margin-bottom: 8px;
}

.interactivo.ia2 .monto1 {
    background-color: #AD79BF;
}

.interactivo .paragraph {
  font-family: Roboto, 'sans-serif';
  margin-top: 0;
  font-size: 16px;
  line-height: 24px;
}
.direcc {
    display: flex;
    max-width: 300px;
    margin: 24px auto;
    align-items: center;
}

.direcc .texto {
    color: var(--Colors-Palette-Grayscale-900, #000);
    text-align: right;
    font-family: Roboto Condensed;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 150% */
    letter-spacing: 1.6px;
    text-transform: uppercase;
    padding-right: 16px;
}

.monto1 {
    width: 100px;
    height: 40px;
    background: #19B5B5;
    color: #FFF;
    padding-top: 3px;
    text-align: center;
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Roboto Slab;
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px; /* 115.385% */
}
.deslizador {
    max-width: 622px;
    margin: 16px auto;
    padding: 10px;
    vertical-align: top;
    text-align: left;
    position: relative;
}

.categ {
    display: flex;
}

.categ .col {
    width: 100%;
}

.categ .col .titulo {
    color: var(--Colors-Palette-Grayscale-900, #000);
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Roboto Condensed;
    font-size: 18px;
    padding-left: 4px;
    font-style: normal;
    font-weight: 700;
    line-height: 23px; /* 127.778% */ 
    max-width: 200px;
}
.categ .icono {
    width: 40px;
    margin-right: 8px;
}
.slide_flex {
    display: flex;
}

.desl {
    width: 75%;
    padding-right: 20px;
    margin-top: 4px;
}
input[type=range] {
    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
    width: 100%; /* Specific width is required for Firefox. */
    background: transparent; /* Otherwise white in Chrome */
    pointer-events: none;
  }

  .barra {
    border-radius: 8px;
    height: 4px;
    outline: none;
    -webkit-appearance: none;
  }
  
  input[type='range']::-webkit-slider-thumb {
    width: 6px;
    -webkit-appearance: none;
    height: 12px;
    background: #FFA600;
    pointer-events: auto;
    border-radius: 2px;
  }
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
  }
  
  input[type=range]:focus {
    outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
  }
  
  input[type=range]::-ms-track {
    width: 100%;
    cursor: pointer;
  
    /* Hides the slider so custom styles can be added */
    background: transparent; 
    border-color: transparent;
    color: transparent;
  }
  
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    position: relative;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    background: #FFA600;
    z-index:10;
    pointer-events: auto;
    cursor: pointer;
    margin-top: 0px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
    box-shadow: 4px 11px 13px -5px rgba(163,157,157,0.65);
    -webkit-box-shadow: 4px 11px 13px -5px rgba(163,157,157,0.65);
    -moz-box-shadow: 4px 11px 13px -5px rgba(163,157,157,0.65);
  }
  
  /* All the same stuff for Firefox */
  input[type=range]::-moz-range-thumb {
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    z-index:10;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    pointer-events: auto;
    background: #FFA600;
    cursor: pointer;
    position: relative;
  
  }
  
  /* All the same stuff for IE */
  input[type=range]::-ms-thumb {
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    z-index:10;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    pointer-events: auto;
    background: #FFA600;
    cursor: pointer;
    position: relative;
  }
  
  input:focus{
      outline: none;
  }
  
  *:focus {
    outline: none;
  }

  
  input.valuebox {
    border: 0;
    width: 100%;
    height: 40px;
    font-family: 'Roboto Slab', 'serif';
    font-size: 20px;
  }
  
  #down_calc {
    width: 60%;
  }
  .valbox {
    color: #000;
    position: relative;
      background: rgba(255, 166, 0, 0.7);
      padding-left: 20px;
      max-width: 100px;
      font-size: 26px;
      margin-top: -20px;
  }
  
  .valbox input {
    background-color: rgba(255, 166, 0, 0);
  }
  .valbox:after {
  
    content: attr(data-format);
    position: absolute;
    top: 9px;
      left: 8px;
      font-size: 20px;
  }
  
  .valotro:after {
    content: attr(data-perc);
    position: absolute;
    top: 9px;
    right: 5px;
    font-size: 20px;
  }
  input.valuebox.percbox {
    width: 60px;
    text-align: right;
      padding-right: 22px;
  }
  .valview {
    position: relative;
    text-align: left;
  }
  .valview div{
    display: inline-block;
    width: 49%;
  }
  
  .valview div.viewmax {
    text-align: right;
    width: 50%;
    right: -3px;
    position: absolute;
  }
  .valbox {
    max-width: 65px;
    text-align: left;
    position: relative;
  }
  
  .valboxtasa {
    width: 100px;
  }
  .valbox .symbol {
    position: absolute;
    left: 6px;
    top: 9px;
    font-size: 17px;
  }
  .valbox .symbol {
    position: absolute;
    left: 6px;
    top: 9px;
    font-size: 17px;
  }
  
  .valbox .symbol.symbolperc {
    left: 91%;
  }
  
  .period {
    width: 100%;
    padding: 5px 0;
  }
  .period .texto {
    display: inline-block;
    width: 80%;
  
  }

  .quedan {
    width: 100%;
    max-width: 622px;
    margin: 8px auto 16px auto;
    color: var(--Colors-Palette-Grayscale-900, #000);
    text-align: center;
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Roboto;
    font-size: 18px;
    font-style: normal;
    display: flex;
    justify-content: center;
    font-weight: 400;
    line-height: 24px; /* 133.333% */
  }

  .quedan span {
    padding-right: 4px;
  }
  .quedan .icono {
    width: 28px;
    padding-right: 4px;
    margin-top: -2px;
  }
  .see_result {
    color: var(--Colors-Palette-Grayscale-900, #000);
    text-align: center;
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Roboto Condensed;
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 23px; /* 135.294% */
    background: #fff;
    border-radius: 8px;
    max-width: 200px;
    margin: 0 auto 16px;
    padding: 16px 0;
    cursor: pointer;
    pointer-events: none;
    opacity: 0.4;
    box-shadow: 2px 3px 5px -3px rgba(0,0,0,0.5);
    border: 1px solid #000;
  }

  .see_result:hover {
    background: #eeeeee;
  }

  .see_result.active {
    opacity: .4 !important
  }
  .boton {
    width: 32px;
    text-align: right;
    height: 12px;
    border-radius: 3px;
    border: 1px solid #FFA600;
    position: relative;
    cursor: pointer;
    background: #dbf0fe;
    display: inline-block;
  }
  
  .res_wrapper {
    height: 0;
    overflow: hidden;
    transition: height 1s;
  }

  .res_table {
    max-width: 622px;
    margin: 16px auto 24px;
    border: 1px solid #000;
    background: #fff;
    border-radius: 8px;
    padding: 16px;
  }

  .res_table .header{
    display: flex;
  }

  .res_table .header .empty {
    width: 100%;
  }

  .res_table .header .head {
    width: 100%;
    max-width: 90px;
    color: var(--Colors-Palette-Grayscale-900, #000);
    text-align: center;
    font-family: Roboto Condensed;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 21px; /* 140% */
    letter-spacing: 1.5px;
    margin: 0 8px;
  }

  .res_table .results .res {
    display: flex;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px dashed #000;
  }

  .res_table .results:last-of-type .res {
    border: 0;
  }
  .res_table .results .res .titulo {
    width: 100%;
    color: var(--Colors-Palette-Grayscale-900, #000);
    font-family: Roboto Condensed;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px; /* 140% */
    letter-spacing: 1.5px;
  }

  .res_table .nota .notita, .res_table .nota {
    color: #5F5F5F;
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px; /* 150% */
    margin: 20px 0;
  }

  .res_table .nota {
    font-family: Roboto Slab, 'serif';
    font-size: 16px;
    color: #000;
    line-height: 22px;
  }
  .res_table .results .res .result {
    width: 100%;
    max-width: 70px;
    text-align: center;
    padding: 3px 10px;
    background: rgba(255, 165, 0, 0.70);
    margin: 0 8px;
  }

  .res_table .results .res .icono {
    width: 100%;
    max-width: 43px;
    padding-right: 8px;
  }
  .res_table .results .res .result.real {
    background: #19B5B5;
    color: #fff;
  }
  .slid {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 15px;
    height: 10px;
    background: gray;
    transition: left .4s;
  }
  
  .slid.active {
    left:15px;
    background: #FFA600;
  }

  span.green {
    color: #fff;
    background-color: #19B5B5;
    padding: 2px 8px;
  }

  span.purple {
    color: #fff;
    background-color: #AD79BF;
    padding: 2px 8px;
  }

  span.red {
    color: #fff;
    background-color: #E02E4B;
    padding: 2px 8px;
  }

  span.gold {
    color: #fff;
    background-color: #C6BB45;
    padding: 2px 8px;
  }

  span.blue {
    color: #fff;
    background-color: #70AAFA;
    padding: 2px 8px;
  }

  .orange {
    background-color: #ffa600b3;
    padding: 2px 0 2px 2px;
  }

  .capitulo {
    max-width: 622px;
    margin: 0 auto;
    text-align: center;
  }
@media screen and (min-width: 768px) {
  .entrada {
      padding-top: 24px;
  }

  #sticky .drop {
    left: -30px;
  }
  .entrada h1 {
    max-width: 837px;
  }
    .before_title img {
      max-width: 445px;
    }

    .before_title .anim img {
      top: calc(50% - 100px);
      left: calc(50% - 220px);
    }
    #sticky {
        height: 230px;
    }

    .graphic_regular {
      margin: 0;
      padding-bottom: 48px;
    }

    .grafico_ai2 {
      padding: 0;
    }
    .desl {
      width: 100%;
    }
    .res_table .results .res .result {
      max-width: 90px;
    }
    
    .dollar {
        width: 100%;
        max-width: 240px;
        overflow: visible;
    }

    .interactivo h2, .interactivo .paragraph {
      padding: 0;
    }
  
}