/**** BMO DS3 Grid System ****/

/***NON COLOR GLOBALS***/
:root {
  /************GUTTER WIDTH*************/
  --gutter-width: 32px;
  --each-grid-gutter: calc(var(--gutter-width) / 2);
  --md-each-grid-gutter: calc(var(--gutter-width) / 2.66);
  --sm-each-grid-gutter: calc(var(--gutter-width) / 4);
  --default-screen-max: 1280px;
  /***ZINDEX STACK***/
  --zindex-sticky: 1020;
  --zindex-fixed: 1030;
  --zindex-overlay: 1040;
  --zindex-dropdown: 1045;
  --zindex-modal: 1050;
  --zindex-popover: 1060;
}


/******************************************************GRID STYLES*************************************************/
.demo-span {
  border: 2px dotted grey;
  min-height: 32px;
  display: block;
  margin: 8px 0;
}

.bmo-container {
  margin-left: auto;
  margin-right: auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: block;
  max-width: var(--default-screen-max);
}

.bmo-container.padding {
  padding-left: 16px;
  padding-right: 16px;
}

.bmo-container:after {
  clear: both;
  content: "";
  display: block;
}

.grid-row {
  min-height: 1px;
  clear: both;
  display: block;
}

.grid-row:after {
  clear: both;
  content: "";
  display: block;
}

@media only screen and (max-width: 5000px) and (min-width: 1168px) {
  .bmo-container {
    max-width: 1280px;
    width: 100%;
  }
}

@media only screen and (max-width: 1503px) and (min-width: 0px) {
  .bmo-container {
    min-width: 320px;
  }
}

