/* contains all the css required for craft:scribe, cs-flex, cs-button, template styles */
/* cs-flex */
/*********************************************************************
generic css for flexbox
***********************************************************************/

*, :before, :after {
	box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
:root{
	--autospacer-gap: .2rem;
}
body, html{
	margin: 0;
	padding: 0;
	position: relative;
	/* height: 100%; */ /*animation detection will break */
}
.hide{
    display: none !important;
}
.flex{
	display: flex;
	flex-wrap: wrap;
}
.flex.flex-nowrap{
	flex-wrap: nowrap !important;
}
.flex-vert{
	flex-direction: column;
}
.flex-hcenter{
	justify-content: center;
}
.flex-hbetween{
	justify-content: space-between;
}
.flex-heven{
	justify-content: space-evenly;
}
.flex-hright{
	justify-content: flex-end;
}
.flex-vcenter{
	align-items: center;
}
.flex.flex-vfiller{
	flex: 1;
	flex-direction: row;
}
.flex.flex-hfiller{
	flex: 1;
	/*flex-direction: column;*/
}
.col.col-5{
	flex: 0 5%;
	width: 5%;
}
.col.col-5.auto-spacer{
	max-width: calc(5% - var(--autospacer-gap));
}
.col.col-10{
	flex: 0 10%;
	width: 10%;
}
.col.col-10.auto-spacer{
	max-width: calc(10% - var(--autospacer-gap));
}
.col.col-15{
	flex: 0 15%;
	width: 15%;
}
.col.col-15.auto-spacer{
	max-width: calc(15% - var(--autospacer-gap));
}
.col.col-16{
	flex: 0 16.66%;
	width: 16.66%;
}
.col.col-16.auto-spacer{
	max-width: calc(16.66% - var(--autospacer-gap));
}
.col.col-20{
	flex: 0 20%;
	width: 20%;
}
.col.col-20.auto-spacer{
	max-width: calc(20% - var(--autospacer-gap));
}
.col.col-25{
	flex: 0 25%;
	width: 25%
}
.col.col-25.auto-spacer{
	max-width: calc(25% - var(--autospacer-gap));
}
.col.col-30{
	flex: 0 30%;
	width: 30%;
}
.col.col-30.auto-spacer{
	max-width: calc(30% - var(--autospacer-gap));
}
.col.col-33{
	flex: 0 33.3%;
	width: 33.3%;
}
.col.col-33.auto-spacer{
	max-width: calc(33.3% - var(--autospacer-gap));
}
.col.col-35{
    flex: 0 35%;
    width: 35%;
}
.col.col-35.auto-spacer{
	max-width: calc(35% - var(--autospacer-gap));
}
.col.col-40{
	flex: 0 40%;
	width: 40%;
}
.col.col-40.auto-spacer{
	max-width: calc(40% - var(--autospacer-gap));
}
.col.col-45{
	flex: 0 45%;
	width: 45%;
}
.col.col-45.auto-spacer{
	max-width: calc(45% - var(--autospacer-gap));
}
.col.col-50{
	flex: 0 50%;
	width: 50%;
}
.col.col-50.auto-spacer{
	max-width: calc(50% - var(--autospacer-gap));
}
.col.col-55{
    flex: 0 55%;
    width: 55%;
}
.col.col-55.auto-spacer{
	max-width: calc(55% - var(--autospacer-gap));
}
.col.col-60{
    flex: 0 60%;
    width: 60%;
}
.col.col-60.auto-spacer{
	max-width: calc(60% - var(--autospacer-gap));
}
.col.col-65{
    flex: 0 65%;
    width: 65%;
}
.col.col-65.auto-spacer{
	max-width: calc(65% - var(--autospacer-gap));
}
.col.col-66{
	flex: 0 66.6%;
	width: 66.6%;
}
.col.col-66.auto-spacer{
	max-width: calc(66.6% - var(--autospacer-gap));
}
.col.col-70{
	flex: 0 70%;
	width: 70%;
}
.col.col-70.auto-spacer{
	max-width: calc(70% - var(--autospacer-gap));
}
.col.col-75{
	flex: 0 75%;
	width: 75%
}
.col.col-75.auto-spacer{
	max-width: calc(75% - var(--autospacer-gap));
}
.col.col-80{
	flex: 0 80%;
	width: 80%;
}
.col.col-80.auto-spacer{
	max-width: calc(80% - var(--autospacer-gap));
}
.col.col-85{
	flex: 0 85%;
	width: 85%;
}
.col.col-85.auto-spacer{
	max-width: calc(85% - var(--autospacer-gap));
}
.col.col-90{
    flex: 0 90%;
    width: 90%;
}
.col.col-90.auto-spacer{
	max-width: calc(90% - var(--autospacer-gap));
}
.col.col-95{
    flex: 0 95%;
    width: 95%;
}
.col.col-95.auto-spacer{
	max-width: calc(95% - var(--autospacer-gap));
}
.col.col-100{
	flex: 0 100%;
	width: 100%;
}	
.col.col-100.auto-spacer{
	max-width: 100%;
}
.col.col-initial{
	flex: initial;
	width: fit-content;
}
.col.col-fill{
	flex: 1;
}

@media only screen and (max-width: 600px){
	:root{
		--autospacer-gap: .2rem;
	}
	.flex-xs-hide{
		display: none !important;
	}
	.flex-xs-show{
		display: flex !important;
	}
	.col-xs-show{
		display: block;
	}
	.col-xs-hide{
		display: none;
	}
	.col.col-xs-5{
		flex: 0 5%;
		width: 5%;
	}
	.col.col-xs-5.auto-spacer{
		max-width: calc(5% - var(--autospacer-gap));
	}
	.col.col-xs-10{
		flex: 0 10%;
		width: 10%;
	}
	.col.col-xs-10.auto-spacer{
		max-width: calc(10% - var(--autospacer-gap));
	}
	.col.col-xs-15{
		flex: 0 15%;
		width: 15%;
	}
	.col.col-xs-15.auto-spacer{
		max-width: calc(15% - var(--autospacer-gap));
	}
	.col.col-xs-16{
		flex: 0 16.66%;
		width: 16.66%;
	}
	.col.col-xs-16.auto-spacer{
		max-width: calc(16.66% - var(--autospacer-gap));
	}
	.col.col-xs-20{
		flex: 0 20%;
		width: 20%;
	}
	.col.col-xs-20.auto-spacer{
		max-width: calc(20% - var(--autospacer-gap));
	}
	.col.col-xs-25{
		flex: 0 25%;
		width: 25%;
	}
	.col.col-xs-25.auto-spacer{
		max-width: calc(25% - var(--autospacer-gap));
	}
	.col.col-xs-30{
		flex: 0 30%;
		width: 30%;
	}
	.col.col-xs-30.auto-spacer{
		max-width: calc(30% - var(--autospacer-gap));
	}
	.col.col-xs-33{
		flex: 0 33.3%;
		width: 33.3%;
	}
	.col.col-xs-33.auto-spacer{
		max-width: calc(33.3% - var(--autospacer-gap));
	}
	.col.col-xs-35{
		flex: 0 35%;
		width: 35%;
	}
	.col.col-xs-35.auto-spacer{
		max-width: calc(35% - var(--autospacer-gap));
	}
	.col.col-xs-40{
		flex: 0 40%;
		width: 40%;
	}
	.col.col-xs-40.auto-spacer{
		max-width: calc(40% - var(--autospacer-gap));
	}
	.col.col-xs-45{
		flex: 0 45%;
		width: 45%;
	}
	.col.col-xs-45.auto-spacer{
		max-width: calc(45% - var(--autospacer-gap));
	}
	.col.col-xs-50{
		flex: 0 50%;
		width: 50%;
	}
	.col.col-xs-50.auto-spacer{
		max-width: calc(50% - var(--autospacer-gap));
	}
	.col.col-xs-55{
		flex: 0 55%;
		width: 55%;
	}
	.col.col-xs-55.auto-spacer{
		max-width: calc(55% - var(--autospacer-gap));
	}
	.col.col-xs-60{
		flex: 0 60%;
		width: 60%;
	}
	.col.col-xs-60.auto-spacer{
		max-width: calc(60% - var(--autospacer-gap));
	}
	.col.col-xs-65{
		flex: 0 65%;
		width: 65%;
	}
	.col.col-xs-65.auto-spacer{
		max-width: calc(65% - var(--autospacer-gap));
	}
	.col.col-xs-66{
		flex: 0 66.6%;
		width: 66.6%;
	}
	.col.col-xs-66.auto-spacer{
		max-width: calc(66.6% - var(--autospacer-gap));
	}
	.col.col-xs-70{
		flex: 0 70%;
		width: 70%;
	}
	.col.col-xs-70.auto-spacer{
		max-width: calc(70% - var(--autospacer-gap));
	}
	.col.col-xs-75{
		flex: 0 75%;
		width: 75%;
	}
	.col.col-xs-75.auto-spacer{
		max-width: calc(75% - var(--autospacer-gap));
	}
	.col.col-xs-80{
		flex: 0 80%;
		width: 80%;
	}
	.col.col-xs-80.auto-spacer{
		max-width: calc(80% - var(--autospacer-gap));
	}
	.col.col-xs-85{
		flex: 0 85%;
		width: 85%;
	}
	.col.col-xs-85.auto-spacer{
		max-width: calc(85% - var(--autospacer-gap));
	}
	.col.col-xs-90{
		flex: 0 90%;
		width: 90%;
	}
	.col.col-xs-90.auto-spacer{
		max-width: calc(90% - var(--autospacer-gap));
	}
	.col.col-xs-95{
		flex: 0 95%;
		width: 95%;
	}
	.col.col-xs-95.auto-spacer{
		max-width: calc(95% - var(--autospacer-gap));
	}
	.col.col-xs-100{
		flex: 0 100%;
		width: 100%;
	}
	.col.col-xs-100.auto-spacer{
		max-width: 100%;
	}
	.col.col-xs-initial{
		flex: initial;
		width: fit-content;
	}
	.col.col-xs-fill{
		flex: 1;
	}
}
/* sm */
@media only screen and (min-width: 600px){
	:root{
		--autospacer-gap: .2rem;
	}
	.flex-sm-hide{
		display: none !important;
	}
	.flex-sm-show{
		display: flex !important;
	}
	.col-sm-show{
		display: block;
	}
	.col-sm-hide{
		display: none;
	}
	.col.col-sm-5{
		flex: 0 5%;
		width: 5%;
	}
	.col.col-sm-5.auto-spacer{
		max-width: calc(5% - var(--autospacer-gap));
	}
	.col.col-sm-10{
		flex: 0 10%;
		width: 10%;
	}
	.col.col-sm-10.auto-spacer{
		max-width: calc(10% - var(--autospacer-gap));
	}
	.col.col-sm-15{
		flex: 0 15%;
		width: 15%;
	}
	.col.col-sm-15.auto-spacer{
		max-width: calc(15% - var(--autospacer-gap));
	}
	.col.col-sm-16{
		flex: 0 16.66%;
		width: 16.66%;
	}
	.col.col-sm-16.auto-spacer{
		max-width: calc(16.66% - var(--autospacer-gap));
	}
	.col.col-sm-20{
		flex: 0 20%;
		width: 20%;
	}
	.col.col-sm-20.auto-spacer{
		max-width: calc(20% - var(--autospacer-gap));
	}
	.col.col-sm-25{
		flex: 0 25%;
		width: 25%;
	}
	.col.col-sm-25.auto-spacer{
		max-width: calc(25% - var(--autospacer-gap));
	}
	.col.col-sm-30{
		flex: 0 30%;
		width: 30%;
	}
	.col.col-sm-30.auto-spacer{
		max-width: calc(30% - var(--autospacer-gap));
	}
	.col.col-sm-33{
		flex: 0 33.3%;
		width: 33.3%;
	}
	.col.col-sm-33.auto-spacer{
		max-width: calc(33.3% - var(--autospacer-gap));
	}
	.col.col-sm-35{
		flex: 0 35%;
		width: 35%;
	}
	.col.col-sm-35.auto-spacer{
		max-width: calc(35% - var(--autospacer-gap));
	}
	.col.col-sm-40{
		flex: 0 40%;
		width: 40%;
	}
	.col.col-sm-40.auto-spacer{
		max-width: calc(40% - var(--autospacer-gap));
	}
	.col.col-sm-45{
		flex: 0 45%;
		width: 45%;
	}
	.col.col-sm-45.auto-spacer{
		max-width: calc(45% - var(--autospacer-gap));
	}
	.col.col-sm-50{
		flex: 0 50%;
		width: 50%;
	}
	.col.col-sm-50.auto-spacer{
		max-width: calc(50% - var(--autospacer-gap));
	}
	.col.col-sm-55{
		flex: 0 55%;
		width: 55%;
	}
	.col.col-sm-55.auto-spacer{
		max-width: calc(55% - var(--autospacer-gap));
	}
	.col.col-sm-60{
		flex: 0 60%;
		width: 60%;
	}
	.col.col-sm-60.auto-spacer{
		max-width: calc(60% - var(--autospacer-gap));
	}
	.col.col-sm-65{
		flex: 0 65%;
		width: 65%;
	}
	.col.col-sm-65.auto-spacer{
		max-width: calc(65% - var(--autospacer-gap));
	}
	.col.col-sm-66{
		flex: 0 66.6%;
		width: 66.6%;
	}
	.col.col-sm-66.auto-spacer{
		max-width: calc(66.6% - var(--autospacer-gap));
	}
	.col.col-sm-70{
		flex: 0 70%;
		width: 70%;
	}
	.col.col-sm-70.auto-spacer{
		max-width: calc(70% - var(--autospacer-gap));
	}
	.col.col-sm-75{
		flex: 0 75%;
		width: 75%;
	}
	.col.col-sm-75.auto-spacer{
		max-width: calc(75% - var(--autospacer-gap));
	}
	.col.col-sm-80{
		flex: 0 80%;
		width: 80%;
	}
	.col.col-sm-80.auto-spacer{
		max-width: calc(80% - var(--autospacer-gap));
	}
	.col.col-sm-85{
		flex: 0 85%;
		width: 85%;
	}
	.col.col-sm-85.auto-spacer{
		max-width: calc(85% - var(--autospacer-gap));
	}
	.col.col-sm-90{
		flex: 0 90%;
		width: 90%;
	}
	.col.col-sm-90.auto-spacer{
		max-width: calc(90% - var(--autospacer-gap));
	}
	.col.col-sm-95{
		flex: 0 95%;
		width: 95%;
	}
	.col.col-sm-95.auto-spacer{
		max-width: calc(95% - var(--autospacer-gap));
	}
	.col.col-sm-100{
		flex: 0 100%;
		width: 100%;
	}
	.col.col-sm-100.auto-spacer{
		max-width: 100%;
	}
	.col.col-sm-initial{
		flex: initial;
		width: fit-content;
	}
	.col.col-sm-fill{
		flex: 1;
	}
}
/* md */
@media only screen and (min-width: 768px){
	:root{
		--autospacer-gap: .2rem;
	}
	.flex-md-hide{
		display: none !important;
	}
	.flex-md-show{
		display: flex !important;
	}
	.col-md-show{
		display: block;
	}
	.col-md-hide{
		display: none;
	}
	.col.col-md-5{
		flex: 0 5%;
		width: 5%;
	}
	.col.col-md-5.auto-spacer{
		max-width: calc(5% - var(--autospacer-gap));
	}
	.col.col-md-10{
		flex: 0 10%;
		width: 10%;
	}
	.col.col-md-10.auto-spacer{
		max-width: calc(10% - var(--autospacer-gap));
	}
	.col.col-md-15{
		flex: 0 15%;
		width: 15%;
	}
	.col.col-md-15.auto-spacer{
		max-width: calc(15% - var(--autospacer-gap));
	}
	.col.col-md-16{
		flex: 0 16.66%;
		width: 16.66%;
	}
	.col.col-md-16.auto-spacer{
		max-width: calc(16.66% - var(--autospacer-gap));
	}
	.col.col-md-20{
		flex: 0 20%;
		width: 20%;
	}
	.col.col-md-20.auto-spacer{
		max-width: calc(20% - var(--autospacer-gap));
	}
	.col.col-md-25{
		flex: 0 25%;
		width: 25%;
	}
	.col.col-md-25.auto-spacer{
		max-width: calc(25% - var(--autospacer-gap));
	}
	.col.col-md-30{
		flex: 0 30%;
		width: 30%;
	}
	.col.col-md-30.auto-spacer{
		max-width: calc(30% - var(--autospacer-gap));
	}
	.col.col-md-33{
		flex: 0 33.3%;
		width: 33.3%;
	}
	.col.col-md-33.auto-spacer{
		max-width: calc(33.3% - var(--autospacer-gap));
	}
	.col.col-md-35{
		flex: 0 35%;
		width: 35%;
	}
	.col.col-md-35.auto-spacer{
		max-width: calc(35% - var(--autospacer-gap));
	}
	.col.col-md-40{
		flex: 0 40%;
		width: 40%;
	}
	.col.col-md-40.auto-spacer{
		max-width: calc(40% - var(--autospacer-gap));
	}
	.col.col-md-45{
		flex: 0 45%;
		width: 45%;
	}
	.col.col-md-45.auto-spacer{
		max-width: calc(45% - var(--autospacer-gap));
	}
	.col.col-md-50{
		flex: 0 50%;
		width: 50%;
	}
	.col.col-md-50.auto-spacer{
		max-width: calc(50% - var(--autospacer-gap));
	}
	.col.col-md-55{
		flex: 0 55%;
		width: 55%;
	}
	.col.col-md-55.auto-spacer{
		max-width: calc(55% - var(--autospacer-gap));
	}
	.col.col-md-60{
		flex: 0 60%;
		width: 60%;
	}
	.col.col-md-60.auto-spacer{
		max-width: calc(60% - var(--autospacer-gap));
	}
	.col.col-md-65{
		flex: 0 65%;
		width: 65%;
	}
	.col.col-md-65.auto-spacer{
		max-width: calc(65% - var(--autospacer-gap));
	}
	.col.col-md-66{
		flex: 0 66.6%;
		width: 66.6%;
	}
	.col.col-md-66.auto-spacer{
		max-width: calc(66.6% - var(--autospacer-gap));
	}
	.col.col-md-70{
		flex: 0 70%;
		width: 70%;
	}
	.col.col-md-70.auto-spacer{
		max-width: calc(70% - var(--autospacer-gap));
	}
	.col.col-md-75{
		flex: 0 75%;
		width: 75%;
	}
	.col.col-md-75.auto-spacer{
		max-width: calc(75% - var(--autospacer-gap));
	}
	.col.col-md-80{
		flex: 0 80%;
		width: 80%;
	}
	.col.col-md-80.auto-spacer{
		max-width: calc(80% - var(--autospacer-gap));
	}
	.col.col-md-85{
		flex: 0 85%;
		width: 85%;
	}
	.col.col-md-85.auto-spacer{
		max-width: calc(85% - var(--autospacer-gap));
	}
	.col.col-md-90{
		flex: 0 90%;
		width: 90%;
	}
	.col.col-md-90.auto-spacer{
		max-width: calc(90% - var(--autospacer-gap));
	}
	.col.col-md-95{
		flex: 0 95%;
		width: 95%;
	}
	.col.col-md-95.auto-spacer{
		max-width: calc(95% - var(--autospacer-gap));
	}
	.col.col-md-100{
		flex: 0 100%;
		width: 100%;
	}
	.col.col-md-100.auto-spacer{
		max-width: 100%;
	}
	.col.col-md-initial{
		flex: initial;
		width: fit-content;
	}
	.col.col-md-fill{
		flex: 1;
	}
}
/* lg */
@media only screen and (min-width: 992px){
	:root{
		--autospacer-gap: .25rem;
	}
	.flex-lg-hide{
		display: none !important;
	}
	.flex-lg-show{
		display: flex !important;
	}
	.col-lg-show{
		display: block;
	}
	.col-lg-hide{
		display: none;
	}
	.col.col-lg-5{
		flex: 0 5%;
		width: 5%;
	}
	.col.col-lg-5.auto-spacer{
		max-width: calc(5% - var(--autospacer-gap));
	}
	.col.col-lg-10{
		flex: 0 10%;
		width: 10%;
	}
	.col.col-lg-10.auto-spacer{
		max-width: calc(10% - var(--autospacer-gap));
	}
	.col.col-lg-15{
		flex: 0 15%;
		width: 15%;
	}
	.col.col-lg-15.auto-spacer{
		max-width: calc(15% - var(--autospacer-gap));
	}
	.col.col-lg-16{
		flex: 0 16.66%;
		width: 16.66%;
	}
	.col.col-lg-16.auto-spacer{
		max-width: calc(16.66% - var(--autospacer-gap));
	}
	.col.col-lg-20{
		flex: 0 20%;
		width: 20%;
	}
	.col.col-lg-20.auto-spacer{
		max-width: calc(20% - var(--autospacer-gap));
	}
	.col.col-lg-25{
		flex: 0 25%;
		width: 25%;
	}
	.col.col-lg-25.auto-spacer{
		max-width: calc(25% - var(--autospacer-gap));
	}
	.col.col-lg-30{
		flex: 0 30%;
		width: 30%;
	}
	.col.col-lg-30.auto-spacer{
		max-width: calc(30% - var(--autospacer-gap));
	}
	.col.col-lg-33{
		flex: 0 33.3%;
		width: 33.3%;
	}
	.col.col-lg-33.auto-spacer{
		max-width: calc(33.3% - var(--autospacer-gap));
	}
	.col.col-lg-35{
		flex: 0 35%;
		width: 35%;
	}
	.col.col-lg-35.auto-spacer{
		max-width: calc(35% - var(--autospacer-gap));
	}
	.col.col-lg-40{
		flex: 0 40%;
		width: 40%;
	}
	.col.col-lg-40.auto-spacer{
		max-width: calc(40% - var(--autospacer-gap));
	}
	.col.col-lg-45{
		flex: 0 45%;
		width: 45%;
	}
	.col.col-lg-45.auto-spacer{
		max-width: calc(45% - var(--autospacer-gap));
	}
	.col.col-lg-50{
		flex: 0 50%;
		width: 50%;
	}
	.col.col-lg-50.auto-spacer{
		max-width: calc(50% - var(--autospacer-gap));
	}
	.col.col-lg-55{
		flex: 0 55%;
		width: 55%;
	}
	.col.col-lg-55.auto-spacer{
		max-width: calc(55% - var(--autospacer-gap));
	}
	.col.col-lg-60{
		flex: 0 60%;
		width: 60%;
	}
	.col.col-lg-60.auto-spacer{
		max-width: calc(60% - var(--autospacer-gap));
	}
	.col.col-lg-65{
		flex: 0 65%;
		width: 65%;
	}
	.col.col-lg-65.auto-spacer{
		max-width: calc(65% - var(--autospacer-gap));
	}
	.col.col-lg-66{
		flex: 0 66.6%;
		width: 66.6%;
	}
	.col.col-lg-66.auto-spacer{
		max-width: calc(66.6% - var(--autospacer-gap));
	}
	.col.col-lg-70{
		flex: 0 70%;
		width: 70%;
	}
	.col.col-lg-70.auto-spacer{
		max-width: calc(70% - var(--autospacer-gap));
	}
	.col.col-lg-75{
		flex: 0 75%;
		width: 75%;
	}
	.col.col-lg-75.auto-spacer{
		max-width: calc(75% - var(--autospacer-gap));
	}
    .col.col-lg-80{
        flex: 0 80%;
        width: 80%;
    }
	.col.col-lg-80.auto-spacer{
		max-width: calc(80% - var(--autospacer-gap));
	}
	.col.col-lg-85{
		flex: 0 85%;
		width: 85%;
	}
	.col.col-lg-85.auto-spacer{
		max-width: calc(85% - var(--autospacer-gap));
	}
	.col.col-lg-90{
		flex: 0 90%;
		width: 90%;
	}
	.col.col-lg-90.auto-spacer{
		max-width: calc(90% - var(--autospacer-gap));
	}
	.col.col-lg-95{
		flex: 0 95%;
		width: 95%;
	}
	.col.col-lg-95.auto-spacer{
		max-width: calc(95% - var(--autospacer-gap));
	}
	.col.col-lg-100{
		flex: 0 100%;
		width: 100%;
	}
	.col.col-lg-100.auto-spacer{
		max-width: 100%;
	}
	.col.col-lg-initial{
		flex: initial;
		width: fit-content;
	}
	.col.col-lg-fill{
		flex: 1;
	}
}
/* xl */
@media only screen and (min-width: 1200px){
	:root{
		--autospacer-gap: .3rem;
	}
	.flex-xl-hide{
		display: none !important;
	}
	.flex-xl-show{
		display: flex !important;
	}
	.col-xl-show{
		display: block;
	}
	.col-xl-hide{
		display: none;
	}
	.col.col-xl-5{
		flex: 0 5%;
		width: 5%;
	}
	.col.col-xl-5.auto-spacer{
		max-width: calc(5% - var(--autospacer-gap));
	}
	.col.col-xl-10{
		flex: 0 10%;
		width: 10%;
	}
	.col.col-xl-10.auto-spacer{
		max-width: calc(10% - var(--autospacer-gap));
	}
	.col.col-xl-15{
		flex: 0 15%;
		width: 15%;
	}
	.col.col-xl-15.auto-spacer{
		max-width: calc(15% - var(--autospacer-gap));
	}
	.col.col-xl-16{
		flex: 0 16.66%;
		width: 16.66%;
	}
	.col.col-xl-16.auto-spacer{
		max-width: calc(16.66% - var(--autospacer-gap));
	}
	.col.col-xl-20{
		flex: 0 20%;
		width: 20%;
	}
	.col.col-xl-20.auto-spacer{
		max-width: calc(20% - var(--autospacer-gap));
	}
	.col.col-xl-25{
		flex: 0 25%;
		width: 25%;
	}
	.col.col-xl-25.auto-spacer{
		max-width: calc(25% - var(--autospacer-gap));
	}
	.col.col-xl-30{
		flex: 0 30%;
		width: 30%;
	}
	.col.col-xl-30.auto-spacer{
		max-width: calc(30% - var(--autospacer-gap));
	}
	.col.col-xl-33{
		flex: 0 33.3%;
		width: 33.3%;
	}
	.col.col-xl-33.auto-spacer{
		max-width: calc(33.3% - var(--autospacer-gap));
	}
	.col.col-xl-35{
		flex: 0 35%;
		width: 35%;
	}
	.col.col-xl-35.auto-spacer{
		max-width: calc(35% - var(--autospacer-gap));
	}
	.col.col-xl-40{
		flex: 0 40%;
		width: 40%;
	}
	.col.col-xl-40.auto-spacer{
		max-width: calc(40% - var(--autospacer-gap));
	}
	.col.col-xl-45{
		flex: 0 45%;
		width: 45%;
	}
	.col.col-xl-45.auto-spacer{
		max-width: calc(45% - var(--autospacer-gap));
	}
	.col.col-xl-50{
		flex: 0 50%;
		width: 50%;
	}
	.col.col-xl-50.auto-spacer{
		max-width: calc(50% - var(--autospacer-gap));
	}
	.col.col-xl-55{
		flex: 0 55%;
		width: 55%;
	}
	.col.col-xl-55.auto-spacer{
		max-width: calc(55% - var(--autospacer-gap));
	}
	.col.col-xl-60{
		flex: 0 60%;
		width: 60%;
	}
	.col.col-xl-60.auto-spacer{
		max-width: calc(60% - var(--autospacer-gap));
	}
	.col.col-xl-65{
		flex: 0 65%;
		width: 65%;
	}
	.col.col-xl-65.auto-spacer{
		max-width: calc(65% - var(--autospacer-gap));
	}
	.col.col-xl-66{
		flex: 0 66.6%;
		width: 66.6%;
	}
	.col.col-xl-66.auto-spacer{
		max-width: calc(66.6% - var(--autospacer-gap));
	}
	.col.col-xl-70{
		flex: 0 70%;
		width: 70%;
	}
	.col.col-xl-70.auto-spacer{
		max-width: calc(70% - var(--autospacer-gap));
	}
	.col.col-xl-75{
		flex: 0 75%;
		width: 75%;
	}
	.col.col-xl-75.auto-spacer{
		max-width: calc(75% - var(--autospacer-gap));
	}
	.col.col-xl-80{
		flex: 0 80%;
		width: 80%;
	}
	.col.col-xl-80.auto-spacer{
		max-width: calc(80% - var(--autospacer-gap));
	}
	.col.col-xl-85{
		flex: 0 85%;
		width: 85%;
	}
	.col.col-xl-85.auto-spacer{
		max-width: calc(85% - var(--autospacer-gap));
	}
	.col.col-xl-90{
		flex: 0 90%;
		width: 90%;
	}
	.col.col-xl-90.auto-spacer{
		max-width: calc(90% - var(--autospacer-gap));
	}
	.col.col-xl-95{
		flex: 0 95%;
		width: 95%;
	}
	.col.col-xl-95.auto-spacer{
		max-width: calc(95% - var(--autospacer-gap));
	}
	.col.col-xl-100{
		flex: 0 100%;
		width: 100%;
	}
	.col.col-xl-100.auto-spacer{
		max-width: 100%;
	}
	.col.col-xl-initial{
		flex: initial;
		width: fit-content;
	}
	.col.col-xl-fill{
		flex: 1;
	}
}
/* cs-button */
/* update this for diff site */
:root{
	--btn-color-gray: #333;
}
/* not using below css for this project*/
/* .btn{
	margin: 10px 0;
	font-family: inherit;
    font-size: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background-color: #e6e6e6;
}
.btn:hover{
	opacity: .8;
}
.btn > .icon{
	margin-right: 10px;
}
.btn-white{
	background-color: white;
	color: var(--btn-color-gray);
}
.btn > a {
	text-decoration: none;
	border-bottom: none;
	color: inherit !important;
}
button.btn{
	border: none;
	font-weight: 600;
}
button.btn:focus{
	outline: none;
}
button.btn:disabled{
	cursor:	not-allowed;
} */
button.btn > span + span:not(.ptooltiptext){ /* add a space between icon and text */
	margin-left: 8px;
}
.btn-nobg{
	background-color: transparent !important;
}

/*** a row of buttons **/
div.flex > .btn:not(:last-child){
	margin-right: 8px;
}

/* xs */
@media only screen and (max-width: 600px){
	.btn{
		border-radius: .25rem;
	}
	.btn.btn-lg{
		font-size: 0.9375em;
		line-height: 1.125em;
	}
	.btn.btn-md{
		font-size: 0.9375em;
		line-height: 1.125em;
	}
	.btn.btn-sm{
		font-size: 0.8125em;
		line-height: 1em;
	}
	.btn.btn-lg{
		padding: 18px 30px;
	}
	.btn.btn-md{
		padding: 15px 20px;
	}
	.btn.btn-sm{
		padding: 10px 15px;
	}
}
/* sm */
@media only screen and (min-width: 600px){
	.btn{
		border-radius: .25rem;
	}
	.btn.btn-lg{
		font-size: 0.9375em;
		line-height: 1.125em;
	}
	.btn.btn-md{
		font-size: 0.9375em;
		line-height: 1.125em;
	}
	.btn.btn-sm{
		font-size: 0.8125em;
		line-height: 1em;
	}
	.btn.btn-lg{
		padding: 18px 30px;
	}
	.btn.btn-md{
		padding: 15px 20px;
	}
	.btn.btn-sm{
		padding: 10px 15px;
	}
}
/* md */
@media only screen and (min-width: 768px){
	.btn{
		border-radius: .25rem;
	}
	.btn.btn-lg{
		font-size: 1em;
		line-height: 1.25em;
	}
	.btn.btn-md{
		font-size: 0.9375em;
		line-height: 1.125em;
	}
	.btn.btn-sm{
		font-size: 0.8125em;
		line-height: 1em;
	}
	.btn.btn-lg{
		padding: 18px 30px;
	}
	.btn.btn-md{
		padding: 13px 20px;
	}
	.btn.btn-sm{
		padding: 10px 15px;
	}
}
/* lg */
@media only screen and (min-width: 992px){
	
}
@media only screen and (min-width: 1200px){

}
/* xl */
@media only screen and (min-width: 1281px){
	.btn{
		border-radius: .3vw;
	}
	.btn.btn-lg{
		padding: 1vw 2vw;
	}
	.btn.btn-md{
		padding: 12px 15px;
	}
}

table{
	border-collapse: collapse;
	width: 100%;
	margin: 16px 0;
	table-layout: fixed;
}
td, th{
	border: solid 1px #ddd;
	padding: 8px 10px;
}
tr:nth-child(even){
	background-color: var(--cs-gray-light);
}
thead > tr{
	background-color: var(--cs-gray-mid);
}

/* new-style */
/*********************************************************************
generic css for layout
***********************************************************************/
:root{
	--cs-primary-color: #e6e6e6;
	--cs-secondary-color: #ccc;
}
.popup-target{
	display: none !important;
}
.mock-page .popup-target{
	display: flex !important; /*so visible in editor*/
}
.popup-trigger{
	cursor: pointer;
}
.cscribe-container{
    overflow-x: hidden;
	overflow-y: hidden;
}
.cscribe-container > .section,
.cscribe-container > .cscribe-section{
	display: flex;
	width: 100%;
	position: relative;
	flex-wrap: wrap;
}
.cscribe-container > .section:not(.editing) .grid-template,
.cscribe-container > .cscribe-section:not(.editing) .grid-template{
	display: none !important;
}
.cscribe-container .cscribe-element{
	/* overflow: hidden; */
	word-wrap: break-word;
	width: -webkit-fill-available;
	width: fill-available;
}
/* xs */
@media only screen and (max-width: 600px){
	:root{
		--padding-universal: 15px; 
        --padding-universal-top: 40px;
		--spacer-gap: .3rem;
	}
	.cscribe-container > .section:not(.section-pseudo),
	.cscribe-container > .cscribe-section:not(.section-pseudo){
		padding: var(--padding-universal-top) var(--padding-universal);
	}
	.cscribe-container > .section.section-pseudo,
	.cscribe-container > .cscribe-section.section-pseudo{
		padding: var(--padding-universal-top) 0;
	}
}
/* sm */
@media only screen and (min-width: 600px){
	:root{
		--padding-universal: 15px; 
        --padding-universal-top: 40px;
		--spacer-gap: .5rem;
	}
	.cscribe-container > .section:not(.section-pseudo),
	.cscribe-container > .cscribe-section:not(.section-pseudo){
		padding: var(--padding-universal-top) var(--padding-universal);
	}
	.cscribe-container > .section.section-pseudo,
	.cscribe-container > .cscribe-section.section-pseudo{
		padding: var(--padding-universal-top) 0;
	}
}
/* md */
@media only screen and (min-width: 768px){
	:root{
		--padding-universal: 30px; 
        --padding-universal-top: 40px;
		--spacer-gap: .8rem;
	}
	.cscribe-container > .section:not(.section-pseudo),
	.cscribe-container > .cscribe-section:not(.section-pseudo){
		padding: var(--padding-universal-top) var(--padding-universal);
	}
	.cscribe-container > .section.section-pseudo,
	.cscribe-container > .cscribe-section.section-pseudo{
		padding:var(--padding-universal-top) 0;
	}
}
/* lg */
@media only screen and (min-width: 992px){
	:root{
		--padding-universal: 55px; 
        --padding-universal-top: 40px;
		--spacer-gap: 1rem;
	}
	.cscribe-container > .section:not(.section-pseudo),
	.cscribe-container > .cscribe-section:not(.section-pseudo){
		padding: var(--padding-universal-top) var(--padding-universal);
	}
	.cscribe-container > .section.section-pseudo,
	.cscribe-container > .cscribe-section.section-pseudo{
		padding: var(--padding-universal-top) 0;
	}
}
/* xl */
@media only screen and (min-width: 1501px){
    :root{
		--padding-universal: 12%; 
        --padding-universal-top: 40px;
	}
	.cscribe-container > .section:not(.section-pseudo){
		padding: var(--padding-universal-top) var(--padding-universal);
	}
	.cscribe-container > .section.section-pseudo{
		padding: var(--padding-universal-top) 0;
	}
}
/* do not set non-cscribe images to full width automatically */
.cscribe-container > .section[data-cstemplate="fullw"] img,
.cscribe-container > .cscribe-section[data-cstemplate="fullw"] img,
.cscribe-container > .section[data-cstemplate="lr"] img,
.cscribe-container > .cscribe-section[data-cstemplate="lr"] img{
	width: 100%;
	display: block;
}
p.no-margin{
	margin: 0;
}
.cscribe-container > .section .cs-carousel-wrapper,
.cscribe-container > .cscribe-section .cs-carousel-wrapper{
	position: relative;
	width: 100%;
}
.cscribe-container > .section .cs-carousel-wrapper > .cs-carousel-div,
.cscribe-container > .cscribe-section .cs-carousel-wrapper > .cs-carousel-div{
	flex-wrap: wrap;
}
.cscribe-container > .section div.csnav,
.cscribe-container > .cscribe-section div.csnav{
	position: absolute;
	width: 100%;
	display: flex;
	bottom: 50px;
	height: 100%;
	top: 0;
	align-items: center;
}
.cscribe-container > .section div.csnav > .csnav,
.cscribe-container > .cscribe-section div.csnav > .csnav{
	position: absolute;
	cursor: pointer;
	top: 0;
	font-size: 1.5rem;
}
.cscribe-container > .section div.csnav >  div.csnav.disabled,
.cscribe-container > .cscribe-section div.csnav >  div.csnav.disabled{
	opacity: .5;
	cursor: not-allowed;
}
.cscribe-container > .section div.csnav > .nav-left,
.cscribe-container > .cscribe-section div.csnav > .nav-left{
	left: 10px;
	width: fit-content;
}
.cscribe-container > .section div.csnav > .nav-right,
.cscribe-container > .cscribe-section div.csnav > .nav-right{
	right: 10px;
	width: fit-content;
}

/* xs */
@media only screen and (max-width: 600px){
}
/* sm */
@media only screen and (min-width: 600px){
}
/* md */
@media only screen and (min-width: 768px){
}
/* lg */
@media only screen and (min-width: 992px){
}
/* xl */
@media only screen and (min-width: 1200px){
}

.cscribe-container > .section .cscribe-element > p,
.cscribe-container > .cscribe-section .cscribe-element > p{
	padding: 0;
	margin: 0;
}
.cscribe-container > .section[data-cstemplate="fullw"],
.cscribe-container > .cscribe-section[data-cstemplate="fullw"]{
	padding-top: 0;
	padding-bottom: 0;
}
.cscribe-container > .section[data-cstemplate="fullw"] div.col > div,
.cscribe-container > .cscribe-section[data-cstemplate="fullw"] div.col > div  {
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}
.cscribe-container > .section[data-cstemplate="fullw"]:not(.has-text) .overlay-text,
.cscribe-container > .cscribe-section[data-cstemplate="fullw"]:not(.has-text) .overlay-text{
	display: none;
}
.cscribe-container > .section[data-cstemplate="fullw"].align-left .overlay-text,
.cscribe-container > .cscribe-section[data-cstemplate="fullw"].align-left .overlay-text{
	text-align: left;
}
.cscribe-container > .section[data-cstemplate="fullw"].align-center .overlay-text,
.cscribe-container > .cscribe-section[data-cstemplate="fullw"].align-center .overlay-text{
	text-align: center;
}
.cscribe-container > .section[data-cstemplate="fullw"].align-right .overlay-text,
.cscribe-container > .cscribe-section[data-cstemplate="fullw"].align-right .overlay-text{
	text-align: right;
}
.cscribe-container > .section[data-cstemplate="fullw"] div.col,
.cscribe-container > .cscribe-section[data-cstemplate="fullw"] div.col{
	position: relative;
	width: 100%;
	/* height: 100%; */
}
.cscribe-container > .section[data-cstemplate="fullw"] div.col > div.cscribe-element img,
.cscribe-container > .cscribe-section[data-cstemplate="fullw"] div.col > div.cscribe-element img{
	object-fit: cover;
	width: 100%;
	height: 100%;
	display: block;
	max-height: 400px;
}
.cscribe-container > .section[data-cstemplate="fullw"]:not(.editing) .overlay-text,
.cscribe-container > .cscribe-section[data-cstemplate="fullw"]:not(.editing) .overlay-text{
	opacity: 0;
	right: -100%;
	overflow: hidden;
}
.cscribe-container > .section[data-cstemplate="fullw"].abovefold .overlay-text,
.cscribe-container > .cscribe-section[data-cstemplate="fullw"].abovefold .overlay-text{
	opacity: 1;
}
.cscribe-container > .section[data-cstemplate="lr"] > div.col,
.cscribe-container > .section[data-cstemplate="lr"] > div.grid-template-parent > div.col > div.flex > div.col,
.cscribe-container > .cscribe-section[data-cstemplate="lr"] > div.col,
.cscribe-container > .cscribe-section[data-cstemplate="lr"] > div.grid-template-parent > div.col > div.flex > div.col{
	display: flex;
	flex-direction: column;
}
.cscribe-container > .section[data-cstemplate="lr"].editing div.col,
.cscribe-container > .cscribe-section[data-cstemplate="lr"].editing div.col{
	transition: all .5s; /* for edit effect */
}
.mock-page > .cscribe-container > .section img,
.mock-page > .cscribe-container > .cscribe-section img{
	cursor: pointer;
}
.cscribe-container > .section[data-cstemplate="lr"] div.col > div.cscribe-element,
.cscribe-container > .cscribe-section[data-cstemplate="lr"] div.col > div.cscribe-element{
	flex-grow: 1;
	transition: all .5s; /* for edit effect */
}
.cscribe-container > .section[data-cstemplate="lr"] > div.col:first-child p,
.cscribe-container > .section[data-cstemplate="lr"] > div.grid-template-parent > div.col > div.flex > div.col:first-child p,
.cscribe-container > .cscribe-section[data-cstemplate="lr"] > div.col:first-child p,
.cscribe-container > .cscribe-section[data-cstemplate="lr"] > div.grid-template-parent > div.col > div.flex > div.col:first-child p{
	height: 100%;
}
.cscribe-container > .section[data-cstemplate="lr"] > div.col:first-child p > img,
.cscribe-container > .section[data-cstemplate="lr"] > div.grid-template-parent > div.col > div.flex > div.col:first-child p > img,
.cscribe-container > .cscribe-section[data-cstemplate="lr"] > div.col:first-child p > img,
.cscribe-container > .cscribe-section[data-cstemplate="lr"] > div.grid-template-parent > div.col > div.flex > div.col:first-child p > img{
	height: 100%;
	object-fit: cover;
}

/* xs, sm and md */
@media only screen and (max-width: 991px){
	.cscribe-container > .section[data-cstemplate="fullw"] .overlay-text,
	.cscribe-container > .cscribe-section[data-cstemplate="fullw"] .overlay-text{
		position: relative;
		padding: 1rem 1.5rem;
	}
	.cscribe-container > .section[data-cstemplate="fullw"].abovefold .overlay-text,
	.cscribe-container > .cscribe-section[data-cstemplate="fullw"].abovefold .overlay-text{
		opacity: 1;
		right: 0;
	}
	.cscribe-container > .section[data-cstemplate="fullw"] > div.col > div:first-child,
	.cscribe-container > .cscribe-section[data-cstemplate="fullw"] > div.col > div:first-child{
		left: -100%;
		opacity: 0;
	}
	.cscribe-container > .section[data-cstemplate="fullw"].abovefold > div.col > div:first-child,
	.cscribe-container > .cscribe-section[data-cstemplate="fullw"].abovefold > div.col > div:first-child{
		opacity: 1;
		left: 0;
	}
	.cscribe-container > .section[data-cstemplate="fullw"] div.cscribe-element:not(.overlay-text),
	.cscribe-container > .cscribe-section[data-cstemplate="fullw"] div.cscribe-element:not(.overlay-text){
		position: relative;
		width: 100%;
	}

	.cscribe-container > .section[data-cstemplate="lr"].reverse,
	.cscribe-container > .section[data-cstemplate="lr"].reverse > .grid-template-parent > .col > .flex,
	.cscribe-container > .cscribe-section[data-cstemplate="lr"].reverse,
	.cscribe-container > .cscribe-section[data-cstemplate="lr"].reverse > .grid-template-parent > .col > .flex{
		flex-direction: column-reverse;
	}
}
/* lg */
@media only screen and (min-width: 992px){
	.cscribe-container > .section[data-cstemplate="fullw"] .overlay-text,
	.cscribe-container > .cscribe-section[data-cstemplate="fullw"] .overlay-text{
		position: absolute;
		/* width: 100%;
		height: 100%;
		background-color: rgba(250, 250, 250, .5); 
		padding: 1rem 2rem; 
		transform: translate(-50%, -50%); 
		top: 50%; 
		left: 50%; */
	}
	.cscribe-container > .section[data-cstemplate="fullw"] > div.col > div:last-child.cs-carousel-wrapper,
	.cscribe-container > .cscribe-section[data-cstemplate="fullw"] > div.col > div:last-child.cs-carousel-wrapper{
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.cscribe-container > .section[data-cstemplate="fullw"] > div.col > div:last-child.cs-carousel-wrapper .cscribe-element,
	.cscribe-container > .cscribe-section[data-cstemplate="fullw"] > div.col > div:last-child.cs-carousel-wrapper .cscribe-element{
		position: absolute;
	}
	.cscribe-container > .section[data-cstemplate="fullw"].abovefold .overlay-text,
	.cscribe-container > .cscribe-section[data-cstemplate="fullw"].abovefold .overlay-text{
		opacity: 1;
		right: 10%;
	}
	.cscribe-container > .section[data-cstemplate="fullw"] > div.col > div:first-child,
	.cscribe-container > .cscribe-section[data-cstemplate="fullw"] > div.col > div:first-child{
		top: 10%;
		left: 0;
		opacity: 0;
	}
	.cscribe-container > .section[data-cstemplate="fullw"].abovefold > div.col > div:first-child,
	.cscribe-container > .cscribe-section[data-cstemplate="fullw"].abovefold > div.col > div:first-child{
		opacity: 1;
		top: 0;
	}
	.cscribe-container > .section[data-cstemplate="fullw"] div.cscribe-element:not(.overlay-text),
	.cscribe-container > .cscribe-section[data-cstemplate="fullw"] div.cscribe-element:not(.overlay-text){
		position: relative;
		width: 100%;
		height: 100%;
	}

	.cscribe-container > .section[data-cstemplate="lr"].reverse,
	.cscribe-container > .section[data-cstemplate="lr"].reverse > .grid-template-parent > .col > .flex,
	.cscribe-container > .cscribe-section[data-cstemplate="lr"].reverse,
	.cscribe-container > .cscribe-section[data-cstemplate="lr"].reverse > .grid-template-parent > .col > .flex{
		flex-direction: row-reverse;
	}
}

.grid-template-parent{
	display: flex;
	width: 100%;
}
.grid-template-parent:not(.cs-carousel-div){
	flex-wrap: wrap;
}
.cscribe-container > .section.editing .grid-template-parent,
.cscribe-container > .cscribe-section.editing .grid-template-parent{
	overflow: auto;
}
.cscribe-container > .section.editing .grid-template,
.cscribe-container > .cscribe-section.editing .grid-template{
	position: relative;
	cursor: pointer;   
}
.cscribe-container > .section.editing .grid-template:after,
.cscribe-container > .cscribe-section.editing .grid-template:after{
	position: absolute;
	content: '+';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: white;
	background-color: rgba(75,148,186,0.3);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 3rem;
	font-weight: 700;
	border: dotted 2px var(--cs-gray-dark);
}
.cscribe-container > .section.editing .grid-template:hover:after,
.cscribe-container > .cscribe-section.editing .grid-template:hover:after{
	opacity: .6;
} 

/* autospacer in template mode cannot rely on space-between. */
/* there will be huge spaces if there are fewer cards in a row */
/* should it merge with above ??? */
/* 2 in row */
.col.col-50.auto-spacer:nth-child(2n+1){
	margin-right: var(--autospacer-gap);
	margin-left: 0;
}
.col.col-50.auto-spacer:nth-child(2n+0){
	margin-left: var(--autospacer-gap);
	margin-right: 0;
}
/* 3 in row */
.col.col-33.auto-spacer:nth-child(3n+1){
	margin-right: var(--autospacer-gap);
	margin-left: 0;
}
.col.col-33.auto-spacer:nth-child(3n+2){
	margin-right: calc(var(--autospacer-gap) * 0.5);
	margin-left: calc(var(--autospacer-gap) * 0.5);
}
.col.col-33.auto-spacer:nth-child(3n+0){
	margin-left: var(--autospacer-gap);
	margin-right: 0;
}
/* 4 in row */
.col.col-25.auto-spacer:nth-child(4n+1){
	margin-right: var(--autospacer-gap);
	margin-left: 0;
}
.col.col-25.auto-spacer:nth-child(4n+2){
	margin-left: calc(var(--autospacer-gap) * .33);
	margin-right: calc(var(--autospacer-gap) * .66);
}
.col.col-25.auto-spacer:nth-child(4n+3){
	margin-left: calc(var(--autospacer-gap) * .66);
	margin-right: calc(var(--autospacer-gap) * .33);
}
.col.col-25.auto-spacer:nth-child(4n+0){
	margin-left: var(--autospacer-gap);
	margin-right: 0;
}
/* 5 in row */
.col.col-20.auto-spacer:nth-child(5n+1){
	margin-right: var(--autospacer-gap);
	margin-left: 0;
}
.col.col-20.auto-spacer:nth-child(5n+2){
	margin-left: calc(var(--autospacer-gap) * .25);
	margin-right: calc(var(--autospacer-gap) * .75);
}
.col.col-20.auto-spacer:nth-child(5n+3){
	margin-left: calc(var(--autospacer-gap) * .5);
	margin-right: calc(var(--autospacer-gap) * .5);
}
.col.col-20.auto-spacer:nth-child(5n+4){
	margin-left: calc(var(--autospacer-gap) * .75);
	margin-right: calc(var(--autospacer-gap) * .25);
}
.col.col-20.auto-spacer:nth-child(5n+0){
	margin-left: var(--autospacer-gap);
	margin-right: 0;
}
/* 6 in row */
.col.col-16.auto-spacer:nth-child(6n+1){
	margin-right: var(--autospacer-gap);
	margin-left: 0;
}
.col.col-16.auto-spacer:nth-child(6n+2){
	margin-left: calc(var(--autospacer-gap) * .2);
	margin-right: calc(var(--autospacer-gap) * .8);
}
.col.col-16.auto-spacer:nth-child(6n+3){
	margin-left: calc(var(--autospacer-gap) * .4);
	margin-right: calc(var(--autospacer-gap) * .6);
}
.col.col-16.auto-spacer:nth-child(6n+4){
	margin-left: calc(var(--autospacer-gap) * .6);
	margin-right: calc(var(--autospacer-gap) * .4);
}
.col.col-16.auto-spacer:nth-child(6n+5){
	margin-left: calc(var(--autospacer-gap) * .8);
	margin-right: calc(var(--autospacer-gap) * .2);
}
.col.col-16.auto-spacer:nth-child(6n+0){
	margin-left: var(--autospacer-gap);
	margin-right: 0;
}
/* cannot rely on space between. if there's less cards the card will be in the end */
@media only screen and (max-width: 600px){
	/* 2 in row */
	.col.col-xs-50.auto-spacer:nth-child(2n+1){
		margin-right: var(--autospacer-gap);
		margin-left: 0;
	}
	.col.col-xs-50.auto-spacer:nth-child(2n+0){
		margin-left: var(--autospacer-gap);
		margin-right: 0;
	}
	/* 3 in row */
	.col.col-xs-33.auto-spacer:nth-child(3n+1){
		margin-right: var(--autospacer-gap);
		margin-left: 0;
	}
	.col.col-xs-33.auto-spacer:nth-child(3n+2){
		margin-right: calc(var(--autospacer-gap) * 0.5);
		margin-left: calc(var(--autospacer-gap) * 0.5);
	}
	.col.col-xs-33.auto-spacer:nth-child(3n+0){
		margin-left: var(--autospacer-gap);
		margin-right: 0;
	}
	/* 4 in row */
	.col.col-xs-25.auto-spacer:nth-child(4n+1){
		margin-right: var(--autospacer-gap);
		margin-left: 0;
	}
	.col.col-xs-25.auto-spacer:nth-child(4n+2){
		margin-left: calc(var(--autospacer-gap) * .33);
		margin-right: calc(var(--autospacer-gap) * .66);
	}
	.col.col-xs-25.auto-spacer:nth-child(4n+3){
		margin-left: calc(var(--autospacer-gap) * .66);
		margin-right: calc(var(--autospacer-gap) * .33);
	}
	.col.col-xs-25.auto-spacer:nth-child(4n+0){
		margin-left: var(--autospacer-gap);
		margin-right: 0;
	}
	/* 5 in row */
	.col.col-xs-20.auto-spacer:nth-child(5n+1){
		margin-right: var(--autospacer-gap);
		margin-left: 0;
	}
	.col.col-xs-20.auto-spacer:nth-child(5n+2){
		margin-left: calc(var(--autospacer-gap) * .25);
		margin-right: calc(var(--autospacer-gap) * .75);
	}
	.col.col-xs-20.auto-spacer:nth-child(5n+3){
		margin-left: calc(var(--autospacer-gap) * .5);
		margin-right: calc(var(--autospacer-gap) * .5);
	}
	.col.col-xs-20.auto-spacer:nth-child(5n+4){
		margin-left: calc(var(--autospacer-gap) * .75);
		margin-right: calc(var(--autospacer-gap) * .25);
	}
	.col.col-xs-20.auto-spacer:nth-child(5n+0){
		margin-left: var(--autospacer-gap);
		margin-right: 0;
	}
	/* 6 in row */
	.col.col-xs-16.auto-spacer:nth-child(6n+1){
		margin-right: var(--autospacer-gap);
		margin-left: 0;
	}
	.col.col-xs-16.auto-spacer:nth-child(6n+2){
		margin-left: calc(var(--autospacer-gap) * .2);
		margin-right: calc(var(--autospacer-gap) * .8);
	}
	.col.col-xs-16.auto-spacer:nth-child(6n+3){
		margin-left: calc(var(--autospacer-gap) * .4);
		margin-right: calc(var(--autospacer-gap) * .6);
	}
	.col.col-xs-16.auto-spacer:nth-child(6n+4){
		margin-left: calc(var(--autospacer-gap) * .6);
		margin-right: calc(var(--autospacer-gap) * .4);
	}
	.col.col-xs-16.auto-spacer:nth-child(6n+5){
		margin-left: calc(var(--autospacer-gap) * .8);
		margin-right: calc(var(--autospacer-gap) * .2);
	}
	.col.col-xs-16.auto-spacer:nth-child(6n+0){
		margin-left: var(--autospacer-gap);
		margin-right: 0;
	}
}
/* sm */
@media only screen and (min-width: 600px){
	/* 2 in row */
	.col.col-sm-50.auto-spacer:nth-child(2n+1){
		margin-left: 0;
		margin-right: var(--autospacer-gap);
	}
	.col.col-sm-50.auto-spacer:nth-child(2n+0){
		margin-left: var(--autospacer-gap);
		margin-right: 0;
	}
	/* 3 in row */
	.col.col-sm-33.auto-spacer:nth-child(3n+1){
		margin-left: 0;
		margin-right: var(--autospacer-gap);
	}
	.col.col-sm-33.auto-spacer:nth-child(3n+2){
		margin-right: calc(var(--autospacer-gap) * 0.5);
		margin-left: calc(var(--autospacer-gap) * 0.5);
	}
	.col.col-sm-33.auto-spacer:nth-child(3n+0){
		margin-left: var(--autospacer-gap);
		margin-right: 0;
	}
	/* 4 in row */
	.col.col-sm-25.auto-spacer:nth-child(4n+1){
		margin-left: 0;
		margin-right: var(--autospacer-gap);
	}
	.col.col-sm-25.auto-spacer:nth-child(4n+2){
		margin-left: calc(var(--autospacer-gap) * .33);
		margin-right: calc(var(--autospacer-gap) * .66);
	}
	.col.col-sm-25.auto-spacer:nth-child(4n+3){
		margin-left: calc(var(--autospacer-gap) * .66);
		margin-right: calc(var(--autospacer-gap) * .33);
	}
	.col.col-sm-25.auto-spacer:nth-child(4n+0){
		margin-left: var(--autospacer-gap);
		margin-right: 0;
	}
	/* 5 in row */
	.col.col-sm-20.auto-spacer:nth-child(5n+1){
		margin-left: 0;
		margin-right: var(--autospacer-gap);
	}
	.col.col-sm-20.auto-spacer:nth-child(5n+2){
		margin-left: calc(var(--autospacer-gap) * .25);
		margin-right: calc(var(--autospacer-gap) * .75);
	}
	.col.col-sm-20.auto-spacer:nth-child(5n+3){
		margin-left: calc(var(--autospacer-gap) * .5);
		margin-right: calc(var(--autospacer-gap) * .5);
	}
	.col.col-sm-20.auto-spacer:nth-child(5n+4){
		margin-left: calc(var(--autospacer-gap) * .75);
		margin-right: calc(var(--autospacer-gap) * .25);
	}
	.col.col-sm-20.auto-spacer:nth-child(5n+0){
		margin-left: var(--autospacer-gap);
		margin-right: 0;
	}
	/* 6 in row */
	.col.col-sm-16.auto-spacer:nth-child(6n+1){
		margin-left: 0;
		margin-right: var(--autospacer-gap);
	}
	.col.col-sm-16.auto-spacer:nth-child(6n+2){
		margin-left: calc(var(--autospacer-gap) * .2);
		margin-right: calc(var(--autospacer-gap) * .8);
	}
	.col.col-sm-16.auto-spacer:nth-child(6n+3){
		margin-left: calc(var(--autospacer-gap) * .4);
		margin-right: calc(var(--autospacer-gap) * .6);
	}
	.col.col-sm-16.auto-spacer:nth-child(6n+4){
		margin-left: calc(var(--autospacer-gap) * .6);
		margin-right: calc(var(--autospacer-gap) * .4);
	}
	.col.col-sm-16.auto-spacer:nth-child(6n+5){
		margin-left: calc(var(--autospacer-gap) * .8);
		margin-right: calc(var(--autospacer-gap) * .2);
	}
	.col.col-sm-16.auto-spacer:nth-child(6n+0){
		margin-left: var(--autospacer-gap);
		margin-right: 0;
	}
}
/* md */
@media only screen and (min-width: 768px){
	/* 2 in row */
	.col.col-md-50.auto-spacer:nth-child(2n+1){
		margin-left: 0;
		margin-right: var(--autospacer-gap);
	}
	.col.col-md-50.auto-spacer:nth-child(2n+0){
		margin-left: var(--autospacer-gap);
		margin-right: 0;
	}
	/* 3 in row */
	.col.col-md-33.auto-spacer:nth-child(3n+1){
		margin-left: 0;
		margin-right: var(--autospacer-gap);
	}
	.col.col-md-33.auto-spacer:nth-child(3n+2){
		margin-right: calc(var(--autospacer-gap) * 0.5);
		margin-left: calc(var(--autospacer-gap) * 0.5);
	}
	.col.col-md-33.auto-spacer:nth-child(3n+0){
		margin-left: var(--autospacer-gap);
		margin-right: 0;
	}
	/* 4 in row */
	.col.col-md-25.auto-spacer:nth-child(4n+1){
		margin-left: 0;
		margin-right: var(--autospacer-gap);
	}
	.col.col-md-25.auto-spacer:nth-child(4n+2){
		margin-left: calc(var(--autospacer-gap) * .33);
		margin-right: calc(var(--autospacer-gap) * .66);
	}
	.col.col-md-25.auto-spacer:nth-child(4n+3){
		margin-left: calc(var(--autospacer-gap) * .66);
		margin-right: calc(var(--autospacer-gap) * .33);
	}
	.col.col-md-25.auto-spacer:nth-child(4n+0){
		margin-left: var(--autospacer-gap);
		margin-right: 0;
	}
	/* 5 in row */
	.col.col-md-20.auto-spacer:nth-child(5n+1){
		margin-left: 0;
		margin-right: var(--autospacer-gap);
	}
	.col.col-md-20.auto-spacer:nth-child(5n+2){
		margin-left: calc(var(--autospacer-gap) * .25);
		margin-right: calc(var(--autospacer-gap) * .75);
	}
	.col.col-md-20.auto-spacer:nth-child(5n+3){
		margin-left: calc(var(--autospacer-gap) * .5);
		margin-right: calc(var(--autospacer-gap) * .5);
	}
	.col.col-md-20.auto-spacer:nth-child(5n+4){
		margin-left: calc(var(--autospacer-gap) * .75);
		margin-right: calc(var(--autospacer-gap) * .25);
	}
	.col.col-md-20.auto-spacer:nth-child(5n+0){
		margin-left: var(--autospacer-gap);
		margin-right: 0;
	}
	/* 6 in row */
	.col.col-md-16.auto-spacer:nth-child(6n+1){
		margin-left: 0;
		margin-right: var(--autospacer-gap);
	}
	.col.col-md-16.auto-spacer:nth-child(6n+2){
		margin-left: calc(var(--autospacer-gap) * .2);
		margin-right: calc(var(--autospacer-gap) * .8);
	}
	.col.col-md-16.auto-spacer:nth-child(6n+3){
		margin-left: calc(var(--autospacer-gap) * .4);
		margin-right: calc(var(--autospacer-gap) * .6);
	}
	.col.col-md-16.auto-spacer:nth-child(6n+4){
		margin-left: calc(var(--autospacer-gap) * .6);
		margin-right: calc(var(--autospacer-gap) * .4);
	}
	.col.col-md-16.auto-spacer:nth-child(6n+5){
		margin-left: calc(var(--autospacer-gap) * .8);
		margin-right: calc(var(--autospacer-gap) * .2);
	}
	.col.col-md-16.auto-spacer:nth-child(6n+0){
		margin-left: var(--autospacer-gap);
		margin-right: 0;
	}
}
/* lg */
@media only screen and (min-width: 992px){
	/* 2 in row */
	.col.col-lg-50.auto-spacer:nth-child(2n+1){
		margin-left: 0;
		margin-right: var(--autospacer-gap);
	}
	.col.col-lg-50.auto-spacer:nth-child(2n+0){
		margin-left: var(--autospacer-gap);
		margin-right: 0;
	}
	/* 3 in row */
	.col.col-lg-33.auto-spacer:nth-child(3n+1){
		margin-left: 0;
		margin-right: var(--autospacer-gap);
	}
	.col.col-lg-33.auto-spacer:nth-child(3n+2){
		margin-right: calc(var(--autospacer-gap) * 0.5);
		margin-left: calc(var(--autospacer-gap) * 0.5);
	}
	.col.col-lg-33.auto-spacer:nth-child(3n+0){
		margin-left: var(--autospacer-gap);
		margin-right: 0;
	}
	/* 4 in row */
	.col.col-lg-25.auto-spacer:nth-child(4n+1){
		margin-left: 0;
		margin-right: var(--autospacer-gap);
	}
	.col.col-lg-25.auto-spacer:nth-child(4n+2){
		margin-left: calc(var(--autospacer-gap) * .33);
		margin-right: calc(var(--autospacer-gap) * .66);
	}
	.col.col-lg-25.auto-spacer:nth-child(4n+3){
		margin-left: calc(var(--autospacer-gap) * .66);
		margin-right: calc(var(--autospacer-gap) * .33);
	}
	.col.col-lg-25.auto-spacer:nth-child(4n+0){
		margin-left: var(--autospacer-gap);
		margin-right: 0;
	}
	/* 5 in row */
	.col.col-lg-20.auto-spacer:nth-child(5n+1){
		margin-left: 0;
		margin-right: var(--autospacer-gap);
	}
	.col.col-lg-20.auto-spacer:nth-child(5n+2){
		margin-left: calc(var(--autospacer-gap) * .25);
		margin-right: calc(var(--autospacer-gap) * .75);
	}
	.col.col-lg-20.auto-spacer:nth-child(5n+3){
		margin-left: calc(var(--autospacer-gap) * .5);
		margin-right: calc(var(--autospacer-gap) * .5);
	}
	.col.col-lg-20.auto-spacer:nth-child(5n+4){
		margin-left: calc(var(--autospacer-gap) * .75);
		margin-right: calc(var(--autospacer-gap) * .25);
	}
	.col.col-lg-20.auto-spacer:nth-child(5n+0){
		margin-left: var(--autospacer-gap);
		margin-right: 0;
	}
	/* 6 in row */
	.col.col-lg-16.auto-spacer:nth-child(6n+1){
		margin-left: 0;
		margin-right: var(--autospacer-gap);
	}
	.col.col-lg-16.auto-spacer:nth-child(6n+2){
		margin-left: calc(var(--autospacer-gap) * .2);
		margin-right: calc(var(--autospacer-gap) * .8);
	}
	.col.col-lg-16.auto-spacer:nth-child(6n+3){
		margin-left: calc(var(--autospacer-gap) * .4);
		margin-right: calc(var(--autospacer-gap) * .6);
	}
	.col.col-lg-16.auto-spacer:nth-child(6n+4){
		margin-left: calc(var(--autospacer-gap) * .6);
		margin-right: calc(var(--autospacer-gap) * .4);
	}
	.col.col-lg-16.auto-spacer:nth-child(6n+5){
		margin-left: calc(var(--autospacer-gap) * .8);
		margin-right: calc(var(--autospacer-gap) * .2);
	}
	.col.col-lg-16.auto-spacer:nth-child(6n+0){
		margin-left: var(--autospacer-gap);
		margin-right: 0;
	}
}
/* xl */
@media only screen and (min-width: 1501px){
	/* 2 in row */
	.col.col-xl-50.auto-spacer:nth-child(2n+1){
		margin-left: 0;
		margin-right: var(--autospacer-gap);
	}
	.col.col-xl-50.auto-spacer:nth-child(2n+0){
		margin-left: var(--autospacer-gap);
		margin-right: 0;
	}
	/* 3 in row */
	.col.col-xl-33.auto-spacer:nth-child(3n+1){
		margin-left: 0;
		margin-right: var(--autospacer-gap);
	}
	.col.col-xl-33.auto-spacer:nth-child(3n+2){
		margin-right: calc(var(--autospacer-gap) * 0.5);
		margin-left: calc(var(--autospacer-gap) * 0.5);
	}
	.col.col-xl-33.auto-spacer:nth-child(3n+0){
		margin-left: var(--autospacer-gap);
		margin-right: 0;
	}
	/* 4 in row */
	.col.col-xl-25.auto-spacer:nth-child(4n+1){
		margin-left: 0;
		margin-right: var(--autospacer-gap);
	}
	.col.col-xl-25.auto-spacer:nth-child(4n+2){
		margin-left: calc(var(--autospacer-gap) * .33);
		margin-right: calc(var(--autospacer-gap) * .66);
	}
	.col.col-xl-25.auto-spacer:nth-child(4n+3){
		margin-left: calc(var(--autospacer-gap) * .66);
		margin-right: calc(var(--autospacer-gap) * .33);
	}
	.col.col-xl-25.auto-spacer:nth-child(4n+0){
		margin-left: var(--autospacer-gap);
		margin-right: 0;
	}
	/* 5 in row */
	.col.col-xl-20.auto-spacer:nth-child(5n+1){
		margin-left: 0;
		margin-right: var(--autospacer-gap);
	}
	.col.col-xl-20.auto-spacer:nth-child(5n+2){
		margin-left: calc(var(--autospacer-gap) * .25);
		margin-right: calc(var(--autospacer-gap) * .75);
	}
	.col.col-xl-20.auto-spacer:nth-child(5n+3){
		margin-left: calc(var(--autospacer-gap) * .5);
		margin-right: calc(var(--autospacer-gap) * .5);
	}
	.col.col-xl-20.auto-spacer:nth-child(5n+4){
		margin-left: calc(var(--autospacer-gap) * .75);
		margin-right: calc(var(--autospacer-gap) * .25);
	}
	.col.col-xl-20.auto-spacer:nth-child(5n+0){
		margin-left: var(--autospacer-gap);
		margin-right: 0;
	}
	/* 6 in row */
	.col.col-xl-16.auto-spacer:nth-child(6n+1){
		margin-left: 0;
		margin-right: var(--autospacer-gap);
	}
	.col.col-xl-16.auto-spacer:nth-child(6n+2){
		margin-left: calc(var(--autospacer-gap) * .2);
		margin-right: calc(var(--autospacer-gap) * .8);
	}
	.col.col-xl-16.auto-spacer:nth-child(6n+3){
		margin-left: calc(var(--autospacer-gap) * .4);
		margin-right: calc(var(--autospacer-gap) * .6);
	}
	.col.col-xl-16.auto-spacer:nth-child(6n+4){
		margin-left: calc(var(--autospacer-gap) * .6);
		margin-right: calc(var(--autospacer-gap) * .4);
	}
	.col.col-xl-16.auto-spacer:nth-child(6n+5){
		margin-left: calc(var(--autospacer-gap) * .8);
		margin-right: calc(var(--autospacer-gap) * .2);
	}
	.col.col-xl-16.auto-spacer:nth-child(6n+0){
		margin-left: var(--autospacer-gap);
		margin-right: 0;
	}
}