* {
    box-sizing: border-box;
}


/* The actual timeline (the vertical ruler) */
.timeline {
    position: relative;
    width: 736px;
    margin: 0 auto;
    background-color: white;
    padding-top:5px;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
    content: '';
    position: absolute;
    width: 4px;
    background-color: #d4d4d4;
    top: 0;
    bottom: 0;
    left: 368px;
    margin-left: -2px;
}

/* Container around content */
.event-container {
    position: relative;
    width: 322px;
    box-shadow: 0px 0px 6px #555;
    border-radius: 8px;
    background-color: white;
    margin-top: 30px;
}

.event-container-right {
    left: 414px;
}

.event-container-left {
    left: 0;
}

/* The circles on the timeline */
.event-container::after {
    position: absolute;
    z-index: 1;
}

.event-container-left::after {
    right: -60px;
    top: 15px;
}

.event-container-right::after {
    left: -61px;
    top: 15px;
}

.event-container-inactive::after {
    content: url("/static/img/icon-inactive-node-29px.png");
}

.event-container-active::after {
    content: url("/static/img/icon-active-node-29px.png");
}

/* Add arrows to both left and right containers */
.event-container::before {
    background-color: white;
    content: "\00a0";
    height: 20px;
    position: absolute;
    top: 20px;
    width: 20px;
    box-shadow: -2px 2px 2px 0px #aaa;
    display: block;
}

/* Add arrows to both left container(pointing right) */
.event-container-left::before {
    left: 312px;
    transform:             rotate( 225deg );
        -moz-transform:    rotate( 225deg );
        -ms-transform:     rotate( 225deg );
        -o-transform:      rotate( 225deg );
        -webkit-transform: rotate( 225deg );
}

/* Add arrows to the right container (pointing left) */
.event-container-right::before {
    left: -10px;
    transform:             rotate( 45deg );
        -moz-transform:    rotate( 45deg );
        -ms-transform:     rotate( 45deg );
        -o-transform:      rotate( 45deg );
        -webkit-transform: rotate( 45deg );
}

/* The actual content */
.content {
    padding: 20px 15px;

    position: relative;
}

/* CSS for the text */

.event-text {
    color: #555;
    letter-spacing: 0.25px;
}

/* Lighten the texts for the inactive nodes */
.event-container-inactive .event-text {
    color: #888;
}

.event-container-inactive a {
    color: #b6d9e3;
}

.event-container-inactive a:hover {
    color: #34abc9;
}

/* Normal text */
.day-text {
    font-weight: 900;
    font-size: 48px;
    line-height: .95;
}

.day-of-week-text {
    font-weight: 800;
    font-size: 20px;
    line-height: 1;
    padding-left:5px;
    padding-top:1px;
}

.month-and-year-text {
    font-weight: 400;
    font-size: 19px;
    line-height: 1.3;
    padding-left:5px;
}

.meeting-title-text {
    text-decoration: none;
}

a.meeting-title-text {
    font-weight:800;
}

#upcoming-events-button a {
    text-decoration: none;
    color: #fff;
    font-weight:900;
}

#upcoming-events-button a:hover {
    color: #fff;
}

/* this rsvp button shows up in desktop/tablet and larger phone size */
.rsvp-right-button, .rsvp-past-right-button {
    display: block;
}

.rsvp-past-right-button {
  background-color: #849aa3;
}
.rsvp-past-right-button:hover {
  background-color: #849aa3;
}

a, a:hover{
    text-decoration:none;
}

/* this rsvp button is invisible in desktop/tablet and larger phone size */
.rsvp-bottom-button {
    display: none;
}

/* Media queries - Responsive timeline on screens less than 743px wide */
@media screen and (max-width: 742px) {

    /* Place the timelime to the left */
    .timeline {
        width: 408px;
    }

    /* The actual timeline (the vertical ruler) */
    .timeline::after {
        left: 31px;
    }

    /* Make sure all circles are at the same spot */
    .event-container::after {
        left: -66px;
    }

    .event-container-left::after {
        right: 0px;
    }

    /* Make all right containers behave like the left ones */

    .event-container-left, .event-container-right{
        left: 82px;
    }

    /* Arrow */
    .event-container::before {
        left: -10px;
    }

    .event-container-left::before {
        transform:         rotate( 45deg );
        -moz-transform:    rotate( 45deg );
        -ms-transform:     rotate( 45deg );
        -o-transform:      rotate( 45deg );
        -webkit-transform: rotate( 45deg );
    }

}

@media screen and (max-width: 415px) {
    .timeline {
        width: 375px;
    }
 
    /* Container around content */
    .event-container {
        width: 288px;
    }

    .event-container-left, .event-container-right {
        left: 70px;
    }

    /* Arrow */
    .event-container::before {
        display:none;
    }

    /* Make sure all circles are at the same spot */
    .event-container-left::after, .event-container-right::after {
        left: -53px;
    }

    .event-text {
        letter-spacing: 0.15px;
        }

    .day-text {
        font-size: 44px;
        line-height: .93;
    }

    .day-of-week-text {
        font-size: 17px;
        line-height: 1;
        padding-left:4px;
        padding-top:3px;
    }

    .month-and-year-text {
        font-size: 17px;
        line-height: 1.1;
        padding-left:4px;
    }
}

@media screen and (max-width: 374px) {
    .timeline {
        width: 310px;
    }
 
    /* Container around content */
    .event-container {
        width: 230px;
    }

    a.meeting-title-text {
        font-size: 16px;
    }

    /* At x-small phone size, this rsvp button disappears */
    .rsvp-right-button {
        display: none;
    }

    /* At x-small phone size, this rsvp button appears */
    .rsvp-bottom-button {
        display:block;
    }

    /* This is text for the title in the header. */
    /* Normally, this would be in shiny.css */
    .title-medium {
        font-size: 27px;
    }
}