body {overflow: hidden; }

.wrapper {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

@font-face { font-family: Sophia; src: url('/static/SophiaChristie.ttf'); }

@font-face { font-family: Quicksand; src: url('/static/Quicksand-Regular.otf'); }

.alert {
    width: 80% !important;
    text-align: center !important;   
}

#flashes {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 100%;
    bottom: 10vh;
    min-height: 50vh;
    align-items: center;
    justify-content: flex-end;
    z-index: 5;
}

#page_content {

    position: relative;
    z-index: 3;

}

#travel_heading {
    margin-left:auto;
    margin-right:auto;
    max-width: 80vw;
    text-align: center;
}

#magnolia_link {
    border-bottom: hidden;
}
#magnolia_logo {
    height:5vw;
    margin: 2% 0 2% 0;
}

#map{
    height: 30vh;
    width:80vw;
    border-radius: 2%;
    margin-left:auto;
    margin-right:auto;
}

#directions_div {
    margin-left:auto;
    margin-right:auto;
    width:80vw;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    /* align-items: center; */
    
}

#maps_btn, #google_btn {
    width:30vw;
    font-family: Quicksand;
}

.animate-in {
    -webkit-animation: fadeIn 1s ease-in;
    animation: fadeIn 1s ease-in;
}

.animate-out {
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
    opacity: 0;
}

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

#left_flowers {
    z-index: 10;
    position: absolute;
    height: 28vw;
    width: auto; 
    left:-5vw;
    top:-3vw;
    pointer-events: none;
}

#right_flowers {
    z-index: 10;
    position: absolute;
    height: 43vw;
    width: auto; 
    left:75vw;
    top:-3vw;
    pointer-events: none;
}

.btn {
    font-family: Quicksand;
}

#song_header {
    font-family: Quicksand;
}

.form-check-label {
    font-family: Quicksand;
}

#person_number {
    font-family: Quicksand;
}

.form-control {
    font-family: Quicksand;
}

#guest_number {
    font-family: Quicksand;
}

#submit {
    font-family: Quicksand;
}

.hide {
    display:none;
}

.show {
    display:block;
}

.song-request {
        margin-top:20px;
        text-align:center;
    }

#radio_choices {
    text-align: left;
}

#rsvp_submit {
    padding-bottom: 10vh;

}

#bottom_border {
    height:20px;
    border-bottom:1px solid grey;
}

#guest_count_title {
    font-family: Quicksand;
    text-align:center;
    z-index: 4;
    position: relative;

}

#person_number {
    margin-top: 20px;
    margin-bottom:-20px;


}

#form_title {
    font-family: Quicksand;
    max-width: 768px;
    margin: 50px auto 10px;
    justify-content: center;
    text-align: center;
    font-size: 2.5vw;
}

#form_note {
    font-family: Quicksand;
    max-width: 768px;
    margin: 0px auto 20px;
    justify-content: center;
    text-align: center;
    font-size: 1.5vw;
}

form {
    max-width: 768px;
    margin: 0 auto 0;

}

.form-control {
    margin-top:20px !important;
    
}

#song_header {
    font-size:2vw;
}

#valid_field {
    font-family: Quicksand;
    color:green; 
    opacity:90%; 
    font-size:1.2vw;
}

#invalid_field {
    font-family: Quicksand;
    color: red;
    opacity:90%;
    font-size:1.2vw;

}

#homepage_title {
    background-color: white;

}

.navigation_links {

    display: flex;
    max-width: 600px;
    justify-content: space-evenly;
    list-style: none;
    font-size: 1.5vw;
    margin:5px auto 20px;
    padding:0px;
    z-index: 5;
    font-family: Quicksand;

}

a {
    padding:5px 10px 2px;
    border-bottom: 2px solid grey;
    transition: all 1s ease;

}

a:hover {
    text-decoration: none;
    border-bottom: 2px solid black;
    
}

a:link, a:visited {
color: black;

}

a.active_link {
    border-bottom: 2px solid lightgray;
    color: grey;
}

#names {
    font-family: Sophia;
    font-size: 6vw;
    pointer-events: none;
    margin-left:1vw;
}

#left_empty {
    width:120px;
}
#right_empty {
    width:100px;
}
#date, #location, #countdown {
    font-family: Quicksand;
    font-size:2vw;
}
#countdown_row {
    margin-bottom:5px;
}

#guest_count_form {
    margin-top:0%;
    z-index: 5;
    /* //background-color: rgba(255, 255, 255, 0.582);
    border-radius: 24px;
} */
}

