@charset "UTF-8";
/* CSS Document */

/* DEBUG */

.header-wrapper {
	outline:0px solid red;
}
.header-wrapper 
	.header {
	}
.header-wrapper 
	.header
		.fullpage {
			outline:0px dashed green;
		}
	
.page-wrapper {
	outline:0px dotted red;
}
.page-wrapper	
	.page {
		outline:0px solid blue;
	}




.page-wrapper {
}


/*							*/
/*	DEVELOPER CLASSES		*/
/*							*/
	
	
	.footer-status:hover {
		opacity:0;
		transition:width 1s ease-in-out, opacity 0.5s ease;
	}
		
	.footer-status {
		position:fixed;
		z-index:9999999;
		left:0px;
		bottom:0px;
		width:100%;
		height:20px;
		overflow:hidden;
		text-align:right;
		margin:0px;
		padding:5px 0px 0px 0px;
		background-color:rgba(0,0,0,0.15);
		color:#666666;
		font-weight:normal;
		font-family:Arial, Helvetica, sans-serif;
		font-size:11px;
		line-height:12px;
		white-space:nowrap;
		transition:width 1s ease-in-out, opacity 0.5s ease 0s;
	}
	.footer-status {
		padding:5px 0px 0px 0px;
	}
	.footer-status.collapsed {
		width:0px;
		height:18px;
	}
	
		.footer-status .icon {
			width:26px;
			height:14px;
			border-radius:16px;
			display:block;
			position:relative;
			float:right;
			margin:0px 10px 0px 10px;
			padding:2px 0px 0px 0px;
			text-align:center;
			color:#FFFFFF;
		}
		.footer-status #screen_size {
			color:#666666;
			font-weight:normal;
			margin:0px 0px 0px 20px;
		}
	.footer-status .guides-toggle {
		float:right; 
		margin-right:50px;
	}


	/*
	.footer-status { display:none; }
	*/
	
/*								*/
/*	RESPONSIVE MARKERS			*/
/*								*/

/* EXCLUSIONS (RESPONSIVE LAYOUT) */

	@media screen and (min-width: 1600px) {
		/* XXL */
		.footer-status .icon:before { content:"XXL"; color:black; }
		.footer-status .icon { 	background-color:lime; padding:1px 0px 1px 0px; }
		.footer-status:before {   content: "Responsive theme applied: for Desktop screens wider than 1600 pixel"; }
	}
	@media screen and (min-width: 1200px) and  (max-width: 1599px) {
		/* XL */
		.footer-status .icon:before { content:"XL"; }
		.footer-status .icon { 	background-color:green; color:white; padding:1px 0px 1px 0px; }
		.footer-status:before {   content: "Responsive theme applied: for Desktop screens wider than 1280 pixel"; }
	}
	@media screen and (min-width: 1000px) and  (max-width: 1199px) {
		/* L */
		.footer-status .icon:before { content:"L"; }
		.footer-status .icon { 	background-color:gold; color:white; padding:1px 0px 1px 0px; }
		.footer-status:before {  content: "Responsive theme applied: Desktop screens 1000-1199 pixel width"; }
	}
	@media screen and (min-width: 800px) and (max-width: 999px) {
		/* M */
		.footer-status .icon:before { content:"M"; }
		.footer-status .icon { 	background-color:orange; color:white; padding:1px 0px 1px 0px; }
		.footer-status:before {   content: "Responsive theme applied: Desktop screens 800-999 pixel width"; }
	}
	@media screen and (min-width: 600px) and (max-width: 799px) {
		/* S */
		.footer-status .icon:before { content:"S"; }
		.footer-status .icon { 	background-color:red; color:white; padding:1px 0px 1px 0px; }
		.footer-status:before {   content: "Responsive theme applied: for Mobile with larger screens 600-800 pixel"; }
	}
	@media screen and (min-width: 400px) and (max-width: 599px) {
		/* XS */
		.footer-status .icon:before { content:"XS"; }
		.footer-status .icon { 	background-color:brown; color:white; padding:1px 0px 1px 0px; }
		.footer-status:before {   content: "Responsive theme applied: for Mobile with smaller screens 400-599 pixel"; }
	}
	@media screen and (max-width: 399px) {
		/* XXS */
		.footer-status .icon:before { content:"XXS"; }
		.footer-status .icon { 	background-color:black; color:white; padding:1px 0px 1px 0px; }
		.footer-status:before {   content: "Responsive theme applied: for Mobile with very small screens 0-399 pixel"; }
	}

	
	
/*
.grid-mirror { outline:0px solid hsla(195,100%,40%,0.25); transition:outline 0.3s linear 5s; }
.grid-mirror:hover { outline:1px solid hsla(195,100%,40%,0.25); transition:outline 0.3s linear 0.5s; }
*/
/*
.footer-status { display:none; }
*/