CSS/Responsive Mobile First/CSS Responsive mobile.css at a145c596d56bb8d07f95e87b2086a8fdb9da57c6

Fork: 0
Gatewify / CSS
Find file
Newer
Older
CSS / Responsive Mobile First / CSS Responsive mobile.css
git_skwr on 4 Oct 2019 61 KB Update to responsive elements
Raw Blame History
:root{
	/** Extra Extra small **/
	--xxs-size:320px;
	--xxs-container:300px;
	--xxs-container-margin:0 auto;
	--xxs-gutter:6px;
	--xxs-margin:0 0px;
	--xxs-padding:0 5px;
	--xxs-row-margin:0 -10px;
	/** Extra small **/
	--xs-size:425px;
	--xs-container:405px;
	--xs-container-margin:0 auto;
	--xs-gutter:10px;
	--xs-margin:0 0px;
	--xs-padding:0 5px;
	--xs-row-margin:0 -10px;
	/** small **/
	--sm-size:768px;
	--sm-container:750px;
	--sm-container-margin:0 auto;
	--sm-gutter:20px;
	--sm-margin:0 0px;
	--sm-padding:0 5px;
	--sm-row-margin:0 -10px;
	/** medium **/
	--md-size:992px;
	--md-container:960px;
	--md-container-margin:0 auto;
	--md-gutter:30px;
	--md-margin:0 0px;
	--md-padding:0 5px;
	--md-row-margin:0 -10px;
	/** large **/
	--lg-size:1200px;
	--lg-container:1150px;
	--lg-container-margin:0 auto;
	--lg-gutter:30px;
	--lg-margin:0 0px;
	--lg-padding:0 5px;
	--lg-row-margin:0 -10px;
	/** extra large  **/
	--xl-size:1900px;
	--xl-container:1300px;
	--xl-container-margin:0 auto;
	--xl-gutter:30px;
	--xl-margin:0 0px;
	--xl-padding:0 5px;
	--xl-row-margin:0 -10px;
	/** extra extra large  **/
	--xxl-size:2560px;
	--xxl-container:1500px;
	--xxl-container-margin:0 auto;
	--xxl-gutter:30px;
	--xxl-margin:0 0px;
	--xxl-padding:0 5px;
	--xxl-row-margin:0 -10px;
	--col-01:calc( ( 100% / 12 ) * 01 );
	--col-02:calc( ( 100% / 12 ) * 02 );
	--col-03:calc( ( 100% / 12 ) * 03 );
	--col-04:calc( ( 100% / 12 ) * 04 );
	--col-05:calc( ( 100% / 12 ) * 05 );
	--col-06:calc( ( 100% / 12 ) * 06 );
	--col-07:calc( ( 100% / 12 ) * 07 );
	--col-08:calc( ( 100% / 12 ) * 08 );
	--col-09:calc( ( 100% / 12 ) * 09 );
	--col-10:calc( ( 100% / 12 ) * 10 );
	--col-11:calc( ( 100% / 12 ) * 11 );
	--col-12:calc( ( 100% / 12 ) * 12 );
}
@env {
	/** Extra Extra small **/
	--xxs-size:320px;
	--xxs-container:300px;
	--xxs-container-margin:0 auto;
	--xxs-gutter:30px;
	--xxs-margin:0 0px;
	--xxs-padding:0 5px;
	--xxs-row-margin:0 -10px;
	/** Extra small **/
	--xs-size:425px;
	--xs-container:405px;
	--xs-container-margin:0 auto;
	--xs-gutter:30px;
	--xs-margin:0 0px;
	--xs-padding:0 5px;
	--xs-row-margin:0 -10px;
	/** small **/
	--sm-size:768px;
	--sm-container:750px;
	--sm-container-margin:0 auto;
	--sm-gutter:30px;
	--sm-margin:0 0px;
	--sm-padding:0 5px;
	--sm-row-margin:0 -10px;
	/** medium **/
	--md-size:992px;
	--md-container:960px;
	--md-container-margin:0 auto;
	--md-gutter:30px;
	--md-margin:0 0px;
	--md-padding:0 5px;
	--md-row-margin:0 -10px;
	/** large **/
	--lg-size:1200px;
	--lg-container:1150px;
	--lg-container-margin:0 auto;
	--lg-gutter:30px;
	--lg-margin:0 0px;
	--lg-padding:0 5px;
	--lg-row-margin:0 -10px;
	/** extra large  **/
	--xl-size:1366px;
	--xl-container:1300px;
	--xl-container-margin:0 auto;
	--xl-gutter:30px;
	--xl-margin:0 0px;
	--xl-padding:0 5px;
	--xl-row-margin:0 -10px;
	/** extra extra large  **/
	--xxl-size:1600px;
	--xxl-container:1500px;
	--xxl-container-margin:0 auto;
	--xxl-gutter:30px;
	--xxl-margin:0 0px;
	--xxl-padding:0 5px;
	--xxl-row-margin:0 -10px;
	--col-01:calc( ( 100% / 12 ) * 01 );
	--col-02:calc( ( 100% / 12 ) * 02 );
	--col-03:calc( ( 100% / 12 ) * 03 );
	--col-04:calc( ( 100% / 12 ) * 04 );
	--col-05:calc( ( 100% / 12 ) * 05 );
	--col-06:calc( ( 100% / 12 ) * 06 );
	--col-07:calc( ( 100% / 12 ) * 07 );
	--col-08:calc( ( 100% / 12 ) * 08 );
	--col-09:calc( ( 100% / 12 ) * 09 );
	--col-10:calc( ( 100% / 12 ) * 10 );
	--col-11:calc( ( 100% / 12 ) * 11 );
	--col-12:calc( ( 100% / 12 ) * 12 );
}
.container{
	margin: --xxs-margin;
	width: --xxs-container;
	max-width:100%;
}
.container:after, .container:before{
	clear:both;
}
.row,
[row]{
	width:100%;
	margin:0 calc( - var(--xxs-gutter) / 2 );
}
.row.no-gutter,
.row[no-gutter],
[row][no-gutter],
[row].no-gutter{
	margin:0;
}
.row:after, [row]:after {
    clear: both;
    float: unset;
    content: '';
    display: block;
    width: 100%;
}
/** Columns **/
[class*="col-xxs-"],
[class*="column-xxs-"],
[column*="xxs-"]{
	padding: var(--xxs-padding);
	display: inline-block;
	float: left;
	margin: 0 calc( var(--xxs-gutter) / 2 ) 0 calc( var(--xxs-gutter) / 2 );
    box-sizing: border-box;
}
[class*="col-xxs-"].no-gutter,
[class*="column-xxs-"].no-gutter,
[column*="xxs-"].no-gutter,
[class*="col-xxs-"][no-gutter],
[class*="column-xxs-"][no-gutter],
[column*="xxs-"][no-gutter]{
	margin: 0;
}
[class*="col-xxs-"].no-padding,
[class*="column-xxs-"].no-padding,
[column*="xxs-"].no-padding,
[class*="col-xxs-"][no-padding],
[class*="column-xxs-"][no-padding],
[column*="xxs-"][no-padding]{
	padding: initial;
}
.col-xxs-1, .col-xxs-01, .column-xxs-1, .column-xxs-01, [column*="xxs-1"], [column*="xxs-01"]{
	width: calc( var(--col-01) - var(--xxs-gutter) );
}
.col-xxs-1.no-gutter, .col-xxs-01.no-gutter, .column-xxs-1.no-gutter, .column-xxs-01.no-gutter, [column*="xxs-1"].no-gutter, [column*="xxs-01"].no-gutter,
.col-xxs-1[no-gutter], .col-xxs-01[no-gutter], .column-xxs-1[no-gutter], .column-xxs-01[no-gutter], [column*="xxs-1"][no-gutter], [column*="xxs-01"][no-gutter]{
	width: var(--col-01);
}
.col-xxs-2, .col-xxs-02, .column-xxs-2, .column-xxs-02, [column*="xxs-2"], [column*="xxs-02"]{
	width: calc( var(--col-02) - var(--xxs-gutter) );
}
.col-xxs-2.no-gutter, .col-xxs-02.no-gutter, .column-xxs-2.no-gutter, .column-xxs-02.no-gutter, [column*="xxs-2"].no-gutter, [column*="xxs-02"].no-gutter,
.col-xxs-2[no-gutter], .col-xxs-02[no-gutter], .column-xxs-2[no-gutter], .column-xxs-02[no-gutter], [column*="xxs-2"][no-gutter], [column*="xxs-02"][no-gutter]{
	width: var(--col-02);
}
.col-xxs-3, .col-xxs-03, .column-xxs-3, .column-xxs-03, [column*="xxs-3"], [column*="xxs-03"]{
	width: calc( var(--col-03) - var(--xxs-gutter) );
}
.col-xxs-3.no-gutter, .col-xxs-03.no-gutter, .column-xxs-3.no-gutter, .column-xxs-03.no-gutter, [column*="xxs-3"].no-gutter, [column*="xxs-03"].no-gutter,
.col-xxs-3[no-gutter], .col-xxs-03[no-gutter], .column-xxs-3[no-gutter], .column-xxs-03[no-gutter], [column*="xxs-3"][no-gutter], [column*="xxs-03"][no-gutter]{
	width: var(--col-03);
}
.col-xxs-4, .col-xxs-04, .column-xxs-4, .column-xxs-04, [column*="xxs-4"], [column*="xxs-04"]{
	width: calc( var(--col-04) - var(--xxs-gutter) );
}
.col-xxs-4.no-gutter, .col-xxs-04.no-gutter, .column-xxs-4.no-gutter, .column-xxs-04.no-gutter, [column*="xxs-4"].no-gutter, [column*="xxs-04"].no-gutter,
.col-xxs-4[no-gutter], .col-xxs-04[no-gutter], .column-xxs-4[no-gutter], .column-xxs-04[no-gutter], [column*="xxs-4"][no-gutter], [column*="xxs-04"][no-gutter]{
	width: var(--col-04);
}
.col-xxs-5, .col-xxs-05, .column-xxs-5, .column-xxs-05, [column*="xxs-5"], [column*="xxs-05"]{
	width: calc( var(--col-05) - var(--xxs-gutter) );
}
.col-xxs-5.no-gutter, .col-xxs-05.no-gutter, .column-xxs-5.no-gutter, .column-xxs-05.no-gutter, [column*="xxs-5"].no-gutter, [column*="xxs-05"].no-gutter,
.col-xxs-5[no-gutter], .col-xxs-05[no-gutter], .column-xxs-5[no-gutter], .column-xxs-05[no-gutter], [column*="xxs-5"][no-gutter], [column*="xxs-05"][no-gutter]{
	width: var(--col-05);
}
.col-xxs-6, .col-xxs-06, .column-xxs-6, .column-xxs-06, [column*="xxs-6"], [column*="xxs-06"]{
	width: calc( var(--col-06) - var(--xxs-gutter) );
}
.col-xxs-6.no-gutter, .col-xxs-06.no-gutter, .column-xxs-6.no-gutter, .column-xxs-06.no-gutter, [column*="xxs-6"].no-gutter, [column*="xxs-06"].no-gutter,
.col-xxs-6[no-gutter], .col-xxs-06[no-gutter], .column-xxs-6[no-gutter], .column-xxs-06[no-gutter], [column*="xxs-6"][no-gutter], [column*="xxs-06"][no-gutter]{
	width: var(--col-06);
}
.col-xxs-7, .col-xxs-07, .column-xxs-7, .column-xxs-07, [column*="xxs-7"], [column*="xxs-07"]{
	width: calc( var(--col-07) - var(--xxs-gutter) );
}
.col-xxs-7.no-gutter, .col-xxs-07.no-gutter, .column-xxs-7.no-gutter, .column-xxs-07.no-gutter, [column*="xxs-7"].no-gutter, [column*="xxs-07"].no-gutter,
.col-xxs-7[no-gutter], .col-xxs-07[no-gutter], .column-xxs-7[no-gutter], .column-xxs-07[no-gutter], [column*="xxs-7"][no-gutter], [column*="xxs-07"][no-gutter]{
	width: var(--col-07);
}
.col-xxs-8, .col-xxs-08, .column-xxs-8, .column-xxs-08, [column*="xxs-8"], [column*="xxs-08"]{
	width: calc( var(--col-08) - var(--xxs-gutter) );
}
.col-xxs-8.no-gutter, .col-xxs-08.no-gutter, .column-xxs-8.no-gutter, .column-xxs-08.no-gutter, [column*="xxs-8"].no-gutter, [column*="xxs-08"].no-gutter,
.col-xxs-8[no-gutter], .col-xxs-08[no-gutter], .column-xxs-8[no-gutter], .column-xxs-08[no-gutter], [column*="xxs-8"][no-gutter], [column*="xxs-08"][no-gutter]{
	width: var(--col-08);
}
.col-xxs-9, .col-xxs-09, .column-xxs-9, .column-xxs-09, [column*="xxs-9"], [column*="xxs-09"]{
	width: calc( var(--col-09) - var(--xxs-gutter) );
}
.col-xxs-9.no-gutter, .col-xxs-09.no-gutter, .column-xxs-9.no-gutter, .column-xxs-09.no-gutter, [column*="xxs-9"].no-gutter, [column*="xxs-09"].no-gutter,
.col-xxs-9[no-gutter], .col-xxs-09[no-gutter], .column-xxs-9[no-gutter], .column-xxs-09[no-gutter], [column*="xxs-9"][no-gutter], [column*="xxs-09"][no-gutter]{
	width: var(--col-09);
}
.col-xxs-10, .column-xxs-10, [column*="xxs-10"]{
	width: calc( var(--col-10) - var(--xxs-gutter) );
}
.col-xxs-10.no-gutter, .column-xxs-10.no-gutter, [column*="xxs-10"].no-gutter, 
.col-xxs-10[no-gutter], .column-xxs-10[no-gutter], [column*="xxs-10"][no-gutter]{
	width: var(--col-12);
}
.col-xxs-11, .column-xxs-11, [column*="xxs-11"]{
	width: calc( var(--col-11) - var(--xxs-gutter) );
}
.col-xxs-11.no-gutter, .column-xxs-11.no-gutter, [column*="xxs-11"].no-gutter, 
.col-xxs-11[no-gutter], .column-xxs-11[no-gutter], [column*="xxs-11"][no-gutter]{
	width: var(--col-11);
}
.col-xxs-12, .column-xxs-12, [column*="xxs-12"]{
	width: calc( var(--col-12) - var(--xxs-gutter) );
}
.col-xxs-12.no-gutter, .column-xxs-12.no-gutter, [column*="xxs-12"].no-gutter, 
.col-xxs-12[no-gutter], .column-xxs-12[no-gutter], [column*="xxs-12"][no-gutter]{
	width: var(--col-12);
}
/** offset **/
.col-off-xxs-00, .column-off-xxs-00, .col-offset-xxs-00, .column-offset-xxs-00, [offset*="xxs-00"],
.col-off-xxs-0, .column-off-xxs-0, .col-offset-xxs-0, .column-offset-xxs-0, [offset*="xxs-0"]{
	margin:0 0px;
}
.col-off-xxs-01, .column-off-xxs-01, .col-offset-xxs-01, .column-offset-xxs-01, [offset*="xxs-01"],
.col-off-xxs-1, .column-off-xxs-1, .col-offset-xxs-1, .column-offset-xxs-1, [offset*="xxs-1"]{
	margin:0 0 0 var(--col-01);
}
.col-off-xxs-02, .column-off-xxs-02, .col-offset-xxs-02, .column-offset-xxs-02, [offset*="xxs-02"],
.col-off-xxs-2, .column-off-xxs-2, .col-offset-xxs-2, .column-offset-xxs-2, [offset*="xxs-2"]{
	margin:0 0 0 var(--col-02);
}
.col-off-xxs-03, .column-off-xxs-03, .col-offset-xxs-03, .column-offset-xxs-03, [offset*="xxs-03"],
.col-off-xxs-3, .column-off-xxs-3, .col-offset-xxs-3, .column-offset-xxs-3, [offset*="xxs-3"]{
	margin:0 0 0 var(--col-03);
}
.col-off-xxs-04, .column-off-xxs-04, .col-offset-xxs-04, .column-offset-xxs-04, [offset*="xxs-04"],
.col-off-xxs-4, .column-off-xxs-4, .col-offset-xxs-4, .column-offset-xxs-4, [offset*="xxs-4"]{
	margin:0 0 0 var(--col-04);
}
.col-off-xxs-05, .column-off-xxs-05, .col-offset-xxs-05, .column-offset-xxs-05, [offset*="xxs-05"],
.col-off-xxs-5, .column-off-xxs-5, .col-offset-xxs-5, .column-offset-xxs-5, [offset*="xxs-5"]{
	margin:0 0 0 var(--col-05);
}
.col-off-xxs-06, .column-off-xxs-06, .col-offset-xxs-06, .column-offset-xxs-06, [offset*="xxs-06"],
.col-off-xxs-6, .column-off-xxs-6, .col-offset-xxs-6, .column-offset-xxs-6, [offset*="xxs-6"]{
	margin:0 0 0 var(--col-06);
}
.col-off-xxs-07, .column-off-xxs-07, .col-offset-xxs-07, .column-offset-xxs-07, [offset*="xxs-07"],
.col-off-xxs-7, .column-off-xxs-7, .col-offset-xxs-7, .column-offset-xxs-7, [offset*="xxs-7"]{
	margin:0 0 0 var(--col-07);
}
.col-off-xxs-08, .column-off-xxs-08, .col-offset-xxs-08, .column-offset-xxs-08, [offset*="xxs-08"],
.col-off-xxs-8, .column-off-xxs-8, .col-offset-xxs-8, .column-offset-xxs-8, [offset*="xxs-8"]{
	margin:0 0 0 var(--col-08);
}
.col-off-xxs-09, .column-off-xxs-09, .col-offset-xxs-09, .column-offset-xxs-09, [offset*="xxs-09"],
.col-off-xxs-9, .column-off-xxs-9, .col-offset-xxs-9, .column-offset-xxs-9, [offset*="xxs-9"]{
	margin:0 0 0 var(--col-09);
}
.col-off-xxs-10, .column-off-xxs-10, .col-offset-xxs-10, .column-offset-xxs-10, [offset*="xxs-10"]{
	margin:0 0 0 var(--col-10);
}
.col-off-xxs-11, .column-off-xxs-11, .col-offset-xxs-11, .column-offset-xxs-11, [offset*="xxs-11"]{
	margin:0 0 0 var(--col-11);
}
.col-off-xxs-12, .column-off-xxs-12, .col-offset-xxs-12, .column-offset-xxs-12, [offset*="xxs-12"]{
	margin:0 0 0 var(--col-12);
}
@media (min-width:320px){
	[class*="col-xs-"],
	[class*="column-xs-"],
	[column*="xs-"]{
		padding: var(--xs-padding);
		display: inline-block;
		float: left;
		margin: 0 calc( var(--xs-gutter) / 2 ) 0 calc( var(--xs-gutter) / 2 );
	}
	[class*="col-xs-"].no-gutter,
	[class*="column-xs-"].no-gutter,
	[column*="xs-"].no-gutter,
	[class*="col-xs-"][no-gutter],
	[class*="column-xs-"][no-gutter],
	[column*="xs-"][no-gutter]{
		margin: 0;
	}
	[class*="col-xs-"].no-padding,
	[class*="column-xs-"].no-padding,
	[column*="xs-"].no-padding,
	[class*="col-xs-"][no-padding],
	[class*="column-xs-"][no-padding],
	[column*="xs-"][no-padding]{
		padding: initial;
	}
	.col-xs-1, .col-xs-01, .column-xs-1, .column-xs-01, [column*="xs-1"], [column*="xs-01"]{
		width: calc( var(--col-01) - var(--xs-gutter) );
	}
	.col-xs-1.no-gutter, .col-xs-01.no-gutter, .column-xs-1.no-gutter, .column-xs-01.no-gutter, [column*="xs-1"].no-gutter, [column*="xs-01"].no-gutter,
	.col-xs-1[no-gutter], .col-xs-01[no-gutter], .column-xs-1[no-gutter], .column-xs-01[no-gutter], [column*="xs-1"][no-gutter], [column*="xs-01"][no-gutter]{
		width: var(--col-01);
	}
	.col-xs-2, .col-xs-02, .column-xs-2, .column-xs-02, [column*="xs-2"], [column*="xs-02"]{
		width: calc( var(--col-02) - var(--xs-gutter) );
	}
	.col-xs-2.no-gutter, .col-xs-02.no-gutter, .column-xs-2.no-gutter, .column-xs-02.no-gutter, [column*="xs-2"].no-gutter, [column*="xs-02"].no-gutter,
	.col-xs-2[no-gutter], .col-xs-02[no-gutter], .column-xs-2[no-gutter], .column-xs-02[no-gutter], [column*="xs-2"][no-gutter], [column*="xs-02"][no-gutter]{
		width: var(--col-02);
	}
	.col-xs-3, .col-xs-03, .column-xs-3, .column-xs-03, [column*="xs-3"], [column*="xs-03"]{
		width: calc( var(--col-03) - var(--xs-gutter) );
	}
	.col-xs-3.no-gutter, .col-xs-03.no-gutter, .column-xs-3.no-gutter, .column-xs-03.no-gutter, [column*="xs-3"].no-gutter, [column*="xs-03"].no-gutter,
	.col-xs-3[no-gutter], .col-xs-03[no-gutter], .column-xs-3[no-gutter], .column-xs-03[no-gutter], [column*="xs-3"][no-gutter], [column*="xs-03"][no-gutter]{
		width: var(--col-03);
	}
	.col-xs-4, .col-xs-04, .column-xs-4, .column-xs-04, [column*="xs-4"], [column*="xs-04"]{
		width: calc( var(--col-04) - var(--xs-gutter) );
	}
	.col-xs-4.no-gutter, .col-xs-04.no-gutter, .column-xs-4.no-gutter, .column-xs-04.no-gutter, [column*="xs-4"].no-gutter, [column*="xs-04"].no-gutter,
	.col-xs-4[no-gutter], .col-xs-04[no-gutter], .column-xs-4[no-gutter], .column-xs-04[no-gutter], [column*="xs-4"][no-gutter], [column*="xs-04"][no-gutter]{
		width: var(--col-04);
	}
	.col-xs-5, .col-xs-05, .column-xs-5, .column-xs-05, [column*="xs-5"], [column*="xs-05"]{
		width: calc( var(--col-05) - var(--xs-gutter) );
	}
	.col-xs-5.no-gutter, .col-xs-05.no-gutter, .column-xs-5.no-gutter, .column-xs-05.no-gutter, [column*="xs-5"].no-gutter, [column*="xs-05"].no-gutter,
	.col-xs-5[no-gutter], .col-xs-05[no-gutter], .column-xs-5[no-gutter], .column-xs-05[no-gutter], [column*="xs-5"][no-gutter], [column*="xs-05"][no-gutter]{
		width: var(--col-05);
	}
	.col-xs-6, .col-xs-06, .column-xs-6, .column-xs-06, [column*="xs-6"], [column*="xs-06"]{
		width: calc( var(--col-06) - var(--xs-gutter) );
	}
	.col-xs-6.no-gutter, .col-xs-06.no-gutter, .column-xs-6.no-gutter, .column-xs-06.no-gutter, [column*="xs-6"].no-gutter, [column*="xs-06"].no-gutter,
	.col-xs-6[no-gutter], .col-xs-06[no-gutter], .column-xs-6[no-gutter], .column-xs-06[no-gutter], [column*="xs-6"][no-gutter], [column*="xs-06"][no-gutter]{
		width: var(--col-06);
	}
	.col-xs-7, .col-xs-07, .column-xs-7, .column-xs-07, [column*="xs-7"], [column*="xs-07"]{
		width: calc( var(--col-07) - var(--xs-gutter) );
	}
	.col-xs-7.no-gutter, .col-xs-07.no-gutter, .column-xs-7.no-gutter, .column-xs-07.no-gutter, [column*="xs-7"].no-gutter, [column*="xs-07"].no-gutter,
	.col-xs-7[no-gutter], .col-xs-07[no-gutter], .column-xs-7[no-gutter], .column-xs-07[no-gutter], [column*="xs-7"][no-gutter], [column*="xs-07"][no-gutter]{
		width: var(--col-07);
	}
	.col-xs-8, .col-xs-08, .column-xs-8, .column-xs-08, [column*="xs-8"], [column*="xs-08"]{
		width: calc( var(--col-08) - var(--xs-gutter) );
	}
	.col-xs-8.no-gutter, .col-xs-08.no-gutter, .column-xs-8.no-gutter, .column-xs-08.no-gutter, [column*="xs-8"].no-gutter, [column*="xs-08"].no-gutter,
	.col-xs-8[no-gutter], .col-xs-08[no-gutter], .column-xs-8[no-gutter], .column-xs-08[no-gutter], [column*="xs-8"][no-gutter], [column*="xs-08"][no-gutter]{
		width: var(--col-08);
	}
	.col-xs-9, .col-xs-09, .column-xs-9, .column-xs-09, [column*="xs-9"], [column*="xs-09"]{
		width: calc( var(--col-09) - var(--xs-gutter) );
	}
	.col-xs-9.no-gutter, .col-xs-09.no-gutter, .column-xs-9.no-gutter, .column-xs-09.no-gutter, [column*="xs-9"].no-gutter, [column*="xs-09"].no-gutter,
	.col-xs-9[no-gutter], .col-xs-09[no-gutter], .column-xs-9[no-gutter], .column-xs-09[no-gutter], [column*="xs-9"][no-gutter], [column*="xs-09"][no-gutter]{
		width: var(--col-09);
	}
	.col-xs-10, .column-xs-10, [column*="xs-10"]{
		width: calc( var(--col-10) - var(--xs-gutter) );
	}
	.col-xs-10.no-gutter, .column-xs-10.no-gutter, [column*="xs-10"].no-gutter, 
	.col-xs-10[no-gutter], .column-xs-10[no-gutter], [column*="xs-10"][no-gutter]{
		width: var(--col-12);
	}
	.col-xs-11, .column-xs-11, [column*="xs-11"]{
		width: calc( var(--col-11) - var(--xs-gutter) );
	}
	.col-xs-11.no-gutter, .column-xs-11.no-gutter, [column*="xs-11"].no-gutter, 
	.col-xs-11[no-gutter], .column-xs-11[no-gutter], [column*="xs-11"][no-gutter]{
		width: var(--col-11);
	}
	.col-xs-12, .column-xs-12, [column*="xs-12"]{
		width: calc( var(--col-12) - var(--xs-gutter) );
	}
	.col-xs-12.no-gutter, .column-xs-12.no-gutter, [column*="xs-12"].no-gutter, 
	.col-xs-12[no-gutter], .column-xs-12[no-gutter], [column*="xs-12"][no-gutter]{
		width: var(--col-12);
	}
	/** offset **/
	.col-off-xs-00, .column-off-xs-00, .col-offset-xs-00, .column-offset-xs-00, [offset*="xs-00"],
	.col-off-xs-0, .column-off-xs-0, .col-offset-xs-0, .column-offset-xs-0, [offset*="xs-0"]{
		margin:0 0px;
	}
	.col-off-xs-01, .column-off-xs-01, .col-offset-xs-01, .column-offset-xs-01, [offset*="xs-01"],
	.col-off-xs-1, .column-off-xs-1, .col-offset-xs-1, .column-offset-xs-1, [offset*="xs-1"]{
		margin:0 0 0 var(--col-01);
	}
	.col-off-xs-02, .column-off-xs-02, .col-offset-xs-02, .column-offset-xs-02, [offset*="xs-02"],
	.col-off-xs-2, .column-off-xs-2, .col-offset-xs-2, .column-offset-xs-2, [offset*="xs-2"]{
		margin:0 0 0 var(--col-02);
	}
	.col-off-xs-03, .column-off-xs-03, .col-offset-xs-03, .column-offset-xs-03, [offset*="xs-03"],
	.col-off-xs-3, .column-off-xs-3, .col-offset-xs-3, .column-offset-xs-3, [offset*="xs-3"]{
		margin:0 0 0 var(--col-03);
	}
	.col-off-xs-04, .column-off-xs-04, .col-offset-xs-04, .column-offset-xs-04, [offset*="xs-04"],
	.col-off-xs-4, .column-off-xs-4, .col-offset-xs-4, .column-offset-xs-4, [offset*="xs-4"]{
		margin:0 0 0 var(--col-04);
	}
	.col-off-xs-05, .column-off-xs-05, .col-offset-xs-05, .column-offset-xs-05, [offset*="xs-05"],
	.col-off-xs-5, .column-off-xs-5, .col-offset-xs-5, .column-offset-xs-5, [offset*="xs-5"]{
		margin:0 0 0 var(--col-05);
	}
	.col-off-xs-06, .column-off-xs-06, .col-offset-xs-06, .column-offset-xs-06, [offset*="xs-06"],
	.col-off-xs-6, .column-off-xs-6, .col-offset-xs-6, .column-offset-xs-6, [offset*="xs-6"]{
		margin:0 0 0 var(--col-06);
	}
	.col-off-xs-07, .column-off-xs-07, .col-offset-xs-07, .column-offset-xs-07, [offset*="xs-07"],
	.col-off-xs-7, .column-off-xs-7, .col-offset-xs-7, .column-offset-xs-7, [offset*="xs-7"]{
		margin:0 0 0 var(--col-07);
	}
	.col-off-xs-08, .column-off-xs-08, .col-offset-xs-08, .column-offset-xs-08, [offset*="xs-08"],
	.col-off-xs-8, .column-off-xs-8, .col-offset-xs-8, .column-offset-xs-8, [offset*="xs-8"]{
		margin:0 0 0 var(--col-08);
	}
	.col-off-xs-09, .column-off-xs-09, .col-offset-xs-09, .column-offset-xs-09, [offset*="xs-09"],
	.col-off-xs-9, .column-off-xs-9, .col-offset-xs-9, .column-offset-xs-9, [offset*="xs-9"]{
		margin:0 0 0 var(--col-09);
	}
	.col-off-xs-10, .column-off-xs-10, .col-offset-xs-10, .column-offset-xs-10, [offset*="xs-10"]{
		margin:0 0 0 var(--col-10);
	}
	.col-off-xs-11, .column-off-xs-11, .col-offset-xs-11, .column-offset-xs-11, [offset*="xs-11"]{
		margin:0 0 0 var(--col-11);
	}
	.col-off-xs-12, .column-off-xs-12, .col-offset-xs-12, .column-offset-xs-12, [offset*="xs-12"]{
		margin:0 0 0 var(--col-12);
	}
}
/** 425px **/
@media (min-width:425px){
	[class*="col-sm-"],
	[class*="column-sm-"],
	[column*="sm-"]{
		padding: var(--sm-padding);
		display: inline-block;
		float: left;
		margin: 0 calc( var(--sm-gutter) / 2 ) 0 calc( var(--sm-gutter) / 2 );
	}
	[class*="col-sm-"].no-gutter,
	[class*="column-sm-"].no-gutter,
	[column*="sm-"].no-gutter,
	[class*="col-sm-"][no-gutter],
	[class*="column-sm-"][no-gutter],
	[column*="sm-"][no-gutter]{
		margin: 0;
	}
	[class*="col-sm-"].no-padding,
	[class*="column-sm-"].no-padding,
	[column*="sm-"].no-padding,
	[class*="col-sm-"][no-padding],
	[class*="column-sm-"][no-padding],
	[column*="sm-"][no-padding]{
		padding: initial;
	}
	.col-sm-1, .col-sm-01, .column-sm-1, .column-sm-01, [column*="sm-1"], [column*="sm-01"]{
		width: calc( var(--col-01) - var(--sm-gutter) );
	}
	.col-sm-1.no-gutter, .col-sm-01.no-gutter, .column-sm-1.no-gutter, .column-sm-01.no-gutter, [column*="sm-1"].no-gutter, [column*="sm-01"].no-gutter,
	.col-sm-1[no-gutter], .col-sm-01[no-gutter], .column-sm-1[no-gutter], .column-sm-01[no-gutter], [column*="sm-1"][no-gutter], [column*="sm-01"][no-gutter]{
		width: var(--col-01);
	}
	.col-sm-2, .col-sm-02, .column-sm-2, .column-sm-02, [column*="sm-2"], [column*="sm-02"]{
		width: calc( var(--col-02) - var(--sm-gutter) );
	}
	.col-sm-2.no-gutter, .col-sm-02.no-gutter, .column-sm-2.no-gutter, .column-sm-02.no-gutter, [column*="sm-2"].no-gutter, [column*="sm-02"].no-gutter,
	.col-sm-2[no-gutter], .col-sm-02[no-gutter], .column-sm-2[no-gutter], .column-sm-02[no-gutter], [column*="sm-2"][no-gutter], [column*="sm-02"][no-gutter]{
		width: var(--col-02);
	}
	.col-sm-3, .col-sm-03, .column-sm-3, .column-sm-03, [column*="sm-3"], [column*="sm-03"]{
		width: calc( var(--col-03) - var(--sm-gutter) );
	}
	.col-sm-3.no-gutter, .col-sm-03.no-gutter, .column-sm-3.no-gutter, .column-sm-03.no-gutter, [column*="sm-3"].no-gutter, [column*="sm-03"].no-gutter,
	.col-sm-3[no-gutter], .col-sm-03[no-gutter], .column-sm-3[no-gutter], .column-sm-03[no-gutter], [column*="sm-3"][no-gutter], [column*="sm-03"][no-gutter]{
		width: var(--col-03);
	}
	.col-sm-4, .col-sm-04, .column-sm-4, .column-sm-04, [column*="sm-4"], [column*="sm-04"]{
		width: calc( var(--col-04) - var(--sm-gutter) );
	}
	.col-sm-4.no-gutter, .col-sm-04.no-gutter, .column-sm-4.no-gutter, .column-sm-04.no-gutter, [column*="sm-4"].no-gutter, [column*="sm-04"].no-gutter,
	.col-sm-4[no-gutter], .col-sm-04[no-gutter], .column-sm-4[no-gutter], .column-sm-04[no-gutter], [column*="sm-4"][no-gutter], [column*="sm-04"][no-gutter]{
		width: var(--col-04);
	}
	.col-sm-5, .col-sm-05, .column-sm-5, .column-sm-05, [column*="sm-5"], [column*="sm-05"]{
		width: calc( var(--col-05) - var(--sm-gutter) );
	}
	.col-sm-5.no-gutter, .col-sm-05.no-gutter, .column-sm-5.no-gutter, .column-sm-05.no-gutter, [column*="sm-5"].no-gutter, [column*="sm-05"].no-gutter,
	.col-sm-5[no-gutter], .col-sm-05[no-gutter], .column-sm-5[no-gutter], .column-sm-05[no-gutter], [column*="sm-5"][no-gutter], [column*="sm-05"][no-gutter]{
		width: var(--col-05);
	}
	.col-sm-6, .col-sm-06, .column-sm-6, .column-sm-06, [column*="sm-6"], [column*="sm-06"]{
		width: calc( var(--col-06) - var(--sm-gutter) );
	}
	.col-sm-6.no-gutter, .col-sm-06.no-gutter, .column-sm-6.no-gutter, .column-sm-06.no-gutter, [column*="sm-6"].no-gutter, [column*="sm-06"].no-gutter,
	.col-sm-6[no-gutter], .col-sm-06[no-gutter], .column-sm-6[no-gutter], .column-sm-06[no-gutter], [column*="sm-6"][no-gutter], [column*="sm-06"][no-gutter]{
		width: var(--col-06);
	}
	.col-sm-7, .col-sm-07, .column-sm-7, .column-sm-07, [column*="sm-7"], [column*="sm-07"]{
		width: calc( var(--col-07) - var(--sm-gutter) );
	}
	.col-sm-7.no-gutter, .col-sm-07.no-gutter, .column-sm-7.no-gutter, .column-sm-07.no-gutter, [column*="sm-7"].no-gutter, [column*="sm-07"].no-gutter,
	.col-sm-7[no-gutter], .col-sm-07[no-gutter], .column-sm-7[no-gutter], .column-sm-07[no-gutter], [column*="sm-7"][no-gutter], [column*="sm-07"][no-gutter]{
		width: var(--col-07);
	}
	.col-sm-8, .col-sm-08, .column-sm-8, .column-sm-08, [column*="sm-8"], [column*="sm-08"]{
		width: calc( var(--col-08) - var(--sm-gutter) );
	}
	.col-sm-8.no-gutter, .col-sm-08.no-gutter, .column-sm-8.no-gutter, .column-sm-08.no-gutter, [column*="sm-8"].no-gutter, [column*="sm-08"].no-gutter,
	.col-sm-8[no-gutter], .col-sm-08[no-gutter], .column-sm-8[no-gutter], .column-sm-08[no-gutter], [column*="sm-8"][no-gutter], [column*="sm-08"][no-gutter]{
		width: var(--col-08);
	}
	.col-sm-9, .col-sm-09, .column-sm-9, .column-sm-09, [column*="sm-9"], [column*="sm-09"]{
		width: calc( var(--col-09) - var(--sm-gutter) );
	}
	.col-sm-9.no-gutter, .col-sm-09.no-gutter, .column-sm-9.no-gutter, .column-sm-09.no-gutter, [column*="sm-9"].no-gutter, [column*="sm-09"].no-gutter,
	.col-sm-9[no-gutter], .col-sm-09[no-gutter], .column-sm-9[no-gutter], .column-sm-09[no-gutter], [column*="sm-9"][no-gutter], [column*="sm-09"][no-gutter]{
		width: var(--col-09);
	}
	.col-sm-10, .column-sm-10, [column*="sm-10"]{
		width: calc( var(--col-10) - var(--sm-gutter) );
	}
	.col-sm-10.no-gutter, .column-sm-10.no-gutter, [column*="sm-10"].no-gutter, 
	.col-sm-10[no-gutter], .column-sm-10[no-gutter], [column*="sm-10"][no-gutter]{
		width: var(--col-12);
	}
	.col-sm-11, .column-sm-11, [column*="sm-11"]{
		width: calc( var(--col-11) - var(--sm-gutter) );
	}
	.col-sm-11.no-gutter, .column-sm-11.no-gutter, [column*="sm-11"].no-gutter, 
	.col-sm-11[no-gutter], .column-sm-11[no-gutter], [column*="sm-11"][no-gutter]{
		width: var(--col-11);
	}
	.col-sm-12, .column-sm-12, [column*="sm-12"]{
		width: calc( var(--col-12) - var(--sm-gutter) );
	}
	.col-sm-12.no-gutter, .column-sm-12.no-gutter, [column*="sm-12"].no-gutter, 
	.col-sm-12[no-gutter], .column-sm-12[no-gutter], [column*="sm-12"][no-gutter]{
		width: var(--col-12);
	}
	/** offset **/
	.col-off-sm-00, .column-off-sm-00, .col-offset-sm-00, .column-offset-sm-00, [offset*="sm-00"],
	.col-off-sm-0, .column-off-sm-0, .col-offset-sm-0, .column-offset-sm-0, [offset*="sm-0"]{
		margin:0 0px;
	}
	.col-off-sm-01, .column-off-sm-01, .col-offset-sm-01, .column-offset-sm-01, [offset*="sm-01"],
	.col-off-sm-1, .column-off-sm-1, .col-offset-sm-1, .column-offset-sm-1, [offset*="sm-1"]{
		margin:0 0 0 var(--col-01);
	}
	.col-off-sm-02, .column-off-sm-02, .col-offset-sm-02, .column-offset-sm-02, [offset*="sm-02"],
	.col-off-sm-2, .column-off-sm-2, .col-offset-sm-2, .column-offset-sm-2, [offset*="sm-2"]{
		margin:0 0 0 var(--col-02);
	}
	.col-off-sm-03, .column-off-sm-03, .col-offset-sm-03, .column-offset-sm-03, [offset*="sm-03"],
	.col-off-sm-3, .column-off-sm-3, .col-offset-sm-3, .column-offset-sm-3, [offset*="sm-3"]{
		margin:0 0 0 var(--col-03);
	}
	.col-off-sm-04, .column-off-sm-04, .col-offset-sm-04, .column-offset-sm-04, [offset*="sm-04"],
	.col-off-sm-4, .column-off-sm-4, .col-offset-sm-4, .column-offset-sm-4, [offset*="sm-4"]{
		margin:0 0 0 var(--col-04);
	}
	.col-off-sm-05, .column-off-sm-05, .col-offset-sm-05, .column-offset-sm-05, [offset*="sm-05"],
	.col-off-sm-5, .column-off-sm-5, .col-offset-sm-5, .column-offset-sm-5, [offset*="sm-5"]{
		margin:0 0 0 var(--col-05);
	}
	.col-off-sm-06, .column-off-sm-06, .col-offset-sm-06, .column-offset-sm-06, [offset*="sm-06"],
	.col-off-sm-6, .column-off-sm-6, .col-offset-sm-6, .column-offset-sm-6, [offset*="sm-6"]{
		margin:0 0 0 var(--col-06);
	}
	.col-off-sm-07, .column-off-sm-07, .col-offset-sm-07, .column-offset-sm-07, [offset*="sm-07"],
	.col-off-sm-7, .column-off-sm-7, .col-offset-sm-7, .column-offset-sm-7, [offset*="sm-7"]{
		margin:0 0 0 var(--col-07);
	}
	.col-off-sm-08, .column-off-sm-08, .col-offset-sm-08, .column-offset-sm-08, [offset*="sm-08"],
	.col-off-sm-8, .column-off-sm-8, .col-offset-sm-8, .column-offset-sm-8, [offset*="sm-8"]{
		margin:0 0 0 var(--col-08);
	}
	.col-off-sm-09, .column-off-sm-09, .col-offset-sm-09, .column-offset-sm-09, [offset*="sm-09"],
	.col-off-sm-9, .column-off-sm-9, .col-offset-sm-9, .column-offset-sm-9, [offset*="sm-9"]{
		margin:0 0 0 var(--col-09);
	}
	.col-off-sm-10, .column-off-sm-10, .col-offset-sm-10, .column-offset-sm-10, [offset*="sm-10"]{
		margin:0 0 0 var(--col-10);
	}
	.col-off-sm-11, .column-off-sm-11, .col-offset-sm-11, .column-offset-sm-11, [offset*="sm-11"]{
		margin:0 0 0 var(--col-11);
	}
	.col-off-sm-12, .column-off-sm-12, .col-offset-sm-12, .column-offset-sm-12, [offset*="sm-12"]{
		margin:0 0 0 var(--col-12);
	}
}
/** 768px **/