#physical_address {
    margin-top: 3%;
    margin-bottom: 7%;
    text-align: center;
    font-family: Quicksand;
    font-size:2vw;
}

.loader_div {
    
    position: absolute;
    top:70%;
    left:50%;
    transform: translate(-40px, -40px);
    
}

.loader_elips {
  display: inline-block;
  position: absolute;
  width: 80px;
  height: 80px;
  transition-property: opacity;
  transition-duration: 1s;
  transition-timing-function: linear;
}

.loader_elips div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #4e6e31;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.loader_elips div:nth-child(1) {
  left: 8px;
  animation: loader_elips1 0.6s infinite;
}
.loader_elips div:nth-child(2) {
  left: 8px;
  animation: loader_elips2 0.6s infinite;
}
.loader_elips div:nth-child(3) {
  left: 32px;
  animation: loader_elips2 0.6s infinite;
}
.loader_elips div:nth-child(4) {
  left: 56px;
  animation: loader_elips3 0.6s infinite;
}

@keyframes loader_elips1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes loader_elips3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes loader_elips2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}

#homepage_image, #guest_image, #registry_div {
    opacity: 0;
    transition-property: opacity;
    transition-duration: 1s;
    transition-timing-function: linear;
}


#hotel_info {
    margin: 0% 10% 5% 10%;
    text-align: justify;
    font-family: Quicksand;
    font-size: 2vw;
    z-index: 10;
    position: relative;
}

#la_quinta_div {
    display: flex;
    width: 100vw;
    justify-content: center;

}

#la_quinta_logo {
    width: 60vw;
    cursor: pointer;

}

/* if width is less than 800, cellphone */
@media screen and (max-width: 768px) {

    #magnolia_logo {
        height:15vw;
        margin: 4% 0 4% 0;
    }

    #map{
        margin-top:0%;
    }

    #left_flowers {
        /* display: none; */
        height: 30vw;
        top:0vw;
        left:-5vw;
    }

    #right_flowers {
        /* display: none; */
        height: 45vw;
        left:72vw;
    }

    #form_title {
        font-size:5vw;
        margin: 5px auto 10px;
    }

    #form_note {
        font-size:2.5vw;  
    }

    #song_header {
        font-size:4vw;
    }   
    #valid_field {
        color:green; 
        opacity:90%; 
        font-size:3vw;
    }

    #invalid_field {
        color: red;
        opacity:90%;
        font-size:3vw;

    }

    #names {
        font-size:10.5vw;
    }
    #left_empty {
        width:10px;
    }
    #right_empty {
        width:0px;
    }
    #date, #location, #countdown {
        font-size:4vw;
    }

    .navigation_links {
        
        position: fixed;
        height:7vh;
        width:100vw;
        max-width: 768px;
        bottom:-5px;
        display:flex;
        align-items: center;
        font-size: 5vw;
        background-color: white;
        opacity: 0.95;
        border-radius: 3%;
        padding-bottom: 20px;
        margin-bottom: 0px;
        transition: transform 0.5s ease-in;

    }

    .nav_arrow{
        background-color: transparent;
        opacity: 0.9;
        position: fixed;
        right:25%;
        bottom:30%;
        border-radius: 4%;
        transform: translateX(24vw);
        cursor: pointer; 
        transition: transform 0.5s ease-in-out 0.15s;
    }
    #line1 {
        background-color: grey;
        width:20px;
        height:3px;
        transform: rotate(-45deg);
        margin:9px;

    }
    #line2 {
        background-color: grey;
        width:20px;
        height:3px;
        transform: rotate(45deg);
        margin:9px;
    }
    .nav_active {
        transform: translateX(0%);
    
    }

    .clicked {
        transform: rotateY(180deg);
    }

    #guest_count_form {
        margin-top:0%;

    }

    #physical_address {
    margin-top: 3%;
    margin-bottom: 15%;
    text-align: center;
    font-family: Quicksand;
    font-size:4vw;
}

    #directions_div {
        margin-left:auto;
        margin-right:auto;
        width:100vw;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        /* align-items: center; */
        
    }

    #maps_btn, #google_btn {
        width:47vw;
        min-height: 10vw;
        font-size: 4vw;
    }

    .loader_div {
    position: absolute;
    bottom: 14vh;
    right: 80px;
}

    #hotel_info {
        margin: 0% 10% 150px 10%;
        text-align: justify;
        font-family: Quicksand;
        font-size: 4vw;
    }

    #la_quinta_logo {
        width: 70vw;

    }
}


#footer {
/*  PLACEHOLDER */
}