/* styles.css 
   Project: 
   Author: AKB | DBC
   Date: 
	
   Helpful links: 
   	Web colors: 
   		https://en.wikipedia.org/wiki/Web_colors#X11_color_names
	Color picker tool:
		https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool
		http://colorpicker.com

*/

* {
  box-sizing: border-box;
}

h1, h4 {
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  font-style: normal;
}

h2, h3 {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

h2 {
    font-weight: 400;
  font-size: 1.3em;
}


body {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  background-color: white;
    color: #002a60;
}

a {
  font-weight: 600;
  color: #5488ab;
}




p::selection, h1::selection, h2::selection {
  background: #c2e0f4;
}


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  margin-bottom: 5%;
}

.container {
   width: 95vw;
   margin: 0 auto;
   /*margin-top: 5vh;*/
   position: relative;
   padding-bottom: 5%;
   background-color: #e9f4fb;
   min-height: 100vh;
   /*overflow: hidden;*/
}

.topmarg, .bottommarg {
   height: 3vh;
   width: 100vw;
   background-color: white;
   position: fixed;
   z-index: 100;
}

.topmarg {
   top: 0;
}

.bottommarg {
   bottom: 0;
}

/*NAVBAR*/

 nav {
   position: fixed;
   top: 3vh;
   left: 2.5vw;
    z-index: 10; 
  }

.burger {
   height: 55px;
   width: 72px;
}

.pagebg .hamburger-inner, .pagebg .hamburger-inner::before, .pagebg .hamburger-inner::after{
  background-color: #002a60;
}

.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after  {
  background-color: #002a60 !important;
}

.openmenu {
  width: 500px;
  background-color: rgba(255, 255, 255, 0.7);
  margin-top: -55px;
  padding-top: 70px;
  height: 95vh;
  display: none;
}

.openmenu a {
  color: #002a60;
  text-decoration: none;
  text-transform: uppercase;
   letter-spacing: 0.25em;
   font-size: 0.75em;
   font-weight: 500;
   padding-left: 40px;
   display: block;
   margin-bottom: 40px;
}

.openmenu a:hover {
  color: #5488ab;
}



/*HOME*/



.rsvp {
   position: fixed;
   top: 4.5vh;
   right: 4vw;
   display: block;
   height: 50px;
   width: 120px;
   cursor: pointer;
   z-index: 10;
}

.home-rsvp {
   border: 2px solid #ffffff;
}

.page-rsvp {
   border: 2px solid #002a60;
   background-color: #e9f4fb;
}

.rsvptext {
   position: fixed;

}

.rsvptext p {
   letter-spacing: 0.1em;
   font-size: 1em;
   font-weight: 500;
   position: absolute;
  text-align: center;
   width: 120px;
   height: 50px;
  margin-block-start: .85em;
    margin-block-end: 1em;
    text-decoration: none;
}

.home-rsvp p {
  color: #ffffff;
}

.page-rsvp p {
   color: #002a60;
}

.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  overflow: hidden;
  width: 100%;
  height:0;
  /*transition: .5s ease;*/
}

.home-rsvp .overlay {
  background-color: #8cafc6;
}

.page-rsvp .overlay {
  background-color: #002a60;
}

.page-rsvp:hover .overlay p {
  color: #ffffff;
}


.rsvp:hover .overlay {
  bottom: 0;
  height: 100%;
}


.title {
   position: relative;
}

/*.parallax img {
   width: 100%;
   z-index: -1;
}*/

.parallax {
   z-index: 8;
   position: relative;
   display: flex;
  justify-content: space-around;
  align-items: flex-start;
  background-image: url("../img/main-photo.jpg"); /* The image used */
  top: -2vh;
  height: 150vh; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  /*margin-bottom: 10%;*/
}

.parallax::before {
  content: " ";
  z-index: 0;
  display: block;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.3);
}

.titletext {
  position: -webkit-sticky;
  position: sticky;
 bottom: 40%;
   /*color: rgba(185,156,107,0.7);*/
   color: #ffffff;
   line-height: 0.5;
   text-align: center;
   align-self: flex-end;
   width: 100%;
   left: 50%;
   transform: translateX(-50%);
   margin-bottom: 25%;
}

.titledetails {
  margin-bottom: 20%;
   color: #ffffff;
   line-height: 0.5;
   text-align: center;
   align-self: flex-end;
   width: 100%;
   left: 50%;
   transform: translateX(-50%);
}

.titletext h1 {
  font-size: 5em;
}


.divider {
   height: 200px;
   background-color: #f9f7f3;
}

/*TIMELINE*/


.tl-title {
  font-size: 3em;
   /*color: #2a2826;*/
   color: rgba(140,175,198,0.7);
   z-index: 1;
   text-align: center;
}

.timeline h3 {
  color: #002a60;
  font-size: 1em;
  margin: 0;
  font-weight:600;
  line-height: 1.5;
}

.timeline p {
  margin: 0;
  letter-spacing: 0.1em;
}

