@charset "UTF-8";
/* CSS Document */

/* new homepage horizontal bands */
 /* SWAPPED PURPLE FOR BLACK AND GREEN FOR GRAY 7/26/2023 */

.grayband { /* background-color: #838383; */
         /*  background-color: #222;
           background-image: linear-gradient(#898278, #6B645B) !important; */
          background-image: url('/img/Spieker_bw.jpg');
          background-size: cover;
}
.grayband2 { 
          background-image: url('/img/2.MatM_Stent_Evening.jpg');
          background-size: cover;
}

.blackband { /* background-color: #000000; */
             background-color: #18173B;
           background-image: linear-gradient(#a15d60, #AB2328) !important;

           }

.sticky-images {
    position: -webkit-sticky;
    position: sticky;
    top: 0; 
    margin-top: 70px;
   }
.sticky-zone { min-height: 650px;}

.rightband, .leftband {min-height: 400px; margin: 50px auto; width: 1175px; position: relative;}

.rightband img {max-width: 575px; position:absolute; left:600px; z-index: 1; border-radius:16px; }
.leftband img {max-width: 575px; position: absolute; left:0;  z-index: 1; border-radius:16px; }

.rightband h1 {position:absolute; left: 20px; width: 760px; font-size: 60px; color: white; z-index: 2; font-weight: 500; line-height: 1em;}
.leftband h1 {position:absolute; left: 600px; width: 675px; font-size: 60px; color: white; z-index: 2; font-weight: 500; line-height: 1em;}

.rightband p {position:absolute; left: 20px; top: 150px; width: 525px; font-size: 22px; color: white; z-index: 2; font-weight: 300; line-height: 1.4em; }
.leftband p {position:absolute; left: 600px; top: 150px; width: 525px; font-size: 22px; color: white; z-index: 2; font-weight: 300; line-height: 1.4em;  }

.bandbutton { 
   height: 50px;
   background-color: rgb(225, 138, 30);;
   font-weight: 500; 
   font-style: normal;
   font-size: 24px;
   color: #ffe5e5;
   -moz-border-radius: 2px !important;
   -webkit-border-radius: 2px !important;
   border-radius: 2px;
   margin: 12px 0 0 10px;
   position: absolute; 
   top: 320px;
   padding: 6px 20px;   
   border: none;
   display: inline-block;
  } 

.bandbutton:hover {color: #ffffff !important;}

.rightband .bandbutton {
  left: 20px;
}
.leftband .bandbutton {
  left: 920px;
}

/* special classes / ID for institute pages */

#institute-article h2.aux { margin: 0 -400px 10px 0 !important; }
#institute-article p { margin: 0 -300px 10px 0 !important; }

/* Video page hide mobile nav on desktop */

#videoTopMobileNav { display: none; visibility: hidden; }

img.videoThumbFix {
  width: auto;
  height: auto;
  max-width:  100%;
}

/* staff photos on contacts page */ 

.staff-photo 
{ float:left; 
margin: 20px 20px 20px 0; 
width: 250px; }
.staff-photo img {
  
  margin-bottom: 6px;
  width: 250px;
  height: 250px;
}

/* fade in health banner */

#health-banner {
  width: 100%;
   background-color: #AB2328; 
  color: white;
  text-align: center;
  padding: 10px;
  font-size: 1.25em;
}
#health-banner a { color: white; font-weight: 600; }

.fade-in-text {
   animation: fadeIn linear 2s;
  -webkit-animation: fadeIn linear 2s;
  -moz-animation: fadeIn linear 2s;
  -o-animation: fadeIn linear 2s;
  -ms-animation: fadeIn linear 2s;
}

/* animated Down Arrow under video */

.down-arrow {
  position: absolute;
  top: calc(100vh - 90px);
  left: calc(50% - 14px);
  width: 0;
  height: 30px;
  border: 2px solid #AB2328;
  border-radius: 2px;
  animation: jumpInfinite 1.5s infinite;
}

.down-arrow:after {
  content: " ";
  position: absolute;
  top: 12px;
  left: -8px;
  width: 16px;
  height: 16px;
  border-bottom: 4px solid #AB2328;
  border-right: 4px solid #AB2328;
  border-radius: 4px;
  transform: rotateZ(45deg);
}
@keyframes jumpInfinite {
  0% {
    margin-top: 0;
  }
  50% {
    margin-top: 20px;
  }
  100% {
    margin-top: 0;
  }
}

/* end animated arrow */


.comingEvents { margin: 20px 0 50px 0; width:100%; }

.frontButton {
  
  max-width: 396px; 
  max-height: 396px;
  margin-right: 12px;
  padding-bottom: 15px;
  float: left;
  
}
@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}
/* front page images get the star class to fade in. */