.grid {
  display: block;
  float: left;
  -webkit-transition: 0.3s all ease;
  transition: 0.3s all ease;
  padding: 0 var(--each-grid-gutter);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.grid:after {
  display: block;
  clear: both;
  content: "";
}

.grid.col-100 {
  width: 100%;
}

.grid.col-90 {
  width: 90%;
}

.grid.col-80 {
  width: 80%;
}

.grid.col-75 {
  width: 75%;
}

.grid.col-70 {
  width: 70%;
}

.grid.col-66 {
  width: 66.666666666%;
}

.grid.col-60 {
  width: 60%;
}

.grid.col-50 {
  width: 50%;
}

.grid.col-40 {
  width: 40%;
}

.grid.col-33 {
  width: 33.333333333%;
}

.grid.col-30 {
  width: 30%;
}

.grid.col-25 {
  width: 25%;
}

.grid.col-20 {
  width: 20%;
}

.grid.col-16 {
  width: 16.666666666%;
}

.grid.col-12 {
  width: 12.5%;
}

.grid.col-10 {
  width: 10%;
}

.grid.col-8 {
  width: 8.33333333333%;
}

@media only screen and (max-width: 1279px) {
  .grid {
    padding-left: var(--each-grid-gutter);
    padding-right: var(--each-grid-gutter);
  }
  .grid:after {
    display: block;
    clear: both;
    content: "";
  }
  .grid.xl-col-100 {
    width: 100%;
  }
  .grid.xl-col-90 {
    width: 90%;
  }
  .grid.xl-col-80 {
    width: 80%;
  }
  .grid.xl-col-75 {
    width: 75%;
  }
  .grid.xl-col-70 {
    width: 70%;
  }
  .grid.xl-col-66 {
    width: 66.666666666%;
  }
  .grid.xl-col-60 {
    width: 60%;
  }
  .grid.xl-col-50 {
    width: 50%;
  }
  .grid.xl-col-40 {
    width: 40%;
  }
  .grid.xl-col-33 {
    width: 33.333333333%;
  }
  .grid.xl-col-30 {
    width: 30%;
  }
  .grid.xl-col-25 {
    width: 25%;
  }
  .grid.xl-col-20 {
    width: 20%;
  }
  .grid.xl-col-16 {
    width: 16.666666666%;
  }
  .grid.xl-col-12 {
    width: 12.5%;
  }
  .grid.xl-col-10 {
    width: 10%;
  }
  .grid.xl-col-8 {
    width: 8.33333333333%;
  }
}

@media only screen and (max-width: 1023px) {
  .grid {
    display: block;
    float: left;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding-left: var(--each-grid-gutter);
    padding-right: var(--each-grid-gutter);
  }
  .grid:after {
    display: block;
    clear: both;
    content: "";
  }
  .grid.lg-col-100 {
    width: 100%;
  }
  .grid.lg-col-90 {
    width: 90%;
  }
  .grid.lg-col-80 {
    width: 80%;
  }
  .grid.lg-col-75 {
    width: 75%;
  }
  .grid.lg-col-70 {
    width: 70%;
  }
  .grid.lg-col-66 {
    width: 66.666666666%;
  }
  .grid.lg-col-60 {
    width: 60%;
  }
  .grid.lg-col-50 {
    width: 50%;
  }
  .grid.lg-col-40 {
    width: 40%;
  }
  .grid.lg-col-33 {
    width: 33.333333333%;
  }
  .grid.lg-col-30 {
    width: 30%;
  }
  .grid.lg-col-25 {
    width: 25%;
  }
  .grid.lg-col-20 {
    width: 20%;
  }
  .grid.lg-col-16 {
    width: 16.666666666%;
  }
  .grid.lg-col-12 {
    width: 12.5%;
  }
  .grid.lg-col-10 {
    width: 10%;
  }
  .grid.lg-col-8 {
    width: 8.33333333333%;
  }
}

/**** Grid Ipad ****/
@media only screen and (max-width: 767px) {
  .grid {
    padding-left: var(--md-each-grid-gutter);
    padding-right: var(--md-each-grid-gutter);
  }
  .grid:after {
    display: block;
    clear: both;
    content: "";
  }
  .grid.md-col-100 {
    width: 100%;
  }
  .grid.md-col-90 {
    width: 90%;
  }
  .grid.md-col-80 {
    width: 80%;
  }
  .grid.md-col-75 {
    width: 75%;
  }
  .grid.md-col-70 {
    width: 70%;
  }
  .grid.md-col-66 {
    width: 66.666666666%;
  }
  .grid.md-col-60 {
    width: 60%;
  }
  .grid.md-col-50 {
    width: 50%;
  }
  .grid.md-col-40 {
    width: 40%;
  }
  .grid.md-col-33 {
    width: 33.333333333%;
  }
  .grid.md-col-30 {
    width: 30%;
  }
  .grid.md-col-25 {
    width: 25%;
  }
  .grid.md-col-20 {
    width: 20%;
  }
  .grid.md-col-16 {
    width: 16.666666666%;
  }
  .grid.md-col-12 {
    width: 12.5%;
  }
  .grid.md-col-10 {
    width: 10%;
  }
  .grid.md-col-8 {
    width: 8.33333333333%;
  }
}
/**** End Grid Ipad ****/

@media only screen and (max-width: 599px) {
  .bmo-container {
    padding: 0 8px;
  }
  .grid {
    padding-left: var(--sm-each-grid-gutter);
    padding-right: var(--sm-each-grid-gutter);
  }
  .grid.sm-col-100 {
    width: 100%;
  }
  .grid.sm-col-75 {
    width: 75%;
  }
  .grid.sm-col-66 {
    width: 66.66666666666%;
  }
  .grid.sm-col-50 {
    width: 50%;
  }
  .grid.sm-col-33 {
    width: 33.333333333333333%;
  }
  .grid.sm-col-25 {
    width: 25%;
  }
}

@media only screen and (max-width: 374px) {
  .grid.xsm-col-100 {
    width: 100%;
  }
  .grid.xsm-col-75 {
    width: 75%;
  }
  .grid.xsm-col-66 {
    width: 66.66666666666%;
  }
  .grid.xsm-col-50 {
    width: 50%;
  }
  .grid.xsm-col-33 {
    width: 33.333333333333333%;
  }
  .grid.xsm-col-25 {
    width: 25%;
  }
}

.no-margin {
  margin: 0 !important;
}


/******************************************************MOBILE FIRST GRID*************************************************/
@media only screen and (min-width: 0px) {
  .mf.grid {
    display: block;
    float: left;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    padding: 0 8px;
  }
  .mf.grid:after {
    display: block;
    clear: both;
    content: "";
  }
  .mf.grid.col-100 {
    width: 100%;
  }
  .mf.grid.col-75 {
    width: 75%;
  }
  .mf.grid.col-50 {
    width: 50%;
  }
  .mf.grid.col-33 {
    width: 33.333333333%;
  }
  .mf.grid.col-25 {
    width: 25%;
  }
}

@media only screen and (min-width: 375px) {
  .mf.grid.sm-col-100 {
    width: 100%;
  }
  .mf.grid.sm-col-50 {
    width: 50%;
  }
  .mf.grid.sm-col-33 {
    width: 33.333333%;
  }
  .mf.grid.sm-col-25 {
    width: 25%;
  }
}

/**** MF Ipad ****/
@media only screen and (min-width: 600px) {
  .mf.grid {
    padding-left: 12px;
    padding-right: 12px;
  }
  .mf.grid:after {
    display: block;
    clear: both;
    content: "";
  }
  .mf.grid.md-col-100 {
    width: 100%;
  }
  .mf.grid.md-col-90 {
    width: 90%;
  }
  .mf.grid.md-col-80 {
    width: 80%;
  }
  .mf.grid.md-col-75 {
    width: 75%;
  }
  .mf.grid.md-col-70 {
    width: 70%;
  }
  .mf.grid.md-col-66 {
    width: 66.666666666%;
  }
  .mf.grid.md-col-60 {
    width: 60%;
  }
  .mf.grid.md-col-50 {
    width: 50%;
  }
  .mf.grid.md-col-40 {
    width: 40%;
  }
  .mf.grid.md-col-33 {
    width: 33.333333333%;
  }
  .mf.grid.md-col-30 {
    width: 30%;
  }
  .mf.grid.md-col-25 {
    width: 25%;
  }
  .mf.grid.md-col-20 {
    width: 20%;
  }
  .mf.grid.md-col-16 {
    width: 16.666666666%;
  }
  .mf.grid.md-col-12 {
    width: 12.5%;
  }
  .mf.grid.md-col-10 {
    width: 10%;
  }
  .mf.grid.md-col-8 {
    width: 8.33333333333%;
  }
}
/**** End MF Ipad ****/

@media only screen and (min-width: 768px) {
  .mf.grid {
    display: block;
    float: left;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding-left: 16px;
    padding-right: 16px;
  }
  .mf.grid:after {
    display: block;
    clear: both;
    content: "";
  }
  .mf.grid.lg-col-100 {
    width: 100%;
  }
  .mf.grid.lg-col-90 {
    width: 90%;
  }
  .mf.grid.lg-col-80 {
    width: 80%;
  }
  .mf.grid.lg-col-75 {
    width: 75%;
  }
  .mf.grid.lg-col-70 {
    width: 70%;
  }
  .mf.grid.lg-col-66 {
    width: 66.666666666%;
  }
  .mf.grid.lg-col-60 {
    width: 60%;
  }
  .mf.grid.lg-col-50 {
    width: 50%;
  }
  .mf.grid.lg-col-40 {
    width: 40%;
  }
  .mf.grid.lg-col-33 {
    width: 33.333333333%;
  }
  .mf.grid.lg-col-30 {
    width: 30%;
  }
  .mf.grid.lg-col-25 {
    width: 25%;
  }
  .mf.grid.lg-col-20 {
    width: 20%;
  }
  .mf.grid.lg-col-16 {
    width: 16.666666666%;
  }
  .mf.grid.lg-col-12 {
    width: 12.5%;
  }
  .mf.grid.lg-col-10 {
    width: 10%;
  }
  .mf.grid.lg-col-8 {
    width: 8.33333333333%;
  }
}

@media only screen and (min-width: 1024px) {
  .mf.grid {
    display: block;
    float: left;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .mf.grid:after {
    display: block;
    clear: both;
    content: "";
  }
  .mf.grid.xl-col-100 {
    width: 100%;
  }
  .mf.grid.xl-col-90 {
    width: 90%;
  }
  .mf.grid.xl-col-80 {
    width: 80%;
  }
  .mf.grid.xl-col-75 {
    width: 75%;
  }
  .mf.grid.xl-col-70 {
    width: 70%;
  }
  .mf.grid.xl-col-66 {
    width: 66.666666666%;
  }
  .mf.grid.xl-col-60 {
    width: 60%;
  }
  .mf.grid.xl-col-50 {
    width: 50%;
  }
  .mf.grid.xl-col-40 {
    width: 40%;
  }
  .mf.grid.xl-col-33 {
    width: 33.333333333%;
  }
  .mf.grid.xl-col-30 {
    width: 30%;
  }
  .mf.grid.xl-col-25 {
    width: 25%;
  }
  .mf.grid.xl-col-20 {
    width: 20%;
  }
  .mf.grid.xl-col-16 {
    width: 16.666666666%;
  }
  .mf.grid.xl-col-12 {
    width: 12.5%;
  }
  .mf.grid.xl-col-10 {
    width: 10%;
  }
  .mf.grid.xl-col-8 {
    width: 8.33333333333%;
  }
}

@media only screen and (min-width: 1280px) {
  .mf.grid.max-col-100 {
    width: 100%;
  }
  .mf.grid.max-col-90 {
    width: 90%;
  }
  .mf.grid.max-col-80 {
    width: 80%;
  }
  .mf.grid.max-col-75 {
    width: 75%;
  }
  .mf.grid.max-col-70 {
    width: 70%;
  }
  .mf.grid.max-col-66 {
    width: 66.666666%;
  }
  .mf.grid.max-col-60 {
    width: 60%;
  }
  .mf.grid.max-col-50 {
    width: 50%;
  }
  .mf.grid.max-col-40 {
    width: 40%;
  }
  .mf.grid.max-col-33 {
    width: 33.333333%;
  }
  .mf.grid.max-col-30 {
    width: 30%;
  }
  .mf.grid.max-col-25 {
    width: 25%;
  }
  .mf.grid.max-col-20 {
    width: 20%;
  }
  .mf.grid.max-col-16 {
    width: 16%;
  }
  .mf.grid.max-col-12 {
    width: 12%;
  }
  .mf.grid.max-col-10 {
    width: 10%;
  }
  .mf.grid.max-col-8 {
    width: 8%;
  }
}


/******************************************************GRID FLEXBOX*************************************************/
.bmo-container-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 1280px;
  margin: auto;
}

.flex-grid-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.flex-fill {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.flex-equal {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
}

.flex-col-expand {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

.flex-equal-fixed {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

.flow-row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.flow-column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.flow-wrap {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.flow-nowrap {
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

/* --- END --- Classes for declaring flex parent, default orientation and wrap --- */
.jc-start {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.jc-end {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.jc-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.jc-between {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.jc-around {
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.ai-start {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.ai-end {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.ai-center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.ai-baseline {
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}

.ai-stretch {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.ac-start {
  -ms-flex-line-pack: start;
      align-content: flex-start;
}

.ac-end {
  -ms-flex-line-pack: end;
      align-content: flex-end;
}

.ac-center {
  -ms-flex-line-pack: center;
      align-content: center;
}

.ac-between {
  -ms-flex-line-pack: justify;
      align-content: space-between;
}

.ac-around {
  -ms-flex-line-pack: distribute;
      align-content: space-around;
}

.ac-stretch {
  -ms-flex-line-pack: stretch;
      align-content: stretch;
}

.flex {
  -webkit-transition: 0.3s all ease;
  transition: 0.3s all ease;
  padding: 0 var(--each-grid-gutter);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.flex.col-100 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  max-width: 100%;
}

.flex.col-90 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 90%;
          flex: 0 0 90%;
  max-width: 90%;
}

.flex.col-80 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 80%;
          flex: 0 0 80%;
  max-width: 80%;
}

.flex.col-75 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 75%;
          flex: 0 0 75%;
  max-width: 75%;
}

.flex.col-70 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 70%;
          flex: 0 0 70%;
  max-width: 70%;
}

.flex.col-66 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 66.666666666%;
          flex: 0 0 66.666666666%;
  max-width: 66.6666%;
}

.flex.col-60 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 60%;
          flex: 0 0 60%;
}

.flex.col-50 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
}

.flex.col-40 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 40%;
          flex: 0 0 40%;
}

.flex.col-33 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 33.333333333%;
          flex: 0 0 33.333333333%;
}

.flex.col-30 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 30%;
          flex: 0 0 30%;
}

.flex.col-25 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 25%;
          flex: 0 0 25%;
}

.flex.col-20 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 20%;
          flex: 0 0 20%;
}

.flex.col-16 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 16.666666666%;
          flex: 0 0 16.666666666%;
}

