/*
DOCUMENT INFORMATION
Title 		- Grid
Version		- 1.0
*/

/*	LAYOUT ATTRIBUTES
------------------------------------------------------------------------------------------------------------*/
[am~="fixed"]			        { position: fixed; }
[am~="abs"]	        			{ position: absolute; }
[am~="relative"]		        { position: relative; }

[am~="left"]  			        { float: left; left: 0; }
[am~="right"]  		            { float: right; right: 0; }
[am~="top"]  			        { top: 0; }
[am~="bottom"] 		            { bottom: 0; }

[am~="inline"]			        { display: inline; }
[am~="inline-block"]	        { display: inline-block; }

[am~="text-left"]		        { text-align: left; }
[am~="text-right"] 	            { text-align: right; }
[am~="text-center"]	            { text-align: center; }
[am~="text-middle"]             { position: relative; top: 50%; transform: translateY(-50%); }

[am~="hidden"]			        { visibility: hidden; }

.none,
.hide,
[am~="none"],
[am~="hide"]			        { display: none; }

.show,
.block,
[am~="show"],
[am~="block"]                   { display: block; }

.overflow-hidden   	            { overflow: hidden; }

.visible,
[am~="visible"]		            { overflow: visible; }

.test,
[am~="test"]			        { background:pink; background:rgba(255,0,0,.1); } /* This comes in handy when debugging element positioning. */

.test:hover,
[am~="test"]:hover              { background:rgba(255,0,0,.2); outline: red 1px solid; }


/*	NAV DEFAULTS
-------------------------------------------------------------------------------------------------------------*/
nav ul, nav li 		            { list-style:none; margin:0; padding:0; }	        /* Reset browser defaults. */
nav li a 				        { display:block; } 								/* Creates a bigger hit area. */


/*	NAV - HORIZONTAL
-------------------------------------------------------------------------------------------------------------*/
nav[am~="horizontal"] li        { display:inline-block; }
nav[am~="horizontal"] li a      { display:inline-block; }


/*	GRID - 12 Columns, Max-Width: 960,
-------------------------------------------------------------------------------------------------------------*/
[am~="stage-outer"] {
    width: 100%;
    max-width: 960px;
}

[am~="stage-inner"] { padding: 30px 15px; }


@media only screen and (min-width: 0) and (max-width: 767px) {

    [am~="stage-inner"] { padding: 15px; }

    [am~="sm-hide"],
    [am~="sm-none"]        { display: none; }

    [am~="sm-hide-important"],
    [am~="sm-none-important"]        { display: none !important; }

    [am~="sm-x1"]	       { width: 8.3333%; }
    [am~="sm-x2"]	       { width: 16.6666%; }
    [am~="sm-x3"]	       { width: 25%; }
    [am~="sm-x4"]	       { width: 33.3333%; }
    [am~="sm-x5"]	       { width: 41.6666%; }
    [am~="sm-x6"]	       { width: 50%; }
    [am~="sm-x7"]	       { width: 58.3333%; }
    [am~="sm-x8"]	       { width: 66.6666%; }
    [am~="sm-x9"]	       { width: 75%; }
    [am~="sm-x10"]	       { width: 83.3333%; }
    [am~="sm-x11"]	       { width: 91.6666%; }
    [am~="sm-x12"]	       { width: 100%; }

    [am~="sm-x10%"]	    { width: 10%; }
    [am~="sm-x15%"]	    { width: 15%; }
    [am~="sm-x20%"]	    { width: 20%; }
    [am~="sm-x25%"]	       { width: 25%; }
    [am~="sm-x30%"]	       { width: 30%; }
    [am~="sm-x33%"]	       { width: 33.3333%; }
    [am~="sm-x50%"]	       { width: 50%; }
    [am~="sm-x75%"]	       { width: 75%; }
    [am~="sm-x100%"]	   { width: 100%; }

    [am~="sm-y1"]	       { height: 8.3333%; }
    [am~="sm-y2"]	       { height: 16.6666%; }
    [am~="sm-y3"]	       { height: 25%; }
    [am~="sm-y4"]	       { height: 33.3333%; }
    [am~="sm-y5"]	       { height: 41.6666%; }
    [am~="sm-y6"]	       { height: 50%; }
    [am~="sm-y7"]	       { height: 58.3333%; }
    [am~="sm-y8"]	       { height: 66.6666%; }
    [am~="sm-y9"]	       { height: 75%; }
    [am~="sm-y10"]	       { height: 83.3333%; }
    [am~="sm-y11"]	       { height: 91.6666%; }
    [am~="sm-y12"]	       { height: 100%; }

    [am~="sm-y25%"]	       { height: 25%; }
    [am~="sm-y33%"]	       { height: 33.3333%; }
    [am~="sm-y50%"]	       { height: 50%; }
    [am~="sm-y75%"]	       { height: 75%; }
    [am~="sm-y100%"]	   { height: 100%; }

}

