@charset "UTF-8";
/*
Theme Name:Timeline
*/

/**
*** reset
***/

* { padding: 0; margin: 0; }
li { list-style: none; }

/**
*** timeline
***/

.timeline__cleanup .addtoany_content {
    display: none;
}

.timeline__wrapper { display: flex; justify-content: center; padding: 20px 0; }

@media only screen and (max-width: 767px) {
    .timeline__wrapper { justify-content: flex-start; margin-left: 30px; }
}

    /**
    *** years
    ***/

    .timeline__years { padding: 0 !important; margin-left: 250px; border-left: 1px solid #999; }

    @media only screen and (max-width: 767px) {
        .timeline__years { margin-left:0; }
    }

    /**
    *** year
    ***/

    .timeline__year { position: relative; width: 250px; margin-bottom: 20px; text-align: left; }

    .timeline__year h2 { position: relative; margin-bottom: 20px; padding-left: 25px; font: 700 32px 'Montserrat', sans-serif; }
    .timeline__year h2::before {
        content: ''; position: absolute; top: 0; left: -18px;
        display: block; width: 34px; height: 34px; border-radius: 34px; background: #fff; border: 1px solid #999;
    }
    .timeline__year h2::after {
        content: ''; position: absolute; top: 8px; left: -10px;
        display: block; width: 20px; height: 20px; border-radius: 20px;
    }

    @media only screen and (max-width: 767px) {
        .timeline__year { width: auto; }
    }

    @media only screen and (min-width: 768px) {
        /**
        *** left
        ***/

        .timeline__year--left { }
        .timeline__year--left h2 { left: -250px; padding-right: 25px; text-align: right }
        .timeline__year--left h2::before { right: -18px; left: auto; }
        .timeline__year--left h2::after { right: -10px; left: auto; }
    }

        /**
        *** month
        ***/

        .timeline__months { padding: 0 !important; }

        .timeline__month { position: relative; }
        .timeline__month h3 { position:relative; padding-left: 10px; margin-bottom: 20px; font: 500 19px 'Montserrat', sans-serif; }
        .timeline__month h3::before { 
            content: ''; position: absolute; top: 8px; left: -5px;
            display: block; width: 10px; height: 10px; border-radius: 10px;
        }

        @media only screen and (max-width: 767px) {
            .timeline__month h3 {  margin-bottom: 0; }
        }

        @media only screen and (min-width: 768px) {
            /**
            *** left
            ***/

            .timeline__month--left {  }
            .timeline__month--left h3 { left: -250px; padding-right: 10px; text-align: right; }
            .timeline__month--left h3::before { right: -5px; left: auto; }
        }

            /**
            *** event
            ***/

            .timeline__events { padding: 0 !important; }

            .timeline__event { position: relative; display: flex; }
            .timeline__event span { position: relative; display: flex; border-top: 1px solid #999; }
            .timeline__event:last-child { margin-bottom: 20px; }
            .timeline__event span img { position: absolute; top: -59px; right: -119px; }
            .timeline__event span p { padding: 10px; font: 500 14px/17px 'Montserrat', sans-serif; color: #363636;}

            @media only screen and (max-width: 767px) {
                .timeline__event { display: list-item; list-style: disc; list-style-position: outside; margin-left: 25px; }
                .timeline__event span {border-top: none; }
                .timeline__event span img { display: none; }
                .timeline__event span p { padding-left: 0; }
            }

            .timeline__event--no-image span p { margin: -19px 0 0 40px; background: #fff; }

            @media only screen and (max-width: 767px) {
                .timeline__event--no-image span p { margin: 0; }
            }

            @media only screen and (min-width: 768px) {
                /**
                *** left
                ***/

                .timeline__event--left { left: -250px; flex-direction: column; align-items: flex-end; }
                .timeline__event--left span p { text-align: right; }
                .timeline__event--left span img { right: auto; left: -119px; }
                .timeline__event--left.timeline__event--no-image span p { margin: -18px 40px 0 0; background: #fff; }
            }