/* repadtive grid v.2 - ©2023 Jon Sandruck */

:root {
	--grid: calc(var(--line-block) * 5);
	}

/*--visual grid overlay--*/
#grid-overlay {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	overflow: hidden;
}
#grid-overlay .container {
	height: 100%;
}
#hide-grid-overlay {
	position: fixed;
	bottom: 0;
	left: 50%;
	margin-left: -67px;
	z-index: 10000;
	background: hsla(0,0%,100%,.75)
}
.hidden {
	display: none;
}
.border-demo {
	border: #f00 1px solid;
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
}
#grid-overlay .border-demo {
	border: hsla(0,100%,50%,.1) 1.5em solid;
}
#grid-overlay .grid-1 {
	border: hsla(0,0%,0%,.2) 1px solid;
	height: 100%;
	border-right-width: 0;
}
#grid-overlay .grid-1:last-child {
	border-right-width: 1px;
}
#baseline-grid {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#baseline-grid .baseline-object {
	width: 100%;
	position: relative;
	display: block;
	float: left;
	clear: both;
	border: 0;
	border-bottom: 1px hsla(0,0%,50%,.5) solid;
	height: 1.5em;
}
/*--end visual grid overlay--*/

/*default classes assume device resolution > 1200px (ie - Most common resolution for Desktop, Laptops that don't support media queries) */

html {
	font-size: calc(var(--line-block) * .75);
	}

.container {
	height: auto;
	margin: 0;
	display: block;
	overflow: hidden;
	}
.row {
	width: 100%;
	position: relative;
	float: left;
	clear: both;
	}
.container::before, .container::after, .row::before, .row::after {
	display: table;
	content: " ";
	clear: both;
}
[class*="grid"] {
	position: relative;
	float: left;
	clear: none;
	padding: 1.5em;
	box-sizing: border-box;
}
[class*="grid"]::before, [class*="grid"]::after {
	clear: both;
	}
[class*="grid"] :last-child {
	margin-bottom: 0;
	}
.grid-1 {
	width: calc(var(--grid) * 1);
	}
.grid-2 {
	width: calc(var(--grid) * 2);
	}
.grid-3 {
	width: calc(var(--grid) * 3);
	}
.grid-4 {
	width: calc(var(--grid) * 4);
	}
.grid-5 {
	width: calc(var(--grid) * 5);
	}
.grid-6 {
	width: calc(var(--grid) * 6);
	}
.grid-7 {
	width: calc(var(--grid) * 7);
	}
.grid-8 {
	width: calc(var(--grid) * 8);
	}
.grid-9 {
	width: calc(var(--grid) * 9);
	}
.grid-10 {
	width: calc(var(--grid) * 10);
	}
.grid-11 {
	width: calc(var(--grid) * 11);
	}
.grid-12 {
	width: calc(var(--grid) * 12);
	}
.grid-13 {
	width: calc(var(--grid) * 13);
	}
.grid-14 {
	width: calc(var(--grid) * 14);
	}
.grid-15 {
	width: calc(var(--grid) * 15);
	}
.grid-16 {
	width: calc(var(--grid) * 16);
	}
.grid-17 {
	width: calc(var(--grid) * 17);
	}
.grid-18 {
	width: calc(var(--grid) * 18);
	}
.grid-19 {
	width: calc(var(--grid) * 19);
	}
.grid-20 {
	width: calc(var(--grid) * 20);
	}
.grid-21 {
	width: calc(var(--grid) * 21);
	}
.grid-22 {
	width: calc(var(--grid) * 22);
	}
.grid-23 {
	width: calc(var(--grid) * 23);
	}
.grid-24 {
	width: calc(var(--grid) * 24);
	}
/*-- .offset-* --*/
.offset-1 {
	margin-left: calc(var(--grid) * 1);
	}
.offset-2 {
	margin-left: calc(var(--grid) * 2);
	}
.offset-3 {
	margin-left: calc(var(--grid) * 3);
	}
.offset-4 {
	margin-left: calc(var(--grid) * 4);
	}
.offset-5 {
	margin-left: calc(var(--grid) * 5);
	}
.offset-6 {
	margin-left: calc(var(--grid) * 6);
	}
.offset-7 {
	margin-left: calc(var(--grid) * 7);
	}
.offset-8 {
	margin-left: calc(var(--grid) * 8);
	}
.offset-9 {
	margin-left: calc(var(--grid) * 9);
	}
.offset-10 {
	margin-left: calc(var(--grid) * 10);
	}
.offset-11 {
	margin-left: calc(var(--grid) * 11);
	}
.offset-12 {
	margin-left: calc(var(--grid) * 12);
	}
.offset-13 {
	margin-left: calc(var(--grid) * 13);
	}
