@import url("https://fonts.googleapis.com/css?family=Montserrat:400,600,700,800,900|Open+Sans:400,600,700");
@import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

/*
@todo
clean up conflicting css
add dark theme vs. light theme styles
add full height css
add paralax css
add right and left styles for logo position
*/


/* Marquee Global */
.u-of-u-marquee {
  position: relative;
  z-index: 1;
}
.u-of-u-marquee-parallax {
  position: relative;
  background: #000;
  z-index: 1;
  top: -70px;
}
.u-of-u-marquee-parallax::before {
  position: absolute;
  content: '';
  box-shadow: inset 0 -7px 20px -7px rgba(0, 0, 0, .5);
  top: 0;
  bottom: 0;
  width: 100%;
  pointer-events: none;
  z-index: 2;
}
#header-container.parallax-marquee-active {
  z-index: 2 !important;
}
.u-of-u-marquee-light-theme h1 {color: #ffffff !important;}
.u-of-u-marquee-light-theme .u-of-u-marquee-content {color: #ffffff !important;}
.u-of-u-marquee-dark-theme {}
.u-of-u-marquee-dark-theme h1 {color: #000 !important;}
.u-of-u-marquee-dark-theme .u-of-u-marquee-content {color: #000 !important;}
.u-of-u-marquee .item {
  background-size: cover;
  background-position: center center;
  width: 100%;
}
.u-of-u-marquee-parallax .item {
  position: relative;
  bottom: 0px;
  height: 100%;
  z-index: 0;
}
.u-of-u-marquee .u-of-u-marquee-content {
  flex: 0 1 1200px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  position: relative;
  text-align: center;
  z-index: 103;
  color: #FFFFFF;
  padding: 0px 60px;
  max-width: 1200px;
  margin: 0px auto;
}
.u-of-u-marquee-content .u-of-u-marquee-logo {
  max-width: 100px;
  width: 100%;
  height: auto;
  margin: 0px auto;
}
.u-of-u-marquee .item h1 {
  font-size: 46px;
  line-height: 1;
  color: #ffffff;
  margin-bottom: 0px;
}
.u-of-u-marquee .item p {
  font-weight: 400;
  font-size: 18px;
  margin-bottom: 10px;
}
.u-of-u-marquee-block {
 display: flex;
 flex-flow: row wrap;
 justify-content: center;
 align-items: center;
 align-content: center;
 background-position: center center;
 background-repeat: no-repeat;
 background-size: cover;
}
.u-of-u-marquee-block.left {
justify-content: flex-start;
}
.u-of-u-marquee-block.left .u-of-u-marquee-content {
 text-align: left;
 align-items: flex-start;
 align-content: flex-start;
}
.u-of-u-marquee-block.left .u-of-u-marquee-content hr {
 margin: 20px auto 40px 0px;
}
.u-of-u-marquee-block.right {
 justify-content: flex-end;
}
.u-of-u-marquee-block.right .u-of-u-marquee-content {
  text-align: right;
  align-items: flex-end;
  align-content: flex-end;
}
.u-of-u-marquee-block.right .u-of-u-marquee-content hr {
 margin: 20px 0px 40px auto;
}
.u-of-u-marquee-block.left a.u-of-u-marquee-btn, .u-of-u-marquee-block.left .u-of-u-marquee-logo {
  margin-left: 0px;
}
.u-of-u-marquee-block.right a.u-of-u-marquee-btn, .u-of-u-marquee-block.right .u-of-u-marquee-logo {
  margin-right: 0px;
}



/* Marquee Owl Carousel Overrides */
.u-of-u-marquee .owl-item {
  width: 100%;
}
.u-of-u-marquee .owl-nav {
  position: absolute;
  height: 100px;
  top: calc(50% - 50px);
  width: 100%;
  font-size: 60px;
  color: #ffffff;
  z-index: 3;
}
.u-of-u-marquee .owl-nav .owl-prev {
  position: absolute;
  left: 30px;
  opacity: 0.2;
}
.u-of-u-marquee .owl-nav .owl-prev:hover {
  opacity: 1;
}
.u-of-u-marquee .owl-nav .owl-next {
  position: absolute;
  right: 30px;
  opacity: 0.2;
}
.u-of-u-marquee .owl-nav .owl-next:hover {
  opacity: 1;
}
.u-of-u-marquee .owl-dots {
  position: absolute;
  bottom: 8%;
  left: 0;
  right: 0;
  margin: 0px auto;
  z-index: 2;
  text-align: center;
}
.u-of-u-marquee .owl-dots .owl-dot {
  width: 80px;
  height: 4px;
  background: #F7F9FB;
  margin: 0px 5px;
}
.u-of-u-marquee .owl-dots .owl-dot.active, .u-of-u-marquee .owl-dots .owl-dot:hover {
  background: #CC0000!important;
}
.u-of-u-marquee-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 content: ‘’;
 z-index: 102;
}


@media only screen and (max-width: 780px) {
  .u-of-u-marquee .item h1 {
    font-size: 30px;
  }
  .u-of-u-marquee .item p {
    font-size: 16px;
  }
}

@media only screen and (max-width: 480px) {
  .u-of-u-marquee .item h1 {
    font-size: 24px;
  }
  .u-of-u-marquee .item p {
    font-size: 14px;
  }
}