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

/* Filters */
#main form { padding: 22px 27px; background: #FFF; margin: 0 auto 97px; border-radius: 10px/10px; box-sizing: border-box; box-shadow: 0 0 5px 3px #C1C1C142; font-size: 0; width: max-content; width: -webkit-max-content; max-width: 92%; }
#main form .line { display: inline-block; vertical-align: bottom; font-size: 10pt; margin: 0 14px; }
#main form label { display: block; padding: 0; width: 100%; text-align: left; color: #0f165f; font-weight: 600; }
#main form .line input, #main form .line select { display: block; width: 190px; }
#main form .line input[name$="_date"] { width: 127px; text-align: center; }
#main form [type="submit"] { padding: 6px 14px; height: 34px; }

/* Results */
#content { max-width: 92%; }
#header-data { display: flex; justify-content: space-between; align-items: center; margin: 0 0 45px; }
#header-data h2 { margin: 0; }
#calendar { display: none; }
.flatpickr-day { position: relative; }
.event-dot { width: 6px; aspect-ratio: 1; background: red; border-radius: 50%; position: absolute; bottom: 4px; left: calc( 50% - 3px ); }
#content h2 span { color: #0098ce; }
#content section { display: flex; flex-wrap: wrap; margin: 0 -30px; }
#content section > div { flex: 0 0 calc( ( 100% - 132px ) / 3 ); box-sizing: border-box; margin: 0 22px 75px; }
#content figure { position: relative; }
#content section img, #content section iframe { border-radius: 10px/10px; display: block; width: 100%; height: 220px; }
#content aside { position: absolute; top: 0; right: 0; left: 0; bottom: 0; border-radius: 10px/10px; opacity: 0; transition: all .4s; background: rgba( 0, 152, 206, .92 ); z-index: 2; }
#content section > div:hover aside { opacity: 1; }
#content section figure span { display: block; transition: all .4s; font-size: 9pt; color: #FFF; background: #0098ce; position: absolute; top: 0; right: 0; border-top-right-radius: 7px; border-bottom-left-radius: 7px; float: none; padding: 3px 8px; z-index: 3; }
#content section > div:hover figure span { background: #e6e6e6; color: #0098ce; }
#content section figure div { position: absolute; top: 50%; transform: translateY( -50% ); left: 0; right: 0; font-size: 0; text-align: center; }
#content section .button { padding: 0 17px; border: 0; background: #FFF; color: #0098ce; line-height: 40px; height: 35px; margin: 0 10px; }
#content section .button.view { background: #fff; color: #0098ce; }
#content section .button.register { position: relative; padding: 0 35px 0 17px; }
#content section .button.register:after { content: '\203A'; color: #0098ce; display: block; position: absolute; top: 13px; right: 20px; transition: all .4s; font-size: 20pt; line-height: 12px; }
#content section .button.register:hover:after { right: 13px; }
#content h3 { margin: 20px 0 0; font-size: 15pt; letter-spacing: .5px; }
#content h3 + small { display: block; color: #b8b8b8; }
.date, .time, .address, .prices span { position: relative; padding: 0 0 0 19px; font-size: 11pt; display: inline-block; vertical-align: bottom; }
.date:after { width: max-content; width: -webkit-max-content; content: 'Add to your calendar'; height: 0; position: absolute; z-index: 2; top: 0; bottom: 0; left: 19px; transition: all .4s; background: #FFF; overflow: hidden; cursor: pointer; color: #0098ce; }
#content section .date { margin: 10px 0 0; }
#content section > div:hover .date:after, .date:hover:after { height: 100%; }
.time { margin: 0 0 0 12px; }
#content section > div:hover .time, .date:hover + .time { opacity: 0; }
.address { display: block; margin: 8px 0 0; font-style: normal; }
.date:before { content: '\e805'; font: 10pt/1 'ssa', sans-serif; display: block; position: absolute; left: 0; top: 1.5px; }
.time:before { content: '\e804'; font: 10pt/1 'ssa', sans-serif; display: block; position: absolute; left: 3px; top: 2px; }
.address:before { content: '\e803'; font: 10pt/1 'ssa', sans-serif; display: block; position: absolute; left: 3px; top: 2px; }
.address a:hover { color: #0098ce; }
.prices { margin: 10px 0 0; letter-spacing: .5px; }
.prices span { display: block; }
.prices span:first-of-type { margin: 0 0 3px; }
.prices span:before { content: '\f155'; font: 10pt/1 'ssa', sans-serif; display: block; position: absolute; left: 3px; top: 2px; }
#content .prices .button, #popup .prices .button { background: #0098ce; border: 1px solid #0098ce; color: #FFF; margin: 0; padding: 0 10px; min-height: 100%; height: 32px; line-height: 30px; vertical-align: bottom; position: relative; top: 4px; }
#content .prices .button:hover, #popup .prices .button:hover { color: #0098ce; background: #FFF; }
#content section div div p { margin: 13px 0 0; line-height: 1.7; color: #0098ce; font-size: 11pt; }
#content section .description { display: none; }

/* View more popup */
#popup form#view { padding: 20px 0 0; }
#view > figure { margin: 0 0 15px; }
#view > figure img { display: block; width: 100%; }
#view h3 { margin: 0 15px 12px; letter-spacing: 0; line-height: 1.1; font-size: 15pt; }
#view > img, #view > iframe { display: block; margin: 0 0 13px; width: 100%; }
#view > iframe { height: 260px; }
#view .date, #view .time, #view .address, #view .prices { color: #090071; }
#view .address { width: max-content; width: -webkit-max-content; margin: 4px auto 0; }
#view .prices { margin: 4px 0 0; }
#view .prices span { display: inline; vertical-align: middle; }
#view .prices span:first-of-type { margin-right: 10px; }
#view section { padding: 15px; line-height: 1.4; }
#view section > *:last-of-type { margin-bottom: 0; }
#popup p { margin: 0 0 17px; font-size: 11pt; }
#popup .button { padding: 8px 13px; min-height: 100%; }

/* Membership benefits */
#membership { background: no-repeat url( '../../images/pages/new-courses-calendar/bg/membership.jpg' ) center/cover; text-align: center; color: #FFF; padding: 72px 15px; }
#membership h2 { color: #FFF; margin: 0 0 20px; }
#membership > a { margin: 0 10px; }

@media (max-width: 960px) {
	#main form { margin: 0 auto 40px; }
	#main form .line { display: block; }
	#main form label { margin: 15px 0 3px; }
	#main form .line input[name$="_date"] { width: 100%; }
	#main form [type="submit"] { margin: 20px auto 0; display: block; }
	
	#content section > div { flex: 0 0 calc( ( 100% - 88px ) / 2 ); box-sizing: border-box; }
	#content section img, #content section iframe { height: auto; }
}

@media (max-width: 860px) {
	#content h2 { margin: 0 0 23px; }
}

@media (max-width: 650px) {
	#content section { margin: 0 -8px; }
	#content section > div { flex: 0 0 calc( ( 100% - 32px ) / 2 ); margin: 0 8px 55px; }
	#content h3 { letter-spacing: 0; font-size: 13pt; }
	.date, .time, .address, .prices span { font-size: 9pt; }
	.prices { letter-spacing: 0; }
	#content section .button { padding: 0 11px; margin: 0 5px; }
}

@media (max-width: 500px) {
	#main form { padding: 4px 9px 18px; }
	
	#content section { margin: 0; }
	#content section > div { flex: 0 100%; margin: 0 0 35px; }
	
	#popup form#view { padding: 10px 0 0; }
	#view h3 { letter-spacing: 0; }
}

@media (max-width: 480px) {
	#content section .button { line-height: 35px; }
	#content section .button.register:after { line-height: 8px; }
}

@media (max-width: 420px) {
	#content section > div { margin: 0 0 25px; }
}