/**************************************** schedule agenda page ****************************************/

.key_legend {
    width: 100%;
    padding: 30px 0 65px 40px;
}

    .key_legend li {
        width: 16%;
        float: left;
    }

.key_legend_purple,
.key_legend_red,
.key_legend_gray,
.key_legend_green,
.key_legend_orange,
.key_legend_mauve,
.key_legend_lblue,
.key_legend_pdf {
    height: 30px;
		margin: 0 0 7px 0;
}

.key_legend_purple {
    width: 19%;
    background: #6F529E;
    float: left;
}

.key_legend_red {
    width: 19%;
    background: #EE1D23;
    float: left;
}

.key_legend_gray {
    width: 19%;
    background: #607d8b;
    float: left;
}

.key_legend_green {
    width: 19%;
    background: #4CB050;
    float: left;
}

.key_legend_orange {
    width: 19%;
    background: #F58022;
    float: left;
}
.key_legend_lblue {
    width: 19%;
    background: #3682A3;
    float: left;
}

.key_legend_mauve {
    width: 19%;
    background: #6AA1D7;
    float: left;
}

.key_legend_blue {
    width: 19%;
    background: #156BB9;
    float: left;
}

.key_legend_pdf {
    width: 19%;
		background: #FFFFFF;
    float: right;
}

.key_legend_category {
    float: left;
    width: 70%;
    margin: 0 5%;
    font-size: 1.3em;
    font-style: italic;
}

.key_legend_category_red {
    float: left;
    width: 70%;
    margin: 0 5%;
    font-size: 1.2em;
    font-style: italic;
}

.schedule_agenda {
    width: 100%;
    margin: 30px auto;
    background: #f9f9f9;
    color: #333;
    padding: 30px;
    box-shadow: 0 1px 1px #ccc;
}

.schedule_date {
    font-size: 37px;
    color: #555;
}

.time_block {
    width: 100%;
    margin: 30px 0 0 0;
    padding: 30px 0 0 0;
    border-top: solid 1px #ccc;
    display: inline-block;
}

.schedule_time {
    float: left;
    color: #111;
    font-size: 19.7;
    min-width: 150px;
    width: 208px;
}

.schedule_events {
    float: left;
    margin: 0 0 0 30px;
    font-size: 20px;
    color: #333;
    width: 842px;
}

    .schedule_events li {
        width: 100%;
    }

        .schedule_events li div {
            max-height: 10000px;
            transition: max-height 1s ease-in-out, opacity 1s linear;
            opacity: 1;
        }

            .schedule_events li div.hide {
                overflow: hidden;
                max-height: 0;
                opacity: 0;
            }


div.description p {
    font-size: 15px;
    margin: 5px 0;
}

.schedule_events li div div.title {
    font-size: 18px;
    font-style: italic;
}

.schedule_blue,
.schedule_purple,
.schedule_red,
.schedule_gray,
.schedule_green,
.schedule_orange,
.schedule_lblue,
.schedule_grey,
.schedule_mauve, .schedule_dblue {
    font-size: 1.2em;
}

.schedule_blue,
.track_blue {
    color: #156BB9;
}

.schedule_purple,
.track_purple {
    color: #6F529E;
}

.schedule_red,
.track_red {
    color: #EE1D23;
}

.schedule_gray,
.track_gray {
    color: #607d8b;
}

.schedule_green,
.track_green {
    color: #4CB050;
}
.schedule_lblue,
.track_lblue {
    color: #3682A3;
}

.schedule_orange,
.track_orange {
    color: #F58022;
}

.schedule_mauve,
.track_mauve {
    color: #6AA1D7;
}

@media screen and (max-width:830px) {
    .key_legend {
        display: inline-block;
        padding: 30px 0 0 0;
    }

        .key_legend li {
            width: 100%;
            float: left;
            clear: both;
            min-height: 40px;
        }

    .schedule_time, .schedule_events {
        width: auto;
    }

    .schedule_events {
        margin: 0 0 0 15px;
        font-size: 15px;
    }

    .schedule_time {
        font-size: 18px;
        transition: font-size .5s;
    }
}

@media screen and (max-width:630px) {
    .schedule_agenda {
        padding: 15px;
    }

    .schedule_date {
        font-size: 32px;
    }
}