@import url("https://fonts.googleapis.com/css?family=Cardo|Pathway+Gothic+One");
.timeline {
display: flex;
margin: 0 auto;
flex-wrap: wrap;
flex-direction: column;
max-width: 1100px;
width: 90%;
position: relative;
}
.timeline__content-title {
font-weight: normal;
margin: -10px 0 0 0;
transition: 0.4s;
padding: 0 10px;
box-sizing: border-box;
font-family: "Pathway Gothic One", sans-serif;
display: inline-block;
}
.timeline__content-desc {
margin: 0;
box-sizing: border-box;
}
.timeline:before {
position: absolute;
left: 50%;
width: 3px;
height: 100%;
margin-left: -1px;
content: "";
background: rgb(176 44 31);
}
.timeline-item {
padding: 190px 0 0 0;
opacity: 0.1;
filter: blur(2px);
transition: 0.5s;
box-sizing: border-box;
width: calc(50% - 40px);
display: flex;
position: relative;
transform: translateY(-160px);
}
.timeline-item:before {
content: attr(data-text);
letter-spacing: 3px;
width: 100%;
position: absolute;
font-family: "Pathway Gothic One", sans-serif;
font-size: 4rem;
border-left: 23px solid rgb(176 44 31);
top: 70%;
margin-top: -5px;
padding-left: 15px;
opacity: 0;
right: calc(-100% - 28px);
}
.timeline-item:nth-child(even) {
align-self: flex-end;
}
.timeline-item:nth-child(even):before {
right: auto;
text-align: right;
left: calc(-100% - 26px);
padding-left: 0;
border-left: none;
border-right: 23px solid rgb(176 44 31);
padding-right: 15px;
}
.timeline-item--active {
opacity: 1;
transform: translateY(0);
filter: blur(0px);
}
.timeline-item--active:before {
top: 50%;
transition: 0.3s all 0.2s;
opacity: 1;
}
.timeline-item--active .timeline__content-title {
margin: -50px 0 20px 0;
display: inline-block;
}
.timeline__img {
max-width: 100%;
}
.timeline-container {
width: 100%;
position: relative;
padding: 80px 0 0 0;
transition: 0.3s ease 0s;
background-attachment: fixed;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.timeline-container:before {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, .92);
content: "";
}
.timeline-header {
width: 100%;
text-align: center;
margin-bottom: 80px;
position: relative;
}
.timeline-header__title {
font-family: "Pathway Gothic One", sans-serif;
font-weight: normal;
margin: 0;
font-size: 10vh;
letter-spacing: -5px;
}
.timeline-header__subtitle {
font-family: "Pathway Gothic One", sans-serif;
}
.demo-footer {
padding: 60px 0;
text-align: center;
}
.demo-footer a {
color: #999;
display: inline-block;
font-family: Cardo;
}
span {
display: inline-block;
background: black;
padding: 0 13px;
color: #ffffff;
}
img.timeline__img2 {
display: none;
}
.parallax-container {
height: 900px;
}
.parallax-container .texto{
font-size: 20vw;
font-weight: 700;
text-shadow: -4px 7px 20px #00000038;
z-index: 9999;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
color: #ffffff87;
}
.footerbajo{
background-image: url('../timeline/footer.png') ;
width: 100%;
height: 680px;
background-size: 100%;
background-repeat: no-repeat;
background-position: center bottom;
margin-top: 20px;
position: relative;
}
.footerbajo{background-image: url('../timeline/footer.png');width: 100%;height: 879px;background-size: 100%;background-repeat: no-repeat;background-position: center bottom;margin-top: 20px;position: relative;}
@media only screen and (max-width: 1900px) { .footerbajo{height: 660px;background-size: 110%;}}
@media only screen and (max-width: 1800px) { .footerbajo{height: 620px;background-size: 110%;}}
@media only screen and (max-width: 1700px) { .footerbajo{height: 560px;background-size: 110%;}}
@media only screen and (max-width: 1600px) { .footerbajo{height: 550px;background-size: 110%;}}
@media only screen and (max-width: 1500px) { .footerbajo{height: 500px;background-size: 110%;}}
@media only screen and (max-width: 1400px) { .footerbajo{ height: 480px; background-size: 110%;}}
@media only screen and (max-width: 1200px) { .footerbajo{ height: 470px; background-size: 100%;}}
@media only screen and (max-width: 1100px) { .footerbajo{ height: 460px; background-size: 110%;}}
@media only screen and (max-width: 1000px) { .footerbajo{ height: 450px; background-size: 120%;}}
@media only screen and (max-width: 900px)  { .footerbajo{ height: 440px; background-size: 130%;}}
@media only screen and (max-width: 800px)  { .footerbajo{ height: 430px; background-size: 140%;}}
@media only screen and (max-width: 700px)  { .footerbajo{ height: 420px; background-size: 150%;}}
@media only screen and (max-width: 600px)  { .footerbajo{ height: 310px; background-size: 170%;}
.timeline:before {
display: none !important;
background: transparent !important;
}
.timeline-item {
align-self: baseline !important;
width: 100% !important;
padding: 40% 10% 0 10%;
transform: translateY(-180px);
}
.timeline-item:last-child {
padding-bottom: 40px;
}
.timeline-item:before {
content: "";
display: none !important;
}
.parallax-container {
height: 400px!important;
}
.parallax-container .parallax img {
left: 0;
}
.parallax-container .texto {
font-size: 35vw;
}
.timeline-container:before {
background: rgb(255 255 255);
}
.timeline__img{
max-width: 100%;
}
.timeline-header__title {
        font-size: 7vh;
        letter-spacing: -2px;
        line-height: 100px;
}
}