/* ============================================================ */
/* Standard Elements 											*/
/* ============================================================ */



/* ============================================================ */
/* font size in rem 											*/
/*	12px = font-size:0.750rem; */
/*	13px = font-size:0.815rem; */
/*	14px = font-size:0.875rem; */
/*	16px = font-size:1.000rem; */
/*	18px = font-size:1.125rem; */
/*	20px = font-size:1.250rem; */
/*	22px = font-size:1.375rem; */
/*	24px = font-size:1.500rem; */
/*	28px = font-size:1.750rem; */
/*	30px = font-size:1.875rem; */
/*	32px = font-size:2.000rem; */
/*	40px = font-size:2.500rem; */
/* ============================================================ */


@font-face {
    font-family: 'audiowideregular';
    src: url('fonts/audiowide-webfont.woff2') format('woff2'),
         url('fonts/audiowide-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


	html {
		scroll-behavior: smooth;
	}
	

	* 
		{
			box-sizing: border-box;
		}
		    
	body 
		{
			margin: 0;
			padding: 0;
			font-family:Verdana, Geneva, Tahoma, sans-serif;
			background-color:white; /*background-color:#FFFEFB; */
			font-size:0.875rem;
			line-height: 1.4;
		}
		
	h1 
		{
			font-family:Verdana, Geneva, Tahoma, sans-serif;
			font-weight:lighter;
			font-size:1.875rem;
			margin-bottom:10px;
		}
		
	h2 
		{

			font-size:1.375rem;
			border-bottom:thin black solid;
			color:#004079;
			margin-left:10px;
			margin-right:10px;
			font-family:Verdana, Geneva, Tahoma, sans-serif;
			font-weight:lighter;
		}

	h3	
		{
			font-size:1.250rem;
			margin-left:30px;
			color:#663300;
			font-weight:lighter;
			font-family:Verdana, Geneva, Tahoma, sans-serif;
		}		

	a 
		{
			text-decoration:none;
			color:#006bca;
			cursor:pointer;
		}
		

	p
		{
			margin-left:20px;	
		}

	.p
		{
			margin-left:120px;	
		}

	.pcurchaddress
		{
			margin-left: 40px;	
			font-size:1.125rem;
		}

	ul 
		{
			margin-left: 30px;
		}
			
	li
		{
			margin-bottom: 10px;
		}
		 
	.h2-totop
	{
		text-align:right;
		margin-right:10px;
		height:15px;
		font-size:0.750rem;
		margin-top:-18px;
	}
 
 
 	label
 	{
		font-size:0.75rem;	
	}
 
 
 	.plainbutton
 	{
	
	}
 
 	.admbutton
 	{
		background-color:#002D55;
		color:white;
		margin-top:10px;
		margin-left:10px;
		padding:6px 6px 6px 6px;
		border-radius:5px;
		cursor:pointer;
	}
 	.admbutton:focus 
	{
		background-color:#CC6600;	
	}
 	.admbutton:hover 
	{
		background-color:#CC6600;	
	}

 	.admbutton2
 	{
		background-color:#6C0000;
		color:white;
		margin-top:10px;
		margin-left:10px;
		padding:6px 6px 6px 6px;
		border-radius:5px;
		cursor:pointer;
	}
 	.admbutton2:focus 
	{
		background-color:#CC6600;	
	}
 	.admbutton2:hover 
	{
		background-color:#CC6600;	
	}
 
 
 
 	dialog
	{
		background:#FFEFDB;
	}
 	dialog::backdrop
	{
		background:black;
		opacity: .2;
	}

 
 
	.dialogImg
	{
		background:#FFEFDB;
	}
 	.dialogImg::backdrop
	{
		background:black;
		opacity: 0.9;
	}

 
 
 	.eventgrid 
 	{
	
		display:grid;
		gap:1.5rem;
		grid-template-columns: repeat(3, 1fr);
		border-radius:10px;
		border:2px red solid;		
	
	}
 
 
 
        
    
 
/* ============================================================ */
/* STD Table													*/
/* ============================================================ */

 
.tld {
  width: 100%;
  border-collapse: collapse;
}

.tld thead tr {
  background-color:#800000; /* Darker background color for header cells */
  color: white; /* Text color for header cells */
  border: 1px solid #ddd;
  text-align: left;
  padding: 8px;
  font-weight:bold
}

.tld tbody tr {
  border: 1px solid #ddd;
}

.tld tbody tr:nth-child(even) {
  background-color:#FFF0D5; /* Lighter background color for even rows in the tbody */
}
.tld tbody tr:nth-child(odd) {
  background-color:#FFE6B5; /* Lighter background color for even rows in the tbody */
}

.tld tbody tr:hover {
  background-color:#66CCFF; /* Hover row highlight color */
}

.tld td {
  border: 1px solid #ddd;
  text-align: left;
  padding: 8px;
} 
 



 
/* ============================================================ */
/* Div Table													*/
/* ============================================================ */

	.divtable 
	{
		margin-left:30px;
		margin-right:30px;
		font-size:0.815rem;
		padding:2px;
	}

	.divtable:hover div
	{
		font-weight:bold;
		cursor:default;
		color:#004584;
	}
	
 	.divtable:nth-child(odd)
 	{
		background-color:#FFEDCA;		
	}

 	.divtable:nth-child(even)
 	{
		background-color:#FFDD9D;		
	}
 
 	.divtableinner
 	{
		 display:inline-block;
		 white-space:nowrap;
		 overflow:hidden;
		 text-overflow:ellipsis;		
	}


/* ============================================================ */
/* Div Church													*/
/* ============================================================ */

	.divChurchSub 
	{
		margin-left:30px;
		margin-right:30px;
		padding:3px;
		font-size:1.125rem;
		color:black;
		display:block;
		
		
	}
 
/* ============================================================ */
/* Div Church View												*/
/* ============================================================ */

	.divchruchview 
	{
		margin-left:60px;
		margin-right:60px;
		font-size:1.000rem;
		padding:8px;
	}

	.divchruchview:hover div
	{
		font-weight:bold;
		cursor:default;
		color:#004584;
	}
	
 	.divchruchview:nth-child(odd)
 	{
		background-color:#FFF2DB;		
	}

 	.divchruchview:nth-child(even)
 	{
		background-color:#FFEDCC;		
	}
 
 	.divchruchviewinner
 	{
		 display:inline-block;
		 white-space:nowrap;
		 overflow:hidden;
		 text-overflow:ellipsis;		
	}

 
 
/* ============================================================ */
/* Cookie Notice Elements										*/
/* ============================================================ */
 
	.cookienotice
		{
			color:white;
			visibility:visible;
			text-align:center;
			background:#113353; 
			font-size:0.875rem;
			bottom:30px; 
			left:0px; 
			width:100%; 
			position:fixed; 
			z-index:1001;
			padding:10px; 
		}
 


/* ============================================================ */
/* pop up at bottom SnackBar									*/
/* used mainly to notify that copy is complete					*/
/* ============================================================ */
	#snackbar {
	  visibility: hidden;
	  color: #fff;
	  background-color: #333;
	  min-width: 250px;
	  margin-left: -125px;
	  border-radius: 2px;
	  padding: 16px;
	  text-align: center;
	  left: 50%;
	  bottom: 30px;
	  z-index: 1;
	  position: fixed;
	}
	
	/* This will be activated when the snackbar's class is 'show' which will be added through JS */
	#snackbar.show {
	  visibility: visible;
	  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
	  animation: fadein 0.5s, fadeout 0.5s 2.5s;
	}
	
	/* Animations for fading in and out */
	@-webkit-keyframes fadein {
	  from {bottom: 0; opacity: 0;}
	  to {bottom: 30px; opacity: 1;}
	}
	
	@keyframes fadein {
	  from {bottom: 0; opacity: 0;}
	  to {bottom: 30px; opacity: 1;}
	}
	
	@-webkit-keyframes fadeout {
	  from {bottom: 30px; opacity: 1;}
	  to {bottom: 0; opacity: 0;}
	}
	
	@keyframes fadeout {
	  from {bottom: 30px; opacity: 1;}
	  to {bottom: 0; opacity: 0;}
	}
