/* HELPER CLASSES */

/* CORE - BASIC ROW / COLUMN SETUP  /////////////////*/

 .row {
	display: block;
	width: 100%;	
	padding: 0;
	margin: 0;
}
.row:before,
.row:after {
	content:"";
	display:table;
}
.row:after {
	clear:both;
}

.col {
	display: block;
	float: left;
	margin: 0 0 1em 2%;
}
.col:first-child {
	margin-left: 0;
}

/* default stack */
.mobile .row .col {
	float: none;
	width: 100%;
	margin-left: 0;
}

.span_1_of_12 {
	width: 6.5%;
}
.span_2_of_12 {
	width: 15%;
}
.span_3_of_12 {
	width: 23.5%;
}
.span_4_of_12 {
	width: 32%;
}
.span_5_of_12 {
	width: 40.5%;
}
.span_6_of_12 {
	width: 49%;
}
.span_7_of_12 {
	width: 57.5%;
}
.span_8_of_12 {
	width: 66%;
}
.span_9_of_12 {
	width: 74.5%;
}
.span_10_of_12 {
	width: 83%;
}
.span_11_of_12 {
	width: 91.5%;
}
.span_12_of_12 {
	width: 100%;
}

/*///////////////////////////////////*/

/* VISIBLE / HIDDEN CASES  */
.hidden {
	display: none;
}
.mobile .hidden-mobile {
	display: none;
}
.tablet .hidden-tablet {
	display: none;
}
.desktop .hidden-desktop {
	display: none;
}

.mobile .visible-mobile {
	display: block !important;
}
.tablet .visible-mobile {
	display: none;
}
.desktop .visible-mobile {
	display: none;
}

.mobile .visible-tablet {
	display: none;
}
.tablet .visible-tablet {
	display: block !important;
}
.desktop .visible-tablet {
	display: none;
}

.mobile .visible-desktop {
	display: none;
}
.tablet .visible-desktop {
	display: none;
}
.desktop .visible-desktop {
	display: block !important;
}
/*///////////////////////////////////*/


/* MOBILE & TABLET SPECIAL USE CASES */


/* Locked percent on mobile */
.lock-percent .col.span_1_of_12 {
	width: 6.5%;
	float: left;
	margin-left: 2%;
}
.lock-percent .col.span_2_of_12 {
	width: 15%;
	float: left;
	margin-left: 2%;
}
.lock-percent .col.span_3_of_12 {
	width: 23.5%;
	float: left;
	margin-left: 2%;
}
.lock-percent .col.span_4_of_12 {
	width: 32%;
	float: left;
	margin-left: 2%;
}
.lock-percent .col.span_5_of_12 {
	width: 40.5%;
	float: left;
	margin-left: 2%;
}
.lock-percent .col.span_6_of_12 {
	width: 49%;
	float: left;
	margin-left: 2%;
}
.lock-percent .col.span_7_of_12 {
	width: 57.5%;
	float: left;
	margin-left: 2%;
}
.lock-percent .col.span_8_of_12 {
	width: 66%;
	float: left;
	margin-left: 2%;
}
.lock-percent .col.span_9_of_12 {
	width: 74.5%;
	float: left;
	margin-left: 2%;
}
.lock-percent .col.span_10_of_12 {
	width: 83%;
	float: left;
	margin-left: 2%;
}
.lock-percent .col.span_11_of_12 {
	width: 91.5%;
	float: left;
	margin-left: 2%;
}
.lock-percent .col.span_12_of_12 {
	width: 100%;
	float: left;
	margin-left: 2%;
}
.row.lock-percent .col:first-child {
	margin-left: 0;
}
.row .col .row.lock-percent .col {
	margin-bottom: 0;
}
.mobile .row .col .row.lock-percent .col {
	margin-bottom: 0;
}

/* mobile group */
.mobile .row.group-4-mobile .col.span_1_of_12 {
	width: 23.5%;
	float: left;
	margin-left: 2%;
}
.mobile .row.group-4-mobile .col.span_1_of_12:nth-child(4n+1) {
	clear: both;
	margin-left: 0%;
}

.mobile .row.group-3-mobile .col.span_1_of_12, .mobile .row.group-3-mobile .col.span_2_of_12 {
	width: 32%;
	float: left;
	margin-left: 2%;
}
.mobile .row.group-3-mobile .col.span_1_of_12:nth-child(3n+1), .mobile .row.group-3-mobile .col.span_2_of_12:nth-child(3n+1) {
	clear: both;
	margin-left: 0%;
}

.mobile .row.group-2-mobile .col.span_1_of_12, .mobile .row.group-2-mobile .col.span_2_of_12, .mobile .row.group-2-mobile .col.span_3_of_12 {
	width: 49%;
	float: left;
	margin-left: 2%;
}
.mobile .row.group-2-mobile .col.span_1_of_12:nth-child(2n+1), .mobile .row.group-2-mobile .col.span_2_of_12:nth-child(2n+1), .mobile .row.group-2-mobile .col.span_3_of_12:nth-child(2n+1) {
	clear: both;
	margin-left: 0%;
}

/* tablet group */
.tablet .row.group-4-tablet .col.span_1_of_12 {
	width: 23.5%;
	float: left;
	margin-left: 2%;
}
.tablet .row.group-4-tablet .col.span_1_of_12:nth-child(4n+1) {
	clear: both;
	margin-left: 0%;
}

.tablet .row.group-3-tablet .col.span_1_of_12, .tablet .row.group-3-tablet .col.span_2_of_12 {
	width: 32%;
	float: left;
	margin-left: 2%;
}
.tablet .row.group-3-tablet .col.span_1_of_12:nth-child(3n+1), .tablet .row.group-3-tablet .col.span_2_of_12:nth-child(3n+1) {
	clear: both;
	margin-left: 0%;
}

.tablet .row.group-2-tablet .col.span_1_of_12, .tablet .row.group-2-tablet .col.span_3_of_12 {
	width: 49%;
	float: left;
	margin-left: 2%;
}
.tablet .row.group-2-tablet .col.span_1_of_12:nth-child(2n+1), .tablet .row.group-2-tablet .col.span_3_of_12:nth-child(2n+1) {
	clear: both;
	margin-left: 0%;
}

/* ///////////////////////////// */


/* SETUP MARGINS - //
IMPORTANT! INCLUDE AFTER GRID CSS OR PUT AT THE END OF IT!
*/

.col {
	margin-bottom: 20px;
}
div.row>div.col>div.row>div.col {
	margin-bottom: 0;
}
.mobile .row>div.col>div.row>div.col {
	margin-bottom: 20px;
}
.mobile .row>div.col>div.row>div.col:last-child {
	margin-bottom: 0;
}
/* //////////////////////////////////////////////////// */