/* .left-pane,
.right-pane,
.center-pane-left,
.center-pane-right {
  flex-grow: 1;
}

.content-pane {
  flex-grow: 2;
} */

/*********************************************************  Main Layout - Found in DNN/Personify Page Settings */

#Main .content-pane {
  order: 1;
  flex-basis: 100%;
}

#mainHost .content-pane {
  order: 1;
  flex-basis: 100%;
  margin: 0 auto;
}

/********************************************************** HERO Section + Top Left Main Right Bottom - DNN Layout
****************************************************************Hero/slider is in template .ascx files + DNN at this point*/

#heroTLMRB .top-pane {
  order: 1;
  flex-basis: 100%;
}

#heroTLMRB .left-pane {
  order: 3;
  flex-basis: 100%;
}

#heroTLMRB .content-pane {
  order: 2;
  flex-basis: 100%;
}

#heroTLMRB .right-pane {
  order: 4;
  flex-basis: 100%;
}

#heroTLMRB .bottom-pane {
  order: 5;
  flex-basis: 100%;
}

@media only screen and (min-width: 1080px) {
  #heroTLMRB .left-pane {
    order: 3;
    flex-basis: 50%;
  }

  #heroTLMRB .content-pane {
    order: 2;
    flex-basis: 100%;
  }

  #heroTLMRB .right-pane {
    order: 4;
    flex-basis: 50%;
  }
}

@media only screen and (min-width: 1450px) {
  #heroTLMRB .left-pane {
    order: 2;
    flex-basis: 20%;
  }

  #heroTLMRB .content-pane {
    order: 3;
    flex-basis: 60%;
  }

  #heroTLMRB .right-pane {
    order: 4;
    flex-basis: 20%;
  }
}

/********************************************************** Hero w/ 6 sections 3 x 3 - DNN Layout */
#hero2Content {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

#hero2Content .hero-one {
  flex-basis: 100%;
}

#hero2Content .hero-two {
  flex-basis: 100%;
}

@media only screen and (min-width: 1080px) {
  .header-content-wrap {
    margin: 4% auto 0 auto;
    width: 80%;
    display: flex;
    flex-wrap: wrap;
  }

  #hero2Content .hero-one {
    flex-basis: 50%;
  }

  #hero2Content .hero-two {
    flex-basis: 50%;
  }
}

/********************************************************** Hero w/ 6 sections 3 x 3 - DNN Layout */
#hero3Content {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

#hero3Content .hero-one {
  flex-basis: 100%;
}

#hero3Content .hero-two {
  flex-basis: 100%;
}

#hero3Content .hero-three {
  flex-basis: 100%;
}

@media only screen and (min-width: 1080px) {
  #hero3Content .hero-one {
    flex-basis: 33.333333%;
  }

  #hero3Content .hero-two {
    flex-basis: 33.333333%;
  }

  #hero3Content .hero-three {
    flex-basis: 33.333333%;
  }
}

/********************************************************** Hero w/ 6 sections 3 x 3 - DNN Layout */
#hero6Content {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

#hero6Content .hero-one {
  flex-basis: 100%;
}

#hero6Content .hero-two {
  flex-basis: 100%;
}

#hero6Content .hero-three {
  flex-basis: 100%;
}

#hero6Content .hero-four {
  flex-basis: 100%;
}

#hero6Content .hero-five {
  flex-basis: 100%;
}

#hero6Content .hero-six {
  flex-basis: 100%;
}

@media only screen and (min-width: 1080px) {
  #hero6Content .hero-one {
    flex-basis: 33.333333%;
  }

  #hero6Content .hero-two {
    flex-basis: 33.333333%;
  }

  #hero6Content .hero-three {
    flex-basis: 33.333333%;
  }

  #hero6Content .hero-four {
    flex-basis: 33.333333%;
  }

  #hero6Content .hero-five {
    flex-basis: 33.333333%;
  }

  #hero6Content .hero-six {
    flex-basis: 33.333333%;
  }
}

/********************************************************** Top Left Main Right Bottom - DNN Layout */

#topLeftMainRightBottom .top-pane {
  order: 1;
  flex-basis: 100%;
}

#topLeftMainRightBottom .left-pane {
  order: 3;
  flex-basis: 100%;
}

#topLeftMainRightBottom .content-pane {
  order: 2;
  flex-basis: 100%;
}

#topLeftMainRightBottom .right-pane {
  order: 4;
  flex-basis: 100%;
}

#topLeftMainRightBottom .bottom-pane {
  order: 5;
  flex-basis: 100%;
}