.star {
    visibility: hidden;
}

.fadeIn {
    -webkit-animation: animat_show 2s;
    animation: animat_show 2.4s;
    visibility: visible !important;
}

@-webkit-keyframes animat_show{
    0%{opacity:0}
    100%{opacity:1}
}
h2.special {background:transparent; color:  #AB2328; text-align:center;}

.deactivated-menu-item {color:black !important; font-style: italic;}
h3.coming-events-buttons,
h3.square-buttons {
  font-family: 'Noto Sans', sans-serif; 
  font-weight: 600; 
  font-style: normal;
  text-transform: uppercase !important;
  font-size: 26px;
  line-height: 29px;
  letter-spacing: 2.5px;
  color: #000;
  border-bottom: 2px solid #e0e0e1;
  margin: 0;
  margin-bottom: 5vh;
  margin-top: 30px;
  padding: 0;
}
.prefooter {  margin-top: 10vh; }
a {
  color: #AB2328;
  text-decoration: none;
}
a:hover,
a:focus {
  color: #C02A26;
  text-decoration: none;
}
blockquote {
    margin: 0 0 20px;
    padding: 10px 20px;
}

a.fff-link { color: white !important; font-weight:700; }
a.fff-link:hover { color: rgb(240, 226, 226) !important; }
a.fff-link::after { content: " »" !important; }

.articleImages > img {
	
    max-width:385px;
    height:auto;
    margin: 5px 0;
}

b {color: #606060; }
/* tables */
table { background-color: #e2e2e2; background-image:linear-gradient(#efefef, #e2e2e2); margin:20px 0px;}
tr {border-bottom: 1px solid white; }
td {vertical-align: top; color:##606060; font: normal 16px/24px 'Noto Sans', sans-serif; font-weight: 500; padding:10px; border-right: 1px solid white; }

.greyback {padding: 10px 10px 10px 10px !important; background-color: #cacaca !important; }
.cdDetails {
	
  background-color: #f3f2f3;
  color:##606060;
  font: normal 14px/18px 'Noto Sans';
  font-weight: 500;
  padding: 15px;
}

.frontNote {
	
  color:#AB2328;
  font-family: 'Noto Sans'; 
  font-weight: 500; 
  font-style: normal;
  line-height:1.7em;
  margin:auto; 
  width: 80%;
  margin-top: 30px;

}
.vlplayer {  }
#VLcoming {

animation: hide 1s linear 4s 1 forwards; 

}
@keyframes hide {
    to {
        opacity: 0;
    }
}

.button3 {background-color: #E18A1E; color:white; font-weight: bold;} /* Red */ 
.button4 {background-color: #E18A1E; color:white; padding: 6px 18px; font-size: 18px; } /* Red */ 
.button4:hover {background-color: #E18A1E; color:rgb(255,255,255,0.8); border-radius: 4px; } /* Red */ 


.pay { color: black !important; }

.no-bottom-padding {
	
	padding: 0 !important;s
	
}
.floater { float: left; margin: 0 10px 0 0; }

.scrollable-menu {
    height: auto;
    max-height: 290px;
    overflow-x: hidden;
}

.DailyScroll {

  max-height: 300px !important;
  overflow-y: scroll	 !important;

}
.main-filter { display: none; }
.breadc-filter-block  { display: none; }
.sm_caps { text-transform: uppercase; }

.image-shadow {box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);}

h3 .read-more-arrow {
      display: inline-block;
      background: url(../img/arrow-red.png) 0 0 no-repeat;
      width: 20px;
      height: 18px;
      margin: 0 0 -2px 4px;
    }

.slider-venue-wrapper {
	visibility: hidden;
	max-height: 0;
	min-height:0;
}
.change-bg {
  background-color: transparent;
  transition: background-color 0.3s ease;
  /* Add other styling as needed */
  width: 100%;
  padding: 20px;
  color: white;
}

/* Add this class via JavaScript when scrolled past 200px */
.scrolled {
  background-color: rgba(3,19,33,.9);
}


header .alt .dropdown-menu {
  width: 100%;
 /* background: url(../img/bg-dropdown-filter.png); */
 background-color: rgba(0, 0, 0, 0.5);
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  border: none;
  padding: 4px 6px 10px 6px;
  -webkit-box-shadow: none;
  box-shadow: none;
}
header .alt .dropdown-menu>li>a {
  font-family: 'Noto Sans', sans-serif; 
  font-style: normal;
  text-transform: uppercase;
  line-height: 24px;
  letter-spacing: 0.4px;
  color: #fff;
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
  padding: 1px 0 0;
}
header .alt .dropdown-menu>li:first-child>a {
  padding: 0;
}
header .alt .dropdown-menu>li:last-child>a {
  border-bottom: none;
}
header .alt .dropdown-menu>li>a.open{
  line-height: 18px;
  color: #000;
}
header .alt .dropdown-menu>li>a.open .read-more-indicator {
  display: inline-block;
  background: url(../img/gray_arrow_down.png) 0 0 no-repeat;
  width: 11px;
  height: 13px;
  position: absolute;
  right: 7px;
  top: 4px;
}
header .alt .dropdown-menu>li>a:hover {
  color: #000;
  background: none;
}
header .alt .dropdown-menu .sub-menu {
  list-style-type: none;
  margin: 3px 0 0 -1px;
  padding: 0;
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
}
header .alt .dropdown-menu li:last-child .sub-menu {
  border-bottom: none;
}
header .alt .dropdown-menu .sub-menu>li {
  margin: 0 0 2px;
}
header .alt .dropdown-menu .sub-menu>li>a {
 /* text-transform: capitalize; */
  font-size: 18px;
  line-height: 19px;
  font-family: 'Noto Sans', sans-serif; 
  font-weight: 600; 
  font-style: normal;
  letter-spacing: -0.18px;
  color: #fff;
}
header .alt .dropdown-menu .sub-menu .open>a,
header .alt .dropdown-menu .sub-menu>li>a:hover,
header .alt .dropdown-menu .sub-menu>li>a:active {
  color: #000;
  text-decoration: none;
}
header .alt .dropdown-menu .sub-menu .divider {
  height: 2px;
  margin: 0;
  background: none;
  padding: 0px;
  border-top: 2px dotted #fff;
  position: relative;
  top: 0;
}
header .alt .dropdown-menu .sub-menu .sub-sub-menu {
  list-style-type: none;
  padding: 0 0 0 28px;
  margin: 0;
}
header .alt .dropdown-menu .sub-menu .sub-sub-menu>li>a {
  font-size: 15px;
  line-height: 18px;
  font-family: 'Noto Sans'; font-weight: 500; font-style: italic;
  color: #fff;
}
header .alt .dropdown-menu .sub-menu .sub-sub-menu>li>a:hover,
header .alt .dropdown-menu .sub-menu .sub-sub-menu>li>a:hover {
  color: #000;
  text-decoration: none;
}

.dropdown-menu > li > a { padding: 4px;}
  .navbar-default .navbar-toggle .icon-bar {
  background-color: #AB2328;
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { color:#AB2328; }
.menuButton {
  height: 42px;
  width: 42px;
  background-image:url(/img/tickets_icon.svg);
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  font-weight: 600; 
  font-style: normal;
  font-size: 12px;
  color: #ffe5e5;
  -moz-border-radius: 4px !important;
  -webkit-border-radius: 4px !important;
  border-radius: 4px;
  margin: 12px 10px;
  position: relative; 
  display: inline-block;
 float: right;
 clear: right; 
 z-index: 120;
/*   display:none;  */
}
.menuButton:hover {background-color: #E18A1E !important;}

.alt .menuButton {
  height: 42px;
  width: 42px;
 background-image:url(/img/tickets_icon.svg);
 background-position: center; /* Center the image */
 background-repeat: no-repeat; /* Do not repeat the image */
 background-size: cover; /* Resize the background image to cover the entire container */
   font-weight: 600; 
  font-style: normal;
  font-size: 12px;
  color: #ffe5e5;
  -moz-border-radius: 4px !important;
  -webkit-border-radius: 4px !important;
  border-radius: 4px;
  margin: 12px 10px;
  position: relative; 
  padding: 3px 3px;
  border: none;
 display: inline-block;
 float: right;
 clear: right; 
 z-index: 120;
/*   display:none;  */
}
.menuButton:hover {color: #E18A1E !important;}

ul { margin-top: 0; }

.container-alt {width: 80vw; 
  position:relative;
  left:50%;
  transform: translateX(-50%);
  top: 0;
z-index: 120; }
  
.vid-contain {
  width:1180px; height:663px;
  position:relative;
  left:50%;
  transform: translateX(-50%);
  top: 0;
  display:inline-block;
  margin:0;
  overflow: hidden;
}
.vid video {
  width:1180px; height:663px;
  position: absolute;
  margin-top:0;
  object-fit: cover;
  z-index: 0;
 /* opacity: 0.5;
  -webkit-filter:grayscale(90%);
  filter:grayscale(90%);
 */
}
.vid-contain-alt {
  width:100vw; height:55vw;
  position:relative;
  left:50%;
  transform: translateX(-50%);
  top: 0;
  display:inline-block;
  margin:0;
  overflow: hidden;
}
.vid-alt video {
  width:100vw; height:50vw;
  position: absolute;
  margin-top:0;
  object-fit: cover;
  z-index: 0;
 /* opacity: 0.5;
  -webkit-filter:grayscale(90%);
  filter:grayscale(90%);
 */
}
.content-over-video {
  position:relative;
  left: 50%;
  transform: translateX(-50%);
  top:80%;
  background-color: black;
  max-width: 650px;
  padding: 0px;
}
.content-over-jpg {
  position:relative;
  left: 2vw;
  top:10vw;
  width: 50vw;
  padding: 0px;
  color:white;
}

.mobile-content-over-jpg { display:none;  }

.content-over-jpg > .date {
  font-size: 1.3em; 
  line-height: 1.8em; 
  padding-bottom: 5px;
}
.content-over-jpg > .title {
  font-family: Georgia; 
  font-size: 2.6em; 
  line-height: 1.2em;
  margin: 14px 0 14px 0;
}
.content-over-jpg > .sub {
  font-family: Georgia; 
  font-size: 1.3em; 
  line-height: 2em;
  padding-top: 12px;
}


.vid-index {
  min-width: 1200px !important;
  padding: 0 0 0 0 !important;
}
.alt-button { 
    height: 40px;
    font-weight: 600; 
    font-style: normal;
    font-size: 1.2em;
    color: #FFFF;
    border: 2px solid #E18A1E;
    -moz-border-radius: 3px !important;
    -webkit-border-radius: 3px !important;
    border-radius: 3px;
    margin: 0;
    position: relative; 
    padding: 6px 20px;
  display: inline-block;
  /*   float: left; */
   z-index: 20;
   background-color: rgba(142,142,142,0.5)
 }

.alt-button:hover {
   color: #ffffff !important;
   background-color: rgba(225, 138, 30,1.0)
  }

header .alt .navbar {
  float: left;
  margin: 0 0 0 2px;
  background-color: #e7e8e9;
  border: none;
}
header .alt .navbar .navbar-collapse {
  float: left;
  padding: 0;
  border: none;
}
header .alt  ul {}
header .alt  ul li {
  
}
header .alt  ul li a {
  text-transform: uppercase;
  color: #fff;
  line-height: 64px;
  padding: 0 12px;
  font-size: 16px;
  height: 60px;
font-family: 'Noto Sans', sans-serif;
font-weight: 500;
}
header .alt  ul li .active {
  color: #AB2328;
}
header .alt  ul li a:visited {
  background: transparent; 
}
 
 header .alt .dropdown {
   background: transparent !important;
   margin-right:5px;
 }
 header .alt .dropdown>a:hover,
 header .alt .dropdown>a:active,
 header .alt .navbar ul>li>a:hover,
 header .alt .navbar ul>li>a:active {
   color: rgba(255, 255, 255, 0.497);
   background: transparent;
 }
 
 header .alt .dropdown:hover .dropdown-toggle,
 header .alt .dropdown:focus .dropdown-toggle {
   background: transparent url(../img/navbar-arrow.png) center 40px no-repeat;
 }
 header .alt ul li .dropdown-menu {
   position: absolute;
   border: none;
   /* background: url(../img/navbar-dropd-bg.png); */
   background-color: rgba(0, 0, 0, 0.497)
   margin-top: 0px;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
   border-radius: 0;
   margin-left: 10px;
   padding: 10px 10px 2px 10px;
 }
 header .alt ul li .dropdown-menu {
   width: 278px;
 }
 header .alt ul li .dropdown-menu>li {
   width: 263px;
   float: left;
   margin: 0 0 10px 0;
 }
 header .alt ul li .dropdown-menu>li:last-child {
   margin: 0;
 }
 header .alt ul li .dropdown-menu.full-info>li {
   margin: 0 0 10px 10px;
 } 
 header .alt ul li .dropdown-menu.full-info>li:first-child {
   margin: 0;
 }
 header .alt ul li .dropdown-menu.full-info>li:nth-last-child(1),
 header .alt ul li .dropdown-menu.full-info>li:nth-last-child(1) {
   margin-bottom: 0;
 }
 
 header .alt ul li .dropdown-menu>li>a {
   height: auto;
   line-height: 24px;
   padding: 0;
 
 }
 header .alt ul li .dropdown-menu>li>.link-wrapper {
   height: auto;
 }
 header .alt  ul li .dropdown-menu>li>.link-wrapper>a {
   padding: 0;
   line-height: 24px;
   font-size: 13px !important;
   color: #fff;
 }
 header .alt ul li .dropdown-menu>li>.link-wrapper>a:hover{
   color:rgba(255, 255, 255, 0.8);
 }
 header .alt  ul li .dropdown-menu li>div>.img-wrapper {
   width: 263px;
   height: 94px;
   overflow: hidden;
 }
 header .alt  ul li .dropdown-menu li>div>.img-wrapper>img {
   width: 100%;
 
 }
 
 header .alt ul li .dropdown-menu li>div>.sub-menu {
   padding: 0;
   margin: 0;
   list-style-type: none;
 }
 header .alt ul li .dropdown-menu li>div>.sub-menu>li>a {
   text-transform: uppercase;
   margin: 0 0 7px;
   display: block;
   border-bottom: 2px solid #a7a8ab;
   color: #606060;
   font: normal 15px/18px 'Noto Serif', serif;
   font-weight: 700;
   letter-spacing: 0.75px;
   height: auto;
   padding: 2px 0 0px 0px;
 }
 header .alt ul li .dropdown-menu li>div>.sub-menu>li>a:hover {
   color: #AB2328;
   text-decoration: none;
 }
 header .alt ul li .dropdown-menu li>div>.sub-menu>li:first-child>a {
   padding: 8px 8px 4px 0px;
   margin: 0;
   font-size: 20px;
     line-height: 20px;
     font-family: 'Noto Sans', sans-serif; 
     font-weight: 600; 
     font-style: normal;
   letter-spacing: 1px;
 }
 header .alt ul li .dropdown-menu li>div>.sub-menu .sub-sub-menu {
   margin: 0;
   padding: 3px 0 0 0;
   list-style-type: none;
 }
 header .alt  ul li .dropdown-menu li>div>.sub-menu .sub-sub-menu>li {
   float: left;
   display: inline-block;
   padding: 0 0 4px 0px;
 }
 header .alt ul li .dropdown-menu li>.event-calendar-block>.sub-menu .sub-sub-menu>li {
   padding: 0 0 1px 0px;
 }
 header .alt ul li .dropdown-menu li>div>.sub-menu .sub-sub-menu>li>a {
   font: normal 13px/18px 'Noto Serif', serif;
   font-weight: 500;
   letter-spacing: 0.7px;
   text-transform: capitalize;
   color: #606060;
   padding: 0 6px 0 0;
   height: auto;
 }
 
 header .alt ul li .dropdown-menu li>div>.sub-menu .sub-sub-menu>li>a:hover,
 header .alt ul li .dropdown-menu li>div>.sub-menu .sub-sub-menu>li>a:active {
   text-decoration: none;
   color: #AB2328;
 }
 header .alt ul li .dropdown-menu li>div>.sub-menu .sub-sub-menu>li>a:after {
   content: "|";
   font-size: 15px;
   position: relative;
   top: 0px;
   left: 3px;
 }
 header .alt ul li .dropdown-menu li>div>.sub-menu .sub-sub-menu>li>a:hover:after {
   color: #606060;
 }
 header .alt ul li .dropdown-menu li>div>.sub-menu .sub-sub-menu>li:last-child>a:after {
   content: '';
 }
@media screen and (min-width: 937px) and (max-width: 1023px) {
.change-bg { background-color: rgb(0,0,0);}

header img { display: block;
  width: 33vw;
  margin-top: 15px;
  height: auto !important;
}
}
@media screen and (min-width: 641px) and (max-width: 936px) {
header img { display: block;
  width: 32vw;
}
.change-bg { background-color: rgb(0,0,0);}
.navbar-default .navbar-toggle.collapsed .icon-bar {
  background-color: #AB2328;
}

#videoTopMobileNav { display: block; visibility: visible; padding-top: 10px; margin-top: 10px; overflow: visible; }
#desktopMenu ul {display:none; visibility: hidden;}

.rightband, .leftband {min-height: 500px; margin: 20px 0; width: 90vw; }

.rightband img {width: 100vw;  position: static; }
.leftband img {width: 100vw;   position: static; }
 
.rightband h1 {width: 90vw; margin-left: 5vw; font-size: 38px; color: white; font-weight: 500; line-height: 1em; position: static;}
.leftband h1 {width: 90vw; margin-left: 5vw; font-size: 38px; color: white; font-weight: 500; line-height: 1em; position: static;}
 
.rightband p {width: 90vw; margin-left: 5vw; font-size: 20px; color: white; font-weight: 300; line-height: 1.2em;  position: static; }
.leftband p {width: 90vw; margin-left: 5vw; font-size: 20px; color: white; font-weight: 300; line-height: 1.2em;  position: static; }
.bandbutton { position: static; }

 /* animated Down Arrow under video */
 
 .down-arrow {
   display: none }
 
 .down-arrow:after {
   display:none;
 }
 /* end animated arrow */
  
   
  .comingEvents, .buttonTrio  { width: 97%; margin-left: 1%; }
 h3.coming-events-buttons,
 h3.square-buttons,
 .prefooter {
   margin-bottom: 5vh;
   margin-top: 5vh;
   font-size:23px;
  }
 .frontButton {
     
     max-width: 33vw; 
     max-height: 33vw;
     min-width: 30vw;
     min-height: 30vw;
     margin-right: 1vw;
     padding-bottom: 15px;
     float: left;
     
   }
   
   h3 { font-size: 20px;  width: 80%; }
  .vid-contain { display:none !important;
  }
  
  .vid-contain-alt {
    width:100vw; height:60vw;
    position:relative;
    left:50%;
    transform: translateX(-50%);
    top: 0;
    display:inline-block;
    margin:0;
    overflow: hidden;
  }
  .vid-alt video {
    width:100vw; height:60vw;
    position: absolute;
    margin-top:0;
    object-fit: cover;
    z-index: 0;
   /* opacity: 0.5;
    -webkit-filter:grayscale(90%);
    filter:grayscale(90%);
   */
  }

 .content-over-video {
   position:relative;
   left: 50%;
   transform: translateX(-50%);
   top:40vw;
   max-width: 80vw;
   padding: 0px;
 } 
  .content-over-jpg > .sub {
    font-family: Georgia; 
font-size: 1em;
    line-height: 2em;
    padding-top: 12px;
  }

.alt-button { 
   font-size: 0.9em;
   font-weight: 600;
   height: 30px;
    font-weight: 600; 
    font-style: normal;
     color: #FFFF;
    -moz-border-radius: 3px !important;
    -webkit-border-radius: 3px !important;
    border-radius: 3px;
    border-color:  rgb(225, 138, 30);
    margin: 12px 12px 0 10px;
    position: relative; 
    padding:4px 15px;
display: inline-block;
  float: left;
   z-index: 20;
   background-color: rgba(142,142,142,0.5)
 }

.alt-button:hover {
   color: #ffffff !important;
   background-color: rgba(225, 138, 30,1.0)
  }

header .alt img { display: block;  width: 33vw; margin-top: 15px;  height:auto !important; }
.navbar-nav .open .dropdown-menu {background-color:  #aaa; padding-left: 24px; }
.navbar-nav .open .dropdown-menu li {padding: 4px; }
.navbar-nav .open .dropdown-menu li:hover {background-color:  #ddd; }
.navbar-default .navbar-nav > li > a { background-color: #DDD;}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { background-color: #ccc;}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #AB2328;
}


}


@media screen and (min-width: 0px) and (max-width: 640px) {
header img { display: block;
  width: 42vw;
}
.change-bg {
  background-color: rgb(0,0,0,1);
}

.navbar-nav, .special {display: none; visibility: hidden; }
.event-detail-main .nav.navbar-nav  {display: none; }
.change-bg .container .content .navbar  { background-color: transparent; }
.change-bg .container .content .navbar .navbar-collapse {
   background-color: rgba(256,256,256,.9);}
   
.change-bg .navbar-default .navbar-toggle .icon-bar {
  background-color: #AB2328;
}
.change-bg .navbar-default .navbar-toggle.collapsed .icon-bar { 
  background-color: #fff;
    
  }
.navbar-default .navbar-toggle .icon-bar {
  background-color: #AB2328;
}

.content-over-jpg { visibility: hidden; }

.mobile-content-over-jpg {
  visibility: visible;
  display: block;
  position:absolute;
left: 2vw;
top:90vw;
width: 100vw;
padding: 0px;
color:white;
text-align: center;
 }
 
 .mobile-content-over-jpg > .date {
   font-size: 1.8em; 
   line-height: 1.4em; 
   font-color: white;
   font-weight: 300;
 }
 .mobile-content-over-jpg > .title {
    font-size: 2em; 
    line-height: 1.5em;
    font-color: white;
    font-weight: 500;
     
  }
.mobile-content-over-jpg > .sub {
   font-size: 1em; 
    line-height: 1.2em; 
    font-color: white;
     
  }
.mobile-content-over-jpg > .alt-button {
  
  background-color:
  
}


#videoTopMobileNav { display: block; visibility: visible; padding-top: 10px; margin-top: 10px; overflow: visible; }
#desktopMenu ul {display:none; visibility: hidden;}
.no-mobile { display:none; visibility: hidden; }

.navbar-nav .open .dropdown-menu {background-color:  #aaa; padding-left: 24px; }
.navbar-default .navbar-nav > li > a{ background-color: #DDD;}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { background-color: #ccc;}


.rightband, .leftband {min-height: 500px; margin: 20px 0; width: 90vw; }

.rightband img {width: 100vw;  position: static; }
.leftband img {width: 100vw;   position: static; }
 
.rightband h1 {width: 90vw; margin-left: 5vw; font-size: 38px; color: white; font-weight: 500; line-height: 1em; position: static;}
.leftband h1 {width: 90vw; margin-left: 5vw; font-size: 38px; color: white; font-weight: 500; line-height: 1em; position: static;}
 
.rightband p {width: 90vw; margin-left: 5vw; font-size: 20px; color: white; font-weight: 300; line-height: 1.2em;  position: static; }
.leftband p {width: 90vw; margin-left: 5vw; font-size: 20px; color: white; font-weight: 300; line-height: 1.2em;  position: static; }
.bandbutton { position: static; }

.comingEvents, .buttonTrio { width: 97%; margin-left: 1%; }

h3.coming-events-buttons,
h3.square-buttons, .prefooter {
  margin-bottom: 5vh;
  margin-top: 5vh;
  font-size:19px;
 }

 #institute-article p { margin: 0 0 10px 0 !important; }
 #institute-article h2.aux { margin: 0 0 10px 0 !important; }
 /* animated Down Arrow under video */
  
  .down-arrow {
    display: none }
  
  .down-arrow:after {
    display:none;
  }
  /* end animated arrow */

.frontButton {
  
  max-width: 33vw; 
  max-height: 33vw;
min-width: 30vw;
min-height: 30vw;
  margin-right: 1vw;
  padding-bottom: 15px;
  float: left;
  
}
    footer .footer-content .container,
footer .footer-bottom-content .container {
  padding-left: 2%;
  padding-right: 2%;
}

h3 { font-size: 18px;  width: 80%; }
   .vid-contain { display:none !important;
}
  .vid-contain-alt {
    width:100vw; height:160vw;
    position:relative;
    left:50%;
    transform: translateX(-50%);
    top: 0;
    display:inline-block;
    margin:0;
    overflow: hidden;
    background-image:url('/img/26season-mobile.jpg') !important;
    
  }
  .vid-alt video {
    width:100vw; height:60vw;
    position: absolute;
    margin-top:0;
    object-fit: cover;
    z-index: 0;
   /* opacity: 0.5;
    -webkit-filter:grayscale(90%);
    filter:grayscale(90%);
   */
  }

 .content-over-video {
   position:relative;
   left: 50%;
   transform: translateX(-50%);
   top:150px;
   background-color: black;
   max-width: 80vw;
   padding: 0px;
 } 
 
 .alt-button { 
    font-size: 0.9em;
    font-weight: 600;
    height: 30px;
     font-weight: 600; 
     font-style: normal;
      color: #FFFF;
     -moz-border-radius: 3px !important;
     -webkit-border-radius: 3px !important;
     border-radius: 3px;
     border-color:  rgb(225, 138, 30);
     margin: 12px 12px 0 0;
     position: relative; 
     padding: 2px 8px;
     display: inline-block;
    float: left;
    z-index: 20;
    background-color: rgba(142,142,142,0.5)
  }
 
 .alt-button:hover {
    color: #ffffff !important;
    background-color: rgba(225, 138, 30,1.0)
   }

.alt img { display: block;  width: 55vw; margin-top: 15px; height:auto !important; }
  }
}