.timeline * {
box-sizing: border-box;
}
.timeline *:before,
.timeline *:after {
box-sizing: border-box;
}
.timeline {
list-style: none;
padding: 20px 0 20px!important;
position: relative;
width: 100%;
display: inline-block;
z-index: 1;
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 2px;
background-color: #33aa87;
left: 50%;
margin-left: 0px;
}
.timeline li {
margin-bottom: 20px;
position: relative;
width: 100%;
float: left;
clear: left;
padding-right: 50%;
padding-left: 0%!important;
padding-bottom: 0!important;
background: none!important;
list-style-type: none!important;  
}
.timeline li:before, .timeline li:after {
content: " ";
display: table;
}
.timeline li:after {
clear: both;
}
.timeline li:before, .timeline li:after {
content: " ";
display: table;
}
.timeline li:before {
position: absolute;
right: 50%;
height: 24px;
width: 24px;
background-color: #fff;
border: 2px solid #666666;
border-radius: 50%;
margin-right: -13px;
display: block;
top: 22px;
z-index: 9;
}
.timeline img {
float: left;
margin: 2px 0px 10px 0px!important;
}
.timeline li.timeline-inverted:after {
left: 50%;
}
.timeline li:after {
background-color: #33aa87;
width: 7%;
height: 2px;
position: absolute;
left: 43%;
top: 34px;
margin-right: 0;
z-index: 5;
}
.timeline li:after {
clear: both;
}
.timeline li .timeline-panel {
width: 92%;
float: left;
border: 1px solid #d4d4d4;
/*border-radius: 2px;*/
  /*padding: 20px;*/
  position: relative;
z-index: 9;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
background-color: #fff;
}
.timeline li .timeline-panel:before {
position: absolute;
top: 26px;
right: -15px;
display: inline-block;
border-top: 15px solid transparent;
border-left: 15px solid #ccc;
border-right: 0 solid #ccc;
border-bottom: 15px solid transparent;
content: " ";
display: none !important;
content: "" !important;
}
.timeline li .timeline-panel:after {
position: absolute;
top: 27px;
right: -14px;
display: inline-block;
border-top: 14px solid transparent;
border-left: 14px solid #fff;
border-right: 0 solid #fff;
border-bottom: 14px solid transparent;
content: " ";
display: none !important;
content: "" !important;
}
.timeline li .timeline-badge {
width: 50%;
padding-left: 10px;
padding-right: 10px;
line-height: 50px;
text-align: left;
position: absolute;
top: 19px;
right: -20px;
z-index: 9;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 20px;
color: #666666;
line-height: 28px;
font-weight: bold;  
}
.timeline li.timeline-inverted .timeline-panel {
float: right;
}
.timeline li.timeline-inverted .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
.timeline li.timeline-inverted .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
.timeline-badge a {
color: #33aa87 !important;
}
.timeline-badge a:hover {
color: #000 !important;
}
.timeline-title {
margin-top: 0;
color: inherit;
}
.timeline-body p, .timeline-body ul {
padding: 0px;
margin-bottom: 0;
}
.timeline-body p + p {
margin-top: 5px;
}
.timeline-body {
padding: 15px;
}
.timeline-body p {
padding-left: 0;
padding-right: 0;
}
.timeline-footer {
padding: 20px;
background-color: #f4f4f4;
}
.timeline-footer a {
cursor: pointer;
text-decoration: none;
}
.timeline li.timeline-inverted {
float: right;
clear: right;
margin-top: 0px;
margin-bottom: 20px;
padding-right: 0;
padding-left: 50%!important;
}
.timeline li:nth-child(2) {
margin-top: 60px;
}
.timeline li.timeline-inverted .timeline-badge {
text-align: right;
left: -20px;
}
.cd-timeline-img.is-hidden {
visibility: hidden;
}
.cd-timeline-img.bounce-in {
visibility: visible;
animation: cd-bounce-1 0.6s;
}
 @keyframes cd-bounce-1 {
 0% {
 opacity: 0;
 transform: scale(0.5);
}
 60% {
 opacity: 1;
 transform: scale(1.2);
}
 100% {
 transform: scale(1);
}
}
/*
@media (min-width: 768px) {
.timeline-element .ce-bodytext {
position: absolute;
left: 115%;
width: 100%;
top: 50px;
}
.timeline-inverted .ce-bodytext {
position: absolute;
left: auto;  
right: 115%;
width: 100%;
top: 50px;
text-align: right;  
}
}
*/
@media (max-width: 767px) {
.timeline img {
float: left;
margin: 2px 0px 10px 0px!important;
}
ul.timeline:before {
left: 40px;
}
ul.timeline li,
ul.timeline li.timeline-inverted {
margin-bottom: 20px;
position: relative;
width: 100%;
float: left;
clear: left;
padding-left: 55px!important;
padding-right: 0!important;
}
ul.timeline li:before {
left: 33px !important;
height: 15px;
width: 15px;
top: 27px;
}
ul.timeline li:after {
left: 35px !important;
width: 100px !important;
}
ul.timeline li .timeline-panel {
width: 100%;
}
ul.timeline li .timeline-badge {
left: 0px !important;
margin-left: 0;
top: 25px;
padding: 0;
text-align: left !important;
font-size: 12px;
line-height: 18px;   
}
ul.timeline li .timeline-panel {
float: right;
}
ul.timeline li .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
ul.timeline li .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
.timeline li.timeline-inverted {
float: left;
clear: left;
margin-top: 0px;
margin-bottom: 20px;
}
.timeline li.timeline-inverted .timeline-badge {
left: 28px;
}
}