:root {
	--banner-height: 450px;
}

.containerBackground {
    	/**background: RGBA(255, 255, 255, 0.4);**/
    }    

     .banner-colour-dark .containerBackground {
    	/**background: RGBA(0, 0, 0, 0.4);**/
    }

    .banner-colour-light .containerBackground {
    	/**background: RGBA(255, 255, 255, 0.4);**/
    }

    .banner-colour-dark a, .banner-colour-dark p, .banner-colour-dark h1, .banner-colour-dark h2, .banner-colour-dark h3, .banner-colour-dark h4, .banner-colour-dark h5, .banner-colour-dark h6, .banner-colour-dark #vidbutton {
    	color: #FFF;
    }

    .banner-colour-light a, .banner-colour-light p, .banner-colour-light h1, .banner-colour-light h2, .banner-colour-light h3, .banner-colour-light h4, .banner-colour-light h5, .banner-colour-light h6, .banner-colour-light #vidbutton {
    	color: #000;
    }

    .overlayContainer {
        position: relative;
        height: var(--banner-height);
        margin-bottom: 20px;
    }
    
    .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);
    }
	
	.overlayContent p {
        text-align: center;
		text-transform: uppercase;
		letter-spacing: 5px;
      	font-size: 1.5em;
        color: white;
        text-shadow: 1px 1px black;
        }
            
        
    .overlayContent h2 {
    text-align: center;
	text-transform: uppercase;
	letter-spacing: 5px; /** original 7px **/
	font-size: 1.8em;      /** original 3em **/
	text-shadow: 1px 1px black;
    }
	
	.overlayContent .form {
		width: 90%;
	}
	
    	   /* Solid border */
  hr.whiteline {
    /** border: revert; **/
    border-top: 1px solid #eee;
    width: 40%;
    margin: 0 0 30px 0;
  }
	
	
	.textMedium {
	font-size: 0.7em;
	}
	
	.textMajor {
	font-size: 1em;
	}
	
	  .textMajor {
   font-weight: 550;  }
  
  .textMinor {
     font-weight: 550;  
    text-transform: capitalize !important;
  letter-spacing: -0.5px;
    font-size: 0.7em; 
  }


	.containerBackground {
	width: 100%;
	height: var(--banner-height);
	position: absolute;	
	}
	
	.overlayContainer img {
	height: var(--banner-height);
	width: 100%;
	object-fit: cover;		
	}
	
	.overlayContainer video {
	height: var(--banner-height) !important;
	width: 100%;
	object-fit: cover;
	}
	
	#vidbutton {
		position: absolute;
		top: 410px;
		left: 10px;
		z-index: 2;
		color: #552d62;
	}
	
	h1 {
		border-bottom: none;
	}
	
	/** Medium - laptops and upwards **/
    @media only screen and (min-width : 992px) {

	    .banner-content-alignment-left .overlayContent {
	    	align-items: start;
	    	padding-left: 3em;
	    }
		
		.banner-content-alignment-left .overlayContent h2 {
	    	text-align: left;
	    }

	    .banner-content-alignment-right .overlayContent {
	    	align-items: end;
	    	padding-right: 3em;
	    }
		
		.banner-content-alignment-right .overlayContent h2 {
	    	text-align: right;
	    }
		
		.overlayContent p {
		font-size: 2.5em;
    }
		
		.overlayContent h2 {
		font-size: 5em;
    }
		
		.overlayContent .form {
		width: 40%;
	}
		
			/** Tablets and lower **/
		  @media (max-width: 768px) {
   .textMinor {
    font-size: 1em; 
  }
	    /** FALLBACK NOTE - These two lines are a fallback gradient colour that is also a duplicate of the 'Light' style. There's a certain level of redundancy to them, but I've left them here so that you can overwrite the gradient fallback colour if needed. **/

	    .banner-content-alignment-left .containerBackground {
	    	background: linear-gradient(90deg, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0) 0%);
	    }

	    .banner-content-alignment-right .containerBackground {
	    	background: linear-gradient(270deg, rgba(255,255,255,0.40) 40%, rgba(0,0,0,0) 60%);
	    }

	    /** END FALLBACK NOTE **/

	    .banner-colour-dark.banner-content-alignment-left .containerBackground {
	    	background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%);
	    }

	    .banner-colour-dark.banner-content-alignment-right .containerBackground {
	    	background: linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%);
	    }

	    .banner-colour-light.banner-content-alignment-left .containerBackground {
	    	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0) 0%);
	    }

	    .banner-colour-light.banner-content-alignment-right .containerBackground {
	    	background: linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0) 0%);
	    }

	    .banner-shadow-hidden-web .containerBackground {
	    display: none;
	    }

	}