/*Homepage Event Advertisements*/

div#Events {display:flex; justify-content: center; flex-wrap: wrap; flex-direction: row; margin:auto; padding-bottom: 20px; text-align: center; }

div#Events iframe#Calendar {min-height: 350px; display: inline-block; margin:auto;}

div#Events h4 {text-align: center; font-family: arial; min-height:40px; }

div#Events div {text-align: center; margin:auto 10px; height:100%; }

div#Events div img {width: 95%; margin-top: 50px; }


/*generic*/
*  {font-family: Verdana, Geneva, sans-serif}

html {width:100%; }

body {margin: auto 0;}

main, header, footer>div {margin:auto; display: block; position:relative; margin-top:10px; max-width: 1200px; }

main, header {min-height:100%; margin:0px auto auto auto; max-width: 1200px; }

main>section>h2 {clear:both; text-align: center;}


a {text-decoration: none ; color:black;}

/*Header*/

header {position: relative; margin:5px auto auto auto; }

header h1, header h2, header  h3 {margin:0px; text-align: left}

header h1 {font-size: 25px}

header h2 {text-indent: 50px; font-size: 22px}

header h3 {text-indent: 80px; font-size: 18px}

header img {float:left;  }



/*Navigation Bar*/

label, input {display:none;}

@media (min-width: 901px)
{


header nav #menu {margin:10px auto auto auto;    }

header nav #menu>ul {display: block; background-color: white; list-style: none; padding:0;  }

header nav #menu>ul>li {display:inline-block; text-align: center; margin-right: 10px; 
	              font-size: 15px;border-bottom: 3px solid rgb(0,0,0, 0);   }

header nav #menu>ul>li>ul {display:block; position: absolute; visibility: hidden; padding-left: 0px; margin-top: 3px }

header nav #menu>ul>li:hover>ul {visibility: visible; z-index: 2; background-color: gainsboro  }

header nav #menu>ul>li>ul>li {display:block; width:inherit; position:relative; min-width: 150px; padding-bottom: 5px; 
	                    border-bottom: 1px solid gray}

header nav #menu>ul>li:hover {border-bottom: 3px solid gray; background-color:rgb(232,232,232)}

header nav #menu>ul>li>a {min-width: 150px; color:black; }

header nav #menu>ul>li>ul>li>a {min-width: 150px; display: block;}

header nav #menu>ul>li>ul>li:hover {background-color: silver}

li.dropdown::after {content:"\02C5"; font-weight: bold; font-size:19px; color:rgb(72,72,72); }



}

/*Footer*/

footer * {margin:0; padding:0;}

footer {position: relative; bottom:0px; margin:0 0; background-color: lightgray; width:100%; line-height: 1.5em; clear: both }

footer h4 {font-size: 18px; width: 100%; margin-bottom:20px; padding: 0; border-bottom: 1px solid gray; letter-spacing: 1px; text-transform: uppercase;}

footer>div {display: grid; grid-template-columns: 2fr 1fr 1fr; }

footer>div>div {margin:40px 0 40px 0;}

footer div.ContactDetails {display:grid; grid-template-columns: 1fr 1fr;}

footer div.ContactDetails div:first-child, footer div.ContactDetails div:last-child {grid-column: 1/3}

footer div.ContactDetails div:last-child  {margin-top:10px;}

footer a {text-decoration: underline;}

footer a:hover {color:gray;}






/*photo button navigation*/

div.buttons {display: flex; justify-content: space-evenly; flex-wrap: wrap;flex-direction: row;}

nav section.Navigation {position:relative; display: inline-block; width:300px; margin: auto 10px 10px 10px; text-align: center; }

nav .Navigation img {border-radius: 30%; }

nav .Navigation h3 {position:absolute; bottom: 10px;  color: black; background-color: white; text-align: center; opacity:70%; 
	           transition: transform 1s; width:100%; }

nav .Navigation a:hover h3{opacity: 100%; z-index: 1; transform: translateY(-100px);}

nav .Navigation a:hover img {filter:grayscale(50%);}

nav .Navigation a:active img {filter:grayscale(0%); filter:brightness(150%); }

