/* ===============================================
GENERAL - 12 colums - Grid System
================================================== */
.container 
{
    margin: 0rem auto;

    width: 94%;
    max-width: 640px; /* 1280 */
}

@media only screen and (min-width: 641px)   { .container { width: 94%; max-width: 800px; } }
@media only screen and (min-width: 800px)   { .container { width: 94%; max-width: 1024px; } }
@media only screen and (min-width: 1024px)  { .container { width: 94%; max-width: 1225px; } }
@media only screen and (min-width: 1225px)  { .container { width: 94%; max-width: 1400px; } }
@media only screen and (min-width: 1400px)  { .container { width: 94%; max-width: 1500px; } }

.container .row
{
    margin-left: calc(var(--size-x0-4) * -1);
    margin-right: calc(var(--size-x0-4) * -1);
}

.section
{
    padding-top: var(--size-x0-5);
    padding-bottom: var(--size-x0-5);
}

.section.no-pad
{
    padding: 0rem;
}

.section.no-pad-bot 
{
    padding-bottom: 0rem;
}

.section.no-pad-top 
{
    padding-top: 0rem;
}

.row 
{   
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--size-x1);
}

.row::after 
{
    content: "";
    display: table;
    clear: both;
}

.row .col 
{
    float: left;
    box-sizing: border-box;
    padding: 0rem var(--size-x0-4);
}

.row .col.row-col
{
    padding: 0rem 0rem;
}

.row .col[class*="s"]
{
    left: auto;
    right: auto;
}

.row .col[class*="push-"],
.row .col[class*="pull-"] 
{
    position: relative;
}


/* ===============================================
SCREEN - small
================================================== */
.row .col.s1            { width: 8.3333333333%; }
.row .col.s2            { width: 16.6666666667%; }
.row .col.s3            { width: 25%; }
.row .col.s4            { width: 33.3333333333%; }
.row .col.s5            { width: 41.6666666667%; }
.row .col.s6            { width: 50%; }
.row .col.s7            { width: 58.3333333333%; }
.row .col.s8            { width: 66.6666666667%; }
.row .col.s9            { width: 75%; }
.row .col.s10           { width: 83.3333333333%; }
.row .col.s11           { width: 91.6666666667%; }
.row .col.s12           { width: 100%; }

.row .col.offset-s1     { margin-left: 8.3333333333%; }
.row .col.offset-s2     { margin-left: 16.6666666667%; }
.row .col.offset-s3     { margin-left: 25%; }
.row .col.offset-s4     { margin-left: 33.3333333333%; }
.row .col.offset-s5     { margin-left: 41.6666666667%; }
.row .col.offset-s6     { margin-left: 50%; }
.row .col.offset-s7     { margin-left: 58.3333333333%; }
.row .col.offset-s8     { margin-left: 66.6666666667%; }
.row .col.offset-s9     { margin-left: 75%; }
.row .col.offset-s10    { margin-left: 83.3333333333%; }
.row .col.offset-s11    { margin-left: 91.6666666667%; }
.row .col.offset-s12    { margin-left: 100%; }

.row .col.pull-s1       { right: 8.3333333333%; }
.row .col.pull-s2       { right: 16.6666666667%; }
.row .col.pull-s3       { right: 25%; }
.row .col.pull-s4       { right: 33.3333333333%; }
.row .col.pull-s5       { right: 41.6666666667%; }
.row .col.pull-s6       { right: 50%; }
.row .col.pull-s7       { right: 58.3333333333%; }
.row .col.pull-s8       { right: 66.6666666667%; }
.row .col.pull-s9       { right: 75%; }
.row .col.pull-s10      { right: 83.3333333333%; }
.row .col.pull-s11      { right: 91.6666666667%; }
.row .col.pull-s12      { right: 100%; }

