/********************************************************
*	Stylesheet:		 Gezondheidscheck (responsive.css)	*
*	Description:	 Stylesheet for Gezondheidscheck	*
 *	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;
	}
	
	input[type=text], input[type=password], input[type=file], textarea {
		font-size: 1.05em;
	}

}

/************************************************************************************
 *  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;
	}

	input[type=text], input[type=password], input[type=file], textarea {
		font-size: 1.05em;
	}
}

/************************************************************************************
 *  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;
	}

	#header #logo {
		display: block;
		margin: 5px 20px;
	}

	#header #home-link {
		top: -10px;
		font-size: 0.9em;
	}
	
	.container {
		width: auto;
		height: auto;
	}
	
	/************************************************
	*	Content 						 			*
	************************************************/

	#content {
		padding: 10px;
	}

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

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

	img {
		max-width: 100% !important;
		height: auto !important;
	}
	
	input[type=text], input[type=password], input[type=file], textarea {
		margin: 5px;
		padding: 3px;
		border: 1px black solid;
		box-shadow: 2px 2px 5px 0px rgba(170,170,170,1);
		font-size: 1.05em;
		text-align: center;
	}
}

/************************************************************************************
 *  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;
	}
	
	/************************************************
	*	Header  									*
	************************************************/

	#header #logo {
		display: block;
		float: none;
		margin: 5px auto;
	}
	
	#header #home-link {
		display: none !important;	
	}
	
	/************************************************
	*	Content 						 			*
	************************************************/

	#content {
		padding: 10px;
	}

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

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

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

	#footer {
		clear: both;
		background-color: transparent;
		border-top: 1px silver solid;
		text-align: center;
		padding: 10px 20px;
		color: #000;
	}
	
	#footer span + span {
		display: none;
	}
	
	#footer span span {
		display: none;
	}

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

	input[type=text], input[type=password], input[type=file], textarea {
		margin: 5px;
		padding: 3px;
		width: 90vw;
		border: 1px black solid;
		box-shadow: 1px 1px 3px 0px rgba(170,170,170,1);
		font-size: 1.05em;
		text-align: center;
	}
}