/**
 * Responsive CSS
 * Media Queries for Mobile and Tablet
 * 
 * @package Familien-MVZ
 * @since 1.0.0
 */

/*------------------------------------*\
	$TABLET (721px - 960px)
\*------------------------------------*/
@media (min-width: 721px) and (max-width: 960px) {
	
	/* Navigation: smaller items on tablet */
	ul.rex-navi1 li a {
		font-size: 14px;
		padding: 8px 4px;
	}
	
}

/*------------------------------------*\
	$MOBILE (<720px)
\*------------------------------------*/
@media (max-width: 720px) {
	
	/* Remove background image on mobile (performance) */
	html {
		background: #fff;
		padding-top: 0;
	}
	
	.footer {
		background: #fff;
	}
	
	/* Navigation: full width on mobile */
	ul.rex-navi1 li {
		display: block;
		width: 100%;
	}
	
	ul.rex-navi1 li a {
		width: 90%;
		margin: 5px auto;
		float: none;
	}
	
	/* Content: full width paragraphs */
	.inhalt p {
		width: 100%;
	}
	
	/* Teaser boxes: remove fixed height */
	.grid-4.target {
		height: auto;
		min-height: 200px;
	}
	
	.grid-4.target:hover {
		height: auto;
		min-height: 200px;
	}
	
	/* Gallery: single column on mobile */
	.galerie-image {
		width: 100%;
		height: auto;
		float: none;
		text-align: center;
		margin-bottom: 15px;
	}
	
	/* Logo: scale down on small screens */
	.logo,
	.logo img {
		width: 100%;
		height: auto;
		max-width: 320px;
	}
	
}