.htmegavc-verctimeline-wrapper {
position: relative;
margin-top: 30px;
}
.htmegavc-verctimeline-wrapper.htmegavc-verticletimeline-style-2::before {
content: "";
position: absolute;
left: 50%;
top: 0;
width: 6px;
background: #18012c;
height: 100%;
margin-left: -1px;
border-radius: 20px;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
justify-content: space-between;
padding: 30px 0;
position: relative;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline::before {
content: "";
position: absolute;
left: 50%;
top: 0;
width: 2px;
background: #d2d2d2;
height: 100%;
margin-left: -1px;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline:last-child::before {
display: none;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline .vertical-time {
width: 50%;
text-align: right;
padding: 0 30px;
position: relative;
-webkit-align-self: baseline;
-moz-align-self: baseline;
-ms-flex-item-align: baseline;
align-self: baseline;
position: relative;
top: -53px;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline .vertical-time::before {
position: absolute;
content: "";
right: -15px;
top: 50%;
margin-top: -15px;
height: 30px;
width: 30px;
border: 7px solid #e98250;
border-radius: 100%;
background: #fff;
transform: translateY(-50%);
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline .vertical-time .vertical-date {
width: 100px;
border: 13px solid #f88a55;
text-align: center;
display: inline-block;
height: 100px;
border-radius: 100%;
background: #fff;
position: relative;
top: -12px;
margin-right: 11px;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline .vertical-time .vertical-date::before {
position: absolute;
content: "";
left: 115%;
top: 56%;
margin-top: -15px;
height: 10px;
width: 10px;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 15px solid #f58854;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline .vertical-time .vertical-date span {
display: block;
color: #fc8c56;
font-size: 18px;
font-weight: 500;
line-height: 28px;
font-family: "Montserrat", sans-serif;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline .vertical-time .vertical-date span.month {
margin-top: 7px;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline .timeline-content {
padding-left: 123px;
text-align: left;
width: 50%;
position: relative;
top: -30px;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline .timeline-content::before {
position: absolute;
content: "";
border-style: dashed;
left: 25px;
height: 1px;
width: 80px;
border-width: 0 0 2px;
top: 11px;
border-color: #f38753;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline .timeline-content p {
color: #494849;
font-size: 14px;
line-height: 28px;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline.vertical-reverse {
-webkit-box-direction: reverse;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row-reverse;
-moz-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline.vertical-reverse .vertical-time {
text-align: left;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline.vertical-reverse .vertical-time::before {
right: auto;
left: -15px;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline.vertical-reverse .vertical-time .vertical-date {
margin-right: 0;
margin-left: 11px;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline.vertical-reverse .vertical-time .vertical-date::before {
right: 115%;
left: auto;
border-top: 10px solid transparent;
border-right: 15px solid #fc8c56;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline.vertical-reverse .timeline-content {
padding-left: 0;
padding-right: 123px;
text-align: right;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline.vertical-reverse .timeline-content::before {
left: auto;
right: 25px;
} .htmegavc-verctimeline-wrapper .htmegavc-ver-timeline--2 {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
justify-content: space-between;
padding: 40px 0 0;
position: relative;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline--2::before {
position: absolute;
content: "";
width: 6px;
height: 100%;
background: #cf2037;
left: 50%;
transform: translateX(-1px);
top: 0;
transition: 0.4s ease-in-out;
opacity: 0;
border-radius: 20px;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline--2:hover::before {
opacity: 1;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline--2 .vertical-time {
width: 50%;
text-align: right;
padding: 0 40px;
position: relative;
-webkit-align-self: baseline;
-moz-align-self: baseline;
-ms-flex-item-align: baseline;
align-self: baseline;
position: relative;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline--2 .vertical-time::before {
position: absolute;
content: "";
right: -12px;
top: 50%;
margin-top: -15px;
height: 20px;
width: 20px;
border: 6px solid #18012c;
border-radius: 100%;
background: #fff;
transform: translateY(-50%);
transition: 0.4s ease-in-out;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline--2 .vertical-time .vertical-date span {
display: block;
color: #18012c;
font-size: 18px;
font-weight: 700;
line-height: 28px;
font-family: "Montserrat", sans-serif;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline--2 .vertical-time .vertical-date span.month {
margin-top: 7px;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline--2:hover .vertical-time::before {
border: 6px solid #cf2037;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline--2 .timeline-content {
padding-left: 40px;
text-align: left;
width: 50%;
position: relative;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline--2 .timeline-content h6 {
color: #18012c;
font-size: 18px;
font-weight: 700;
transition: 0.4s ease-in-out;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline--2 .timeline-content p {
color: #313131;
font-size: 15px;
line-height: 25px;
font-family: "Montserrat", sans-serif;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline--2:hover .timeline-content h6 {
color: #cf2037;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline--2.vertical-reverse {
-webkit-box-direction: reverse;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row-reverse;
-moz-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline--2.vertical-reverse .vertical-time {
text-align: left;
padding: 0 40px;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline--2.vertical-reverse .vertical-time::before {
right: auto;
left: -9px;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline--2.vertical-reverse .vertical-time .vertical-date {
margin-right: 0;
margin-left: 11px;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline--2.vertical-reverse .timeline-content {
padding-left: 0;
padding-right: 40px;
text-align: right;
} .htmegavc-verctimeline-wrapper.htmegavc-verticletimeline-style-3 {
padding-top: 100px;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline--3 {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
justify-content: space-between;
position: relative;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline--3::before {
content: "";
position: absolute;
left: 50%;
top: 0;
width: 3px;
background: #f4f4f4;
height: 100%;
margin-left: -2px;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline--3:last-child::before {
display: none;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline--3 .vertical-time {
width: 50%;
text-align: right;
padding: 0 40px;
position: relative;
-webkit-align-self: baseline;
-moz-align-self: baseline;
-ms-flex-item-align: baseline;
align-self: baseline;
position: relative;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline--3 .vertical-time .vertical-date span {
display: block;
color: #18012c;
font-size: 30px;
font-weight: 700;
line-height: 28px;
font-family: "Montserrat", sans-serif;
position: absolute;
left: 94%;
width: 60px;
height: 60px;
background: #f4f4f4;
text-align: center;
line-height: 60px;
border-radius: 100%;
top: 0;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline--3 .timeline-content {
padding-left: 67px;
text-align: left;
width: 50%;
position: relative;
top: -139px;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline--3 .timeline-content .content {
background: #ffffff;
box-shadow: 0 0 97px rgba(0, 0, 0, 0.1);
padding: 38px 30px;
position: relative;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline--3 .timeline-content .content::before {
right: 100%;
left: auto;
border-top: 10px solid transparent;
border-right: 20px solid #ffffff;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
position: absolute;
content: "";
top: 82%;
margin-top: -15px;
height: 10px;
width: 10px;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline--3 .timeline-content h6 {
color: #18012c;
font-size: 18px;
font-weight: 700;
transition: 0.4s ease-in-out;
margin-bottom: 8px;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline--3 .timeline-content p {
color: #18012c;
font-size: 14px;
line-height: 28px;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline--3.vertical-reverse {
-webkit-box-direction: reverse;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row-reverse;
-moz-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline--3.vertical-reverse .vertical-time {
text-align: left;
padding: 0 40px;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline--3.vertical-reverse .vertical-time .vertical-date span {
left: auto;
right: 94%;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline--3.vertical-reverse .timeline-content {
padding-right: 67px;
text-align: right;
padding-left: 0;
}
.htmegavc-verctimeline-wrapper .htmegavc-ver-timeline--3.vertical-reverse .timeline-content .content::before {
left: 100%;
right: auto;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 15px solid #ffffff;
} @media (min-width: 768px) and (max-width: 991px) {
}