.row .col.push-s1       { left: 8.3333333333%; }
.row .col.push-s2       { left: 16.6666666667%; }
.row .col.push-s3       { left: 25%; }
.row .col.push-s4       { left: 33.3333333333%; }
.row .col.push-s5       { left: 41.6666666667%; }
.row .col.push-s6       { left: 50%; }
.row .col.push-s7       { left: 58.3333333333%; }
.row .col.push-s8       { left: 66.6666666667%; }
.row .col.push-s9       { left: 75%; }
.row .col.push-s10      { left: 83.3333333333%; }
.row .col.push-s11      { left: 91.6666666667%; }
.row .col.push-s12      { left: 100%; }



/* ===============================================
SCREEN - medium
================================================== */
@media only screen and (min-width: 641px) 
{        
    .row .col.m1            { width: 8.3333333333%; }
    .row .col.m2            { width: 16.6666666667%; }
    .row .col.m3            { width: 25%; }
    .row .col.m4            { width: 33.3333333333%; }
    .row .col.m5            { width: 41.6666666667%; }
    .row .col.m6            { width: 50%; }
    .row .col.m7            { width: 58.3333333333%; }
    .row .col.m8            { width: 66.6666666667%; }
    .row .col.m9            { width: 75%; }
    .row .col.m10           { width: 83.3333333333%; }
    .row .col.m11           { width: 91.6666666667%; }
    .row .col.m12           { width: 100%; }

    .row .col.offset-m1     { margin-left: 8.3333333333%; }
    .row .col.offset-m2     { margin-left: 16.6666666667%; }
    .row .col.offset-m3     { margin-left: 25%; }
    .row .col.offset-m4     { margin-left: 33.3333333333%; }
    .row .col.offset-m5     { margin-left: 41.6666666667%; }
    .row .col.offset-m6     { margin-left: 50%; }
    .row .col.offset-m7     { margin-left: 58.3333333333%; }
    .row .col.offset-m8     { margin-left: 66.6666666667%; }
    .row .col.offset-m9     { margin-left: 75%; }
    .row .col.offset-m10    { margin-left: 83.3333333333%; }
    .row .col.offset-m11    { margin-left: 91.6666666667%; }
    .row .col.offset-m12    { margin-left: 100%; }

    .row .col.pull-m1       { right: 8.3333333333%; }
    .row .col.pull-m2       { right: 16.6666666667%; }
    .row .col.pull-m3       { right: 25%; }
    .row .col.pull-m4       { right: 33.3333333333%; }
    .row .col.pull-m5       { right: 41.6666666667%; }
    .row .col.pull-m6       { right: 50%; }
    .row .col.pull-m7       { right: 58.3333333333%; }
    .row .col.pull-m8       { right: 66.6666666667%; }
    .row .col.pull-m9       { right: 75%; }
    .row .col.pull-m10      { right: 83.3333333333%; }
    .row .col.pull-m11      { right: 91.6666666667%; }
    .row .col.pull-m12      { right: 100%; }

    .row .col.push-m1       { left: 8.3333333333%; }
    .row .col.push-m2       { left: 16.6666666667%; }
    .row .col.push-m3       { left: 25%; }
    .row .col.push-m4       { left: 33.3333333333%; }
    .row .col.push-m5       { left: 41.6666666667%; }
    .row .col.push-m6       { left: 50%; }
    .row .col.push-m7       { left: 58.3333333333%; }
    .row .col.push-m8       { left: 66.6666666667%; }
    .row .col.push-m9       { left: 75%; }
    .row .col.push-m10      { left: 83.3333333333%; }
    .row .col.push-m11      { left: 91.6666666667%; }
    .row .col.push-m12      { left: 100%; }
}