.flex.col-12 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 12.5%;
          flex: 0 0 12.5%;
}

.flex.col-10 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 10%;
          flex: 0 0 10%;
}

.flex.col-8 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 8.33333333333%;
          flex: 0 0 8.33333333333%;
}

@media only screen and (max-width: 1279px) {
  .flex {
    padding: 0 var(--each-grid-gutter);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .flex.xl-col-100 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%;
  }
  .flex.xl-col-90 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 90%;
            flex: 0 0 90%;
    max-width: 90%;
  }
  .flex.xl-col-80 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 80%;
            flex: 0 0 80%;
    max-width: 80%;
  }
  .flex.xl-col-75 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 75%;
            flex: 0 0 75%;
    max-width: 75%;
  }
  .flex.xl-col-70 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 70%;
            flex: 0 0 70%;
    max-width: 70%;
  }
  .flex.xl-col-66 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 66.666666666%;
            flex: 0 0 66.666666666%;
    max-width: 66.666666%;
  }
  .flex.xl-col-60 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 60%;
            flex: 0 0 60%;
    max-width: 60%;
  }
  .flex.xl-col-50 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    max-width: 50%;
  }
  .flex.xl-col-40 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 40%;
            flex: 0 0 40%;
    max-width: 40%;
  }
  .flex.xl-col-33 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 33.333333333%;
            flex: 0 0 33.333333333%;
    max-width: 33.3333333%;
  }
  .flex.xl-col-30 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 30%;
            flex: 0 0 30%;
    max-width: 30%;
  }
  .flex.xl-col-25 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
            flex: 0 0 25%;
    max-width: 25%;
  }
  .flex.xl-col-20 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
            flex: 0 0 20%;
    max-width: 20%;
  }
  .flex.xl-col-16 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 16.666666666%;
            flex: 0 0 16.666666666%;
    max-width: 16.66666666%;
  }
  .flex.xl-col-12 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 12.5%;
            flex: 0 0 12.5%;
    max-width: 12.5%;
  }
  .flex.xl-col-10 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 10%;
            flex: 0 0 10%;
    max-width: 10%;
  }
  .flex.xl-col-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 8.33333333333%;
            flex: 0 0 8.33333333333%;
    max-width: 8.3333333%;
  }
}

