/* Maurri Giardini - adattamento a cellulari e tablet (si aggiunge a templatemo_style.css) */

video, iframe, img { max-width: 100%; }

/* la fascia in basso parte sempre sotto menu e contenuto */
#templatemo_content { overflow: hidden; }
.templatemo_bottom_panel_section, #templatemo_footer { clear: both; }
video { height: auto; }

@media screen and (max-width: 960px) {
	body { display: block; font-size: 15px; }

	#templatemo_container { width: 100%; max-width: 940px; }

	/* testata: l'immagine con il logo si ridimensiona mantenendo le proporzioni (940 x 315) */
	#templatemo_header {
		width: 100%;
		height: 0;
		padding-top: 33.5%;
		background-size: 100% auto;
	}

	/* menu sopra il contenuto, su due colonne */
	#templatemo_content_left { float: none; width: 100%; min-height: 0; background: #313131; }
	#templatemo_menu { float: none; width: auto; height: auto; padding: 12px 8px 4px 8px; }
	#templatemo_menu ul { float: none; display: flex; flex-wrap: wrap; }
	#templatemo_menu li { width: 50%; }
	#templatemo_menu li a { width: auto; font-size: 16px; height: auto; min-height: 27px; margin: 0 6px 8px 0; padding: 6px 0 4px 45px; }

	/* contenuto a tutta larghezza */
	#templatemo_content_right,
	#templatemo_content_right_bottom { float: none; width: 100%; }
	#templatemo_content_right_top { width: auto; padding: 20px 16px 4px 16px; background-size: cover; }
	#templatemo_content_right_top .templatemo_post_area { width: auto; }
	.templatemo_post_area p, .templatemo_post_area h2 { font-size: 15px; line-height: 1.55em; text-align: left; }
	.templatemo_post_area h1 { font-size: 22px; }
	#templatemo_content_right_bottom_section { width: auto; padding: 8px; }
	#templatemo_content_right_bottom_section .templatemo_text_area { padding: 12px; }
	.templatemo_text_area img { margin: 0 8px 8px 0; }
	.templatemo_text_area video { display: block; width: 100%; margin-top: 8px; }

	/* fascia in basso e piè di pagina */
	.templatemo_bottom_panel_section { width: auto; height: auto; background-size: cover; padding: 8px; overflow: hidden; }
	.templatemo_bottom_section_left,
	.templatemo_bottom_section_right { float: none; width: auto; text-align: left; padding: 6px; }
	.templatemo_bottom_section_right h1 { margin-left: 0; }
	#templatemo_footer { padding: 10px 12px; font-size: 12px; line-height: 1.6em; }

	#mappa-maurri { padding: 14px !important; }
}

@media screen and (max-width: 420px) {
	#templatemo_menu { padding: 10px 4px 2px 4px; }
	#templatemo_menu li a { font-size: 14px; padding-left: 40px; margin-bottom: 4px; }
}

@media screen and (max-width: 330px) {
	#templatemo_menu li { width: 100%; }
}