/* Grid 2.2 */
* {
    box-sizing: border-box;
}
.container {
    max-width: 1160px;
    box-sizing: content-box;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}
.container--fluid {
    max-width: 100%;
}
.content {
    display: flex;
    flex-wrap: wrap;
    margin-left: -20px;
    margin-right: -20px;
}
[class^="col"],
[class*=" col"] {
    padding-left: 20px;
    padding-right: 20px;
}

/**
 * Container: No gaps
 * Removes all column gaps even those on the left and right
 * in medium and small viewports.
 */
.container--no-gaps {
    padding-left: 0;
    padding-right: 0;
}
.container--no-gaps .content {
    margin-left: 0;
    margin-right: 0;
}
.container--no-gaps [class^="col"],
.container--no-gaps [class*=" col"] {
    padding-left: 0;
    padding-right: 0;
}

/**
 * Content: No gaps
 * Removes all column gaps but keeps the gaps on the left and right
 * edge on medium and small viewports.
 */
.content--no-gaps {
    margin: 0 auto;
}
.content--no-gaps .content {
    margin: 0 auto;
}
.content--no-gaps [class^="col"],
.content--no-gaps [class*=" col"] {
    padding-left: 0;
    padding-right: 0;
}

/**
 * Column: No gaps
 */
.col--no-gaps {
    padding-left: 0;
    padding-right: 0;
}

/**
 * Alignments
 */
.col--valign-bottom {
    align-self: flex-end;
}


/**
 * Column and shift widths
 */
.col1    { width:         8.333333333333334%  } /* (100% / (12 / 1)) */
.shift1  { margin-left:   8.333333333333334%  }
.col2    { width:        16.666666666666668%  } /* (100% / (12 / 2)) */
.shift2  { margin-left:  16.666666666666668%  }
.col3    { width:        25%                  } /* (100% / (12 / 3)) */
.shift3  { margin-left:  25%                  }
.col4    { width:        33.333333333333336%  } /* (100% / (12 / 4)) */
.shift4  { margin-left:  33.333333333333336%  }
.col5    { width:        41.666666666666667%  } /* (100% / (12 / 5)) */
.shift5  { margin-left:  41.666666666666667%  }
.col6    { width:        50%                  } /* (100% / (12 / 6)) */
.shift6  { margin-left:  50%                  }
.col7    { width:        58.333333333333336%  } /* (100% / (12 / 7)) */
.shift7  { margin-left:  58.333333333333336%  }
.col8    { width:        66.666666666666667%  } /* (100% / (12 / 8)) */
.shift8  { margin-left:  66.666666666666667%  }
.col9    { width:        75%                  } /* (100% / (12 / 9)) */
.shift9  { margin-left:  75%                  }
.col10   { width:        83.333333333333334%  } /* (100% / (12 / 10)) */
.shift10 { margin-left:  83.333333333333334%  }
.col11   { width:        91.666666666666667%  } /* (100% / (12 / 11)) */
.shift11 { margin-left:  91.666666666666667%  }
.col12   { width:       100%                  }
.shift12 { margin-left: 100%                  }