@media only screen and (max-width: 1023px) {
  .flex.lg-col-100 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%;
  }
  .flex.lg-col-90 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 90%;
            flex: 0 0 90%;
    max-width: 90%;
  }
  .flex.lg-col-80 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 80%;
            flex: 0 0 80%;
    max-width: 80%;
  }
  .flex.lg-col-75 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 75%;
            flex: 0 0 75%;
    max-width: 75%;
  }
  .flex.lg-col-70 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 70%;
            flex: 0 0 70%;
    max-width: 70%;
  }
  .flex.lg-col-66 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 66.666666666%;
            flex: 0 0 66.666666666%;
    max-width: 66.66666666%;
  }
  .flex.lg-col-60 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 60%;
            flex: 0 0 60%;
    max-width: 60%;
  }
  .flex.lg-col-50 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    max-width: 50%;
  }
  .flex.lg-col-40 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 40%;
            flex: 0 0 40%;
    max-width: 40%;
  }
  .flex.lg-col-33 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 33.333333333%;
            flex: 0 0 33.333333333%;
    max-width: 33.3333333%;
  }
  .flex.lg-col-30 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 30%;
            flex: 0 0 30%;
    max-width: 30%;
  }
  .flex.lg-col-25 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
            flex: 0 0 25%;
    max-width: 25%;
  }
  .flex.lg-col-20 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
            flex: 0 0 20%;
    max-width: 20%;
  }
  .flex.lg-col-16 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 16.666666666%;
            flex: 0 0 16.666666666%;
    max-width: 16.6666666%;
  }
  .flex.lg-col-12 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 12.5%;
            flex: 0 0 12.5%;
    max-width: 12.5%;
  }
  .flex.lg-col-10 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 10%;
            flex: 0 0 10%;
    max-width: 10%;
  }
  .flex.lg-col-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 8.33333333333%;
            flex: 0 0 8.33333333333%;
    max-width: 8.3333333%;
  }
}

