/* Grid 2.8.5 */
* {
    box-sizing: border-box;
}
.container {
    max-width: 1400px;
    box-sizing: content-box;
    margin: 0 auto;
    padding: 0 20px;
}
.container--fluid {
    max-width: 100%;
}
.content {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0 -20px;
    list-style: none;
}
[class^="col"],
[class*=" col"] {
    margin: 0;
    padding: 0 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;
}

/**
 * Content: Reduce Gaps
 */
 .content--reduce-gaps,
 .content--reduce-gaps .content        { margin: 0 -10px }
 .content--reduce-gaps [class^="col"],
 .content--reduce-gaps [class*=" col"] { padding: 0 10px }

/**
 * Content: Alignments
 */
.content--halign-right {
    justify-content: flex-end;
}
.content--halign-left {
    justify-content: flex-start;
}
.content--halign-center {
    justify-content: center;
}
.content--valign-top {
    align-items: flex-start;
}
.content--valign-center {
    align-items: center;
}
.content--valign-bottom {
    align-items: flex-end;
}

/**
 * Content: Reverse order
 */
.content--reverse {
    flex-direction: row-reverse;
}

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

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

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

/* Remove column width */
.col-auto { width: auto }

/* Adjusts column widths correctly in a 1 column context */
.col1--of-1  { width:  100% }
.shift1--of-1  { margin-left:  100% }

/* Adjusts column widths correctly in a 2 column context */
.col1--of-2  { width:   50% }
.shift1--of-2  { margin-left:   50% }
.col2--of-2  { width:  100% }
.shift2--of-2  { margin-left:  100% }

/* Adjusts column widths correctly in a 3 column context */
.col1--of-3  { width:   33.3333333333% }
.shift1--of-3  { margin-left:   33.3333333333% }
.col2--of-3  { width:   66.6666666667% }
.shift2--of-3  { margin-left:   66.6666666667% }
.col3--of-3  { width:  100%            }
.shift3--of-3  { margin-left:  100%            }

/* Adjusts column widths correctly in a 4 column context */
.col1--of-4  { width:   25% }
.shift1--of-4  { margin-left:   25% }
.col2--of-4  { width:   50% }
.shift2--of-4  { margin-left:   50% }
.col3--of-4  { width:   75% }
.shift3--of-4  { margin-left:   75% }
.col4--of-4  { width:  100% }
.shift4--of-4  { margin-left:  100% }

/* Adjusts column widths correctly in a 5 column context */
.col1--of-5  { width:   20% }
.shift1--of-5  { margin-left:   20% }
.col2--of-5  { width:   40% }
.shift2--of-5  { margin-left:   40% }
.col3--of-5  { width:   60% }
.shift3--of-5  { margin-left:   60% }
.col4--of-5  { width:   80% }
.shift4--of-5  { margin-left:   80% }
.col5--of-5  { width:  100% }
.shift5--of-5  { margin-left:  100% }

/* Adjusts column widths correctly in a 6 column context */
.col1--of-6  { width:   16.6666666667% }
.shift1--of-6  { margin-left:   16.6666666667% }
.col2--of-6  { width:   33.3333333333% }
.shift2--of-6  { margin-left:   33.3333333333% }
.col3--of-6  { width:   50%            }
.shift3--of-6  { margin-left:   50%            }
.col4--of-6  { width:   66.6666666667% }
.shift4--of-6  { margin-left:   66.6666666667% }
.col5--of-6  { width:   83.3333333333% }
.shift5--of-6  { margin-left:   83.3333333333% }
.col6--of-6  { width:  100%            }
.shift6--of-6  { margin-left:  100%            }

/* Adjusts column widths correctly in a 7 column context */
.col1--of-7  { width:   14.2857142857% }
.shift1--of-7  { margin-left:   14.2857142857% }
.col2--of-7  { width:   28.5714285714% }
.shift2--of-7  { margin-left:   28.5714285714% }
.col3--of-7  { width:   42.8571428571% }
.shift3--of-7  { margin-left:   42.8571428571% }
.col4--of-7  { width:   57.1428571429% }
.shift4--of-7  { margin-left:   57.1428571429% }
.col5--of-7  { width:   71.4285714286% }
.shift5--of-7  { margin-left:   71.4285714286% }
.col6--of-7  { width:   85.7142857143% }
.shift6--of-7  { margin-left:   85.7142857143% }
.col7--of-7  { width:  100%            }
.shift7--of-7  { margin-left:  100%            }

/* Adjusts column widths correctly in a 9 column context */
.col1--of-8  { width:   12.5% }
.shift1--of-8  { margin-left:   12.5% }
.col2--of-8  { width:   25%   }
.shift2--of-8  { margin-left:   25%   }
.col3--of-8  { width:   37.5% }
.shift3--of-8  { margin-left:   37.5% }
.col4--of-8  { width:   50%   }
.shift4--of-8  { margin-left:   50%   }
.col5--of-8  { width:   62.5% }
.shift5--of-8  { margin-left:   62.5% }
.col6--of-8  { width:   75%   }
.shift6--of-8  { margin-left:   75%   }
.col7--of-8  { width:   87.5% }
.shift7--of-8  { margin-left:   87.5% }
.col8--of-8  { width:  100%   }
.shift8--of-8  { margin-left:  100%   }

