.top-banner {
  height: 450px;
  overflow: hidden;   
}
.top-banner .psb-2 {
  padding-bottom: 150px;
}
.top-banner h1, .top-banner .h1{
  color: white;
  font-size: 3.4375rem;
  line-height: 5rem;
  font-weight: 600;
}
.top-banner h1, .top-banner .h1, .top-banner h2, .top-banner .h2, .top-banner h3, .top-banner .h3, .top-banner h4, .top-banner .h4, .top-banner h5, .top-banner .h5, .top-banner h6, .top-banner .h6, .top-banner a, .top-banner p {
  color: white;
}
.top-banner h1, .top-banner .h1, .top-banner h2, .top-banner .h2, .top-banner h3, .top-banner .h3, .top-banner h4, .top-banner .h4, .top-banner h5, .top-banner .h5, .top-banner h6, .top-banner .h6, .top-banner a, .top-banner p {
  color: white;
}
a.scroll-to {
  text-decoration: none;
}
.down {
  font-weight: 600;
  width: 100%;
  position: absolute;
  bottom: 20px;
  left: 46%;
}
.down .bounce {
  -webkit-animation: bounce 2s infinite;
  -o-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
  -webkit-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
}
.down .arrow {
  position: relative;
  bottom: -1.3rem;
  left: 33px;
  margin-left: 0px;
  width: 14px;
  height: 22px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNS43MjciIGhlaWdodD0iOS45ODUiIHZpZXdCb3g9IjAgMCAxNS43MjcgOS45ODUiPgogIDxwYXRoIGlkPSJQYXRoXzY1MzkiIGRhdGEtbmFtZT0iUGF0aCA2NTM5IiBkPSJNNzg2LjU4OSwxODg0Ljg3MWw2LjgsNi44LTYuOCw2LjgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE4OTkuNTM3IC03ODUuNTI5KSByb3RhdGUoOTApIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMyIvPgo8L3N2Zz4K);
  background-size: contain;
  background-repeat: no-repeat;
}
.bounce {
  animation-name: bounce;
  transform-origin: center bottom;
}
.stretch-container{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.top-banner--active .top-banner__bg {
  opacity: 1;
}
.top-banner__bg {
  background-position: 50%;
  opacity: 0;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.top-banner__bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.top-banner--active::before {
  left: -25%;
}
.top-banner::before {
  content: '';
  width: 70%;
  -webkit-transform: skew(30deg);
  -o-transform: skew(30deg);
  transform: skew(30deg);
  z-index: 1;
  -webkit-transition: all 0.6s cubic-bezier(0.65, 0.05, 0.36, 1);
  -o-transition: all 0.6s cubic-bezier(0.65, 0.05, 0.36, 1);
  transition: all 0.6s cubic-bezier(0.65, 0.05, 0.36, 1);
  -webkit-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
.gradient-blue, .top-banner::before {
  background: #154998;
  background: -webkit-gradient(linear, left top, right top, from(#154998), to(rgba(0, 116, 131, 0.54)));
  background: -webkit-linear-gradient(left, #154998 0%, rgba(0, 116, 131, 0.54) 100%);
  background: -o-linear-gradient(left, #154998 0%, rgba(0, 116, 131, 0.54) 100%);
  background: linear-gradient(90deg, #154998 0%, rgba(0, 116, 131, 0.54) 100%);
}
.top-banner::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 50%;
  background-repeat-y: no-repeat;
  background-size: cover;
}
@media (min-width: 1200px){
  .top-banner::after {
    background-size: contain;
  }
}
@media (min-width: 992px){
  .top-banner {
    height: 450px;
  }
}

@media (max-width: 767px){
  .top-banner .h1, .top-banner h1 {
    font-size: 2.4375rem;
    line-height: 3rem;
  }
}
}