#calendar {
    padding: 2px;
}
#calendar .date-container {
    padding: 2px;
}
#calendar .date {
    display: block;
    width: 100%;
    /*float: left;*/
    background: #fff;
    /*margin: 1px;*/
    /*border: 1px #8e44ad solid;*/
    cursor: pointer;
}
#calendar .date:nth-child(2n+0) {
}
#calendar .date div:nth-child(1) {
    font-family: 'Roboto' , sans-serif;
    font-weight: 700;
    background: #8e44ad;
    border-style: none;
    text-align: center;
    color: #fff;
    font-size: 12px;
    padding: 5px;
}
#calendar .date div:nth-child(2) {
    color: #8e44ad;
    text-align: center;
    font-weight: bold;
    height: 45px;
    line-height: 45px;
    font-size: 30px;
}


@media only screen and (max-width: 1200px) {
    #calendar .d15 {
        width: 8.3333333333333%;
    }
    #calendar div:nth-child(13),
    #calendar div:nth-child(14),
    #calendar div:nth-child(15) {
        display: none;
    }
}
@media only screen and (max-width: 980px) {
    #calendar .d15 {
        width: 9.0909090909091%;
    }
    #calendar div:nth-child(12),
    #calendar div:nth-child(13),
    #calendar div:nth-child(14),
    #calendar div:nth-child(15) {
        display: none;
    }
}
@media only screen and (max-width: 800px) {
    #calendar .d15 {
        width: 10%;
    }
    #calendar div:nth-child(11),
    #calendar div:nth-child(12),
    #calendar div:nth-child(13),
    #calendar div:nth-child(14),
    #calendar div:nth-child(15) {
        display: none;
    }
}
@media only screen and (max-width: 768px) {
    #calendar .d15 {
        width: 11.111111111111%;
    }
    #calendar div:nth-child(10),
    #calendar div:nth-child(11),
    #calendar div:nth-child(12),
    #calendar div:nth-child(13),
    #calendar div:nth-child(14),
    #calendar div:nth-child(15) {
        display: none;
    }
}
@media only screen and (max-width: 720px) {
    #calendar .d15 {
        width: 12.5%;
    }
    #calendar div:nth-child(9),
    #calendar div:nth-child(10),
    #calendar div:nth-child(11),
    #calendar div:nth-child(12),
    #calendar div:nth-child(13),
    #calendar div:nth-child(14),
    #calendar div:nth-child(15) {
        display: none;
    }
}
@media only screen and (max-width: 600px) {
    #calendar .d15 {
        width: 20%;
    }
    #calendar div:nth-child(6),
    #calendar div:nth-child(7),
    #calendar div:nth-child(8),
    #calendar div:nth-child(9),
    #calendar div:nth-child(10),
    #calendar div:nth-child(11),
    #calendar div:nth-child(12),
    #calendar div:nth-child(13),
    #calendar div:nth-child(14),
    #calendar div:nth-child(15) {
        display: none;
    }
}