/* -----reset---------------- */

address, dl, fieldset, figure, ol, p, pre, ul {
    margin: 0 0 0px 0;
}



	
	section#foote{ display: none !important;}
#timeline {
  display: -webkit-box;
  display: flex;
	background-color:  rgba(188,24,2,1.00); 
background-image: url(/images/about/metodologia/data-experience/onda.png); background-size: cover;  background-position: center center;background-attachment: fixed;
}
	
#timeline:hover .tl-item {
  width: 23.3333%;
}

.tl-item {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  position: relative;
  width: 25%;
  height: 100vh;
  min-height: 600px;
  color: #fff;
  overflow: hidden;
  -webkit-transition: width 0.5s ease;
  transition: width 0.5s ease;
}
.tl-item:before, .tl-item:after {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
	
	

	/* ------overlay item start ---------------- */
.tl-item:after {
  background: rgba(3, 22, 37, 0.4);
  opacity: 1;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}
.tl-item:before {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(188,24,2,1.00)), color-stop(75%, black));
  background: linear-gradient(to bottom, rgba(188,24,2,1.00) 0%, black 75%);
  z-index: 1;
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) translateY(50%);
          transform: translate3d(0, 0, 0) translateY(50%);
  -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
  transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition: opacity 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
}
.tl-item:hover {
  width: 30% !important;
}
.tl-item:hover:after {
  opacity: 0;
}
.tl-item:hover:before {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0) translateY(0);
          transform: translate3d(0, 0, 0) translateY(0);
  -webkit-transition: opacity 1s ease, -webkit-transform 1s ease 0.25s;
  transition: opacity 1s ease, -webkit-transform 1s ease 0.25s;
  transition: opacity 1s ease, transform 1s ease 0.25s;
  transition: opacity 1s ease, transform 1s ease 0.25s, -webkit-transform 1s ease 0.25s;
}
.tl-item:hover .tl-content {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: all 0.75s ease 0.5s;
  transition: all 0.75s ease 0.5s;
}
.tl-item:hover .tl-bg {
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
}

.tl-content {
  -webkit-transform: translate3d(0, 0, 0) translateY(23px);
  transform: translate3d(0, 0, 0) translateY(23px);
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 0 1.618em;
  
  opacity: 0;
}
.tl-content h1 {

  text-transform: uppercase;
  color: #1779cf;
  font-size: 1.44rem;
  font-weight: normal;
}
	
	
/* ------Titulares Pensar Atraer ---------------- */
	
	
	
p.f2.heading--sanSerif{ margin: 0 0 25px;}/* ------titulo section ---------------- */
.tl-year {position: absolute;left: 53%;
  -webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
 z-index: 1;
border-bottom: 3px solid #fff;

}


	
.tl-year p {font-size: 1rem;line-height: 0;  font-weight: 400; }

.tl-bg {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: 50%;
  background-position: center center;
  -webkit-transition: -webkit-filter 0.5s ease;
  transition: -webkit-filter 0.5s ease;
  transition: filter 0.5s ease;
  transition: filter 0.5s ease, -webkit-filter 0.5s ease;
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}
	
		p {margin: 0 0 0px;}
/* ------listado metodologia ---------------- */
	
	
	ul.metodologia{list-style: none}
	
	ul.metodologia li {font-size: 1.1em; font-weight: 400; padding-bottom: 1em;}
	
	.tl-bottom , .tl-top ,.tl-left , .tl-bg-icono{ position: absolute; z-index: 10;background-position: center center;}
	.tl-bottom { bottom:0px; text-align: center; width: 100%; padding: 4% 0px;   ;background-image: url(/images/about/metodologia/data-experience/bottom_graf.png)   }
	.tl-top { color: white;font-size: 2em; top:0px; text-align: center; width: 100%; padding: 10px;padding: 4% 0px;;background-image: url(/images/about/metodologia/data-experience/btop_graf.png)   }
	.tl-left { left:1%; text-align: center; width: 1%; padding: 10px; min-height: 100vh; height: 100vh}
	
.tl-bottom p{color: white; font-size: 1em;  line-height: 1.7em; font-weight: 400; }
	
	
	/* https://www.flaticon.com/free-icons/white */
	
.tl-year, div.tl-year , div.tl-year.one , 	div.tl-year.three , div.tl-year.five{ top: 40%;}
.tl-content {top: 45%;}
	div.tl-bg.one , div.tl-bg.three, div.tl-bg.five{background-position: center 53%; }
	
	
div.tl-year.two , 	div.tl-year.four{ top: 55%;}/* posicion titulo two y three */
div.tl-content.two , div.tl-content.four {top: 60%;}/* posicion contanido two y three */
div.tl-bg.two , div.tl-bg.four {background-position: center 40%;}
	
	
	div.tl-bg.one , div.tl-bg.three, div.tl-bg.five	,div.tl-bg.two , div.tl-bg.four{opacity: 1; background-size: 40%; -webkit-filter: invert(100%);
    filter: invert(100%); }
