.layout-container {
  // Default
  &.layout-default {
    .layout-header {
      height: $header-height;
    }
    .layout-main {
      .layout-sidebar {
        float: left;
        overflow-y: visible;
        background: linear-gradient(180deg, #112949 0%, #091124 100%);
        color: $gray-300;
        &.sidebar-container {
          position: relative;
          width: $sidebar-width;
          height: calc(100vh - #{$header-height} + 200px);
        }
      }
      .layout-body {
        float: left;
        overflow-y: hidden;
        &.body-container {
          position: relative;
          padding-top: 1rem;
          width: calc(100% - #{$sidebar-width});
          height: calc(100vh - #{$header-height} + 200px);
          border-top: 1px solid rgba(0, 0, 0, 0.1);
        }
      }
    }
  }

  // Screen
  &.layout-screen {
    .layout-header {
    }
    .layout-main {
      .layout-body {
        &.body-container {
          min-height: calc(100vh - #{$footer-height});
          border-top: 1px solid rgba(0, 0, 0, 0.1);
        }
      }
    }
    .layout-footer {
      height: $footer-height;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
    }
  }

  // Portal
  &.layout-portal {
    .layout-header {
    }
    .layout-main {
      .layout-body {
        &.body-container {
          min-height: calc(100vh - #{$footer-height});
          border-top: 1px solid rgba(0, 0, 0, 0.1);
        }
      }
    }
    .layout-footer {
      height: $footer-height;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
    }
  }

  $jumbotron-height: 640px;
  // Jumbotron
  &.layout-jumbotron {
    .layout-header {
    }
    .layout-main {
      .layout-body {
        &.body-container {
          min-height: calc(100vh - #{$footer-height} - 70px - 28px);
          border-top: 1px solid rgba(0, 0, 0, 0.1);

          .banner-container {
            position: absolute;
            z-index: -1;
            width: 100%;
            overflow: hidden;
            //height: 907px;
            .banner-layer {
              position: relative;
              width: 100%;
            }

            .banner {
              position: absolute;
              width: 1920px;
              height: 640px;
              left: 0;
            }
            .glittering {
              animation: breath 3s infinite ease-in-out alternate;
            }
            @keyframes breath {
              0% {
                opacity: .2;
              }
              70% {
                opacity: 1;
              }
              100% {
                opacity: .2;

              }
            }

            @media (max-width: 1920px) {
              .banner {
                left: 0;
              }
            }
            @media (max-width: 1440px) {
              .banner {
                left: -200px;
              }
            }
            @media (max-width: 1200px) {
              .banner {
                left: -400px;
              }
            }
            @media (max-width: 960px) {
              .banner {
                left: -600px;
              }
            }
            @media (max-width: 768px) {
              .banner {
                left: -800px;
              }
            }
            @media (max-width: 560px) {
              .banner {
                left: -1000px;
              }
            }
          }

        }
      }
    }
    .layout-footer {
      height: $footer-height;
      border-top: 1px solid rgba(0, 0, 0, 0.1)
    }
  }
}

.captions{
  font-size: 2.875rem;
  font-family: SourceHanSansCN-Bold;
  font-weight: bold;
  color: rgb(255, 255, 255);
  line-height: 4.25rem;
  position: absolute;
  top: 254px;
  left: 20%;
  letter-spacing: 1.125rem
}