.offset-14 {
	margin-left: calc(var(--grid) * 14);
	}
.offset-15 {
	margin-left: calc(var(--grid) * 15);
	}
/*--vertical Grid stuff--*/
.grid-v-1 {
	height: calc(var(--grid) * 1);
	}
.grid-v-2 {
	height: calc(var(--grid) * 2);
	}
.grid-v-3 {
	height: calc(var(--grid) * 3);
	}
.grid-v-4 {
	height: calc(var(--grid) * 4);
	}
.grid-v-5 {
	height: calc(var(--grid) * 5);
	}
.grid-v-6 {
	height: calc(var(--grid) * 6);
	}
.grid-v-7 {
	height: calc(var(--grid) * 7);
	}
.grid-v-8 {
	height: calc(var(--grid) * 8);
	}
.grid-v-9 {
	height: calc(var(--grid) * 9);
	}
.grid-v-10 {
	height: calc(var(--grid) * 10);
	}
.grid-v-11 {
	height: calc(var(--grid) * 11);
	}
.grid-v-12 {
	height: calc(var(--grid) * 12);
	}
/*--vertical offset--*/
.offset-v-1 {
	margin-top: calc(var(--grid) * 1);
	}
.offset-v-2 {
	margin-top: calc(var(--grid) * 2);
	}
.offset-v-3 {
	margin-top: calc(var(--grid) * 3);
	}
.offset-v-4 {
	margin-top: calc(var(--grid) * 4);
	}
.offset-v-5 {
	margin-top: calc(var(--grid) * 5);
	}
.offset-v-6 {
	margin-top: calc(var(--grid) * 6);
	}
.offset-v-7 {
	margin-top: calc(var(--grid) * 7);
	}
.offset-v-8 {
	margin-top: calc(var(--grid) * 8);
	}
.offset-v-9 {
	margin-top: calc(var(--grid) * 9);
	}
.offset-v-10 {
	margin-top: calc(var(--grid) * 10);
	}
.offset-v-11 {
	margin-top: calc(var(--grid) * 11);
	}
.offset-v-12 {
	margin-top: calc(var(--grid) * 12);
	}

/*-- isMobile helper CSS --*/
body.mobile .mobile-hidden {
  visibility:hidden;
  display:none;
  }
body.tablet .tablet-hidden {
  visibility:hidden;
  display:none;
  }
body.phone .phone-hidden {
  visibility:hidden;
  display:none;
  }

/*--media queries--*/

/*section for "fixed" layouts (eg - Websites with center column layouts)*/
@media screen and (min-width:1200px) {

.fixed {
	font-size: 15px;
	line-height: 20px;
	--line-block: 20px;
	}
.fixed .container, .fixed.container {
	width: 1200px;
	margin: 0 auto;
	}
.fixed .grid-13, .fixed .grid-14, .fixed .grid-15, .fixed .grid-16 {
	width: 1200px;
	}
.fixed .offset-11, .fixed .offset-12, .fixed .offset-13, .fixed .offset-14, .fixed .offset-15 {
	margin-left: 1180px;
	}
}

/*Media Query for 2X breakpoint (ie - 5K+ and Ultrawide monitors) */
@media screen and (min-width: 2400px) {
:root {
	--line-block:calc(100vw / 120);
	}
}

