body { padding-bottom: 52px !important; }

/* @group Devices Break Points */

#Screens { position: fixed; left: 0;bottom: 0; width: 100%; overflow: visible; display: block; text-align: center; z-index: 500; padding-top: 16px; background-image: url(../pix/dev-stripes.svg); background-size: 64px auto; font-family: sans-serif;
}

#Screens span { background-color: #000000; display: block; height: 5px; width: 100%; margin-right: auto; margin-left: auto; margin-top: 10px; }

#Screens:before { content: 'Below 320px'; display: inline-block; margin-top: -30px; background-color: rgba(0, 0, 0, 0.75); padding-left: 15px; padding-right: 15px; height: 20px; line-height: 20px; font-weight: 600; font-size: 12px; color: #fff; -webkit-border-radius: 10px; border-radius: 10px; }

#Size { background-color: rgba(0, 0, 0, 0.5); display: inline-block;
	padding-left: 10px; color: #fff; font-size: 12px; font-weight: 600; line-height: 20px; height: 20px; padding-right: 10px; margin-left: 20px; -webkit-border-radius: 10px; border-radius: 10px; }

/* ⬇ 320px and bigger | iPhone & iPod Touch 4 & 5 — Portrait [320] */
@media screen and (min-width: 320px) {
	#Screens span { background-color: rgba(249, 225, 96, 0.8); width: 320px; }
	#Screens:before { content: 'iPhone 4 & 5 — Portrait [320]'; background-color: rgba(249, 225, 96, 0.8); color: rgb(128, 128, 128); }
}

/* ⬇ 360px and bigger | Phone — Portrait [360] */
@media screen and (min-width: 360px) {
	#Screens span { background-color: rgba(245, 194, 96, 0.8); width: 360px; }
	#Screens:before { content: 'Phone — Portrait [360]'; background-color: rgba(245, 194, 96, 0.8);  color: rgb(255, 255, 255); }
}

/* ⬇ 375px and bigger | iPhone 6 » 8/X — Portrait [375] */
@media screen and (min-width: 375px) {
	#Screens span { background-color: rgba(238, 164, 96, 0.8); width: 375px; }
	#Screens:before { content: 'iPhone 6 » 8/X — Portrait [375]'; background-color: rgba(238, 164, 96, 0.8);  }
}

/* ⬇ 412px and bigger | Phone — Portrait [412] */
@media screen and (min-width: 412px) {
	#Screens span { background-color: rgba(233, 135, 96, 0.8); width: 412px; }
	#Screens:before { content: 'Phone — Portrait [412] (414)'; background-color: rgba(233, 135, 96, 0.8); }	
}

/* ⬇ 414px and bigger | iPhone 6+ » 8+ — Portrait [414] */
@media screen and (min-width: 414px) {
	#Screens span { background-color: rgba(226, 104, 96, 0.8); width: 414px; }
	#Screens:before { content: 'iPhone 6+ » 8+ — Portrait [414] (412)'; background-color: rgba(226, 104, 96, 0.8); }	
}

/* ⬇ 460px and bigger | Tablet — Portrait [460] */
@media screen and (min-width: 460px) {
	#Screens span { background-color: rgba(220, 75, 96), 0.8); width: 460px; }
	#Screens:before { content: 'Tablet — Portrait [460]'; background-color: rgba(215, 59, 97), 0.8); }
}

/* ⬇ 480px and bigger | iPhone 4 — Landscape [480] */
@media screen and (min-width: 480px) {
	#Screens span { background-color: rgba(213, 55, 97, 0.8); width: 480px; }
	#Screens:before { content: 'iPhone 4 — Landscape [480]'; background-color: rgba(213, 55, 97, 0.8); }
}

/* ⬇ 568px and bigger | iPhone 5 — Landscape [568] */
@media screen and (min-width: 568px) {
	#Screens span { background-color: rgba(200, 41, 97, 0.8); width: 568px; }
	#Screens:before { content: 'iPhone 5 — Landscape [568]'; background-color: rgba(200, 41, 97, 0.8); }
}

