/********************************************************
*	Stylesheet:		 WZA Check (responsive.css)			*
*	Description:	 Stylesheet for WZA Check			*
 *	Media:			 Screen	- Responsive				*
 *	Version:		 1.0								*
 *	Author:			 Hiljo Lodewijk						*
 *	Author URI:		 http://www.hiljo.nl/				*
 ********************************************************/

/************************************************************************************
 *	Responsive styles for Landscape mode tablets (width website is 1024 pixels)		*
 ************************************************************************************/
@media only screen and (min-width: 981px) and (max-width: 1024px) {
	.container {
		max-width: 100%;
	}

	#footer {
		max-width: 100%;
	}

	img {
		max-width: 100% !important;
		height: auto !important;
	}
}

/************************************************************************************
 *  Responsive styles for Portrait mode tablets (width website is 768 pixels)		*
 ************************************************************************************/
@media only screen and (min-width: 768px) and (max-width: 980px) {
	.container {
		width: auto;
		margin: 0;
	}

	#footer {
		max-width: 100%;
		margin: 0 auto;
	}

	img {
		max-width: 100% !important;
		height: auto !important;
	}
}

/************************************************************************************
 *  Responsive styles for landscape mode smartphones (width website is 480 pixels)	*
 ************************************************************************************/
@media only screen and (min-width: 480px) and (max-width: 767px) {
	html, body {
		background: #fff none;
		height: auto;
	}

	body {
		font: 70% 'Open Sans', Verdana, Geneva, Tahoma, sans-serif;
	}
	
	.container {
		width: auto;
		height: auto;
	}

	/************************************************
	*	Header  									*
	************************************************/

	#header #logo {
		margin: -30px 10px 0;
	}
	
	#header h1#logo-text {
		margin: 40px 0;
		font-size: 2.8em;	
	}
	
	#header h2#subtitle {
		margin: 40px 0;
		font-size: 1.2em;
		text-align: center;
	}
	
	#header #app-uitleg {
		display: none;		
	}

	.container {
		width: auto;
		height: auto;
	}
	
	/************************************************
	*	Content 						 			*
	************************************************/

	#content {
		padding: 10px;
	}

	#content h1 {
		font-size: 1.6em;
	}

	#content a {
		display: inline-block;
		margin: 0 10px;
	}

	#content img.photo, #content img.illustration {
		display: block;
		margin: 10px auto;
	}
	
	#content .woorden {
		display: none;
	}
	
	/************************************************
	*	Contact form								*
	************************************************/

	#contact-form {
		padding-top: 15px;
		height: auto;
	}

	#contact-form div {
		padding: 10px;
	}

	#contact-form .alignleft {
		padding-bottom: 20px;
		border-bottom: 1px silver solid;
	}
	
	/************************************************
	*	Other & General					 			*
	************************************************/
	img {
		max-width: 100% !important;
		height: auto !important;
	}
	
	.alignleft {
		width: auto !important;
		float: none;
		margin: 0;
	}
}

/************************************************************************************
 *  Responsive styles for portrait mode smartphones (width website is 320 pixels)	*
 ************************************************************************************/
@media only screen and (max-width: 479px) {
	html, body {
		height: auto;
		background: #fff none;
	}

	body {
		font: 70% 'Open Sans', Verdana, Geneva, Tahoma, sans-serif;
	}
	
	.container {
		width: auto;
	}
	
	/************************************************
	*	Top 						 			*
	************************************************/

	#top .container img:first-child {
		display: none;
	}
	
	#top .icon {
		margin: 0 10px 0 30px;
	}
	
	/************************************************
	*	Header  									*
	************************************************/

	#header #logo {
		margin: -10px 10px 0;
	}
	
	#header h1#logo-text {
		font-size: 2.4em;	
	}
	
	#header h2#subtitle {
		clear: both;
		margin: 40px 0;
		font-size: 1.2em;
		text-align: center;
	}
	
	#header #app-uitleg {
		display: none;		
	}

	/************************************************
	*	Content 						 			*
	************************************************/

	#content {
		padding: 10px;
	}

	#content img.photo, #content img.illustration {
		display: block;
		margin: 10px auto;
	}
	
	#content h1 {
		font-size: 1.6em;
	}

	#content a {
		display: inline-block;
		margin: 0 10px;
	}
	
	#content .woorden {
		display: none;
	}

	/************************************************
	*	Contact form								*
	************************************************/

	#contact-form {
		padding-top: 15px;
		height: auto;
	}

	#contact-form div {
		padding: 10px;
	}

	#contact-form .alignleft {
		padding-bottom: 20px;
		border-bottom: 1px silver solid;
	}

	/************************************************
	*	Other & General					 			*
	************************************************/

	#footer {
		display: none;
	}

	img {
		max-width: 100% !important;
		height: auto !important;
	}
	
	.alignleft {
		width: auto !important;
		float: none;
		margin: 0;
	}

}