/**
 * Real simple 12 cells based grid system, automatically parametered in its own attribute
*/
@media (min-width:321px) {
    
    /* - Table method (default) - 1 row per declaration - */
    [data-grid] { display:table; table-layout:fixed; width:100%; box-sizing:border-box;}
    [data-grid] > [data-grid] { display:table-cell; vertical-align: top; box-sizing:inherit;}
    [data-grid] > [data-grid^="1"]    { width: 8.3333333%; }
    [data-grid] > [data-grid^="1.5"]  { width: 12.5%; }
    [data-grid] > [data-grid^="2"]    { width: 16.666666667%; }
    [data-grid] > [data-grid^="2.5"]  { width: 20.833333333%; }
    [data-grid] > [data-grid^="3"]    { width: 25%; }
    [data-grid] > [data-grid^="3.5"]  { width: 29.1666667%; }
    [data-grid] > [data-grid^="4"]    { width: 33.3333%; }
    [data-grid] > [data-grid^="4.5"]  { width: 37.5%; }
    [data-grid] > [data-grid^="5"]    { width: 41.666666667%; }
    [data-grid] > [data-grid^="5.5"]  { width: 45.8333333%; }
    [data-grid] > [data-grid^="6"]    { width: 50%; }
    [data-grid] > [data-grid^="6.5"]  { width: 54.1666667%; }
    [data-grid] > [data-grid^="7"]    { width: 58.333333333%; }
    [data-grid] > [data-grid^="7.5"]  { width: 62.5%; }
    [data-grid] > [data-grid^="8"]    { width: 66.666666667%; }
    [data-grid] > [data-grid^="8.5"]  { width: 70.8333333%; }
    [data-grid] > [data-grid^="9"]    { width: 75%; }
    [data-grid] > [data-grid^="9.5"]  { width: 79.1666667%; }
    [data-grid] > [data-grid^="10"]   { width: 83.333333333%; }
    [data-grid] > [data-grid^="10.5"] { width: 87.5%; }
    [data-grid] > [data-grid^="11"]   { width: 91.666666667%; }
    [data-grid] > [data-grid^="11.5"] { width: 95.8333333%; }
    [data-grid] > [data-grid^="12"]   { width: 100%; }
    
    /* - Float method - no limit on rows */
    [data-grid~="method:float"] {display:block;}
    [data-grid~="method:float"]:after { content: " "; display: table; clear: both; }
    [data-grid~="method:float"] > [data-grid] { display:block; float:left; }
    [data-grid~="method:float"] > [data-grid~="float:right"] { float:right; }
    [data-grid~="method:float"][data-grid~="clear:2"] > [data-grid]:nth-child(2n+1),
    [data-grid~="method:float"][data-grid~="clear:3"] > [data-grid]:nth-child(3n+1),
    [data-grid~="method:float"][data-grid~="clear:4"] > [data-grid]:nth-child(4n+1),
    [data-grid~="method:float"][data-grid~="clear:5"] > [data-grid]:nth-child(5n+1),
    [data-grid~="method:float"][data-grid~="clear:6"] > [data-grid]:nth-child(6n+1),
    [data-grid~="method:float"][data-grid~="clear:7"] > [data-grid]:nth-child(7n+1),
    [data-grid~="method:float"][data-grid~="clear:8"] > [data-grid]:nth-child(8n+1),
    [data-grid~="method:float"][data-grid~="clear:9"] > [data-grid]:nth-child(9n+1),
    [data-grid~="method:float"][data-grid~="clear:10"] > [data-grid]:nth-child(10n+1),
    [data-grid~="method:float"][data-grid~="clear:11"] > [data-grid]:nth-child(11n+1),
    [data-grid~="method:float"][data-grid~="clear:12"] > [data-grid]:nth-child(12n+1) {clear:both;}
    
    /* - Inline method - no limits on rows */
    [data-grid~="method:inline"] {display:block;}
    [data-grid~="method:inline"] > [data-grid] { display:inline-block; }
    
    /* - Flex method - */
    [data-grid~="method:flex"] {display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex;}
    [data-grid~="method:flex"][data-grid~="flex:row"] {flex-direction:row;}
    [data-grid~="method:flex"][data-grid~="flex:row-reverse"] {flex-direction:row-reverse;}
    [data-grid~="method:flex"][data-grid~="flex:column"] {flex-direction:column;}
    [data-grid~="method:flex"][data-grid~="flex:column-reverse"] {flex-direction:column-reverse;}
    [data-grid~="method:flex"] > [data-grid] {display:block;}
    [data-grid~="method:flex"] > [data-grid~="order:1"]  { order:1; }
    [data-grid~="method:flex"] > [data-grid~="order:2"]  { order:2; }
    [data-grid~="method:flex"] > [data-grid~="order:3"]  { order:3; }
    [data-grid~="method:flex"] > [data-grid~="order:4"]  { order:4; }
    [data-grid~="method:flex"] > [data-grid~="order:5"]  { order:5; }
    [data-grid~="method:flex"] > [data-grid~="order:6"]  { order:6; }
    [data-grid~="method:flex"] > [data-grid~="order:7"]  { order:7; }
    [data-grid~="method:flex"] > [data-grid~="order:8"]  { order:8; }
    [data-grid~="method:flex"] > [data-grid~="order:9"]  { order:9; }
    [data-grid~="method:flex"] > [data-grid~="order:10"] { order:10; }
    [data-grid~="method:flex"] > [data-grid~="order:11"] { order:11; }
    [data-grid~="method:flex"] > [data-grid~="order:12"] { order:12; }
}