/* The actual timeline (the vertical ruler) */

.timeline {
  text-align: center;
  position: relative;
  max-width: 1200px;
  margin: 0 auto 10% auto;
}

.timeline-line {
  position: absolute;
  width: 2px;
  height: 0; /* Hidden initially */
  background-color: #002a60;
  left: 50%;
  transition: height 8s ease; /* Smooth animation */
  top: 10px;
}

.timeline-line.is-visible {
  height: 98%;
}

/* The actual timeline (the vertical ruler) */
/*.timeline::after {
  content: '';
  position: absolute;
  width: 4px;
  background-color: #002a60;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}*/

/* Container around content */
.tl-container {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
  left: 25%;
}

/* The circles on the timeline */
/*.tl-container::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  right: -11px;
  background-color: #002a60;
  top: 60px;*/
  /*border-radius: 50%;*/
/*  transform: rotate(-45deg);
  z-index: 1;*/
}

/* Place the container to the left */
/*.left {
  left: 25%;
}*/

/* Place the container to the right */
/*.right {

}*/

/* Add arrows to the left container (pointing right) */
/*.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 60px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}*/

/* Add arrows to the right container (pointing left) */
/*.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 60px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}*/

/* Fix the circle for containers on the right side */
.right::after {
  left: -10px;
}

/* The actual content */
.content {
  padding: 20px 30px;
  background-color: white;
  position: relative;
  border-radius: 6px;
}

.content {
  /* Initial state: hidden and slightly moved down */
  opacity: 0;
  transform: translateY(20px);
  /* Define the animation */
  animation: reveal 10s forwards;
  /* Link animation to the view timeline */
  animation-timeline: view();
  /* Define when the animation should run based on visibility */
  animation-range: entry 0% cover 50%;
  scale: 50%;
}

@keyframes reveal {
  to {
    /* Final state: visible and in original position */
    opacity: 1;
    transform: translateY(0);
    scale: 100%;
  }
}

.note {
  text-align: center;
  margin-top: 10%;
}

.note h4 {
  margin: 2%;
}



/*WHERE TO STAY*/

.pagetext li a {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size: 1em;
  color: #002a60;
  text-decoration: none;
}

.pagetext li a:hover {
  color: #8cafc6;
}


.wtscontainer, .travcontainer {
  width: 80%;
  margin: 0 auto;
}

.wtscontainer h1 {
  color: #002a60;
  text-align: center;
  font-size: 3em;
}

.pagetitle {
  padding: 10% 0 2% 0;
  position: relative;
  z-index: 1;
}


.wtscontainer .mapo {
    flex: 2;
    margin: auto;
    margin-bottom: 5%;
    height: 400px;
}

.mapflexbox {
  display: flex;
  gap: 5rem;
}


.mapo {
  padding: 2%;
  background-color: #c2e0f4;
}

.mapo iframe {
  width: 100%;
  height: 100%;
}

/*.wtskey {
  padding: 5%;
  margin: 10% auto;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.1em;
}

.wtskey a{
  text-decoration: none;
  color: white;
}*/
/*
.village {
  background-color: #8cafc6;
}

.taxi {
  background-color:#002a60;
}

.hotel {
  background-color: #bdbdbd;
}

.wtskey:hover {
  background-color: #c2e0f4;
  cursor: pointer;
}

.wtskey:hover a {
  color: #002a60;
}
*/

.pagetext {
  text-align: center;
  background-color: rgba(255,255,255,0.6);
  padding: 5%;
  margin: 5% 0;
}

.pagetext h2 {
  color: #002a60;
  font-weight: 600;
}

#emailadd {
  font-size: 1em;
  font-weight: 400;
  text-decoration: underline;
}


/*TRAVEL*/

.trtitle {
  text-align: center;
}

.travcontainer {
  overflow:hidden;
}

.travcontainer h1 {
  color: #002a60;
}


.travcontainer .mapo {
    width: 50%;
    height: 800px;
    float: left;
} 

.flexbox {
  display: flex;
  text-align: center;
  gap: 2rem;
  margin: 5% auto;
}

.flexbox > * {
  flex: 1;
}

.travelflex {
  padding: 1% 5%;
  background: rgba(255,255,255,0.8);
  border-radius: 10px;
}

.travtext {
  width: 40%;
  /*margin: 0 auto;*/
  float: right;
}

.travadd {
  text-align: center;
}




/*RSVP*/

.rsvpcontainer {
     background-image: url("../img/rsvp-photo.jpg");
     background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
  min-height: 100vh;
  background-attachment: fixed;
  position: absolute;
  z-index:5;
}

.rsvptitle {
    padding: 10% 0 2% 0;
}

.rsvptitle p {
  font-weight: 500;
}

.rsvpform {
  width: 60%;
  min-height: 60vh;
  text-align: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  color: #002a60;
  margin: 10% auto;
  background-color: rgba(255,255,255,0.6);
}

#rsvp-response {
  width: 100%;
}

