@font-face {
  font-family: "gobold_regular";
  src: url("../fonts/gobold-regular-webfont.woff") format("woff"), url("../fonts/gobold-regular-webfont.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "gobold_bold";
  src: url("../fonts/gobold-bold-webfont.woff") format("woff"), url("../fonts/gobold-bold-webfont.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "gobold_thin";
  src: url("../fonts/gobold-thin-webfont.woff") format("woff"), url("../fonts/gobold-thin-webfont.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
}

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400&display=swap');

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {text-decoration: none;}

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

textarea {padding: 0;}

.timeline-container {
  width: 100%;
  position: relative;
  padding: 80px 0;
  transition: .3s ease 0s;
  /*background-image: url(../img/back.jpg) !important;*/
  background-attachment: fixed;
  background-size: cover;
  background-position-x: left;
  background-position-y: 150px;
  background-color: #232323;
  background-repeat: no-repeat;
}

.timeline-container:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
}

.timeline-header {
  width: 1200px;
  text-align: center;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}

.timeline-header.fixed-header {
  position: fixed;
  top: 0px;
}

.timeline-header__title {
  color: #FFF;
  font-size: 46px;
  font-family: "cardo_regular";
  font-weight: normal;
  margin: 0;
}

.flexslider:hover .flex-direction-nav .flex-next {right: -46px;}

.flexslider:hover .flex-direction-nav .flex-prev {left: -46px;}

.flex-direction-nav a {
  top: 68%;
  opacity: 1;
}

.flex-direction-nav .flex-next {
  background-image: url("../img/flecha.png");
  width: 36px;
  height: 28px;
  background-repeat: no-repeat;
  font-size: 0;
  background-position: center;
}

.flex-direction-nav .flex-next:before {
  content: none;
  display: none;
}

.flex-direction-nav .flex-prev {
  background-image: url("../img/flecha.png");
  width: 36px;
  height: 28px;
  background-repeat: no-repeat;
  transform: rotate(180deg);
  background-position: center;
  font-size: 0;
}

.flex-direction-nav .flex-prev:before {
  content: none;
  display: none;
}

#timeline-slider {
  width: 100%;
  background: none;
  border: none;
  padding: 20px 0;
  background: rgba(35,35,35,1);
  background: -moz-linear-gradient(top, rgba(35,35,35,1) 0%, rgba(35,35,35,0.5) 50%, rgba(35,35,35,0)) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(35,35,35,1)), color-stop(50%, rgba(35,35,35,0.5)), color-stop(100%, rgba(35,35,35,0)));
  background: -webkit-linear-gradient(top, rgba(35,35,35,1) 0%, rgba(35,35,35,0.5) 50%, rgba(35,35,35,0) 100%);
  background: -o-linear-gradient(top, rgba(35,35,35,1) 0%, rgba(35,35,35,0.5) 50%, rgba(35,35,35,0) 100%);
  background: -ms-linear-gradient(top, rgba(35,35,35,1) 0%, rgba(35,35,35,0.5) 50%, rgba(35,35,35,0) 100%);
  background: linear-gradient(to bottom, rgba(35,35,35,1) 0%, rgba(35,35,35,0.5) 50%, rgba(35,35,35,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#232323', endColorstr='#232323', GradientType=0 );
}

#timeline-slider .slider__conventions {
  width: 320px;
  height: 25px;
  margin: 0 auto;
  background: url("../img/timeline-convenciones.png") center/cover no-repeat;
}

#timeline-slider .slides {
  height: 60px;
  background: url("../img/timeline.png") 0 50%/1670px no-repeat;
}

#timeline-slider .slides .slider__year {
  margin: 60px 0 0;
  cursor: pointer;
}

#timeline-slider .slides .slider__year .year__text {
  font-family: "gobold_regular";
  font-size: 12px;
  color: #444;
  margin: 0;
}

#timeline-slider .slides .slider__year.year--active .year__text {color: #D9D9D9;}

#timeline-slider .slides .slider__year.year--active:hover .year__text {color: #FF2D00;}

