/* ReBAR - Responsive Breakpoint Assistance Reference (BETA)
=========================================================== */

/* VISIBLITY CLASSES (General usage) */
.visible { display: flex; visibility: visible; } 
.hidden { display: none; visibility: hidden; }

/* MAX-WIDTH BREAKPOINTS */
@media screen and (max-width: 240px) {
	.show-under-240 { display: flex; visibility: visible; }
	.hide-under-240 { display: none; visibility: hidden; }
}
@media screen and (max-width: 320px) {
	.show-under-320 { display: flex; visibility: visible; }
	.hide-under-320 { display: none; visibility: hidden; }
}
@media screen and (max-width: 480px) {
	.show-under-480 { display: flex; visibility: visible; }
	.hide-under-480 { display: none; visibility: hidden; }
}
@media screen and (max-width: 540px) {
	.show-under-540 { display: flex; visibility: visible; }
	.hide-under-540 { display: none; visibility: hidden; }
}
@media screen and (max-width: 640px) {
	.show-under-640 { display: flex; visibility: visibible; }
	.hide-under-640 { display: none; visibility: hidden; }
}
@media screen and (max-width: 768px) {
	.show-under-768 { display: flex; visibility: visible; }
	.hide-under-768 { display: none; visibility: hidden; }
}
@media screen and (max-width: 960px) {
	.show-under-960 { display: flex; visibility: visible; }
	.hide-under-960 { display: none; visibility: hidden; }
}
@media screen and (max-width: 1024px) {
	.show-under-1024 { display: flex; visibility: visible; }
	.hide-under-1024 { display: none; visibility: hidden; }
}
@media screen and (max-width: 1280px) {
	.show-under-1280 { display: flex; visibility: visible; }
	.hide-under-1280 { display: none; visibility: hidden; }
}
@media screen and (max-width: 1366px) {
	.show-under-1366 { display: flex; visibility: visible; }
	.hide-under-1366 { display: none; visibility: hidden; }
}

/* MIN-WIDTH BREAKPOINTS */
@media screen and (min-width: 241px) {
	.show-over-240 { display: flex; visibility: visible; }
	.hide-over-240 { display: none; visibility: hidden; }
}
@media screen and (min-width: 321px) {
	.show-over-320 { display: flex; visibility: visible; }
	.hide-over-320 { display: none; visibility: hidden; }
}
@media screen and (min-width: 481px) {
	.show-over-480 { display: flex; visibility: visible; }
	.hide-over-480 { display: none; visibility: hidden; }
}
@media screen and (min-width: 541px) {
	.show-over-540 { display: flex; visibility: visible; }
	.hide-over-540 { display: none; visibility: hidden; }
}
@media screen and (min-width: 641px) {
	.show-over-640 { display: flex; visibility: visibible; }
	.hide-over-640 { display: none; visibility: hidden; }
}
@media screen and (min-width: 769px) {
	.show-over-768 { display: flex; visibility: visible; }
	.hide-over-768 { display: none; visibility: hidden; }
}
@media screen and (min-width: 961px) {
	.show-over-960 { display: flex; visibility: visible; }
	.hide-over-960 { display: none; visibility: hidden; }
}
@media screen and (min-width: 1025px) {
	.show-over-1024 { display: flex; visibility: visible; }
	.hide-over-1024 { display: none; visibility: hidden; }
}
@media screen and (min-width: 1281px) {
	.show-over-1280 { display: flex; visibility: visible; }
	.hide-over-1280 { display: none; visibility: hidden; }
}
@media screen and (min-width: 1367px) {
	.show-over-1366 { display: flex; visibility: visible; }
	.hide-over-1366 { display: none; visibility: hidden; }
}

/* WIDTH-BASED VISIBILITY BREAKPOINT RANGES */
@media screen and (min-width: 240px) and (max-width: 319px) {
	.hide-240-320 { display: none; visibility: hidden; }
	.show-240-320 { display: flex; display: -webkit-flex; visibility: visible; }
}
@media screen and (min-width: 320px) and (max-width: 479px) {
	.hide-320-480 { display: none; visibility: hidden; }
	.show-320-480 { display: flex; display: -webkit-flex; visibility: visible; }
}
@media screen and (min-width: 480px) and (max-width: 539px) {
	.hide-480-540 { display: none; visibility: hidden; }
	.show-480-540 { display: flex; display: -webkit-flex; visibility: visible; }
}
@media screen and (min-width: 540px) and (max-width: 639px) {
	.hide-540-640 { display: none; visibility: hidden; }
	.show-540-640 { display: flex; display: -webkit-flex; visibility: visible; }
}
@media screen and (min-width: 640px) and (max-width: 767px) {
	.hide-640-768 { display: none; visibility: hidden; }
	.show-640-768 { display: flex; display: -webkit-flex; visibility: visible; }
}
@media screen and (min-width: 768px) and (max-width: 959px) {
	.hide-768-960 { display: none; visibility: hidden; }
	.show-768-960 { display: flex; display: -webkit-flex; visibility: visible; }
}
@media screen and (min-width: 960px) and (max-width: 1023px) {
	.hide-960-1024 { display: none; visibility: hidden; }
	.show-960-1024 { display: flex; display: -webkit-flex; visibility: visible; }
}
@media screen and (min-width: 1024px) and (max-width: 1279px) {
	.hide-1024-1280 { display: none; visibility: hidden; }
	.show-1024-1280 { display: flex; display: -webkit-flex; visibility: visible; }
}
@media screen and (min-width: 1280px) and (max-width: 1365px) {
	.hide-1280-1366 { display: none; visibility: hidden; }
	.show-1280-1366 { display: flex; display: -webkit-flex; visibility: visible; }
}

