/***********************
******** Banner ********
***********************/
.banner-image {
  background: url("/img/logos-banners/ooi-banner-1024.png");
  background-repeat: no-repeat;
  background-position-x: 50%;
  display: block;
  max-width: 100%;
  width: 100%;
  position: fixed;
  height: auto;
  z-index: 1001;
	background-color: #FFF;
}

/* ~ adjust #wrapper & #page-content-wrapper for content below the banner & navbar ~ */
div#wrapper {
  padding-left: 375px;
}

div#gloss-wrapper {
  margin-top: 170px;
}

div#wrapper-status{
  margin-top: 170px;
  text-align: center;

}

div#wrapper-asset {
  margin-top: 170px;
}

.terms-link{
  /*z-index: 100;*/
  /*position: absolute;*/
  /*top: 0px;*/
  /*right: 0px;*/
  /*font-size: 10px;*/
  /*padding-top: 2px;*/
  /*padding-bottom: 3px;*/
  /*padding-right: 5px;*/
  /*padding-left: 5px;*/
  background-color: white;
  color: #05A9E1;
  cursor: pointer;
}

.terms-link.news-active{
  background-color: #004773;
  color: white;
}

/* #sidebar-wrapper { */
/*   z-index: 500; */
/* } */

.left { text-align: left; }
.right {text-align: right; }
.rightright {text-align: right; }
.center {text-align: center; }

#fadein-left > li.logo-left {
  /* float: left; */
  /* left: 30px; */
	text-decoration: left;
}

.logo-right {
  /* float: right; */
  /* right: 0px; */
	text-align: right;
}
#fadein-left > li {
	display: table-cell;
	width: 33%;
}

@media screen and (max-width: 1024px) {
#fadein-left > li.banner-title {
	line-height: 1;
}
}
#fadein-left > li.banner-title {
    /*float: left;*/
    /*padding-left: 25%;*/
    padding-top: 5px;
    /*width: 100%;*/
    height: 75px;
    display: inline;
    position: relative;
    text-align: center;

    color: #000;
    opacity: 0.7;
    /*font-size: 30px;*/
    font-size: xx-large;
    font-family: Athelas;
    font-weight: normal;
    text-transform: uppercase;
    list-style: none;
    /*animation: fadein 7s;*/
    /*-moz-animation: fadein 7s; !* Firefox *!*/
    /*-webkit-animation: fadein 7s; !* Safari and Chrome *!*/
    /*-o-animation: fadein 7s; !* Opera *!*/
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:.2;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:.2;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:.2;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 2;
    }
}

@media screen and (max-width: 1185px) {
	#fadein-left > li.banner-title {
	line-height: .9;
	}
}
/* this is a temporary fix...spacing is off */
@media screen and (max-width: 815px) {
	#fadein-left > li.banner-title {
	line-height: .5;
	}
}

/*.text-body {
  display: inline;
  color: #000;
	position: relative;
	left: 50%;
}*/
.breaking-news-headline {
  display: block;
  position: absolute;
  font-family: arial;
  font-size: 13px;
  margin-top: -22px;
  color: white;
  margin-left: 25%;
  padding-top: 3px;
  overflow : hidden;
  white-space: nowrap;
}

.breaking-news-headline2 {
  display: block;
  position: absolute;
  font-family: arial;
  font-size: 13px;
  margin-top: -22px;
  color: white;
  margin-left: 75%;
  padding-top: 3px;
  overflow : hidden;
  white-space: nowrap;
}

.breaking-news-headline3 {
  display: block;
  position: absolute;
  font-family: arial;
  font-size: 13px;
  margin-top: -22px;
  color: white;
  margin-left: 125%;
  padding-top: 3px;
  overflow : hidden;
  white-space: nowrap;
}

.breaking-news-title:after{
  content:"";
  position: absolute;
  display: block;
  width: 0px;
  height: 0px;
  right: -12px;
  top: 0;
  border-right:12px solid transparent;
  border-left: 0px solid transparent;
  border-top: 30px solid #05A9E1;
}

