

 
.timeline_container .timeline_row{padding: 0px 0px; margin:0px 0px; display: flex; flex-wrap: wrap;}
.timeline_container .timeline_row.reverse_row{padding: 0px 0px; margin:0px 0px; display: flex; flex-wrap: wrap; justify-content: flex-end;}
.timeline_container .timeline_row .timeline_block{ width:50%; display: flex; align-items: center; justify-content: center; position: relative;}
.timeline_container .timeline_row .timeline_block .timeline_inner_block{ display: flex; justify-content: center; align-items: center; flex-direction: column; margin:0px 0px; width: 100%; background-color: transparent;}


.timeline_container .timeline_row .timeline_block .timeline_image img{max-width: 100%;}
.timeline_block .timeline_content .timeline_title{text-align: center; font-size: 22px; line-height: 30px; margin:0px 0px 10px; color:#313131; font-family: inherit; font-weight: 700;}
.timeline_block .timeline_content .content{font-size: 16px; line-height: 22px; font-family:"Lato"; color:#434343; width: 80%; margin:auto; text-align: center;}
.timeline_container .timeline_row .timeline_block .timeline_icon{padding:10px 0px; box-sizing: border-box; z-index: 1; position: absolute; top:50%; transform: translateY(-50%); right:-10px;}

.timeline_container .timeline_row.reverse_row .timeline_block .timeline_icon{right:unset; left:-14px;}

.timeline_container .timeline_row .timeline_block .timeline_icon img{max-width:100%;}


/* Timeline content Position */
.timeline_container .timeline_row .timeline_block .timeline_image{position: relative; z-index: 2;}
.timeline_container .timeline_row .timeline_block .timeline_content{width:100%; position: absolute; top:100%; left:50%; transform: translateX(-50%); padding:20px 20px; box-sizing: border-box;}

.timeline_container .timeline_row .timeline_block .timeline_year{position: absolute; top:50%; transform: translateY(-50%); right:-30px;}
.rtl .timeline_container .timeline_row .timeline_block .timeline_year{right:unset; left:-30px;}
.timeline_container .timeline_row.reverse_row .timeline_block .timeline_year{right:unset; left:-30px;}

.timeline_container .timeline_row .timeline_block .timeline_year .year{display: inline-block; font-size: 28px; line-height: 36px; font-weight: 600; background-color: #E72329; padding:2px 8px; box-sizing: border-box; color:#fff; border-radius: 4px; font-family: inherit;}


/* Horizontal line */
.timeline_container .timeline_row .timeline_block:after{content:''; width:50%; height:1px; border-bottom: 1px dotted #00000080; position: absolute; top:50%; right:0px; transform: translateY(-50%); display: block; transition-duration:.6s; transition-timing-function:ease-in-out;}

.timeline_container .timeline_row.reverse_row .timeline_block:after{content:''; width:50%; height:1px; border-bottom: 1px dotted #00000080; position: absolute; top:50%; left:0px; transform: translateY(-50%); display: block; transition-duration:.6s; transition-timing-function:ease-in-out;}


/* vertical line */

.timeline_container .timeline_row .timeline_block:before{content:''; width:1px; height:100%; border-left: 1px dotted #00000080; position: absolute; top:50%; right:0px; transform: translateX(-50%); display: block; z-index: 1; transition-delay: 1.8s; transition-duration:.6s; transition-timing-function:ease-in-out;}

.timeline_container .timeline_row.reverse_row .timeline_block:before{right:unset; left:-2px; transform: translateX(-50%);}

.timeline_container .timeline_row:last-child .timeline_block:last-child:before{display: none;}



/**************************** Animation ****************************/

/**************************** Normal Row ****************************/
/* Timeline Icon Animation */
.timeline_container .timeline_row.normal_row .timeline_block .timeline_icon{ opacity: 0; transition-delay: .1s; transition-duration: .6s; transition-timing-function: ease-in-out;}
.timeline_container .timeline_row.normal_row .timeline_block .timeline_icon{transition-delay: 1.1s;}
.timeline_container .timeline_row.normal_row .timeline_block.in_view .timeline_icon{ opacity: 1;}

/* Timeline Image Animation */
/* .timeline_container .timeline_row.normal_row .timeline_block .timeline_image{ opacity: 0; transition-delay:.2s; transition-duration: 1s; transition-timing-function: ease-in-out;}
.timeline_container .timeline_row.normal_row .timeline_block .timeline_image{transition-delay: 1s;}
.timeline_container .timeline_row.normal_row .timeline_block.in_view .timeline_image{ opacity: 1;} */

/* Timeline Year Animation */
.timeline_container .timeline_row .timeline_block .timeline_year{ opacity: 0; transition-delay:.2s; transition-duration: 1s; transition-timing-function: ease-in-out;}
.timeline_container .timeline_row .timeline_block .timeline_year{transition-delay: 1s;}
.timeline_container .timeline_row .timeline_block.in_view .timeline_year{ opacity: 1;}

/* Timeline Title Animation */
.timeline_container .timeline_row.normal_row .timeline_block .timeline_content .timeline_title{transform: translateY(50px); opacity: 0; transition-delay: .6s; transition-duration: 1s; transition-timing-function: ease-in-out;}
.timeline_container .timeline_row.normal_row .timeline_block .timeline_content .timeline_title{transition-delay: 1.6s;}
.timeline_container .timeline_row.normal_row .timeline_block.in_view .timeline_content .timeline_title{transform: translateY(0px); opacity: 1;}

/* Timeline content Animation */
.timeline_container .timeline_row.normal_row .timeline_block .timeline_content .content{ opacity: 0; transition-delay: .4s; transition-duration: 1s; transition-timing-function: ease-in-out;}
.timeline_container .timeline_row.normal_row .timeline_block .timeline_content .content{transition-delay: 1.4s;}
.timeline_container .timeline_row.normal_row .timeline_block.in_view .timeline_content .content{ opacity: 1;}


/**************************** Reverse Row ****************************/


/* Timeline Icon Animation */
.timeline_container .timeline_row.reverse_row .timeline_block .timeline_icon{ opacity: 0; transition-delay: .1s; transition-duration: .6s; transition-timing-function: ease-in-out;}
.timeline_container .timeline_row.reverse_row .timeline_block .timeline_icon{transition-delay: 1.1s;}
.timeline_container .timeline_row.reverse_row .timeline_block.in_view .timeline_icon{ opacity: 1;}

/* Timeline Image Animation */
/* .timeline_container .timeline_row.reverse_row .timeline_block .timeline_image{ opacity: 0; transition-delay:.2s; transition-duration: 1s; transition-timing-function: ease-in-out;}
.timeline_container .timeline_row.reverse_row .timeline_block .timeline_image{transition-delay: 1s;}
.timeline_container .timeline_row.reverse_row .timeline_block.in_view .timeline_image{ opacity: 1;} */

/* Timeline Title Animation */
.timeline_container .timeline_row.reverse_row .timeline_block .timeline_content .timeline_title{transform: translateY(50px); opacity: 0; transition-delay: .6s; transition-duration: 1s; transition-timing-function: ease-in-out;}
.timeline_container .timeline_row.reverse_row .timeline_block .timeline_content .timeline_title{transition-delay: 1.6s;}
.timeline_container .timeline_row.reverse_row .timeline_block.in_view .timeline_content .timeline_title{transform: translateY(0px); opacity: 1;}

/* Timeline content Animation */
.timeline_container .timeline_row.reverse_row .timeline_block .timeline_content .content{ opacity: 0; transition-delay: .4s; transition-duration: 1s; transition-timing-function: ease-in-out;}
.timeline_container .timeline_row.reverse_row .timeline_block .timeline_content .content{transition-delay: 1.4s;}
.timeline_container .timeline_row.reverse_row .timeline_block.in_view .timeline_content .content{ opacity: 1;}




@media screen and (min-width:200px) and (max-width:767px){

    .timeline_container .timeline_row .timeline_block{width:100%; margin-bottom: 20px;}
    .timeline_container .timeline_row .timeline_block .timeline_image img{max-width: 100%;}
    .timeline_block .timeline_content .timeline_title{font-size: 20px; line-height: 28px;}
    .timeline_block .timeline_content .content{width:90%; font-size: 16px; line-height: 24px;}

    .timeline_container .timeline_row .timeline_block::after {display: none;}
    .timeline_container .timeline_row .timeline_block::before {display: none;}
    .timeline_container .timeline_row.reverse_row .timeline_block:after{display: none;}

    .timeline_container .timeline_row.normal_row .timeline_block .timeline_image{transform: translateY(80px); position: static;}
    .timeline_container .timeline_row.normal_row .timeline_block.in_view .timeline_image{transform: translateY(0px);}
    .timeline_container .timeline_row.normal_row .timeline_block .timeline_content{ position: static; transform: unset; padding:10px 20px;}
    .timeline_container .timeline_row.reverse_row .timeline_block .timeline_image{transform: translateY(80px); position: static;}
    .timeline_container .timeline_row.reverse_row .timeline_block.in_view .timeline_image{transform: translateY(0px);}
    .timeline_container .timeline_row.reverse_row .timeline_block .timeline_content{ position: static; transform: unset;}
    .timeline_container .timeline_row .timeline_block.in_view .timeline_icon{display: none;}
    .timeline_container .timeline_row .timeline_block .timeline_year{position: static; transform: unset; text-align: center; padding-top:10px;}

}   



@media screen and (min-width:768px) and (max-width:1200px){
    .timeline_block .timeline_content .timeline_title{font-size: 20px; line-height: 28px;}
    .timeline_block .timeline_content .content{width:85%; font-size: 16px; line-height: 24px;}
    /* .timeline_container .timeline_row .timeline_block{min-height:480px;} */
}




