.main-timeline{
        overflow: hidden;
        position: relative;
        padding: 100px 0;
        }
        .main-timeline:before{
        content: "";
        width: 1px;
        height: 100%;
        background: #3eb5c1;
        position: absolute;
        top: 0;
        left: 50%;
        }
        .main-timeline .timeline{
        width: 50%;
        clear: both;
        position: relative;
        }
        .main-timeline .timeline:before,
        .main-timeline .timeline:after{
        content: "";
        display: block;
        clear: both;
        }
        .main-timeline .timeline:first-child:before,
        .main-timeline .timeline:last-child:before{ 
        
        
        }
        .main-timeline .timeline:last-child:before{
        top: auto;
        bottom: -54px;
        
        }
        .main-timeline .timeline:last-child:nth-child(even):before{
        right: auto;
        left: -11px;
        }
        .main-timeline .timeline-icon{
        width: 24px;
        height: 24px;
        background: #fff;
        border: 1px solid #3eb5c1; 
        position: absolute;
        top: 17px;
        right: -13px;
        z-index: 1;
        transform: rotate(45deg);
        -webkit-border-radius: 10px;-moz-border-radius: 10px; border-radius: 10px;
        }
        .main-timeline .timeline-icon:before{
        content: "";
        display: block;
        width: 15px;
        height: 15px;
        background: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: background-color 0.2s ease 0s;
        -webkit-border-radius: 10px;-moz-border-radius: 10px; border-radius: 10px;
        }
        .main-timeline .timeline:hover .timeline-icon:before{ background: #146bad; }
        .main-timeline .timeline-content{
        width: 85%;
        padding: 1px 1px;
        text-align: right;
        float: left;
        position: relative;
        transition: all 0.3s ease 0s;
        }
        .main-timeline .timeline:hover .timeline-content{
        
        }
        .main-timeline .timeline-content:before{
     
        
        position: absolute;
        top: 21px;
        right: -7.3px;
        transform: rotate(45deg);
        transition: all 0.2s ease 0s;
        }
       
        .main-timeline .timeline-content:after{
        content: "";
        width: 11%;
        height: 1px;
        background: #cfcdcd;
        position: absolute;
        top: 28px;
        right: -14%;
        }
        .main-timeline .date{
        display: block;
        font-size: 50px;
        font-weight: 600;
        color: #e9f4f4;
        margin:-50px;
        transition: all 0.3s ease 0s;
        }
        .main-timeline .timeline:hover .date{ color: #fff; }
        .main-timeline .title{
          color:#3eb5c1;
          font-size: 22px;
          font-weight: 500;
          margin-top: 0;
          margin-bottom: 10px;
          transition: all 0.3s ease 0s;
        }
        .main-timeline .timeline:hover .title{ color: #ab0060; }
        .main-timeline .description{ margin-top: 8px;
        }
        .main-timeline .timeline:nth-child(2n),
        .main-timeline .timeline:nth-child(2n) .timeline-content{
        float: right;
        text-align: left;
        }
        .main-timeline .timeline:nth-child(2n) .timeline-icon{
        right: 0;
        left: -12px;
        }
        .main-timeline .timeline:nth-child(2n) .timeline-content:before{ left: -7.3px; }
        .main-timeline .timeline:nth-child(2n) .timeline-content:after{ left: -14%; }
  
        @media only screen and (max-width: 767px){
        .main-timeline{ padding-left: 20px; }
        .main-timeline:before{ left: 20px; }
        .main-timeline .timeline{ width: 100%; 
        }
        .main-timeline .timeline,
        .main-timeline .timeline-content{
        float: right;
        text-align: left;
        }
        .main-timeline .timeline:first-child:before,
        .main-timeline .timeline:last-child:nth-child(odd):before{
        right: auto;
        left: -11px;
        }
        .main-timeline .timeline-icon{
        right: 0;
        left: -12px;
        }
        .main-timeline .timeline-content:before{ left: -7.3px; }
        .main-timeline .timeline-content:after{ left: -14%; }
        }
  
        .timeline-content .description{ margin-bottom: 25px;  display: block;
        }
  
        /*============animacion fancy ============*/
  
  
  
  
  .fancy .contBackgray{  margin: 0 auto;
    }
  
  .fancy .contentFlexYour{
    position:relative;
    }
  .fancy .contentFlexYour span{
    display:block;
    color:#000;
    margin-bottom:10px;
    padding:0 3em}
  .fancy .contentFlexYour .productsFlex{
    display:-webkit-box;display:-ms-flexbox;
    display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;width:92.5%;margin:0 auto 50px}
  .fancy .contentFlexYour .productsFlex>div {
    width:47.5%;margin:15px;position:relative;overflow:hidden;-webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.13);box-shadow:0px 0px 10px rgba(0,0,0,0.13)}
  .fancy .contentFlexYour .productsFlex>div a{
    display:block;
    width:100%;
    height:100%}
  .fancy .contentFlexYour .productsFlex>div img{
    display:block;
    width:100%}
  .fancy .contentFlexYour .productsFlex>div .prodCont{
    position:absolute;top:0;bottom:0;left:0;right:0;width:100%;
    height:100%;padding:60px 53px;-webkit-transition:.5s ease;
    transition:.5s ease}
  .fancy .contentFlexYour .productsFlex>div .prodCont:hover{
    background:rgba(0,0,0,0.5)}
  .fancy .contentFlexYour .productsFlex>div .prodCont:hover h3.align-top{
    margin-top:0;-webkit-transition:.5s ease;
    transition:.5s ease}
  .fancy .contentFlexYour .productsFlex>div .prodCont:hover ul{display:block}
  
  
  .fancy .contentFlexYour .productsFlex>div .prodCont>h3{
    font-size:38px;font-size:2.375rem;color:#fff;text-shadow:0 2px 2px rgba(0,0,0,0.5);padding:0;margin:0}
  
  .fancy .contentFlexYour .productsFlex>div .prodCont>h3.align-top{
    margin-top:4.3em}
  .fancy .contentFlexYour .productsFlex>div .prodCont>span{
    display:block;font-size:24px;font-size:1.5rem;
    color:#fff;text-shadow:0 2px 2px rgba(0,0,0,0.5);
    margin-bottom:13px;padding:0}
  .fancy .contentFlexYour .productsFlex>div .prodCont ul{
    display:none;padding:0;margin:0 0 37px}
  .fancy .contentFlexYour .productsFlex>div .prodCont ul li{
    padding:0;margin:0;display:block;font-size:18px;font-size:1.125rem;
    color:#fff;line-height:1.56;
    text-shadow:0 2px 2px rgba(0,0,0,0.5)}