@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;
}

.EventsHeader {
    text-align: center;
    font-family: 'OpenSans-bold';
    font-size: calc(20px + (26 - 20) * ((100vw - 300px) / (1600 - 300)));
}

.SubBodyHeader {
    font-family: 'OpenSans-light';
    font-size: calc(14px + (16 - 14) * ((100vw - 300px) / (1600 - 300)));
}
div.MonthhNav {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.MonthNav {
    position: relative;
    top: -10px;
    background: transparent;
    color: #fff;
    border: 2px solid white;
    font-family: OpenSans-light;
    font-size: calc(10px + (12 - 10) * ((100vw - 300px) / (1600 - 300)));
    letter-spacing: 2px;
    padding: 3px 10px;
    cursor: pointer;
    display: inline-block;
    box-shadow: 2px 8px 15px rgba(0, 0, 0, 0.4);
    margin: 5px 10px;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

    .MonthNav:hover {
        background-color: white;
        color: black;
        -webkit-transition: all 0.4s;
        -moz-transition: all 0.4s;
        transition: all 0.4s;
    }