/*****************************************************************************************************
* Site layout
******************************************************************************************************/

/*
Site Containers
---------------------------------------------------------------------------------------------------- */

/* Common Containers
--------------------------------------------- */

body {
  overflow-x: hidden;
  overflow-y: scroll;
}

.site-inner,
.wrap {
  margin: 0 auto;
}

.wrap {
  max-width: 1160px;
}

.site-inner > .wrap {
  padding-top: 70px;
}

.site-inner > .wrap,
.bub-bottom-section > .wrap {
  padding-left: 20px;
  padding-right: 20px;
}

.has-breadcrumbs .site-inner > .wrap {
  padding-top: 35px;
}

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

  .wrap {
    max-width: 1000px;
  }
  
  .has-breadcrumbs .site-inner > .wrap {
    padding-top: 35px;
  }
}

@media screen and (max-width: 1000px/*mobileMenuMaxWidth*/) {

  .wrap {
    min-width: 280px;
  }

  .site-inner > .wrap {
    padding-top: 40px;
  }

  .site-inner > .wrap,
  .bub-bottom-section > .wrap {
    padding-left: 40px;
    padding-right: 40px;
  }

  .has-breadcrumbs .site-inner > .wrap {
    padding-top: 30px;
  }
}

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

  .archive .site-inner > .wrap,
  .archive .bub-bottom-section > .wrap {
    padding-left: 15px;
    padding-right: 15px;
  }
}

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

  .site-inner > .wrap {
    padding-top: 35px;
  }

  .site-inner > .wrap,
  .bub-bottom-section > .wrap {
    padding-left: 20px;
    padding-right: 20px;
  }

  .archive .site-inner > .wrap,
  .archive .bub-bottom-section > .wrap {
    padding-left: 5px;
    padding-right: 5px;
  }

  .has-breadcrumbs .site-inner > .wrap {
    padding-top: 20px;
  }
}


/* Layout Containers
--------------------------------------------- */

/* Masonry */

.bub-masonry {
  opacity: 0;
}

.bub-masonry-item--visible {
  animation: masonryItemFadeIn 200ms ease-in-out;
}

@keyframes masonryItemFadeIn {
    0% {opacity: 0;}
  100% {opacity: 1;}
}


/* Sticky Footer
--------------------------------------------- */

html,
body {
  height: 100%;
}

.site-container {
  min-height: 100%;
}

.site-header,
.bub-bottom-section,
.site-footer {
  flex: 0 0 auto;
}

.site-container {
  display: flex;
  flex-direction: column;
}

.site-inner {
  flex: 1 0 auto;
  width: 100%;
}


/* Prevent Horizontal Scroll
--------------------------------------------- */

/* Prevent horizontal document scroll in mobile
browsers (Chrome!), caused by negative margins 
used on flexbox containers. */

.site-container {
  height: initial !important;
  overflow: hidden !important;
}


/*
Column Layouts
---------------------------------------------------------------------------------------------------- */

/* Full Width Content
--------------------------------------------- */

.full-width-content .content {
  width: 100%;
}


/* Content-Sidebar (Flexbox)
--------------------------------------------- */

/* Net Width: 1120px */

.content-sidebar .content-sidebar-wrap {
  display: flex;
}

.content-sidebar .content {
  max-width: 720px;
  padding-right: 70px;
  width: 100%;
}

.content-sidebar .sidebar {
  flex: 0 0 400px;
  max-width: 400px;
}

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

  /* Net Width: 700px */

  .content-sidebar .content {
    margin: 0 auto;
    max-width: 650px;
    padding-right: 0;
  }

  .content-sidebar .sidebar {
    display: none;
  }
}

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

  /* Net Width: Full */

  .content-sidebar .content-sidebar-wrap {
    display: block;
  }

  .content-sidebar .content {
    display: block;
    min-width: 260px;
  }
}


/* Sidebar-Content (Flexbox)
--------------------------------------------- */

/* Net Width: 1120px */

.sidebar-content .content-sidebar-wrap {
  display: flex;
}

.sidebar-content .sidebar {
  flex: 0 0 400px;
  max-width: 400px;
  order: -1;
}

.sidebar-content .content {
  max-width: 720px;
  padding-left: 70px;
  width: 100%;
}

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

  /* Net Width: 700px */

  .sidebar-content .sidebar {
    display: none;
  }

  .sidebar-content .content {
    margin: 0 auto;
    max-width: 650px;
    padding-left: 0;
  }
}

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

  /* Net Width: Full */

  .sidebar-content .content-sidebar-wrap {
    display: block;
  }

  .sidebar-content .content {
    display: block;
    min-width: 260px;
  }
}


/* Primary-Content-Secondary (Flexbox)
--------------------------------------------- */

/* Net Width: 1160px */

.sidebar-content-sidebar .content-sidebar-wrap {
  display: flex;
}

.sidebar-content-sidebar .sidebar-primary {
  flex: 0 0 200px;
  order: -1;
}

/* IE 11: Make images respect container width. */
.sidebar-content-sidebar .content {
  display: flex;
  flex-direction: column;
}
.bub-loop-wrap {
  width: 100%;
} /* End: IE 11 */

.sidebar-content-sidebar .sidebar-secondary {
  flex: 0 0 315px;
  max-width: 315px; /* IE 11 ignoring display border-box. */
  padding-left: 40px;
}

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

  /* Net Width: 960px */

  .sidebar-content-sidebar .content-sidebar-wrap {
  }

  .sidebar-content-sidebar .sidebar-primary {
  }

  .sidebar-content-sidebar .content {
    /*max-width: 650px;*/
    flex-shrink: 1;
    flex-grow: 0;
    flex-basis: 650px;
    padding-left: 20px;
  }

  .sidebar-content-sidebar .sidebar-secondary {
    display: none;
  }
}

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

  /* Net Width: 780px */

  .sidebar-content-sidebar .sidebar-primary {
    flex: 0 0 190px;
  }

  .sidebar-content-sidebar .content {
    padding: 0;
  }
}

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

  /* Net Width: Full */

  .sidebar-content-sidebar .content-sidebar-wrap {
    display: block;
  }

  .sidebar-content-sidebar .content {
    margin: 0 auto;
    max-width: 620px;
  }

  .sidebar-content-sidebar .sidebar-primary {
    display: none;
  }
}