@charset "utf-8";
/* SD GridKit - A CSS3 10 Column Grid with Flexbox Support */
/* By StratosphereDesigns.com - ver:0.3 8/25/2019 
By default the display: Floats will be used, if Flex is supported it will be used, if CSS3 GRID is supported it will be used. 
All containers(children) that make up columns are by default at a width of 100% to equally distribute and fill the containers.
This is a starter gird framework with bare minimum grid layouts made for customization.
TO BREAK THE GRID FOR OTHER SCREEN SIZES = Use any of these ".ng_1440, .ng_1366, .ng_1024, .ng_768, .ng_640, .ng_480, .ng_360 and .ng_320" classes after the grid class.HOW TO USE | ADD IN THIS SEQUENCE = class="grid-col-4 gut_2 ng_1024" ng_* class must come last to clear!
All columned divs must have there class added like "col2" for thwo columns or "col3" for three column. This supports older browsers.
*/
*, *:before, *:after {
  box-sizing: border-box;
}


/* SUPPORT FOR OLD BROWSERS GRID - by float */
/* ========================================================== */
.grid-col-10:before,
.grid-col-10:after,	
.grid-col-9:before,
.grid-col-9:after,	
.grid-col-8:before,
.grid-col-8:after,	
.grid-col-7:before,
.grid-col-7:after,	
.grid-col-6:before,
.grid-col-6:after,	
.grid-col-5:before,
.grid-col-5:after,	
.grid-col-4:before,
.grid-col-4:after,	
.grid-col-3:before,
.grid-col-3:after,	
.grid-col-2:before,
.grid-col-2:after{
     content: " ";
    display: table;
    clear: both;
	width:100%;
	
}	

.col2{	
float:left;
width:50%;
}
.col3{		
    float: left;
    width: 33.33333333333333%;
}
.col4{
    float: left;
    width: 25%;	
}
.col5{
    float: left;
    width: 20%;
}
.col6{
    float: left;
    width: 16.66666666666667%;
}
.col7{
    float: left;
    width: 14.28571428571429%;
}
.col8{
    float: left;
    width: 12.5%;
}
.col9{
    float: left;
    width: 11.1111%;
}
.col10{
    float: left;
    width: 10%;
}

	.col-1-of-10{	
		float:left;
		width:10%;
	}
	.col-9-of-10{	
		float:left;
		width:90%;
	}
	.col-2-of-10{	
		float:left;
		width:20%;
	}
	.col-8-of-10{	
		float:left;
		width:80%;
	}

	.col-3-of-10{	
		float:left;
		width:30%;
	}

	.col-7-of-10{	
		float:left;
		width:70%;
	}

	.col-4-of-10{	
		float:left;
		width:40%;
	}

	.col-6-of-10{		
		float:left;
		width:60%;
	}
	.col-5-of-10{	
		float:left;
		width:50%;
	}


/* ====================================================  */







