/*
***********************************************************************************
*                                                                   Church Page                                                                            *
***********************************************************************************
*/
html,
body {
	-ms-overflow-style: none; /* for Internet Explorer, Edge */
	scrollbar-width: none; /* for Firefox */
  	overflow-y: scroll; }
body::-webkit-scrollbar {
	display: none; /* for Chrome, Safari, and Opera */}

body{
   	margin: 5px;
    	padding:0;
	margin-right: 10px;
	margin-left: 0%;
    	font-family: "arial", sans-serif;
	background-color: rgb(250, 250, 255);
	color: rgb(255, 255, 255);
}
.h1 {
	position: "relative";
}
/************     all paragraph text color = black     *****************/
p {
  color: black;
}
/************************     container     ************************/
.container {
	background-color: rgb(250, 250, 255);
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
     height: 100%;
     width: 98%;
	margin-left: 5px;
	margin-right: 1px;
	margin-top: -20px;
}
/*******************     Items     ******************/
.item {
	border: 0px solid #ebebeb;
    background-color: rgb(250, 250, 255);
    display: inline;
}
/*******************     Left     ******************/
.left {
	display: flex;
	order: 1;
	justify-content: center;
	background-color:  rgb(250, 250, 255);
	color: rgb(0, 0, 0);
	margin-top: 10px;
	flex: 0 1 auto;
	max-width: 120px;
	height: 100%;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	opacity: 1;
}

/*******************     Central     ******************/
.central {
	order: 2;
	background-color:  rgb(250, 250, 255);
  	flex: 1 1 0;
	position: static;
	/*float: right;*/
	width: 100%;
	max-width: 100%;
	height: 100%;
	margin-top: 20px;
	margin-bottom: 2px;
	margin-left: 8px;
 	padding-left: 0%;	
	padding-right: 2%;
}
.church {
	margin-right: 5px;
	margin-left: 5px;
	width 480px;
	height: 360px;
}

.church:hover {
	margin-left: 5px;
	margin-right: 5px;
	width: 580px;
	height:460px;
}
.church:not(:hover) {
	margin-right: 5px;
	margin-left: 5px;
	width: 480px;
	height: 360px;
}
.text {
	/*color: black;
	font-family: Times New Roman;  
	font-size: 16px;
	float: right;
	text-align: justify;*/
}
/*******************     Right     ******************/
.right {
	order: 3;
	background-color:  rgb(250, 250, 255);
   	flex: 1 1 0;
	flex-wrap: wrap;
     position: static;
	height: 100%;
	max-width: 20%;
	margin-top: 50px;
	text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
	padding-right: 1%;
	padding-left: 1%;
     text-align:center;
}
.rightbelowcentral {
	display: "none";
}
/*******************     Footer     ******************/
.footer {
	order: 4;
		display: "none";
	background-color:  rgb(250, 250, 255);
     flex: 0 1;
     position: static;
	margin-top: 50px;
	padding-right: 10%;
    margin:25px auto ;  
     text-align:center;
}
.img3 {
	display: none;
}

/*
***********************************************************************************
*                                                                       Iframe                                                                                *
***********************************************************************************
*/
iframe {
  float: left;
	border: 60;
}
img {
  float: left;
}
#gototop {
	position: fixed;
	bottom: 0;
	left: 45%;
	max-height: 5%;
	width: 100px;
	background-color:  rgba(255, 255,255,1);
	color: red;
	border: 1px solid rgba(10,10,255,0.8);

}
#gototop:hover {
	transform: scale(1.25);
	cursor: default;
}
/*
***********************************************************************************
*                                                                       Media Queries                                                                   *
***********************************************************************************
*/
/***************    screen width < 800    *************/
@media only screen and (max-width: 800px) {
body {
}
.container {
	flex-wrap: wrap;
} 
.header {flex-wrap: wrap;
	max-height: 100px;
}
.h1 {
position: "relative";
}
.title2 {
	margin-left: 140px;
}
.left {
	display: none;
	order: 1;
	position: relative;
	background-color:  rgba(250, 250, 255,0.5);
	margin-top: -20px;
	max-height: 600px;
	animation: myfirst 2s 1 forwards;
	animation-direction: normal;
}
@keyframes myfirst {
  0%   {right: 120px; top: 0px;}
  100% { right: 1px; top: 0px;}
}
.central {
	order: 1;
	flex: 1 1 0;
	 position: static; 
	/*width: 100%;*/
	width: 200px;
	height: 200%;
	background-color:  rgb(250, 250, 255);
}
.text {
	/*color: black;
	font-family: Times New Roman;  
	font-size: 16px;
	float: right;
	text-align: justify;*/
}
.church {
	width 120px;
	height: 80px;
	margin-right: 5px;
	margin-left: 5px;
}
.church:hover {
	margin-right: 5px;
	margin-left: 5px;
	width: 320px;
	height: 200px;
}
.church:not(:hover) {
	/*margin-right: 5px;*/
	margin-left: 5px;
	width: 120px;
	height: 80px;
}
.text {
	color: black;
	font-family: Times New Roman;  
	font-size: 16px;
	text-align: justify;
}
}