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

.banner-container {
            position: relative;
            width: 100%;
            overflow: hidden;
        }
        
        .banner-image {
            width: 100%;
            height: auto;
            display: block;
        }
        
        /* For larger screens, we can set a fixed height and use object-fit */
        @media (min-width: 768px) {
            .banner-image {
                height: 750px;
                object-fit: cover;
            }
        }
        
        .banner-caption {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: white;
            width: 100%;
        }
        
        .banner-caption h3 {
           font-family: 'baskervville';
		   font-size: 50px;  
		   color: #FFF;
           text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
        }
        
        .banner-caption p {
            font-size: 1.2rem;
            margin-bottom: 1.5rem;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
        }
        
        .banner-logo {
			width: 256px; height: 46px; padding-top: 150px;
            display: block;
            margin: 0 auto;
            max-width: 100%;
            height: auto;
        }

@media only screen and (max-width:992px) {
	 		.banner-image {
                height: 400px;
                object-fit: cover;
            }
			
			.banner-caption {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: white;
            width: 100%;
        }
            .banner-caption h3 {
                font-size: 45px;
            }
            
            .banner-caption p {
                font-size: 1rem;
            }
			.banner-logo {
			width: 200px; height: 146px; padding-top: 80px;
            display: block;
            margin: 0 auto;
            max-width: 100%;
            height: auto;
        }
	
}
        
        /* Responsive font sizes */
        @media (max-width: 768px) {
			 .banner-image {
                height: 400px;
                object-fit: cover;
            }
			
			.banner-caption {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: white;
            width: 100%;
        }
            .banner-caption h3 {
                font-size: 45px;
            }
            
            .banner-caption p {
                font-size: 1rem;
            }
			.banner-logo {
			width: 200px; height: 146px; padding-top: 80px;
            display: block;
            margin: 0 auto;
            max-width: 100%;
            height: auto;
        }
        
        @media (max-width: 576px) 
		{
			 .banner-image {
                height: 250px;
                object-fit: cover;
            }
			
			.banner-caption {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: white;
            width: 100%;
        }
            .banner-caption h3 {
                font-size: 25px; 
            }
            
            .banner-caption p {
                font-size: 0.9rem;
            }
			
			.banner-logo {
			width: 140px; height: 130px; padding-top: 30px;
            display: block;
            margin: 0 auto;
            max-width: 100%;
            height: auto;
        }
			}}