/* 
 * Flexbox CSS via Autoprefixer
 * @link https://autoprefixer.github.io/
 */

.page__body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

.page__body > header { -webkit-box-ordinal-group: 3; -webkit-order: 2 ; -ms-flex-order: 2 ; order: 2 ; }
.page__body > main   { -webkit-box-ordinal-group: 4; -webkit-order: 3 ; -ms-flex-order: 3 ; order: 3 ; }
.page__body > nav    { -webkit-box-ordinal-group: 3; -webkit-order: 2 ; -ms-flex-order: 2 ; order: 2 ; }
.page__body > footer { -webkit-box-ordinal-group: 5; -webkit-order: 4 ; -ms-flex-order: 4 ; order: 4 ; }

header, 
footer {
  -webkit-box-flex: 0;
  -webkit-flex: none;
      -ms-flex: none;
          flex: none;
}

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

main, 
.page__columns {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

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

.page__tray {
  -webkit-flex-basis: auto;
      -ms-flex-preferred-size: auto;
          flex-basis: auto;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

body[data-layout~="1col"] .page__main                     { -webkit-box-ordinal-group: 2; -webkit-order: 1 ; -ms-flex-order: 1 ; order: 1 ;}

body[data-layout~="2col"] .page__main                     { -webkit-box-ordinal-group: 2; -webkit-order: 1 ; -ms-flex-order: 1 ; order: 1 ;}
body[data-layout~="2col"] .page__tray[data-position="T1"] { -webkit-box-ordinal-group: 3; -webkit-order: 2 ; -ms-flex-order: 2 ; order: 2 ;}

body[data-layout~="2col"][data-layout~="left"] .page__main                     { -webkit-box-ordinal-group: 3; -webkit-order: 2 ; -ms-flex-order: 2 ; order: 2 ;}
body[data-layout~="2col"][data-layout~="left"] .page__tray[data-position="T1"] { -webkit-box-ordinal-group: 2; -webkit-order: 1 ; -ms-flex-order: 1 ; order: 1 ;}

body[data-layout~="3col"] .page__main                     { -webkit-box-ordinal-group: 2; -webkit-order: 1 ; -ms-flex-order: 1 ; order: 1 ;}
body[data-layout~="3col"] .page__tray[data-position="T1"] { -webkit-box-ordinal-group: 3; -webkit-order: 2 ; -ms-flex-order: 2 ; order: 2 ;}
body[data-layout~="3col"] .page__tray[data-position="T2"] { -webkit-box-ordinal-group: 4; -webkit-order: 3 ; -ms-flex-order: 3 ; order: 3 ;}

body[data-layout~="3col"][data-layout~="left"] .page__main                     { -webkit-box-ordinal-group: 4; -webkit-order: 3 ; -ms-flex-order: 3 ; order: 3 ;}
body[data-layout~="3col"][data-layout~="left"] .page__tray[data-position="T1"] { -webkit-box-ordinal-group: 2; -webkit-order: 1 ; -ms-flex-order: 1 ; order: 1 ;}
body[data-layout~="3col"][data-layout~="left"] .page__tray[data-position="T2"] { -webkit-box-ordinal-group: 3; -webkit-order: 2 ; -ms-flex-order: 2 ; order: 2 ;}

body[data-layout~="3col"][data-layout~="split"] .page__main                     { -webkit-box-ordinal-group: 3; -webkit-order: 2 ; -ms-flex-order: 2 ; order: 2 ;}
body[data-layout~="3col"][data-layout~="split"] .page__tray[data-position="T1"] { -webkit-box-ordinal-group: 2; -webkit-order: 1 ; -ms-flex-order: 1 ; order: 1 ;}
body[data-layout~="3col"][data-layout~="split"] .page__tray[data-position="T2"] { -webkit-box-ordinal-group: 4; -webkit-order: 3 ; -ms-flex-order: 3 ; order: 3 ;}

body[data-layout~="1col"] .page__title                                 { -webkit-box-ordinal-group: 2; -webkit-order: 1 ; -ms-flex-order: 1 ; order: 1 ;}

body[data-layout~="2col"] .page__toggle__label[for="page__toggle__T1"] { -webkit-box-ordinal-group: 3; -webkit-order: 2 ; -ms-flex-order: 2 ; order: 2 ;}
body[data-layout~="2col"] .page__title                                 { -webkit-box-ordinal-group: 2; -webkit-order: 1 ; -ms-flex-order: 1 ; order: 1 ;}

body[data-layout~="2col"][data-layout~="left"] .page__toggle__label[for="page__toggle__T1"] { -webkit-box-ordinal-group: 2; -webkit-order: 1 ; -ms-flex-order: 1 ; order: 1 ;}
body[data-layout~="2col"][data-layout~="left"] .page__title                                 { -webkit-box-ordinal-group: 3; -webkit-order: 2 ; -ms-flex-order: 2 ; order: 2 ;}

body[data-layout~="3col"] .page__toggle__label[for="page__toggle__T1"] { -webkit-box-ordinal-group: 2; -webkit-order: 1 ; -ms-flex-order: 1 ; order: 1 ;}
body[data-layout~="3col"] .page__toggle__label[for="page__toggle__T2"] { -webkit-box-ordinal-group: 4; -webkit-order: 3 ; -ms-flex-order: 3 ; order: 3 ;}
body[data-layout~="3col"] .page__title                                 { -webkit-box-ordinal-group: 3; -webkit-order: 2 ; -ms-flex-order: 2 ; order: 2 ;}

@media screen and ( max-width: 1024px ) {

  /* Triggers */
  .page__mobile {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  
  .page__title {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
  .page__toggle__label[for="page__toggle__T1"], 
  .page__toggle__label[for="page__toggle__T2"] {
    -webkit-box-flex: 0;
    -webkit-flex: none;
        -ms-flex: none;
            flex: none;
  }

  /* 1col off-canvas navigation */

  body[data-layout~="1col"][data-layout~="off-canvas"], 
  body[data-layout~="1col"][data-layout~="off-canvas"][data-layout~="left"]  .page__tray[data-position="T1"] { display: block ;}

  body[data-layout~="1col"][data-layout~="off-canvas"] .page__toggle__label[for="page__toggle__T1"] { display: block; -webkit-box-ordinal-group: 3; -webkit-order: 2 ; -ms-flex-order: 2 ; order: 2 ;}
  
  body[data-layout~="1col"][data-layout~="off-canvas"][data-layout~="left"] .page__toggle__label[for="page__toggle__T1"] { -webkit-box-ordinal-group: 2; -webkit-order: 1 ; -ms-flex-order: 1 ; order: 1 ;}
  body[data-layout~="1col"][data-layout~="off-canvas"][data-layout~="left"] .page__title                                 { -webkit-box-ordinal-group: 3; -webkit-order: 2 ; -ms-flex-order: 2 ; order: 2 ;}
  
} /* @media */