/*media query for xl devices (ie - High resolution Laptop and Desktop monitors)*/
@media screen and (min-width: 1600px) and (max-width:2399px) {
:root {
	--line-block:calc(100vw / 80);
	}
	
.container {
	width: 96rem;
	}
.xl-grid-1 {
	width: calc(var(--grid) * 1);
	}
.xl-grid-2 {
	width: calc(var(--grid) * 2);
	}
.xl-grid-3 {
	width: calc(var(--grid) * 3);
	}
.xl-grid-4 {
	width: calc(var(--grid) * 4);
	}
.xl-grid-5 {
	width: calc(var(--grid) * 5);
	}
.xl-grid-6 {
	width: calc(var(--grid) * 6);
	}
.xl-grid-7 {
	width: calc(var(--grid) * 7);
	}
.xl-grid-8 {
	width: calc(var(--grid) * 8);
	}
.xl-grid-9 {
	width: calc(var(--grid) * 9);
	}
.xl-grid-10 {
	width: calc(var(--grid) * 10);
	}
.xl-grid-11 {
	width: calc(var(--grid) * 11);
	}
.xl-grid-12 {
	width: calc(var(--grid) * 12);
	}
.xl-grid-13 {
	width: calc(var(--grid) * 13);
	}
.xl-grid-14 {
	width: calc(var(--grid) * 14);
	}
.xl-grid-15 {
	width: calc(var(--grid) * 15);
	}
.xl-grid-16 {
	width: calc(var(--grid) * 16);
	}
.xl-grid-17 {
	width: calc(var(--grid) * 17);
	}
.xl-grid-18 {
	width: calc(var(--grid) * 18);
	}
.xl-grid-19 {
	width: calc(var(--grid) * 19);
	}
.xl-grid-20 {
	width: calc(var(--grid) * 20);
	}
.xl-grid-21 {
	width: calc(var(--grid) * 21);
	}
.xl-grid-22 {
	width: calc(var(--grid) * 22);
	}
.xl-grid-23 {
	width: calc(var(--grid) * 23);
	}
.xl-grid-24 {
	width: calc(var(--grid) * 24);
	}
.xl-offset-1 {
	margin-left: calc(var(--grid) * 1);;
	}
.xl-offset-2 {
	margin-left: calc(var(--grid) * 2);
	}
.xl-offset-3 {
	margin-left: calc(var(--grid) * 3);
	}
.xl-offset-4 {
	margin-left: calc(var(--grid) * 4);
	}
.xl-offset-5 {
	margin-left: calc(var(--grid) * 5);
	}
.xl-offset-6 {
	margin-left: calc(var(--grid) * 6);
	}
.xl-offset-7 {
	margin-left: calc(var(--grid) * 7);
	}
.xl-offset-8 {
	margin-left: calc(var(--grid) * 8);
	}
.xl-offset-9 {
	margin-left: calc(var(--grid) * 9);
	}
.xl-offset-10 {
	margin-left: calc(var(--grid) * 10);
	}
.xl-offset-11 {
	margin-left: calc(var(--grid) * 11);
	}
.xl-offset-12 {
	margin-left: calc(var(--grid) * 12);
	}
.xl-offset-13 {
	margin-left: calc(var(--grid) * 13);
	}
.xl-offset-14 {
	margin-left: calc(var(--grid) * 14);
	}
.xl-offset-15 {
	margin-left: calc(var(--grid) * 15);
	}
.xl-hidden {
	visibility: hidden;
	display: none;
	}
.xl-visible {
	visbility: visible;
	display: block
	}
}

/*media queries for lg devices (ie - Popular laptop and desktop displays, large/wide tablets) */
@media screen and (min-width: 1200px) and (max-width: 1599px) {

:root {
	--line-block:calc(100vw / 60);
	}
	
.lg-hidden {
	visibility: hidden;
	display: none;
	}
.lg-visible {
	visbility: visible;
	display: block
	}
.container, .grid-16, .grid-15, .grid-14, .grid-13, .grid-12 {
	width: calc(var(--grid) * 12);
	}
.lg-grid-1 {
	width: calc(var(--grid) * 1);
	}
.lg-grid-2 {
	width: calc(var(--grid) * 2);
	}
.lg-grid-3 {
	width: calc(var(--grid) * 3);
	}
.lg-grid-4 {
	width: calc(var(--grid) * 4);
	}
.lg-grid-5 {
	width: calc(var(--grid) * 5);
	}
.lg-grid-6 {
	width: calc(var(--grid) * 6);
	}
.lg-grid-7 {
	width: calc(var(--grid) * 7);
	}
.lg-grid-8 {
	width: calc(var(--grid) * 8);
	}
.lg-grid-9 {
	width: calc(var(--grid) * 9);
	}
.lg-grid-10 {
	width: calc(var(--grid) * 10);
	}
.lg-grid-11 {
	width: calc(var(--grid) * 11);
	}
.lg-grid-12 {
	width: calc(var(--grid) * 12);
	}

/*--offset stuff--*/
.offset-11, .lg-offset-11 {
	margin-left: calc(var(--grid) * 11);
	}
.offset-10, .lg-offset-10 {
	margin-left: calc(var(--grid) * 10);
	}
.offset-9, .lg-offset-9 {
	margin-left: calc(var(--grid) * 9);
	}
.offset-8, .lg-offset-8 {
	margin-left: calc(var(--grid) * 8);
	}
.offset-7, .lg-offset-7 {
	margin-left: calc(var(--grid) * 7);
	}
.offset-6, .lg-offset-6 {
	margin-left: calc(var(--grid) * 6);
	}
.offset-5, .lg-offset-5 {
	margin-left: calc(var(--grid) * 5);
	}
.offset-4, .lg-offset-4 {
	margin-left: calc(var(--grid) * 4);
	}
.offset-3, .lg-offset-3 {
	margin-left: calc(var(--grid) * 3);
	}
.offset-2, .lg-offset-2 {
	margin-left: calc(var(--grid) * 2);
	}
.offset-1, .lg-offset-1 {
	margin-left: calc(var(--grid) * 1);
	}
.no-offset, .lg-no-offset {
	margin-left: 0;
	}
}

