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

// Variables
$col-gap : 30px !default;

/* * General * */
.main-container {
  margin-top: 50px;
  margin-bottom: $mb-md;
}

.bb-row {
  margin-right: -$col-gap / 2;
  margin-left: -$col-gap / 2;
  @include clearfix();
}

.bb-col {
  padding-left: $col-gap / 2;
  padding-right: $col-gap / 2;
}

.col-content {
  width: 100%;
  margin: 0 0 $mb-md;
}

.col-site-main {
  margin-bottom: $mb-md;
}

.col-sidebar-secondary,
.col-sidebar {
  width: 480px;
  max-width: 100%;
  margin: 0 auto $mb-md;
}

/* * Layout with One Sidebar * */
@media screen and (min-width: $screen-tablet-custom) {

  .one-sidebar {

    &.left-sidebar { //left sidebar
      .col-content {
        float: right;
      }
      .col-sidebar {
        float: left;
      }
    }
    &.right-sidebar { //right sidebar
      .col-content {
        float: left;
      }
      .col-sidebar {
        float: right;
      }
    }

    &.sidebar-1_3 { //sidebar 1/3

      .col-content {
        width: 66.666%;
      }

      .col-sidebar {
        margin: 0;
        width: 33.333%;
      }

    }
    &.sidebar-1_4 { //sidebar 1/4

      .col-content {
        width: 70%;
      }

      .col-sidebar {
        width: 30%;
      }

    }
  }
}
@media screen and (min-width: $screen-lg-min) {

  .one-sidebar {

    &.sidebar-1_4 { //sidebar 1/4

      .col-content {
        width: 75%;
      }

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

/* * Full width layout with one sidebar * */
@media screen and (min-width: $screen-lg-min) {
  .one-sidebar {
      &.sidebar-1_3 {

        .bb-stretched-full {

          .col-sidebar {
            max-width: 400px;
            width: 400px;
          }
          .col-content {
            width: 66.666%;
            width: calc( 100% - 400px);
          }

        }
      }
      &.sidebar-1_4 {

        .bb-stretched-full {

          .col-sidebar {
            max-width: 300px;
            width: 300px;
          }
          .col-content {
            width: 66.666%;
            width: calc( 100% - 300px);
          }

        }
      }
  }
  .two-sidebar {
      &.sidebar-1_4 {

        .bb-stretched-full {

          .col-sidebar,
          .col-sidebar-secondary {
            max-width: 300px;
            width: 300px;
          }
          .col-content {
            width: 66.666%;
            width: calc( 100% - 300px);
          }
          .col-site-main {
            width: 66.666%;
            width: calc( 100% - 300px);
          }
        }
      }
      &.sidebar-1_3-1_4 {

        .bb-stretched-full {

          .col-sidebar {
            max-width: 340px;
            width: 340px;
          }
          .col-sidebar-secondary {
            max-width: 260px;
            width: 260px;
          }
          .col-content {
            width: 66.666%;
            width: calc( 100% - 340px);
          }
          .col-site-main {
            width: 66.666%;
            width: calc( 100% - 260px);
          }
        }
      }
  }
}

/* * Layout with Two Sidebars * */
.two-sidebar {

  .bb-stream {
    width: $container;
  }

  .col-content {
    width: 100%;
  }

  @media screen and (min-width: $screen-tablet-custom) {//901

    &.left-sidebar { //left sidebar

      .col-content {
        float: none;
      }
      .col-sidebar {
        float: right;
      }
      .col-site-main {
        float: left;
      }
      .col-sidebar-secondary {
        float: right;
      }

    }
    &.right-sidebar { //right sidebar

      .col-content {
        float: none;
      }
      .col-sidebar {
        float: left;
      }
      .col-site-main {
        float: right;
      }
      .col-sidebar-secondary {
        float: left;
      }

    }

    &.sidebar-1_3-1_4 {

      .col-content {
        width: 100%;

        .bb-row {
          &:before,
          &:after {
            content: none;
          }
        }
      }

      .col-site-main {
        width: 66.66%;
      }

      .col-sidebar {
        width: 33.33%;
      }

      .col-sidebar-secondary {
        width: 33.33%;
        margin-bottom: 40px;
      }

    }
    &.sidebar-1_4 {

      .col-content {
        width: 100%;

        .bb-row {
          &:before,
          &:after {
            content: none;
          }
        }
      }

      .col-site-main {
        width: 70%;
      }

      .col-sidebar {
        width: 30%;
      }

      .col-sidebar-secondary {
        width: 30%;
        margin-bottom: 40px;
      }
    }

  }
  @media screen and (min-width: $screen-sm-max) {//992

    &.left-sidebar { //left sidebar

      .col-content {
        float: right;
      }
      .col-sidebar {
        float: left;
      }
      .col-site-main {
        float: left;
      }
      .col-sidebar-secondary {
        float: right;
      }

    }
    &.right-sidebar { //right sidebar

      .col-content {
        float: left;
      }
      .col-sidebar {
        float: right;
      }
      .col-site-main {
        float: right;
      }
      .col-sidebar-secondary {
        float: left;
      }

    }

    &.sidebar-1_3-1_4 { //sidebar main big sidebar sec small

      .col-content {
        width: 72%;
        margin-bottom: 0;
      }

      .col-site-main {
        width: 70%;
      }

      .col-sidebar {
        width: 28%;
      }

      .col-sidebar-secondary {
        width: 30%;
      }
    }
    &.sidebar-1_4 { //sidebars 1/4

      .col-content {
        width: 75%;
      }

      .col-site-main {
        width: 66.666%;
      }

      .col-sidebar {
        width: 25%;
      }

      .col-sidebar-secondary {
        width: 33.333%;
      }
    }

  }

}

#secondary,
#secondary-small {
  .sticky-sidebar {
    //position: static;
    &.affix,
    &.non-fix {
      .bb-sticky-el {
        position: static;
      }
    }
  }
}
@media screen and (min-width: $screen-tablet-custom) { // 901
  #secondary {
    .sticky-sidebar.affix {
      .bb-sticky-el {
        position: fixed;
        transform: translate3d(0,0,0);
        -webkit-font-smoothing: antialiased;
        z-index: 1100;
      }
    }
    .sticky-sidebar.non-fix {
      .bb-sticky-el {
        position: absolute;
        top: inherit !important;
        bottom: 0;
      }
    }
  }
}
@media screen and (min-width: $screen-sm-max) {//992
  #secondary-small {
    .sticky-sidebar.affix {
      .bb-sticky-el {
        position: fixed;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        -webkit-font-smoothing: antialiased;
        z-index: 1100;
      }
    }
    .sticky-sidebar.non-fix {
      .bb-sticky-el {
        position: absolute;
        top: inherit !important;
        bottom: 0;
      }
    }
  }
 }


