:root {
	--page-wrap-width: 960px;
	--page-wrap-wide: 1280px;
	--page-wrap-full: 100%;
	--aspect-golden: 56.25%;
	--base-padding-side: 160px;
	--filetype-image-color: #ff888c;
	--filetype-document-color: #55ccff;
	--filetype-spreadsheet-color: #58d645;
	--filetype-presentation-color: #fb89c3;
	--filetype-video-color: #ffcc3f;
	--filetype-audio-color: #653ae4;
	--filetype-misc-color: #d2d2d2;
}

/*wrap padding*/
.flexpad {
	max-width: var(--page-wrap-width);
	margin-left: auto;
	margin-right: auto;
}
.flexpad {
	padding-left: var(--share-smp-padding);
	padding-right: var(--share-smp-padding);
}
@media only screen and (min-width: 641px){
	.flexpad {
		padding-left: var(--base-padding-side);
		padding-right: var(--base-padding-side);
	}
}

.csection-cells .cell {
	max-width: var(--page-wrap-width);
	padding-left: var(--share-smp-padding);
	padding-right: var(--share-smp-padding);
	margin-left: auto;
	margin-right: auto;
}
.csection-cells .cell[data-wrap="full"] {
	max-width: var(--page-wrap-full);
	overflow-x: hidden;
	overflow-y: hidden;
	height: auto;
}
@media only screen and (max-width: 640px){
	.csection-cells .cell[data-wrap="wide"] {
		max-width: 100%;
	}
}
@media only screen and (min-width: 641px){
	.csection-cells .cell{
		padding-left: var(--base-padding-side);
		padding-right: var(--base-padding-side);
	}
	.csection-cells .cell[data-wrap="wide"] {
		max-width: 100%;
	}
}
@media only screen and (min-width: 1240px){
	.csection-cells .cell[data-wrap="wide"] {
		max-width: var(--page-wrap-wide);
		padding-left: 0;
		padding-right: 0;
	}
}