/* HEIGHT-BASED VISIBILITY BREAKPOINTS */
@media screen and (max-height: 320px) {
	.hide-under-320h { display: none; visibility: hidden; }
	.show-under-320h { display: flex; display: -webkit-flex; visibility: visible; }
}
@media screen and (max-height: 480px) {
	.hide-under-480h { display: none; visibility: hidden; }
	.show-under-480h { display: flex; display: -webkit-flex; visibility: visible; }
}
@media screen and (max-height: 540px) {
	.hide-under-540h { display: none; visibility: hidden; }
	.show-under-540h { display: flex; display: -webkit-flex; visibility: visible; }
}
@media screen and (max-height: 768px) {
	.hide-under-768h { display: none; visibility: hidden; }
	.show-under-768h { display: flex; display: -webkit-flex; visibility: visible; }
}
@media screen and (max-height: 960px) {
	.hide-under-960h { display: none; visibility: hidden; }
	.show-under-960h { display: flex; display: -webkit-flex; visibility: visible; }
}
@media screen and (max-height: 1024px) {
	.hide-under-1024h { display: none; visibility: hidden; }
	.show-under-1024h { display: flex; display: -webkit-flex; visibility: visible; }
}

@media screen and (min-height: 321px) {
	.hide-over-320h { display: none; visibility: hidden; }
	.show-over-320h { display: flex; display: -webkit-flex; visibility: visible; }
}
@media screen and (min-height: 481px) {
	.hide-over-480h { display: none; visibility: hidden; }
	.show-over-480h { display: flex; display: -webkit-flex; visibility: visible; }
}
@media screen and (min-height: 541px) {
	.hide-over-540h { display: none; visibility: hidden; }
	.show-over-540h { display: flex; display: -webkit-flex; visibility: visible; }
}
@media screen and (min-height: 769px) {
	.hide-over-768h { display: none; visibility: hidden; }
	.show-over-768h { display: flex; display: -webkit-flex; visibility: visible; }
}
@media screen and (min-height: 961px) {
	.hide-over-960h { display: none; visibility: hidden; }
	.show-over-960h { display: flex; display: -webkit-flex; visibility: visible; }
}
@media screen and (min-height: 1025px) {
	.hide-over-1024h { display: none; visibility: hidden; }
	.show-over-1024h { display: flex; display: -webkit-flex; visibility: visible; }
}

/* VIEW BY ORIENTATION */
@media only screen and (orientation: landscape) {
	.show-on-landscape { display: flex; display: -webkit-flex; visibility: visible; }
	.show-on-portrait { display: none; visibility: hidden; }
	.hide-on-landscape { display: none; visibility: hidden; }
}
@media only screen and (orientation: portrait) {
	.show-on-portrait { display: flex; display: -webkit-flex; visibility: visible; }
	.show-on-landscape { display: none; visibility: hidden; }
	.hide-on-portrait { display: none; visibility: hidden; }
}

/* PRINT UTILITY CLASSES (PUC) */
@media print {
	.print-only { display: block; visibility: visible; }
	.screen-only { display: none; visibility: hidden; }
	/* General Defaults for print */
	a, .link { text-decoration: underline; }
	/* Black & White Printing */
	.print-monochrome { color: #000000; background: #ffffff; }
	.print-monochrome img, .print-monochrome figure, .print-monochrome picture { -webkit-filter: grayscale(100%); filter: grayscale(100%); } 
}
@media screen {
	.print-only { display: none; visibility: hidden; }
	.screen-only { display: flex; display: -webkit-flex; visibility: visible; }
}

/* =====================
/* ADDITIONAL REFERENCES
/* ===================== */

/* SMALL DEVICES 640px or less */
/* 320x568 */
/* 360x640 */
/* 480x854 */

/* MEDIUM DEVICES 641px to 1007px */
/* 960x540 */

/* LARGE DEVICES 1008px or greater */
/* 1024x640 */
/* 1024x768 */
/* 1366x768 */
/* 1920x1020 */

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {}

/* SPECIFIC DEVICES */
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}
/* iPad 3 */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {}
/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {}
/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {}
/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){}
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){}
/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){	}
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){}
/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){}
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){}
/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){}
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){}
/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){}
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){}
/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){}
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){}