#timeline-slider .slides .slider__year:hover .year__text {color: #444;}

.year-active-color{color: #FF2D00 !important;}

.timeline {
  display: flex;
  margin: 50px auto 0;
  flex-wrap: wrap;
  flex-direction: column;
  max-width: 1200px;
  position: relative;
}

.timeline__content {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.timeline__content-left, .timeline__content-right {
  width: 50%;
  padding: 3%;
  box-sizing: border-box;
}
.timeline__content-right .foto{
  width: 100%;
  margin: 10px 0;
  filter: saturate(0.35) brightness(125%);
  -webkit-filter: saturate(0.35) brightness(125%);
}

.timeline__content-right .musica, .timeline__content-right .video {margin: 10px 0;}

.timeline__content-title1 {
  font-family: "gobold_thin";
  margin: 15px 0;
  font-size: 16px;
  text-transform: lowercase;
  color: #FFF;
}

/*.timeline__content-title1--personal {color: #FFD34E;}

.timeline__content-title1--profesional {color: #0EEAFF;}

.timeline__content-title1--premios {color: #9768D1;}

.timeline__content-title1--riqueza {color: #B5E655;}*/

.timeline__content-title2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-family: "cardo_bold";
  font-size: 25px;
  color: white;
}

.timeline__content-year {
  font-family: "gobold_bold";
  position: relative;
  /*width: 37.2%;*/
  font-weight: normal;
  font-size: 80px;
  transition: .5s;
  padding: 0;
  /*border-bottom: 3px solid #9B8E7E;*/
  box-sizing: border-box;
  color: #D9D9D9;
  margin: 0;
  letter-spacing: -5px;
}

/*.timeline__content-year::after {
  display: block;
  position: absolute;
  bottom: -25px;
  content: "PERÍODO DE MANDATO";
  font-family: "cardo_regular";
  font-size: 13px;
  color: #9B8E7E;
}*/

.timeline__content-list {
  padding-left: 1em;
}

.timeline__content-list li {
  color: rgba(255, 255, 255, 0.9);
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5rem;
}

.timeline__content-list li::before {
  content: "\2022";
  color: #FFF;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

.timeline__content-text {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  margin: 0;
  font-size: 16px;
  box-sizing: border-box;
  color: rgba(255, 255, 255, 0.9);
  /*line-height: 25px;*/
}

.timeline:before {
  position: absolute;
  left: 50%;
  width: 2px;
  height: 100%;
  margin-left: 0px;
  content: "";
  background: rgba(255, 255, 255, 0.1);
}



/* line 424, src/scss/_style.scss */
.timeline-item {
  padding: 20px 0;
  opacity: .3;
  filter: blur(2px);
  transition: .5s;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  position: relative;
  transform: translateY(-50px);
  /* &:nth-child(even) {
      align-self: flex-end;
      &:before {
        right: auto;
        text-align: right;
        left: calc(-100% - 56px);
        padding-left: 0;
        border-left: none;
        border-right: 2px solid rgba(#fff, .5);
        padding-right: 15px;
      }
    } */
}

/* line 434, src/scss/_style.scss */
.timeline-item:before {
  content: attr(data-text);
  letter-spacing: 3px;
  position: absolute;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  /*font-family: "pathway_gothic_regular";*/
  border-left: 2px solid #FF2D00;
  top: 0;
  margin-top: -5px;
  padding: 50px 0;
  padding-left: 15px;
  opacity: 0;
  left: 50%;
}

.timeline-item--active {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0px);
}

.timeline-item--active:before {
  top: 50px;
  transition: .3s all .2s;
  opacity: 1;
}

.timeline-item--active .timeline__content-title {
  margin: -50px 0 20px 0;
}
.timeline__img-block {
  /*display: flex;*/
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  text-align: center;
  /*max-height: 290px;*/
}
.timeline__img {
  width: 192px;
  height: 192px;
  border-radius: 50%;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4);
}
.timeline-header__subtitle {
  color: rgba(255, 255, 255, 0.5);
  /*font-family: "pathway_gothic_regular";*/
  font-size: 16px;
  letter-spacing: 5px;
  margin: 10px 0 0 0;
  font-weight: normal;
}

