/* General */
main.container { text-align: center; padding: 53px 0 68px; max-width: calc( 100% - 40px ); }
h1 { font: 700 28pt 'Arial Rounded', 'Arial', sans-serif; text-shadow: none; text-transform: none; margin: 0 auto 40px; color: #434343; }
#search { display: inline-block; vertical-align: middle; border: 1px solid #818584; width: 335px; position: relative; background: #fff; border-radius: 21px/23px; padding: 0 31px 0 0; box-sizing: border-box; margin: 0 0 70px; }
#search:after { content: '\e803'; color: #42bfb5; display: block; font: 13pt 'halza', sans-serif; position: absolute; right: 12px; top: 10px; }
#search [type="text"] { width: 100%; }
main section { margin: 0 -15px; text-align: left; display: flex; flex-wrap: wrap; 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 > p { margin: auto; }
main section a { flex: 0 calc( ( 100% - 90px ) / 3 ); margin: 0 15px 45px; line-height: 0; }
main datetime { display: block; line-height: 1; padding: 0 19px 7px; font-size: 10pt; }
main figure { position: relative; width: 100%; height: 220px; border-radius: 20px; background-position: center; transition: all .4s; background-size: 100%; }
main a:hover figure { background-size: 105%; }
main img { display: block; max-width: 100%; }
main section a div { padding: 31px 19px 0; }
main h2 { height: 50px; overflow: hidden; margin: 0; font: 700 13pt/1.2 'Arial', sans-serif; transition: all .4s; }
main a:hover h2 { color: #42bfb5; font-weight: 700; }
main p { line-height: 1.2; }
main .green-button { margin: 22px auto 0; }

@media (max-width: 1140px) {
	main figure { height: 19vw; }
}

@media (max-width: 870px) {
	main figure { height: 28vw; }
	main section a { flex: 0 calc( ( 100% - 60px ) / 2 ); margin: 0 15px 15px; }
	main h2, main section a div { font-size: 12pt; }
}

@media (max-width: 600px) {
	main.container { padding: 30px 0 68px; }
	h1 { font-size: 22pt; }
	
	main section a { flex: 0 100%; }
	main figure, main a:hover figure { height: 220px; background-size: cover; }
}

@media (max-width: 530px) {
	#search { display: block; margin: 0 auto 40px; width: 200px; }
	
	main h2 { height: auto; margin: 0 0 10px; }
}

@media (max-width: 460px) {
	h1 { font-size: 20pt; }
}