@media only screen and (min-width: 1080px) {
  #topLeftMainRightBottom .left-pane {
    order: 2;
    flex-basis: 50%;
  }

  #topLeftMainRightBottom .content-pane {
    order: 1;
    flex-basis: 100%;
  }

  #topLeftMainRightBottom .right-pane {
    order: 3;
    flex-basis: 50%;
  }
}

@media only screen and (min-width: 1450px) {
  #topLeftMainRightBottom .left-pane {
    order: 1;
    flex-basis: 20%;
  }

  #topLeftMainRightBottom .content-pane {
    order: 2;
    flex-basis: 60%;
  }

  #topLeftMainRightBottom .right-pane {
    order: 3;
    flex-basis: 20%;
  }
}

/********************************************************** Top Left Main Bottom - DNN Layout */

#topLeftMainBottom .top-pane {
  order: 1;
  flex-basis: 100%;
}

#topLeftMainBottom .left-pane {
  order: 2;
  flex-basis: 100%;
}

#topLeftMainBottom .content-pane {
  order: 2;
  flex-basis: 100%;
}

#topLeftMainBottom .bottom-pane {
  order: 4;
  flex-basis: 100%;
}

@media only screen and (min-width: 1080px) {
  #topLeftMainBottom .left-pane {
    order: 1;
    flex-basis: 30%;
  }

  #topLeftMainBottom .content-pane {
    order: 2;
    flex-basis: 70%;
  }
}

@media only screen and (min-width: 1450px) {
  #topLeftMainBottom .content-pane {
    order: 1;
    flex-basis: 75%;
  }

  #topLeftMainBottom .left-pane {
    order: 2;
    flex-basis: 25%;
  }
}

/********************************************************** Top Main Right Bottom - DNN Layout */

#topMainRightBottom .top-pane {
  order: 1;
  flex-basis: 100%;
}

#topMainRightBottom .content-pane {
  order: 2;
  flex-basis: 100%;
}

#topMainRightBottom .right-pane {
  order: 3;
  flex-basis: 100%;
}

#topMainRightBottom .bottom-pane {
  order: 4;
  flex-basis: 100%;
}

@media only screen and (min-width: 1080px) {
  #topMainRightBottom .content-pane {
    order: 1;
    flex-basis: 70%;
  }

  #topMainRightBottom .right-pane {
    order: 2;
    flex-basis: 30%;
  }
}

@media only screen and (min-width: 1450px) {
  #topMainRightBottom .content-pane {
    order: 1;
    flex-basis: 75%;
  }

  #topMainRightBottom .right-pane {
    order: 2;
    flex-basis: 25%;
  }
}

/********************************************************** Top Left Main - DNN Layout */

#topLeftMain .top-pane {
  order: 1;
  flex-basis: 100%;
}

#topLeftMain .left-pane {
  order: 3;
  flex-basis: 100%;
}

#topLeftMain .content-pane {
  order: 2;
  flex-basis: 100%;
}

@media only screen and (min-width: 1080px) {
  #topLeftMain .left-pane {
    order: 1;
    flex-basis: 30%;
  }

  #topLeftMain .content-pane {
    order: 2;
    flex-basis: 70%;
  }
}

@media only screen and (min-width: 1450px) {
  #topLeftMain .left-pane {
    order: 1;
    flex-basis: 25%;
  }

  #topLeftMain .content-pane {
    order: 2;
    flex-basis: 75%;
  }
}

/********************************************************** Top Main Right - DNN Layout */

#topMainRight .top-pane {
  order: 1;
  flex-basis: 100%;
}

#topMainRight .content-pane {
  order: 2;
  flex-basis: 100%;
}

#topMainRight .right-pane {
  order: 3;
  flex-basis: 100%;
}

@media only screen and (min-width: 1080px) {
  #topMainRight .content-pane {
    order: 1;
    flex-basis: 70%;
  }

  #topMainRight .right-pane {
    order: 2;
    flex-basis: 30%;
  }
}

@media only screen and (min-width: 1450px) {
  #topMainRight .content-pane {
    order: 2;
    flex-basis: 75%;
  }

  #topMainRight .right-pane {
    order: 1;
    flex-basis: 25%;
  }
}

/********************************************************** Top Left Right - DNN Layout */

#topLeftRight .top-pane {
  order: 1;
  flex-basis: 100%;
}

#topLeftRight .left-pane {
  order: 2;
  flex-basis: 100%;
}

#topLeftRight .right-pane {
  order: 3;
  flex-basis: 100%;
}

@media only screen and (min-width: 1080px) {
  #topLeftRight .left-pane {
    flex-basis: 50%;
  }

  #topLeftRight .right-pane {
    flex-basis: 50%;
  }
}

/********************************************************** Left Main Right DNN Layout */