@media (min-width:768px){
	[class*="col-md-"],
	[class*="column-md-"],
	[column*="md-"]{
		padding: var(--md-padding);
		display: inline-block;
		float: left;
		margin: 0 calc( var(--md-gutter) / 2 ) 0 calc( var(--md-gutter) / 2 );
	}
	[class*="col-md-"].no-gutter,
	[class*="column-md-"].no-gutter,
	[column*="md-"].no-gutter,
	[class*="col-md-"][no-gutter],
	[class*="column-md-"][no-gutter],
	[column*="md-"][no-gutter]{
		margin: 0;
	}
	[class*="col-md-"].no-padding,
	[class*="column-md-"].no-padding,
	[column*="md-"].no-padding,
	[class*="col-md-"][no-padding],
	[class*="column-md-"][no-padding],
	[column*="md-"][no-padding]{
		padding: initial;
	}
	.col-md-1, .col-md-01, .column-md-1, .column-md-01, [column*="md-1"], [column*="md-01"]{
		width: calc( var(--col-01) - var(--md-gutter) );
	}
	.col-md-1.no-gutter, .col-md-01.no-gutter, .column-md-1.no-gutter, .column-md-01.no-gutter, [column*="md-1"].no-gutter, [column*="md-01"].no-gutter,
	.col-md-1[no-gutter], .col-md-01[no-gutter], .column-md-1[no-gutter], .column-md-01[no-gutter], [column*="md-1"][no-gutter], [column*="md-01"][no-gutter]{
		width: var(--col-01);
	}
	.col-md-2, .col-md-02, .column-md-2, .column-md-02, [column*="md-2"], [column*="md-02"]{
		width: calc( var(--col-02) - var(--md-gutter) );
	}
	.col-md-2.no-gutter, .col-md-02.no-gutter, .column-md-2.no-gutter, .column-md-02.no-gutter, [column*="md-2"].no-gutter, [column*="md-02"].no-gutter,
	.col-md-2[no-gutter], .col-md-02[no-gutter], .column-md-2[no-gutter], .column-md-02[no-gutter], [column*="md-2"][no-gutter], [column*="md-02"][no-gutter]{
		width: var(--col-02);
	}
	.col-md-3, .col-md-03, .column-md-3, .column-md-03, [column*="md-3"], [column*="md-03"]{
		width: calc( var(--col-03) - var(--md-gutter) );
	}
	.col-md-3.no-gutter, .col-md-03.no-gutter, .column-md-3.no-gutter, .column-md-03.no-gutter, [column*="md-3"].no-gutter, [column*="md-03"].no-gutter,
	.col-md-3[no-gutter], .col-md-03[no-gutter], .column-md-3[no-gutter], .column-md-03[no-gutter], [column*="md-3"][no-gutter], [column*="md-03"][no-gutter]{
		width: var(--col-03);
	}
	.col-md-4, .col-md-04, .column-md-4, .column-md-04, [column*="md-4"], [column*="md-04"]{
		width: calc( var(--col-04) - var(--md-gutter) );
	}
	.col-md-4.no-gutter, .col-md-04.no-gutter, .column-md-4.no-gutter, .column-md-04.no-gutter, [column*="md-4"].no-gutter, [column*="md-04"].no-gutter,
	.col-md-4[no-gutter], .col-md-04[no-gutter], .column-md-4[no-gutter], .column-md-04[no-gutter], [column*="md-4"][no-gutter], [column*="md-04"][no-gutter]{
		width: var(--col-04);
	}
	.col-md-5, .col-md-05, .column-md-5, .column-md-05, [column*="md-5"], [column*="md-05"]{
		width: calc( var(--col-05) - var(--md-gutter) );
	}
	.col-md-5.no-gutter, .col-md-05.no-gutter, .column-md-5.no-gutter, .column-md-05.no-gutter, [column*="md-5"].no-gutter, [column*="md-05"].no-gutter,
	.col-md-5[no-gutter], .col-md-05[no-gutter], .column-md-5[no-gutter], .column-md-05[no-gutter], [column*="md-5"][no-gutter], [column*="md-05"][no-gutter]{
		width: var(--col-05);
	}
	.col-md-6, .col-md-06, .column-md-6, .column-md-06, [column*="md-6"], [column*="md-06"]{
		width: calc( var(--col-06) - var(--md-gutter) );
	}
	.col-md-6.no-gutter, .col-md-06.no-gutter, .column-md-6.no-gutter, .column-md-06.no-gutter, [column*="md-6"].no-gutter, [column*="md-06"].no-gutter,
	.col-md-6[no-gutter], .col-md-06[no-gutter], .column-md-6[no-gutter], .column-md-06[no-gutter], [column*="md-6"][no-gutter], [column*="md-06"][no-gutter]{
		width: var(--col-06);
	}
	.col-md-7, .col-md-07, .column-md-7, .column-md-07, [column*="md-7"], [column*="md-07"]{
		width: calc( var(--col-07) - var(--md-gutter) );
	}
	.col-md-7.no-gutter, .col-md-07.no-gutter, .column-md-7.no-gutter, .column-md-07.no-gutter, [column*="md-7"].no-gutter, [column*="md-07"].no-gutter,
	.col-md-7[no-gutter], .col-md-07[no-gutter], .column-md-7[no-gutter], .column-md-07[no-gutter], [column*="md-7"][no-gutter], [column*="md-07"][no-gutter]{
		width: var(--col-07);
	}
	.col-md-8, .col-md-08, .column-md-8, .column-md-08, [column*="md-8"], [column*="md-08"]{
		width: calc( var(--col-08) - var(--md-gutter) );
	}
	.col-md-8.no-gutter, .col-md-08.no-gutter, .column-md-8.no-gutter, .column-md-08.no-gutter, [column*="md-8"].no-gutter, [column*="md-08"].no-gutter,
	.col-md-8[no-gutter], .col-md-08[no-gutter], .column-md-8[no-gutter], .column-md-08[no-gutter], [column*="md-8"][no-gutter], [column*="md-08"][no-gutter]{
		width: var(--col-08);
	}
	.col-md-9, .col-md-09, .column-md-9, .column-md-09, [column*="md-9"], [column*="md-09"]{
		width: calc( var(--col-09) - var(--md-gutter) );
	}
	.col-md-9.no-gutter, .col-md-09.no-gutter, .column-md-9.no-gutter, .column-md-09.no-gutter, [column*="md-9"].no-gutter, [column*="md-09"].no-gutter,
	.col-md-9[no-gutter], .col-md-09[no-gutter], .column-md-9[no-gutter], .column-md-09[no-gutter], [column*="md-9"][no-gutter], [column*="md-09"][no-gutter]{
		width: var(--col-09);
	}
	.col-md-10, .column-md-10, [column*="md-10"]{
		width: calc( var(--col-10) - var(--md-gutter) );
	}
	.col-md-10.no-gutter, .column-md-10.no-gutter, [column*="md-10"].no-gutter, 
	.col-md-10[no-gutter], .column-md-10[no-gutter], [column*="md-10"][no-gutter]{
		width: var(--col-12);
	}
	.col-md-11, .column-md-11, [column*="md-11"]{
		width: calc( var(--col-11) - var(--md-gutter) );
	}
	.col-md-11.no-gutter, .column-md-11.no-gutter, [column*="md-11"].no-gutter, 
	.col-md-11[no-gutter], .column-md-11[no-gutter], [column*="md-11"][no-gutter]{
		width: var(--col-11);
	}
	.col-md-12, .column-md-12, [column*="md-12"]{
		width: calc( var(--col-12) - var(--md-gutter) );
	}
	.col-md-12.no-gutter, .column-md-12.no-gutter, [column*="md-12"].no-gutter, 
	.col-md-12[no-gutter], .column-md-12[no-gutter], [column*="md-12"][no-gutter]{
		width: var(--col-12);
	}
	/** offset **/
	.col-off-md-00, .column-off-md-00, .col-offset-md-00, .column-offset-md-00, [offset*="md-00"],
	.col-off-md-0, .column-off-md-0, .col-offset-md-0, .column-offset-md-0, [offset*="md-0"]{
		margin:0 0px;
	}
	.col-off-md-01, .column-off-md-01, .col-offset-md-01, .column-offset-md-01, [offset*="md-01"],
	.col-off-md-1, .column-off-md-1, .col-offset-md-1, .column-offset-md-1, [offset*="md-1"]{
		margin:0 0 0 var(--col-01);
	}
	.col-off-md-02, .column-off-md-02, .col-offset-md-02, .column-offset-md-02, [offset*="md-02"],
	.col-off-md-2, .column-off-md-2, .col-offset-md-2, .column-offset-md-2, [offset*="md-2"]{
		margin:0 0 0 var(--col-02);
	}
	.col-off-md-03, .column-off-md-03, .col-offset-md-03, .column-offset-md-03, [offset*="md-03"],
	.col-off-md-3, .column-off-md-3, .col-offset-md-3, .column-offset-md-3, [offset*="md-3"]{
		margin:0 0 0 var(--col-03);
	}
	.col-off-md-04, .column-off-md-04, .col-offset-md-04, .column-offset-md-04, [offset*="md-04"],
	.col-off-md-4, .column-off-md-4, .col-offset-md-4, .column-offset-md-4, [offset*="md-4"]{
		margin:0 0 0 var(--col-04);
	}
	.col-off-md-05, .column-off-md-05, .col-offset-md-05, .column-offset-md-05, [offset*="md-05"],
	.col-off-md-5, .column-off-md-5, .col-offset-md-5, .column-offset-md-5, [offset*="md-5"]{
		margin:0 0 0 var(--col-05);
	}
	.col-off-md-06, .column-off-md-06, .col-offset-md-06, .column-offset-md-06, [offset*="md-06"],
	.col-off-md-6, .column-off-md-6, .col-offset-md-6, .column-offset-md-6, [offset*="md-6"]{
		margin:0 0 0 var(--col-06);
	}
	.col-off-md-07, .column-off-md-07, .col-offset-md-07, .column-offset-md-07, [offset*="md-07"],
	.col-off-md-7, .column-off-md-7, .col-offset-md-7, .column-offset-md-7, [offset*="md-7"]{
		margin:0 0 0 var(--col-07);
	}
	.col-off-md-08, .column-off-md-08, .col-offset-md-08, .column-offset-md-08, [offset*="md-08"],
	.col-off-md-8, .column-off-md-8, .col-offset-md-8, .column-offset-md-8, [offset*="md-8"]{
		margin:0 0 0 var(--col-08);
	}
	.col-off-md-09, .column-off-md-09, .col-offset-md-09, .column-offset-md-09, [offset*="md-09"],
	.col-off-md-9, .column-off-md-9, .col-offset-md-9, .column-offset-md-9, [offset*="md-9"]{
		margin:0 0 0 var(--col-09);
	}
	.col-off-md-10, .column-off-md-10, .col-offset-md-10, .column-offset-md-10, [offset*="md-10"]{
		margin:0 0 0 var(--col-10);
	}
	.col-off-md-11, .column-off-md-11, .col-offset-md-11, .column-offset-md-11, [offset*="md-11"]{
		margin:0 0 0 var(--col-11);
	}
	.col-off-md-12, .column-off-md-12, .col-offset-md-12, .column-offset-md-12, [offset*="md-12"]{
		margin:0 0 0 var(--col-12);
	}
}
/** 992px **/
@media (min-width:992px){
	[class*="col-lg-"],
	[class*="column-lg-"],
	[column*="lg-"]{
		padding: var(--lg-padding);
		display: inline-block;
		float: left;
		margin: 0 calc( var(--lg-gutter) / 2 ) 0 calc( var(--lg-gutter) / 2 );
	}
	[class*="col-lg-"].no-gutter,
	[class*="column-lg-"].no-gutter,
	[column*="lg-"].no-gutter,
	[class*="col-lg-"][no-gutter],
	[class*="column-lg-"][no-gutter],
	[column*="lg-"][no-gutter]{
		margin: 0;
	}
	[class*="col-lg-"].no-padding,
	[class*="column-lg-"].no-padding,
	[column*="lg-"].no-padding,
	[class*="col-lg-"][no-padding],
	[class*="column-lg-"][no-padding],
	[column*="lg-"][no-padding]{
		padding: initial;
	}
	.col-lg-1, .col-lg-01, .column-lg-1, .column-lg-01, [column*="lg-1"], [column*="lg-01"]{
		width: calc( var(--col-01) - var(--lg-gutter) );
	}
	.col-lg-1.no-gutter, .col-lg-01.no-gutter, .column-lg-1.no-gutter, .column-lg-01.no-gutter, [column*="lg-1"].no-gutter, [column*="lg-01"].no-gutter,
	.col-lg-1[no-gutter], .col-lg-01[no-gutter], .column-lg-1[no-gutter], .column-lg-01[no-gutter], [column*="lg-1"][no-gutter], [column*="lg-01"][no-gutter]{
		width: var(--col-01);
	}
	.col-lg-2, .col-lg-02, .column-lg-2, .column-lg-02, [column*="lg-2"], [column*="lg-02"]{
		width: calc( var(--col-02) - var(--lg-gutter) );
	}
	.col-lg-2.no-gutter, .col-lg-02.no-gutter, .column-lg-2.no-gutter, .column-lg-02.no-gutter, [column*="lg-2"].no-gutter, [column*="lg-02"].no-gutter,
	.col-lg-2[no-gutter], .col-lg-02[no-gutter], .column-lg-2[no-gutter], .column-lg-02[no-gutter], [column*="lg-2"][no-gutter], [column*="lg-02"][no-gutter]{
		width: var(--col-02);
	}
	.col-lg-3, .col-lg-03, .column-lg-3, .column-lg-03, [column*="lg-3"], [column*="lg-03"]{
		width: calc( var(--col-03) - var(--lg-gutter) );
	}
	.col-lg-3.no-gutter, .col-lg-03.no-gutter, .column-lg-3.no-gutter, .column-lg-03.no-gutter, [column*="lg-3"].no-gutter, [column*="lg-03"].no-gutter,
	.col-lg-3[no-gutter], .col-lg-03[no-gutter], .column-lg-3[no-gutter], .column-lg-03[no-gutter], [column*="lg-3"][no-gutter], [column*="lg-03"][no-gutter]{
		width: var(--col-03);
	}
	.col-lg-4, .col-lg-04, .column-lg-4, .column-lg-04, [column*="lg-4"], [column*="lg-04"]{
		width: calc( var(--col-04) - var(--lg-gutter) );
	}
	.col-lg-4.no-gutter, .col-lg-04.no-gutter, .column-lg-4.no-gutter, .column-lg-04.no-gutter, [column*="lg-4"].no-gutter, [column*="lg-04"].no-gutter,
	.col-lg-4[no-gutter], .col-lg-04[no-gutter], .column-lg-4[no-gutter], .column-lg-04[no-gutter], [column*="lg-4"][no-gutter], [column*="lg-04"][no-gutter]{
		width: var(--col-04);
	}
	.col-lg-5, .col-lg-05, .column-lg-5, .column-lg-05, [column*="lg-5"], [column*="lg-05"]{
		width: calc( var(--col-05) - var(--lg-gutter) );
	}
	.col-lg-5.no-gutter, .col-lg-05.no-gutter, .column-lg-5.no-gutter, .column-lg-05.no-gutter, [column*="lg-5"].no-gutter, [column*="lg-05"].no-gutter,
	.col-lg-5[no-gutter], .col-lg-05[no-gutter], .column-lg-5[no-gutter], .column-lg-05[no-gutter], [column*="lg-5"][no-gutter], [column*="lg-05"][no-gutter]{
		width: var(--col-05);
	}
	.col-lg-6, .col-lg-06, .column-lg-6, .column-lg-06, [column*="lg-6"], [column*="lg-06"]{
		width: calc( var(--col-06) - var(--lg-gutter) );
	}
	.col-lg-6.no-gutter, .col-lg-06.no-gutter, .column-lg-6.no-gutter, .column-lg-06.no-gutter, [column*="lg-6"].no-gutter, [column*="lg-06"].no-gutter,
	.col-lg-6[no-gutter], .col-lg-06[no-gutter], .column-lg-6[no-gutter], .column-lg-06[no-gutter], [column*="lg-6"][no-gutter], [column*="lg-06"][no-gutter]{
		width: var(--col-06);
	}
	.col-lg-7, .col-lg-07, .column-lg-7, .column-lg-07, [column*="lg-7"], [column*="lg-07"]{
		width: calc( var(--col-07) - var(--lg-gutter) );
	}
	.col-lg-7.no-gutter, .col-lg-07.no-gutter, .column-lg-7.no-gutter, .column-lg-07.no-gutter, [column*="lg-7"].no-gutter, [column*="lg-07"].no-gutter,
	.col-lg-7[no-gutter], .col-lg-07[no-gutter], .column-lg-7[no-gutter], .column-lg-07[no-gutter], [column*="lg-7"][no-gutter], [column*="lg-07"][no-gutter]{
		width: var(--col-07);
	}
	.col-lg-8, .col-lg-08, .column-lg-8, .column-lg-08, [column*="lg-8"], [column*="lg-08"]{
		width: calc( var(--col-08) - var(--lg-gutter) );
	}
	.col-lg-8.no-gutter, .col-lg-08.no-gutter, .column-lg-8.no-gutter, .column-lg-08.no-gutter, [column*="lg-8"].no-gutter, [column*="lg-08"].no-gutter,
	.col-lg-8[no-gutter], .col-lg-08[no-gutter], .column-lg-8[no-gutter], .column-lg-08[no-gutter], [column*="lg-8"][no-gutter], [column*="lg-08"][no-gutter]{
		width: var(--col-08);
	}
	.col-lg-9, .col-lg-09, .column-lg-9, .column-lg-09, [column*="lg-9"], [column*="lg-09"]{
		width: calc( var(--col-09) - var(--lg-gutter) );
	}
	.col-lg-9.no-gutter, .col-lg-09.no-gutter, .column-lg-9.no-gutter, .column-lg-09.no-gutter, [column*="lg-9"].no-gutter, [column*="lg-09"].no-gutter,
	.col-lg-9[no-gutter], .col-lg-09[no-gutter], .column-lg-9[no-gutter], .column-lg-09[no-gutter], [column*="lg-9"][no-gutter], [column*="lg-09"][no-gutter]{
		width: var(--col-09);
	}
	.col-lg-10, .column-lg-10, [column*="lg-10"]{
		width: calc( var(--col-10) - var(--lg-gutter) );
	}
	.col-lg-10.no-gutter, .column-lg-10.no-gutter, [column*="lg-10"].no-gutter, 
	.col-lg-10[no-gutter], .column-lg-10[no-gutter], [column*="lg-10"][no-gutter]{
		width: var(--col-12);
	}
	.col-lg-11, .column-lg-11, [column*="lg-11"]{
		width: calc( var(--col-11) - var(--lg-gutter) );
	}
	.col-lg-11.no-gutter, .column-lg-11.no-gutter, [column*="lg-11"].no-gutter, 
	.col-lg-11[no-gutter], .column-lg-11[no-gutter], [column*="lg-11"][no-gutter]{
		width: var(--col-11);
	}
	.col-lg-12, .column-lg-12, [column*="lg-12"]{
		width: calc( var(--col-12) - var(--lg-gutter) );
	}
	.col-lg-12.no-gutter, .column-lg-12.no-gutter, [column*="lg-12"].no-gutter, 
	.col-lg-12[no-gutter], .column-lg-12[no-gutter], [column*="lg-12"][no-gutter]{
		width: var(--col-12);
	}
	/** offset **/
	.col-off-lg-00, .column-off-lg-00, .col-offset-lg-00, .column-offset-lg-00, [offset*="lg-00"],
	.col-off-lg-0, .column-off-lg-0, .col-offset-lg-0, .column-offset-lg-0, [offset*="lg-0"]{
		margin:0 0px;
	}
	.col-off-lg-01, .column-off-lg-01, .col-offset-lg-01, .column-offset-lg-01, [offset*="lg-01"],
	.col-off-lg-1, .column-off-lg-1, .col-offset-lg-1, .column-offset-lg-1, [offset*="lg-1"]{
		margin:0 0 0 var(--col-01);
	}
	.col-off-lg-02, .column-off-lg-02, .col-offset-lg-02, .column-offset-lg-02, [offset*="lg-02"],
	.col-off-lg-2, .column-off-lg-2, .col-offset-lg-2, .column-offset-lg-2, [offset*="lg-2"]{
		margin:0 0 0 var(--col-02);
	}
	.col-off-lg-03, .column-off-lg-03, .col-offset-lg-03, .column-offset-lg-03, [offset*="lg-03"],
	.col-off-lg-3, .column-off-lg-3, .col-offset-lg-3, .column-offset-lg-3, [offset*="lg-3"]{
		margin:0 0 0 var(--col-03);
	}
	.col-off-lg-04, .column-off-lg-04, .col-offset-lg-04, .column-offset-lg-04, [offset*="lg-04"],
	.col-off-lg-4, .column-off-lg-4, .col-offset-lg-4, .column-offset-lg-4, [offset*="lg-4"]{
		margin:0 0 0 var(--col-04);
	}
	.col-off-lg-05, .column-off-lg-05, .col-offset-lg-05, .column-offset-lg-05, [offset*="lg-05"],
	.col-off-lg-5, .column-off-lg-5, .col-offset-lg-5, .column-offset-lg-5, [offset*="lg-5"]{
		margin:0 0 0 var(--col-05);
	}
	.col-off-lg-06, .column-off-lg-06, .col-offset-lg-06, .column-offset-lg-06, [offset*="lg-06"],
	.col-off-lg-6, .column-off-lg-6, .col-offset-lg-6, .column-offset-lg-6, [offset*="lg-6"]{
		margin:0 0 0 var(--col-06);
	}
	.col-off-lg-07, .column-off-lg-07, .col-offset-lg-07, .column-offset-lg-07, [offset*="lg-07"],
	.col-off-lg-7, .column-off-lg-7, .col-offset-lg-7, .column-offset-lg-7, [offset*="lg-7"]{
		margin:0 0 0 var(--col-07);
	}
	.col-off-lg-08, .column-off-lg-08, .col-offset-lg-08, .column-offset-lg-08, [offset*="lg-08"],
	.col-off-lg-8, .column-off-lg-8, .col-offset-lg-8, .column-offset-lg-8, [offset*="lg-8"]{
		margin:0 0 0 var(--col-08);
	}
	.col-off-lg-09, .column-off-lg-09, .col-offset-lg-09, .column-offset-lg-09, [offset*="lg-09"],
	.col-off-lg-9, .column-off-lg-9, .col-offset-lg-9, .column-offset-lg-9, [offset*="lg-9"]{
		margin:0 0 0 var(--col-09);
	}
	.col-off-lg-10, .column-off-lg-10, .col-offset-lg-10, .column-offset-lg-10, [offset*="lg-10"]{
		margin:0 0 0 var(--col-10);
	}
	.col-off-lg-11, .column-off-lg-11, .col-offset-lg-11, .column-offset-lg-11, [offset*="lg-11"]{
		margin:0 0 0 var(--col-11);
	}
	.col-off-lg-12, .column-off-lg-12, .col-offset-lg-12, .column-offset-lg-12, [offset*="lg-12"]{
		margin:0 0 0 var(--col-12);
	}
}
/** 1200px **/
@media (min-width:1200px){
	[class*="col-xl-"],
	[class*="column-xl-"],
	[column*="xl-"]{
		padding: var(--xl-padding);
		display: inline-block;
		float: left;
		margin: 0 calc( var(--xl-gutter) / 2 ) 0 calc( var(--xl-gutter) / 2 );

	}
	[class*="col-xl-"].no-gutter,
	[class*="column-xl-"].no-gutter,
	[column*="xl-"].no-gutter,
	[class*="col-xl-"][no-gutter],
	[class*="column-xl-"][no-gutter],
	[column*="xl-"][no-gutter]{
		margin: 0;
	}
	[class*="col-xl-"].no-padding,
	[class*="column-xl-"].no-padding,
	[column*="xl-"].no-padding,
	[class*="col-xl-"][no-padding],
	[class*="column-xl-"][no-padding],
	[column*="xl-"][no-padding]{
		padding: initial;
	}
	.col-xl-1, .col-xl-01, .column-xl-1, .column-xl-01, [column*="xl-1"], [column*="xl-01"]{
		width: calc( var(--col-01) - var(--xl-gutter) );
	}
	.col-xl-1.no-gutter, .col-xl-01.no-gutter, .column-xl-1.no-gutter, .column-xl-01.no-gutter, [column*="xl-1"].no-gutter, [column*="xl-01"].no-gutter,
	.col-xl-1[no-gutter], .col-xl-01[no-gutter], .column-xl-1[no-gutter], .column-xl-01[no-gutter], [column*="xl-1"][no-gutter], [column*="xl-01"][no-gutter]{
		width: var(--col-01);
	}
	.col-xl-2, .col-xl-02, .column-xl-2, .column-xl-02, [column*="xl-2"], [column*="xl-02"]{
		width: calc( var(--col-02) - var(--xl-gutter) );
	}
	.col-xl-2.no-gutter, .col-xl-02.no-gutter, .column-xl-2.no-gutter, .column-xl-02.no-gutter, [column*="xl-2"].no-gutter, [column*="xl-02"].no-gutter,
	.col-xl-2[no-gutter], .col-xl-02[no-gutter], .column-xl-2[no-gutter], .column-xl-02[no-gutter], [column*="xl-2"][no-gutter], [column*="xl-02"][no-gutter]{
		width: var(--col-02);
	}
	.col-xl-3, .col-xl-03, .column-xl-3, .column-xl-03, [column*="xl-3"], [column*="xl-03"]{
		width: calc( var(--col-03) - var(--xl-gutter) );
	}
	.col-xl-3.no-gutter, .col-xl-03.no-gutter, .column-xl-3.no-gutter, .column-xl-03.no-gutter, [column*="xl-3"].no-gutter, [column*="xl-03"].no-gutter,
	.col-xl-3[no-gutter], .col-xl-03[no-gutter], .column-xl-3[no-gutter], .column-xl-03[no-gutter], [column*="xl-3"][no-gutter], [column*="xl-03"][no-gutter]{
		width: var(--col-03);
	}
	.col-xl-4, .col-xl-04, .column-xl-4, .column-xl-04, [column*="xl-4"], [column*="xl-04"]{
		width: calc( var(--col-04) - var(--xl-gutter) );
	}
	.col-xl-4.no-gutter, .col-xl-04.no-gutter, .column-xl-4.no-gutter, .column-xl-04.no-gutter, [column*="xl-4"].no-gutter, [column*="xl-04"].no-gutter,
	.col-xl-4[no-gutter], .col-xl-04[no-gutter], .column-xl-4[no-gutter], .column-xl-04[no-gutter], [column*="xl-4"][no-gutter], [column*="xl-04"][no-gutter]{
		width: var(--col-04);
	}
	.col-xl-5, .col-xl-05, .column-xl-5, .column-xl-05, [column*="xl-5"], [column*="xl-05"]{
		width: calc( var(--col-05) - var(--xl-gutter) );
	}
	.col-xl-5.no-gutter, .col-xl-05.no-gutter, .column-xl-5.no-gutter, .column-xl-05.no-gutter, [column*="xl-5"].no-gutter, [column*="xl-05"].no-gutter,
	.col-xl-5[no-gutter], .col-xl-05[no-gutter], .column-xl-5[no-gutter], .column-xl-05[no-gutter], [column*="xl-5"][no-gutter], [column*="xl-05"][no-gutter]{
		width: var(--col-05);
	}
	.col-xl-6, .col-xl-06, .column-xl-6, .column-xl-06, [column*="xl-6"], [column*="xl-06"]{
		width: calc( var(--col-06) - var(--xl-gutter) );
	}
	.col-xl-6.no-gutter, .col-xl-06.no-gutter, .column-xl-6.no-gutter, .column-xl-06.no-gutter, [column*="xl-6"].no-gutter, [column*="xl-06"].no-gutter,
	.col-xl-6[no-gutter], .col-xl-06[no-gutter], .column-xl-6[no-gutter], .column-xl-06[no-gutter], [column*="xl-6"][no-gutter], [column*="xl-06"][no-gutter]{
		width: var(--col-06);
	}
	.col-xl-7, .col-xl-07, .column-xl-7, .column-xl-07, [column*="xl-7"], [column*="xl-07"]{
		width: calc( var(--col-07) - var(--xl-gutter) );
	}
	.col-xl-7.no-gutter, .col-xl-07.no-gutter, .column-xl-7.no-gutter, .column-xl-07.no-gutter, [column*="xl-7"].no-gutter, [column*="xl-07"].no-gutter,
	.col-xl-7[no-gutter], .col-xl-07[no-gutter], .column-xl-7[no-gutter], .column-xl-07[no-gutter], [column*="xl-7"][no-gutter], [column*="xl-07"][no-gutter]{
		width: var(--col-07);
	}
	.col-xl-8, .col-xl-08, .column-xl-8, .column-xl-08, [column*="xl-8"], [column*="xl-08"]{
		width: calc( var(--col-08) - var(--xl-gutter) );
	}
	.col-xl-8.no-gutter, .col-xl-08.no-gutter, .column-xl-8.no-gutter, .column-xl-08.no-gutter, [column*="xl-8"].no-gutter, [column*="xl-08"].no-gutter,
	.col-xl-8[no-gutter], .col-xl-08[no-gutter], .column-xl-8[no-gutter], .column-xl-08[no-gutter], [column*="xl-8"][no-gutter], [column*="xl-08"][no-gutter]{
		width: var(--col-08);
	}
	.col-xl-9, .col-xl-09, .column-xl-9, .column-xl-09, [column*="xl-9"], [column*="xl-09"]{
		width: calc( var(--col-09) - var(--xl-gutter) );
	}
	.col-xl-9.no-gutter, .col-xl-09.no-gutter, .column-xl-9.no-gutter, .column-xl-09.no-gutter, [column*="xl-9"].no-gutter, [column*="xl-09"].no-gutter,
	.col-xl-9[no-gutter], .col-xl-09[no-gutter], .column-xl-9[no-gutter], .column-xl-09[no-gutter], [column*="xl-9"][no-gutter], [column*="xl-09"][no-gutter]{
		width: var(--col-09);
	}
	.col-xl-10, .column-xl-10, [column*="xl-10"]{
		width: calc( var(--col-10) - var(--xl-gutter) );
	}
	.col-xl-10.no-gutter, .column-xl-10.no-gutter, [column*="xl-10"].no-gutter, 
	.col-xl-10[no-gutter], .column-xl-10[no-gutter], [column*="xl-10"][no-gutter]{
		width: var(--col-12);
	}
	.col-xl-11, .column-xl-11, [column*="xl-11"]{
		width: calc( var(--col-11) - var(--xl-gutter) );
	}
	.col-xl-11.no-gutter, .column-xl-11.no-gutter, [column*="xl-11"].no-gutter, 
	.col-xl-11[no-gutter], .column-xl-11[no-gutter], [column*="xl-11"][no-gutter]{
		width: var(--col-11);
	}
	.col-xl-12, .column-xl-12, [column*="xl-12"]{
		width: calc( var(--col-12) - var(--xl-gutter) );
	}
	.col-xl-12.no-gutter, .column-xl-12.no-gutter, [column*="xl-12"].no-gutter, 
	.col-xl-12[no-gutter], .column-xl-12[no-gutter], [column*="xl-12"][no-gutter]{
		width: var(--col-12);
	}
	/** offset **/
	.col-off-xl-00, .column-off-xl-00, .col-offset-xl-00, .column-offset-xl-00, [offset*="xl-00"],
	.col-off-xl-0, .column-off-xl-0, .col-offset-xl-0, .column-offset-xl-0, [offset*="xl-0"]{
		margin:0 0px;
	}
	.col-off-xl-01, .column-off-xl-01, .col-offset-xl-01, .column-offset-xl-01, [offset*="xl-01"],
	.col-off-xl-1, .column-off-xl-1, .col-offset-xl-1, .column-offset-xl-1, [offset*="xl-1"]{
		margin:0 0 0 var(--col-01);
	}
	.col-off-xl-02, .column-off-xl-02, .col-offset-xl-02, .column-offset-xl-02, [offset*="xl-02"],
	.col-off-xl-2, .column-off-xl-2, .col-offset-xl-2, .column-offset-xl-2, [offset*="xl-2"]{
		margin:0 0 0 var(--col-02);
	}
	.col-off-xl-03, .column-off-xl-03, .col-offset-xl-03, .column-offset-xl-03, [offset*="xl-03"],
	.col-off-xl-3, .column-off-xl-3, .col-offset-xl-3, .column-offset-xl-3, [offset*="xl-3"]{
		margin:0 0 0 var(--col-03);
	}
	.col-off-xl-04, .column-off-xl-04, .col-offset-xl-04, .column-offset-xl-04, [offset*="xl-04"],
	.col-off-xl-4, .column-off-xl-4, .col-offset-xl-4, .column-offset-xl-4, [offset*="xl-4"]{
		margin:0 0 0 var(--col-04);
	}
	.col-off-xl-05, .column-off-xl-05, .col-offset-xl-05, .column-offset-xl-05, [offset*="xl-05"],
	.col-off-xl-5, .column-off-xl-5, .col-offset-xl-5, .column-offset-xl-5, [offset*="xl-5"]{
		margin:0 0 0 var(--col-05);
	}
	.col-off-xl-06, .column-off-xl-06, .col-offset-xl-06, .column-offset-xl-06, [offset*="xl-06"],
	.col-off-xl-6, .column-off-xl-6, .col-offset-xl-6, .column-offset-xl-6, [offset*="xl-6"]{
		margin:0 0 0 var(--col-06);
	}
	.col-off-xl-07, .column-off-xl-07, .col-offset-xl-07, .column-offset-xl-07, [offset*="xl-07"],
	.col-off-xl-7, .column-off-xl-7, .col-offset-xl-7, .column-offset-xl-7, [offset*="xl-7"]{
		margin:0 0 0 var(--col-07);
	}
	.col-off-xl-08, .column-off-xl-08, .col-offset-xl-08, .column-offset-xl-08, [offset*="xl-08"],
	.col-off-xl-8, .column-off-xl-8, .col-offset-xl-8, .column-offset-xl-8, [offset*="xl-8"]{
		margin:0 0 0 var(--col-08);
	}
	.col-off-xl-09, .column-off-xl-09, .col-offset-xl-09, .column-offset-xl-09, [offset*="xl-09"],
	.col-off-xl-9, .column-off-xl-9, .col-offset-xl-9, .column-offset-xl-9, [offset*="xl-9"]{
		margin:0 0 0 var(--col-09);
	}
	.col-off-xl-10, .column-off-xl-10, .col-offset-xl-10, .column-offset-xl-10, [offset*="xl-10"]{
		margin:0 0 0 var(--col-10);
	}
	.col-off-xl-11, .column-off-xl-11, .col-offset-xl-11, .column-offset-xl-11, [offset*="xl-11"]{
		margin:0 0 0 var(--col-11);
	}
	.col-off-xl-12, .column-off-xl-12, .col-offset-xl-12, .column-offset-xl-12, [offset*="xl-12"]{
		margin:0 0 0 var(--col-12);
	}
}
/** 1900px **/
@media (min-width:1900px){
	[class*="col-xxl-"],
	[class*="column-xxl-"],
	[column*="xxl-"]{
		padding: var(--xl-padding);
		display: inline-block;
		float: left;
		margin: 0 calc( var(--xxl-gutter) / 2 ) 0 calc( var(--xxl-gutter) / 2 );
		box-sizing: border-box;
	}
	[class*="col-xxl-"].no-gutter,
	[class*="column-xxl-"].no-gutter,
	[column*="xxl-"].no-gutter,
	[class*="col-xxl-"][no-gutter],
	[class*="column-xxl-"][no-gutter],
	[column*="xxl-"][no-gutter]{
		margin: 0;
	}
	[class*="col-xxl-"].no-padding,
	[class*="column-xxl-"].no-padding,
	[column*="xxl-"].no-padding,
	[class*="col-xxl-"][no-padding],
	[class*="column-xxl-"][no-padding],
	[column*="xxl-"][no-padding]{
		padding: initial;
	}
	.col-xxl-1, .col-xxl-01, .column-xxl-1, .column-xxl-01, [column*="xxl-1"], [column*="xxl-01"]{
		width: calc( var(--col-01) - var(--xxl-gutter) );
	}
	.col-xxl-1.no-gutter, .col-xxl-01.no-gutter, .column-xxl-1.no-gutter, .column-xxl-01.no-gutter, [column*="xxl-1"].no-gutter, [column*="xxl-01"].no-gutter,
	.col-xxl-1[no-gutter], .col-xxl-01[no-gutter], .column-xxl-1[no-gutter], .column-xxl-01[no-gutter], [column*="xxl-1"][no-gutter], [column*="xxl-01"][no-gutter]{
		width: var(--col-01);
	}
	.col-xxl-2, .col-xxl-02, .column-xxl-2, .column-xxl-02, [column*="xxl-2"], [column*="xxl-02"]{
		width: calc( var(--col-02) - var(--xxl-gutter) );
	}
	.col-xxl-2.no-gutter, .col-xxl-02.no-gutter, .column-xxl-2.no-gutter, .column-xxl-02.no-gutter, [column*="xxl-2"].no-gutter, [column*="xxl-02"].no-gutter,
	.col-xxl-2[no-gutter], .col-xxl-02[no-gutter], .column-xxl-2[no-gutter], .column-xxl-02[no-gutter], [column*="xxl-2"][no-gutter], [column*="xxl-02"][no-gutter]{
		width: var(--col-02);
	}
	.col-xxl-3, .col-xxl-03, .column-xxl-3, .column-xxl-03, [column*="xxl-3"], [column*="xxl-03"]{
		width: calc( var(--col-03) - var(--xxl-gutter) );
	}
	.col-xxl-3.no-gutter, .col-xxl-03.no-gutter, .column-xxl-3.no-gutter, .column-xxl-03.no-gutter, [column*="xxl-3"].no-gutter, [column*="xxl-03"].no-gutter,
	.col-xxl-3[no-gutter], .col-xxl-03[no-gutter], .column-xxl-3[no-gutter], .column-xxl-03[no-gutter], [column*="xxl-3"][no-gutter], [column*="xxl-03"][no-gutter]{
		width: var(--col-03);
	}
	.col-xxl-4, .col-xxl-04, .column-xxl-4, .column-xxl-04, [column*="xxl-4"], [column*="xxl-04"]{
		width: calc( var(--col-04) - var(--xxl-gutter) );
	}
	.col-xxl-4.no-gutter, .col-xxl-04.no-gutter, .column-xxl-4.no-gutter, .column-xxl-04.no-gutter, [column*="xxl-4"].no-gutter, [column*="xxl-04"].no-gutter,
	.col-xxl-4[no-gutter], .col-xxl-04[no-gutter], .column-xxl-4[no-gutter], .column-xxl-04[no-gutter], [column*="xxl-4"][no-gutter], [column*="xxl-04"][no-gutter]{
		width: var(--col-04);
	}
	.col-xxl-5, .col-xxl-05, .column-xxl-5, .column-xxl-05, [column*="xxl-5"], [column*="xxl-05"]{
		width: calc( var(--col-05) - var(--xxl-gutter) );
	}
	.col-xxl-5.no-gutter, .col-xxl-05.no-gutter, .column-xxl-5.no-gutter, .column-xxl-05.no-gutter, [column*="xxl-5"].no-gutter, [column*="xxl-05"].no-gutter,
	.col-xxl-5[no-gutter], .col-xxl-05[no-gutter], .column-xxl-5[no-gutter], .column-xxl-05[no-gutter], [column*="xxl-5"][no-gutter], [column*="xxl-05"][no-gutter]{
		width: var(--col-05);
	}
	.col-xxl-6, .col-xxl-06, .column-xxl-6, .column-xxl-06, [column*="xxl-6"], [column*="xxl-06"]{
		width: calc( var(--col-06) - var(--xxl-gutter) );
	}
	.col-xxl-6.no-gutter, .col-xxl-06.no-gutter, .column-xxl-6.no-gutter, .column-xxl-06.no-gutter, [column*="xxl-6"].no-gutter, [column*="xxl-06"].no-gutter,
	.col-xxl-6[no-gutter], .col-xxl-06[no-gutter], .column-xxl-6[no-gutter], .column-xxl-06[no-gutter], [column*="xxl-6"][no-gutter], [column*="xxl-06"][no-gutter]{
		width: var(--col-06);
	}
	.col-xxl-7, .col-xxl-07, .column-xxl-7, .column-xxl-07, [column*="xxl-7"], [column*="xxl-07"]{
		width: calc( var(--col-07) - var(--xxl-gutter) );
	}
	.col-xxl-7.no-gutter, .col-xxl-07.no-gutter, .column-xxl-7.no-gutter, .column-xxl-07.no-gutter, [column*="xxl-7"].no-gutter, [column*="xxl-07"].no-gutter,
	.col-xxl-7[no-gutter], .col-xxl-07[no-gutter], .column-xxl-7[no-gutter], .column-xxl-07[no-gutter], [column*="xxl-7"][no-gutter], [column*="xxl-07"][no-gutter]{
		width: var(--col-07);
	}
	.col-xxl-8, .col-xxl-08, .column-xxl-8, .column-xxl-08, [column*="xxl-8"], [column*="xxl-08"]{
		width: calc( var(--col-08) - var(--xxl-gutter) );
	}
	.col-xxl-8.no-gutter, .col-xxl-08.no-gutter, .column-xxl-8.no-gutter, .column-xxl-08.no-gutter, [column*="xxl-8"].no-gutter, [column*="xxl-08"].no-gutter,
	.col-xxl-8[no-gutter], .col-xxl-08[no-gutter], .column-xxl-8[no-gutter], .column-xxl-08[no-gutter], [column*="xxl-8"][no-gutter], [column*="xxl-08"][no-gutter]{
		width: var(--col-08);
	}
	.col-xxl-9, .col-xxl-09, .column-xxl-9, .column-xxl-09, [column*="xxl-9"], [column*="xxl-09"]{
		width: calc( var(--col-09) - var(--xxl-gutter) );
	}
	.col-xxl-9.no-gutter, .col-xxl-09.no-gutter, .column-xxl-9.no-gutter, .column-xxl-09.no-gutter, [column*="xxl-9"].no-gutter, [column*="xxl-09"].no-gutter,
	.col-xxl-9[no-gutter], .col-xxl-09[no-gutter], .column-xxl-9[no-gutter], .column-xxl-09[no-gutter], [column*="xxl-9"][no-gutter], [column*="xxl-09"][no-gutter]{
		width: var(--col-09);
	}
	.col-xxl-10, .column-xxl-10, [column*="xxl-10"]{
		width: calc( var(--col-10) - var(--xxl-gutter) );
	}
	.col-xxl-10.no-gutter, .column-xxl-10.no-gutter, [column*="xxl-10"].no-gutter, 
	.col-xxl-10[no-gutter], .column-xxl-10[no-gutter], [column*="xxl-10"][no-gutter]{
		width: var(--col-12);
	}
	.col-xxl-11, .column-xxl-11, [column*="xxl-11"]{
		width: calc( var(--col-11) - var(--xxl-gutter) );
	}
	.col-xxl-11.no-gutter, .column-xxl-11.no-gutter, [column*="xxl-11"].no-gutter, 
	.col-xxl-11[no-gutter], .column-xxl-11[no-gutter], [column*="xxl-11"][no-gutter]{
		width: var(--col-11);
	}
	.col-xxl-12, .column-xxl-12, [column*="xxl-12"]{
		width: calc( var(--col-12) - var(--xxl-gutter) );
	}
	.col-xxl-12.no-gutter, .column-xxl-12.no-gutter, [column*="xxl-12"].no-gutter, 
	.col-xxl-12[no-gutter], .column-xxl-12[no-gutter], [column*="xxl-12"][no-gutter]{
		width: var(--col-12);
	}
	/** offset **/
	.col-off-xxl-00, .column-off-xxl-00, .col-offset-xxl-00, .column-offset-xxl-00, [offset*="xxl-00"],
	.col-off-xxl-0, .column-off-xxl-0, .col-offset-xxl-0, .column-offset-xxl-0, [offset*="xxl-0"]{
		margin:0 0px;
	}
	.col-off-xxl-01, .column-off-xxl-01, .col-offset-xxl-01, .column-offset-xxl-01, [offset*="xxl-01"],
	.col-off-xxl-1, .column-off-xxl-1, .col-offset-xxl-1, .column-offset-xxl-1, [offset*="xxl-1"]{
		margin:0 0 0 var(--col-01);
	}
	.col-off-xxl-02, .column-off-xxl-02, .col-offset-xxl-02, .column-offset-xxl-02, [offset*="xxl-02"],
	.col-off-xxl-2, .column-off-xxl-2, .col-offset-xxl-2, .column-offset-xxl-2, [offset*="xxl-2"]{
		margin:0 0 0 var(--col-02);
	}
	.col-off-xxl-03, .column-off-xxl-03, .col-offset-xxl-03, .column-offset-xxl-03, [offset*="xxl-03"],
	.col-off-xxl-3, .column-off-xxl-3, .col-offset-xxl-3, .column-offset-xxl-3, [offset*="xxl-3"]{
		margin:0 0 0 var(--col-03);
	}
	.col-off-xxl-04, .column-off-xxl-04, .col-offset-xxl-04, .column-offset-xxl-04, [offset*="xxl-04"],
	.col-off-xxl-4, .column-off-xxl-4, .col-offset-xxl-4, .column-offset-xxl-4, [offset*="xxl-4"]{
		margin:0 0 0 var(--col-04);
	}
	.col-off-xxl-05, .column-off-xxl-05, .col-offset-xxl-05, .column-offset-xxl-05, [offset*="xxl-05"],
	.col-off-xxl-5, .column-off-xxl-5, .col-offset-xxl-5, .column-offset-xxl-5, [offset*="xxl-5"]{
		margin:0 0 0 var(--col-05);
	}
	.col-off-xxl-06, .column-off-xxl-06, .col-offset-xxl-06, .column-offset-xxl-06, [offset*="xxl-06"],
	.col-off-xxl-6, .column-off-xxl-6, .col-offset-xxl-6, .column-offset-xxl-6, [offset*="xxl-6"]{
		margin:0 0 0 var(--col-06);
	}
	.col-off-xxl-07, .column-off-xxl-07, .col-offset-xxl-07, .column-offset-xxl-07, [offset*="xxl-07"],
	.col-off-xxl-7, .column-off-xxl-7, .col-offset-xxl-7, .column-offset-xxl-7, [offset*="xxl-7"]{
		margin:0 0 0 var(--col-07) ;
	}
	.col-off-xxl-08, .column-off-xxl-08, .col-offset-xxl-08, .column-offset-xxl-08, [offset*="xxl-08"],
	.col-off-xxl-8, .column-off-xxl-8, .col-offset-xxl-8, .column-offset-xxl-8, [offset*="xxl-8"]{
		margin:0 0 0 var(--col-08);
	}
	.col-off-xxl-09, .column-off-xxl-09, .col-offset-xxl-09, .column-offset-xxl-09, [offset*="xxl-09"],
	.col-off-xxl-9, .column-off-xxl-9, .col-offset-xxl-9, .column-offset-xxl-9, [offset*="xxl-9"]{
		margin:0 0 0 var(--col-09);
	}
	.col-off-xxl-10, .column-off-xxl-10, .col-offset-xxl-10, .column-offset-xxl-10, [offset*="xxl-10"]{
		margin:0 0 0 var(--col-10);
	}
	.col-off-xxl-11, .column-off-xxl-11, .col-offset-xxl-11, .column-offset-xxl-11, [offset*="xxl-11"]{
		margin:0 0 0 var(--col-11);
	}
	.col-off-xxl-12, .column-off-xxl-12, .col-offset-xxl-12, .column-offset-xxl-12, [offset*="xxl-12"]{
		margin:0 0 0 var(--col-12);
	}
}