.process-sec { width: 100%; display: inline-block; vertical-align: top; padding: 60px 0; }
.process-sec .success { background: #78AD42 !important; }
.process-sec .timeline-container { max-width: 100%; margin: 0 auto; }
.process-sec #timeline .timeline-item:after, #timeline .timeline-item:before { content: ''; display: block; width: 100%; clear: both; }
.process-sec #timeline { width: 100%; margin: 0px auto; position: relative; padding: 0; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; transition: all 0.4s ease; }
.process-sec #timeline:before { content: ""; width: 3px; height: 100%; background: #98C73A; left: 50%; top: 0; position: absolute; }
.process-sec #timeline:after { content: ""; clear: both; display: table; width: 100%; }
.process-sec #timeline .timeline-item { display: flex; flex-wrap: wrap; margin-bottom: 50px; position: relative; }
.process-sec #timeline .timeline-item .timeline-count { background: #98C73A; width: 50px; height: 50px; position: absolute; top: 0; left: 50%; overflow: hidden; margin-left: -23px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; }
.process-sec #timeline .timeline-item .timeline-count svg, #timeline .timeline-item .timeline-count .fa { position: relative; top: 13px; left: 14px; font-size: 24px; color: #fff; }
.process-sec #timeline .timeline-item .timeline-count .number { width: 100%; height: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; margin: 0 auto; }
.process-sec #timeline .timeline-item .timeline-count .number span { width: 100%; height: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; font-family: Source Sans Pro; font-size: 32px; line-height: 40px; font-weight: 700; color: #FFF; text-align: center; margin: 0 auto; }
.process-sec #timeline .timeline-item .timeline-content { width: 45%; float: left; background-color: #fff; padding: 20px; border: 1px solid #98C73A; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; border-top: unset; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }
.process-sec #timeline .timeline-item .timeline-content .title { padding: 12px 20px; background-color: #98C73A; color: #fff; margin: -20px -20px 20px -20px; font-weight: 300; -webkit-border-radius: 8px 8px 0px 0px; -moz-border-radius: 8px 8px 0px 0px; -ms-border-radius: 8px 8px 0px 0px; border-radius: 8px 8px 0px 0px; font-size: 22px; }
.process-sec #timeline .timeline-item .timeline-content .title span { width: 100%; display: inline-block; vertical-align: top; font-family: Source Sans Pro; font-size: 23px; line-height: 26px; font-weight: 700; }
.process-sec #timeline .timeline-item .timeline-content .caption { width: 100%; display: inline-block; vertical-align: top; } 
.process-sec #timeline .timeline-item .timeline-content p { padding: 0px; margin: 0; }
.process-sec #timeline .timeline-item .timeline-content:before { content: ''; position: absolute; left: 45%; top: 20px; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 7px solid #98C73A; }
.process-sec #timeline .timeline-item .timeline-content.right { float: right; }
.process-sec #timeline .timeline-item .timeline-content.right:before { content: ''; right: 45%; left: inherit; border-left: 0; border-right: 7px solid #98C73A; }

.process-sec #timeline .timeline-item .icon-image { width: 55%; float: right; padding-left: 60px; }
.process-sec #timeline .timeline-item .icon-image .image { width: 100%; height: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; margin: 0 auto; }
.process-sec #timeline .timeline-item .icon-image .image img { width: 180px; height: 180px !important; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; margin: 0 auto; }

.process-sec #timeline .timeline-item:last-child { margin-bottom: 0; }

.process-sec #timeline .timeline-item:nth-child(even) { flex-direction: row-reverse; }
.process-sec #timeline .timeline-item:nth-child(even) .timeline-content { float: right; }
.process-sec #timeline .timeline-item:nth-child(even) .timeline-content:before { content: ''; position: absolute; top: 20px; right: 45%; left: inherit; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right: 7px solid #98C73A; border-left: unset; }

.process-sec #timeline .timeline-item:nth-child(even) .icon-image { width: 55%; float: left; padding-left: 0; padding-right: 60px; }


@media screen and (max-width:991px) {
  .process-sec #timeline { margin: 0 0 0 15px; padding: 0px; width: 100%; }
  .process-sec #timeline:before { left: 0; }
  .process-sec #timeline .timeline-item .timeline-content { width: calc(100% - 15px); float: right; }
  .process-sec #timeline .timeline-item .timeline-content:before, #timeline .timeline-item .timeline-content.right:before { left: 10%; margin-left: -6px; border-left: 0; border-right: 7px solid #98C73A; }
  .process-sec #timeline .timeline-item .timeline-count { left: 0; }
  .process-sec #timeline .timeline-item { padding-left: 50px; margin-bottom: 35px; }
  .process-sec #timeline .timeline-item:nth-child(even) { flex-direction: unset; }
  .process-sec #timeline .timeline-item .timeline-content:before, #timeline .timeline-item .timeline-content.right:before { margin-left: 0; left: 43px;}
  .process-sec #timeline .timeline-item:nth-child(even) .timeline-content:before { right: unset !important;left: 43px; }
}

/* Animation CSS */

/* icon animation */
.process-sec .timeline-count.is-hidden { visibility: hidden; }
.process-sec .timeline-count.animate-it { visibility: visible; -webkit-animation: bounce-1 0.6s; -moz-animation: bounce-1 0.6s; animation: bounce-1 0.6s; }

/* content block animation */
.process-sec .timeline-content.is-hidden { visibility: hidden; }
.process-sec .timeline-content.animate-it { visibility: visible; -webkit-animation: bounce-2 0.6s; -moz-animation: bounce-2 0.6s; animation: bounce-2 0.6s; }

@media only screen and (min-width:992px) {
  /* Inverse bounce effect on even content blocks */
  .process-sec .timeline-content.right.animate-it { -webkit-animation: bounce-2-inverse 0.6s; -moz-animation: bounce-2-inverse 0.6s; animation: bounce-2-inverse 0.6s; }
}

@media only screen and (max-width:991px) {
  /* Inverse bounce effect on all content blocks */
  .timeline-content.animate-it, .timeline-content.right.animate-it { -webkit-animation: bounce-2-inverse 0.6s; -moz-animation: bounce-2-inverse 0.6s; animation: bounce-2-inverse 0.6s; }
  .process-sec #timeline .timeline-item:nth-child(even) .timeline-content:before { right: 90%; }
  .process-sec #timeline .timeline-item .timeline-content { float: right; }
  .process-sec #timeline .timeline-item .icon-image { display: none; }
}

@media only screen and (max-width:575px) {
  .process-sec #timeline .timeline-item .timeline-content .title span { font-size: 18px; }
}

/* ALL animation types called */
@-webkit-keyframes bounce-1 {
  0% { opacity: 0; -webkit-transform: scale(0.5); }
  60% { opacity: 1; -webkit-transform: scale(1.2); }
  100% { -webkit-transform: scale(1); }
}
@-moz-keyframes bounce-1 {
  0% { opacity: 0; -moz-transform: scale(0.5); }
  60% { opacity: 1; -moz-transform: scale(1.2); }
  100% { -moz-transform: scale(1); }
}
@keyframes bounce-1 {
  0% { opacity: 0; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); }
  60% { opacity: 1; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); }
  100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
}
@-webkit-keyframes bounce-2 {
  0% { opacity: 0; -webkit-transform: translateX(-100px); }
  60% { opacity: 1; -webkit-transform: translateX(20px); }
  100% { -webkit-transform: translateX(0); }
}
@-moz-keyframes bounce-2 {
  0% { opacity: 0; -moz-transform: translateX(-100px); }
  60% { opacity: 1; -moz-transform: translateX(20px); }
  100% { -moz-transform: translateX(0); }
}
@keyframes bounce-2 {
  0% { opacity: 0; -webkit-transform: translateX(-100px); -moz-transform: translateX(-100px); -ms-transform: translateX(-100px); -o-transform: translateX(-100px); transform: translateX(-100px); }
  60% { opacity: 1; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); }
  100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }
}
@-webkit-keyframes bounce-2-inverse {
  0% { opacity: 0; -webkit-transform: translateX(100px); }
  60% { opacity: 1; -webkit-transform: translateX(-20px); }
  100% { -webkit-transform: translateX(0); }
}
@-moz-keyframes bounce-2-inverse {
  0% { opacity: 0; -moz-transform: translateX(100px); }
  60% { opacity: 1; -moz-transform: translateX(-20px); }
  100% { -moz-transform: translateX(0); }
f }
@keyframes bounce-2-inverse {
  0% { opacity: 0; -webkit-transform: translateX(100px); -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); transform: translateX(100px); }
  60% { opacity: 1; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); }
  100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }
}