.breaking-news-title:before{
  content:"";
  position: absolute;
  display: block;
  width: 0px;
  height: 0px;
  top: 0;
  left: -12px;
  border-left:12px solid transparent;
  border-right: 0px solid transparent;
  border-bottom: 30px solid #05A9E1;
}
.breaking-news-title {
  background-color: #05A9E1;
  display: block;
  height: 20px;
  width: 10%;
  color: white;
  font-family: arial;
  font-size: 13px;
  /*position: absolute;*/
    position: -webkit-sticky;
  position: sticky;
  top: 0;
  /*top: 0px;*/
  margin-top: -22px;
  margin-left: 20px;
  padding-left: 10px;
  z-index: 3;
}
#breaking-news-colour {
  top: 0px;
  height: 18px;
  width: 100%;
  background-color: #004773;
}

a.divLink {
  display: inline-block;
  position: relative;
  padding: 2em;
  margin: -2em;
  color: #05A9E1;
  width: 100%;
  height: 100%;

  text-decoration: none;
  /* Makes sure the link doesn't get underlined */
  z-index: 10;
  /* raises anchor tag above everything else in div */
  background-color: white;
  /*workaround to make clickable in IE */
  opacity: 0;
  /*workaround to make clickable in IE */
  filter: alpha(opacity=0);
  /*workaround to make clickable in IE */
}

#breaking-news-container:hover {
  background-image: -webkit-linear-gradient(top, #05A9E1 0,#b9def0 100%);
}

#breaking-news-container > p {
  font-weight: normal;
}

#breaking-news-container > p:hover {
  font-weight: bold;
}

#breaking-news-container {
  top: 0;
  left: 250px;
  padding-top: 5px;
  padding-left: 10px;
  padding-right: 10px;
  height: 30px;
  width: max-content;
  overflow: hidden;
  position: absolute;
  border-radius: 0px 0px 20px 20px;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  background-image: -webkit-linear-gradient(top,#d9edf7 0,#b9def0 100%);
}

.animated {
  -webkit-animation-duration: 0.2s;
  -webkit-animation-fill-mode: both;
  -moz-animation-duration: 0.2s;
  -moz-animation-fill-mode: both;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
}

.delay-animated {
  -webkit-animation-duration: 0.4s;
  -webkit-animation-fill-mode: both;
  -moz-animation-duration: 0.4s;
  -moz-animation-fill-mode: both;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.scroll-animated {
  -webkit-animation-duration: 3s;
  -webkit-animation-fill-mode: both;
  -moz-animation-duration: 3s;
  -moz-animation-fill-mode: both;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.delay-animated2 {
  -webkit-animation-duration: 3s;
  -webkit-animation-fill-mode: both;
  -moz-animation-duration: 3s;
  -moz-animation-fill-mode: both;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.fadein {
  -webkit-animation-name: fadein;
  -moz-animation-name: fadein;
  -o-animation-name: fadein;
  animation-name: fadein;
}

.slidein {
  -webkit-animation-name: slidein;
  -moz-animation-name: slidein;
  -o-animation-name: slidein;
  animation-name: slidein;
}

@keyframes marquee {
  0% {
    left: 0;
  }
  20% {
    left: 0;
  }
  100% { left: -80%; }
}

.marquee {
  animation: marquee 30s linear infinite;
  -webkit-animation-duration: 30s;
  -moz-animation-duration: 30s;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

@-webkit-keyframes slidein {
  from {
    margin-left: 8000px
  }
  to {
    margin-top: 0px
  }
}
@-moz-keyframes slidein {
  from {
    margin-left: 8000px
  }
  to {
    margin-top: 0px
  }
}

.slideup {
  -webkit-animation-name: slideup;
  -moz-animation-name: slideup;
  -o-animation-name: slideup;
  animation-name: slideup;
}
@-webkit-keyframes slideup {
  from {
    margin-top: 30px
  }
  to {
    margin-top: 0;
  }
}
@-moz-keyframes slideup {
  from {
    margin-top: 30px
  }
  to {
    margin-top: 0;
  }
}