@charset "UTF-8";
:root {
	
	--wdth-screen: 100%;
	
	--coef-page-mrg:4.5rem;
	--coef-wdth:6rem;
	--coef-multiply:12;
	
	--wdth-std-multiply:var(--coef-multiply);
	
	--col-std-multiply:3;
	--col-lrg-multiply:4;
	
	--wdth-multiply:var(--wdth-std-multiply);
	--col-multiply:var(--col-std-multiply);
	
	--wdth-cn:calc(var(--wdth-multiply)*var(--coef-wdth));
	--wdth-col:calc(var(--col-multiply)*var(--coef-wdth));	
	--col-n:calc(var(--wdth-multiply)/var(--col-multiply));
	
	--wdth-screen-min: calc(var(--wdth-cn)+var(--coef-page-mrg));
	
	--n-gap-x:1.75rem;
	--n-gap-y:1.75rem;
	--n-gap-x-inv:-1.75rem;
	--n-gap-y-inv:-1.75rem;
	
	--n-border:1px;
	
}

/* 456 648 840 936 1224 */
@media only screen and (max-width: 1799.5px) {
	body {background:red !important;}
	:root {
		
	}
}
@media only screen and (max-width: 1607.5px) {
	body {background:red !important;}
	:root {
		
	}
}
@media only screen and (max-width: 1512.5px) {
	body {background:red !important;}
	:root {
		
	}
}
@media only screen and (max-width: 1223.5px) {
	body {background:red !important;}
	:root {
		--col-lrg-multiply:var(--col-std-multiply);
		--wdth-std-multiply:9;
	}
}
@media only screen and (max-width: 935.5px) {
	body {background:blue !important;}
	:root {
		--col-std-multiply:4;
		--wdth-std-multiply:8;
	}
}
@media only screen and (max-width: 839.5px) {
	body {background:green !important;}
	:root {
		--col-std-multiply:3;
		--wdth-std-multiply:6;
	}
}
@media only screen and (max-width: 647.5px) {
	body {background:yellow !important;}
	:root {
		--col-std-multiply:4;
		--wdth-std-multiply:4;
	}
}
@media only screen and (max-width: 456.5px) {
	body {background:orange !important;}
	:root {
		--col-std-multiply:3;
		--wdth-std-multiply:3;
	}
}

:root, .lt-screen {
	/*Characteristics*/
    position: relative;
    width: var(--wdth-screen);
    height: 100%;
    min-height: 100%;
    overflow: hidden;
	
	/*Parent Relation*/
	flex-grow: 0;
    flex-shrink: 0;
	
	/*Child Relation*/
	display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: stretch;
}

body, .lt-body {
	/*Characteristics*/
    position: relative;
	min-width: var(--wdth-screen-min);
	width:100%;
	max-width: 100%;
    min-height: 0;
	overflow-x: hidden;
	overflow-y:auto;
	
	/*Parent Relation*/
	flex-grow: 1;
	
	/*Child Relation*/
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
}
.lt-screen:last-child {
	flex-grow:1;
}

.lt-split-screen {
	/*Characteristics*/
	width: var(--wdth-std);
	
	/*Parent Relation*/
	
	/*Child Relation*/
	display:flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	align-content: center;
	justify-content: center;
}

.lt-split-screen {
	
	--wdth-screen:24rem;
	
}

.lt-section {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-content: center;
}

.lt-section:only-child {
	margin: 0;
    flex-grow: 1;
}

.lt-size {
	width: var(--wdth-std);
	margin: 0 auto;
}

.cn-body {
	width: var(--wdth-cn);
}

.cn-demo {
	width:100%;
	min-height: 300px;
	background-color:#ccc;
}

.flex-grow {
	flex-grow:1;
}

[class^="ui-grid"],
[class*=" ui-grid"] {
	
	position:relative;
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content: flex-start;
	align-items: stretch;
	
	
	--grid-col-multiply: var(--col-multiply);
	--grid-wdth-multiply: var(--wdth-multiply);
	--grid-base: calc(var(--grid-wdth-multiply)*var(--coef-wdth));
	--grid-col-n: calc(var(--grid-wdth-multiply) / var(--grid-col-multiply));
	--grid-gap-x:var(--n-gap-x);
	--grid-gap-y:var(--n-gap-y);
	--grid-gap-x-inv:var(--n-gap-x-inv);
	--grid-gap-y-inv:var(--n-gap-y-inv);
	
	--grid-wdth: calc(var(--grid-gap-x)*2 + var(--grid-base));
	--grid-wdth-col: calc(var(--grid-wdth)/var(--grid-col-n) - var(--grid-gap-x)*2);
	
	margin:var(--grid-gap-y-inv) var(--grid-gap-x-inv);
	
}

[class^="ui-grid-lrg"],
[class*=" ui-grid-lrg"] {
	--col-multiply:var(--col-lrg-multiply);
}
[class^="ui-grid"] > *,
[class*=" ui-grid"] > * {
	width: var(--grid-wdth-col);
	margin: var(--n-gap-y) var(--n-gap-x);
}