section.calendar .month {
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: center;
}

section.calendar .item {
    border: 1px solid #CCC;
    border-radius: 5px;
    padding: 8px 10px;
    margin-bottom: 10px;
    line-height: 26px;
}

section.calendar .item:hover {
    background-color: #FEFEFE;
    box-shadow: 0 0 5px 0 rgba(0,0,0,.1);
    cursor: pointer;
}

section.calendar img.flag {
    height: 22px;
    vertical-align: top;
    margin-right: 5px;
    margin-top: 2px;
    border: 1px solid #CCC;
}
section.calendar img.logo {
    height: 26px;
    vertical-align: top;
    margin-right: 8px;
}

section.calendar .item { overflow: auto; }

section.calendar .item > div:first-child { float: left; }

section.calendar .item > div:last-child {
    float: right;
    text-align: right;
}

section.calendar .item span {
    color: #FFF;
    display: inline-block;
    padding: 0 7px;
    border-radius: 4px;
}

section.calendar .item span.blue { background-color: #292254; }

section.calendar .item span.orange { background-color: #ffa200; }

section.calendar .item span.red { background-color: #e2001a; }

@media (max-width: 599.999px) {
    section.calendar .item > div > div:first-child { margin-bottom: 5px; }
}

@media (min-width: 600px) {
    section.calendar .item > div:first-child > div {
        display: inline-block;
        vertical-align: top;
        margin-right: 20px;
    }


    section.calendar .item > div:last-child > div {
        display: inline-block;
        vertical-align: top;
        margin-left: 20px;
    }
}

@media (max-width: 819.999px) {
    section.calendar {
        margin: 100px 10px 0 10px;
    }
}

@media (min-width: 820px) {
    section.calendar {
        max-width: 800px;
        margin: 150px auto 0 auto;
    }
}