@font-face {
    font-family: 'OpenSans-Regular';
    src: url('../Fonts/OpenSans-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'OpenSans-Light';
    src: url('../Fonts/OpenSans-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'OpenSans-Bold';
    src: url('../Fonts/OpenSans-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'OpenSans-ExtraBold';
    src: url('../Fonts/OpenSans-ExtraBold.ttf') format('truetype');
}

@font-face {
    font-family: 'the_frontmanregular';
    src: url('Fonts/The Frontman.ttf') format('truetype'), url('Fonts/The Frontman.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


/*HEADER CONTROL CHANGE MONTH WITH PROVIOUS OR NEXT BUTTON CONTROLLERS*/

.ControlerBox {
    -webkit-box-shadow: 0 6px 6px -6px black;
    -moz-box-shadow: 0 6px 6px -6px black;
    box-shadow: 0 6px 6px -6px black;
    background-color: #29628d;
}

.ControlerBox2 {
    -webkit-box-shadow: 0 6px 6px -6px black;
    -moz-box-shadow: 0 6px 6px -6px black;
    box-shadow: 0 6px 6px -6px black;
    background-color: #29628d;
    position: relative;
    top: 0px;
}

.DateControl {
    float: left;
    width: 33.33%;
}
/* Clear floats after the columns */
.DateControlRow:after {
    content: "";
    display: table;
    clear: both;
}


#ibPreviousMonth, #ibPreviousMonth2, #ibNextMonth, #ibNextMonth2 {
    background-color: Transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    font-family: 'OpenSans-ExtraBold';
    font-size: calc(16px + (30 - 16) * ((100vw - 300px) / (1600 - 300)));
}

.MonthHeader {
    font-family: 'OpenSans-Bold';
    font-size: calc(16px + (30 - 16) * ((100vw - 300px) / (1600 - 300)));
    text-transform: uppercase;
}

.AtagButton {
    position: relative;
    top: 5px;
    font-family: 'OpenSans-Bold';
    font-size: calc(8px + (10 - 8) * ((100vw - 300px) / (1600 - 300)));
    width: 50px;
    height: 10px;
    background: #29628d;
    padding: 5px;
    text-align: center;
    border-radius: 5px;
    color: white;
    -webkit-box-shadow: 0 6px 6px -6px black;
    -moz-box-shadow: 0 6px 6px -6px black;
    box-shadow: 0 6px 6px -6px black;
}
/**************************************************************************************************/
.Cottages {
    font-family: 'OpenSans-Bold';
    font-size: calc(12px + (18 - 12) * ((100vw - 300px) / (1600 - 300)));
}

.CalendarBlock {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    height: 50px;
}

#calendar {
    width: 100%;
    text-align: center;
}

    #calendar a {
        color: #8e352e;
        text-decoration: none;
    }

    #calendar ul {
        list-style: none;
        padding-bottom: 10px;
        margin: 10px;
        width: 100%;
        text-align: center;
    }

    #calendar li {
        width: 3%;
        padding-bottom: 0px;
        box-sizing: border-box;
        border: 1px solid #000;
        margin-right: -1px;
        margin-bottom: -1px;
        background: #fff;
    }

    #calendar .days li {
        height: 22px;
        display: inline-block;
    }

    #calendar .date {
        text-align: center;
        vertical-align: central;
        position: relative;
        top: 0px;
        color: #000;
        font-size: 5pt;
        font-family: 'OpenSans-Regular';
        font-variant: small-caps;
    }

    #calendar .day_Booked {
        display: inline-block;
        background-color: #800000;
        color: #fff;
        font-size: 5pt;
        font-family: 'OpenSans-Regular';
        font-variant: small-caps;
    }

    #calendar .Weekend {
        display: inline-block;
        background-color: #eae6e6;
        color: #000;
        font-size: 5pt;
        height: 10px;
        font-family: 'OpenSans-Regular';
        font-variant: small-caps;
    }

.NumDay {
    font-size: 5pt;
    font-family: 'OpenSans-Regular';
}

.NameofCottages {
    text-shadow: 1px 1px #000000;
    background-color: transparent;
}

.Test {
    display: block;
}

.CottagesAvailability {
}

#calendar .event {
    clear: both;
    display: block;
    font-size: 13px;
    border-radius: 4px;
    padding: 5px;
    margin-top: 40px;
    margin-bottom: 5px;
    line-height: 14px;
    background: #e4f2f2;
    border: 1px solid #b5dbdc;
    color: #009aaf;
    text-decoration: none;
}

#calendar .event-desc {
    color: #666;
    margin: 3px 0 7px 0;
    text-decoration: none;
}

#calendar .other-month {
    background: #f5f5f5;
    color: #666;
}

@media(max-width: 580px) {
    #calendar li {
        width: 11px;
    }
}