@font-face {
    font-family: 'Droid Sans';
    font-style: normal;
    font-weight: 400;
	font-display: swap;
    src: local('Droid Sans'), local('DroidSans'),
    url(../font/droid-sans-400.woff) format('woff');
}

@font-face {
    font-family: 'Droid Sans';
    font-style: normal;
    font-weight: 700;
	font-display: swap;
    src: local('Droid Sans Bold'), local('DroidSans-Bold'),
    url(../font/droid-sans-700.woff) format('woff');
}

@font-face {
    font-family: 'Droid Serif';
    font-style: normal;
    font-weight: 400;
	font-display: swap;
    src: local('Droid Serif'), local('DroidSerif'),
    url(../font/droid-serif-400.woff) format('woff');
}

body {
    background: #efefef;
    margin: 0;
    padding: 0;
    font-family: 'Droid Sans', 'Verdana', Arial, sans-serif;
    font-size: 14px;
    line-height: 25px;
    color: #4b575f;
}

em {
    font-weight: 700;
    font-style: normal;
}

article {
    display: block;
    max-width: 1200px;
    margin: 0 auto;
    background: #ffffff;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

header {
    display: table;
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    table-layout: fixed;
}

header > div:first-child {
    background: url(../img/logo.svg) no-repeat 40px 40px;
    padding: 40px 40px 40px 90px;
    display: table-cell;
    width: 64%;
    box-sizing: border-box;
}

header > div:last-child {
    width: 36%;
    box-sizing: border-box;
    display: table-cell;
    background: #f7c816 url(../img/shadow.png) repeat-y left top;
}

header > div:last-child > div {
    background: url(../img/flower.svg) no-repeat right bottom;
    padding: 40px;
}

#main > div:first-child {
    display: table-cell;
    width: 64%;
    box-sizing: border-box;
}

#main > div:last-child {
    display: table-cell;
    width: 36%;
    box-sizing: border-box;
    padding: 40px 90px 40px 40px;
    background: #f9f9f9 url(../img/shadow.png) repeat-y left top;
    vertical-align: top;
}

#main > div:first-child div {
    padding: 40px 40px 40px 90px;
    background: url(../img/map.svg) no-repeat right top;
}

header > div:first-child h1 {
    color: #f7c816;
    margin: 0;
    padding: 0;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 21px;
    font-family: 'Droid Serif';
    letter-spacing: 1px;
    line-height: 22px;
}

header > div:first-child h2 {
    color: #4b565e;
    margin: 0;
    padding: 2px 0 0 0;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 16px;
    line-height: 22px;
}

header > div:first-child p {
    color: #c9cccf;
    margin: 0;
    padding: 20px 0 0 0;
    font-family: 'Droid Serif';
    font-size: 16px;
    line-height: 25px;
}

header > div:first-child address {
    padding: 20px 0 0 0;
    margin: 0;
    color: #22272b;
    font-size: 16px;
    font-style: normal;
}

header > div:last-child h2 {
    padding: 0 0 10px 0;
    margin: 0;
    font-size: 16px;
    font-weight: normal;
    font-family: 'Droid Serif';
    color: #000000;
}

header > div:last-child td {
    padding: 0 10px 2px 0;
}

header > div:last-child tr.today td {
    color: #000000;
    font-weight: 700;
}

header > div:last-child p {
    margin: 0;
    padding: 10px 0 0 0;
    font-size: 16px;
}

header > div:last-child a {
    font-size: 16px;
    color: #4b575f;
    text-decoration: none;
}

#main a {
    color: #4b575f;
    text-decoration: none;
}

#main {
    background: #ffffff;
    display: table;
    table-layout: fixed;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
}

#main img {
    max-width: 100%;
    height: auto;
    display: block;
}

#main figure {
    position: relative;
    padding: 0;
    margin: 0;
    display: block;
}

#main figcaption {
    position: absolute;
    bottom: 40px;
    left: 90px;
    font-size: 20px;
    color: #000000;
    font-family: 'Droid Serif';
    line-height: 30px;
    padding: 0;
    margin: 0;
    display: block;
}

#main h2 {
    padding: 0 0 14px 0;
    margin: 0;
    font-weight: normal;
    color: #22272b;
    font-size: 18px;
}

#main > div:first-child div.announcement {
    background: #F7C816 url(../img/calendar.svg) no-repeat left bottom;
}

#main > div:first-child div.covid {
    background: #8C1C1E url(../img/covid.svg) no-repeat left bottom;
    color: #ffffff;
}

#main > div:first-child div.covid a.external {
    background: url(../img/linkred.svg) no-repeat 2px 2px;
    padding-left: 18px;
}

#main > div:first-child div.covid h2,
#main > div:first-child div.covid a {
    color: #E88C8E;
}

footer {
    display: block;
    background-color: #4b575f;
    color: #dddddd;
    padding: 20px;
    box-sizing: border-box;
    font-size: 13px;
    line-height: 22px;
}

footer:after {
    content: "";
    display: table;
    clear: both;
}

footer div {
    display: block;
    padding: 10px 20px;
    box-sizing: border-box;
}

footer div.small {
    width: 22%;
    float: left;
}

footer div.big {
    width: 28%;
    float: left;
}

footer a {
    color: #dddddd;
    text-decoration: none;
    transition: color 0.4s;
}

footer a:hover {
    color: #f0f0f0;
}

footer em {
    color: #ffffff;
    font-weight: 400;
}

footer a.external {
    background: url(../img/link.svg) no-repeat 2px 2px;
    padding-left: 18px;
}

ul {
    padding: 10px 0 10px 16px;
    margin: 0;
    list-style-type: square;
}

p {
    margin: 0;
    padding: 0 0 14px 0;
}

li {
    padding: 0 0 10px 0;
    margin: 0;
}

.button {
    display: inline-block;
    border: 1px solid #4b575f;
    padding: 10px 20px 10px 40px;
    margin: 30px 0 0 0;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    color: #4b575f;
    transition: color 0.4s, border-color 0.4s;
    background: url(../img/linkdark.svg) no-repeat 20px center;
}

.button:hover {
    color: #000000;
    border-color: #f7c816;
}

@media screen and (max-width: 1200px) {
    footer div.small, footer div.big {
        width: 50%;
    }
}

@media screen and (max-width: 1023px) {
    header > div:first-child,
    header > div:last-child,
    #main > div:first-child,
    #main > div:last-child {
        width: 50%;
    }

    #main figcaption {
        left: 40px;
        font-size: 16px;
        line-height: 28px;
    }

    #main > div:first-child div, #main > div:last-child {
        padding: 40px;
    }
}

@media screen and (max-width: 767px) {
    header > div:first-child,
    header > div:last-child,
    #main > div:first-child,
    #main > div:last-child {
        display: block;
        width: 100%;
    }

    header > div:last-child > div {
        background-image: none;
    }

    footer div.small, footer div.big {
        width: 100%;
    }
}