/********************************************************
*	Stylesheet:		 Website beheer (responsive.css)	*
*	Description:	 Stylesheet for Website beheer		*
*	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, #content > .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% Tahoma, Geneva, sans-serif;
	}

	.container, #content > .container {
		width: auto;
		height: auto;
	}

	/************************************************
	*	Menu		  								*
	************************************************/

	#menu {
		height: auto;
	}

	#menu label.responsive-menu {
		display: block;
		float: none;
		width: auto;
		color: #fff;
	}
	
	#menu .responsive-icon {
		display: inline-block;
		margin: 10px;
		vertical-align: middle;
	}

	#menu .responsive-icon > .line {
		width: 35px;
		height: 5px;
		background-color: #fff !important;
		margin: 6px 0;
		transition: 0.4s;
	}

	#menu .active .top {
		-webkit-transform: rotate(-45deg) translate(-9px, 6px);
		transform: rotate(-45deg) translate(-9px, 6px);
	}

	#menu .active .middle {
		opacity: 0;
	}

	#menu .active .bottom {
		-webkit-transform: rotate(45deg) translate(-8px, -8px);
		transform: rotate(45deg) translate(-8px, -8px);
	}

	#menu ul {
		display: none;
		background: #3291f0;
		float: none;
		overflow: hidden;
		clear: both;
	}

	#menu .show-menu:checked ~ ul {
	    display: block;
	}

	#menu li {
		width: 100%;
	}

	/* Override styles from non responsive menu from here */
	#menu ul li ul {
	    display: none;
		position: relative;
		margin: 0;
		border: 0;
		visibility: visible;
	}

	#menu ul li label {
		padding: 22px 12px 10px;
	}
	
	#menu ul li input ~ a {
		display: none;
	}

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

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

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

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

/************************************************************************************
 *  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% Tahoma, Geneva, sans-serif;
	}

	.container, #content > .container {
		width: auto;
		min-height: 0;
	}

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

	#header {
		height: auto;
	}

	#headerright {
		float: none;
	}

	/************************************************
	*	Menu		  								*
	************************************************/

	#menu {
		height: auto;
	}

	#menu label.responsive-menu {
		display: block;
		float: none;
		width: auto;
		color: #fff;
	}

	#menu .responsive-icon {
		display: inline-block;
		margin: 10px;
		vertical-align: middle;
	}

	#menu .responsive-icon > .line {
		width: 35px;
		height: 5px;
		background-color: #fff !important;
		margin: 6px 0;
		transition: 0.4s;
	}

	#menu .active .top {
		-webkit-transform: rotate(-45deg) translate(-9px, 6px);
		transform: rotate(-45deg) translate(-9px, 6px);
	}

	#menu .active .middle {
		opacity: 0;
	}

	#menu .active .bottom {
		-webkit-transform: rotate(45deg) translate(-8px, -8px);
		transform: rotate(45deg) translate(-8px, -8px);
	}

	#menu ul {
		display: none;
		background: #3291f0;
		float: none;
		overflow: hidden;
		clear: both;
	}

	#menu .show-menu:checked ~ ul {
	    display: block;
	}

	#menu li {
		width: 100%;
	}

	/* Override styles from non responsive menu from here */
	#menu ul li ul {
	    display: none;
		position: relative;
		margin: 0;
		border: 0;
		visibility: visible;
	}

	#menu ul li label {
		padding: 22px 12px 10px;
	}

	#menu ul li input ~ a {
		display: none;
	}

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

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

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

	/************************************************
	*	Loginbox						 			*
	************************************************/

	#loginbox {
		position: relative;
		margin: 0 auto;
		border: 0;
		background-color: transparent;
		box-shadow: none;
		overflow: hidden
	}

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

	#footer {
		display: none;
	}

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

}