/* ==========================================================================
   Layout
   ========================================================================== */

/* Page Layout
   ========================================================================== */

.page__body {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow-x: hidden;
}

.page__body > header { order: 2 ; }
.page__body > main   { order: 3 ; }
.page__body > nav    { order: 2 ; }
.page__body > footer { order: 4 ; }

header, 
footer {
  flex: none;
}

main {
  flex: 1 0 auto;
  width: 100%;
}

.page__mobile { 
  display: none; 
}

/* Columns
   ========================================================================== */

main, 
.page__columns {
  display: flex;
  margin: 0 auto;
}
.page__column {
  box-sizing: border-box;
}

/* Column Sizing */
.spinal__column > .content, 
.page__columns {
  margin: 0 auto;
  width: 100%; max-width: 1140px;
}

.page__main {
  flex: 1 1 auto;
}

.page__tray {
  flex-basis: auto;
  flex-grow: 1;
      width: 240px;
  min-width: 240px;
  max-width: 240px;
}

.page__column > .content {
  box-sizing: border-box;
  max-width: 100%;
}

/* Column Order */

body[data-layout~="1col"] .page__main                     { order: 1 ;}
body[data-layout~="1col"] .page__tray[data-position="T1"] { display: none ;}
body[data-layout~="1col"] .page__tray[data-position="T2"] { display: none ;}

body[data-layout~="2col"] .page__main                     { order: 1 ;}
body[data-layout~="2col"] .page__tray[data-position="T1"] { order: 2 ;}
body[data-layout~="2col"] .page__tray[data-position="T2"] { display: none ;}

body[data-layout~="2col"][data-layout~="left"] .page__main                     { order: 2 ;}
body[data-layout~="2col"][data-layout~="left"] .page__tray[data-position="T1"] { order: 1 ;}
body[data-layout~="2col"][data-layout~="left"] .page__tray[data-position="T2"] { display: none ;}

body[data-layout~="3col"] .page__main                     { order: 1 ;}
body[data-layout~="3col"] .page__tray[data-position="T1"] { order: 2 ;}
body[data-layout~="3col"] .page__tray[data-position="T2"] { order: 3 ;}

body[data-layout~="3col"][data-layout~="left"] .page__main                     { order: 3 ;}
body[data-layout~="3col"][data-layout~="left"] .page__tray[data-position="T1"] { order: 1 ;}
body[data-layout~="3col"][data-layout~="left"] .page__tray[data-position="T2"] { order: 2 ;}

body[data-layout~="3col"][data-layout~="split"] .page__main                     { order: 2 ;}
body[data-layout~="3col"][data-layout~="split"] .page__tray[data-position="T1"] { order: 1 ;}
body[data-layout~="3col"][data-layout~="split"] .page__tray[data-position="T2"] { order: 3 ;}

body[data-layout~="1col"] .page__toggle__label[for="page__toggle__T1"] { display: none ;}
body[data-layout~="1col"] .page__toggle__label[for="page__toggle__T2"] { display: none ;}
body[data-layout~="1col"] .page__title                                 { order: 1 ;}

body[data-layout~="2col"] .page__toggle__label[for="page__toggle__T1"] { order: 2 ;}
body[data-layout~="2col"] .page__toggle__label[for="page__toggle__T2"] { display: none ;}
body[data-layout~="2col"] .page__title                                 { order: 1 ;}

body[data-layout~="2col"][data-layout~="left"] .page__toggle__label[for="page__toggle__T1"] { order: 1 ;}
body[data-layout~="2col"][data-layout~="left"] .page__toggle__label[for="page__toggle__T2"] { display: none ;}
body[data-layout~="2col"][data-layout~="left"] .page__title                                 { order: 2 ;}

body[data-layout~="3col"] .page__toggle__label[for="page__toggle__T1"] { order: 1 ;}
body[data-layout~="3col"] .page__toggle__label[for="page__toggle__T2"] { order: 3 ;}
body[data-layout~="3col"] .page__title                                 { order: 2 ;}

