/* ___________________________________________

   WARE MUSICAL THEATRE STYLE SHEET 2027
   ___________________________________________

   Steve Beeston
   November 2027

   (c) 2026 Steve Beeston

   ___________________________________________
   
   This style sheet was added for Ware Musical Theatre website v2 (2027)

   Changes: (none)

   ___________________________________________

*/



header {margin-bottom: 0}

h1, h2, h3, h4, h4 {
    font-weight: 300;
}

#hero-row img {
    width: 100%;
}

#hero-overlay h1 {
    color:white; 
    text-shadow: 1px 2px 5px #444; 
    font-weight: 300; 
    font-size: 3rem; 
    line-height: 40px; 
    margin-bottom: 20px;
}

#hero-overlay p {
    font-family: 'Roboto Serif';
    font-size: 2rem;
    color: white;
    text-outline: 1px;
    text-shadow: 1px 1px 2px #444;
}

#banner-overlay, #hero-overlay {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    /* border-radius: 10px; --- SRB 13/11/26 */
    top: 45%;
    left: 20%;
    width: 60%;
    transform: none;
    top: 0;
    left: 0;
    width: 100%;
    /* height: 100%; SRB 1/11/26 */
	 margin-top: 30%;
}

#hero-overlay a.button {
    display: inline-block;
    background: rgba(0,0,0,0.5);
    font: 2rem Poppins; 
    padding: 5px; 
    color:white; 
    width: 180px; 
    border-color: chocolate; 
	 display: inline-block; 
	 margin: 20px;
}


@media only screen and (max-width: 1440px) {

	#banner-overlay, #hero-overlay {
	     margin-top: 21%;
    }

    #banner-overlay h1, #hero-overlay h1 {
        margin-top: 100px;
    }
}

@media only screen and (max-width: 1200px) {

	#banner-overlay, #hero-overlay {
	     margin-top: 18%;
    }
}
 

@media only screen and (max-width: 1096px) {
    #banner-overlay h1, #hero-overlay h1 {
		  /* height: 400px; was causing problems SRB 13/11/26 */
        margin-top: 180px;
		  margin-top: 75px; /* SRB 13/11/26 */
    }
}

@media only screen and (max-width: 1000px) {
   #banner-overlay h1, #hero-overlay h1 {
		margin-top: 40px;
   }
}

@media only screen and (max-width: 900px) {
   #banner-overlay, #hero-overlay {
		position: relative;
		margin-top: -4px;
		padding-bottom: 10px;
		background-color: #444;
   }
	
	#banner-overlay h1, #hero-overlay h1 {
		margin-top: 10px;
		display: none; /* SRB 13/11/26 */
    }

	 #hero-overlay p {
		font-size: 1.8rem;
	 }

	 #hero-overlay a.button {
		border: 0;
		margin: 10px;
	 }
}