ul#timeline-menu { height: 50px; text-align: center; width: fit-content; margin: 0 auto;}
    ul#timeline-menu li { position: relative; float: left; list-style: none; margin: 0px; padding: 0px; }
        ul#timeline-menu li a { display: block; text-decoration: none; font-size: 16px; padding: 10px; padding-top: 20px; color: black; font-weight: bold; border-bottom: 5px solid transparent; }
            ul#timeline-menu li a:hover { color: #696969; border-bottom: 5px solid #696969; font-weight: normal; }

section#timeline { padding-bottom: 20px; position: relative; display: inline-block;}
    section#timeline:before { top: 0; bottom: 0; position: absolute; content: " "; width: 2px; background-color: #696969; left: 50%; height: 100%; margin-left: -1.5px; }
    section#timeline article { width: 100%; margin-bottom: 20px; position: relative; border: none}
        section#timeline article:after { content: ''; display: block; clear: both; }

    section#timeline > article > div.timeline-panel { width: 45%; float: left; background: #F2F2F2; border: none; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15); }
        section#timeline > article > div.timeline-panel .timeline-panel-heading { padding: 0 15px; margin: 0; overflow: hidden; border-bottom: 1px solid #c0c0c0; }
        section#timeline > article > div.timeline-panel .timeline-panel-body { padding: 15px; position: relative; }
		section#timeline > article > div.timeline-panel .timeline-panel-body p { margin: 0 0 1em 0; text-align: justify;}
    section#timeline article div.timeline-panel-body:after { content: ''; position: absolute; top: 20px; right: -10px; width: 20px; height: 20px; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); background: #F2F2F2; }
    section#timeline > article > div.timeline-panel .timeline-panel-body img { float: left; margin: 0 15px 15px 0; }
	section#timeline > article > div.timeline-panel .timeline-panel-body img:after {     content: "";
    clear: both;
    display: table; }
    section#timeline > article > div.timeline-panel .timeline-panel-footer { padding: 15px; background-color: #DADADA; clear: both; }

    section#timeline > article.inverted > div.timeline-panel { float: right; }
        section#timeline > article.inverted > div.timeline-panel .timeline-panel-body:after { left: -10px; }
        section#timeline > article.inverted > div.timeline-panel .timeline-panel-body img { float: right; margin: 0 0 15px 15px;}

    section#timeline div[class*="group"],
    section#timeline article div.timeline-panel div.timeline-badge { position: relative; display: block; text-align: center; cursor: none; font-weight: bold; -moz-box-shadow: 0 0 0 2px #696969, inset 0 2px 0 rgba(0, 0, 0, 0.1), 0 3px 0 2px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 0 0 2px #696969, inset 0 2px 0 rgba(0, 0, 0, 0.1), 0 3px 0 2px rgba(0, 0, 0, 0.15); box-shadow: 0 0 0 2px #696969, inset 0 2px 0 rgba(0, 0, 0, 0.1), 0 3px 0 2px rgba(0, 0, 0, 0.15); line-height: 30px; }
    section#timeline div[class*="group"] { width: fit-content; font-size: 1.3em; margin: 35px auto; padding: 5px; border-radius: 0px; background: #696969; color: #FFF; }
    section#timeline article div.timeline-panel div.timeline-badge { position: absolute; top: 45px; left: 50%; margin: 0 0 0 -15px; border-radius: 50%; font-size: 0.75em; width: 30px; height: 30px; background: #FFF; color: #696969; }
        section#timeline article div.timeline-panel div.timeline-badge:last-child { background-color: #696969; width: 20px; height: 20px; margin: -20px 0 0 -10px; }

		section#timeline div[class*="group"]:first-child { margin-top: 0}
@media only screen and (max-width: 1000px), only screen and (max-device-width: 1000px) {
    section#timeline > article > div.timeline-panel { float: right; }
        section#timeline > article > div.timeline-panel .timeline-panel-body:after { left: -10px; }
        section#timeline > article > div.timeline-panel .timeline-panel-body img { float: right; margin: 0 0 15px 15px;}
		
		section#timeline > article > div.timeline-panel {
			width: 85%;
		}
		
		section#timeline {
			width: 99%;
		}			
		
		section#timeline:before {
			left: 5%;
		}
		
		section#timeline div[class*="group"] {
			margin: 35px 0;
		}
		
		section#timeline article div.timeline-panel div.timeline-badge {
			left: 5%;
		}
	
	}