@charset "UTF-8";
/*!
	Timeline - v0.0.1
	ilker Yılmaz
	https://github.com/ilkeryilmaz/timeline
 */
.timeline-container{position:relative}
.timeline-container::after{content:'';display:table;clear:both}
.timeline{width:100%}
.timeline-list{position:relative;overflow:hidden;margin:0 auto;padding:0}
.timeline-list-wrap{position:relative;top:0;left:0;margin:0 auto;display:block;transform:translate3d(0,0,0);
    transition:transform 1s cubic-bezier(.455,.03,.515,.955)}
    .timeline-item{display: inline-block;box-sizing:border-box}
    .timeline-dots-wrap{position:relative;overflow:hidden;margin:0 auto}
    .timeline-horizontal .timeline-dots-wrap{width:800px;max-width:100%;height:50px}
    .timeline-vertical .timeline-dots-wrap{width:75px;height:100%;top:0}
    .timeline-dots-wrap.bottom{bottom:-50px}
    .timeline-dots-wrap.top{top:-50px}
    .timeline-dots-wrap.left{left:-65px}
    .timeline-dots-wrap.right{right:-70px}
    .timeline-dots{margin:0;padding:0;position:relative;width:800px;height:100%;transition:transform 1s cubic-bezier(.455,.03,.515,.955)}
    .timeline-horizontal .timeline-dots{background:url(../img/timeline-bg.png) bottom repeat-x}
    .timeline-vertical .timeline-dots{background:url(../img/timeline-vertical-bg.png) left repeat-y}
    .timeline-dots button,.timeline-dots li{transition:all 1s cubic-bezier(.455,.03,.515,.955)}
    .timeline-dots li{list-style:none;overflow:hidden}
    .timeline-horizontal .timeline-dots li{float:left;width:75px;text-align:center}
    .timeline-vertical .timeline-dots li{width:800px}

/*para los colores de las fechas cuanto tienen el foco*/
.timeline-dots li.slide-active button{
   color:#2972ca;
 /*color: #7dffc3; */
    font-size:24px
}
/*para los colores de las fechas en estado normal*/
.timeline-dots button{
    cursor:pointer;
    border:none;
    outline:none;
    color:#726f5a; 
    font-weight: bold;
    font-size:16px
}
.timeline-horizontal .timeline-dots button{background:url(../img/date-icon.png) bottom no-repeat;padding-bottom:15px}
.timeline-vertical .timeline-dots button{background:url(../img/date-icon-vertical.png) left no-repeat;padding-left:15px}

.timeline-container{max-width:100%;width:800px;margin:0 auto}
.timeline-list{width:800px}

/*Para el tamaño del contenedor*/
.timeline-item{
    width:800px;
    height:400px;
    padding:0px; /*el padding original es 10px*/
    border:1px solid #ddd
}



@media only screen 
  and (max-width: 768px) {
    .timeline-container {
        overflow:hidden;

    }
    .timeline-list {
        max-width: 100%;
    }
    .timeline-item {
        width: 100vw;
    }
    .timeline-dots-wrap.bottom{bottom:0}
    .timeline-dots-wrap.top{top:0}
    .timeline-dots-wrap.left{left:0}
    .timeline-dots-wrap.right{right:0}
}