@media screen and (min-width: 800px) and (max-width: 1199px) {

:root {
	--line-block:calc(100vw / 40);
	}

.container, .grid-8,  .grid-9,  .grid-10,  .grid-11,  .grid-12,  .grid-13,  .grid-14,  .grid-15,  .grid-16 {
	width: calc(var(--grid) * 8);
	}
.md-grid-1 {
	width: calc(var(--grid) * 1);
	}
.md-grid-2 {
	width: calc(var(--grid) * 2);
	}
.md-grid-3 {
	width: calc(var(--grid) * 3);
	}
.md-grid-4 {
	width: calc(var(--grid) * 4);
	}
.md-grid-5 {
	width: calc(var(--grid) * 5);
	}
.md-grid-6 {
	width: calc(var(--grid) * 6);
	}
.md-grid-7 {
	width: calc(var(--grid) * 7);
	}
.md-grid-8 {
	width: calc(var(--grid) * 8);
	}
.md-hidden {
	visibility: hidden;
	display: none;
	}
.md-visible {
	visbility: visible;
	display: block;
	}
/*--offset stuff--*/
.offset-7, .md-offset-7 {
	margin-left: calc(var(--grid) * 7);
	}
.offset-6, .md-offset-6 {
	margin-left: calc(var(--grid) * 6);
	}
.offset-5, .md-offset-5 {
	margin-left: calc(var(--grid) * 5);
	}
.offset-4, .md-offset-4 {
	margin-left: calc(var(--grid) * 4);
	}
.offset-3, .md-offset-3 {
	margin-left: calc(var(--grid) * 3);
	}
.offset-2, .md-offset-2 {
	margin-left: calc(var(--grid) * 2);
	}
.offset-1, .md-offset-1 {
	margin-left: calc(var(--grid) * 1);
	}
.md-no-offset {
	margin-left: 0;
	}
}

@media screen and (min-width: 600px) and (max-width:799px) {

:root {
	--line-block:calc(100vw / 30);
	}	

.container, .grid-16, .grid-15, .grid-14, .grid-13, .grid-12, .grid-11, .grid-10, .grid-9, .grid-8, .grid-7, .grid-6, .sm-grid-6 {
	width: calc(var(--grid) * 6);
	}
.sm-grid-5 {
	width: calc(var(--grid) * 5);
	}
.sm-grid-4 {
	width: calc(var(--grid) * 4);
	}
.sm-grid-3 {
	width: calc(var(--grid) * 3);
	}
.sm-grid-2 {
	width: calc(var(--grid) * 2);
	}
.sm-grid-1 {
	width: calc(var(--grid) * 1);
	}
.sm-hidden {
	visibility: hidden;
	display: none;
	}
.sm-visible {
	visbility: visible;
	display: block
	}
/*--offset stuff--*/
.offset-5, .sm-offset-5 {
	margin-left: calc(var(--grid) * 5);
	}
.offset-4, .sm-offset-4 {
	margin-left: calc(var(--grid) * 4);
	}
.offset-3, .sm-offset-3 {
	margin-left: calc(var(--grid) * 3);
	}
.offset-2, .sm-offset-2 {
	margin-left: calc(var(--grid) * 2);
	}
.offset-1, .sm-offset-1 {
	margin-left: calc(var(--grid) * 1);
	}
.lg-no-offset, .md-no-offset, .sm-no-offset {
	margin-left: 0;
	}
}

/*media query for xs-sized devices*/
@media screen and (max-width: 599px) {

:root {
	--line-block:calc(100vw / 20);	
	}	

.container, .grid-16, .grid-15, .grid-14, .grid-13, .grid-12, .grid-11, .grid-10, .grid-9, .grid-8, .grid-7, .grid-6, .grid-5, .grid-4, .xs-grid-4 {
	width: calc(var(--grid) * 4);
	}
.xs-grid-3 {
	width: calc(var(--grid) * 3);
	}
.xs-grid-2 {
	width: calc(var(--grid) * 2);
	}
.xs-grid-1 {
	width: calc(var(--grid) * 1);
	}
.xs-hidden {
	visibility: hidden;
	display: none;
	}
.xs-visible {
	visbility: visible;
	display: block;
	}
/*--offset stuff--*/

/*resets all offsets*/
.offset-3, .xs-offset-3 {
	margin-left: calc(var(--grid) * 3);
	}
/*set new offsets for this viewport*/
.offset-2, .xs-offset-2 {
	margin-left: calc(var(--grid) * 2);
	}
.offset-1, .xs-offset-1 {
	margin-left: calc(var(--grid) * 1);
	}
.xs-no-offset {
	margin-left: 0;
	}
}