/* general styles for ticker wrapper that apply to both versions*/

#globalTickerWrapperFloat{
	position: absolute;
  	z-index: 998;
  	width: 100%;
  	top: 0px;
	display:none;
}

.globalTickerWrapper, .globalTickerWrapper-infinite-loop{
	background-color:#006341;
	display: block;
	width: 100%;
        
}
        
.globalTickerWrapper.emergencyMode, .globalTickerWrapper-infinite-loop.emergencyMode{
    background-color:#EB0000;
}

.globalTickerWrapper.emergencyMode .tickerMessage h2, .globalTickerWrapper.emergencyMode .tickerMessage p, 
.globalTickerWrapper-infinite-loop.emergencyMode .tickerMessage h2, .globalTickerWrapper-infinite-loop.emergencyMode .tickerMessage p{
    font-weight:bold !important;
    display:inline;
}
.globalTickerWrapper.emergencyMode .tickerWarningIcon, .globalTickerWrapper-infinite-loop.emergencyMode .tickerWarningIcon{
    position:inherit;
    display:inline-block;
    left:inherit;
    top:inherit;
    font-size: 2em;
    color: yellow;
    }
    
.globalTickerWrapper-infinite-loop.emergencyMode .tickerWarningIcon{
    position: relative;
    top: 8px;
}

.globalTickerWrapper .tickerMessage, .globalTickerWrapper-infinite-loop .tickerMessage{
	padding: 10px;
	margin: 0 auto;
	display: block;
	clear: both;
	/*max-width: 1150px;*/
	width: 100%;
}

#globalTickerWrapperFloat .tickerDismiss{
	display:block;
	position:absolute;
	top:5px;
	right:0px;
	background-color: #006341;
}
#globalTickerWrapperFloat .tickerDismiss button {
  font-size: 20px !important;
  border: none;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  margin-right: 5px;
  margin-left:5px;
  padding: 12px 15px;
  font-weight:bold;
  background-color:transparent;
}
#globalTickerWrapperFloat .tickerDismiss button:hover {
	font-weight:900;
}
#globalTickerWrapperFloat .emergencyMode .tickerDismiss {
  padding-top: 5px;
  background-color:#EB0000;
}

.tickerMessage p, .tickerMessage h2{
	color: #fff !important;
	font-size:1.2em;
	}
.tickerMessage a{
	color: #fff !important;
	text-decoration:underline;
	display: inline-block;
  	position: relative;
	}
.tickerMessage a span{
	text-decoration:underline;
}

/*.tickerMessage a:after {
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-left: 9px solid #FFFFFF;
  border-bottom: 6px solid transparent;
  border-top: 6px solid transparent;
  position: absolute;
  top: 36%;
  right: -20px;
}*/

.tickerMessage a:after {
	display: inline-block;
    content: "";
    width: 12px;
    height: 12px;
    background-size: 12px;
    background-image: url('/wp-content/themes/algonquincollege2018/images/icns/icn-chevron-right-dark.png');
    background-repeat: no-repeat;
    filter: brightness(0%) invert(1);/*darken the grey image to black - invert to bright white*/
    margin: 0 0 0 8px;
    padding: 0;
    transition: 200ms linear;
}

.tickerMessage p, .tickerMessage h2{
	margin:5px !important;
}

@media screen and (min-width:960px){

    @keyframes customticker {
      0% {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
      }
      100% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
      }
    }
    
    
    /* Formatting the full-width ticker wrapper background and font color */
    .globalTickerWrapper .tickerMessageAnimationWrapper {
      width: 100%;
      margin:0 auto;
     /* max-width:1200px;*/
      overflow: hidden;
    }
    
    .globalTickerWrapper .tickerMessageAnimationWrapper:hover .tickerMessage{
      animation-play-state: paused;
    }
    
    .globalTickerWrapper.emergencyMode .tickerMessage h2, .globalTickerWrapper.emergencyMode .tickerMessage p{
        display:inline-block;
    }
    
    /* Formatting the ticker content background, font color, padding and exit state */
    .globalTickerWrapper .tickerMessageAnimationWrapper .tickerMessage {
      display: inline-block;
      white-space: nowrap;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
      -webkit-animation-timing-function: infinite;
      animation-timing-function: linear;
      -webkit-animation-name: customticker;
      animation-name: customticker;
      -webkit-animation-duration: 25s;
      animation-duration: 25s;
      animation-fill-mode: backwards;
    }
    .globalTickerWrapper .globalTickerWrapper.emergencyMode .tickerWarningIcon{
        position: absolute;
        left: -25px;
        top: 10px;
        display:block;
    }
    
    /*infinite loop version will adjust speed of animation based on width of content. Duration of scroll animation stays the same, therefore short messages move slowly, long messages move faster */
    
    @keyframes ticker {
      0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        visibility: visible;
      }
    
      100% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
      }
    }
    
    .globalTickerWrapper-infinite-loop {
     /* position: fixed;
      bottom: 0;*/
      width: 100%;
      overflow: hidden;
      background-color: rgba(#000, 0.9); 
      padding-left: 100%;
      box-sizing: content-box;
     
      padding-top: 10px;
      padding-bottom:10px;
      margin: 0 auto;
      display: block;
      clear: both;
      /*max-width: 1150px;*/

    }
    
    .globalTickerWrapper-infinite-loop:hover .tickerMessageAnimationWrapper{
      animation-play-state: paused;
    }
    
    .globalTickerWrapper-infinite-loop .tickerMessageAnimationWrapper {
        display: inline-block;
        height: auto;
        /*line-height: 4rem;  */
        white-space: nowrap;
        padding-right: 100%;
        box-sizing: content-box;
    
        -webkit-animation-iteration-count: infinite; 
                animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
                animation-timing-function: linear;
        -webkit-animation-name: ticker;
                animation-name: ticker;
        -webkit-animation-duration: 25s;
                animation-duration: 25s;
     }
     
    .globalTickerWrapper-infinite-loop .tickerMessage {
          display: inline-block;
          padding: 0 2rem;
         /* font-size: 2rem;*/
          color: #ffffff !important;   
     }
    
    /*.globalTickerWrapper-infinite-loop.emergencyMode .tickerWarningIcon{
          position: absolute;
          left: -25px;
          top: 10px;
          display:block;
     }*/
      
} 
/*end of @sceen */
