/* General */
main.container { text-align: center; padding: 53px 0 68px; max-width: 96%; }
h1 { font: 700 28pt 'Arial Rounded', 'Arial', sans-serif; text-shadow: none; text-transform: none; margin: 0 auto 40px; }
#search { border: 1px solid #818584; width: 335px; position: relative; background: #fff; border-radius: 21px/23px; margin: 0 0 38px auto; padding: 0 31px 0 0; box-sizing: border-box; }
#search:after { content: '\e803'; color: #42bfb5; display: block; font: 13pt 'halza', sans-serif; position: absolute; right: 12px; top: 10px; }
main [type="text"] { padding: 14px 22px; width: 100%; background: 0; border: 0; }
main section { margin: 0 -6px; text-align: left; position: relative; }
main section.loading:before { content: ' '; display: block; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; background: rgba( 255, 255, 255, .9 ); }
main section.loading:after { content: ' '; display: block; position: absolute; top: 50%; left: 50%; z-index: 2; transform: translateX( -50% ) translateY( -50% ); width: 40px; height: 40px; border-radius: 50%; border: 3px dashed #42bfb5; animation: turn 2s infinite; transform-origin: 50%; }
@keyframes turn {
	0% { transform: rotate( 0deg ); }
	100% { transform: rotate( 360deg ); }
}
main section a { display: inline-block; vertical-align: top; margin: 0 6px 45px; box-shadow: 0 4px 3px 1px #aeaeae80; width: calc( ( 100% - 48px ) / 4 ); line-height: 0; }
main img { display: block; }
main h2 { height: 50px; padding: 9px 10px; width: 100%; box-sizing: border-box; overflow: hidden; margin: 0; text-align: center; font: 700 11pt/1.2 'Arial', sans-serif; }
main section > p { text-align: center; font-weight: 700; }
main .green-button { margin: 22px auto 0; }

/* Popup */
#popup { background: rgba( 0, 0, 0, .4 ); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; display: none; text-align: center; }
#popup .container { width: auto; max-width: 100%; position: absolute; top: 50%; left: 50%; transform: translateX( -50% ) translateY( -50% ); }
#popup iframe { display: block; }
#popup .container > aside { margin: 0 0 0 auto; display: block; width: max-content; width: -webkit-max-content; }
#popup .container > aside:before { content: '\00d7'; display: block; font-weight: 700; background: #42bfb5; font-size: 35pt; border: 1.5px solid #42bfb5; color: #daf1eb; width: 44px; height: 44px; line-height: 44px; text-align: center; cursor: pointer; transition: all .4s; position: absolute; top: -22px; right: -22px; }
#popup .container > aside:hover:before { background: #fdd330; border-color: #fdd330; }

@media (max-width: 740px) {
	main section a { margin: 0 6px 18px; width: calc( ( 100% - 36px ) / 3 ); }
}

@media (max-width: 600px) {
	main.container { padding: 30px 0 68px; }
	h1 { font-size: 22pt; }
	
	#search { width: 200px; margin: 0 auto 38px; }
	
	#popup .container { width: 80%; }
	#popup iframe { width: 100%; height: 45vw; }
}

@media (max-width: 460px) {
	h1 { font-size: 20pt; }
	
	main section a { width: calc( ( 100% - 24px ) / 2 ); }
	main h2 { font-size: 9pt; }
	
	#popup .container > aside:before { font-size: 25pt; width: 35px; height: 35px; line-height: 37px; }
}