/* Off-canvas
   ========================================================================== */

.page__toggle {
  position: fixed; top: -9999px; left: -9999px; 
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
       -o-user-select: none;
          user-select: none;
}

.page__overlay, 
.page__toggle__label, 
.page__toggle__X {
  display: none;
}

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

  body.noScroll {
    overflow: hidden;
  }

  .page__header { display: none ; }
  .page__mobile { display: block; 
    position: fixed; top: 0; left: 0; 
  }

  .page__mobile, 
  .page__columns, 
  .page__main {
    width: 100%; max-width: 100%;
  }

  .page__columns {
    display: block; /* disable flexbox */
    padding-top: 55px;
  }

  .page__main {
    position: relative;
  }

  /* Triggers */
  .page__mobile {
    display: flex;
    justify-content: space-between;
  }
  
  .page__title {
    flex: 1;
    text-align: left;
  }
  .page__toggle__label[for="page__toggle__T1"], 
  .page__toggle__label[for="page__toggle__T2"] {
    flex: none;
  }

  .page__toggle__label {
    background-color: #191919;
    cursor: pointer;
    display: inline-block;
    font-size: 18px;
    line-height: 55px;
    text-align: center;
    width: 55px; height: 100%;
  }

  .page__toggle__label[for="page__toggle__T1"] span:before {
  	content: "\f0c9";
  }
  .page__toggle__label[for="page__toggle__T2"] span:before {
  	content: "\f0c9";
  }

  .page__toggle__X, 
  .page__toggle__X span  {
    background-color: #212121;
    display: block;
    font-size: 18px;
    line-height: 55px;
    width: auto; height: 55px;
  }
  .page__toggle__X span {
    background-color: #191919;
    color: #fff;
    cursor: pointer;
    float: right;
    text-align: center;
    width: 55px;
  }
  .page__toggle__X span:before {
    content: "\f00d";
  }

  /* z-index */
  .page__header, 
  .page__footer,
  .page__main, 
  .page__mobile {
    z-index: 1;
  }

  .page__overlay {
    z-index: 2;
  }

  .page__tray {
    z-index: auto;
  }

  body[data-effect~="slide"] .page__tray {
    z-index: 3;
  }

  /* Animations */
  .page__animation .page__header, 
  .page__animation .page__footer, 
  .page__animation .page__mobile, 
  .page__animation .page__main {
  	transition-duration: 300ms;
  	transition-property: transform;
  	transition-timing-function: ease-out;
  }

	.page__animation .page__tray {
		transition-duration: 300ms;
		transition-property: all;
		transition-timing-function: ease-out;
	}

  .page__animation .page__overlay {
    transition-delay: 150ms;
    transition-duration: 300ms;
    transition-property: opacity;
    transition-timing-function: ease-in-out; 
  }

  /* Overlays */
  .page__overlay {
    background-color: rgba( 0, 0, 0, 0.85 );
    display: block;
    opacity: 0;
    position: fixed; top: 0; bottom: 0; left: 0; right: 0;
    width: 0; height: 0;
  }
  #page__toggle__T1:checked ~ .page__body .page__overlay[data-overlay="T1"], 
  #page__toggle__T2:checked ~ .page__body .page__overlay[data-overlay="T2"] {
    opacity: 1;
    width: 100%; height: 100%;
    -webkit-transform: translate3d(0%, 0%, 0);
    transform: translate3d(0%, 0%, 0);
  }


  /* Trays */
  .page__tray {
    min-width: 0;
    max-width: none;
    overflow-y: auto;
    position: fixed; top: 0; left: auto; right: auto;
    visibility: hidden;
    width: 85%; height: 100%;
  }

  #page__toggle__T1:checked ~ .page__body .page__tray[data-position="T1"], 
  #page__toggle__T2:checked ~ .page__body .page__tray[data-position="T2"]{
    visibility: visible;
  }

  .page__tray {
    right:0;
  }

  body[data-layout~="left"]  .page__tray[data-position="T1"], 
  body[data-layout~="3col"]  .page__tray[data-position="T1"]{
    left: 0; right: auto;
  }

  /* 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; order: 2 ;}
  
  body[data-layout~="1col"][data-layout~="off-canvas"][data-layout~="left"] .page__toggle__label[for="page__toggle__T1"] { order: 1 ;}
  body[data-layout~="1col"][data-layout~="off-canvas"][data-layout~="left"] .page__title                                 { order: 2 ;}

  /* Transforms */

  .spinal__column,  
  #page__toggle__T1:checked ~ .page__body .page__tray[data-position="T1"], 
  #page__toggle__T2:checked ~ .page__body .page__tray[data-position="T2"] {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  body[data-effect~="push"][data-layout~="1col"][data-layout~="off-canvas"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="push"][data-layout~="2col"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="push"][data-layout~="3col"] #page__toggle__T2:checked ~ .page__body .spinal__column, 
  body[data-effect~="reveal"][data-layout~="1col"][data-layout~="off-canvas"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="reveal"][data-layout~="2col"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="reveal"][data-layout~="3col"] #page__toggle__T2:checked ~ .page__body .spinal__column, 
  body[data-effect~="shift"][data-layout~="1col"][data-layout~="off-canvas"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="shift"][data-layout~="2col"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="shift"][data-layout~="3col"] #page__toggle__T2:checked ~ .page__body .spinal__column 
  {
    -webkit-transform: translate3d(-85%, 0%, 0);
    transform: translate3d(-85%, 0%, 0);
  }

  body[data-effect~="push"][data-layout~="1col"][data-layout~="off-canvas"][data-layout~="left"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="push"][data-layout~="2col"][data-layout~="left"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="push"][data-layout~="3col"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="reveal"][data-layout~="1col"][data-layout~="off-canvas"][data-layout~="left"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="reveal"][data-layout~="2col"][data-layout~="left"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="reveal"][data-layout~="3col"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="shift"][data-layout~="1col"][data-layout~="off-canvas"][data-layout~="left"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="shift"][data-layout~="2col"][data-layout~="left"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="shift"][data-layout~="3col"] #page__toggle__T1:checked ~ .page__body .spinal__column 
  {
    -webkit-transform: translate3d(85%, 0%, 0);
    transform: translate3d(85%, 0%, 0);
  }

  body[data-effect~="push"][data-layout~="1col"][data-layout~="off-canvas"] .page__tray[data-position="T1"], 
  body[data-effect~="push"][data-layout~="2col"] .page__tray[data-position="T1"], 
  body[data-effect~="push"][data-layout~="3col"] .page__tray[data-position="T2"], 
  body[data-effect~="slide"][data-layout~="1col"][data-layout~="off-canvas"] .page__tray[data-position="T1"], 
  body[data-effect~="slide"][data-layout~="2col"] .page__tray[data-position="T1"], 
  body[data-effect~="slide"][data-layout~="3col"] .page__tray[data-position="T2"] 
  {
    -webkit-transform: translate3d(100%, 0%, 0);
    transform: translate3d(100%, 0%, 0);
  }
  
  body[data-effect~="push"][data-layout~="1col"][data-layout~="off-canvas"][data-layout~="left"] .page__tray[data-position="T1"], 
  body[data-effect~="push"][data-layout~="2col"][data-layout~="left"] .page__tray[data-position="T1"], 
  body[data-effect~="push"][data-layout~="3col"] .page__tray[data-position="T1"], 
  body[data-effect~="slide"][data-layout~="1col"][data-layout~="off-canvas"][data-layout~="left"] .page__tray[data-position="T1"], 
  body[data-effect~="slide"][data-layout~="2col"][data-layout~="left"] .page__tray[data-position="T1"], 
  body[data-effect~="slide"][data-layout~="3col"] .page__tray[data-position="T1"] 
  {
    -webkit-transform: translate3d(-100%, 0%, 0);
    transform: translate3d(-100%, 0%, 0);
  }
  
  body[data-effect~="shift"][data-layout~="1col"][data-layout~="off-canvas"] .page__tray[data-position="T1"], 
  body[data-effect~="shift"][data-layout~="2col"] .page__tray[data-position="T1"], 
  body[data-effect~="shift"][data-layout~="3col"] .page__tray[data-position="T2"] 
  {
    -webkit-transform: translate3d(40%, 0%, 0);
    transform: translate3d(40%, 0%, 0);
  }
  
  body[data-effect~="shift"][data-layout~="1col"][data-layout~="off-canvas"][data-layout~="left"] .page__tray[data-position="T1"], 
  body[data-effect~="shift"][data-layout~="2col"][data-layout~="left"] .page__tray[data-position="T1"], 
  body[data-effect~="shift"][data-layout~="3col"] .page__tray[data-position="T1"] 
  {
    -webkit-transform: translate3d(-40%, 0%, 0);
    transform: translate3d(-40%, 0%, 0);
  }

  body[data-effect="slide"] #page__toggle__T1:checked ~ .page__body .page__tray[data-position="T1"] {
    box-shadow: 2px 0 4px rgba( 0, 0, 0, 0.35 );
  }

  body[data-effect="slide"] #page__toggle__T2:checked ~ .page__body .page__tray[data-position="T2"] {
    box-shadow: -2px 0 4px rgba( 0, 0, 0, 0.35 );
  }

  /* fix iOS Safari z-index scrolling bug */
    .spinal__column {
      -webkit-overflow-scrolling: touch;
    }

    .page__tray {
      -webkit-overflow-scrolling: auto;
    }
  
    .page__toggle:checked ~ .page__body .spinal__column {
     -webkit-overflow-scrolling: auto;
    }

    #page__toggle__T1:checked ~ .page__body .page__tray[data-position="T1"], 
    #page__toggle__T2:checked ~ .page__body .page__tray[data-position="T2"] {
     -webkit-overflow-scrolling: touch;
    }
  /* end z-index fix */


} /* @media */

