/* CSS Document */

/* rest */
*		
/* Gives 3D perspective to the scene so it looks like it's swinging forward */
.gate-container {
  display: flex;
  position: relative;
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
  perspective: 1200px; 
  overflow: hidden;
}

/* Set up the gate halves */
.gate-left, .gate-right {
  width: 920px; /* Adjust to match your image sizes */
  height: auto;
  position: absolute;
  top: 50%;
  transform-style: preserve-3d;
  animation-duration: 10s; /* How long the opening takes */
  animation-timing-function: linear;
  animation-fill-mode: forwards; /* Keeps the gates open at the end of the animation */
}

/* Left gate hinges on the left, rotates outwards */
.gate-left {
  left: calc(50% - 300px); /* Adjust based on your width */
  transform-origin: left center;
  animation-name: open-left-gate;
}

/* Right gate hinges on the right, rotates outwards */
.gate-right {
  right: calc(50% - 300px); /* Adjust based on your width */
  transform-origin: right center;
  animation-name: open-right-gate;
}

/* Define outward swing animations */
@keyframes open-left-gate {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(-110deg); /* Swings outward to the left */ }
}

@keyframes open-right-gate {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(110deg); /* Swings outward to the right */ }
}


     /* The full-screen overlay holding the gates */
.gate-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999; /* Ensures it sits on top of everything */
    pointer-events: none; /* Allows clicks to pass through after animation */
    display: flex;
}

/* The individual gate doors */
.gate {
    width: 50%;
    height: 100%;
    background-color:darkolivegreen; /* Change the color of your gates here */
    transition: transform 3s; linear;
}

/* The opening animation triggers when this class is added */
.gate-open .left-gate {
    transform: translateX(-100%);
}

.gate-open .right-gate {
    transform: translateX(100%);
}
   



body 		      {  background-image:url("../Images/Photos/Background/VisionsOfTheNewJerusalem38.jpg");
		             background-repeat: repeat; 		
                     background-attachment: fixed;
		             background-size: cover; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; }

h1, h2, h3        { font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";}





				

#wrapper		{ width:980px; margin:10px  auto;    margin-bottom: 40px;          
	              background-color:palegoldenrod; padding:0 40px;  }

	

#top 	             { 	 }
#logo  		         { float:left;margin: 0px 0;   }

#social-media 		 { float:right; margin:40px 0; }
#social-media ul li  { display:inline; list-style-type:none; }
#social-media p      { text-align: right; }

#topnav 	         { clear:both;	}
#topnav ul 			 { padding:15px 0; margin:10px; ;
					    border-top:1px #000 dotted; }
#topnav ul li 		 { display:inline; list-style-type:none; margin:0 40px 0  0; }

#topnav a:link 		 {	text-decoration:none; text-transform:uppercase; color:black; }
#topnav a:visited    {	text-decoration:none; text-transform:uppercase; color:black; }
#topnav a:active 	 {	text-decoration:none; text-transform:uppercase; color:black; }
#topnav a:hover		 {	text-decoration:none; text-transform:uppercase; color:gold; }
#topnav a:focus 	 {	text-decoration:none; text-transform:uppercase; color:gold; }
#topnav a            {  font: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";}

#content 			 {  float:left; width:580px; margin:100px 0;   }
#content h2,h1       {  color:darkolivegreen; }
#content p           {  line-height: 110%; }



#God                  { margin:100px 0;  }





#rightside			 {  float:right; width:270px; margin:100px 0;  }
#rightside h2        {  color:darkolivegreen; font-size:20px;  }   
#rightside p         {  line-height: 160%;  }
#rightside img       {  margin:10px; }


.img-right			{ float:right; }



#box1 				 {	width:265px; float:left; margin-right:46px; margin-top:100px;  }
#box2 				 {	width:265px; float:left; margin-top:100px; line-height: 180%; } 

          
        



.img-right 			 { float:right; padding:0 0 20px 10px; }


#footer 			 { clear:both; padding:10px 0; border-top:1px #000 dotted;	}
#footer p            { text-align:center; font-size:14px;	}
#footer h3           { color:darkgreen;    }


#banner	           
					.carousel {
					position: relative;
					  max-width: 850px;
					  margin: 20 auto;
					}

					.carousel-inner {
					  overflow: hidden;
					  position: relative;
					  min-height: 920px; /* Adjust height as needed */
					}

					.carousel-item {
					  display: none; /* Hide all slides by default */
					  animation: fadeVisibility 0.5s; /* Add a fade effect */
					}

					.carousel-item.active {
					  display: block; /* Show the active slide */
					}

					.carousel-item img {
					  width: 100%;
					  height: auto;
					  display: block;
					}

					/* Navigation button styles */
					.carousel button {
					  position: absolute;
					  top: 50%;
					  transform: translateY(-50%);
					  /* Add other styling for appearance, cursor, z-index, etc. */
					}

					.carousel 

					.carousel 
			

					@keyframes fadeVisibility {
					  from { opacity: 0.5; }
					  to { opacity: 1; }
					   }
 				       




 



  


/* Contact Form Styles */

#contact-form ol li     { list-style-type: none; }
#contact-form           { margin-top:60px; }
input, textarea         { display: block; width:350px; border:1px #000 solid;  padding:5px;}

textarea                { height:150px; }

input:hoover, textarea:hover    { background-color:azure; }
input:focus,  textarea:focus    { background-color:azure; }


label                   { display: block; margin-top: 10px;}

.submit                 { width:100px; margin-top:15px;  }