/* Ilin */
.grid__item {
    height: calc(100vh - 40px);
    min-height: 460px;
    max-width: calc(100vw - 0px);
    margin: 0;
    padding: 50px 0;
    z-index: 1;
    position: relative;
    text-align: center;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-transform: translate3d(0,0,0);
    background: url(../img/mouse.svg) no-repeat left 50% bottom 20% #232323;
}
.grid__item .intro{
  width: 50%;
  position: absolute;
  color: rgba(255, 255, 255, 1);
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5rem;
  top: 20%;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.link--ilin {
  /*font-weight: 900;*/
  text-transform: uppercase;
  line-height: normal;
  overflow: hidden;  
}
.link--ilin span {
  text-align: center;
  font-size: 10em;
  font-family: "gobold_thin";
  position: relative;
  display: inline-block;
  -webkit-transition: color 0.5s;
  transition: color 0.5s;
  color: #D9D9D9;
  /*letter-spacing: -5px;*/
}
.link--ilin span.left-txt{font-family: "gobold_bold";}

.link--ilin:hover span:first-of-type {color: #FFF;}

.link--ilin:hover span:last-of-type {color: #FF2D00;}

.link--ilin span::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #FFF;
  /*line-height: 0.8;*/
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}

.link--ilin span:last-of-type::before {background: #FF2D00;}

.link--ilin:hover span:last-of-type::before,
.link--ilin span:first-of-type::before {
  -webkit-transform: translate3d(0,-150%,0);
  transform: translate3d(0,-150%,0);
}
.link--ilin:hover span:first-of-type::before,
.link--ilin span:last-of-type::before {
  -webkit-transform: translate3d(0,150%,0);
  transform: translate3d(0,150%,0);
}

/* Oculta otras notas y margin top */
.especialesModulares .Infografia .infographyContainer {margin: 0;}

.content_grid_margin.container_evolucion, .content_grid .content_grid_margin .container_col .col_fija, .container_liftigniter_article, .nuestro_mundo, .modulo_eto {display: none;}

@media only screen and (max-width: 767px) {
  .timeline {margin: 100px auto 0;}

  .timeline-item {
    align-self: baseline !important;
    width: 100%;
    padding: 80px 10px 80px;
  }  
  .timeline-item:before {
    left: 10px !important;
    padding: 0 !important;
    top: 50px;
    text-align: center !important;
    width: 60px;
    border: none !important;
  }
  .timeline__img-block {
    display: block;
    text-align: center;
    max-height: initial;
  }
  .timeline__content-left, .timeline__content-right {
    width: 100%;
    padding: 2%;
  }

  .timeline__content-year {width: 100%;}

  .timeline__content-year::after {left: 17%;}

  .timeline:before {content: none;}
  
  .timeline-header {width: 100%;}

  .timeline {display: block;}

  .link--ilin span {
    font-size: 5em;
    display: block;
  }
  .link--ilin span::before {background: none;}

  .link--ilin span:last-of-type::before {background: none;}

  .flex-direction-nav a {top: 50%;}

  .grid__item .intro {
    width: 95%;
    line-height: 1rem;
    top: 2%;
    font-size: 14px
  }
  .timeline-header.fixed-header{top: 40px;}

  .grid__item {background: url(../img/mouse.svg) no-repeat left 50% bottom 10% #232323;}

  /* Oculta otras notas y margin top */
  /*#onesignal-bell-container {display: none;}*//*Este es para esconder la campanita de mobile por si lo necesita*/

  .main-mobile-container .container .publicidad {display: none;}

  .scrollup, .content_grid_margin.container_evolucion, .content_grid .content_grid_margin .container_col .col_fija, .container_liftigniter_article, .nuestro_mundo, .modulo_eto {display: none !important;}
}