/* * Layout with no Sidebars * */
.no-sidebar {
  .col-content {
    width: 100%;
  }
  .sidebar,
  .sidebar-secondary {
    display:none;
  }
}

/* * Layout Stream * */
.no-sidebar {
  .bb-stream {
    width : 575px;
    max-width: 100%;
  }
}

/* * Stream Layout with One Sidebar * */
@media screen and (min-width: $screen-tablet-custom) {

  .one-sidebar {

    &.sidebar-1_3 { //sidebar 1/3

      .bb-stream {

        width: 980px;
        max-width: 100%;

        .col-content {
          width: 66.666%;
          max-width: 575px;
        }

        .col-sidebar {
          width: 34%;
          width: calc( 100% - 575px);
        }
      }
    }
    &.sidebar-1_4 { //sidebar 1/4

      .bb-stream {

        width: 880px;
        max-width: 100%;

        .col-content {
          width: 70%;
          max-width: 575px;
        }

        .col-sidebar {
          width: 33%;
          width: calc( 100% - 575px);
        }
      }
    }
  }
}

/* * Stream Layout with Two Sidebar * */
@media screen and (min-width: $screen-lg-min) {

  .two-sidebar {

    &.sidebar-1_4 {

      .bb-stream {

        .col-site-main {
          max-width: 575px;
          margin-right: calc((66.66% - 575px)/2);
          margin-left: calc((66.66% - 575px)/2);
        }
      }
    }
    &.sidebar-1_3-1_4 {

      .bb-stream {

        .col-site-main {
          max-width: 575px;
          margin-right: calc((70% - 575px)/2);
          margin-left: calc((70% - 575px)/2);
        }
      }
    }
  }
}


