: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 h2 {
    text-align: center;
	text-transform: uppercase;
	letter-spacing: 7px;
	font-size: 3em;
    }
	
	.overlayContent .form {
		width: 90%;
	}
	
    	.textMinor {
	font-size: 0.5em;
	}
	
	.textMajor {
	font-size: 1.5em;
	}

	.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 h2 {
		font-size: 5em;
    }
		
		.overlayContent .form {
		width: 40%;
	}
		
	    /** 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) 40%, rgba(0,0,0,0) 60%);
	    }

	    .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.40) 40%, rgba(0,0,0,0) 60%);
	    }

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

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

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

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

	}