/* 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-holder { margin: 0 0 50px; text-align: left; color: #a0a0a0; }
#search-holder label { margin: 0 8px; color: #000; position: relative; display: inline-block; vertical-align: middle; }
#search-holder label div { font-size: 0; cursor: auto; position: absolute; top: 187%; left: -70px; z-index: 3; background: #fff; display: none; border: 1px solid #ccc; padding: 40px 18px 20px; font-size: 0; text-align: left; width: 300px; }
#search-holder .active { font-weight: 600; color: #42bfb5; }
#search-holder .active div { display: block; }
#search-holder i { cursor: pointer; position: absolute; top: 0; right: 7px; font-size: 28pt; line-height: 1; color: #b1b1b1; font-weight: 400; transition: all .4s; font-style: normal; }
#search-holder i:hover { color: #42bfb5; }
#search-holder span { box-sizing: border-box; margin: 0 0 4px; cursor: pointer; display: inline-block; vertical-align: top; width: 50%; font-size: 10pt; color: #434343; font-weight: 400; padding: 0 0 0 18px; position: relative; }
#search-holder span:before { content: ' '; display: block; position: absolute; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%; border: 1px solid #42bfb5; margin: 1px 5px 0 0; color: #fff; transition: all .4s; line-height: 13px; text-align: center; font-weight: 600; font-size: 8pt; }
#search-holder span.selected:before { content: '\2713'; background: #42bfb5; }
#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; }
#search:after { content: '\e803'; color: #42bfb5; display: block; font: 13pt 'halza', sans-serif; position: absolute; right: 12px; top: 10px; }
#search [type="text"] { width: 100%; text-align: center; }
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 em { display: block; position: absolute; bottom: -13px; left: 19px; background: #9cdbd9; font-weight: 600; font-style: normal; line-height: 1; padding: 5px 42px; border-radius: 15px; font-size: 10.3pt; }
main section a div { padding: 31px 19px 0; }
main h2 { height: 45px; overflow: hidden; margin: 0 0 5px; 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: 10px 0 0; width: 200px; }
	
	main h2 { height: auto; margin: 0 0 10px; }
}

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