<style>
  /* Homepage banner layout */
     
     :root {
     	--banner-height: 450px; /* Setting default height */
     }
     
     .hero .containerBackground {
       	 background: RGBA(60, 16, 83, 0.55); /* Adding purple overlay over video at 55% */
     }    
     
     .hero .overlayContainer {
         position: relative;
         height: var(--banner-height);
       }
       
     .hero .overlayContent {
         position: absolute;
         height: 100%;
         width: 100%;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         z-index: 1;
         height: var(--banner-height);
       }
  
    .hero .btn {
         border-radius: 0px;
       }
    
  /* Homepage banner text */
           
      .hero .overlayContent h2 {
           display: flex;
           flex-direction: column;
           text-align: center;
           text-transform: uppercase;
           width: 100%;
           font-weight: 600;
           color: white;
      }
    
      .hero .top-text {
           font-size: 6rem;
      }
    
      .hero .bottom-text {
         	font-size:11rem;
         	padding: 10px 0px 20px;
      }
		 
	.hero .bottom-text .suffix {
         font-size: 0.5em; 
		 vertical-align: super;
      }
		 
    
  /* Homepage banner image/video */
    
     	.hero .containerBackground {
     		width: 100%;
     		height: var(--banner-height);
     		position: absolute;	
     	}
     	
     	.hero .overlayContainer img,
        .hero .overlayContainer video {
     		height: var(--banner-height)!important;
     		width: 100%;
     	object-fit: cover;		
     	}
     	
     	.hero #vidbutton {
     		position: absolute;
          	top: calc(var(--banner-height) - 40px);
     		left: 10px;
     		z-index: 2;
     	}
		 
		  
 		 #vidbutton {
   			color: white;
    	}
		 
    
        .hero .home-button {
          	width: fit-content%;
       }
     	
    /** Tablets **/
       @media only screen and (max-width : 992px) {
    
             .hero .top-text {
      font-size: 4rem;
    }
    
       .hero .bottom-text {
         font-size: 5.5rem;
         padding: 10px 0px 20px;
       }
    
     	}
  
    /** Mobile **/
       @media only screen and (max-width : 468px) {
    
       .hero .top-text {
         font-size: 3rem;
    }
    
       .hero .bottom-text {
         font-size: 3.5rem;
         padding: 10px 0px 20px;
       }
    
     	}
     
           
    /* News feed as single item */
    
        .hero .panel {
           border: 0;
           margin-bottom:0px;
      }
    
        .hero .panel-body {
           padding: 0px;
           margin: 0px -20px;
      }
             
        .hero .news-tiles .news-tile {
           padding-right: 0px;
           padding-bottom: 0px;
           max-width: 100%;
           flex: auto;
       }
             
         .hero .news-tiles {
           margin-right:0px;
       }
    
       /* Hiding stuff */
    
         .hero .news-tile-title.feed-item-title, .hero .news-tile-event-details, .id7-page-title, .id7-navigation, h1, .hero .news-tile-image-and-date, .hero .news-tile-title {
           display:none!important;
       }
		 

           
         .id7-masthead-contents {
           height: auto !important;
       }
             
</style>