div.tl-bg.one{background-image: url(/images/about/metodologia/data-experience/idea.svg)}
	div.tl-bg.two{background-image: url(/images/about/metodologia/data-experience/atraer.svg)}
	div.tl-bg.three{background-image: url(/images/about/metodologia/data-experience/conectar.svg)}
	div.tl-bg.four{background-image: url(/images/about/metodologia/data-experience/convertir.svg)}
	div.tl-bg.five{background-image: url(/images/about/metodologia/data-experience/inspirar.svg)}



/* ------mobile ---------------- */


.ribbon {
  position: relative;
  padding: none;
  margin: none;
  height: 4em;
  background-color: #009EE0;
}

.vue {
  color: #19B684;
}

.uikit {
  color: #009EE0;
}

.header__banner {
  margin-bottom: 2em;
}

.logobar__group {
  display: table-row;
}
.logobar__group .logobar__logo {
  display: table-cell;
}
.logobar__group .logobar__logo .logobar__logomark {
  vertical-align: baseline;
  position: relative;
  bottom: 1px;
}
.logobar__group .logobar__logo .logobar__wordmark {
  vertical-align: bottom;
  position: relative;
  font-size: 2.5em;
  font-weight: 200;
}
.logobar__group .logobar__logo .logobar__plus {
  padding-left: .25em;
  padding-right: .25em;
}

.uk-container {
  text-align: left;
  position: relative;
  margin: 3em auto;
}

h1 {
  letter-spacing: -0.75px;
  font-weight: 700;
}

.special, .special2 {
  letter-spacing: -0.50px;
  font-weight: 700;
  color: #19B684;
  color: #009EE0;
}

.special2 {
  color: #19B684;
}

.kps__ul li,
.kps__ol li {
  letter-spacing: -0.50px;
  font-weight: 500;
}

.kps__h3 {
  letter-spacing: -0.75px;
  font-size: 2em;
  font-weight: 700;
}

.kps__main {
  padding: 3em;
  padding-top: 1em;
  width: 80%;
  margin: auto;
}

.a__img {
  text-decoration: none !important;
}
.a__img:hover, .a__img:active, .a__img:link, .a__img:visited {
  text-decoration: none !important;
}

.vue__span_code code {
  color: #19B684;
  color: #009EE0;
  font-weight: 500;
  font-family: monospace;
  font-size: .95em;
}

.code {
  color: #009EE0;
  font-weight: 500;
  font-family: monospace;
}

.eg__section {
  border: none;
  border-top: 1px solid #D0D0D0;
  margin-top: 4em;
  margin-bottom: 3em;
  padding-top: 1ex;
}
.eg__section h4 {
  font-weight: 600;
  margin-bottom: 0.5em;
}
.eg__section h4 + * {
  margin-top: 0;
}


.shrink {
  width: 50%;
}

.uk-button:hover {
  background-color: #19B684;
  background-blend-mode: screen;
}

.toggler:hover {
  cursor: pointer;
}

.img__figure {
  width: 70%;
  height: auto;
}

.uk-alert-text {
  padding: 0.25em;
  font-size: 90%;
}



.container, .accordion {
  width: 90%;
  margin: auto;
  padding-top: 2em;
  position: relative;
}

.accordion {
  width: 100%;
}

.uk-accordion-content__p {
  line-height: 1.7;
  font-size: .9rem;
  letter-spacing: .2px;
}

.cpy__special, .cpy__special strong {
  color: #009EE0;
  font-weight: 500;
  font-size: 2em;
  min-height: 2em;
}
	
	.metodologia-mobile {
   background-color: rgba(200,50,0,1.00); min-height: 100vh;
  
	color:white; 
}
	
	.uk-accordion-title {
    display: block;
    font-size: 1.25rem;
    line-height: 1.4;
    color: white;
    overflow: hidden;
}

/* ------titulo pensar---------------- */
	.uk-accordion-title span{border-bottom: 0px solid #fff;}


	.uk-open>.uk-accordion-title::before {
    background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213…%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%3C%2Fsvg%3E);
}



@media only screen and (max-width: 768px){

	.titulo-top{ font-size: 2em; margin: 1vh 0px; padding-top: 1vh; line-height: 1.2em}
	
	div.titulo-bottom { font-size: 1.4em;line-height: 2em; border-top: 1px solid rgba(254,254,254,0); padding-top: 3vh; text-align: center }
	div.titulo-bottom p{ padding-bottom: 0.6em}
	img.titulo-bottom-img{padding-bottom: 2vh;}
	
	b.numero-titulo{   background: rgba(254,254,254,0.3);
  border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
  color: #ffffff;
  display: inline-block;
  font-weight: bold;
  line-height: 1.6em;
  margin-right: 10px;
  text-align: center;
  width: 1.6em; 
}
	
	
	h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1rem;
}
	
	
	.uk-accordion-content {
    margin-top: 0px;
}
	
	
	}