/**** Flexbox Ipad ****/
@media only screen and (max-width: 767px) {
  .flex {
    padding: 0 var(--md-each-grid-gutter);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .flex.md-col-100 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%;
  }
  .flex.md-col-90 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 90%;
            flex: 0 0 90%;
    max-width: 90%;
  }
  .flex.md-col-80 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 80%;
            flex: 0 0 80%;
    max-width: 80%;
  }
  .flex.md-col-75 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 75%;
            flex: 0 0 75%;
    max-width: 75%;
  }
  .flex.md-col-70 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 70%;
            flex: 0 0 70%;
    max-width: 70%;
  }
  .flex.md-col-66 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 66.666666666%;
            flex: 0 0 66.666666666%;
    max-width: 66.6666666%;
  }
  .flex.md-col-60 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 60%;
            flex: 0 0 60%;
    max-width: 60%;
  }
  .flex.md-col-50 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    max-width: 50%;
  }
  .flex.md-col-40 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 40%;
            flex: 0 0 40%;
    max-width: 40%;
  }
  .flex.md-col-33 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 33.333333333%;
            flex: 0 0 33.333333333%;
    max-width: 33.3333333%;
  }
  .flex.md-col-30 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 30%;
            flex: 0 0 30%;
    max-width: 30%;
  }
  .flex.md-col-25 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
            flex: 0 0 25%;
    max-width: 25%;
  }
  .flex.md-col-20 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
            flex: 0 0 20%;
    max-width: 20%;
  }
  .flex.md-col-16 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 16.666666666%;
            flex: 0 0 16.666666666%;
    max-width: 16.666666666%;
  }
  .flex.md-col-12 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 12.5%;
            flex: 0 0 12.5%;
    max-width: 12.5%;
  }
  .flex.md-col-10 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 10%;
            flex: 0 0 10%;
    max-width: 10%;
  }
  .flex.md-col-8 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 8.33333333333%;
            flex: 0 0 8.33333333333%;
    max-width: 8.3333333333%;
  }
}
/**** End Flexbox Ipad ****/

@media only screen and (max-width: 599px) {
  .bmo-container-flex {
    padding: 0 var(--sm-each-grid-gutter);
    min-width: 320px;
  }
  .flex {
    padding: 0 8px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .flex.sm-col-100 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%;
  }
  .flex.sm-col-50 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    max-width: 50%;
  }
  .flex.sm-col-33 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 33.3333333%;
            flex: 0 0 33.3333333%;
    max-width: 33.333333%;
  }
  .flex.sm-col-25 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
            flex: 0 0 25%;
    max-width: 25%;
  }
}

@media only screen and (max-width: 374px) {
  .flex.xsm-col-100 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%;
  }
  .flex.xsm-col-50 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    max-width: 50%;
  }
  .flex.xsm-col-33 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 33.33333333%;
            flex: 0 0 33.33333333%;
    max-width: 33.33333333%;
  }
  .flex.xsm-col-25 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
            flex: 0 0 25%;
    max-width: 25%;
  }
}