/* General */
#main { padding: 128px 0 20px; background: no-repeat url( '../../images/pages/reports/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; }
#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 .year { text-align: center; width: 120px; }
#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%; }
#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 { border-radius: 10px/10px; display: block; width: 100%; }
#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: 35px; min-height: 35px; margin: 0 10px; }
#content h3 { margin: 20px 0 10px; font-size: 15pt; letter-spacing: .5px; }
.date { position: relative; padding: 0 0 0 19px; font-size: 11pt; display: block; }
.date:before { content: '\e805'; font: 10pt/1 'ssa', sans-serif; display: block; position: absolute; left: 0; top: 1.5px; }

@media (max-width: 940px) {
	main form { margin: 0 auto 56px; }
	
	#content section { margin: 0 -8px; padding: 0 0 20px; }
	#content h3 { font-size: 14pt; letter-spacing: 0; }
	#content section > div { margin: 0 8px 45px; flex: 0 0 calc( ( 100% - 48px ) / 3 ); }
}

@media (max-width: 700px) {
	#content section .button { padding: 0 10px; letter-spacing: 0; min-height: 32px; line-height: 32px; }
}

@media (max-width: 600px) {
	#main { padding: 110px 0 0; }
	#main form { margin: 0 auto 63px; }
	
	#content section > div { flex: 0 0 calc( ( 100% - 32px ) / 2 ); }
}

@media (max-width: 480px) {
	#main form .line { display: block; }
	#main form label { margin: 15px 0 3px; min-height: 100%; }
	#main form .line input[name$="_date"] { width: 100%; }
	#main form [type="submit"] { margin: 20px auto 0; display: block; }
	
	#content h2 { margin: 0 0 24px; }
	#content h3 { font-size: 12pt; }
}

@media (max-width: 400px) {
	#content section { margin: 0 -5px; }
	#content section > div { margin: 0 5px 30px; flex: 0 0 calc( ( 100% - 20px ) / 2 ) }
	#content section figure span { font-size: 8pt; }
	#content section .button { font-size: 8pt; }
}