@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Cardo|Pathway+Gothic+One");

.main-contents {
        margin: 5rem auto 0;
}

.timeline-container {
        width: 100%;
        position: relative;
        padding: 80px 0;
        transition: 0.3s ease 0s;
        background-attachment: fixed;
        background-size: cover;
}

.timeline-container:before {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(99, 99, 99, 0.8);
        content: "";
}

.timeline-header {
        width: 100%;
        text-align: center;
        margin-bottom: 80px;
        position: relative;
}

.timeline-header__title {
        color: #fff;
        font-size: 3rem;
        margin: 0;
}

.timeline-header__subtitle {
        color: rgba(255, 255, 255, 0.9);
        letter-spacing: 5px;
        margin: 10px 0 0 0;
}

.timeline {
        display: flex;
        margin: 0 auto;
        flex-wrap: wrap;
        flex-direction: column;
        max-width: calc(1200px + 6%);
        position: relative;
}

.timeline__content-title {
        display: none;
}

.timeline__content-desc {
        margin: 1rem 0;
        box-sizing: border-box;
        color: rgba(255, 255, 255, 0.9);
        line-height: 2.5rem;
        letter-spacing: 0.15em;
        text-align: justify;
}

.timeline:before {
        position: absolute;
        left: 50%;
        width: 2px;
        height: 100%;
        margin-left: -1px;
        content: "";
        background: rgba(255, 255, 255, 0.07);
}

.timeline-item {
        padding: 100px 0;
        opacity: 0.3;
        filter: blur(2px);
        transition: 0.5s;
        box-sizing: border-box;
        width: calc(50% - 40px);
        display: flex;
        position: relative;
        transform: translateY(-80px);
}

.timeline-item:before {
        content: attr(data-text);
        letter-spacing: 3px;
        width: 100%;
        position: absolute;
        color: rgba(255, 255, 255, 0.8);
        border-left: 2px solid rgba(255, 255, 255, 0.9);
        top: 70%;
        margin-top: -5px;
        padding-left: 15px;
        opacity: 0;
        right: calc(-100% - 56px);
        font-size: 2.5rem;
}

.timeline-item::after {
        content: attr(data-date);
        letter-spacing: 3px;
        width: 100%;
        position: absolute;
        color: rgba(255, 255, 255, 0.8);
        top: 55%;
        margin-top: -5px;
        padding-left: 0;
        opacity: 0;
        right: calc(-100% - 56px);
        font-size: 7rem;
        font-family: "Pathway Gothic One", sans-serif;
        text-shadow: 4px 4px rgba(0, 0, 0, 0.4);
}


.timeline-item:nth-child(even) {
        align-self: flex-end;
}

.timeline-item:nth-child(even):before {
        right: auto;
        text-align: right;
        left: calc(-100% - 56px);
        padding-left: 0;
        border-left: none;
        border-right: 2px solid rgba(255, 255, 255, 0.9);
        padding-right: 15px;
}

.timeline-item:nth-child(even)::after {
        right: auto;
        text-align: right;
        left: calc(-100% - 56px);
        padding-left: 0;
        border-left: none;
        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::after {
        top: 35%;
        transition: 0.3s all 0.2s;
        opacity: 1;
}

.timeline-item--active .timeline__content-title {
        margin: -40px 0 10px 0;
}

.timeline__img {
        max-width: 100%;
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4);
}

@media only screen and (max-width: 767px) {
        .timeline:before {
                left: 30px;
        }

        .timeline-item {
                align-self: baseline !important;
                width: 100%;
                padding: 50px 30px 150px 80px;
        }

        .timeline-item:before {
                right: auto;
                left: 8px !important;
                padding: 0 !important;
                top: 50px;
                text-align: center !important;
                width: 60px;
                border: none !important;
                writing-mode: vertical-rl;
                text-orientation: upright;
                font-size: 1.5rem;
        }

        .timeline-item::after {
                display: none;
        }

        .timeline-item:last-child {
                padding-bottom: 40px;
        }

        .timeline__content-title {
                display: block;
                font-size: 5rem;
                font-weight: normal;
                font-size: 66px;
                margin: -10px 0 0 0;
                transition: 0.4s;
                padding: 0 10px;
                box-sizing: border-box;
                color: #fff;
                font-family: "Pathway Gothic One", sans-serif;
                text-shadow: 4px 4px rgba(0, 0, 0, 0.4);
        }
}