/* DEMO Rosenau */

/*
TODO
- merge with tools
*/

.sizes{
	bottom: 0;
	left: 0;
	background: #000;
	color: #fff;
	padding: 0.25em;
	display: inline-block;
	position: fixed;
	z-index:110;
	font-size: 12px;
	font-family: sans-serif;
}
.sizes:after{
	content:"xxxs / smartphone";
}
@media screen and (min-width: 360px) {
	.sizes:after{
		content:"xxs / 360 Px / smartphone medium portrait";
	}
}
/* 400 px */
@media screen and (min-width: 400px) {
	.sizes:after{
		content:"xs / 400 Px / smartphone large portrait";
	}
}
/* 480 px */
@media screen and (min-width: 480px) {
	.sizes:after{
		content:"s / 480 Px / smartphone landscape";
	}
}
/* 768 px */
@media screen and (min-width: 768px) {
	.sizes:after{
		content:"m / 768 Px / tablet portrait";
	}
}
/* 800 px */
@media screen and (min-width: 800px) {
	.sizes:after{
		content:"m / 800 Px / tablet portrait";
	}
}
/* 960 px */
@media screen and (min-width: 960px) {
	.sizes:after{
		content:"l / 960 Px / tablet landscape";
	}
}
/* 1024 px */
@media screen and (min-width: 1024px) {
	.sizes:after{
		content:"l / 1024 Px / tablet landscape";
	}
}
/* 1280 px */
@media screen and (min-width: 1280px) {
	.sizes:after{
		content:"xl / 1280 Px / laptop";
	}
}
/* 1600 px */
@media screen and (min-width: 1600px) {
	.sizes:after{
		content:"xxl / 1600 Px / laptop";
	}
}
/* 1920 px */
@media screen and (min-width: 1920px) {
	.sizes:after{
		content:"xxxl / 1920 Px / desktop";
	}
}
/* 1280 px */
@media screen and (min-width: 2560px){
	.sizes:after{
		content:"xxxxl / 2560 Px / iMac 27'";
	}
}