@media (max-width: 950px) {
    .content:not(.content--custom-media) [class^="col"],
    .content:not(.content--custom-media) [class*=" col"] {
        width: 100%;
    }

    .content:not(.content--custom-media) [class^="shift"],
    .content:not(.content--custom-media) [class*=" shift"] {
        margin-left: 0;
    }

    .content:not(.content--custom-media) .shift-medium-0        { margin-left:   0% }
    .content:not(.content--custom-media) .col-medium-1          { width:         8.333333333333334% }
    .content:not(.content--custom-media) .shift-medium-1        { margin-left:   8.333333333333334% }
    .content:not(.content--custom-media) .col-medium-2          { width:        16.666666666666668% }
    .content:not(.content--custom-media) .shift-medium-2        { margin-left:  16.666666666666668% }
    .content:not(.content--custom-media) .col-medium-3          { width:        25%                 }
    .content:not(.content--custom-media) .shift-medium-3        { margin-left:  25%                 }
    .content:not(.content--custom-media) .col-medium-4          { width:        33.333333333333336% }
    .content:not(.content--custom-media) .shift-medium-4        { margin-left:  33.333333333333336% }
    .content:not(.content--custom-media) .col-medium-5          { width:        41.666666666666667% }
    .content:not(.content--custom-media) .shift-medium-5        { margin-left:  41.666666666666667% }
    .content:not(.content--custom-media) .col-medium-6          { width:        50%                 }
    .content:not(.content--custom-media) .shift-medium-6        { margin-left:  50%                 }
    .content:not(.content--custom-media) .col-medium-7          { width:        58.333333333333336% }
    .content:not(.content--custom-media) .shift-medium-7        { margin-left:  58.333333333333336% }
    .content:not(.content--custom-media) .col-medium-8          { width:        66.666666666666667% }
    .content:not(.content--custom-media) .shift-medium-8        { margin-left:  66.666666666666667% }
    .content:not(.content--custom-media) .col-medium-9          { width:        75%                 }
    .content:not(.content--custom-media) .shift-medium-9        { margin-left:  75%                 }
    .content:not(.content--custom-media) .col-medium-10         { width:        83.333333333333334% }
    .content:not(.content--custom-media) .shift-medium-10       { margin-left:  83.333333333333334% }
    .content:not(.content--custom-media) .col-medium-11         { width:        91.666666666666667% }
    .content:not(.content--custom-media) .shift-medium-11       { margin-left:  91.666666666666667% }
    .content:not(.content--custom-media) .col-medium-12         { width:       100%                 }
    .content:not(.content--custom-media) .shift-medium-12       { margin-left: 100%                 }
}

@media (max-width: 640px) {
    .content:not(.content--custom-media) .shift-small-0         { margin-left:   0% }
    .content:not(.content--custom-media) .col-small-1           { width:         8.333333333333334% }
    .content:not(.content--custom-media) .shift-small-1         { margin-left:   8.333333333333334% }
    .content:not(.content--custom-media) .col-small-2           { width:        16.666666666666668% }
    .content:not(.content--custom-media) .shift-small-2         { margin-left:  16.666666666666668% }
    .content:not(.content--custom-media) .col-small-3           { width:        25%                 }
    .content:not(.content--custom-media) .shift-small-3         { margin-left:  25%                 }
    .content:not(.content--custom-media) .col-small-4           { width:        33.333333333333336% }
    .content:not(.content--custom-media) .shift-small-4         { margin-left:  33.333333333333336% }
    .content:not(.content--custom-media) .col-small-5           { width:        41.666666666666667% }
    .content:not(.content--custom-media) .shift-small-5         { margin-left:  41.666666666666667% }
    .content:not(.content--custom-media) .col-small-6           { width:        50%                 }
    .content:not(.content--custom-media) .shift-small-6         { margin-left:  50%                 }
    .content:not(.content--custom-media) .col-small-7           { width:        58.333333333333336% }
    .content:not(.content--custom-media) .shift-small-7         { margin-left:  58.333333333333336% }
    .content:not(.content--custom-media) .col-small-8           { width:        66.666666666666667% }
    .content:not(.content--custom-media) .shift-small-8         { margin-left:  66.666666666666667% }
    .content:not(.content--custom-media) .col-small-9           { width:        75%                 }
    .content:not(.content--custom-media) .shift-small-9         { margin-left:  75%                 }
    .content:not(.content--custom-media) .col-small-10          { width:        83.333333333333334% }
    .content:not(.content--custom-media) .shift-small-10        { margin-left:  83.333333333333334% }
    .content:not(.content--custom-media) .col-small-11          { width:        91.666666666666667% }
    .content:not(.content--custom-media) .shift-small-11        { margin-left:  91.666666666666667% }
    .content:not(.content--custom-media) .col-small-12          { width:       100%                 }
    .content:not(.content--custom-media) .shift-small-12        { margin-left: 100%                 }
}