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

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

.banner-colour-dark .containerBackground {
    background: linear-gradient(90deg, rgba(255,255,255,0.40) 40%, rgba(0,0,0,0) 60%) !important;
}

.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: #f9ba56;
}

.overlayContainer {
    position: relative;
    height: relative;
    margin-bottom: 0px;
}

.overlayContent {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: left;
    padding-left: 2em;
    justify-content: center;
    z-index: 1;
}
        
.overlayContent h2 {
    text-align: start;
    font-weight: bold;
    font-size: 4em;
}
	
.overlayContent .form {
    width: 90%;
}
	
.overlayContent h2 > .tef-logo img {
    padding-left: 2%;
    height: 35%;
    vertical-align: baseline;
}
	
.textMinor {
    text-transform: uppercase;
    font-size: 0.25em;
    line-height: 4em;
}
	
.textMajor {
    font-size: 1em;
}

.containerBackground {
    width: 100%;
    height: relative;
    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;
}

/* Tef logo alignment on laptop, tablet, and mobile */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .overlayContent h2 > .tef-logo img {
        padding-left: 3%;
        height: 35%;
        vertical-align: baseline;
    }
}

@media only screen and (max-width: 991px) {
    .overlayContent h2 > .tef-logo img {
        padding-left: 3%;
        height: 25%;
        vertical-align: baseline;
    }
}

/** Medium - laptops and upwards **/
@media only screen and (min-width: 992px) {
    .banner-content-alignment-left .overlayContent {
        align-items: start;
        padding-left: 2em;
    }
		
    .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: 7em;
    }

    .textMinor {
        text-transform: uppercase;
        padding-bottom: 10em;
        font-size: 0.3em;
    }
	
    .textMajor {
        font-size: 1em;
    }
		
    .overlayContent .form {
        width: 40%;
    }
}
	
@media only screen and (max-width: 600px) {
    .overlayContent h2 {
        text-align: start;
        font-weight: bold;
        font-size: 2em;
    }
}

/** Fallback note - These two lines are a fallback gradient color 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 color 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;
}

/* Media query for image replacement */
@media only screen and (max-width: 991px) {
    .banner-image {
        display: none; /* Hide the default image */
    }

    .black-banner {
        display: block; /* Show the black logo */
        width: 100%; /* Adjust width if necessary */
        height: auto; /* Keep aspect ratio */
    }
}

/* Reset the black-banner display for larger screens */
@media only screen and (min-width: 992px) {
    .black-banner {
        display: none; /* Hide the black logo */
    }
}