/* General */
#wrapper { background: #daf1eb; padding: 0 0 93px; }

/* Banner */
#banner { background: #41bfb4; border-top: 2px solid #000; border-bottom: 2px solid #000; height: 198px; position: relative; overflow: visible; margin: 55px 0 0; }
#banner div { max-width: 100%; width: max-content; width: -webkit-max-content; text-align: center; margin: auto; text-transform: uppercase; position: absolute; top: 50%; bottom: 0; left: 38%; transform: translateY( -50% ) translateX( -50% ); }
#banner div:before { content: ' '; display: block; width: 258px; height: 226px; background: no-repeat url( '../../images/pages/characters-main/bg/dr-hen.png' ); position: absolute; right: -290px; bottom: -50px; }
#banner p { margin: 0; font: 500 16pt/1.2 'Creative Block', 'Arial', sans-serif; color: #030303; }

/* Main content */
main.container { padding: 40px 0 0; width: 864px; text-align: center; }
#search { border: 1px solid #818584; width: 335px; position: relative; background: #fff; border-radius: 21px/23px; margin: auto; padding: 0 31px 0 0; box-sizing: border-box; max-width: 90%; }
#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; text-align: center; }
main section { display: flex; flex-wrap: wrap; margin: 41px 0 0; position: relative; }
main section.loading:before { content: ' '; display: block; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; background: #daf1ebc7; }
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 #000; animation: turn 2s infinite; transform-origin: 50%; }
@keyframes turn {
	0% { transform: rotate( 0deg ); }
	100% { transform: rotate( 360deg ); }
}
main section a { flex: 0 calc( ( 100% - 104px ) / 4 ); max-width: 190px; margin: 0 13px 26px; display: block; background: #fff; box-sizing: border-box; box-shadow: 0 4px 3px 1px #aeaeae80; padding: 5px; }
main img { display: block; }
main h3 { font: 700 12pt 'Arial', sans-serif; letter-spacing: -.25px; margin: 9px 0 3px; color: #000; }

.yellow-button { margin: 30px 0 0; }
	
@media (max-width: 800px) {
	#banner { margin: 200px 0 0; height: auto; }
	#banner div { transform: none; position: relative; padding: 20px; left: auto; top: auto; box-sizing: border-box; }
	#banner div:before { bottom: 100%; right: 50%; transform: translateX( 50% ); background-size: 100%; width: 200px; height: 177px; }
	#banner div br { display: none; }
}


@media (max-width: 660px) {
	main section a { margin: 0 12px 18px; flex: calc( ( 100% - 72px ) / 3 ); max-width: calc( ( 100% - 72px ) / 3 ); }
}

@media (max-width: 530px) {
	main.container { padding: 40px 0 0; }
	
	main section a { margin: 0 6px 18px; flex: calc( ( 100% - 36px ) / 3 ); max-width: calc( ( 100% - 36px ) / 3 ); }
}

@media (max-width: 410px) {
	main section a { flex: calc( ( 100% - 24px ) / 2 ); max-width: calc( ( 100% - 24px ) / 2 ); }
	main h2 { font-size: 9pt; }
}