@supports  (display : flex) {
/* SUPPORT FOR BROWSERS WITH ONLY FLEX GRID */
/* ============================================================ */	

	
/* Clear Out Old Floating Grid Attributes */
.grid-col-10:before,
.grid-col-10:after,	
.grid-col-9:before,
.grid-col-9:after,	
.grid-col-8:before,
.grid-col-8:after,	
.grid-col-7:before,
.grid-col-7:after,	
.grid-col-6:before,
.grid-col-6:after,	
.grid-col-5:before,
.grid-col-5:after,	
.grid-col-4:before,
.grid-col-4:after,	
.grid-col-3:before,
.grid-col-3:after,	
.grid-col-2:before,
.grid-col-2:after{
	display:none;
    content:none;
    clear: both;
	width:100%;	
}
	
	.col2,
	.col3,
	.col4,
	.col5,
	.col6,
	.col7,
	.col8,
	.col9,
	.col10,
	
	.col-1-of-10,
	.col-9-of-10,
	.col-2-of-10,
	.col-8-of-10,
	.col-3-of-10,
	.col-7-of-10,
	.col-4-of-10,
	.col-6-of-10,
	.col-5-of-10{
		float:none;
		width:100%;
	}	
	
/* Clear Out Old Floating Grid Attributes */
	
	
	
	

.grid-col-10,
.grid-col-9,
.grid-col-8,
.grid-col-7,
.grid-col-6,
.grid-col-5,
.grid-col-4,
.grid-col-3,
.grid-col-2{
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
	
  flex-wrap: nowrap;
  -webkit-align-items: start;	
  align-items: start;	
}



.grid-lt-1-of-10,	 	 
.grid-lt-9-of-10,	 
.grid-lt-10-of-8,
.grid-lt-8-of-10,
.grid-lt-3-of-10,
.grid-lt-7-of-10,
.grid-lt-4-of-10,
.grid-lt-6-of-10,
.grid-lt-5-of-10{
  display: -webkit-box;     
  display: -moz-box;         
  display: -ms-flexbox;      
  display: -webkit-flex;     
  display: flex;             
	
  flex-wrap: nowrap;
  -webkit-align-items: start;	
  align-items: start;	
}	

/* GRID 1 -of- 10 */
.grid-lt-1-of-10 div:first-child{
	 flex-basis: 10%;
	}
.grid-lt-1-of-10 div:last-child{
	 flex-basis: 90%; 
	}
/* GRID 9 -of- 10 */
.grid-lt-9-of-10 div:first-child{
	 flex-basis: 10%;
	}
.grid-lt-9-of-10 div:last-child{
	 flex-basis: 90%; 
	}


/* GRID 2 -of- 10 */
.grid-lt-2-of-10 div:first-child{
	 flex-basis: 20%;
	}
.grid-lt-2-of-10 div:last-child{
	 flex-basis: 80%; 
	}
/* GRID 8 -of- 10 */
.grid-lt-8-of-10 div:first-child{
	 flex-basis: 80%;
	}
.grid-lt-8-of-10 div:last-child{
	 flex-basis: 20%; 
	}


/* GRID 3 -of- 10 */
.grid-lt-3-of-10 div:first-child{
	 flex-basis: 30%;
	}
.grid-lt-3-of-10 div:last-child{
	 flex-basis: 70%; 
	}
/* GRID 7 -of- 10 */
.grid-lt-7-of-10 div:first-child{
	 flex-basis: 70%;
	}
.grid-lt-7-of-10 div:last-child{
	 flex-basis: 30%; 
	}


/* GRID 4 -of- 10 */
.grid-lt-4-of-10 div:first-child{
	 flex-basis: 40%;
	}
.grid-lt-4-of-10 div:last-child{
	 flex-basis: 60%; 
	}
/* GRID 6 -of- 10 */
.grid-lt-6-of-10 div:first-child{
	 flex-basis: 60%;
	}
.grid-lt-6-of-10 div:last-child{
	 flex-basis: 40%; 
	}


/* GRID 5 -of- 10 (1 of 2) */
.grid-lt-5-of-10 div:first-child{
	 flex-basis: 50%;
	}
.grid-lt-5-of-10 div:last-child{
	 flex-basis: 50%; 
	}





}

