/* https://github.com/itbruno/responsive-timeline */

#timeline .timeline-item:after,#timeline .timeline-item:before{content:'';display:block;width:100%;clear:both}

*,*:before,*:after{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}

/* vertical line */
#timeline{line-height:1.5em;font-size:14px;width:90%;margin:30px auto;position:relative;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-ms-transition:all 0.4s ease;transition:all 0.4s ease}

#timeline:before{content:"";width:3px;height:100%;background:white;left:50%;top:0;position:absolute}

#timeline:after{content:"";clear:both;display:table;width:100%}

/* space between events */
#timeline .timeline-item{margin-bottom:12px;position:relative}

#timeline .timeline-item .timeline-icon{background:#ee4d4d;width:15px;height:15px;position:absolute;top:0;left:50%;overflow:hidden;margin-left:-6px;margin-top:14px;}

#timeline .timeline-item .timeline-icon img{position:relative;top:0px;left:0px}

#timeline .timeline-item .timeline-content{width:45%;background:#fff;padding:20px 20px 10px 20px;-webkit-border-radius:0px;-moz-border-radius:0px;-ms-border-radius:0px;border-radius:0px;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-ms-transition:all 0.3s ease;transition:all 0.3s ease}

#timeline .timeline-item .timeline-content h4{padding:10px 15px 10px 15px;background:#ee4d4d;color:#fff;margin:-20px -20px 0 -20px;font-weight:700;-webkit-border-radius:0px 0px 0 0;-moz-border-radius:0px 0px 0 0;-ms-border-radius:0px 0px 0 0;border-radius:0px 0px 0 0}

#timeline .timeline-item .timeline-content p{padding:0px;background:white;margin:9px 0px 0px -4px;font-weight:400;}

/* caret for LEFT side items */
#timeline .timeline-item .timeline-content:before{content:'';position:absolute;left:45%;top:14px;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:7px solid #ee4d4d}

#timeline .timeline-item .timeline-content.right{float:right}


/* caret for RIGHT side items */
#timeline .timeline-item .timeline-content.right:before{content:'';right:45%;top:14px;left:inherit;border-left:0;border-right:7px solid #ee4d4d}



#timeline .timeline-item .timeline-content {
	background-color:white;
	color: black;
}

#timeline .timeline-item .timeline-content h4.app {background-color:royalblue;}
#timeline .timeline-item .timeline-content.app:before{border-left:7px solid royalblue;}
#timeline .timeline-item .timeline-icon.app{background:royalblue;}

#timeline .timeline-item .timeline-content h4.response {background-color:grey;}
#timeline .timeline-item .timeline-content.response:before{border-left:7px solid grey;}
#timeline .timeline-item .timeline-icon.response{background:grey;}

#timeline .timeline-item .timeline-content h4.rce {background-color:orange;}
#timeline .timeline-item .timeline-content.rce:before{border-left:7px solid orange;}
#timeline .timeline-item .timeline-icon.rce{background:orange;}

#timeline .timeline-item .timeline-content h4.oa {background-color:tomato;}
#timeline .timeline-item .timeline-content.oa.right:before{border-right:7px solid tomato;}
#timeline .timeline-item .timeline-icon.oa{background:tomato;}

#timeline .timeline-item .timeline-content h4.issue {background-color:limegreen;}
#timeline .timeline-item .timeline-content.issue.right:before{border-right:7px solid limegreen;}
#timeline .timeline-item .timeline-icon.issue{background:limegreen;}



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

	#timeline{margin:30px;padding:0}

	#timeline:before{left:0}

	#timeline .timeline-item .timeline-content{width:90%;float:right}

	#timeline .timeline-item .timeline-content:before,#timeline .timeline-item .timeline-content.right:before{left:10%;margin-left:-6px;}
	
	#timeline .timeline-item .timeline-content:before,#timeline .timeline-item .timeline-content.app:before{border-left:0;border-right:7px solid royalblue}
	
	#timeline .timeline-item .timeline-content:before,#timeline .timeline-item .timeline-content.response:before{border-left:0;border-right:7px solid grey}
	
	#timeline .timeline-item .timeline-content:before,#timeline .timeline-item .timeline-content.rce:before{border-left:0;border-right:7px solid orange}
	
	#timeline .timeline-item .timeline-icon{left:0}
	
	/* space between events */
	#timeline .timeline-item{margin-bottom:30px;position:relative}
}