/* ===============================================
SCREEN - lmedium
================================================== */
@media only screen and (min-width: 800px) 
{
    .row .col.lm1           { width: 8.3333333333%; }
    .row .col.lm2           { width: 16.6666666667%; }
    .row .col.lm3           { width: 25%; }
    .row .col.lm4           { width: 33.3333333333%; }
    .row .col.lm5           { width: 41.6666666667%; }
    .row .col.lm6           { width: 50%; }
    .row .col.lm7           { width: 58.3333333333%; }
    .row .col.lm8           { width: 66.6666666667%; }
    .row .col.lm9           { width: 75%; }
    .row .col.lm10          { width: 83.3333333333%; }
    .row .col.lm11          { width: 91.6666666667%; }
    .row .col.lm12          { width: 100%; }

    .row .col.offset-lm1    { margin-left: 8.3333333333%; }
    .row .col.offset-lm2    { margin-left: 16.6666666667%; }
    .row .col.offset-lm3    { margin-left: 25%; }
    .row .col.offset-lm4    { margin-left: 33.3333333333%; }
    .row .col.offset-lm5    { margin-left: 41.6666666667%; }
    .row .col.offset-lm6    { margin-left: 50%; }
    .row .col.offset-lm7    { margin-left: 58.3333333333%; }
    .row .col.offset-lm8    { margin-left: 66.6666666667%; }
    .row .col.offset-lm9    { margin-left: 75%; }
    .row .col.offset-lm10   { margin-left: 83.3333333333%; }
    .row .col.offset-lm11   { margin-left: 91.6666666667%; }
    .row .col.offset-lm12   { margin-left: 100%; }

    .row .col.pull-lm1      { right: 8.3333333333%; }
    .row .col.pull-lm2      { right: 16.6666666667%; }
    .row .col.pull-lm3      { right: 25%; }
    .row .col.pull-lm4      { right: 33.3333333333%; }
    .row .col.pull-lm5      { right: 41.6666666667%; }
    .row .col.pull-lm6      { right: 50%; }
    .row .col.pull-lm7      { right: 58.3333333333%; }
    .row .col.pull-lm8      { right: 66.6666666667%; }
    .row .col.pull-lm9      { right: 75%; }
    .row .col.pull-lm10     { right: 83.3333333333%; }
    .row .col.pull-lm11     { right: 91.6666666667%; }
    .row .col.pull-lm12     { right: 100%; }

    .row .col.push-lm1      { left: 8.3333333333%; }
    .row .col.push-lm2      { left: 16.6666666667%; }
    .row .col.push-lm3      { left: 25%; }
    .row .col.push-lm4      { left: 33.3333333333%; }
    .row .col.push-lm5      { left: 41.6666666667%; }
    .row .col.push-lm6      { left: 50%; }
    .row .col.push-lm7      { left: 58.3333333333%; }
    .row .col.push-lm8      { left: 66.6666666667%; }
    .row .col.push-lm9      { left: 75%; }
    .row .col.push-lm10     { left: 83.3333333333%; }
    .row .col.push-lm11     { left: 91.6666666667%; }
    .row .col.push-lm12     { left: 100%; }
}