/* @@@@@@@@@@@ CSS3 GRID @@@@@@@@@@@@@@@ */
/* if support for CSS3 Grid - lets do this! */
 @supports (display: grid) {
	 
 
.grid-lt-1-of-10{
	display: grid;
	grid-template-columns: 1fr 90%;	 
	 }		 	 
.grid-lt-9-of-10{
    display: grid;
	grid-template-columns: 90% 1fr;
}	
	 
.grid-lt-2-of-10{
    display: grid;
	grid-template-columns: 1fr 80%;
}		 
.grid-lt-8-of-10{
    display: grid;
	grid-template-columns: 80% 1fr;
}	 
	 
.grid-lt-3-of-10{
    display: grid;
	grid-template-columns: 1fr 70% ;
}	 	 	 
.grid-lt-7-of-10{
    display: grid;
	grid-template-columns: 70% 1fr;
}	 
	 	 
.grid-lt-4-of-10{
    display: grid;
	grid-template-columns: 1fr 60%;
}	 
.grid-lt-6-of-10{
    display: grid;
	grid-template-columns: 60% 1fr;
}	 
	 
.grid-lt-5-of-10{
    display: grid;
	grid-template-columns: 50% 1fr;
}	 
	 

	 
/* ------------------------------------------------------ */
.grid-col-10{
     display: grid;
   grid-template-columns: repeat(10, 1fr);	
}
.grid-col-9{
    display: grid;
    grid-template-columns: repeat(9, 1fr);	
}
.grid-col-8{
    display: grid;
    grid-template-columns: repeat(8, 1fr);	
}
.grid-col-7{
    display: grid;
    grid-template-columns: repeat(7, 1fr);	
}
.grid-col-6{
     display: grid;
     grid-template-columns: repeat(6, 1fr);	
}
.grid-col-5{
     display: grid;
    grid-template-columns: repeat(5, 1fr);
}
.grid-col-4{
     display: grid;
     grid-template-columns: repeat(4, 1fr);	
}
.grid-col-3{
    display: grid;
    grid-template-columns: repeat(3, 1fr);	
}	 
.grid-col-2{
    display: grid;
    grid-template-columns: repeat(2, 1fr);      	
  }	 
}
/* Gutters */
/* ========================================== */


.gut-1 {
    padding: 0 0.625rem; /* 10 px */
}
.gut-1:first-child {
    padding-left: 0;
    padding-right: 1.25rem;
}
.gut-1:last-child {
    padding-right: 0;
    padding-left: 1.25rem; 
}

.gut-2 {
    padding: 0 1.25rem; /* 20 px */
}
.gut-2:first-child {
    padding-left: 0;
    padding-right: 2.5rem; 
}
.gut-2:last-child {
    padding-right: 0;
    padding-left: 2.5rem;
}

.gut-3 {
    padding:0 1.875rem; /* 30px */
}
.gut-3:first-child {
    padding-left: 0;
    padding-right:3.75rem;
}
.gut-3:last-child {
    padding-right: 0;
    padding-left:3.75rem;
}

.gut-4 {
    padding: 0 2.5rem; /* 40 px */
}
.gut-4:first-child {
    padding-left: 0;
    padding-right: 5rem;
}
.gut-4:last-child {
    padding-right: 0;
    padding-left: 5rem;
}

.gut-5 {
    padding: 0 3.125rem; /* 50 px */
}
.gut-5:first-child {
    padding-left: 0;
    padding-right: 6.25rem;
}
.gut-5:last-child {
    padding-right: 0;
    padding-left: 6.25rem;
}



/* MOBILE ================================================== */
/* Mobile */
/* Default - this is for all with out appended screen size */
@media only screen and (max-width : 1440px) {	
.ng_1440{
	display:block;
}
	.ng_1440 .gut-1,
	.ng_1440 .gut-2,
	.ng_1440 .gut-3,
	.ng_1440 .gut-4,
	.ng_1440 .gut-5{
		padding:0!important;
	}
	
	.col2,
	.col3,
	.col4,
	.col5,
	.col6,
	.col7,
	.col8,
	.col9,
	.col10,
	
	.col-1-of-10,
	.col-9-of-10,
	.col-2-of-10,
	.col-8-of-10,
	.col-3-of-10,
	.col-7-of-10,
	.col-4-of-10,
	.col-6-of-10,
	.col-5-of-10{
		float:none;
		width:100%;
	}	
}


