.steps {
position: relative;
} .steps:before {
top: 125px; bottom: 0; position: absolute; content: " "; width: 2px; background-color: #ff4769; left: 50%; margin-left: -1px;
}
.timeline {
margin: 0px auto; overflow: hidden; position: relative; padding: 0px; list-style-type: none;
} .timeline .timeline-box {
position: relative; float: left; clear: left; width: 45%; margin: 1em 2.5%; list-style-type: none; display: block; padding: 25px; background: #f8f8f8; z-index: 15; color: #000;
}
.timeline .timeline-box .timeline-title {
color: #3c3c3c; font-weight: 700; font-size: 1em; float: left; padding-left: 25px; padding-top: 8px;
} .timeline .timeline-box .timeline-details {
clear: both; padding-top: 5px;
}
.timeline .timeline-box span {
position: absolute; top: 76px; right: 24px; font-size: 8em; font-weight: 700; color: #ff4769; opacity: 0.1; z-index: -1;
} @media all and (max-width: 600px) {
.timeline .timeline-box { width: 100%; margin-left: 0; margin-right: 0; }
} .timeline .timeline-box:hover:after {
background: #ff4769;
} @media all and (min-width: 650px) {
.timeline .timeline-box:after { display: block; content: ' '; height: 9px; width: 9px; background: #fff; border-radius: 50%; position: absolute; right: -6.55%; top: 1.5em; border: 2px solid #ff4769; }
} .timeline .timeline-box:first-child {
margin-bottom: 2.5em;
} .timeline .timeline-box:nth-of-type(1n):before {
position: absolute; top: 15px; right: -10px; display: inline-block; border-top: 10px solid transparent; border-left: 10px solid #f8f8f8; border-right: 0 solid #f8f8f8; border-bottom: 10px solid transparent; content: " ";
} .timeline .timeline-box:nth-of-type(2n) {
float: right; clear: right;
} .timeline .timeline-box:nth-of-type(2n):before {
right: auto; left: -10px; position: absolute; top: 15px; display: inline-block; border-top: 10px solid transparent; border-right: 10px solid #f8f8f8; border-left: 0 solid #f8f8f8; border-bottom: 10px solid transparent; content: " ";
} @media all and (min-width: 600px) {
.timeline .timeline-box:nth-of-type(2n) { margin-top: 3em; }
} .timeline .timeline-box:nth-child(2n):after {
left: -6.5%; right: auto;
}
.timeline-box:hover, .timeline-box:focus {
transform: translate(0, -5px); -webkit-transform: translate(0, -5px); -ms-transform: translate(0, -5px);
}
.timeline-box:hover, .timeline-box:focus {
-webkit-box-shadow: 0px 3px 0px 0px #ff4769; -moz-box-shadow: 0px 3px 0px 0px #ff4769; box-shadow: 0px 3px 0px 0px #ff4769;
}
.timeline-box {
transition: all 300ms ease-in-out; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out;
} .steps-area {
padding: 90px 0;
}