/* ===============================================
SCREEN - xmedium
================================================== */
@media only screen and (min-width: 1024px) 
{        
    .row .col.xm1           { width: 8.3333333333%; }
    .row .col.xm2           { width: 16.6666666667%; }
    .row .col.xm3           { width: 25%; }
    .row .col.xm4           { width: 33.3333333333%; }
    .row .col.xm5           { width: 41.6666666667%; }
    .row .col.xm6           { width: 50%; }
    .row .col.xm7           { width: 58.3333333333%; }
    .row .col.xm8           { width: 66.6666666667%; }
    .row .col.xm9           { width: 75%; }
    .row .col.xm10          { width: 83.3333333333%; }
    .row .col.xm11          { width: 91.6666666667%; }
    .row .col.xm12          { width: 100%; }

    .row .col.offset-xm1    { margin-left: 8.3333333333%; }
    .row .col.offset-xm2    { margin-left: 16.6666666667%; }
    .row .col.offset-xm3    { margin-left: 25%; }
    .row .col.offset-xm4    { margin-left: 33.3333333333%; }
    .row .col.offset-xm5    { margin-left: 41.6666666667%; }
    .row .col.offset-xm6    { margin-left: 50%; }
    .row .col.offset-xm7    { margin-left: 58.3333333333%; }
    .row .col.offset-xm8    { margin-left: 66.6666666667%; }
    .row .col.offset-xm9    { margin-left: 75%; }
    .row .col.offset-xm10   { margin-left: 83.3333333333%; }
    .row .col.offset-xm11   { margin-left: 91.6666666667%; }
    .row .col.offset-xm12   { margin-left: 100%; }

    .row .col.pull-xm1      { right: 8.3333333333%; }
    .row .col.pull-xm2      { right: 16.6666666667%; }
    .row .col.pull-xm3      { right: 25%; }
    .row .col.pull-xm4      { right: 33.3333333333%; }
    .row .col.pull-xm5      { right: 41.6666666667%; }
    .row .col.pull-xm6      { right: 50%; }
    .row .col.pull-xm7      { right: 58.3333333333%; }
    .row .col.pull-xm8      { right: 66.6666666667%; }
    .row .col.pull-xm9      { right: 75%; }
    .row .col.pull-xm10     { right: 83.3333333333%; }
    .row .col.pull-xm11     { right: 91.6666666667%; }
    .row .col.pull-xm12     { right: 100%; }

    .row .col.push-xm1      { left: 8.3333333333%; }
    .row .col.push-xm2      { left: 16.6666666667%; }
    .row .col.push-xm3      { left: 25%; }
    .row .col.push-xm4      { left: 33.3333333333%; }
    .row .col.push-xm5      { left: 41.6666666667%; }
    .row .col.push-xm6      { left: 50%; }
    .row .col.push-xm7      { left: 58.3333333333%; }
    .row .col.push-xm8      { left: 66.6666666667%; }
    .row .col.push-xm9      { left: 75%; }
    .row .col.push-xm10     { left: 83.3333333333%; }
    .row .col.push-xm11     { left: 91.6666666667%; }
    .row .col.push-xm12     { left: 100%; }
}


/* ===============================================
SCREEN - large
================================================== */
@media only screen and (min-width: 1225px) 
{        
    .row .col.l1            { width: 8.3333333333%; }
    .row .col.l2            { width: 16.6666666667%; }
    .row .col.l3            { width: 25%; }
    .row .col.l4            { width: 33.3333333333%; }
    .row .col.l5            { width: 41.6666666667%; }
    .row .col.l6            { width: 50%; }
    .row .col.l7            { width: 58.3333333333%; }
    .row .col.l8            { width: 66.6666666667%; }
    .row .col.l9            { width: 75%; }
    .row .col.l10           { width: 83.3333333333%; }
    .row .col.l11           { width: 91.6666666667%; }
    .row .col.l12           { width: 100%; }

    .row .col.offset-l1     { margin-left: 8.3333333333%; }
    .row .col.offset-l2     { margin-left: 16.6666666667%; }
    .row .col.offset-l3     { margin-left: 25%; }
    .row .col.offset-l4     { margin-left: 33.3333333333%; }
    .row .col.offset-l5     { margin-left: 41.6666666667%; }
    .row .col.offset-l6     { margin-left: 50%; }
    .row .col.offset-l7     { margin-left: 58.3333333333%; }
    .row .col.offset-l8     { margin-left: 66.6666666667%; }
    .row .col.offset-l9     { margin-left: 75%; }
    .row .col.offset-l10    { margin-left: 83.3333333333%; }
    .row .col.offset-l11    { margin-left: 91.6666666667%; }
    .row .col.offset-l12    { margin-left: 100%; }

    .row .col.pull-l1       { right: 8.3333333333%; }
    .row .col.pull-l2       { right: 16.6666666667%; }
    .row .col.pull-l3       { right: 25%; }
    .row .col.pull-l4       { right: 33.3333333333%; }
    .row .col.pull-l5       { right: 41.6666666667%; }
    .row .col.pull-l6       { right: 50%; }
    .row .col.pull-l7       { right: 58.3333333333%; }
    .row .col.pull-l8       { right: 66.6666666667%; }
    .row .col.pull-l9       { right: 75%; }
    .row .col.pull-l10      { right: 83.3333333333%; }
    .row .col.pull-l11      { right: 91.6666666667%; }
    .row .col.pull-l12      { right: 100%; }

    .row .col.push-l1       { left: 8.3333333333%; }
    .row .col.push-l2       { left: 16.6666666667%; }
    .row .col.push-l3       { left: 25%; }
    .row .col.push-l4       { left: 33.3333333333%; }
    .row .col.push-l5       { left: 41.6666666667%; }
    .row .col.push-l6       { left: 50%; }
    .row .col.push-l7       { left: 58.3333333333%; }
    .row .col.push-l8       { left: 66.6666666667%; }
    .row .col.push-l9       { left: 75%; }
    .row .col.push-l10      { left: 83.3333333333%; }
    .row .col.push-l11      { left: 91.6666666667%; }
    .row .col.push-l12      { left: 100%; }
}


