@keyframes pulse
{
	0% { box-shadow: 0 0 0 0 rgba(36, 58, 94, 1); }
	100% { box-shadow: 0 0 0 10px rgba(36, 58, 94, 0); }
}

#calendar { margin: 20px 20px 0 20px; justify-content: center; align-items: center; display: flex; flex-wrap: wrap; }
#calendar .month { padding: 5px 10px; border: 1px solid transparent; border-radius: 5px; font-size: 13px; color: rgba(0, 0, 0, 0.2); transition: 0.3s ease-out; }
#calendar .month.found { border-color: #f2f2f2; font-weight: 600; color: inherit; cursor: pointer; }
#calendar .month.found.on { border-color: #243a5e; background-color: #243a5e; color: #ffffff; }
#calendar .month.found:not(.on):hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
#calendar .month:not(:first-of-type) { margin-left: 5px; }
#directory { padding: 10px; display: flex; flex-wrap: wrap; }
#directory .event { width: 20%; padding: 10px; box-sizing: border-box; position: relative; display: none; }
#directory .event .action { padding: 15px 30px; border-top: 1px solid #f2f2f2; font-size: 13px; font-weight: 600; color: #0067b8; justify-content: space-between; align-items: center; display: flex; }
#directory .event .action img { width: auto; height: auto; max-width: 120px; max-height: 60px; padding-left: 15px; display: block; }
#directory .event .description { height: 100%; padding: 30px; }
#directory .event .metadata { padding: 5px 30px 30px 30px; }
#directory .event .metadata > div { margin-top: 5px; padding-left: 2em; font-size: 13px; color: #666666; position: relative; }
#directory .event .metadata > div:before { left: 0; top: 50%; transform: translateY(-50%); font-family: "MWF-MDL2"; font-size: 15px; position: absolute; }
#directory .event .metadata .meta_contact:before { content: ""; }
#directory .event .metadata .meta_date:before { content: ""; }
#directory .event .metadata .meta_location:before { content: ""; }
#directory .event .metadata .meta_tags { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#directory .event .metadata .meta_tags:before { content: ""; }
#directory .event .metadata .meta_target:before { content: ""; }
#directory .event .metadata .meta_time:before { content: ""; }
#directory .event .metadata .meta_warning { font-weight: 600; }
#directory .event .metadata .meta_warning:before { content: ""; font-weight: 400; }
#directory .event a { height: 100%; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); transition: 0.3s ease-out; display: flex; flex-direction: column; overflow: hidden; }
#directory .event a h2 { font-size: 18px; font-weight: 600; }
#directory .event a p { margin-top: 0.5em; }
#directory .event a[aria-disabled] { cursor: default; }
#directory .event a:not([aria-disabled]):hover { margin: 5px 0 -5px 0; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); }
#directory .event a:not([aria-disabled]):hover .action { text-decoration: underline; }
#directory .event.microsoft a { border: 1px solid #0067b8; }
#directory .event.microsoft a:before { content: "MS"; right: 20px; top: 20px; font-size: 13px; font-weight: 600; line-height: 1em; color: #0067b8; transition: 0.3s ease-out; position: absolute; }
#directory .event.microsoft a:not([aria-disabled]):hover:before { top: 25px; }
#directory .event.microsoft.pin a:before { right: 40px; }
#directory .event.on { display: block; }
#directory .event.on.hidden { display: none; }
#directory .event.pin a .description { background-color: #2f2f2f; color: #ffffff; }
#directory .event.pin a .metadata { background-color: #2f2f2f; }
#directory .event.pin a .metadata > div { color: #ffffff; }
#directory .event.pin a:after { content: ""; right: 20px; top: 20px; font-family: "MWF-MDL2"; font-size: 15px; color: #ffffff; transition: 0.3s ease-out; position: absolute; }
#directory .event.pin a:hover:after { top: 25px; }
#info { border-bottom: 1px solid #f2f2f2; justify-content: space-between; align-items: center; display: flex; }
#info .buttons { margin-right: 20px; display: flex; }
#info .buttons .button { padding: 5px 10px; border: 1px solid transparent; border-radius: 5px; font-size: 13px; font-weight: 600; transition: 0.3s ease-out; position: relative; display: flex; cursor: pointer; }
#info .buttons .button.clear { color: #0067b8; display: none; }
#info .buttons .button.clear:hover { text-decoration: underline; }
#info .buttons .button.filter { animation: pulse 1s 1s 3; }
#info .buttons .button:not(.clear) { border-color: #50e6ff; background-color: #50e6ff; color: #243a5e; }
#info .buttons .button:not(.clear).on { border-color: #243a5e; background-color: #243a5e; color: #ffffff; }
#info .buttons .button:not(.clear):not(.on):hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
#info .message { padding: 20px; font-size: 13px; }
#microsoft { margin: 20px 20px 0 20px; justify-content: center; display: flex; }
#microsoft .box { padding: 10px 20px; border: 1px solid #0067b8; font-size: 13px; font-weight: 600; background-color: #f6f6f6; text-align: center; }
#microsoft .box .ms { color: #0067b8; }
#options { display: none; }
#options .buttons { margin-top: 1.5em; display: flex; flex-wrap: wrap; }
#options .buttons .button { margin: 0 5px 5px 0; padding: 5px 35px 5px 10px; border: 1px solid #f2f2f2; border-radius: 5px; font-size: 13px; transition: 0.3s ease-out; position: relative; display: flex; cursor: pointer; }
#options .buttons .button.on { border-color: #243a5e; background-color: #243a5e; color: #ffffff; }
#options .buttons .button.on:before { content: ""; }
#options .buttons .button:before { content: ""; right: 10px; top: 50%; transform: translateY(-50%); font-family: "MWF-MDL2"; font-size: 15px; color: #e6e6e6; position: absolute; }
#options .buttons .button:not(.on):hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
#options .dropdown { margin-top: 1.5em; transition: 0.3s ease-out; display: flex; flex-direction: column; }
#options .dropdown.on { box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); }
#options .dropdown.on .name:before { top: 50%; transform: translateY(-50%) scaleY(-1); }
#options .dropdown:not(.on) .name:hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
#options .dropdown .name { padding: 5px 35px 5px 10px; border: 1px solid #f2f2f2; font-size: 13px; transition: 0.3s ease-out; position: relative; cursor: pointer; }
#options .dropdown .name:before { content: ""; right: 10px; top: 50%; transform: translateY(-50%); font-family: "MWF-MDL2"; font-size: 15px; position: absolute; }
#options .dropdown .options { width: 100%; border: 1px solid #f2f2f2; border-top: none; display: none; }
#options .dropdown .options .option { padding: 5px 35px 5px 10px; font-size: 13px; transition: 0.3s ease-out; position: relative; cursor: pointer; }
#options .dropdown .options .option.on { background-color: #243a5e; color: #ffffff; }
#options .dropdown .options .option:not(.on):hover { background-color: #f6f6f6; }
#options .flex { display: flex; }
#options .flex > div { width: 100%; padding: 20px 20px 0 20px; box-sizing: border-box; }
#options h3 { font-size: 18px; font-weight: 600; line-height: 1em; }
#options h3:not(:first-of-type) { margin-top: 1.5em; }
#sorry { display: none; }

@media screen and (max-width: 1399px)
{
	#directory .event { width: 25%; }
	#options .flex { flex-wrap: wrap; }
	#options .flex > div { width: 25%; }
}

@media screen and (max-width: 1083px)
{
	#directory .event { width: 33%; }
	#options .flex > div { width: 33%; }
}

@media screen and (max-width: 767px)
{
	#directory .event { width: 50%; }
	#options .flex > div { width: 50%; }
}

@media screen and (max-width: 539px)
{
	#directory .event { width: 100%; }
	#options .flex > div { width: 100%; }
}