#leftMainRight .left-pane {
  order: 2;
  flex-basis: 100%;
}

#leftMainRight .content-pane {
  order: 1;
  flex-basis: 100%;
}

#leftMainRight .right-pane {
  order: 3;
  flex-basis: 100%;
}

@media only screen and (min-width: 1080px) {
  #leftMainRight .left-pane {
    order: 1;
    flex-basis: 28%;
  }

  #leftMainRight .content-pane {
    order: 2;
    flex-basis: 68%;
  }

  #leftMainRight .right-pane {
    order: 3;
    flex-basis: 28%;
  }
}

@media only screen and (min-width: 1450px) {
  #leftMainRight .left-pane {
    order: 1;
    flex-basis: 20%;
  }

  #leftMainRight .content-pane {
    order: 2;
    flex-basis: 60%;
  }

  #leftMainRight .right-pane {
    order: 3;
    flex-basis: 20%;
  }
}

/********************************************************* Left Main Layout - Found in DNN/Personify Page Settings */

#leftMain .left-pane {
  order: 2;
  flex-basis: 100%;
}

#leftMain .content-pane {
  order: 1;
  flex-basis: 100%;
}

@media only screen and (min-width: 1080px) {
  #leftMain .left-pane {
    order: 1;
    flex-basis: 33.3333%;
  }

  #leftMain .content-pane {
    order: 2;
    flex-basis: 66.6666%;
  }
}

@media only screen and (min-width: 1450px) {
  #leftMain .left-pane {
    order: 1;
    flex-basis: 25%;
  }

  #leftMain .content-pane {
    order: 2;
    flex-basis: 75%;
  }
}

/********************************************************* Main Right Layout - Found in DNN Persona - Page Settings */

#rightMain .right-pane {
  order: 2;
  flex-basis: 100%;
}

#rightMain .content-pane {
  order: 1;
  flex-basis: 100%;
}

@media only screen and (min-width: 1350px) {
  #rightMain .right-pane {
    order: 2;
    flex-basis: 33.3333%;
  }

  #rightMain .content-pane {
    order: 1;
    flex-basis: 66.6666%;
  }
}

@media only screen and (min-width: 1450px) {
  #rightMain .right-pane {
    order: 2;
    flex-basis: 30%;
  }

  #rightMain .content-pane {
    order: 1;
    flex-basis: 70%;
  }
}

/********************************************************* Main Right & Bottom Layout */
#rightMainBottom .right-pane {
  order: 2;
  flex-basis: 100%;
}

#rightMainBottom .content-pane {
  order: 1;
  flex-basis: 100%;
}
#rightMainBottom .bottom-pane {
  flex-basis: 100%;
  order: 3;
}

@media only screen and (min-width: 1080px) {
  #rightMainBottom .right-pane {
    order: 2;
    flex-basis: 33.3333%;
  }

  #rightMainBottom .content-pane {
    order: 1;
    flex-basis: 66.6666%;
  }
}

@media only screen and (min-width: 1450px) {
  #rightMainBottom .right-pane {
    order: 2;
    flex-basis: 25%;
  }

  #rightMainBottom .content-pane {
    order: 1;
    flex-basis: 75%;
  }
}

/********************************************************** Three Squares @ desktop - Left Main Right DNN Layout */
#threeColOneRow .left-pane {
  order: 1;
  flex-basis: 100%;
}

#threeColOneRow .content-pane {
  order: 2;
  flex-basis: 100%;
}

#threeColOneRow .right-pane {
  order: 3;
  flex-basis: 100%;
}

#threeColOneRow .bottom-pane {
  order: 4;
  flex-basis: 100%;
}

@media only screen and (min-width: 1080px) {
  #threeColOneRow .left-pane {
    flex-basis: 33.3333%;
  }

  #threeColOneRow .content-pane {
    flex-basis: 33.3333%;
  }

  #threeColOneRow .right-pane {
    flex-basis: 33.3333%;
  }
}

/********************************************************** Three Squares @ desktop - Left Main Right DNN Layout */

#threeColTwoRow .left-pane {
  order: 1;
  flex-basis: 100%;
}

#threeColTwoRow .content-pane {
  order: 2;
  flex-basis: 100%;
}

#threeColTwoRow .right-pane {
  order: 3;
  flex-basis: 100%;
}

#threeColTwoRow .left-pane-two {
  order: 1;
  flex-basis: 100%;
}

#threeColTwoRow .content-pane-two {
  order: 2;
  flex-basis: 100%;
}

#threeColTwoRow .right-pane-two {
  order: 3;
  flex-basis: 100%;
}