/* ===============================================
SCREEN - xlarge
================================================== */
@media only screen and (min-width: 1400px) 
{        
    .row .col.xl1           { width: 8.3333333333%; }
    .row .col.xl2           { width: 16.6666666667%; }
    .row .col.xl3           { width: 25%; }
    .row .col.xl4           { width: 33.3333333333%; }
    .row .col.xl5           { width: 41.6666666667%; }
    .row .col.xl6           { width: 50%; }
    .row .col.xl7           { width: 58.3333333333%; }
    .row .col.xl8           { width: 66.6666666667%; }
    .row .col.xl9           { width: 75%; }
    .row .col.xl10          { width: 83.3333333333%; }
    .row .col.xl11          { width: 91.6666666667%; }
    .row .col.xl12          { width: 100%; }

    .row .col.offset-xl1    { margin-left: 8.3333333333%; }
    .row .col.offset-xl2    { margin-left: 16.6666666667%; }
    .row .col.offset-xl3    { margin-left: 25%; }
    .row .col.offset-xl4    { margin-left: 33.3333333333%; }
    .row .col.offset-xl5    { margin-left: 41.6666666667%; }
    .row .col.offset-xl6    { margin-left: 50%; }
    .row .col.offset-xl7    { margin-left: 58.3333333333%; }
    .row .col.offset-xl8    { margin-left: 66.6666666667%; }
    .row .col.offset-xl9    { margin-left: 75%; }
    .row .col.offset-xl10   { margin-left: 83.3333333333%; }
    .row .col.offset-xl11   { margin-left: 91.6666666667%; }
    .row .col.offset-xl12   { margin-left: 100%; }

    .row .col.pull-xl1      { right: 8.3333333333%; }
    .row .col.pull-xl2      { right: 16.6666666667%; }
    .row .col.pull-xl3      { right: 25%; }
    .row .col.pull-xl4      { right: 33.3333333333%; }
    .row .col.pull-xl5      { right: 41.6666666667%; }
    .row .col.pull-xl6      { right: 50%; }
    .row .col.pull-xl7      { right: 58.3333333333%; }
    .row .col.pull-xl8      { right: 66.6666666667%; }
    .row .col.pull-xl9      { right: 75%; }
    .row .col.pull-xl10     { right: 83.3333333333%; }
    .row .col.pull-xl11     { right: 91.6666666667%; }
    .row .col.pull-xl12     { right: 100%; }

    .row .col.push-xl1      { left: 8.3333333333%; }
    .row .col.push-xl2      { left: 16.6666666667%; }
    .row .col.push-xl3      { left: 25%; }
    .row .col.push-xl4      { left: 33.3333333333%; }
    .row .col.push-xl5      { left: 41.6666666667%; }
    .row .col.push-xl6      { left: 50%; }
    .row .col.push-xl7      { left: 58.3333333333%; }
    .row .col.push-xl8      { left: 66.6666666667%; }
    .row .col.push-xl9      { left: 75%; }
    .row .col.push-xl10     { left: 83.3333333333%; }
    .row .col.push-xl11     { left: 91.6666666667%; }
    .row .col.push-xl12     { left: 100%; }
}