/* General */
#main { padding: 128px 0 50px; background: no-repeat url( '../../images/pages/circulars/bg/main.jpg' ) center bottom/cover; }
#headline { color: #FFF; }

/* Calendar */
main.container { padding: 0 0 80px; position: relative; max-width: 92%; }
main:after { clear: both; display: block; content: ' '; }
main section { display: flex; flex-wrap: wrap; margin: 0 0 30px; }
main section:last-of-type { margin: 0; }
main section > div { border-radius: 10px/10px; transition: all .4s; padding: 33px 14px 14px; text-align: left; cursor: pointer; flex: 0 calc( ( 100% - 30px ) / 3 ); box-sizing: border-box; margin: 0 5px 10px; position: relative; font-size: 10pt; line-height: 1.4; background: #f5f5f5; }
main section > div.selected { background: #0098ce; color: #fff; }
[data-id] datetime { transition: all .4s; display: block; float: left; width: 50px; text-align: center; font-weight: 700; text-transform: uppercase; color: #0f165f; font-size: 14pt; line-height: .9; }
[data-id] datetime b { display: block; font-size: 22pt; }
[data-id] datetime span { display: block; font-size: 10pt; line-height: 1.2; }
main section h2 { letter-spacing: 0; line-height: 1.1; font-size: 12pt; margin: 0; width: calc( 100% - 60px ); float: right; text-align: left; }
main .selected h2, main .selected datetime { color: #fff; }
[data-id] .clear { margin: 0 0 10px; }
main section p:last-of-type { margin: 0; }
main section small { display: block; text-align: right; color: #777; color: #FFF; background: #0098ce; position: absolute; top: 0; right: 0; border-top-right-radius: 7px; border-bottom-left-radius: 7px; padding: 3px 8px; }
main nav { width: 100px; float: left; text-align: center; }
main nav datetime { display: block; font-weight: 700; cursor: pointer; transition: all .4s; color: #d5d5d5; }
main nav datetime:after { display: block; content: ' '; height: 90px; width: 1px; background: #f5f5f5; margin: 7px auto; transition: all .4s; }
main nav datetime:last-of-type:after { display: none; }
main nav datetime.active, main nav datetime:hover { color: #0098ce; }
main nav datetime.active:after, main nav datetime:hover:after { background: #0098ce; }
#holder { overflow-y: auto; height: 350px; float: left; width: calc( 100% - 100px ); }
main #holder > span { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba( 255, 255, 255, .5 ); z-index: 2; }
#holder > span:before { content: ' '; position: absolute; top: 50%; left: 50%; z-index: 3; transform: translateY( -50% ) translateX( -50% ); width: 10px; height: 10px; border-radius: 50%; border: 1.5px dashed #0098ce; animation: turn 2s infinite; transform-origin: 50%; }
main.loading #holder > span { display: block; }
#sentinel { width: 1px; height: 1px; }

/* Popup */
#view.loading:before { content: ' '; display: inline-block; vertical-align: middle; width: 20px; aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed #0098ce; animation: turn 2s infinite; transform-origin: 50%; margin: -1px 6px 0 0; display: inline-block; }
#view .success { text-align: left; font-size: 11pt; line-height: 1.4; word-break: break-word; }
#view .success > h3, #view .success > section { text-align: center; }
#view .success > section { margin: 0 0 10px; }
#view .success > h3 { margin: 0 0 18px; }
#view .success > section > * { display: inline-block; vertical-align: middle; margin: 0 4px; }
#view .success > section > span:before { content: '\f086'; font: 12pt/1 'ssa', sans-serif; margin: 0 5px 0 0; }
#view .success a { color: #0098ce; }
#attachments { padding: 20px 0 0; }
#view #attachments a { display: block; border-bottom: 1px solid #ccc; padding: 10px 0; color: #8c8c8c; }
#view #attachments a:last-of-type { border: 0; }
#view #attachments a:before { margin: 0 5px 0 0; color: #0198cf; }
#view #attachments a:hover { color: #0198cf; }

/* Subscribe */
#subscription { background: no-repeat url( '../../images/pages/circulars/bg/subscription.jpg' ) center/cover; text-align: center; color: #FFF; padding: 72px 15px; }
#subscription h2 { color: #FFF; margin: 0 0 20px; }
#subscription .result > div { margin: 0 auto 20px; color: #0f165f; background: #FFF; width: max-content; width: -webkit-max-content; }
#subscription form span { display: block; margin: 0 auto 24px; }
#subscription [type="text"] { padding: 12px 91px 12px 17px; width: 210px; }
#subscription [type="submit"] { padding: 12px 27px; margin: 0 0 0 -89px; }
#subscription form a { letter-spacing: .5px; font-size: 9.6pt; color: #fff; padding: 0 20px 0 0; position: relative; }
#subscription form a:after { content: '\203A'; color: #0098ce; display: block; position: absolute; top: .5px; right: 6px; transition: all .4s; font-size: 16pt; line-height: 12px; }
#subscription form a:hover:after { right: 0; }

@media (max-width: 880px) {
	main section > div { flex: 0 calc( ( 100% - 20px ) / 2 ); }
}

@media (max-width: 580px) {
	main nav { display: none; }
	#holder { width: 100%; }
}

@media (max-width: 460px) {
	main section { display: block; }
	main section > div { flex: 0 100%; margin: 0 0 10px; }
}