nav .Navigation p {position:absolute; bottom:-20%; width:100%; text-align: center; background-color: rgba(255, 255, 255, 0.8); 
	 border-radius:0 0 10% 10%; height:50%; overflow: hidden; font-size: 20px; vertical-align: middle; opacity: 0; font-family: cursive;}
nav .Navigation a:hover p {animation: hover 1.5s forwards;}

@keyframes hover {
0% {
	opacity: 0%
}
100% {
     opacity: 100%; ;
}
}


/*generic content for pages*/

main {min-height: 500px}

.Generic ul, .Generic p {margin:10px 40px; line-height: 25px}

.Generic a {text-decoration: underline;}

.Generic a:hover {color:gray;}

.Generic em {color:red;}

.Generic img {float: right; margin-bottom: 20px; margin-left: 20px; max-width: 60%}

.Generic img.imagebottom {float:none; margin: 20px auto; display: block}


/*Church Tour,Find Us, Events Calendar Pages*/

iframe.embedded {border:0; margin:auto; width:90%; min-height:400px; display: block }

@media (min-width:1200px) {

iframe.embedded {min-height: 500px;}

}

/*Hiring the centre costs and terms and conditions*/

table {width:50%; text-align: center; border:3px black solid; border-collapse: collapse; margin:auto;}

th {text-transform: uppercase; font-size: 18px; border-bottom: 2px solid black; background-color: #e6ecff}

td {border: 1px dotted black; }

ol li {padding:20px;}


/*Index/Find Us Page*/

         /*Text left - Image Right*/

#index img {border-radius:30px;}

.Generic #index img {max-width: 100%}

#index {width:800px;margin:20px auto 50px auto; overflow:auto; padding:10px; display: grid; grid-template-columns: 1fr 1fr }

#index p {display: inline; position: relative; line-height: 22px; margin-right: 30px; 
	 font-family: "Comic Sans MS", cursive, sans-serif; font-size: 18px; text-align: justify   }


        /*Text bottom - Image Top*/

#news1 {width:90%; display: grid; grid-template-rows: 1fr auto; background-color:#E0FFFF; margin:auto auto 30px auto; border-radius:20px; 
	border: #B0C4DE 2px groove; font-family: "Comic Sans MS", cursive, sans-serif; }

#news1 p {text-align: center; position: relative; line-height: 22px; margin: 10px auto; 
	 font-family: "Comic Sans MS", cursive, sans-serif; font-size: 18px; max-width:90%;  }

#news1 picture {margin: 10px auto;  }

#news1 h4 {text-align: center; font-size: 2.5vh; word-wrap: break-word; }

#news1 img {width:100%;}

/*Home Page*/
div#Safeguarding {margin:30px auto; background-color: #E1EBEE; padding:20px; border-radius: 40px; max-width:800px; border:2px solid black;}



p.covid {width:90%; max-width: 500px; background-color: #FFFF99; padding:20px; margin:20px auto; border: 2px solid black; text-align:center; 
	box-sizing: border-box; box-shadow: 3px 3px 10px maroon }

p.notify {width:90%; max-width: 500px; background-color: #E1EBEE; padding:10px; margin:20px auto; border: 2px solid black; text-align:center; 
	box-sizing: border-box; box-shadow: 3px 3px 10px blue }

/*Archive - ImageGallery*/

h4.gallerytitle {border-bottom: solid lightgray 2px;}

div.gallery {display:flex; justify-content: center; flex-wrap: wrap; flex-direction: row; margin:auto; }

div.gallery a {text-align: center;}

div.gallery a img{margin: auto 20px 20px auto;}

div.gallery a img:hover{transform: scale(1.1); filter: grayscale(60%) }

/*Church Hall Page*/

main#equipment {background-color: whitesmoke; min-height: auto}

div#equipment {display:flex; justify-content: center; flex-wrap: wrap; flex-direction: row; margin:auto;}

div#equipment div img {float: left; margin: 10px; }

div#equipment p {margin: auto; text-align: center; line-height: 30px; padding: 20px 20px; color:#606060;}