@media only screen and (max-width : 1366px) {	
.ng_1366{
	display:block;
}
    .ng_1366 .gut-1,
	.ng_1366 .gut-2,
	.ng_1366 .gut-3,
	.ng_1366 .gut-4,
	.ng_1366 .gut-5{
		padding:0!important;
	}	
	.col2,
	.col3,
	.col4,
	.col5,
	.col6,
	.col7,
	.col8,
	.col9,
	.col10,
	
	.col-1-of-10,
	.col-9-of-10,
	.col-2-of-10,
	.col-8-of-10,
	.col-3-of-10,
	.col-7-of-10,
	.col-4-of-10,
	.col-6-of-10,
	.col-5-of-10{
		float:none;
		width:100%;
	}	
}

@media only screen and (max-width : 1024px) {	
.ng_1024{
	display:block;
}
	.ng_1024 .gut-1,
	.ng_1024 .gut-2,
	.ng_1024 .gut-3,
	.ng_1024 .gut-4,
	.ng_1024 .gut-5{
		padding:0!important;
	}
	
	.col2,
	.col3,
	.col4,
	.col5,
	.col6,
	.col7,
	.col8,
	.col9,
	.col10,
	
	.col-1-of-10,
	.col-9-of-10,
	.col-2-of-10,
	.col-8-of-10,
	.col-3-of-10,
	.col-7-of-10,
	.col-4-of-10,
	.col-6-of-10,
	.col-5-of-10{
		float:none;
		width:100%;
	}	
	
}
@media only screen and (max-width : 768px) {
	.ng_768{
	display:block;
}
	.ng_768 .gut-1,
	.ng_768 .gut-2,
	.ng_768 .gut-3,
	.ng_768 .gut-4,
	.ng_768 .gut-5{
		padding:0!important;
	}	
	
}
@media only screen and (max-width : 640px) {
	.ng_640{
	display:block;
}
	.ng_640 .gut-1,
	.ng_640 .gut-2,
	.ng_640 .gut-3,
	.ng_640 .gut-4,
	.ng_640 .gut-5{
		padding:0!important;
	}		
}	
@media only screen and (max-width : 480px) {	
	.ng_480{
	display:block;
}
	.ng_480 .gut-1,
	.ng_480 .gut-2,
	.ng_480 .gut-3,
	.ng_480 .gut-4,
	.ng_480 .gut-5{
		padding:0!important;
	}	
	
	.col2,
	.col3,
	.col4,
	.col5,
	.col6,
	.col7,
	.col8,
	.col9,
	.col10,
	
	.col-1-of-10,
	.col-9-of-10,
	.col-2-of-10,
	.col-8-of-10,
	.col-3-of-10,
	.col-7-of-10,
	.col-4-of-10,
	.col-6-of-10,
	.col-5-of-10{
		float:none;
		width:100%;
	}	
}	
@media only screen and (max-width : 380px) {
	.ng_360{
	display:block;
}
	.ng_360 .gut-1,
	.ng_360 .gut-2,
	.ng_360 .gut-3,
	.ng_360 .gut-4,
	.ng_360 .gut-5{
		padding:0!important;
	}
	
	.col2,
	.col3,
	.col4,
	.col5,
	.col6,
	.col7,
	.col8,
	.col9,
	.col10,
	
	.col-1-of-10,
	.col-9-of-10,
	.col-2-of-10,
	.col-8-of-10,
	.col-3-of-10,
	.col-7-of-10,
	.col-4-of-10,
	.col-6-of-10,
	.col-5-of-10{
		float:none;
		width:100%;
	}	
	
}


@media only screen and (max-width : 320px) {
	.ng_320{
	display:block;
     }
	.ng_320 .gut-1,
	.ng_320 .gut-2,
	.ng_320 .gut-3,
	.ng_320 .gut-4,
	.ng_320 .gut-5{
		padding:0!important;
	}
	.col2,
	.col3,
	.col4,
	.col5,
	.col6,
	.col7,
	.col8,
	.col9,
	.col10,
	
	.col-1-of-10,
	.col-9-of-10,
	.col-2-of-10,
	.col-8-of-10,
	.col-3-of-10,
	.col-7-of-10,
	.col-4-of-10,
	.col-6-of-10,
	.col-5-of-10{
		float:none;
		width:100%;
	}	
	
}