/* Horizontal alignment */
[data-grid] > [data-grid~="align:left"],
[data-grid~="align:left"] > [data-grid] { text-align:left; }
[data-grid] > [data-grid~="align:center"],
[data-grid~="align:center"] > [data-grid] { text-align:center; }
[data-grid] > [data-grid~="align:right"],
[data-grid~="align:right"] > [data-grid] { text-align:right; }

/* Vertical alignment */
[data-grid] > [data-grid~="valign:top"],
[data-grid~="valign:top"] > [data-grid] { vertical-align:top; }
[data-grid~="method:flex"][data-grid~="valign:top"] {-webkit-align-items:top;align-items:top;}
[data-grid] > [data-grid~="valign:middle"],
[data-grid~="valign:middle"] > [data-grid] { vertical-align:middle; }
[data-grid~="method:flex"][data-grid~="valign:middle"] {-webkit-align-items:center;align-items:center;}
[data-grid] > [data-grid~="valign:bottom"],
[data-grid~="valign:bottom"] > [data-grid] { vertical-align:bottom; }
[data-grid~="method:flex"][data-grid~="valign:bottom"] {-webkit-align-items:bottom;align-items:bottom;}

/** Goodies **/
[data-grid] img {max-width:100%; height: auto;}

@media (max-width:2560px) {
    [data-grid~="break:2560"] { display:block; width:auto; }
    [data-grid~="break:2560"] > [data-grid] { display:block; width:auto!important }
    [data-grid~="break:2560"][data-grid~="method:float"] > [data-grid] { float:none }
    [data-grid~="break:2560"][data-grid~="method:float"]:after{content:none}
    [data-grid~="break:2560"] > [data-grid-break="align:left"],
    [data-grid~="break:2560"][data-grid-break="align:left"] > [data-grid] {text-align:left;}
    [data-grid~="break:2560"] > [data-grid-break="align:center"],
    [data-grid~="break:2560"][data-grid-break="align:center"] > [data-grid] {text-align:center;}
    [data-grid~="break:2560"] > [data-grid-break="align:right"],
    [data-grid~="break:2560"][data-grid-break="align:right"] > [data-grid] {text-align:right;}
    [data-grid~="break:2560"] > [data-grid-break="hide"] {display:none;}
} @media (max-width:1920px) {
    [data-grid~="break:1920"] { display:block; width:auto; }
    [data-grid~="break:1920"] > [data-grid] { display:block; width:auto!important }
    [data-grid~="break:1920"][data-grid~="method:float"] > [data-grid] { float:none }
    [data-grid~="break:1920"][data-grid~="method:float"]:after{content:none}
    [data-grid~="break:1920"] > [data-grid-break="align:left"],
    [data-grid~="break:1920"][data-grid-break="align:left"] > [data-grid] {text-align:left;}
    [data-grid~="break:1920"] > [data-grid-break="align:center"],
    [data-grid~="break:1920"][data-grid-break="align:center"] > [data-grid] {text-align:center;}
    [data-grid~="break:1920"] > [data-grid-break="align:right"],
    [data-grid~="break:1920"][data-grid-break="align:right"] > [data-grid] {text-align:right;}
    [data-grid~="break:1920"] > [data-grid-break="hide"] {display:none;}
} @media (max-width:1600px) {
    [data-grid~="break:1600"] { display:block; width:auto; }
    [data-grid~="break:1600"] > [data-grid] { display:block; width:auto!important }
    [data-grid~="break:1600"][data-grid~="method:float"] > [data-grid] { float:none }
    [data-grid~="break:1600"][data-grid~="method:float"]:after{content:none}
    [data-grid~="break:1600"] > [data-grid-break="align:left"],
    [data-grid~="break:1600"][data-grid-break="align:left"] > [data-grid] {text-align:left;}
    [data-grid~="break:1600"] > [data-grid-break="align:center"],
    [data-grid~="break:1600"][data-grid-break="align:center"] > [data-grid] {text-align:center;}
    [data-grid~="break:1600"] > [data-grid-break="align:right"],
    [data-grid~="break:1600"][data-grid-break="align:right"] > [data-grid] {text-align:right;}
    [data-grid~="break:1600"] > [data-grid-break="hide"] {display:none;}
} @media (max-width:1366px) {
    [data-grid~="break:1366"] { display:block; width:auto; }
    [data-grid~="break:1366"] > [data-grid] { display:block; width:auto!important }
    [data-grid~="break:1366"][data-grid~="method:float"] > [data-grid] { float:none }
    [data-grid~="break:1366"][data-grid~="method:float"]:after{content:none}
    [data-grid~="break:1920"] > [data-grid-break="align:left"],
    [data-grid~="break:1920"][data-grid-break="align:left"] > [data-grid] {text-align:left;}
    [data-grid~="break:1920"] > [data-grid-break="align:center"],
    [data-grid~="break:1920"][data-grid-break="align:center"] > [data-grid] {text-align:center;}
    [data-grid~="break:1920"] > [data-grid-break="align:right"],
    [data-grid~="break:1920"][data-grid-break="align:right"] > [data-grid] {text-align:right;}
} @media (max-width:1280px) {
    [data-grid~="break:1280"] { display:block; width:auto; }
    [data-grid~="break:1280"] > [data-grid] { display:block; width:auto!important }
    [data-grid~="break:1280"][data-grid~="method:float"] > [data-grid] { float:none }
    [data-grid~="break:1280"][data-grid~="method:float"]:after{content:none}
    [data-grid~="break:1280"] > [data-grid-break="align:left"],
    [data-grid~="break:1280"][data-grid-break="align:left"] > [data-grid] {text-align:left;}
    [data-grid~="break:1280"] > [data-grid-break="align:center"],
    [data-grid~="break:1280"][data-grid-break="align:center"] > [data-grid] {text-align:center;}
    [data-grid~="break:1280"] > [data-grid-break="align:right"],
    [data-grid~="break:1280"][data-grid-break="align:right"] > [data-grid] {text-align:right;}
    [data-grid~="break:1280"] > [data-grid-break="hide"] {display:none;}
} @media (max-width:1080px) {
    [data-grid~="break:1080"] { display:block; width:auto; }
    [data-grid~="break:1080"] > [data-grid] { display:block; width:auto!important }
    [data-grid~="break:1080"][data-grid~="method:float"] > [data-grid] { float:none }
    [data-grid~="break:1080"][data-grid~="method:float"]:after{content:none}
    [data-grid~="break:1080"] > [data-grid-break="align:left"],
    [data-grid~="break:1080"][data-grid-break="align:left"] > [data-grid] {text-align:left;}
    [data-grid~="break:1080"] > [data-grid-break="align:center"],
    [data-grid~="break:1080"][data-grid-break="align:center"] > [data-grid] {text-align:center;}
    [data-grid~="break:1080"] > [data-grid-break="align:right"],
    [data-grid~="break:1080"][data-grid-break="align:right"] > [data-grid] {text-align:right;}
    [data-grid~="break:1080"] > [data-grid-break="hide"] {display:none;}
} @media (max-width:960px) {
    [data-grid~="break:960"] { display:block; width:auto; }
    [data-grid~="break:960"] > [data-grid] { display:block; width:auto!important }
    [data-grid~="break:960"][data-grid~="method:float"] > [data-grid] { float:none }
    [data-grid~="break:960"][data-grid~="method:float"]:after{content:none}
    [data-grid~="break:960"] > [data-grid-break="align:left"],
    [data-grid~="break:960"][data-grid-break="align:left"] > [data-grid] {text-align:left;}
    [data-grid~="break:960"] > [data-grid-break="align:center"],
    [data-grid~="break:960"][data-grid-break="align:center"] > [data-grid] {text-align:center;}
    [data-grid~="break:960"] > [data-grid-break="align:right"],
    [data-grid~="break:960"][data-grid-break="align:right"] > [data-grid] {text-align:right;}
    [data-grid~="break:960"] > [data-grid-break="hide"] {display:none;}
} @media (max-width:840px) {
    [data-grid~="break:840"] { display:block; width:auto; }
    [data-grid~="break:840"] > [data-grid] { display:block; width:auto!important }
    [data-grid~="break:840"][data-grid~="method:float"] > [data-grid] { float:none }
    [data-grid~="break:840"][data-grid~="method:float"]:after{content:none}
    [data-grid~="break:840"] > [data-grid-break="align:left"],
    [data-grid~="break:840"][data-grid-break="align:left"] > [data-grid] {text-align:left;}
    [data-grid~="break:840"] > [data-grid-break="align:center"],
    [data-grid~="break:840"][data-grid-break="align:center"] > [data-grid] {text-align:center;}
    [data-grid~="break:840"] > [data-grid-break="align:right"],
    [data-grid~="break:840"][data-grid-break="align:right"] > [data-grid] {text-align:right;}
    [data-grid~="break:840"] > [data-grid-break="hide"] {display:none;}
} @media (max-width:720px) {
    [data-grid~="break:720"] { display:block; width:auto; }
    [data-grid~="break:720"] > [data-grid] { display:block; width:auto!important }
    [data-grid~="break:720"][data-grid~="method:float"] > [data-grid] { float:none }
    [data-grid~="break:720"][data-grid~="method:float"]:after{content:none}
    [data-grid~="break:720"] > [data-grid-break="align:left"],
    [data-grid~="break:720"][data-grid-break="align:left"] > [data-grid] {text-align:left;}
    [data-grid~="break:720"] > [data-grid-break="align:center"],
    [data-grid~="break:720"][data-grid-break="align:center"] > [data-grid] {text-align:center;}
    [data-grid~="break:720"] > [data-grid-break="align:right"],
    [data-grid~="break:720"][data-grid-break="align:right"] > [data-grid] {text-align:right;}
    [data-grid~="break:720"] > [data-grid-break="hide"] {display:none;}
} @media (max-width:640px) {
    [data-grid~="break:640"] { display:block; width:auto; }
    [data-grid~="break:640"] > [data-grid] { display:block; width:auto!important }
    [data-grid~="break:640"][data-grid~="method:float"] > [data-grid] { float:none }
    [data-grid~="break:640"][data-grid~="method:float"]:after{content:none}
    [data-grid~="break:640"] > [data-grid-break="align:left"],
    [data-grid~="break:640"][data-grid-break="align:left"] > [data-grid] {text-align:left;}
    [data-grid~="break:640"] > [data-grid-break="align:center"],
    [data-grid~="break:640"][data-grid-break="align:center"] > [data-grid] {text-align:center;}
    [data-grid~="break:640"] > [data-grid-break="align:right"],
    [data-grid~="break:640"][data-grid-break="align:right"] > [data-grid] {text-align:right;}
    [data-grid~="break:640"] > [data-grid-break="hide"] {display:none;}
} @media (max-width:480px) {
    [data-grid~="break:480"] { display:block; width:auto; }
    [data-grid~="break:480"] > [data-grid] { display:block; width:auto!important }
    [data-grid~="break:480"][data-grid~="method:float"] > [data-grid] { float:none }
    [data-grid~="break:480"][data-grid~="method:float"]:after{content:none}
    [data-grid~="break:480"] > [data-grid-break="align:left"],
    [data-grid~="break:480"][data-grid-break="align:left"] > [data-grid] {text-align:left;}
    [data-grid~="break:480"] > [data-grid-break="align:center"],
    [data-grid~="break:480"][data-grid-break="align:center"] > [data-grid] {text-align:center;}
    [data-grid~="break:480"] > [data-grid-break="align:right"],
    [data-grid~="break:480"][data-grid-break="align:right"] > [data-grid] {text-align:right;}
    [data-grid~="break:480"] > [data-grid-break="hide"] {display:none;}
} @media (max-width:320px) {
    [data-grid~="break:320"] { display:block; width:auto; }
    [data-grid~="break:320"] > [data-grid] { display:block; width:auto!important }
    [data-grid~="break:320"][data-grid~="method:float"] > [data-grid] { float:none }
    [data-grid~="break:320"][data-grid~="method:float"]:after{content:none}
    [data-grid~="break:320"] > [data-grid-break="align:left"],
    [data-grid~="break:320"][data-grid-break="align:left"] > [data-grid] {text-align:left;}
    [data-grid~="break:320"] > [data-grid-break="align:center"],
    [data-grid~="break:320"][data-grid-break="align:center"] > [data-grid] {text-align:center;}
    [data-grid~="break:320"] > [data-grid-break="align:right"],
    [data-grid~="break:320"][data-grid-break="align:right"] > [data-grid] {text-align:right;}
    [data-grid~="break:320"] > [data-grid-break="hide"] {display:none;}
}