/* V1.0 /*



/* */
/* An optional, standard indent for each 'row' of your page. makes pages behave well on wide monitors  */
/* */

.rIndent
{
	margin: 0 auto;
	max-width: 1280px;
}



/* */
/* 'Options' */
/* */


/* Responsive: use this on any container (Split, LeftFlex, RightFlex, Array) */

.rResponsive {}


/* Left, Right, Center: use these inside any element */

.rLeft { text-align: left; }

.rRight { text-align: right; }

.rCenter { margin-left: auto; margin-right: auto; text-align: center; }


/* Top, Middle, Bottom: use on LeftFlex and RightFlex */

.rTop { vertical-align: top; }

.rMiddle { vertical-align: middle; }

.rBottom { vertical-align: bottom; }



/*  */
/* Overlay */
/* */

.rOverlay { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }



/*  */
/* Split */
/* */

.rSplit { position: relative; display: flex; width: 100%; max-width: 100%; align-items: stretch; white-space: normal; }

.rSplit > div:first-child { flex: 1 1 0; }

.rSplit > div:last-child { flex: 1 1 0; }



/* */
/* LeftFlex */
/* */

.rLeftFlex { position: relative; display: table; width: 100%; max-width: 100%; white-space: normal; border-collapse: collapse; }

.rLeftFlex > div:first-child { display: table-cell; min-width: 0px; width: 100%; height: 100%; }

.rLeftFlex > div:last-child { display: table-cell; width: auto; height: 100%; white-space: nowrap; }



/* */
/* RightFlex */
/* */

.rRightFlex { position: relative; display: table; width: 100%; max-width: 100%; white-space: normal; border-collapse: collapse; }

.rRightFlex > div:first-child { display: table-cell; width: auto; height: 100%; white-space: nowrap;}

.rRightFlex > div:last-child { display: table-cell; min-width: 0px; width: 100%; height: 100%; }



/* */ 
/* Array */
/* */ 

.rArray { position: relative; display: flex; }


.rArray.rX { flex-direction: row; }

.rArray.rXInvert { flex-direction: row-reverse; }

.rArray.rY { flex-direction: column; }

.rArray.rYInvert { flex-direction: column-reverse; }


.rArray.rAxisNear { justify-content: start; }

.rArray.rAxisCenter { justify-content: center; }

.rArray.rAxisFar { justify-content: end; }

.rArray.rAxisFit { justify-content: stretch; }


.rArray.rOrthoNear { align-items: start; }

.rArray.rOrthoCenter { align-items: center; }

.rArray.rOrthoFar { align-items: end; }

.rArray.rOrthoFit { align-items: stretch; }


.rArray.rResponsive { flex-wrap: wrap; }



/* */
/* AutoFitImg: responsive image helper style, NOTE need to add  min and max height */
/* */

.rAutoFitImg
{
	display: inline-block; 
	width: 100%;
}



/* */
/* adapt to tablet or less (always centering and no splits) */
/* */

@media (max-width: 1024px)
{

	.IfDesktop { display: none; }


	.rResponsive { text-align: center; }


	.rSplit.rResponsive { display: block; text-align: center; }

	.rSplit.rResponsive > div { display: block; width: 100%; }


	.rLeftFlex.rResponsive > div:first-child { display: block; height: auto; }

	.rLeftFlex.rResponsive > div:last-child { display: block; width: 100%; height: auto; }

	
	.rRightFlex.rResponsive > div:first-child { display: block; width: 100%; height: auto; }

	.rRightFlex.rResponsive > div:last-child { display: block; height: auto; }

}

@media (max-width: 480px)
{
}