.timeline-content.horizontal-style {
float: left;
}
.timeline-container {
max-width: 100%;
width: 1200px;
margin: 60px auto;
padding: 0 15px;
} #vertical-basic .timeline {
line-height: 1.4em;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
#vertical-basic .vertical-basic li {
margin: 0;
} #vertical-basic .timeline-item {
padding-bottom: 60px;
padding-left: 40px;
position: relative;
margin: 0;
}
#vertical-basic .timeline-item:last-child {
padding-bottom: 0;
} #vertical-basic .timeline-info {
font-size: 12px;
font-weight: 700;
letter-spacing: 3px;
margin: 0 0 0.5em 0;
text-transform: uppercase;
white-space: nowrap;
} #vertical-basic .timeline-marker {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 15px;
}
#vertical-basic .timeline-marker:before {
background: #ff6b6b;
border: 3px solid #ffffff;
border-radius: 100%;
content: "";
display: block;
height: 20px;
position: absolute;
top: 2px;
left: 50%;
width: 20px;
transform: translateX(-50%);
transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
}
#vertical-basic .timeline-marker:after {
content: "";
width: 0;
display: block;
position: absolute;
top: 24px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
border-left: 1px dashed #acacac;
background-color: transparent;
} #vertical-basic .timeline-content {
padding-bottom: 40px;
}
#vertical-basic .timeline-content p:last-child {
margin-bottom: 0;
}
#vertical-basic .timeline h3.timeline-title {
color: #262626;
margin-top: 20px;
font-size: 30px;
line-height: 1;
text-transform: capitalize;
}
#vertical-basic.vertical-2 .timeline h3.timeline-title, #vertical-basic.vertical-3 .timeline h3.timeline-title {
margin-top: -5px;
}
#vertical-basic .timeline-content p {
margin: 30px 0;
font-size: 15px;
line-height: 1.7;
color: #555555;
}
#vertical-basic .timeline-img img {
border-radius: 5px;
} #vertical-basic .period {
padding: 0;
}
#vertical-basic .period .timeline-info {
display: none;
}
#vertical-basic .period .timeline-marker:before {
background: transparent;
content: "";
width: 15px;
height: auto;
border: none;
border-radius: 0;
top: 0;
bottom: 30px;
position: absolute;
border-top: 3px solid #ccd5db;
border-bottom: 3px solid #ccd5db;
}
#vertical-basic .period .timeline-marker:after {
content: "";
height: 32px;
top: auto;
}
#vertical-basic .period .timeline-content {
padding: 40px 0 70px;
}
#vertical-basic .period .timeline-title {
margin: 0;
} @media (min-width: 768px) {
#vertical-basic .timeline-split .timeline,
#vertical-basic .timeline-centered .timeline {
display: table;
}
#vertical-basic .timeline-split .timeline-item,
#vertical-basic .timeline-centered .timeline-item {
display: table-row;
padding: 0;
}
#vertical-basic .timeline-split .timeline-info,
#vertical-basic .timeline-centered .timeline-info,
#vertical-basic .timeline-split .timeline-marker,
#vertical-basic .timeline-centered .timeline-marker,
#vertical-basic .timeline-split .timeline-content,
#vertical-basic .timeline-centered .timeline-content,
#vertical-basic .timeline-split .period .timeline-info,
#vertical-basic .timeline-centered .period .timeline-info {
display: table-cell;
vertical-align: top;
}
#vertical-basic .timeline-split .timeline-marker,
#vertical-basic .timeline-centered .timeline-marker {
position: relative;
}
#vertical-basic .timeline-split .timeline-content,
#vertical-basic .timeline-centered .timeline-content {
padding-left: 40px;
}
#vertical-basic .timeline-split .timeline-info,
#vertical-basic .timeline-centered .timeline-info {
padding-right: 40px;
}
#vertical-basic .timeline-split .period .timeline-title,
#vertical-basic .timeline-centered .period .timeline-title {
position: relative;
left: -45px;
}
} @media (min-width: 992px) {
#vertical-basic .timeline-centered,
#vertical-basic .timeline-centered .timeline-item,
#vertical-basic .timeline-centered .timeline-info,
#vertical-basic .timeline-centered .timeline-marker,
#vertical-basic .timeline-centered .timeline-content {
display: block;
margin: 0;
padding: 0;
}
#vertical-basic .timeline-centered .timeline-item {
padding-bottom: 80px;
overflow: hidden;
}
#vertical-basic .timeline-centered .timeline-marker {
position: absolute;
left: 50%;
margin-left: -7.5px;
}
#vertical-basic .timeline-centered .timeline-info,
#vertical-basic .timeline-centered .timeline-content {
width: 50%;
}
#vertical-basic .timeline-centered>.timeline-item:nth-child(odd) .timeline-info {
float: left;
text-align: right;
padding-right: 30px;
}
#vertical-basic .timeline-centered>.timeline-item:nth-child(odd) .timeline-content {
float: right;
text-align: left;
padding-left: 30px;
}
#vertical-basic .timeline-centered>.timeline-item:nth-child(even) .timeline-info {
float: right;
text-align: left;
padding-left: 30px;
}
#vertical-basic .timeline-centered>.timeline-item:nth-child(even) .timeline-content {
float: left;
text-align: right;
padding-right: 30px;
}
#vertical-basic .timeline-centered>.timeline-item.period .timeline-content {
float: none;
padding: 0;
width: 100%;
text-align: center;
}
#vertical-basic .timeline-centered .timeline-item.period {
padding: 50px 0 90px;
}
#vertical-basic .timeline-centered .period .timeline-marker:after {
height: 30px;
bottom: 0;
top: auto;
}
#vertical-basic .timeline-centered .period .timeline-title {
left: auto;
}
} #vertical-basic .marker-outline .timeline-marker:before {
background: transparent;
border-color: #ff6b6b;
}
#vertical-basic .marker-outline .timeline-item:hover .timeline-marker:before {
background: #ff6b6b;
} #vertical-background .timeline-background {
display: flex;
margin: 0 auto;
flex-wrap: wrap;
flex-direction: column;
max-width: 700px;
position: relative;
}
#vertical-background .timeline__content-title {
font-weight: normal;
font-size: 60px;
margin: -10px 0 0 0;
transition: .4s;
padding: 0 10px;
box-sizing: border-box;
color: #fff;
text-shadow: 0px 0px 6px #000;
text-transform: capitalize;
}
#vertical-background .timeline__content-desc {
margin: 0;
font-size: 15px;
box-sizing: border-box;
color: #ffffff;
font-weight: normal;
line-height: 28px;
}
#vertical-background .timeline-background:before {
position: absolute;
left: 50%;
height: 100%;
content: "";
border: 1px dashed #acacac;
}
@media only screen and (max-width: 767px) {
#vertical-background .timeline:before {
left: 40px;
}
}
#vertical-background .timeline-item {
padding: 40px 0;
opacity: .3;
filter: blur(2px);
transition: .5s;
box-sizing: border-box;
width: calc(50% - 40px);
display: flex;
position: relative;
transform: translateY(-80px);
}
#vertical-background .timeline-item:before {
content: attr(data-text);
letter-spacing: 1px;
width: 100%;
position: absolute;
color: #ffffff;
font-size: 14px;
border-left: 4px solid #fbff00;
margin-top: 0;
padding-left: 15px;
opacity: 0;
right: calc(-100% - 39px);
line-height: 1.4;
padding-top: 10px;
padding-bottom: 10px;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
}
#vertical-background .timeline-item:nth-child(even) {
align-self: flex-end;
}
#vertical-background .timeline-item:nth-child(even):before {
right: auto;
text-align: right;
left: calc(-100% - 37px);
padding-left: 0;
border-left: none;
border-right: 4px solid #fbff00;
padding-right: 15px;
}
#vertical-background .timeline-item--active {
opacity: 1;
transform: translateY(0);
filter: blur(0px);
}
#vertical-background .timeline-item--active:before {
top: 30%;
transition: .3s all .2s;
opacity: 1;
}
#vertical-background .timeline-item--active .timeline__content-title {
margin: -30px 0 20px 0;
}
@media only screen and (max-width: 767px) {
#vertical-background .timeline-item {
align-self: baseline !important;
width: 100%;
padding: 0 30px 150px 80px;
}
#vertical-background .timeline-item:before {
left: 10px !important;
padding: 0 !important;
top: 50px;
text-align: center !important;
width: 60px;
border: none !important;
}
#vertical-background .timeline-item:last-child {
padding-bottom: 40px;
}
}
#vertical-background .timeline__img {
max-width: 100%;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4);
border: 7px solid #ffffff;
}
#vertical-background.timeline-content {
width: 100%;
position: relative;
padding: 80px 0;
transition: .3s ease 0s;
background-attachment: fixed;
background-size: cover;
}
#vertical-background.timeline-content:before {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgb(0 0 0 / 85%);
content: "";
} #vertical-basic .timeline-info {
font-size: 14px;
line-height: 24px;
font-weight: 500;
font-style: italic;
color: #555555;
}
#vertical-basic .timeline-img img {
border: solid 4px #ffffff;
border-radius: 5px;
box-shadow: 0px 0px 16px -9px #000;
} #vertical-background.vertical-4 .timeline-title.mobile {
display: none;
} .vertical-5.container {
width: 100% !important;
max-width: 100% !important;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
flex-direction: column;
}
.vertical-5 .title {
font-size: 38px;
color: #616161;
font-style: italic;
font-weight: 800;
}
.vertical-5 .timeline {
width: 100%;
background-color: #fff;
box-shadow: 0 5px 25px 5px rgba(0, 0, 0, .2);
}
.vertical-5 .timeline .swiper-container {
height: 1000px;
width: 100%;
position: relative;
max-height: 100%;
}
.vertical-5 .timeline .swiper-wrapper {
transition: 2s cubic-bezier(0.68, -0.4, 0.27, 1.34) 0.2s;
}
.vertical-5 .timeline .swiper-slide {
position: relative;
color: #fff;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.vertical-5 .timeline .swiper-slide::after {
content: "";
position: absolute;
z-index: 1;
left: -115%;
bottom: -10%;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .7);
box-shadow: -230px 0 150px 39vw rgba(0, 0, 0, 0.7);
}
.vertical-5 .timeline .swiper-slide-content {
position: absolute;
text-align: center;
width: 80%;
max-width: 600px;
right: 50%;
top: 50%;
transform: translate(50%, -50%);
font-size: 12px;
z-index: 2;
}
.vertical-5 .timeline .swiper-slide .timeline-year {
display: block;
font-style: italic;
font-size: 12px;
margin-bottom: 20px;
transform: translate3d(20px, 0, 0);
color: #ffffff;
font-weight: 300;
opacity: 0;
transition: 0.2s ease 0.4s;
}
.vertical-5 .timeline .swiper-slide .timeline-title {
font-weight: 800;
font-size: 34px;
margin: 0 0 30px;
opacity: 0;
transform: translate3d(20px, 0, 0);
transition: 0.2s ease 0.5s;
}
.vertical-5 .timeline .swiper-slide .timeline-text {
line-height: 1.6;
opacity: 0;
transform: translate3d(20px, 0, 0);
transition: 0.2s ease 0.6s;
font-size: 15px;
}
.vertical-5 .timeline .swiper-slide-active .timeline-year {
opacity: 1;
transform: translate3d(0, 0, 0);
transition: 0.4s ease 1.6s;
}
.vertical-5 .timeline .swiper-slide-active .timeline-title {
opacity: 1;
transform: translate3d(0, 0, 0);
transition: 0.4s ease 1.7s;
}
.vertical-5 .timeline .swiper-slide-active .timeline-text {
opacity: 1;
transform: translate3d(0, 0, 0);
transition: 0.4s ease 1.8s;
}
.vertical-5 .timeline .swiper-pagination {
right: 15% !important;
height: 100%;
display: none;
flex-direction: column;
justify-content: center;
font-style: italic;
font-weight: 300;
font-size: 18px;
z-index: 1;
}
.vertical-5 .timeline .swiper-pagination::before {
content: "";
position: absolute;
right: -30px;
top: 0;
height: 100%;
width: 1px;
background-color: rgba(255, 255, 255, .2);
}
.vertical-5 .timeline .swiper-pagination-bullet {
width: auto;
height: auto;
text-align: left;
opacity: 1;
background: transparent;
color: #aaaaaa;
margin: 15px 0 !important;
position: relative;
font-size: 16px;
font-weight: 700;
font-style: normal;
}
.vertical-5 .timeline .swiper-pagination-bullet::before {
content: "";
position: absolute;
top: 50%;
left: -55px;
width: 35px;
height: 2px;
background-color: #d02b2b;
transform: scale(0) translateY(-50%);
transition: 0.2s;
}
.vertical-5 .timeline .swiper-pagination-bullet-active {
color: #ffffff;
font-size: 20px;
font-weight: 700;
font-style: normal;
}
.vertical-5 .timeline .swiper-pagination-bullet-active::before {
transform: scale(1) translateY(-50%);
}
.vertical-5 .timeline .swiper-button-next, .vertical-5 .timeline .swiper-button-prev {
background-size: 20px 20px;
top: 15%;
width: 20px;
height: 20px;
margin-top: 0;
z-index: 2;
transition: 0.2s;
color: #fff;
background-image: none;
}
.swiper-button-next:after, .swiper-button-prev:after {
font-size: 30px;
}
.vertical-5 .timeline .swiper-button-prev {
left: 8%;
}
.vertical-5 .timeline .swiper-button-prev:hover {
transform: translateX(-3px);
}
.vertical-5 .timeline .swiper-button-next {
right: 8%;
}
.vertical-5 .timeline .swiper-button-next:hover {
transform: translateX(3px);
}
@media screen and (min-width: 768px) {
.vertical-5 .timeline .swiper-slide::after {
left: -30%;
bottom: -8%;
width: 500px;
height: 50%;
box-shadow: -230px 0 150px 39vw rgba(0, 0, 0, 0.7);
}
.vertical-5 .timeline .swiper-slide-content {
left: 30%;
top: 50%;
transform: translateY(-50%);
width: 600px;
font-size: 11px;
text-align: left;
}
.vertical-5 .timeline .swiper-slide .timeline-year {
margin-bottom: 20px;
font-size: 12px;
font-weight: 400;
font-style: italic;
}
.vertical-5 .timeline .swiper-slide .timeline-title {
font-size: 46px;
margin: 0;
margin-bottom: 20px;
line-height: 55px;
}
.vertical-5 .timeline .swiper-pagination {
display: flex;
left: 5%;
right: unset!important;
}
.vertical-5 .timeline .swiper-button-prev {
top: 15%;
left: auto;
right: 15%;
transform: rotate(90deg) translate(0, 10px);
}
.vertical-5 .timeline .swiper-button-prev:hover {
transform: rotate(90deg) translate(-3px, 10px);
}
.vertical-5 .timeline .swiper-button-next {
top: auto;
bottom: 15%;
right: 15%;
transform: rotate(90deg) translate(0, 10px);
}
.vertical-5 .timeline .swiper-button-next:hover {
transform: rotate(90deg) translate(3px, 10px);
}
.vertical-5 .timeline .swiper-button-next {
bottom: 12%;
left: 9%;
top: unset;
}
.vertical-5 .timeline .swiper-button-prev {
bottom: 16%;
left: 9%;
top: unset;
transform: rotate(90deg) translate(0, 10px);
}
}
@media screen and (min-width: 1024px) {
.vertical-5 .timeline .swiper-slide::after {
left: -20%;
bottom: -12%;
width: 500px;
height: 50%;
box-shadow: -230px 0 150px 39vw rgba(0, 0, 0, 0.7);
}
.vertical-5 .timeline .swiper-slide-content {
left: 19%;
}
.vertical-5 .timeline .swiper-pagination {
left: 7%;
}
}
@media screen and (min-width: 1140px) {
.vertical-5 .timeline .swiper-slide-content {
left: 19%;
}
.vertical-5 .timeline .swiper-pagination {
left: 8%;
}
}
@media screen and (min-width: 1280px) {
.vertical-5 .timeline .swiper-slide-content {
left: 18%;
}
.vertical-5 .timeline .swiper-pagination {
left: 8%;
}
}
@media screen and (min-width: 1440px) {
.vertical-5 .timeline .swiper-slide-content {
left: 15%;
}
.vertical-5 .timeline .swiper-pagination::before {
right: -40px;
}
} #timeline-vertical-6 .wrapper {
margin: 0 auto;
padding: 0 16.66% 50px;
width: 100%;
}
#timeline-vertical-6 #timeline-vertical-6 {
position: relative;
max-width: 980px;
margin: 0 auto;
}
#timeline-vertical-6 .timeline__nav {
position: fixed;
z-index: 0;
top: 0;
-webkit-transition: top .3s ease-out;
transition: top .3s ease-out;
}
#timeline-vertical-6 .timeline__nav ul {
list-style: none;
list-style-position: inside;
margin: 15px 0;
}
#timeline-vertical-6 .timeline__nav ul li {
margin: 15px 0;
padding-left: 0;
list-style-type: none;
cursor: pointer;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
font-size: 16px;
font-weight: 400;
color: #aaaaaa;
}
#timeline-vertical-6 .timeline__nav ul li.active {
font-size: 20px;
font-weight: bold;
color: #000000;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
#timeline-vertical-6 .timeline__nav ul li.active:after {
content: "";
position: absolute;
right: -45px;
width: 35px;
height: 2px;
background: #d02b2b;
top: 50%;
transform: translateY(-50%);
}
#timeline-vertical-6 .timeline__nav ul li:hover {
color: #000;
}
#timeline-vertical-6 .timeline-img img {
border: solid 4px #ffffff;
border-radius: 5px;
box-shadow: 0px 0px 16px -9px #000;
}
#timeline-vertical-6 .timeline-info {
font-size: 14px;
line-height: 24px;
font-weight: 500;
font-style: italic;
color: #555555;
}
#timeline-vertical-6 .timeline-title {
color: #262626;
margin-top: 20px;
font-size: 30px;
line-height: 1;
text-transform: capitalize;
}
#timeline-vertical-6 .timeline-text {
margin: 30px 0;
line-height: 1.7;
color: #555555;
font-size: 1rem;
line-height: 1.8rem;
margin-left: 50px;
margin-right: 50px;
}
#timeline-vertical-6 .item-timeline {
display: inline-block;
clear: both;
margin-bottom: 30px;
}
#timeline-vertical-6 .timeline-img {
float: left;
width: 30%;
display: inline-block;
}
#timeline-vertical-6 .content-text {
float: right;
width: 70%;
padding: 0 30px;
} @media only screen and (min-width: 1170px) {
.timeline-vertical-7 .timeline-ver-7-is-hidden {
visibility: hidden;
}
}
.timeline-vertical-7 .timeline-ver-7-timeline {
overflow: hidden;
margin: 2em auto;
}
.timeline-vertical-7 .timeline-ver-7-timeline__container {
position: relative;
width: 90%;
margin: 0 auto;
padding: 2em 0;
}
.timeline-vertical-7 .timeline-ver-7-timeline__container::before { content: '';
position: absolute;
top: 0;
left: 18px;
height: 100%;
width: 4px; 
border-left: 2px dashed #acacac;
}
@media only screen and (min-width: 1170px) {
.timeline-vertical-7 .timeline-ver-7-timeline {
margin-top: 3em;
margin-bottom: 3em;
}
.timeline-vertical-7 .timeline-ver-7-timeline__container::before {
left: 50%;
margin-left: 0;
}
}
.timeline-vertical-7 .timeline-ver-7-timeline__block {
position: relative;
margin: 2em 0;
}
.timeline-vertical-7 .timeline-ver-7-timeline__block:after { content: "";
display: table;
clear: both;
}
.timeline-vertical-7 .timeline-ver-7-timeline__block:first-child {
margin-top: 0;
}
.timeline-vertical-7 .timeline-ver-7-timeline__block:last-child {
margin-bottom: 0;
}
@media only screen and (min-width: 1170px) {
.timeline-vertical-7 .timeline-ver-7-timeline__block {
margin: 4em 0;
}
}
.timeline-vertical-7 .timeline-ver-7-timeline__img {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
border-radius: 50%;
-webkit-box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}
.timeline-vertical-7 .timeline-ver-7-timeline__img img {
display: block;
width: 24px;
height: 24px;
position: relative;
left: 50%;
top: 50%;
margin-left: -12px;
margin-top: -12px;
}
.timeline-vertical-7 .timeline-ver-7-timeline__img.timeline-ver-7-timeline__img--picture {
background: #63c6a7;
}
.timeline-vertical-7 .timeline-ver-7-timeline__img.timeline-ver-7-timeline__img--movie {
background: #f0ca45;
}
.timeline-vertical-7 .timeline-ver-7-timeline__img.timeline-ver-7-timeline__img--location {
background: #d20012;  }
.timeline-vertical-7 .timeline-ver-7-timeline__img.timeline-ver-7-timeline__img--idea {
background: #feea00;
}
.timeline-vertical-7 .timeline-ver-7-timeline__img.timeline-ver-7-timeline__img--money {
background: #7959dd;
}
.timeline-vertical-7 .timeline-ver-7-timeline__img.timeline-ver-7-timeline__img--recognition {
background: #009e69;
}
@media only screen and (min-width: 1170px) {
.timeline-vertical-7 .timeline-ver-7-timeline__img {
width: 60px;
height: 60px;
left: 50%;
margin-left: -30px; -webkit-transform: translateZ(0);
transform: translateZ(0);
}
.timeline-vertical-7 .timeline-ver-7-timeline__img.timeline-ver-7-timeline__img--bounce-in {
visibility: visible;
-webkit-animation: timeline-ver-7-bounce-1 0.6s;
animation: timeline-ver-7-bounce-1 0.6s;
}
}
@-webkit-keyframes timeline-ver-7-bounce-1 {
0% {
opacity: 0;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
60% {
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes timeline-ver-7-bounce-1 {
0% {
opacity: 0;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
60% {
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.timeline-vertical-7 .timeline-ver-7-timeline__content {
position: relative;
margin-left: 60px;
background: white;
border-radius: 10px;
padding: 1em;
-webkit-box-shadow: 0 3px 0 #d7e4ed;
box-shadow: 0 7px 0 #cae0d3;
}
.timeline-vertical-7 .timeline-ver-7-timeline__content:after { content: "";
display: table;
clear: both;
}
.timeline-vertical-7 .timeline-ver-7-timeline__content::before { content: '';
position: absolute;
top: 16px;
right: 100%;
height: 0;
width: 0;
border: 7px solid transparent;
border-right: 7px solid white;
}
.timeline-vertical-7 .timeline-ver-7-timeline__content h2 {
font-size: 30px;
margin: 0;
}
.timeline-vertical-7 .timeline-ver-7-timeline__content p,
.timeline-vertical-7 .timeline-ver-7-timeline__read-more,
.timeline-vertical-7 .timeline-ver-7-timeline__date {
font-size: 1.3rem;
}
.timeline-vertical-7 .timeline-ver-7-timeline__content p {
margin: 1em 0;
line-height: 1.6;
margin: 20px 0;
font-size: 15px;
line-height: 1.7;
color: #555555;
}
.timeline-vertical-7 .timeline-ver-7-timeline__read-more,
.timeline-vertical-7 .timeline-ver-7-timeline__date {
display: inline-block;
}
.timeline-vertical-7 .timeline-ver-7-timeline__read-more {
float: right;
padding: .8em 1em;
background: #acb7c0;
color: white;
border-radius: 0.25em;
}
.timeline-vertical-7 .timeline-ver-7-timeline__read-more:hover {
background-color: #bac4cb;
}
.timeline-vertical-7 .timeline-ver-7-timeline__date {
float: left;
padding: 0;
opacity: .7;
}
.timeline-vertical-7 .timeline-ver-7-timeline__img {
text-align: center;
}
.timeline-vertical-7 .timeline-ver-7-timeline__img .icon-vertical7 {
width: 100%;
font-size: 20px;
color: #ffffff;
}
.timeline-vertical-7 .timeline-ver-7-timeline__date.mobile,
.timeline-vertical-7 .timeline-ver-7-timeline__content h2.mobile {
display: none;
}
@media only screen and (min-width: 768px) {
.timeline-vertical-7 .timeline-ver-7-timeline__content p {
margin: 20px 0;
font-size: 15px;
line-height: 1.7;
color: #555555;
}
.timeline-vertical-7 .timeline-ver-7-timeline__img .icon-vertical7 {
font-size: 30px;
}
.timeline-vertical-7 .timeline-ver-7-timeline__read-more,
.timeline-vertical-7 .timeline-ver-7-timeline__date {
font-size: 1.4rem;
}
}
@media only screen and (max-width: 1024px) {
.timeline-vertical-7 .timeline-ver-7-timeline__date,
.timeline-vertical-7 .timeline-ver-7-timeline__content h2 {
display: none;
}
.timeline-vertical-7 .timeline-ver-7-timeline__date.mobile,
.timeline-vertical-7 .timeline-ver-7-timeline__content h2.mobile {
display: block;
width: 100%;
}
.timeline-vertical-7 .timeline-ver-7-timeline__date.mobile {
margin-bottom: 20px;
}
.timeline-vertical-7 .timeline-ver-7-timeline__content h2.mobile {
margin-bottom: 10px;
}
}
@media only screen and (min-width: 1170px) {
.timeline-vertical-7 .timeline-ver-7-timeline__content {
margin-left: 0;
padding: 30px;
width: 45%; -webkit-transform: translateZ(0);
transform: translateZ(0);
}
.timeline-vertical-7 .timeline-ver-7-timeline__content::before {
top: 24px;
left: 100%;
border-color: transparent;
border-left-color: white;
}
.timeline-vertical-7 .timeline-ver-7-timeline__read-more {
float: left;
}
.timeline-vertical-7 .timeline-ver-7-timeline__date {
position: absolute;
width: 100%;
left: 122%;
top: 20px;
color: #555555;
font-size: 14px;
line-height: 24px;
font-weight: 500;
font-style: italic;
color: #555555;
}
.timeline-vertical-7 .timeline-title {
position: absolute;
width: 100%;
left: 122%;
top: 50px;
color: #262626;
font-size: 30px;
}
.timeline-vertical-7 .timeline-ver-7-timeline__block:nth-child(even) .timeline-title {
left: auto;
right: 122%;
text-align: right;
top: 50px;
}
.timeline-vertical-7 .timeline-ver-7-timeline__block:nth-child(even) .timeline-ver-7-timeline__content {
float: right;
}
.timeline-vertical-7 .timeline-ver-7-timeline__block:nth-child(even) .timeline-ver-7-timeline__content::before {
top: 24px;
left: auto;
right: 100%;
border-color: transparent;
border-right-color: white;
}
.timeline-vertical-7 .timeline-ver-7-timeline__block:nth-child(even) .timeline-ver-7-timeline__read-more {
float: right;
}
.timeline-vertical-7 .timeline-ver-7-timeline__block:nth-child(even) .timeline-ver-7-timeline__date {
left: auto;
right: 122%;
text-align: right;
}
.timeline-vertical-7 .timeline-ver-7-timeline__block:nth-child(even) .timeline-ver-7-timeline__date .timeline-img img {
margin-left: auto;
}
.timeline-vertical-7 .timeline-ver-7-timeline__content.timeline-ver-7-timeline__content--bounce-in {
visibility: visible;
-webkit-animation: timeline-ver-7-bounce-2 0.6s;
animation: timeline-ver-7-bounce-2 0.6s;
}
}
@media only screen and (min-width: 1170px) { .timeline-vertical-7 .timeline-ver-7-timeline__block:nth-child(even) .timeline-ver-7-timeline__content.timeline-ver-7-timeline__content--bounce-in {
-webkit-animation: timeline-ver-7-bounce-2-inverse 0.6s;
animation: timeline-ver-7-bounce-2-inverse 0.6s;
}
}
@-webkit-keyframes timeline-ver-7-bounce-2 {
0% {
opacity: 0;
-webkit-transform: translateX(-100px);
transform: translateX(-100px);
}
60% {
opacity: 1;
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes timeline-ver-7-bounce-2 {
0% {
opacity: 0;
-webkit-transform: translateX(-100px);
transform: translateX(-100px);
}
60% {
opacity: 1;
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes timeline-ver-7-bounce-2-inverse {
0% {
opacity: 0;
-webkit-transform: translateX(100px);
transform: translateX(100px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes timeline-ver-7-bounce-2-inverse {
0% {
opacity: 0;
-webkit-transform: translateX(100px);
transform: translateX(100px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.timeline-vertical-7 .timeline-ver-7-nugget-info {
text-align: center;
position: absolute;
width: 100%;
height: 50px;
line-height: 50px;
top: 0;
left: 0;
}
.timeline-vertical-7 .timeline-ver-7-nugget-info a {
position: relative;
font-size: 14px;
color: #718ca1;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
.timeline-vertical-7 .timeline-ver-7-nugget-info a:hover {
opacity: .8;
}
.timeline-vertical-7 .timeline-ver-7-nugget-info span {
vertical-align: middle;
display: inline-block;
}
.timeline-vertical-7 .timeline-ver-7-nugget-info span svg {
display: block;
}
.timeline-vertical-7 .timeline-ver-7-nugget-info .timeline-ver-7-nugget-info-arrow {
fill: #718ca1;
} .vertical-8 .timeline {
position: relative;
list-style-type: none;
padding: 30px 0 50px 0;
}
.vertical-8 .timeline:before {
content: '';
position: absolute;
height: 100%;
top: 0;
left: 167.5px;
border-left: 2px dashed #acacac;
}
.vertical-8 .event {
position: relative;
margin-bottom: 80px;
padding-right: 40px;
margin-top: 0;
margin-left: 0;
}
.vertical-8 .thumb {
position: absolute;
width: 100px;
height: 100px;
box-shadow:
0 0 0 8px #acacac,
0 1px 1px rgba(255,255,255,0.5);
background-repeat: no-repeat;
border-radius: 50%;
background-size: cover;
-webkit-transform: scale(0.8) translateX(24px);
-moz-transform: scale(0.8) translateX(24px);
-o-transform: scale(0.8) translateX(24px);
-ms-transform: scale(0.8) translateX(24px);
transform: scale(0.8) translateX(24px);
}
.vertical-8 .thumb:before {
content: '';
position: absolute;
height: 8px;
z-index: -1;
background: #acacac;
-webkit-mask-image: url(//www.hedgeinvest.it/wp-content/plugins/timeline-awesome/public/img/vertical-8.png);
mask-image: url(//www.hedgeinvest.it/wp-content/plugins/timeline-awesome/public/img/vertical-8.png);
width: 51px;
top: 42px;
left: 100%;
margin-left: 8px;
}
.vertical-8 .thumb span {
color: #acacac;
width: 100%;
text-align: center;
font-weight: 700;
font-size: 15px;
text-transform: uppercase;
position: absolute;
bottom: -40px;
} .vertical-8 .event label {
margin-bottom: 0;
}
.vertical-8 .event label.checklist,
.vertical-8 .event input[type="radio"] {
width: 24px;
height: 24px;
left: 158px;
top: 36px;
position: absolute;
display: block;
}
.vertical-8 .event input[type="radio"] {
opacity: 0;
z-index: 10;
cursor: pointer;
}
.vertical-8 .event label.checklist:after {
content: '\e702';
font-family: 'fontawesome-selected';
background: #fff;
border-radius: 50%;
color: #acacac;
font-size: 26px;
height: 100%;
width: 100%;
left: -2px;
top: -3px;
line-height: 24px;
position: absolute;
text-align: center;
z-index: 2;
}
.vertical-8 .content-perspective {
margin-left: 230px;
position: relative;
-webkit-perspective: 600px;
-moz-perspective: 600px;
-o-perspective: 600px;
-ms-perspective: 600px;
perspective: 600px;
}
.vertical-8 .content-perspective:before {
content: '';
width: 37px;
left: -51px;
top: 45px;
position: absolute;
height: 1px;
z-index: -1;
background: #acacac;
}
.vertical-8 .content {
-webkit-transform: rotateY(10deg);
-moz-transform: rotateY(10deg);
-o-transform: rotateY(10deg);
-ms-transform: rotateY(10deg);
transform: rotateY(10deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.vertical-8 .content-inner {
position: relative;
padding: 20px;
color: #333;
border: none;
border-left: 5px solid #acacac;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
background: #fff;
}
.vertical-8 .content-inner h3 {
font-size: 26px;
padding: 5px 0 5px 0;
color: #acacac;
margin: 0;
cursor: pointer;
margin-top: 0!important;
}
.vertical-8 .content-inner p {
font-size: 18px;
max-height: 0px;
overflow: hidden;
color: transparent;
color: rgba(0,0,0,0);
text-align: left;
margin-bottom: 0;
}
@font-face {
font-family: 'fontawesome-selected';
src: url(//www.hedgeinvest.it/wp-content/plugins/timeline-awesome/public/font/fontawesome-selected.eot);
src:
url(//www.hedgeinvest.it/wp-content/plugins/timeline-awesome/public/font/fontawesome-selected.eot?#iefix) format('embedded-opentype'),
url(//www.hedgeinvest.it/wp-content/plugins/timeline-awesome/public/font/fontawesome-selected.woff) format('woff'),
url(//www.hedgeinvest.it/wp-content/plugins/timeline-awesome/public/font/fontawesome-selected.ttf) format('truetype'),
url(//www.hedgeinvest.it/wp-content/plugins/timeline-awesome/public/font/fontawesome-selected.svg#fontawesome-selected) format('svg');
font-weight: normal;
font-style: normal;
}
.vertical-8 .content-inner:before {
font-family: 'fontawesome-selected';
content: '\25c2';
font-weight: normal;
font-size: 54px;
line-height: 54px;
position: absolute;
width: 30px;
height: 30px;
color: #acacac;
left: -22px;
top: 19px;
z-index: -1;
} .vertical-8 .thumb,
.vertical-8 .thumb span,
.vertical-8 .content-inner h3 {
-webkit-transition: all 0.6s ease-in-out 0.2s;
-moz-transition: all 0.6s ease-in-out 0.2s;
-o-transition: all 0.6s ease-in-out 0.2s;
-ms-transition: all 0.6s ease-in-out 0.2s;
transition: all 0.6s ease-in-out 0.2s;
}
.vertical-8 .content-inner {
-webkit-transition: box-shadow 0.8s linear 0.2s;
-moz-transition: box-shadow 0.8s linear 0.2s;
-o-transition: box-shadow 0.8s linear  0.2s;
-ms-transition: box-shadow 0.8s linear 0.2s;
transition: box-shadow 0.8s linear 0.2s;
}
.vertical-8 .content {
-webkit-transition: -webkit-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;
-moz-transition: -moz-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;
-o-transition: -o-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;
-ms-transition: -ms-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;
transition: transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;
}
.vertical-8 .content-inner p {
-webkit-transition: max-height 0.5s linear, color 0.3s linear;
-moz-transition: max-height 0.5s linear, color 0.3s linear;
-o-transition: max-height 0.5s linear, color 0.3s linear;
-ms-transition: max-height 0.5s linear, color 0.3s linear;
transition: max-height 0.5s linear, color 0.3s linear;
} .vertical-8 .event input[type="radio"]:checked + label.checklist:after {
content: '\2714';
font-family: 'fontawesome-selected';
color: #61C2A4;
box-shadow: 0 0 0 -2px rgba(255, 255, 255, 0.8);
}
.vertical-8 .event input[type="radio"]:checked ~ .content-perspective:before {
background: #61C2A4;
}
.vertical-8 .event input[type="radio"]:checked ~ .content-perspective .content-inner h3 {
color: #61C2A4!important;
}
.vertical-8 .event input[type="radio"]:checked ~ .content-perspective .content {
-webkit-transform: rotateY(-5deg);
-moz-transform: rotateY(-5deg);
-o-transform: rotateY(-5deg);
-ms-transform: rotateY(-5deg);
transform: rotateY(-5deg);
}
.vertical-8 .event input[type="radio"]:checked ~ .content-perspective .content-inner {
border-color: #61C2A4;
box-shadow: 10px 0px 10px -6px rgba(0, 0, 0, 0.1);
}
.vertical-8 .event input[type="radio"]:checked ~ .content-perspective .content-inner p {
max-height: 260px; margin-top: 10px;
color: #555555;
line-height: 28px;
font-weight: normal;
-webkit-transition-delay: 0s, 0.6s;
-moz-transition-delay: 0s, 0.6s;
-o-transition-delay: 0s, 0.6s;
-ms-transition-delay: 0s, 0.6s;
transition-delay: 0s, 0.6s;
}
.vertical-8 .event input[type="radio"]:checked ~ .content-perspective .content-inner:before {
color: #61C2A4;
}
.vertical-8 .event input[type="radio"]:checked ~ .thumb {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
box-shadow:
0 0 0 8px #61c2a4,
0 1px 1px rgba(255,255,255,0.5);
}
.vertical-8 .event input[type="radio"]:checked ~ .thumb span {
color: #61C2A4;
}
.vertical-8 .event input[type="radio"]:checked ~ .thumb:before {
background: #61c2a4;
-webkit-mask-image: url(//www.hedgeinvest.it/wp-content/plugins/timeline-awesome/public/img/vertical-8.png);
mask-image: url(//www.hedgeinvest.it/wp-content/plugins/timeline-awesome/public/img/vertical-8.png);
}
.vertical-8 .content-inner p,
.vertical-8 .thumb span,
.vertical-8 .event label.checklist {
-webkit-backface-visibility: hidden;
}
@media screen and (max-width: 850px) {
.vertical-8 .content-inner h3 {
font-size: 20px;
}
.vertical-8 .content-inner p {
font-size: 14px;
text-align: justify;
}
.vertical-8 .event input[type="radio"]:checked ~ .content-perspective .content-inner p {
max-height: 500px;
}
}
@media screen and (max-width: 540px) {
.vertical-8 .timeline::before {
left: 65px;
}
.vertical-8 .event {
padding-right: 0px;
margin-bottom: 100px;
}
.vertical-8 .thumb {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-o-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
.vertical-8 .event input[type="radio"] {
width: 100px;
height: 100px;
left: 0px;
top: 0px;
}
.vertical-8 .thumb:before,
.vertical-8 .event input[type="radio"]:checked ~ .thumb:before {
background: none;
width: 0;
}
.vertical-8 .event label.checklist {
display: none;
}
.vertical-8 .content-perspective {
margin-left: 0px;
top: 80px;
}
.vertical-8 .content-perspective:before {
height: 0px;
}
.vertical-8 .content {
-webkit-transform: rotateX(-10deg);
-moz-transform: rotateX(-10deg);
-o-transform: rotateX(-10deg);
-ms-transform: rotateX(-10deg);
transform: rotateX(-10deg);
}
.vertical-8 .event input[type="radio"]:checked ~ .content-perspective .content {
-webkit-transform: rotateX(10deg);
-moz-transform: rotateX(10deg);
-o-transform: rotateX(10deg);
-ms-transform: rotateX(10deg);
transform: rotateX(10deg);
}
.vertical-8 .content-inner {
border-left: none;
border-top: 5px solid #acacac;
}
.vertical-8 .event input[type="radio"]:checked ~ .content-perspective .content-inner {
border-color: #61C2A4;
box-shadow: 0 10px 10px -6px rgba(0, 0, 0, 0.1);
}
.vertical-8 .content-inner:before {
content: '\25b4';
left: 33px;
top: -32px;
}
.vertical-8 .event input[type="radio"]:checked ~ .content-perspective .content-inner p {
max-height: 300px;
}
} #timeline-vertical-9 {
text-align: center;
}
#timeline-vertical-9 .timeline-v9 {
border-left: 0.25em solid #ffffff;
background-color: #161616;
margin: 2em auto;
line-height: 1.4em;
padding: 1em;
padding-left: 2.5em;
list-style: none;
text-align: left;
margin-left: 10em;
margin-right: 3em;
border-radius: 0.5em;
min-width: 22em;
}
#timeline-vertical-9 .event {
min-width: 20em;
width: 100%;
vertical-align: middle;
box-sizing: border-box;
position: relative;
margin: 0;
}
#timeline-vertical-9 .timeline-v9 .event {
cursor: pointer;
}
#timeline-vertical-9 .timeline-v9 .event:before,
#timeline-vertical-9 .timeline-v9 .event:after {
position: absolute;
display: block;
top: 1em;
}
#timeline-vertical-9 .timeline-v9 .event:before {
left: -14.6em;
content: attr(data-date);
text-align: right;
font-size: 14px;
line-height: 14px;
font-weight: 500;
font-style: italic;
color: #ffffff;
min-width: 9em;
}
#timeline-vertical-9 .timeline-v9 .event:after {
box-shadow: 0 0 0 0.3em #ffffff;
left: -2.9em;
background: #313534;
border-radius: 50%;
height: 0.65em;
width: 0.65em;
content: "";
}
#timeline-vertical-9 .timeline-v9 .event .member-content,
#timeline-vertical-9 .timeline-v9 .event .member-parameters {
display: none;
}
#timeline-vertical-9 .member-infos {
padding: 10px;
text-align: left;
position: relative;
}
#timeline-vertical-9 .member-infos > h1 {
font-weight: bold;
font-size: 30px;
color: #ffffff;
}
#timeline-vertical-9 .member-infos .member-title {
margin: 0;
border-bottom: 1px solid #252525;
padding-bottom: 0.2em;
}
#timeline-vertical-9 .member-infos .member-content {
margin-top: 20px;
}
#timeline-vertical-9 .member-infos .member-content .timeline-text {
margin: 20px 0;
font-size: 15px;
line-height: 1.7;
color: #949494;
}
#timeline-vertical-9 .member-infos .member-content .timeline-img img {
border: solid 4px #ffffff;
border-radius: 5px;
box-shadow: 0px 0px 16px -9px #000;
}
#timeline-vertical-9 
.member-content a:before {
margin-right: 5px;
}
#timeline-vertical-9 .member-content {
text-indent: 2px;
}
#timeline-vertical-9 .follow,
#timeline-vertical-9 .options {
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
background: #D3D3D3;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
box-shadow: 0 2px 0 0 #C0C0C0;
border-radius: 3px;
display: inline-block;
}
#timeline-vertical-9 .follow:hover,
#timeline-vertical-9 .options:hover {
box-shadow: 0 1px 0 0 #C0C0C0;
box-sizing: border-box;
vertical-align: bottom;
margin-bottom: -1px;
}
#timeline-vertical-9 .member-socials {
display: inline-block;
font-weight: bold;
vertical-align: bottom;
line-height: 8px;
float: right;
}
#timeline-vertical-9 .member-socials li {
display: inline-block;
}
#timeline-vertical-9 .shots-number,
#timeline-vertical-9 .followers {
font-weight: normal;
display: block;
margin-top: 10px;
font-size: 0.9em;
}
#timeline-vertical-9 .icon-v9 {
position: absolute;
right: 10px;
top: 15px;
margin: 0;
}
#timeline-vertical-9 .timeline-info.mobile {
display: none;
}
#timeline-vertical-9 .icon-v9 li {
display: inline-block;
margin-left: 10px;
margin: 0;
}
#timeline-vertical-9 .icon-v9 li a {
text-decoration: none;
color: #ffffff;
transition: all .3s;
}
#timeline-vertical-9 .member-infos.active ~ .icon-v9 li a {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
transition: all .3s;
}
#timeline-vertical-9 .member-shots-number {
padding-right: 6px;
border-right: 1px solid rgba(0, 0, 0, 0.06);
margin-right: 6px;
margin-left: 6px;
} .timeline-vertical-10 .vertical-10-item {
border-top: 3px solid;
-webkit-border-image: -webkit-gradient(linear, left top, right top, from(#743ad5), to(#d53a9d));
-webkit-border-image: linear-gradient(to right, #743ad5 0%, #d53a9d 100%);
-o-border-image: linear-gradient(to right, #743ad5 0%, #d53a9d 100%);
border-image: -webkit-gradient(linear, left top, right top, from(#743ad5), to(#d53a9d));
border-image: linear-gradient(to right, #743ad5 0%, #d53a9d 100%);
border-image-slice: 1;
border-width: 3px;
margin: 0;
padding: 40px;
counter-increment: section;
position: relative;
}
.timeline-vertical-10 .vertical-10-item h1 {
margin-top: 0;
color: #262626;
font-size: 30px;
line-height: 1;
text-transform: capitalize;
margin-bottom: 30px;
}
.timeline-vertical-10 .vertical-10-item p {
margin: 30px 0;
font-size: 15px;
line-height: 1.7;
color: #555555;
}
#vertical-basic.timeline-vertical-10 .vertical-10-item span.timeline-info {
position: absolute;
border-radius: 50%;
padding: 10px;
height: 40px;
width: auto;
background-color: #222276;
text-align: center;
line-height: 1.25em;
color: #ffffff;
font-size: 16px;
display: flex;
justify-content: center;
align-items: center;
letter-spacing: unset;
}
.timeline-vertical-10 .vertical-10-item:nth-child(odd) {
border-right: 3px solid;
padding-left: 0;
}
#vertical-basic.timeline-vertical-10 .vertical-10-item:nth-child(odd) .timeline-info {
right: 0;
margin-left: -20px;
transform: translateX(50%);
}
.timeline-vertical-10 .vertical-10-item:nth-child(even) {
border-left: 3px solid;
padding-right: 0;
}
#vertical-basic.timeline-vertical-10 .vertical-10-item:nth-child(even) .timeline-info {
left: 0;
margin-right: -20px;
transform: translateX(-50%);
}
.timeline-vertical-10 .vertical-10-item:first-child {
border-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.timeline-vertical-10 .vertical-10-item:last-child {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
} #horizontal-1.timeline-container {
width: 800px;
margin: 70px auto;
padding: 0;
max-width: 100%;
}
#horizontal-1 .timeline-dots {
display: flex;
}
#horizontal-1 .timeline-horizontal .timeline-dots li {
margin: 0;
width: 100px;
}
#horizontal-1 .timeline-item {
height: auto;
border: 0 solid #ddd;
}
#horizontal-1 .timeline-horizontal .timeline-dots button {
padding-left: 0;
padding-right: 0;
padding-top: 0;
}
#horizontal-1.timeline-container h3 {
margin-top: 0;
}
#horizontal-1 .timeline-text {
margin: 30px 0;
} .timeline-horizontal-2 a {
text-decoration: none;
}
.timeline-horizontal-2 ol,
.timeline-horizontal-2 ul {
list-style: none;
}
.timeline-horizontal-2 {
opacity: 0;
margin: 2em auto;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.timeline-horizontal-2::before { content: 'mobile';
display: none;
}
.timeline-horizontal-2.loaded { opacity: 1;
}
.timeline-horizontal-2 .timeline {
position: relative;
height: 100px;
width: 90%;
max-width: 800px;
margin: 0 auto;
}
.timeline-horizontal-2 .events-wrapper {
position: relative;
height: 100%;
margin: 0 50px;
overflow: hidden;
}
.timeline-horizontal-2 .events-wrapper::after, .timeline-horizontal-2 .events-wrapper::before { content: '';
position: absolute;
z-index: 2;
top: 0;
height: 100%;
width: 20px;
}
.timeline-horizontal-2 .events { position: absolute;
z-index: 1;
left: 0;
top: 49px;
height: 1px; background: #acacac;
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}
.timeline-horizontal-2 .filling-line { position: absolute;
z-index: 1;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: #fd4756;
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-ms-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
}
.timeline-horizontal-2 .events a {
position: absolute;
bottom: 0;
z-index: 2;
text-align: center;
font-size: 1.3rem;
padding-bottom: 25px;
color: #383838; -webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
font-size: 14px;
line-height: 24px;
font-weight: 500;
font-style: italic;
color: #555555;
}
.timeline-horizontal-2 .events a::after { content: '';
position: absolute;
left: 50%;
right: auto;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
bottom: -5px;
height: 12px;
width: 12px;
border-radius: 50%;
border: 1px solid #acacac;
background-color: #f8f8f8;
-webkit-transition: background-color 0.3s, border-color 0.3s;
-moz-transition: background-color 0.3s, border-color 0.3s;
transition: background-color 0.3s, border-color 0.3s;
}
.no-touch .timeline-horizontal-2 .events a:hover::after {
background-color: #fd4756;
border-color: #fd4756;
}
.timeline-horizontal-2 .events a.selected {
pointer-events: none;
color: #fd4756;
}
.timeline-horizontal-2 .events a.selected::after {
background-color: #fd4756;
border-color: #fd4756;
}
.timeline-horizontal-2 .events a.older-event::after {
border-color: #fd4756;
}
@media only screen and (min-width: 1100px) {
.timeline-horizontal-2 {
margin: 6em auto;
}
.timeline-horizontal-2::before { content: 'desktop';
}
}
.timeline-horizontal-2-navigation a { position: absolute;
z-index: 1;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
height: 40px;
width: 40px;
border-radius: 50%;
border: 1px solid #acacac; overflow: hidden;
white-space: nowrap;
-webkit-transition: border-color 0.3s;
-moz-transition: border-color 0.3s;
transition: border-color 0.3s;
display: flex;
justify-items: center;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 14px;
color: #acacac;
transition: all .3s;
}
.timeline-horizontal-2-navigation a:hover {
border-color: #fd4756;
color: #fd4756;
transition: all .3s;
}
.timeline-horizontal-2-navigation a.inactive:hover {
border-color: #acacac;
color: #acacac;
transition: all .3s;
}
.timeline-horizontal-2-navigation a::after { }
.timeline-horizontal-2-navigation a.prev {
left: 0;
-webkit-transform: translateY(-50%) rotate(180deg);
-moz-transform: translateY(-50%) rotate(180deg);
-ms-transform: translateY(-50%) rotate(180deg);
-o-transform: translateY(-50%) rotate(180deg);
transform: translateY(-50%) rotate(180deg);
}
.timeline-horizontal-2-navigation a.next {
right: 0;
}
.no-touch .timeline-horizontal-2-navigation a:hover {
border-color: #fd4756;
}
.timeline-horizontal-2-navigation a.inactive {
cursor: not-allowed;
}
.timeline-horizontal-2-navigation a.inactive::after {
background-position: 0 -16px;
}
.no-touch .timeline-horizontal-2-navigation a.inactive:hover {
border-color: #dfdfdf;
}
.timeline-horizontal-2 .events-content {
position: relative;
width: 100%;
margin: 2em 0;
margin-top: 0;
overflow: hidden;
-webkit-transition: height 0.4s;
-moz-transition: height 0.4s;
transition: height 0.4s;
}
.timeline-horizontal-2 .events-content ol {
padding: 0;
margin: 0;
}
.timeline-horizontal-2 .events-content li {
position: absolute;
z-index: 1;
width: 100%;
left: 0;
top: 0;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
padding: 0 5%;
opacity: 0;
-webkit-animation-duration: 0.4s;
-moz-animation-duration: 0.4s;
animation-duration: 0.4s;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
margin: 0;
padding: 0;
}
.timeline-horizontal-2 .events-content li.selected { position: relative;
z-index: 2;
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.timeline-horizontal-2 .events-content li.enter-right, .timeline-horizontal-2 .events-content li.leave-right {
-webkit-animation-name: timeline-two-enter-right;
-moz-animation-name: timeline-two-enter-right;
animation-name: timeline-two-enter-right;
}
.timeline-horizontal-2 .events-content li.enter-left, .timeline-horizontal-2 .events-content li.leave-left {
-webkit-animation-name: timeline-two-enter-left;
-moz-animation-name: timeline-two-enter-left;
animation-name: timeline-two-enter-left;
}
.timeline-horizontal-2 .events-content li.leave-right, .timeline-horizontal-2 .events-content li.leave-left {
-webkit-animation-direction: reverse;
-moz-animation-direction: reverse;
animation-direction: reverse;
}
.timeline-horizontal-2 .events-content li > * {
display: block;
max-width: 800px;
margin: 0 auto;
}
.timeline-horizontal-2 .events-content li .timeline-info {
font-size: 16px;
line-height: 24px;
font-weight: 500;
font-style: italic;
color: #555555;
margin-bottom: 20px;
}
.timeline-horizontal-2 .events-content li .timeline-info:before {
content: '-';
margin-right: 5px;
}
.timeline-horizontal-2 .events-content li .timeline-img img {
border: solid 4px #ffffff;
border-radius: 5px;
box-shadow: 0px 0px 16px -9px #000;
}
.timeline-horizontal-2 .events-content h2 {
font-weight: bold;
font-size: 2.6rem;
font-weight: 700;
line-height: 1.2;
color: #262626;
margin-top: 20px;
text-transform: capitalize;
margin-bottom: 20px;
}
.timeline-horizontal-2 .events-content em {
display: block;
font-style: italic;
margin: 10px auto;
}
.timeline-horizontal-2 .events-content em::before {
content: '- ';
}
.timeline-horizontal-2 .events-content p {
color: #959595;
margin: 20px auto;
font-size: 15px;
line-height: 1.7;
color: #555555;
}
.timeline-horizontal-2 .events-content em, .timeline-horizontal-2 .events-content p {
line-height: 1.6;
}
@media only screen and (min-width: 768px) {
.timeline-horizontal-2 .events-content h2 {
color: #262626;
margin-top: 20px;
font-size: 30px;
line-height: 1;
text-transform: capitalize;
}
.timeline-horizontal-2 .events-content em {
font-size: 2rem;
}
.timeline-horizontal-2 .events-content p {
font-size: 1.5rem;
}
}
@-webkit-keyframes timeline-two-enter-right {
0% {
opacity: 0;
-webkit-transform: translateX(100%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
}
}
@-moz-keyframes timeline-two-enter-right {
0% {
opacity: 0;
-moz-transform: translateX(100%);
}
100% {
opacity: 1;
-moz-transform: translateX(0%);
}
}
@keyframes timeline-two-enter-right {
0% {
opacity: 0;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
}
@-webkit-keyframes timeline-two-enter-left {
0% {
opacity: 0;
-webkit-transform: translateX(-100%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
}
}
@-moz-keyframes timeline-two-enter-left {
0% {
opacity: 0;
-moz-transform: translateX(-100%);
}
100% {
opacity: 1;
-moz-transform: translateX(0%);
}
}
@keyframes timeline-two-enter-left {
0% {
opacity: 0;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
} #timeline-horizontal-3 {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
background: #e97162;
overflow: hidden;
max-width: 100%;
}
.content-hor3-wrapper {
text-align: left;
padding-left: 40px;
}
#timeline-horizontal-3 #timeline-hori-3 {
width: 100%;
height: 20%;
}
#timeline-horizontal-3 #line_timeline {
height: 6px;
width: 70%;
background: white;
border-radius: 5px;
margin: auto;
top: 50%;
transform: translateY(-50%);
position: relative;
}
#timeline-horizontal-3 #span {
display: none;
width: 70%;
margin: auto;
margin-top: 25%;
text-align: center;
color: white;
}
#timeline-horizontal-3 .circle {
width: 20px;
height: 20px;
background: #e97162;
border-radius: 15px;
position: absolute;
top: -7px;
border: 3px solid white;
cursor: pointer;
}
#timeline-horizontal-3 .circle:before {
content: '';
width: 10px;
height: 10px;
background: white;
position: absolute;
border-radius: 100%;
top: 2px;
left: 2px;
display: none;
}
#timeline-horizontal-3 .circle .popupSpan {
width: auto;
height: auto;
padding: 10px;
white-space: nowrap;
display: inline-block;
color: white;
position: absolute;
top: 20px;
left: -75px;
display: none;
transition: all 0.1s ease-out;
}
#timeline-horizontal-3 .circle.hover:before,
#timeline-horizontal-3 .circle.active:before {
display: block;
}
#timeline-horizontal-3 .circle.hover .popupSpan,
#timeline-horizontal-3 .circle.active .popupSpan {
display: block;
}
#timeline-horizontal-3 .circle.active .popupSpan {
top: -40px;
}
#timeline-horizontal-3 .time-wrap {
display: flex !important;
}
#timeline-horizontal-3 #mainCont {
height: 80%;
position: relative;
color: white;
font-size: 62px;
text-align: center;
transition: all 0.2s ease-out;
width: 70%;
margin: auto;
overflow: hidden;
}
#timeline-horizontal-3 #mainCont div {
display: inline-block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
transition: all 0.2s ease-out;
}
#timeline-horizontal-3 #mainCont div.right {
left: 200%;
}
#timeline-horizontal-3 #mainCont div.center {
left: 0% !important;
}
#timeline-horizontal-3 #mainCont div.left {
left: -100%;
}
#timeline-horizontal-3 #mainCont p {
font-size: 22px;
}
#timeline-horizontal-3 .inner-img {
align-self: center;
}
#timeline-horizontal-3 .inner-img img {
border: 5px solid #fff;
border-radius: 5px;
}
#timeline-horizontal-3 .timeline-title {
font-size: 6rem;
}
#timeline-horizontal-3 .timeline-info {
margin: 0;
font-size: 2.2rem;
font-weight: normal;
position: relative;
margin-bottom: 30px;
padding-left: 20px;
font-style: italic;
}
#timeline-horizontal-3 .timeline-info:after {
position: absolute;
content: '';
width: 10px;
left: 0;
top: 50%;
height: 2px;
background-color: #ffffff;
-webkit-transform: translateY(-50%;);
-moz-transform: translateY(-50%;);
-ms-transform: translateY(-50%;);
-o-transform: translateY(-50%;);
transform: translateY(-50%;);
}
#timeline-horizontal-3 #line_timeline {
height: 4px;
}
#timeline-horizontal-3 .circle {
border: 2px solid white;
}
#timeline-horizontal-3 .circle:before {
top: 3px;
left: 3px;      
} #timeline-horizontal-4 .timeline-horizontal-4 li:after,
#timeline-horizontal-4 .tl-nav:after {
content: "";
display: table;
clear: both;
}
#timeline-horizontal-4 h3 {
font-size: 40px;
margin-top: 0;
font-weight: 300;
} #timeline-horizontal-4 .tl-4-wrapper {
background: #e4e8eb;
min-height: 1px;
position: relative;
}
#timeline-horizontal-4 .timeline-horizontal-4 {
position: relative;
width: 100%;
height: 100%;
min-height: 1px;
list-style: none;
margin: 0;
padding: 0;
}
#timeline-horizontal-4 .timeline-horizontal-4 li {
position: absolute;
left: 0;
top: 0;
width: 100%;
} #timeline-horizontal-4 .tl-4-item {
visibility: hidden;
overflow: hidden;
z-index: 0;
margin: 0;
}
#timeline-horizontal-4 .tl-4-item .timeline-4-content {
-webkit-transition: 0.6s ease;
transition: 0.6s ease;
-webkit-transform: translate3d(60%, 0, 0);
transform: translate3d(60%, 0, 0);
}
#timeline-horizontal-4 .tl-4-item .tl-image {
-webkit-transition: 0.6s ease;
transition: 0.6s ease;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
#timeline-horizontal-4 .tl-4-item.tl-active {
visibility: visible;
z-index: 0;
}
#timeline-horizontal-4 .tl-4-item.tl-active .timeline-4-content {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#timeline-horizontal-4 .tl-4-item.tl-active .tl-image {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#timeline-horizontal-4 .tl-image {
float: left;
width: 70%;
}
#timeline-horizontal-4 .tl-image img {
display: block;
width: 100%;
height: 100%;
}
#timeline-horizontal-4 .timeline-4-content {
float: left;
width: 30%;
height: 100%;
position: relative;
top: 0;
right: 0;
padding: 16px;
padding: 1rem;
background: #f05c5c;
color: #fff;
}
#timeline-horizontal-4 .timeline-4-content:after {
content: "";
position: absolute;
top: 50px;
left: -19px;
width: 0;
height: 0;
border-style: solid;
border-width: 21px 20px 21px 0;
border-color: transparent #f05c5c transparent transparent;
} #timeline-horizontal-4 .tl-4-items-arrow-left,
#timeline-horizontal-4 .tl-4-items-arrow-right {
position: absolute;
top: 75%;
width: 60px;
height: 60px;
margin-top: 0px;
z-index: 100;
bottom: 25%;
display: flex;
justify-items: center;
align-items: center;
text-decoration: none;
background: #fff;
justify-content: center;
border-radius: 50%;
font-size: 16px;
color: #555555;
}
#timeline-horizontal-4 .tl-4-items-arrow-left:hover,
#timeline-horizontal-4 .tl-4-items-arrow-right:hover {
background-color: #d54141;
color: #ffffff;
}
#timeline-horizontal-4 .tl-4-items-arrow-left {
right: 23%;
}
#timeline-horizontal-4 .tl-4-items-arrow-right {
right: 19%;
} #timeline-horizontal-4 .tl-nav-wrapper {
position: absolute;
bottom: 42px;
left: 0;
margin: 0;
padding: 16px 0 0 0;
overflow-x: hidden;
width: 100%;
}
#timeline-horizontal-4 .no-csstransforms .tl-nav-wrapper {
overflow-x: auto;
}
#timeline-horizontal-4 .tl-nav {
list-style: none;
margin: 0;
padding-top: 21px;
border-top: 3px solid #f05c5c;
-webkit-transition: all .4s ease;
transition: all .4s ease;
padding-left: 40px;
z-index: 11;
position: relative;
}
#timeline-horizontal-4 .tl-nav li {
position: relative;
display: inline-block;
cursor: pointer;
margin-right: 1rem;
font-size: 12px;
text-align: center;
margin-left: 0;
margin-top: 0;
width: 150px;
}
#timeline-horizontal-4 .tl-nav li div {
margin: auto;
color: #555555;
padding-top: 0;
font-size: 20px;
font-style: italic;
font-weight: 500;
}
#timeline-horizontal-4 .tl-nav li:hover div,
#timeline-horizontal-4 .tl-nav li.tl-active div {
color: #f05c5c;
font-weight: 700;
transition: all .3s;
}
#timeline-horizontal-4 .tl-nav li:before {
content: "";
width: 20px;
height: 20px;
position: absolute;
top: -33px;
left: 50%;
margin-left: -10px;
background: #fff;
border-radius: 1000px;
border: 4px solid #fff;
}
#timeline-horizontal-4 .tl-nav li.tl-active:before {
content: "";
width: 20px;
height: 20px;
position: absolute;
top: -33px;
left: 50%;
margin-left: -10px;
background: #f05c5c;
border-radius: 1000px;
border: 4px solid #fff;
}
#timeline-horizontal-4 .timeline-4-content-inner .timeline-info {
font-style: italic;
margin-bottom: 20px;
display: block;
font-size: 20px;
}
#timeline-horizontal-4 .timeline-4-content-inner .timeline-title {
font-size: 46px;
margin: 0;
margin-bottom: 20px;
line-height: 55px;
font-weight: 700;
}
#timeline-horizontal-4 .timeline-4-content-inner .timeline-text {
line-height: 28px;
font-size: 18px;
}
#timeline-horizontal-4 .timeline-4-content {
padding: 6% 4%;
} #timeline-horizontal-4 .tl-nav-arrow-left,
#timeline-horizontal-4 .tl-nav-arrow-right {
position: absolute;
width: 12px;
height: 20px;
top: 50%;
z-index: 100;
}
#timeline-horizontal-4 .tl-nav-arrow-left:before,
#timeline-horizontal-4 .tl-nav-arrow-left:after,
#timeline-horizontal-4 .tl-nav-arrow-right:before,
#timeline-horizontal-4 .tl-nav-arrow-right:after {
content: "";
display: block;
position: absolute;
width: 14px;
height: 2px;
background: #f05c5c;
}
#timeline-horizontal-4 .tl-nav-arrow-left {
left: 9px;
}
#timeline-horizontal-4 .tl-nav-arrow-left:before {
top: 0;
-webkit-transform-origin: top right;
transform-origin: top right;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#timeline-horizontal-4 .tl-nav-arrow-left:after {
bottom: 0;
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#timeline-horizontal-4 .tl-nav-arrow-right {
right: 9px;
}
#timeline-horizontal-4 .tl-nav-arrow-right:before {
top: 0;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#timeline-horizontal-4 .tl-nav-arrow-right:after {
bottom: 0;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#timeline-horizontal-4 .no-csstransforms .tl-nav-arrow-left,
#timeline-horizontal-4 .no-csstransforms .tl-nav-arrow-right {
display: none;
}
@media screen and (max-width: 768px) {
#timeline-horizontal-4 .timeline-4-content, 
#timeline-horizontal-4 .tl-image {
width: 100%;
}
}
@media screen and (max-width: 1024px) {
#timeline-horizontal-4 .tl-4-items-arrow-left {
right: 20%;
}
#timeline-horizontal-4 .tl-4-items-arrow-right {
right: 13%;
}
}
@media screen and (max-width: 1280px) {
#timeline-horizontal-4 .tl-4-items-arrow-left {
right: 21%;
}
#timeline-horizontal-4 .tl-4-items-arrow-right {
right: 15%;
}
}
@media screen and (max-width: 1366px) {
#timeline-horizontal-4 .tl-4-items-arrow-left {
right: 21%;
}
#timeline-horizontal-4 .tl-4-items-arrow-right {
right: 16%;
}
#timeline-horizontal-4 .tl-4-items-arrow-left, #timeline-horizontal-4 .tl-4-items-arrow-right {
margin-top: -40px;
}
}
@media screen and (max-width: 1440px) {
#timeline-horizontal-4 .tl-4-items-arrow-left {
right: 22%;
}
#timeline-horizontal-4 .tl-4-items-arrow-right {
right: 17%;
}
} .tl-nav-arrow-left,
.tl-nav-arrow-right {
position: absolute;
width: 12px;
height: 20px;
top: 50%;
z-index: 100;
}
.tl-nav-arrow-left:before, .tl-nav-arrow-left:after,
.tl-nav-arrow-right:before,
.tl-nav-arrow-right:after {
content: "";
display: block;
position: absolute;
width: 14px;
height: 2px;
background: #f05c5c;
}
.tl-nav-arrow-left {
left: 9px;
}
.tl-nav-arrow-left:before {
top: 0;
-webkit-transform-origin: top right;
transform-origin: top right;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.tl-nav-arrow-left:after {
bottom: 0;
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.tl-nav-arrow-right {
right: 9px;
}
.tl-nav-arrow-right:before {
top: 0;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.tl-nav-arrow-right:after {
bottom: 0;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.tl-nav-wrapper:before, .tl-nav-wrapper:after {
content: "";
width: 38px;
height: 35px;
position: absolute;
top: 29px;
background: #e4e8eb;
z-index: 50;
}
.tl-nav-wrapper:after {
right: 0;
} #timeline-horizontal-5 ul li {
margin: 0;
}
#timeline-horizontal-5 .sociales {
text-align: center;
margin-bottom: 20px;
}
#timeline-horizontal-5 {
width: 800px;
overflow: hidden;
margin: 100px auto;
position: relative;
}
#timeline-horizontal-5 #dates {
width: 800px;
height: 60px;
overflow: hidden;
}
#timeline-horizontal-5 #dates li {
list-style: none;
float: left;
width: 100px;
height: 50px;
font-size: 24px;
text-align: center;
}
#timeline-horizontal-5 #dates a {
line-height: 38px;
padding-bottom: 10px;
}
#timeline-horizontal-5 #dates .selected {
font-size: 38px;
}
#timeline-horizontal-5 #issues {
width: 800px;
overflow: hidden;
}
#timeline-horizontal-5 #issues li {
width: 800px;
list-style: none;
float: left;
}
#timeline-horizontal-5 #issues li.selected img {
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
#timeline-horizontal-5 #issues li img {
float: left;
margin: 10px 30px 10px 50px;
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF); zoom: 1;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
-webkit-transform: scale(0.7, 0.7);
-moz-transform: scale(0.7, 0.7);
-o-transform: scale(0.7, 0.7);
-ms-transform: scale(0.7, 0.7);
transform: scale(0.7, 0.7);
}
#timeline-horizontal-5 #issues li h1 {
color: #ffcc00;
font-size: 48px;
margin: 20px 0;
text-shadow: #000 1px 1px 2px;
text-align: left;
padding: 0 70px;
}
#timeline-horizontal-5 #issues li p {
font-size: 14px;
margin: 0 70px;
font-weight: normal;
line-height: 22px;
text-shadow: #000 1px 1px 2px;
}
#timeline-horizontal-5 #grad_left,
#timeline-horizontal-5 #grad_right {
width: 100px;
height: 350px;
position: absolute;
top: 0;
}
#timeline-horizontal-5 #grad_left {
left: 0;
}
#timeline-horizontal-5 #grad_right {
right: 0;
}
#timeline-horizontal-5 #next,
#timeline-horizontal-5 #prev {
position: absolute;
top: 0;
font-size: 70px;
top: 170px;
width: 22px;
height: 38px;
background-position: 0 0;
background-repeat: no-repeat;
text-indent: -9999px;
overflow: hidden;
}
#timeline-horizontal-5 #next:hover,
#timeline-horizontal-5 #prev:hover {
background-position: 0 -76px;
}
#timeline-horizontal-5 #next {
right: 0;
background: red;
}
#timeline-horizontal-5 #prev {
left: 0;
background: blue;
}
#timeline-horizontal-5 #next.disabled,
#timeline-horizontal-5 #prev.disabled {
opacity: 0.2;
} #timeline-horizontal-6 {
display: -webkit-box;
display: flex;
background-color: #111111;
}
#timeline-horizontal-6 .tl-item {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#timeline-horizontal-6:hover .tl-item {
width: 23.3333%;
}
#timeline-horizontal-6 .tl-item {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
position: relative;
width: 25%;
height: 100vh;
min-height: 600px;
color: #fff;
overflow: hidden;
-webkit-transition: width 0.5s ease;
transition: width 0.5s ease;
}
#timeline-horizontal-6 .tl-item:before,
#timeline-horizontal-6 .tl-item:after {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#timeline-horizontal-6 .tl-item:after {
background: rgba(3, 22, 37, 0.85);
opacity: 1;
-webkit-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
#timeline-horizontal-6 .tl-item:before {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(75%, black));
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 75%);
z-index: 1;
opacity: 0;
-webkit-transform: translate3d(0, 0, 0) translateY(50%);
transform: translate3d(0, 0, 0) translateY(50%);
-webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
transition: opacity 0.5s ease, transform 0.5s ease;
transition: opacity 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
}
#timeline-horizontal-6 .tl-item:hover {
width: 30% !important;
}
#timeline-horizontal-6 .tl-item:hover:after {
opacity: 0;
}
#timeline-horizontal-6 .tl-item:hover:before {
opacity: 0.8;
-webkit-transform: translate3d(0, 0, 0) translateY(0);
transform: translate3d(0, 0, 0) translateY(0);
-webkit-transition: opacity 1s ease, -webkit-transform 1s ease 0.25s;
transition: opacity 1s ease, -webkit-transform 1s ease 0.25s;
transition: opacity 1s ease, transform 1s ease 0.25s;
transition: opacity 1s ease, transform 1s ease 0.25s, -webkit-transform 1s ease 0.25s;
}
#timeline-horizontal-6 .tl-item:hover .tl-content {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition: all 0.75s ease 0.5s;
transition: all 0.75s ease 0.5s;
}
#timeline-horizontal-6 .tl-item:hover .tl-bg {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
#timeline-horizontal-6 .tl-content {
-webkit-transform: translate3d(0, 0, 0) translateY(25px);
transform: translate3d(0, 0, 0) translateY(25px);
position: relative;
z-index: 1;
text-align: center;
margin: 0 1.618em;
top: 55%;
opacity: 0;
}
#timeline-horizontal-6 .tl-content h1 {
text-transform: uppercase;
font-size: 1.4rem;
color: #ffffff;
font-weight: bold;
line-height: 1.8rem;
margin-left: 50px;
margin-right: 50px;
}
#timeline-horizontal-6 .tl-year {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
z-index: 1;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
border: 0;
}
#timeline-horizontal-6 .tl-year p {
font-size: 2rem;
margin: 0;
}
#timeline-horizontal-6 .tl-bg {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-size: cover;
background-position: center center;
-webkit-transition: -webkit-filter 0.5s ease;
transition: -webkit-filter 0.5s ease;
transition: filter 0.5s ease;
transition: filter 0.5s ease, -webkit-filter 0.5s ease;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
#timeline-horizontal-6 .tl-bg img {
display: block;
height: auto;
max-width: none !important;
}
@media only screen and (max-width: 1366px) {
#timeline-horizontal-6 .tl-item .tl-year, #timeline-horizontal-6 .tl-item .tl-content {
-webkit-transition: all .8s ease, -webkit-transform .8s ease;
transition: all .8s ease, -webkit-transform .8s ease;
transition: all .8s ease, transform .8s ease;
transition: all .8s ease, transform .8s ease, -webkit-transform .8s ease;
}
#timeline-horizontal-6 .tl-item:hover .tl-year {
top: 20%;
-webkit-transition: top .8s ease, -webkit-transform .8s ease;
transition: top .8s ease, -webkit-transform .8s ease;
transition: top .8s ease, transform .8s ease;
transition: top .8s ease, transform .8s ease, -webkit-transform .8s ease;
}
#timeline-horizontal-6 .tl-item:hover .tl-content {
top: 25%;
-webkit-transition: top .8s ease, -webkit-transform .8s ease;
transition: top .8s ease, -webkit-transform .8s ease;
transition: top .8s ease, transform .8s ease;
transition: top .8s ease, transform .8s ease, -webkit-transform .8s ease;
}
}
@media only screen and (max-width: 768px) {
#timeline-horizontal-6 .tl-item {
width: 35%;
}
#timeline-horizontal-6 .tl-item:hover {
width: 40% !important;
}
#timeline-horizontal-6:hover .tl-item {
width: 33.3333%;
}
}
@media only screen and (max-width: 640px) {
#timeline-horizontal-6 {
display: block;
}
#timeline-horizontal-6 .tl-item {
width: 100%;
}
#timeline-horizontal-6 .tl-item:hover {
width: 100% !important;
}
#timeline-horizontal-6:hover .tl-item {
width: 100%;
}
} .timeline-horizontal-7.page {
-webkit-box-flex: 1;
flex: 1;
display: -webkit-box;
display: flex;
-webkit-box-pack: end;
justify-content: flex-end;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
position: relative;
}
.timeline-horizontal-7 .timeline__wrapper {
padding: 0 30px;
height: 130px;
display: -webkit-box;
display: flex;
}
.timeline-horizontal-7 .timeline-7 {
display: -webkit-box;
display: flex;
-webkit-box-flex: 1;
flex: 1;
-webkit-box-align: center;
align-items: center;
position: relative;
}
.timeline-horizontal-7 .timeline-7 a {
text-decoration: none;
}
.timeline-horizontal-7 .timeline-7 a:hover {
text-decoration: underline;
}
.timeline-horizontal-7 .timeline__all-cars,
.timeline-horizontal-7 .timeline__exit {
padding: 1em 1.75em;
display: inline-block;
background: white;
}
.timeline-horizontal-7 .timeline__list {
-webkit-box-flex: 1;
flex: 1;
display: -webkit-box;
display: flex;
list-style-type: none;
margin: 0 30px;
padding: 0;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
align-items: center;
align-self: stretch;
position: relative;
}
.timeline-horizontal-7 .timeline__item {
-webkit-box-flex: 1;
flex: 1;
position: relative;
border: 1px dashed rgba(0, 0, 0, 0.1);
margin: 0;
line-height: 0;
}
.timeline-horizontal-7 .timeline__item:after {
content: "";
width: calc(100% - 5px*3);
height: 1px;
position: absolute;
top: 50%;
left: calc(50% + 5px - 1px);
background: white;
z-index: 5;
pointer-events: none;
}
.timeline-horizontal-7 .timeline__item:last-child:after {
display: none;
}
.timeline-horizontal-7 .timeline__item--active .timeline__item__point:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.timeline-horizontal-7 .timeline__link {
position: relative;
display: block;
padding: 10px 0;
}
.timeline-horizontal-7 .timeline__item__point {
width: 5px;
height: 5px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg);
border: 1px solid white;
z-index: 6;
}
.timeline-horizontal-7 .timeline__item__point:after {
content: "";
display: block;
width: 100%;
height: 100%;
background: white;
position: absolute;
top: 0;
left: 0;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.timeline-horizontal-7 .timeline__item__content {
width: 130px;
height: 130px;
position: absolute;
left: 50%;
bottom: 100%;
-webkit-transform: translate(-50%, -20px);
transform: translate(-50%, -20px);
opacity: 0;
-webkit-transition: all 0.75s ease-out;
transition: all 0.75s ease-out;
text-align: center;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
pointer-events: none;
}
.timeline-horizontal-7 .timeline__item__content img {
z-index: 1;
}
.timeline-horizontal-7 .timeline__item__content:before,
.timeline-horizontal-7 .timeline__item__content:after {
pointer-events: none;
content: "";
border: solid 90px transparent;
position: absolute;
width: 0;
height: 0;
top: 50%;
left: 50%;
-webkit-transition: all 0.45s ease-out;
transition: all 0.45s ease-out;
opacity: 0.75;
}
.timeline-horizontal-7 .timeline__item__content:before {
border-bottom-color: #e6e6e6;
-webkit-transform: translate(-50%, -100%) scale(0.6);
transform: translate(-50%, -100%) scale(0.6);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.timeline-horizontal-7 .timeline__item__content:after {
border-top-color: white;
-webkit-transform: translate(-50%, 0%) scale(0.8);
transform: translate(-50%, 0%) scale(0.8);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.timeline-horizontal-7 .clippath .timeline__item__content:after {
box-shadow: 0 -2px 5px 0 rgba(0, 0, 0, 0.1);
-webkit-clip-path: polygon(-2px -2px, calc(100% + 2px) -2px, 50% 100%);
clip-path: polygon(-2px -2px, calc(100% + 2px) -2px, 50% 100%);
}
.timeline-horizontal-7 .timeline__item--active .timeline__item__content,
.timeline-horizontal-7 .timeline__link:hover+.timeline__item__content {
opacity: 1;
-webkit-transform: translate(-50%, -55px);
transform: translate(-50%, -55px);
}
.timeline-horizontal-7 .timeline__item--active .timeline__item__content:before,
.timeline-horizontal-7 .timeline__link:hover+.timeline__item__content:before {
-webkit-transform: translate(-50%, -100%) scale(1);
transform: translate(-50%, -100%) scale(1);
opacity: 1;
}
.timeline-horizontal-7 .timeline__item--active .timeline__item__content:after,
.timeline-horizontal-7 .timeline__link:hover+.timeline__item__content:after {
-webkit-transform: translate(-50%, 0%) scale(1);
transform: translate(-50%, 0%) scale(1);
opacity: 1;
}
.timeline-horizontal-7 .timeline__item__year {
position: absolute;
top: 40px;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 2;
-webkit-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
opacity: 0;
width: 100%;
text-align: center;
}
.timeline-horizontal-7 .timeline__item--active .timeline__item__year,
.timeline-horizontal-7 .timeline__link:hover~.timeline__item__year {
color: green;
font-size: 26px;
font-weight: bold;
}
.timeline-horizontal-7 .timeline__item:nth-child(3n + 1) .timeline__item__year {
opacity: 1;
}
.timeline-horizontal-7 .timeline__item__thumb {
position: relative;
z-index: 5;
}
.timeline-horizontal-7 .timeline__item__shadow {
position: absolute;
top: calc(50% - 20/130 * 100%);
left: 50%;
z-index: -1;
width: 0;
height: 0;
border-style: solid;
border-width: 130px 130px 0 0;
border-color: rgba(0, 0, 0, 0.25) transparent transparent transparent;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity: 0.6;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.timeline-horizontal-7 .timeline__item--active .timeline__item__shadow,
.timeline-horizontal-7 .timeline__link:hover+.timeline__item__content .timeline__item__shadow {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.timeline-horizontal-7 .timeline__path {
position: absolute;
top: 0;
left: 25px;
right: 0;
height: 100%;
overflow: hidden;
pointer-events: none;
z-index: -1;
-webkit-clip-path: polygon(130px 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(130px 0, 100% 0, 100% 100%, 0 100%);
}
.timeline-horizontal-7 .timeline__path__triangle {
display: block;
position: absolute;
border-style: solid;
width: 0;
height: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.timeline-horizontal-7 .timeline__path__triangle--static-1,
.timeline-horizontal-7 .timeline__path__triangle--static-2 {
top: 0;
}
.timeline-horizontal-7 .timeline__path__triangle--static-1 {
border-width: 260px 260px 0 260px;
border-color: rgba(0, 0, 0, 0.2) transparent transparent transparent;
left: 0;
}
.timeline-horizontal-7 .timeline__path__triangle--static-2 {
border-width: 260px 260px 0 260px;
border-color: rgba(255, 255, 255, 0.4) transparent transparent transparent;
right: 0;
}
.timeline-horizontal-7 .timeline__path__triangle--static-3 {
border-width: 0 260px 260px 260px;
border-color: transparent transparent rgba(255, 255, 255, 0.4) transparent;
left: 30%;
bottom: 0;
}
.timeline-horizontal-7 .timeline__path__triangle--moving {
position: absolute;
border-width: 260px 260px 0 260px;
border-color: rgba(255, 255, 255, 0.2) transparent transparent transparent;
left: 0;
top: 0;
-webkit-transition: -webkit-transform 3s ease-out;
transition: -webkit-transform 3s ease-out;
transition: transform 3s ease-out;
transition: transform 3s ease-out, -webkit-transform 3s ease-out;
}
.timeline-horizontal-7 .views,
.timeline-horizontal-7 .view {
width: 100%;
height: 100vh;
}
.timeline-horizontal-7 .views {
background: pink;
}
.timeline-horizontal-7 .view__inner {
display: -webkit-box;
display: flex;
width: 100%;
height: 100%;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
flex-direction: column;
}
.timeline-horizontal-7 .view__inner h2 {
font-size: 100px;
margin: 0;
}
.timeline-horizontal-7 .timeline__wrapper {
position: absolute;
bottom: 0;
z-index: 2;
width: calc(100% - 15px);
}
.timeline-horizontal-7 .slick-slide {
outline: none;
}
.timeline-horizontal-7 .slick-arrow {
background: red;
z-index: 10;
font-size: 14px;
}
.timeline-horizontal-7 .slick-prev {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.timeline-horizontal-7 .slick-next {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
} .timeline-horizontal-8 button {
background-color: transparent!important;
padding: 0;
text-decoration: none!important;;
outline: none!important;;
}
.timeline-horizontal-8 {
white-space: nowrap;
overflow-x: hidden;
}
.timeline-horizontal-8 ol {
font-size: 0;
width: 100vw;
padding: 250px 0;
transition: all 1s;
}
.timeline-horizontal-8 ol li {
position: relative;
display: inline-block;
list-style-type: none;
width: 160px;
height: 3px;
background: #fff;
}
.timeline-horizontal-8 ol li:last-child {
width: 280px;
}
.timeline-horizontal-8 ol li:not(:first-child) {
margin-left: 14px;
}
.timeline-horizontal-8 ol li:not(:last-child)::after {
content: '';
position: absolute;
top: 50%;
left: calc(100% + 1px);
bottom: 0;
width: 12px;
height: 12px;
transform: translateY(-50%);
border-radius: 50%;
background: #F45B69;
}
.timeline-horizontal-8 ol li div {
position: absolute;
left: calc(100% + 7px);
width: 280px;
padding: 15px;
font-size: 1rem;
white-space: normal;
color: black;
background: white;
}
.timeline-horizontal-8 ol li div::before {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 0;
height: 0;
border-style: solid;
}
.timeline-horizontal-8 ol li:nth-child(odd) div {
top: -16px;
transform: translateY(-100%);
}
.timeline-horizontal-8 ol li:nth-child(odd) div::before {
top: 100%;
border-width: 8px 8px 0 0;
border-color: white transparent transparent transparent;
}
.timeline-horizontal-8 ol li:nth-child(even) div {
top: calc(100% + 16px);
}
.timeline-horizontal-8 ol li:nth-child(even) div::before {
top: -8px;
border-width: 8px 0 0 8px;
border-color: transparent transparent transparent white;
}
.timeline-horizontal-8 span {
display: block;
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 8px;
}
#horizontal-8 .timeline {
white-space: nowrap;
overflow-x: hidden;
}
#horizontal-8 .timeline ol {
font-size: 0;
width: 100vw;
padding: 250px 0;
transition: all 1s;
}
#horizontal-8 .timeline ol li {
position: relative;
display: inline-block;
list-style-type: none;
width: 160px;
height: 1px;
background: red;
}
#horizontal-8 .timeline ol li:last-child {
width: 280px;
}
#horizontal-8 .timeline ol li:not(:first-child) {
margin-left: 14px;
}
#horizontal-8 .timeline ol li:not(:last-child)::after {
content: '';
position: absolute;
top: 50%;
left: calc(100% + 1px);
bottom: 0;
width: 12px;
height: 12px;
transform: translateY(-50%);
border-radius: 50%;
border: 4px solid#F45B69;
background: #FFF
}
#horizontal-8 .timeline ol li div {
position: absolute;
left: calc(100% + 7px);
width: 280px;
padding: 15px;
font-size: 1rem;
white-space: normal;
color: black;
background: white;
}
#horizontal-8 .timeline ol li div::before {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 0;
height: 0;
border-style: solid;
}
#horizontal-8 .timeline ol li:nth-child(odd) div {
top: -16px;
transform: translateY(-100%);
}
#horizontal-8 .timeline ol li:nth-child(odd) div::before {
top: 100%;
border-width: 8px 8px 0 0;
border-color: white transparent transparent transparent;
}
#horizontal-8 .timeline ol li:nth-child(even) div {
top: calc(100% + 16px);
}
#horizontal-8 .timeline ol li:nth-child(even) div::before {
top: -8px;
border-width: 8px 0 0 8px;
border-color: transparent transparent transparent white;
}
#horizontal-8 .timeline time {
display: block;
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 8px;
} #horizontal-8 .timeline .arrows {
display: flex;
justify-content: center;
margin-bottom: 20px;
margin-top: 20%;
}
#horizontal-8 .timeline .disabled {
background-color: transparent;
border: 1px solid #aaa;
color: #aaa;
}
#horizontal-8 .timeline .arrow {
height: 75px;
width: 75px;
padding: 0px;
border-radius: 100%;
margin: 0 5px;
font-size: 25px;
} @media screen and (max-width: 599px) {
#horizontal-8 .timeline ol,
#horizontal-8 .timeline ol li {
width: auto; 
}
#horizontal-8 .timeline ol {
padding: 0;
transform: none !important;
}
#horizontal-8 .timeline ol li {
display: block;
height: auto;
background: transparent;
}
#horizontal-8 .timeline ol li:first-child {
margin-top: 25px;
}
#horizontal-8 .timeline ol li:not(:first-child) {
margin-left: auto;
}
#horizontal-8 .timeline ol li div {
width: 100%;
height: auto !important;
margin: 0 auto 25px;
}
#horizontal-8 .timeline ol li div {
position: static;
}
#horizontal-8 .timeline ol li:nth-child(odd) div {
transform: none;
}
#horizontal-8 .timeline ol li:nth-child(odd) div::before,
#horizontal-8 .timeline ol li:nth-child(even) div::before {
left: 50%;
top: 100%;
transform: translateX(-50%);
border: none;
border-left: 1px solid white;
height: 25px;
}
#horizontal-8 .timeline ol li:last-child,
#horizontal-8 .timeline ol li:nth-last-child(2) div::before,
#horizontal-8 .timeline ol li:not(:last-child)::after,
#horizontal-8 .timeline .arrows {
display: none;
}
} .timeline-horizontal-8 .arrows {
display: flex;
justify-content: center;
margin-bottom: 20px;
z-index: 2;
position: relative;
}
.timeline-horizontal-8 .arrows .arrow__prev {
margin-right: 20px;
}
.timeline-horizontal-8 .disabled {
opacity: .5;
}
.timeline-horizontal-8 .arrows img {
width: 45px;
height: 45px;
} @media screen and (max-width: 599px) {
.timeline-horizontal-8 ol,
.timeline-horizontal-8 ol li {
width: auto;
}
.timeline-horizontal-8 ol {
padding: 0;
transform: none !important;
}
.timeline-horizontal-8 ol li {
display: block;
height: auto;
background: transparent;
}
.timeline-horizontal-8 ol li:first-child {
margin-top: 25px;
}
.timeline-horizontal-8 ol li:not(:first-child) {
margin-left: auto;
}
.timeline-horizontal-8 ol li div {
width: 94%;
height: auto !important;
margin: 0 auto 25px;
}
.timeline-horizontal-8 ol li div {
position: static;
}
.timeline-horizontal-8 ol li:nth-child(odd) div {
transform: none;
}
.timeline-horizontal-8 ol li:nth-child(odd) div::before,
.timeline-horizontal-8 ol li:nth-child(even) div::before {
left: 50%;
top: 100%;
transform: translateX(-50%);
border: none;
border-left: 1px solid white;
height: 25px;
}
.timeline-horizontal-8 ol li:last-child,
.timeline-horizontal-8 ol li:nth-last-child(2) div::before,
.timeline-horizontal-8 ol li:not(:last-child)::after,
.timeline-horizontal-8 .arrows {
display: none;
}
} #timeline-horizontal-9.flex-parent {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
#timeline-horizontal-9 .input-flex-container {
display: flex;
justify-content: space-around;
align-items: center;
width: 80vw;
height: 100px;
max-width: 1000px;
position: relative;
z-index: 0;
}
#timeline-horizontal-9 .input {
width: 25px;
height: 25px;
background-color: #2C3E50;
position: relative;
border-radius: 50%;
}
#timeline-horizontal-9 .input:hover {
cursor: pointer;
}
#timeline-horizontal-9 .input::before,
#timeline-horizontal-9 .input::after {
content: "";
display: block;
position: absolute;
z-index: -1;
top: 50%;
transform: translateY(-50%);
background-color: #2C3E50;
width: 4vw;
height: 5px;
max-width: 50px;
}
#timeline-horizontal-9 .input::before {
left: calc(-4vw + 12.5px);
}
#timeline-horizontal-9 .input::after {
right: calc(-4vw + 12.5px);
}
#timeline-horizontal-9 .input.active {
background-color: #2C3E50;
}
#timeline-horizontal-9 .input.active::before {
background-color: #2C3E50;
}
#timeline-horizontal-9 .input.active::after {
background-color: #AEB6BF;
}
#timeline-horizontal-9 .input.active span {
font-weight: 700;
}
#timeline-horizontal-9 .input.active span::before {
font-size: 13px;
}
#timeline-horizontal-9 .input.active span::after {
font-size: 15px;
}
#timeline-horizontal-9 .input.active~.input,
#timeline-horizontal-9 .input.active~.input::before,
#timeline-horizontal-9 .input.active~.input::after {
background-color: #AEB6BF;
}
#timeline-horizontal-9 .input span {
width: 700px;
height: 1px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
visibility: hidden;
}
#timeline-horizontal-9 .input span::before,
#timeline-horizontal-9 .input span::after {
visibility: visible;
position: absolute;
left: 50%;
}
#timeline-horizontal-9 .input span::after {
content: attr(data-year);
top: 25px;
transform: translateX(-50%);
font-size: 14px;
}
#timeline-horizontal-9 .input span::before {
content: attr(data-info);
top: -65px;
width: 70px;
transform: translateX(-5px) rotateZ(-45deg);
font-size: 12px;
text-indent: -10px;
}
#timeline-horizontal-9 .description-flex-container {
width: 80vw;
font-weight: 400;
font-size: 22px;
margin-top: 100px;
max-width: 1000px;
clear: both;
display: inline-block;
}
#timeline-horizontal-9 .description-flex-container .content {
margin-top: 0;
display: none;
}
#timeline-horizontal-9 .description-flex-container .content.active {
display: block;
}
@media (min-width: 1250px) {
#timeline-horizontal-9 .input::before {
left: -37.5px;
}
#timeline-horizontal-9 .input::after {
right: -37.5px;
}
}
@media (max-width: 850px) {
#timeline-horizontal-9 .input {
width: 17px;
height: 17px;
}
#timeline-horizontal-9 .input::before,
#timeline-horizontal-9 .input::after {
height: 3px;
}
#timeline-horizontal-9 .input::before {
left: calc(-4vw + 8.5px);
}
#timeline-horizontal-9 .input::after {
right: calc(-4vw + 8.5px);
}
}
@media (max-width: 600px) {
#timeline-horizontal-9.flex-parent {
justify-content: initial;
}
#timeline-horizontal-9 .input-flex-container {
flex-wrap: wrap;
justify-content: center;
width: 100%;
height: auto;
margin-top: 15vh;
}
#timeline-horizontal-9 .input {
width: 60px;
height: 60px;
margin: 0 10px 50px;
background-color: #AEB6BF;
}
#timeline-horizontal-9 .input::before,
#timeline-horizontal-9 .input::after {
content: none;
}
#timeline-horizontal-9 .input span {
width: 100%;
height: 100%;
display: block;
}
#timeline-horizontal-9 .input span::before {
top: calc(100% + 5px);
transform: translateX(-50%);
text-indent: 0;
text-align: center;
}
#timeline-horizontal-9 .input span::after {
top: 50%;
transform: translate(-50%, -50%);
color: #ECF0F1;
}
#timeline-horizontal-9 .description-flex-container {
margin-top: 30px;
text-align: center;
}
}
#timeline-horizontal-9.timeline-container {
margin: 60px auto;
}
#timeline-horizontal-9 .input.active {
background-color: #cf563a;
}
#timeline-horizontal-9 .input.active::before {
background-color: #cf563a;
}
#timeline-horizontal-9 .input.active::after {
background-color: #cf563a;
}
#timeline-horizontal-9 .input span {
color: #ffffff;
}
#timeline-horizontal-9 .content img {
width: 50%;
float: left;
border-radius: 5px;
border: 10px solid #ffffff;
}
#timeline-horizontal-9 h5{
margin-top:0;
margin-bottom: 20px;
font-style: italic;
}
#timeline-horizontal-9 h2{
color: #ffffff;
margin-bottom: 20px;
margin-top: 0;
}
#timeline-horizontal-9 .input-flex-container {
width: 100%;
}
#timeline-horizontal-9 .description-flex-container .content.active {
float: left;
}
#timeline-horizontal-9 .input {
width: 25px;
height: 25px;
background-color: #2C3E50;
position: relative;
border-radius: 50%;
}
#timeline-horizontal-9 .input::before, #timeline-horizontal-9 .input::after {
height: 2px;
}
#timeline-horizontal-9 .input {
background-color: #cf563a;
}
#timeline-horizontal-9 .input::before, #timeline-horizontal-9 .input::after {
background-color: #cf563a;
}
#timeline-horizontal-9 .input.active~.input{
background-color: #cf563a;
border:2px solid #fff;
}
#timeline-horizontal-9 .input.active~.input::before, #timeline-horizontal-9 .input.active~.input::after {
background-color: #fff;
}
#timeline-horizontal-9 .input {
width: 20px;
height: 20px;
}
#timeline-horizontal-9 .timeline-desc {
float: left;
padding: 20px;
width: 50%;
}
#timeline-horizontal-9 .description-flex-container {
margin-top: 50px;
color: #fff;
}
#timeline-horizontal-9 .input span::before {
content: attr(data-info);
top: -122px;
width: 153px;
transform: translateX(-5px) rotateZ(-45deg);
font-size: 12px;
text-indent: -21px;
} #timeline-horizontal-10.body-wrap {
background-color: #fff;
width: 600px;
min-height: 500px;
margin: 0 auto;
font-size: 12px;
}
@media screen and (max-width: 600px) {
#timeline-horizontal-10.body-wrap {
width: 100%;
}
}
#timeline-horizontal-10 .pres-timeline {
font-size: 12px;
color: #4A4A4A;
width: 100%;
margin: 30px 0;
}
#timeline-horizontal-10 .pres-timeline>div>div {
padding: 2em 0;
box-sizing: border-box;
}
#timeline-horizontal-10 .pres-timeline .periods-container,
#timeline-horizontal-10 .pres-timeline .cards-container {
overflow: hidden;
box-sizing: border-box;
position: relative;
min-height: 100px;
-webkit-transition: height 0.5s ease-in-out;
transition: height 0.5s ease-in-out;
background-color: #FFF;
}
#timeline-horizontal-10 .periods-container:before {
background-image: -webkit-gradient(linear, left top, right top, from(#FFF), to(rgba(248, 248, 248, 0)));
background-image: linear-gradient(left, #FFF, rgba(248, 248, 248, 0));
left: 0;
content: "";
position: absolute;
z-index: 2;
top: 0;
height: 100%;
width: 100px;
}
#timeline-horizontal-10 .periods-container:after {
background-image: -webkit-gradient(linear, right top, left top, from(#FFF), to(rgba(248, 248, 248, 0)));
background-image: linear-gradient(right, #FFF, rgba(248, 248, 248, 0));
right: 0;
content: "";
position: absolute;
z-index: 2;
top: 0;
height: 100%;
width: 100px;
}
#timeline-horizontal-10 .periods-container .btn-back,
#timeline-horizontal-10 .periods-container .btn-next {
display: inline-block;
width: 15%;
height: 100%;
position: absolute;
cursor: pointer;
z-index: 10;
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
#timeline-horizontal-10 .periods-container .btn-back:hover,
#timeline-horizontal-10 .periods-container .btn-next:hover {
background-color: rgba(0, 0, 0, 0.05);
}
#timeline-horizontal-10 .periods-container .btn-back.hide,
#timeline-horizontal-10 .periods-container .btn-next.hide {
display: none;
}
#timeline-horizontal-10 .periods-container .btn-back {
left: 0;
}
#timeline-horizontal-10 .periods-container .btn-next {
right: 0;
}
#timeline-horizontal-10 .periods-container section {
width: 70%;
height: 0;
position: absolute;
margin-left: 15%;
border-bottom: 5px solid #dfe3e6;
padding: 1.5em;
box-sizing: border-box;
-webkit-transition: opacity 0.2s ease, height 0.3s ease, -webkit-transform 0.3s ease-in-out;
transition: opacity 0.2s ease, height 0.3s ease, -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out, opacity 0.2s ease, height 0.3s ease;
transition: transform 0.3s ease-in-out, opacity 0.2s ease, height 0.3s ease, -webkit-transform 0.3s ease-in-out;
bottom: 0;
opacity: 0;
background-color: #fff;
}
#timeline-horizontal-10 .periods-container section.active {
height: auto;
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
z-index: 5;
}
#timeline-horizontal-10 .periods-container section.active .title,
#timeline-horizontal-10 .periods-container section.active p {
display: block;
}
#timeline-horizontal-10 .periods-container section.prev {
height: auto;
opacity: 0.4;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
z-index: 0;
}
#timeline-horizontal-10 .periods-container section.prev .year {
text-align: right;
}
#timeline-horizontal-10 .periods-container section.next {
height: auto;
opacity: 0.4;
-webkit-transform: translateX(100%);
transform: translateX(100%);
z-index: 0;
}
#timeline-horizontal-10 .periods-container section .year {
font-size: 20px;
font-weight: 400;
margin-top: 10px;
}
#timeline-horizontal-10 .periods-container section .title {
color: #4A4A4A;
font-size: 28px;
font-weight: 400;
display: none;
margin-top: 0;
}
#timeline-horizontal-10 .periods-container section p {
display: none;
}
#timeline-horizontal-10 .timeline-10-container {
position: relative;
width: 100%;
height: 50px;
overflow: hidden;
}
#timeline-horizontal-10 .timeline-10-container:before {
background-image: -webkit-gradient(linear, left top, right top, from(#FFF), to(rgba(248, 248, 248, 0)));
background-image: linear-gradient(left, #FFF, rgba(248, 248, 248, 0));
left: 0;
content: "";
position: absolute;
z-index: 2;
top: 0;
height: 100%;
width: 100px;
}
#timeline-horizontal-10 .timeline-10-container:after {
background-image: -webkit-gradient(linear, right top, left top, from(#FFF), to(rgba(248, 248, 248, 0)));
background-image: linear-gradient(right, #FFF, rgba(248, 248, 248, 0));
right: 0;
content: "";
position: absolute;
z-index: 2;
top: 0;
height: 100%;
width: 100px;
}
#timeline-horizontal-10 .timeline-10-container .timeline {
position: absolute;
display: block;
height: 50px;
left: -30px;
-webkit-transition: left 0.3s ease-in-out;
transition: left 0.3s ease-in-out;
}
#timeline-horizontal-10 .timeline-10-container .timeline ol {
display: flex;
width: 100%;
height: 2px;
background-color: #dfe3e6;
list-style: none;
padding-left: 210px;
padding-right: 300px;
}
#timeline-horizontal-10 .timeline-10-container .timeline ol li {
display: inline-block;
padding: 5px;
margin-top: -7px;
margin-left: 80px;
border-radius: 50%;
border: 3px solid #7f9298;
background-color: #FFF;
position: relative;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
#timeline-horizontal-10 .timeline-10-container .timeline ol li.active {
box-shadow: none;
}
#timeline-horizontal-10 .timeline-10-container .timeline ol li.active:before {
content: "";
display: block;
height: 25px;
width: 1px;
position: absolute;
top: -25px;
-webkit-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
#timeline-horizontal-10 .timeline-10-container .timeline ol li.active:after {
content: "";
display: block;
height: 25px;
width: 1px;
position: absolute;
bottom: -25px;
-webkit-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
#timeline-horizontal-10 .timeline-10-container .btn-back,
#timeline-horizontal-10 .timeline-10-container .btn-next {
display: inline-block;
position: absolute;
cursor: pointer;
margin-top: -2px;
z-index: 11;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#timeline-horizontal-10 .timeline-10-container .btn-back.hide,
#timeline-horizontal-10 .timeline-10-container .btn-next.hide {
display: none;
}
#timeline-horizontal-10 .timeline-10-container .btn-back:hover,
#timeline-horizontal-10 .timeline-10-container .btn-next:hover {
border-color: #7f9298;
}
#timeline-horizontal-10 .timeline-10-container .btn-back {
left: 1em;
}
#timeline-horizontal-10 .timeline-10-container .btn-next {
right: 1em;
}
#timeline-horizontal-10 .cards-container:before {
background-image: -webkit-gradient(linear, left top, right top, from(#FFF), to(rgba(248, 248, 248, 0)));
background-image: linear-gradient(left, #FFF, rgba(248, 248, 248, 0));
left: 0;
content: "";
position: absolute;
z-index: 2;
top: 0;
height: 100%;
width: 100px;
}
#timeline-horizontal-10 .cards-container:after {
background-image: -webkit-gradient(linear, right top, left top, from(#FFF), to(rgba(248, 248, 248, 0)));
background-image: linear-gradient(right, #FFF, rgba(248, 248, 248, 0));
right: 0;
content: "";
position: absolute;
z-index: 2;
top: 0;
height: 100%;
width: 100px;
}
#timeline-horizontal-10 .cards-container section {
width: 70%;
position: absolute;
margin-left: 15%;
margin-bottom: 2em;
border: 1px solid #f5f7f6;
padding: 1.5em;
box-sizing: border-box;
-webkit-transition: -webkit-transform 0.3s ease-in-out;
transition: -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
top: 0;
opacity: 0;
border-radius: 8px;
background-color: #fff;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
}
#timeline-horizontal-10 .cards-container section.active {
height: auto;
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
z-index: 5;
}
#timeline-horizontal-10 .cards-container section.prev {
height: auto;
opacity: 0.4;
-webkit-transform: translateX(-105%);
transform: translateX(-105%);
z-index: 0;
}
#timeline-horizontal-10 .cards-container section.next {
height: auto;
opacity: 0.4;
-webkit-transform: translateX(105%);
transform: translateX(105%);
z-index: 0;
}
#timeline-horizontal-10 .cards-container section .year {
text-align: center;
font-size: 16px;
margin: 0;
}
#timeline-horizontal-10 .cards-container section .title {
margin: 0;
font-weight: 400;
margin-bottom: 10px;
}
#timeline-horizontal-10 .cards-container section img {
width: 100%;
margin-bottom: 10px;
}
#timeline-horizontal-10 .cards-container section{
padding: 0;
margin-top: 1em;
box-shadow: unset;
}
#timeline-horizontal-10 .cards-container section img {
width: 100%;
margin-bottom: 0;
border: solid 4px #ffffff;
border-radius: 5px;
box-shadow: 0px 0px 16px -9px #000;
}
#timeline-horizontal-10 .periods-container section{
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
margin-bottom: 1em;
border-bottom: 0;
}