/* Adjusts column widths correctly in a 9 column context */
.col1--of-9  { width:   11.1111111111% }
.shift1--of-9  { margin-left:   11.1111111111% }
.col2--of-9  { width:   22.2222222222% }
.shift2--of-9  { margin-left:   22.2222222222% }
.col3--of-9  { width:   33.3333333333% }
.shift3--of-9  { margin-left:   33.3333333333% }
.col4--of-9  { width:   44.4444444444% }
.shift4--of-9  { margin-left:   44.4444444444% }
.col5--of-9  { width:   55.5555555555% }
.shift5--of-9  { margin-left:   55.5555555555% }
.col6--of-9  { width:   66.6666666666% }
.shift6--of-9  { margin-left:   66.6666666666% }
.col7--of-9  { width:   77.7777777777% }
.shift7--of-9  { margin-left:   77.7777777777% }
.col8--of-9  { width:   88.8888888888% }
.shift8--of-9  { margin-left:   88.8888888888% }
.col9--of-9  { width:  100%            }
.shift9--of-9  { margin-left:  100%            }

/* Adjusts column widths correctly in a 10 column context */
.col1--of-10  { width:  10% }
.shift1--of-10  { margin-left:  10% }
.col2--of-10  { width:  20% }
.shift2--of-10  { margin-left:  20% }
.col3--of-10  { width:  30% }
.shift3--of-10  { margin-left:  30% }
.col4--of-10  { width:  40% }
.shift4--of-10  { margin-left:  40% }
.col5--of-10  { width:  50% }
.shift5--of-10  { margin-left:  50% }
.col6--of-10  { width:  60% }
.shift6--of-10  { margin-left:  60% }
.col7--of-10  { width:  70% }
.shift7--of-10  { margin-left:  70% }
.col8--of-10  { width:  80% }
.shift8--of-10  { margin-left:  80% }
.col9--of-10  { width:  90% }
.shift9--of-10  { margin-left:  90% }
.col10--of-10 { width: 100% }
.shift0--of-10 { margin-left: 100% }

/* Adjusts column widths correctly in a 11 column context */
.col1--of-11  { width:  9.09090909091% }
.shift1--of-11  { margin-left:  9.09090909091% }
.col2--of-11  { width:  18.1818181818% }
.shift2--of-11  { margin-left:  18.1818181818% }
.col3--of-11  { width:  27.2727272727% }
.shift3--of-11  { margin-left:  27.2727272727% }
.col4--of-11  { width:  36.3636363636% }
.shift4--of-11  { margin-left:  36.3636363636% }
.col5--of-11  { width:  45.4545454545% }
.shift5--of-11  { margin-left:  45.4545454545% }
.col6--of-11  { width:  54.5454545455% }
.shift6--of-11  { margin-left:  54.5454545455% }
.col7--of-11  { width:  63.6363636364% }
.shift7--of-11  { margin-left:  63.6363636364% }
.col8--of-11  { width:  72.7272727273% }
.shift8--of-11  { margin-left:  72.7272727273% }
.col9--of-11  { width:  81.8181818182% }
.shift9--of-11  { margin-left:  81.8181818182% }
.col10--of-11 { width:  90.9090909091% }
.shift0--of-11 { margin-left:  90.9090909091% }
.col11--of-11 { width: 100%            }
.shift1--of-11 { margin-left: 100%            }

/* Adjusts a width of a column by one gap width */
.col--expand-by-one-gap-width {
    box-sizing: content-box;
}

/* Media-Queries */
@media (max-width: 1023px) {
    .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%                 }

    .content:not(.content--custom-media) .col-medium-auto       { width:       auto                 }

    .content--medium-reduce-gaps:not(.content--custom-media),
    .content--medium-reduce-gaps:not(.content--custom-media) .content        { margin: 0 -10px }
    .content--medium-reduce-gaps:not(.content--custom-media) [class^="col"],
    .content--medium-reduce-gaps:not(.content--custom-media) [class*=" col"] { padding: 0 10px }

}

@media (max-width: 767px) {
    .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%                 }

    .content:not(.content--custom-media) .col-small-auto        { width:       auto                 }

    .content--small-reduce-gaps:not(.content--custom-media),
    .content--small-reduce-gaps:not(.content--custom-media) .content        { margin: 0 -10px }
    .content--small-reduce-gaps:not(.content--custom-media) [class^="col"],
    .content--small-reduce-gaps:not(.content--custom-media) [class*=" col"] { padding: 0 10px }
}
