/*******************************
            Container
*******************************/

/*-------------------
       Element
--------------------*/

/* Devices */

/* Coupling (Add Negative Margin to container size) */

/*-------------------
       Types
--------------------*/

/* Text */
@textWidth: 376px;



/*******************************
            Container
*******************************/

/*-------------------
       Element
--------------------*/

/* Minimum Gutter is used to determine  the maximum container width for a given device */

@maxWidth: 100%;

/* Devices */
@mobileMinimumGutter: 0em;
@mobileWidth: auto;
@mobileGutter: auto;

@tabletMinimumGutter: (@emSize  * 1);
@tabletWidth: @tabletBreakpoint - (@tabletMinimumGutter * 2) - @scrollbarWidth;
@tabletGutter: auto;

@computerMinimumGutter: (@emSize  * 1.5);
@computerWidth: @computerBreakpoint - (@computerMinimumGutter * 2) - @scrollbarWidth;
@computerGutter: auto;

@largeMonitorMinimumGutter: (@emSize  * 2);
@largeMonitorWidth: @largeMonitorBreakpoint - (@largeMonitorMinimumGutter * 2) - @scrollbarWidth;
@largeMonitorGutter: auto;


@widescreenlaptopWidth: @widescreenlaptopBreakpoint - (@largeMonitorMinimumGutter * 2) - @scrollbarWidth;
@widescreenlaptopBigWidth: @widescreenlaptopBigBreakpoint - (@largeMonitorMinimumGutter * 2) - @scrollbarWidth;
@widescreenmonitorSmallWidth: @widescreenmonitorSmallBreakpoint - (@largeMonitorMinimumGutter * 2) - @scrollbarWidth;
@widescreenMonitorWidth: @widescreenMonitorBreakpoint - (@largeMonitorMinimumGutter * 2) - @scrollbarWidth;


@widescreenlaptopGridWidth:  ~"calc("@widescreenlaptopWidth~" + "@gridGutterWidth~")";
@widescreenlaptopBigGridWidth:  ~"calc("@widescreenlaptopBigWidth~" + "@gridGutterWidth~")";
@widescreenmonitorSmallGridWidth:  ~"calc("@widescreenmonitorSmallWidth~" + "@gridGutterWidth~")";
@widescreenMonitorGridWidth:  ~"calc("@widescreenMonitorWidth~" + "@gridGutterWidth~")";

/* Coupling (Add Negative Margin to container size) */
@gridGutterWidth: 2rem;
@relaxedGridGutterWidth: 3rem;
@veryRelaxedGridGutterWidth: 5rem;

@mobileGridWidth: @mobileWidth;
@tabletGridWidth: ~"calc("@tabletWidth~" + "@gridGutterWidth~")";
@computerGridWidth: ~"calc("@computerWidth~" + "@gridGutterWidth~")";
@largeMonitorGridWidth: ~"calc("@largeMonitorWidth~" + "@gridGutterWidth~")";


@mobileRelaxedGridWidth: @mobileWidth;
@tabletRelaxedGridWidth: ~"calc("@tabletWidth~" + "@relaxedGridGutterWidth~")";
@computerRelaxedGridWidth: ~"calc("@computerWidth~" + "@relaxedGridGutterWidth~")";
@largeMonitorRelaxedGridWidth: ~"calc("@largeMonitorWidth~" + "@relaxedGridGutterWidth~")";

@mobileVeryRelaxedGridWidth: @mobileWidth;
@tabletVeryRelaxedGridWidth: ~"calc("@tabletWidth~" + "@veryRelaxedGridGutterWidth~")";
@computerVeryRelaxedGridWidth: ~"calc("@computerWidth~" + "@veryRelaxedGridGutterWidth~")";
@largeMonitorVeryRelaxedGridWidth: ~"calc("@largeMonitorWidth~" + "@veryRelaxedGridGutterWidth~")";



// @largerMonitorBreakpoint: 1440px;
// @largerMonitorWidth: 1400px;

/*-------------------
       Types
--------------------*/

/* Text */
@textWidth: 700px;
@textFontFamily: @pageFont;
@textLineHeight: 1.5;
@textSize: @large;