:root {
  --line-height: 40px;      /* The exact height of one line */
  --visible-lines: 1;       /* How many lines are visible at once */
  --total-items: 4;         /* The number of UNIQUE text lines (do not count the duplicate) */
  --pause-duration: 3s;     /* How long each line stays on screen */
  --scroll-speed: 0.4s;     /* How fast the text slides up */
}

.banner-container {
  height: calc(var(--line-height) * var(--visible-lines));
  line-height: var(--line-height);
  overflow: hidden;         /* Hides the lines waiting below */
  background-color: #111;   /* Banner background color */
  border: 0px solid #333;
}

.banner-container:hover .banner-list {
  animation-play-state: paused;
}

.banner-list {
  margin: 0;
  padding: 0;
  list-style: none;
  /* Calculate total loop time: (pause + scroll) * total unique items */
  animation: scrollUp calc((var(--pause-duration) + var(--scroll-speed)) * var(--total-items)) cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

.banner-list li {
  height: var(--line-height);
  padding: 0 15px;
  color: #fff;              /* Text color */
  font-family: sans-serif;
  font-size: 16px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;  /* Centers text horizontally */
  align-items: center;      /* Centers text vertically */
  text-align: center;       /* Ensures multi-word wrapped text stays centered */
}

/* The engine driving the vertical loop */
@keyframes scrollUp {
  /* 0% to 20%: First line stays still */
  0%, 20% {
    transform: translateY(0);
  }
  /* 25% to 45%: Second line stays still */
  25%, 45% {
    transform: translateY(calc(-1 * var(--line-height)));
  }
  /* 50% to 70%: Third line stays still */
  50%, 70% {
    transform: translateY(calc(-2 * var(--line-height)));
  }
  /* 75% to 95%: Fourth line stays still */
  75%, 95% {
    transform: translateY(calc(-3 * var(--line-height)));
  }
  /* 100%: Quickly transitions to the duplicate line, resetting instantly */
  100% {
    transform: translateY(calc(-4 * var(--line-height)));
  }
}



/* 1. THE VIEWPORT: A clean box that fills your layout and hides spilling text */
.my-production-ticker {
  width: 100%;
  overflow: hidden;
  background-color: #111111;
  padding: 12px 0; /* Keeps your preferred taller background */
  box-sizing: border-box;
  display: flex;
}

/* 2. THE TRACK: Holds both groups inline and calculates a pure, simple loop */
.my-ticker-mover {
  display: flex;
  width: max-content;
  flex-shrink: 0;
  /* Adjust 30s to make it slower (e.g., 40s) or faster (e.g., 20s) */
  animation: mySimpleLoop 30s linear infinite;
  will-change: transform;
}

/* 3. THE GROUPS: Formats the text blocks into a rigid, un-crashable row */
.my-ticker-group {
  display: flex;
  flex-shrink: 0;
}

/* 4. THE TEXT PHRASES: Scaled up to your larger font size preference */
.my-ticker-msg {
  padding: 0 80px; /* The exact uniform gap separating the announcements */
  color: #ffffff;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1.8rem; /* Keeps your preferred larger font size */
  font-weight: bold;
  white-space: nowrap;
}

/* Colors to make them stand out */
.my-c1 { color: #ffffff; }
.my-c2 { color: #ffffff; }
.my-c3 { color: #ffffff; }

/* Pauses the banner completely if a user hovers their mouse over it */
.my-ticker-mover:hover {
  animation-play-state: paused;
}

/* --- THE CLEANEST LOOP ENGINE --- */
@keyframes mySimpleLoop {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    /* Shifts precisely by one identical set, hiding the loop reset completely */
    transform: translate3d(-50%, 0, 0); 
  }
}

  
small {
    display: block;
    color: #777;
    font-size: 12px;
    line-height: 15px;
}

.panel.news {
    border: 0px solid #fff;
    border-radius:0;
    transition: box-shadow 0.5s;
}

.panel-heading.news {
    background-color: #141414 !important;
	color: #e0e0e0 !important;
	font-size: 20px;
	font-weight: bold;
	padding: 2px;
}

.panel-body.news {
    background-color: #141414 !important;
	color: #000000;
	padding: 0px;
	font-family: Inconsolata;
}

.panel-body.news .btn {
    border: 0px solid #777;
    margin: 0px 0;
	padding: 0px;
	font-size: 20px;
    background-color: #141414;
    color: #777;
}

.panel-body.news .btn:hover {
    border: 0px solid #fff;
    color: #fff;
	
}

.panel-footer.news {
    background-color: #fff !important;
	color: #000000;
	padding: 10px 26px 4px 26px;
	font-family: Inconsolata;
}

.panel-body.news.left {
    background-color: #141414 !important;
	color: #000000;
	padding: 0px;
	max-height: 464px;
}

.panel-body.news.right {
    background-color: #fff !important;
	color: #000000;
	padding: 14px 30px 0px 30px;
	max-height: 464px;
	overflow-y: scroll;
	text-align: justify;
	font-family: Inconsolata;
}
  
.panel {
    border: 0px solid #fff;
    border-radius:0;
    transition: box-shadow 0.5s;
}

.panel-body {
    background-color: #141414 !important;
	padding: 0px 15px 15px 15px;
}

.panel-footer .btn:hover {
    border: 1px solid #fff;
    background-color: #141414 !important;
    color: #fff;
}

.panel-heading {
    color: #c3c3c3 !important;
    background-color: #141414 !important;
    padding: 10px 15px 10px 15px;
    border-bottom: 0px solid transparent;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.panel-footer {
    background-color: #141414 !important;
	border-radius: 0;
	border-top: 0px solid transparent;
}

.panel-footer h3 {
    font-size: 32px;
}

.panel-footer h4 {
    color: #aaa;
    font-size: 14px;
}

.panel-footer .btn {
    border: 1px solid #777;
    margin: 15px 0;
	padding: 8px;
    background-color: #141414;
    color: #777;
	font-size: 11px;
	font-weight: bold;
	letter-spacing: 1px;
}
  
  body {
      font: 400 15px/1.6 Montserrat, sans-serif;
      color: #777;
      background: #000000;
  }
  h3, h4 {
      margin: 30px 0 30px 0;
      letter-spacing: 10px;      
      font-size: 20px;
      color: #fff;
  }
  h5 {
      color: #ffffff;
	  font-size: 20px;
	  font-weight: bold;
	  padding: 0px;
}

  h6 {
      color: #d5d5d5;
	  font-size: 18px;
	  font-style: italic;
}


  .carousel-inner img {
      /* -webkit-filter: grayscale(90%); */
      /* filter: grayscale(90%); /* /* make all photos black and white */ 
      width: 100%;
      margin-top: 55px;
  }
  .carousel-caption h3 {
      color: #fff !important;
      margin-bottom: 2%;
	  display: none;
  }
  .carousel-caption {
      display: none;
}

  
  .bg-1 {
      background: #2d2d30;
      color: #bdbdbd;
  }
  .bg-1 h3 {color: #fff;}
  .bg-1 p {font-style: italic;}
  .list-group-item:first-child {
      border-top-right-radius: 0;
      border-top-left-radius: 0;
  }
  .list-group-item:last-child {
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
  }
  .thumbnail {
      padding: 0 0 0 0;
      border: 1 #fff;
      border-radius: 0;
  }
  .btn {
      padding: 10px 20px;
      background-color: #333;
      color: #f1f1f1;
      border-radius: 0;
      transition: .2s;
  }
  .btn:hover, .btn:focus {
      border: 1px solid #333;
      background-color: #fff;
      color: #000;
  }
  .nav-tabs li a {
      color: #777;
  }
  .navbar {
      font-family: Montserrat, sans-serif;
      margin-bottom: 0;
      background-color: #141414;
      border: 0;
      font-size: 13px !important;
      letter-spacing: 4px;
      opacity: 1;
      min-height: 25px;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
  }
    .navbar .nav-item i {
		font-size: 20px;
  }
  .navbar-brand {
      font-family: Anton;
  }
  
  .navbar li a, .navbar .navbar-brand { 
      color: #d5d5d5 !important;
	  line-height: 25px;
  }
  .navbar-nav li a:hover {
      color: #fff !important;
      background-color: #555 !important;
  }
  .navbar-nav li.active a {
      color: #fff !important;
      background-color: #141414 !important;
  }
  .navbar-default .navbar-toggle {
      border-color: transparent;
  }
  .open .dropdown-toggle {
      color: #fff;
      background-color: #555 !important;
  }
  .dropdown-menu li {
      color: #000 !important;
	  font-size: 14px;
	  letter-spacing: 1px;
  }
  .dropdown-menu li a {
      color: #000 !important;
	  font-size: 14px;
	  letter-spacing: 1px;
  }
  .dropdown-menu li a:hover {
      background-color: #141414 !important;
  }

  footer {
      background-color: #141414;
      color: #c3c3c3;
      padding: 32px;
  }
  footer a {
      color: #f5f5f5;
  }
  footer a:hover {
      color: #777;
      text-decoration: none;
  }  
  .form-control {
      border-radius: 0;
  }
  textarea {
      resize: none;
  }




/* 👇 RESPONSIVE MOBILE SETTINGS 👇 */
@media screen and (max-width: 767px) {
  /* Shrinks the container height slightly on phones */
  .my-production-ticker {
    padding: 12px 0; 
  }

  /* Shrinks the text size and tightens the spacing so it fits portrait screens */
  .my-ticker-msg {
    font-size: 1.4rem; /* Drops from 2rem down to 1.2rem */
    padding: 0 40px;   /* Tightens the physical gap between blocks from 80px to 40px */
  }
.dropdown-menu li a {
      
    color: #fff !important;
	  font-size: 14px;
	  letter-spacing: 1px;
  }
.dropdown-menu li a:hover {
color: #000000 !important;      
background-color: #fff !important;
  }
}