/* ⬇ 600px and bigger | Tablet — Portrait [600] */
@media screen and (min-width: 600px) {
	#Screens span { background-color: rgba(169, 39, 94, 0.8); width: 600px; }
	#Screens:before { content: 'Tablet — Portrait [600]'; background-color: rgba(169, 39, 94, 0.8); }
}

/* ⬇ 667px and bigger | iPhone 6 » 8/X — Landscape [667] */
@media screen and (min-width: 667px) {
	#Screens span { background-color: rgba(137, 38, 92, 0.8); width: 667px; }
	#Screens:before { content: 'iPhone 6 » 8/X — Landscape [667]'; background-color: rgba(137, 38, 92, 0.8); }
}

/* ⬇ 732px and bigger | Phone Landscape [732] */
@media screen and (min-width: 732px) {
	#Screens span { background-color: rgba(110, 37, 90, 0.8); width: 732px; }
	#Screens:before { content: 'Phone — Landscape [732] (734)'; background-color: rgba(110, 37, 90, 0.8); }
}

/* ⬇ 736px and bigger | iPhone 6+ » 8+ — Landscape [736] */
@media screen and (min-width: 736px) {
	#Screens span { background-color: rgba(82, 36, 89, 0.8); width: 736px; }
	#Screens:before { content: 'iPhone 6+ » 8+ — Landscape [736] (732)'; background-color: rgba(82, 36, 89, 0.8); }
}

/* ⬇ 768px and bigger | iPad — Portrait [768] */
@media screen and (min-width: 768px) {
	#Screens span { background-color: rgba(58, 34, 88, 0.8); width: 768px; }
	#Screens:before { content: 'iPad — Portrait [768]'; background-color: rgba(58, 34, 88, 0.8); }
}

/* ⬇ 800px and bigger | Tablet — Portrait [800] */
@media screen and (min-width: 800px) {
	#Screens span { background-color: rgba(34, 34, 85, 0.8); width: 800px; }
	#Screens:before { content: 'Tablet — Portrait [800]'; background-color: rgba(34, 34, 85, 0.8); }
}

/* ⬇ 900px and bigger | Tablet — Portrait [900] */
@media screen and (min-width: 900px) {
	#Screens span { background-color: rgba(20, 40, 86, 0.8); width: 900px; }
	#Screens:before { content: 'Tablet — Portrait [900]'; background-color: rgba(20, 40, 86, 0.8); }
}

/* ⬇ 1024px and bigger | Small Screen & iPad — Landscape [1024] */
@media screen and (min-width: 1024px) {
	#Screens span { background-color: rgba(30, 67, 99, 0.8); width: 1024px; }
	#Screens:before { content: 'Small Screen & iPad — Landscape & iPad Pro — Portrait [1024]'; background-color: rgba(30, 67, 99, 0.8); }
}

/* ⬇ 1280px and bigger | 720p Screen [1280] */
@media screen and (min-width: 1280px) {
	#Screens span { background-color: rgba(40, 95, 112, 0.8); width: 1280px; }
	#Screens:before { content: '720p Screen [1280]'; background-color: rgba(40, 95, 112, 0.8); }
}

/* ⬇ 1360px and bigger | Standar Screen [1360] */
@media screen and (min-width: 1360px) {
	#Screens span { background-color: rgba(50, 126, 124, 0.8); width: 1360px; }
	#Screens:before { content: 'Standar Screen [1360]'; background-color: rgba(50, 126, 124, 0.8); }
}

/* ⬇ 1366px and bigger | Laptop Screen [1366] */
@media screen and (min-width: 1366px) {
	#Screens span { background-color: rgba(61, 157, 138, 0.8); width: 1360px; }
	#Screens:before { content: 'Laptop Screen & iPad Pro — Landscape [1366]'; background-color: rgba(61, 157, 138, 0.8); }
}

/* ⬇ 1600px and bigger | Big Screen [1600] */
@media screen and (min-width: 1600px) {
	#Screens span { background-color: rgba(72, 190, 152, 0.8); width: 1600px; }
	#Screens:before { content: 'Big Screen [1600]'; background-color: rgba(72, 190, 152, 0.8); }
}

/* @end */