.xflow-flex-row 
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	position: relative;
	width: 100%;
}


.xflow-flex-row > div, .xflow-flex-row > .colspan-1 {  width: calc(100% / 12); }

.xflow-flex-row > .colspan-2, 
#mobile .xflow-flex-row > .mobile-colspan-2,
#tablet .xflow-flex-row > .tablet-colspan-2,
#desktop .xflow-flex-row > .desktop-colspan-2,
#megadesk .xflow-flex-row > .megadesk-colspan-2,
#masterdesk .xflow-flex-row > .masterdesk-colspan-2 { width: calc((100% / 12) * 2); }

.xflow-flex-row > .colspan-3, 
#mobile .xflow-flex-row > .mobile-colspan-3,
#tablet .xflow-flex-row > .tablet-colspan-3,
#desktop .xflow-flex-row > .desktop-colspan-3,
#megadesk .xflow-flex-row > .megadesk-colspan-3,
#masterdesk .xflow-flex-row > .masterdesk-colspan-3 { width: calc((100% / 12) * 3); }

.xflow-flex-row > .colspan-4, 
#mobile .xflow-flex-row > .mobile-colspan-4,
#tablet .xflow-flex-row > .tablet-colspan-4,
#desktop .xflow-flex-row > .desktop-colspan-4,
#megadesk .xflow-flex-row > .megadesk-colspan-4,
#masterdesk .xflow-flex-row > .masterdesk-colspan-4 { width: calc((100% / 12) * 4); }

.xflow-flex-row > .colspan-5, 
#mobile .xflow-flex-row > .mobile-colspan-5,
#tablet .xflow-flex-row > .tablet-colspan-5,
#desktop .xflow-flex-row > .desktop-colspan-5,
#megadesk .xflow-flex-row > .megadesk-colspan-5,
#masterdesk .xflow-flex-row > .masterdesk-colspan-5 { width: calc((100% / 12) * 5); }

.xflow-flex-row > .colspan-6, 
#mobile .xflow-flex-row > .mobile-colspan-6,
#tablet .xflow-flex-row > .tablet-colspan-6,
#desktop .xflow-flex-row > .desktop-colspan-6,
#megadesk .xflow-flex-row > .megadesk-colspan-6,
#masterdesk .xflow-flex-row > .masterdesk-colspan-6 { width: calc((100% / 12) * 6); }

.xflow-flex-row > .colspan-7, 
#mobile .xflow-flex-row > .mobile-colspan-7,
#tablet .xflow-flex-row > .tablet-colspan-7,
#desktop .xflow-flex-row > .desktop-colspan-7,
#megadesk .xflow-flex-row > .megadesk-colspan-7,
#masterdesk .xflow-flex-row > .masterdesk-colspan-7 { width: calc((100% / 12) * 7); }

.xflow-flex-row > .colspan-8, 
#mobile .xflow-flex-row > .mobile-colspan-8,
#tablet .xflow-flex-row > .tablet-colspan-8,
#desktop .xflow-flex-row > .desktop-colspan-8,
#megadesk .xflow-flex-row > .megadesk-colspan-8,
#masterdesk .xflow-flex-row > .masterdesk-colspan-8 { width: calc((100% / 12) * 8); }

.xflow-flex-row > .colspan-9, 
#mobile .xflow-flex-row > .mobile-colspan-9,
#tablet .xflow-flex-row > .tablet-colspan-9,
#desktop .xflow-flex-row > .desktop-colspan-9,
#megadesk .xflow-flex-row > .megadesk-colspan-9,
#masterdesk .xflow-flex-row > .masterdesk-colspan-9 { width: calc((100% / 12) * 9); }

.xflow-flex-row > .colspan-10, 
#mobile .xflow-flex-row > .mobile-colspan-10,
#tablet .xflow-flex-row > .tablet-colspan-10,
#desktop .xflow-flex-row > .desktop-colspan-10,
#megadesk .xflow-flex-row > .megadesk-colspan-10,
#masterdesk .xflow-flex-row > .masterdesk-colspan-10 { width: calc((100% / 12) * 10); }

.xflow-flex-row > .colspan-11, 
#mobile .xflow-flex-row > .mobile-colspan-11,
#tablet .xflow-flex-row > .tablet-colspan-11,
#desktop .xflow-flex-row > .desktop-colspan-11,
#megadesk .xflow-flex-row > .megadesk-colspan-11,
#masterdesk .xflow-flex-row > .masterdesk-colspan-11 { width: calc((100% / 12) * 11); }

.xflow-flex-row > .colspan-12, 
#mobile .xflow-flex-row > .mobile-colspan-12,
#tablet .xflow-flex-row > .tablet-colspan-12,
#desktop .xflow-flex-row > .desktop-colspan-12,
#megadesk .xflow-flex-row > .megadesk-colspan-12,
#masterdesk .xflow-flex-row > .masterdesk-colspan-12 { width: calc((100% / 12) * 12); }

.xflow-flex-row > .span-filler,
#mobile .xflow-flex-row > .mobile-span-filler,
#tablet .xflow-flex-row > .tablet-span-filler,
#desktop .xflow-flex-row > .desktop-span-filler,
#megadesk .xflow-flex-row > .megadesk-span-filler,
#masterdesk .xflow-flex-row > .masterdesk-span-filler,
.span-filler,
#mobile .mobile-span-filler,
#tablet .tablet-span-filler,
#desktop .desktop-span-filler,
#megadesk .megadesk-span-filler,
#masterdesk .masterdesk-span-filler { flex-grow: 1; }