@media only screen and (min-width: 1080px) {
  #threeColTwoRow .left-pane {
    order: 1;
    flex-basis: 33.3333%;
  }

  #threeColTwoRow .content-pane {
    order: 2;
    flex-basis: 33.3333%;
  }

  #threeColTwoRow .right-pane {
    order: 3;
    flex-basis: 33.3333%;
  }

  #threeColTwoRow .left-pane-two {
    order: 1;
    flex-basis: 33.3333%;
  }

  #threeColTwoRow .content-pane-two {
    order: 2;
    flex-basis: 33.3333%;
  }

  #threeColTwoRow .right-pane-two {
    order: 3;
    flex-basis: 33.3333%;
  }
}

/********************************************************** 4column-1Row -  DNN Layout */

#fourColOneRow .left-pane {
  order: 1;
  flex-basis: 100%;
}

#fourColOneRow .center-pane-left {
  order: 2;
  flex-basis: 100%;
}

#fourColOneRow .center-pane-right {
  order: 3;
  flex-basis: 100%;
}

#fourColOneRow .right-pane {
  order: 4;
  flex-basis: 100%;
}

#fourColOneRow .bottom-pane {
  order: 5;
  flex-basis: 100%;
}

@media only screen and (min-width: 1450px) {
  #fourColOneRow .left-pane {
    order: 1;
    flex-basis: 25%;
  }

  #fourColOneRow .center-pane-left {
    order: 2;
    flex-basis: 25%;
  }

  #fourColOneRow .center-pane-right {
    order: 3;
    flex-basis: 25%;
  }

  #fourColOneRow .right-pane {
    order: 4;
    flex-basis: 25%;
  }
}

/********************************************************** WDA HOME PAGE */

#wdaHome .top-pane {
  order: 1;
  flex-basis: 100%;
}

#wdaHome .one-pane {
  order: 2;
  flex-basis: 100%;
}

#wdaHome .two-pane {
  order: 3;
  flex-basis: 100%;
}

#wdaHome .three-pane {
  order: 4;
  flex-basis: 100%;
}

#wdaHome .middle-pane {
  order: 8;
  flex-basis: 100%;
}
#wdaHome .four-pane {
  order: 5;
  flex-basis: 100%;
}

#wdaHome .five-pane {
  order: 6;
  flex-basis: 100%;
}

#wdaHome .six-pane {
  order: 7;
  flex-basis: 100%;
}

#wdaHome .bottom-pane {
  order: 9;
  flex-basis: 100%;
}

@media only screen and (min-width: 900px) {
  #wdaHome .one-pane {
    flex-basis: 33.33%;
  }

  #wdaHome .two-pane {
    flex-basis: 33.33%;
  }

  #wdaHome .three-pane {
    flex-basis: 33.33%;
  }

  #wdaHome .four-pane {
    flex-basis: 33.33%;
  }

  #wdaHome .five-pane {
    flex-basis: 33.33%;
  }

  #wdaHome .six-pane {
    flex-basis: 33.33%;
  }
}

/********************************************************* My Account Layout - Found in DNN/Personify Page Settings */

#myAccount .left-pane {
  order: 1;
  flex-basis: 100%;
  background-color: #bebebe;
  padding: 1% 0 4% 4%;
  /* max-height: 400px; */
}

#myAccount .content-pane {
  order: 2;
  flex-basis: 100%;
  padding: 1% 4%;
}

@media only screen and (min-width: 1080px) {
  #myAccount .left-pane {
    order: 1;
    flex-basis: 21%;
  }

  #myAccount .content-pane {
    order: 2;
    flex-basis: 67%;
  }
}

/********************************************************** HERO at Top Personify Content Below */

#heroPersonify .hero-pane {
  order: 1;
  flex-basis: 100%;
}

#heroPersonify .personify-pane {
  order: 2;
  flex-basis: 85%;
  margin: 6vh auto 0 auto;
}

@media only screen and (min-width: 1080px) {
  #heroPersonify .personify-pane {
    order: 2;
    flex-basis: 65%;
  }
}

/********************************************************* Cart Page Layout - Found in DNN/Personify Page Settings */

#cartPage .cart-content-pane {
  order: 1;
  flex-basis: 100%;
}

#cartPage .cart-right-pane {
  order: 2;
  flex-basis: 100%;
}

@media only screen and (min-width: 1080px) {
  #cartPage .cart-content-pane {
    padding: 0 4% 0 0;
    flex-basis: 62.6666%;
  }

  #cartPage .cart-right-pane {
    padding: 50px 0 0 0;
    flex-basis: 33.3333%;
  }
}

@media only screen and (min-width: 1450px) {
  #cartPage .cart-content-pane {
    flex-basis: 71%;
  }

  #cartPage .cart-right-pane {
    flex-basis: 25%;
  }
}