.quicknote {
  font-size: 0.8em;
  font-weight: 400;
}


.pagetitle h1 {
  font-size: 4em;
  font-weight: 200;
  margin-block-start: -.25em;
    color: #002a60;
   /*color: rgba(185,156,107,0.4);*/
   text-align: center;
}

.rsvptitle h1 {
    margin-block-start: 0.5em;
    margin-block-end: 1em;
}

.rsvpres {
  width: 100%;
  margin: 0 auto;
  letter-spacing: 0.05em;
}


.rsvpres input::placeholder, select::placeholder {
  color: #002a60;
  opacity: .75;
  font-size: 1em;
}

.rsvpres input, select {
  margin: 2% auto;
  padding: 1% 10%;
  text-align: center;
  border: none;
}

input[type="radio"] {
  accent-color: #002a60; /* Change to your desired color */
  margin-right: 10px;
}

.rsvpres span {
  margin-right: 15px;
}

.rsvpradio {
  margin: 10px 0;
}

.rsvpform h4 {
  font-weight:400;
  color: #002a60;
  font-size: 1em;
  margin-bottom:0;
   font-family: "Montserrat", sans-serif;
   letter-spacing: 0;
   font-weight: 600;
}

.rsvpname {
  margin: 4% 0% 7% 0%;
}

.name {
  height: 40px;
  width: 280px;
  padding: 0% 0% 0% 2%;
  font-family: didot;
  font-style: italic;
}

.submit {
   background-color: #002a60;
   display: inline-block;
   height: 50px;
   width: 180px;
   cursor: pointer;
   margin-top: 5%;
   color: #ffffff;
   padding-top: 17px;
   font-size: .75em;
}

.submit:hover {
  background-color:#c2e0f4;
  color: #002a60;
}

button, input[type="submit"], input[type="reset"] {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}


#submit-form p, #submit-form p {
   color: white;
   letter-spacing: 0.25em;
   font-size: 0.75em;
   font-weight: 500;
   /*position: absolute;*/
  text-align: center;
   width: 180px;
   height: 50px;
  margin-block-start: 1.25em;
    margin-block-end: 1em;
    text-decoration: none;
    text-transform: uppercase;
}

/*.submit:hover .overlay {
  bottom: 0;
  height: 100%;
}*/



.thankyou {
  position: sticky;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  padding: 10% 0%;
  border: 1px solid black;
  background-color: rgba(255,255,255,0.7);
  margin-top: 5%;
  display: none;
}

.thankyou h1 {
  font-size: 2em;
  font-weight: 200;
  text-align: center;
}





/*MOBILE*/


@media only screen and (max-width: 600px) {
  li {
    margin-bottom: 10%;
  }
  .parallax {
    display: block;
    margin-bottom: 20%;
    background-image: url("../img/mobile-photo.jpg"); /* The image used */

  }
  .titletext {
    width: 100%;
    left: 0;
    transform: translateX(0%);
    top: 40%;
    margin-bottom: 30%;
  }
  .titletext h1 {
    line-height: 1;
    top: 50rem;
    font-size: 3.75em;
  }
 .titletext h2 {
    font-size: 1.2em; 
 }
 .titledetails {
     left: 0;
   transform: translateX(0%);
   bottom: 0;
   position: absolute;
   font-size: 0.8em;
 }
  .divider {
    height: 40px;
  }
  .rsvp {
    width: 100px;
    height: 55px;
  }
  .rsvp p {
    top: 2px;
    left: -10px;
  }
  .openmenu {
    width: 95vw;
    background-color: rgba(255,255,255,0.9);
  }
  .timeline {
    margin: 0 auto 60% auto;
  }
  .timeline::after {
    left: 31px;
  }
  .timeline-line{
    left: 50%;
  }
  .tl-container {
    width: 100%;
    left: 0;
  }
  .right {
    left: 0%;
  }
  .pagetitle {
    padding: 30% 0 2% 0;
  }
  .pagetitle h1 {
    font-size: 2.5em;
  }
  .mapo {
    width: 100%;
  }
  .mapflexbox {
    flex-direction:column;
    gap:0;
  }
  .wtscontainer .mapo iframe {
    min-height: 400px;
  }
  .travcontainer .mapo {
    height: 400px;
  }
  .travadd {
    margin-top: 10%;
  }
  .rsvptitle {
    padding: 10% 0 2% 0;
  }
  .rsvpform {
    margin-top: 20%;
    width: 80%;
    padding: 1%;
  }
  .rsvpres input, select {
    padding: 2% 10%;
  }
  .mobile-break {
    display: block;
  }
  .flexbox {
    flex-direction: column;
  }
  .travcontainer .mapo {
    width: 100%;
  }
  .travtext {
    width:100%;
    text-align: center;
  }
  .rsvpcontainer {
     background-image: url("../img/rsvp-mobile.jpg");
   }
  .rsvpradio {
    margin: 10px auto;
  }
  .rsvpres span {
    margin-right: 0px;
  }
}