/* ---- Header ---- */

.head {
   position: relative;
   min-height: 81px;
   background: var(--ucl-pale-grey);
   color: var(--ucl-deep-purple);
   margin: 0;
/*    padding: 28px 32px 0 64px; */
   padding: 0 1em;
/*    padding: 0 64px; */
   z-index: 1;
   border-bottom: 1px solid gainsboro;
}

.headcontent {
   max-width: 1440px;
   margin: 0 auto;
}

.ucllogo {
   width: 152px;
   height: 74px;
   background: inherit;
   position: absolute;
   bottom: 0;
   padding: 0;
   float: left;
}

.ucllinks {
   display: flex;
   float: right;
   height: 81px;
/*    font-size: 12pt; */
   text-align: right;
   align-items: center;
   justify-content: center;
   margin-left: 152px;
}

.ucllinks a {
   font-weight: bolder;
}

.ucllinks ul {
   list-style-type: none;
   margin: 0;
   border-collapse: collapse;
}

.ucllinks ul li {
   display: inline;
   padding-left: 2em;
   border: none;
   border-collapse: collapse;
   margin: 0;
   white-space: nowrap;
}

.carousel {
   min-height: 200px;
}

.head a, .topBar a {
   color: var(--ucl-deep-purple);
   text-decoration: none;
}

.head a:hover, .topBar a:hover {
   color: var(--ucl-mid-purple);
   text-decoration: underline;
}

.head a:active, .topBar a:active {
   color: var(--ucl-light-purple);
}

div.carousel img.whiteLogo {
   top: 136px;
}

.navBar {
   position: relative;
   top: 0;
   background: var(--ucl-pale-grey);
   color: var(--ucl-deep-purple);
   margin: 0;
/*    padding: 28px 32px 0 64px; */
   padding: 0 1em;
/*    padding: 0 64px; */
   z-index: 2;
   border-bottom: 1px solid gainsboro;
}

.topBar {
   position: relative;
   top: 0;
   width: auto;
   max-width: 1440px;
   width:expression(document.body.clientWidth > 1440? "1440px" : "auto");
   line-height: 4ex;
   background-color: var(--ucl-pale-grey);
   color: black;
   margin: 0 auto 1ex auto;
   padding: 0;
   padding-top: 1ex;
   padding-bottom: 30px;
   vertical-align: middle;
   text-indent: 4px;
   z-index: 2;
/*    border-bottom: 1px solid gainsboro; */
}

.topBar h2 {
  margin: 0.5ex 0.5em;
}

.topBar a {
   font-weight: 600;
   text-decoration: none;
}

.topBar a:hover {
   text-decoration: underline;
}

.topBar .menu {
   max-width: 1440px;
   width:expression(document.body.clientWidth > 1440? "1440px" : "auto");
}

/* ---- Responsive screen size adjustments ---- */

@media only screen and (min-width: 900px) {

   .ucllogo {
      width: 304px;
      height: 148px;
      bottom: -5px;
   }

   .ucllinks {
      height: 155px;
      margin-left: 304px;
   }

   .head { 
      padding: 0 3.7em;
      min-height: 155px;
   }

   .navBar {
      position: sticky;
   }

   .topBar {
      padding-left: 2.7em;
      padding-right: 2.7em;
/*       position: sticky; */
   }

}

/* ---- Main title image animations ---- */

div.imageHead .uclText {
   font-size: 4.5em;
   font-weight: bold;
   color: #0066cc;
   position: absolute;
   bottom: -16px;
   right: 0.8em;
   width: 100px;
   text-align: right;
}

div.imageHead .uclText a {
   color: #0066cc;
   text-decoration: none;
}

.blockheight {
  height: 400px;
}

.crossfade > figure {
  animation: imageAnimation 30s linear infinite 0s;
  backface-visibility: hidden;
  background-size: cover;
  background-position: center center;
  color: transparent;
  height: 100%;
  max-height: 500px;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: -1;
}

.crossfade > figure:nth-child(1) {
  background-image: url('/images/header/LUX-PMTs-3000x1000.jpg');
}

.crossfade > figure:nth-child(2) {
  animation-delay: 6s;
  background-image: url('/images/header/CERN-PHOTO-201802-030-2_CDS-2302977_LHCTunnel_3000x1000.jpg');
}

.crossfade > figure:nth-child(3) {
  animation-delay: 12s;
  background-image: url('/images/header/CERN-EX-0610026-03_CDS-995912_CMSInnerTracker_3000x1000.jpg');
}

.crossfade > figure:nth-child(4) {
  animation-delay: 18s;
  background-image: url('/images/header/AWAKETunnel2017-3000x1000.jpg');
}

.crossfade > figure:nth-child(5) {
  animation-delay: 24s;
  background-image: url('/images/header/ANITALaunch-1800x600.jpg');
}

/*
.crossfade > figure:nth-child(6) {
  animation-delay: 50s;
  background-image: url('/images/header/PBTTreatmentRoom-1500x500.jpg');
}

.crossfade > figure:nth-child(7) {
  animation-delay: 60s;
  background-image: url('/images/header/ATLAS-EndCap-3000x1000.jpg');
}

.crossfade > figure:nth-child(8) {
  animation-delay: 70s;
  background-image: url('/images/header/PhotonCollision-1944x648.jpg');
}

.crossfade > figure:nth-child(9) {
  animation-delay: 80s;
  background-image: url('/images/header/AWAKESpectrometer-2017-3000x1000.jpg');
}

.crossfade > figure:nth-child(10) {
  animation-delay: 90s;
  background-image: url('/images/header/g-2Ring-3000x1000.jpg');
}

.crossfade > figure:nth-child(11) {
  animation-delay: 100s;
  background-image: url('/images/header/ATLAS-InnerCabling-3000x1000.jpg');
}

.crossfade > figure:nth-child(12) {
  animation-delay: 110s;
  background-image: url('/images/header/CruciformAndQuadDusk-2400x800.jpg');
}
 */

@keyframes
imageAnimation {
  0% {
   animation-timing-function: ease-in;
   opacity: 0;
  }
  8% {
   animation-timing-function: ease-out;
   opacity: 1;
  }
  17% {
   opacity: 1
  }
  25% {
   opacity: 0
  }
  100% {
   opacity: 0
  }
}