@media only screen and (min-width: 768px) and (max-width: 959px) {

    [am~="med-hide"],
    [am~="med-none"]     { display: none; }

    [am~="med-hide-important"],
    [am~="med-none-important"]        { display: none !important; }

    [am~="med-x1"]	    { width: 8.3333%; }
    [am~="med-x2"]	    { width: 16.6666%; }
    [am~="med-x3"]	    { width: 25%; }
    [am~="med-x4"]	    { width: 33.3333%; }
    [am~="med-x5"]	    { width: 41.6666%; }
    [am~="med-x6"]	    { width: 50%; }
    [am~="med-x7"]	    { width: 58.3333%; }
    [am~="med-x8"]	    { width: 66.6666%; }
    [am~="med-x9"]	    { width: 75%; }
    [am~="med-x10"]	    { width: 83.3333%; }
    [am~="med-x11"]	    { width: 91.6666%; }
    [am~="med-x12"]	    { width: 100%; }

    [am~="med-x10%"]	    { width: 10%; }
    [am~="med-x12%"]	    { width: 12%; }
    [am~="med-x15%"]	    { width: 15%; }
    [am~="med-x20%"]	    { width: 20%; }
    [am~="med-x25%"]	    { width: 25%; }
    [am~="med-x30%"]	    { width: 30%; }
    [am~="med-x33%"]	    { width: 33.3333%; }
    [am~="med-x40%"]	    { width: 40%; }
    [am~="med-x50%"]	    { width: 50%; }
    [am~="med-x60%"]	    { width: 60%; }
    [am~="med-x70%"]	    { width: 70%; }
    [am~="med-x75%"]	    { width: 75%; }
    [am~="med-x80%"]	    { width: 80%; }
    [am~="med-x85%"]	    { width: 85%; }
    [am~="med-x88%"]	    { width: 88%; }
    [am~="med-x100%"]	{ width: 100%; }

    [am~="med-y1"]	       { height: 8.3333%; }
    [am~="med-y2"]	       { height: 16.6666%; }
    [am~="med-y3"]	       { height: 25%; }
    [am~="med-y4"]	       { height: 33.3333%; }
    [am~="med-y5"]	       { height: 41.6666%; }
    [am~="med-y6"]	       { height: 50%; }
    [am~="med-y7"]	       { height: 58.3333%; }
    [am~="med-y8"]	       { height: 66.6666%; }
    [am~="med-y9"]	       { height: 75%; }
    [am~="med-y10"]	       { height: 83.3333%; }
    [am~="med-y11"]	       { height: 91.6666%; }
    [am~="med-y12"]	       { height: 100%; }

    [am~="med-y25%"]	   { height: 25%; }
    [am~="med-y33%"]	   { height: 33.3333%; }
    [am~="med-y50%"]	   { height: 50%; }
    [am~="med-y75%"]	   { height: 75%; }
    [am~="med-y100%"]	   { height: 100%; }

}

@media only screen and (min-width: 960px) {

    [am~="lg-hide"],
    [am~="lg-none"]     { display: none; }

    [am~="lg-hide-important"],
    [am~="lg-none-important"]        { display: none !important; }

    [am~="lg-x1"]	    { width: 8.3333%; }
    [am~="lg-x2"]	    { width: 16.6666%; }
    [am~="lg-x3"]	    { width: 25%; }
    [am~="lg-x4"]	    { width: 33.3333%; }
    [am~="lg-x5"]	    { width: 41.6666%; }
    [am~="lg-x6"]	    { width: 50%; }
    [am~="lg-x7"]	    { width: 58.3333%; }
    [am~="lg-x8"]	    { width: 66.6666%; }
    [am~="lg-x9"]	    { width: 75%; }
    [am~="lg-x10"]	    { width: 83.3333%; }
    [am~="lg-x11"]	    { width: 91.6666%; }
    [am~="lg-x12"]	    { width: 100%; }

    [am~="lg-x10%"]	    { width: 10%; }
    [am~="lg-x12%"]	    { width: 12%; }
    [am~="lg-x15%"]	    { width: 15%; }
    [am~="lg-x20%"]	    { width: 20%; }
    [am~="lg-x25%"]	    { width: 25%; }
    [am~="lg-x30%"]	    { width: 30%; }
    [am~="lg-x33%"]	    { width: 33.3333%; }
    [am~="lg-x40%"]	    { width: 40%; }
    [am~="lg-x50%"]	    { width: 50%; }
    [am~="lg-x60%"]	    { width: 60%; }
    [am~="lg-x70%"]	    { width: 70%; }
    [am~="lg-x75%"]	    { width: 75%; }
    [am~="lg-x80%"]	    { width: 80%; }
    [am~="lg-x85%"]	    { width: 85%; }
    [am~="lg-x88%"]	    { width: 88%; }
    [am~="lg-x100%"]	{ width: 100%; }

    [am~="lg-y1"]	       { height: 8.3333%; }
    [am~="lg-y2"]	       { height: 16.6666%; }
    [am~="lg-y3"]	       { height: 25%; }
    [am~="lg-y4"]	       { height: 33.3333%; }
    [am~="lg-y5"]	       { height: 41.6666%; }
    [am~="lg-y6"]	       { height: 50%; }
    [am~="lg-y7"]	       { height: 58.3333%; }
    [am~="lg-y8"]	       { height: 66.6666%; }
    [am~="lg-y9"]	       { height: 75%; }
    [am~="lg-y10"]	       { height: 83.3333%; }
    [am~="lg-y11"]	       { height: 91.6666%; }
    [am~="lg-y12"]	       { height: 100%; }

    [am~="lg-y25%"]	       { height: 25%; }
    [am~="lg-y33%"]	       { height: 33.3333%; }
    [am~="lg-y50%"]	       { height: 50%; }
    [am~="lg-y75%"]	       { height: 75%; }
    [am~="lg-y100%"]	   { height: 100%; }

}