/* ---------------------------------------------------------- */
/* grid 4 column [30px] gap */
/* ---------------------------------------------------------- */
.grid { margin-left: -14px; }
.grid:before, .grid:after { content: ""; display: table; }
.grid:after { clear: both; }
.grid [class*="col-"] {vertical-align:top; padding-left: 14px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.large-gutter { margin-left: -28px; }
.large-gutter [class*="col-"] { padding-left: 28px; }
.half-gutter { margin-left: -7px; }
.half-gutter [class*="col-"] { padding-left: 7px; }
.no-gutter { margin-left: 0; }
.no-gutter [class*="col-"] { padding-left: 0; }
.reset-gutter { margin-left: -14px; }
.reset-gutter [class*="col-"] { padding-left: 14px; }
.row {margin-bottom:14px;}

/*--- widths ---*/
.col-full { width: 100%; }
.col-1-2 { width: 50%; float: left; }
.col-1-3 { width: 33.333333%; float: left; }
.col-2-3 { width: 66.666666%; float: left; }
.col-1-4 { width: 25%; float: left; }
.col-2-4 { width: 50%; float: left; }
.col-3-4 { width: 75%; float: left; }
.col-1-5 { width: 20%; float: left; }
.col-1-6 { width: 16.6666%; float: left; }
.col-2-6 { width: 33.3333%; float: left; }
.col-3-6 { width: 50%; float: left; }
.col-4-6 { width: 66.6666%; float: left; }
.col-5-6 { width: 83.333%; float: left; }

/*--- push ---*/
[class*="col-push-"] { position: relative; }
.col-push-full { margin-left: 100%; }
.col-push-1-2 { margin-left: 50%; }
.col-push-1-3 { margin-left: 33.333333%; }
.col-push-2-3 { margin-left: 66.666666%; }
.col-push-1-4 { margin-left: 25%; }
.col-push-2-4 { margin-left: 50%; }
.col-push-3-4 { margin-left: 75%; }
.col-push-1-6 { margin-left: 16.6666%; }
.col-push-2-6 { margin-left: 33.3333%; }
.col-push-3-6 { margin-left: 50%; }
.col-push-4-6 { margin-left: 66.6666%; }
.col-push-5-6 { margin-left: 83.333%; }

/*--- pull ---*/
[class*="col-pull-"] { position: relative; }
.col-pull-full { right: 100%; }
.col-pull-1-2 { right: 50%; }
.col-pull-1-3 { right: 33.333333%; }
.col-pull-2-3 { right: 66.666666%; }
.col-pull-1-4 { right: 25%; }
.col-pull-2-4 { right: 50%; }
.col-pull-3-4 { right: 75%; }
.col-pull-1-6 { right: 16.6666%; }
.col-pull-2-6 { right: 33.3333%; }
.col-pull-3-6 { right: 50%; }
.col-pull-4-6 { right: 66.6666%; }
.col-pull-5-6 { right: 83.333%; }

.bp1-only-visible {display:none !important;}
.bp2-only-visible {display:none !important;}
.bp3-only-visible {display:none !important;}

.bp1-visible,
.bp2-visible,
.bp3-visible {display:none !important;}


/* -------------------------------------------------------------------------------- */
/* breakpoint 1 */
/* -------------------------------------------------------------------------------- */
@media only screen and (min-width: 30em) { /* 480px */
    .bp1-hidden {display:none !important;}
    .bp1-visible { display:inherit !important; }

    .bp1-only-hidden {display:none !important;}
    .bp2-only-hidden {display:inherit !important;}
    .bp3-only-hidden {display:inherit !important;}

    .bp1-only-visible {display:inherit !important;}
    .bp2-only-visible {display:none !important;}
    .bp3-only-visible {display:none !important;}

    /*--- widths ---*/
    .bp1-col-full { width: 100%; }
    .bp1-col-1-2 { width: 50%; float: left; }
    .bp1-col-1-3 { width: 33.333333%; float: left; }
    .bp1-col-2-3 { width: 66.666666%; float: left; }
    .bp1-col-1-4 { width: 25%; float: left; }
    .bp1-col-2-4 { width: 50%; float: left; }
    .bp1-col-3-4 { width: 75%; float: left; }
    .bp1-col-1-5 { width: 20%; float: left; }
    .bp1-col-1-6 { width: 16.6666%; float: left; }
    .bp1-col-2-6 { width: 33.3333%; float: left; }
    .bp1-col-3-6 { width: 50%; float: left; }
    .bp1-col-4-6 { width: 66.6666%; float: left; }
    .bp1-col-5-6 { width: 83.333%; float: left; }

    /*--- push ---*/
    [class*="bp1-col-push-"] { position: relative; }
    .bp1-col-push-full { margin-left: 100%; }
    .bp1-col-push-1-2 { margin-left: 50%; }
    .bp1-col-push-1-3 { margin-left: 33.333333%; }
    .bp1-col-push-2-3 { margin-left: 66.666666%; }
    .bp1-col-push-1-4 { margin-left: 25%; }
    .bp1-col-push-2-4 { margin-left: 50%; }
    .bp1-col-push-3-4 { margin-left: 75%; }
    .bp1-col-push-1-6 { margin-left: 16.6666%; }
    .bp1-col-push-2-6 { margin-left: 33.3333%; }
    .bp1-col-push-3-6 { margin-left: 50%; }
    .bp1-col-push-4-6 { margin-left: 66.6666%; }
    .bp1-col-push-5-6 { margin-left: 83.333%; }

    /*--- pull ---*/
    [class*="bp1-col-pull-"] { position: relative; }
    .bp1-col-pull-full { right: 100%; }
    .bp1-col-pull-1-2 { right: 50%; }
    .bp1-col-pull-1-3 { right: 33.333333%; }
    .bp1-col-pull-2-3 { right: 66.666666%; }
    .bp1-col-pull-1-4 { right: 25%; }
    .bp1-col-pull-2-4 { right: 50%; }
    .bp1-col-pull-3-4 { right: 75%; }
    .bp1-col-pull-1-6 { right: 16.6666%; }
    .bp1-col-pull-2-6 { right: 33.3333%; }
    .bp1-col-pull-3-6 { right: 50%; }
    .bp1-col-pull-4-6 { right: 66.6666%; }
    .bp1-col-pull-5-6 { right: 83.333%; }
}

/* -------------------------------------------------------------------------------- */
/* breakpoint 2 */
/* -------------------------------------------------------------------------------- */
@media only screen and (min-width: 48em) { /* 768px */
    .bp2-hidden {display:none !important;}
    .bp2-visible { display:inherit !important; }

    .bp1-only-hidden {display:inherit !important;}
    .bp2-only-hidden {display:none !important;}
    .bp3-only-hidden {display:inherit !important;}

    .bp1-only-visible {display:none !important;}
    .bp2-only-visible {display:inherit !important;}
    .bp3-only-visible {display:none !important;}

    /*--- widths ---*/
    .bp2-col-full { width: 100%; }
    .bp2-col-1-2 { width: 50%; float: left; }
    .bp2-col-1-3 { width: 33.333333%; float: left; }
    .bp2-col-2-3 { width: 66.666666%; float: left; }
    .bp2-col-1-4 { width: 25%; float: left; }
    .bp2-col-2-4 { width: 50%; float: left; }
    .bp2-col-3-4 { width: 75%; float: left; }
    .bp2-col-1-5 { width: 20%; float: left; }
    .bp2-col-1-6 { width: 16.6666%; float: left; }
    .bp2-col-2-6 { width: 33.3333%; float: left; }
    .bp2-col-3-6 { width: 50%; float: left; }
    .bp2-col-4-6 { width: 66.6666%; float: left; }
    .bp2-col-5-6 { width: 83.333%; float: left; }

    /*--- push ---*/
    [class*="bp2-col-push-"] { position: relative; }
    .bp2-col-push-full { margin-left: 100%; }
    .bp2-col-push-1-2 { margin-left: 50%; }
    .bp2-col-push-1-3 { margin-left: 33.333333%; }
    .bp2-col-push-2-3 { margin-left: 66.666666%; }
    .bp2-col-push-1-4 { margin-left: 25%; }
    .bp2-col-push-2-4 { margin-left: 50%; }
    .bp2-col-push-3-4 { margin-left: 75%; }
    .bp2-col-push-1-6 { margin-left: 16.6666%; }
    .bp2-col-push-2-6 { margin-left: 33.3333%; }
    .bp2-col-push-3-6 { margin-left: 50%; }
    .bp2-col-push-4-6 { margin-left: 66.6666%; }
    .bp2-col-push-5-6 { margin-left: 83.333%; }

    /*--- pull ---*/
    [class*="bp2-col-pull-"] { position: relative; }
    .bp2-col-pull-full { right: 100%; }
    .bp2-col-pull-1-2 { right: 50%; }
    .bp2-col-pull-1-3 { right: 33.333333%; }
    .bp2-col-pull-2-3 { right: 66.666666%; }
    .bp2-col-pull-1-4 { right: 25%; }
    .bp2-col-pull-2-4 { right: 50%; }
    .bp2-col-pull-3-4 { right: 75%; }
    .bp2-col-pull-1-6 { right: 16.6666%; }
    .bp2-col-pull-2-6 { right: 33.3333%; }
    .bp2-col-pull-3-6 { right: 50%; }
    .bp2-col-pull-4-6 { right: 66.6666%; }
    .bp2-col-pull-5-6 { right: 83.333%; }
}

/* -------------------------------------------------------------------------------- */
/* breakpoint 3 */
/* -------------------------------------------------------------------------------- */
@media only screen and (min-width: 68.75em) { /* 1100px */
    .bp3-hidden {display:none !important;}
    .bp3-visible { display:inherit !important; }

    .bp1-only-hidden {display:inherit !important;}
    .bp2-only-hidden {display:inherit !important;}
    .bp3-only-hidden {display:none !important;}

    .bp1-only-visible {display:none !important;}
    .bp2-only-visible {display:none !important;}
    .bp3-only-visible {display:inherit !important;}

    /*--- widths ---*/
    .bp3-col-full { width: 100%; }
    .bp3-col-1-2 { width: 50%; float: left; }
    .bp3-col-1-3 { width: 33.333333%; float: left; }
    .bp3-col-2-3 { width: 66.666666%; float: left; }
    .bp3-col-1-4 { width: 25%; float: left; }
    .bp3-col-2-4 { width: 50%; float: left; }
    .bp3-col-3-4 { width: 75%; float: left; }
    .bp3-col-1-6 { width: 16.6666%; float: left; }
    .bp3-col-2-6 { width: 33.3333%; float: left; }
    .bp3-col-3-6 { width: 50%; float: left; }
    .bp3-col-4-6 { width: 66.6666%; float: left; }
    .bp3-col-5-6 { width: 83.333%; float: left; }

    /*--- push ---*/
    [class*="bp3-col-push-"] { position: relative; }
    .bp3-col-push-full { margin-left: 100%; }
    .bp3-col-push-1-2 { margin-left: 50%; }
    .bp3-col-push-1-3 { margin-left: 33.333333%; }
    .bp3-col-push-2-3 { margin-left: 66.666666%; }
    .bp3-col-push-1-4 { margin-left: 25%; }
    .bp3-col-push-2-4 { margin-left: 50%; }
    .bp3-col-push-3-4 { margin-left: 75%; }
    .bp3-col-push-1-6 { margin-left: 16.6666%; }
    .bp3-col-push-2-6 { margin-left: 33.3333%; }
    .bp3-col-push-3-6 { margin-left: 50%; }
    .bp3-col-push-4-6 { margin-left: 66.6666%; }
    .bp3-col-push-5-6 { margin-left: 83.333%; }

    /*--- pull ---*/
    [class*="bp3-col-pull-"] { position: relative; }
    .bp3-col-pull-full { right: 100%; }
    .bp3-col-pull-1-2 { right: 50%; }
    .bp3-col-pull-1-3 { right: 33.333333%; }
    .bp3-col-pull-2-3 { right: 66.666666%; }
    .bp3-col-pull-1-4 { right: 25%; }
    .bp3-col-pull-2-4 { right: 50%; }
    .bp3-col-pull-3-4 { right: 75%; }
    .bp3-col-pull-1-6 { right: 16.6666%; }
    .bp3-col-pull-2-6 { right: 33.3333%; }
    .bp3-col-pull-3-6 { right: 50%; }
    .bp3-col-pull-4-6 { right: 66.6666%; }
    .bp3-col-pull-5-6 { right: 83.333%; }
}