/* ============================================================ */








/* ============================================================ */
/* Table														*/
/* ============================================================ */


	#resp-table {
		width: 100%;
		display: table;
	}

	#resp-table-caption{
		display: table-caption;
		text-align: left;
		font-weight: bold;
	}
	
	#resp-table-header{
		display: table-header-group;
		background-color:#002D55;
		color:white;
		font-weight: bold;
	}
	
	.table-header-cell{
		display: table-cell;
		padding: 4px 15px 4px 0px;
		text-align:left;
		border-bottom: 1px solid black;
	}
	
	#resp-table-body{
		display: table-row-group;
	}
	
	.resp-table-row{
		display: table-row;
	}
	
	.table-body-cell{
		display: table-cell;
		padding: 4px 15px 4px 0px;
		border-bottom:thin black solid;
	}
	
	#resp-table-footer {
		display: table-footer-group;
		background-color: gray;
		font-weight: bold;
		color: rgba(255, 255, 255, 0.45);
	}
	
	.table-footer-cell{
		display: table-cell;
		text-align: justify;
		border-bottom: 1px solid black;
		padding: 4px 10px 4px 0px;
	}



/* ============================================================ */
/* Containter / Menu / Header / Footer Layout Elements			*/
/* ============================================================ */


	.eventimg 
		{
			max-width:300px;
			float:right;
			margin:10px;
			margin-right:20px;
			position:relative;
		}
		
	.container 
		{
			display: flex;
			flex-wrap: wrap;
			margin-bottom:30px;
		}

	.ul-list 
		{
			flex-direction: column;
			font-size:0.875rem;
			margin: 0;
			padding: 0;
			overflow: hidden;
		}
		
	.ul-list li 
		{
			display: block;
			margin-left: 20px;
		}

	.content 
		{
			width: 75%;
			padding: 10px;
		}
	
	.sidebar 
		{
			width: 25%;
			background-color:#FFEFDB;
			padding: 10px;
			order: 1;
			border:2px #007B7B solid;
			border-radius:15px;
			line-height: 1.0;
			margin-top:-50px;
		}
	
	.footer 
		{
			width: 100%;
			font-size:0.875rem;
			background-color: #333;
			color: #fff;
			padding-left: 10px;
			padding-right: 10px;
			text-align: left;
			position: fixed;
			bottom: 0;
			height:30px;
			z-index:1002;
		}


    /* Menu	*/

	.menu 
		{
		      width: 100%;
		      background-color:#002D55;
		      color: #fff;
		      padding: 10px;
		      display: flex;
		      justify-content: space-between;
		      align-items: center;
		}
	    
	.menu a 
		{
			  color:white;
			  text-decoration:none;
		}
	 
	   
	.logo 
		{
		      margin-right: 20px;
		}
	    
	.imgheader 
		{
				width:100%;
				height:250px;
				object-fit:cover;
				margin-bottom:-4px;
		}
	    
	.menu-toggle 
		{
			display: none;
			cursor: pointer;
		}
	
	.menu-toggle .bar 
		{
			width: 25px;
			height: 3px;
			background-color: #fff;
			margin-bottom: 5px;
			transition: all 0.3s ease-in-out;
		}
	
	.menu-toggle.collapsed .bar:nth-child(2) 
		{
			opacity: 0;
		}
	
	.menu-toggle.collapsed .bar:nth-child(1) 
		{
			transform: translateY(8px) rotate(45deg);
		}
	
	.menu-toggle.collapsed .bar:nth-child(3) 
		{
			transform: translateY(-8px) rotate(-45deg);
		}
	
	.menu-toggle.collapsed .bar 
		{
			background-color: #fff;
		}
	
	.menu-list 
		{
			flex-direction: column;
			list-style-type: none;
			margin: 0;
			padding: 0;
			overflow: hidden;
			margin-top:5px;
		}
	
	.menu-list li 
		{
			display: inline-block;
			margin-right: 20px;
		}

	.close-button 
		{
			display: none;
			transform: translateX(-50%);
			font-size:2.000rem;
			cursor: pointer;
			z-index: 9999;
			text-align:right;
		}

	.menu.collapsed .close-button 
		{
			display: block;
		}
	
    
	/* Media query for smaller screens */
	/* (max-width: 768px) */
	@media (max-width: 800px) 
	{

		.eventimg 
		{
			max-width:150px;
			float:right;
			margin:10px;
			position:relative;
		}

		.divchruchview 
		{
			margin-left:20px;
			margin-right:20px;
			font-size:1.000rem;
			padding:4px;
			height:28px;
		}
	
		.container 
			{
				flex-direction: column;
			}
		
		.content 
			{
				width: 100%;
			}
		
		.sidebar 
			{
				width: 100%;
				order: 2;
				margin-top: 20px;
				border-radius:15px;
			}
		
		.floating-column 
			{
				width: 100%;
			}
		
		
		.menu-list 
			{
				display: none;
			}
		
		.menu-toggle 
			{
				display: block;
			}
		
		.menu.collapsed .menu-list 
			{
				display: block;
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(0, 0, 0, 0.9);
				z-index: 9998;
				padding: 20px;
				overflow-y: scroll;
			}
		
		.menu-list.collapsed 
			{
				display: block;
				text-align: center;
			}
		
		.menu-list.collapsed li 
			{
				margin-bottom: 20px;
				display: block;
			}
		
		.menu-list.collapsed li a 
			{
				display: block;
				padding: 10px;
			}
		
		.imgheader 
			{
				width:100%;
				height:150px;
				object-fit:cover;
			}


	
	}  /* END - Media query for smaller screens */