@media screen and ( min-width: 330px ) and ( max-width: 1024px ) {
                            /* 280px / 0.85 ~= 330 */

  .page__tray[data-position="T1"], 
  .page__tray[data-position="T2"]{
    width: 280px;
  }

  body[data-effect~="push"][data-layout~="1col"][data-layout~="off-canvas"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="push"][data-layout~="2col"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="push"][data-layout~="3col"] #page__toggle__T2:checked ~ .page__body .spinal__column, 
  body[data-effect~="reveal"][data-layout~="1col"][data-layout~="off-canvas"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="reveal"][data-layout~="2col"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="reveal"][data-layout~="3col"] #page__toggle__T2:checked ~ .page__body .spinal__column, 
  body[data-effect~="shift"][data-layout~="1col"][data-layout~="off-canvas"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="shift"][data-layout~="2col"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="shift"][data-layout~="3col"] #page__toggle__T2:checked ~ .page__body .spinal__column 
  {
    -webkit-transform: translate3d(-280px, 0%, 0);
    transform: translate3d(-280px, 0%, 0);
  }

  body[data-effect~="push"][data-layout~="1col"][data-layout~="off-canvas"][data-layout~="left"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="push"][data-layout~="2col"][data-layout~="left"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="push"][data-layout~="3col"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="reveal"][data-layout~="1col"][data-layout~="off-canvas"][data-layout~="left"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="reveal"][data-layout~="2col"][data-layout~="left"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="reveal"][data-layout~="3col"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="shift"][data-layout~="1col"][data-layout~="off-canvas"][data-layout~="left"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="shift"][data-layout~="2col"][data-layout~="left"] #page__toggle__T1:checked ~ .page__body .spinal__column, 
  body[data-effect~="shift"][data-layout~="3col"] #page__toggle__T1:checked ~ .page__body .spinal__column 
  {
    -webkit-transform: translate3d(280px, 0%, 0);
    transform: translate3d(280px, 0%, 0);
  }

} /* @media */