/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
.row.content {height: 1500px}

/* Set gray background color and 100% height */
.sidenav {
    background-color: #f1f1f1;
    height: 100%;
}

/* Set black background color, white text and some padding */
footer {
    background-color: #555;
    color: white;
    padding: 15px;
}
.rsvp {
    width: 100%; 
    height: 500px;
    background-image: url("../images/rsvp2.png");
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0;
    background-position: center;
}
.content-message {
    margin-top:20px;
    margin-bottom:100px;
}
img.logov2 {
    max-width: 35%;
    height:auto;    
}
.family-name {
    padding-bottom:35px;
}
#num_seats {
    margin-bottom:25%;
    margin-left:15%;
    width:60px;
}
.family-name-eigtheen-chars {
    font-size: 35px;
}
.family-name-Corazon {
    padding-bottom: 27px;
}
.family-name-Bierthwirth {
    padding-bottom: 19px;
}
.family-name-Quan {
    padding-bottom: 19px;
}
.number_seats-Quan {
    margin-bottom: 52%;
    margin-left: 24%;
}
.family-name-Sablan {
    padding-bottom: 28px;
}
.family-name-Piol {
    margin-top: 20px;
}
.family-name-Salazar {
    padding-bottom:15px;
}
.family-name-Soares, .family-name-Fetherei, .family-name-Schroeder, .family-name-Quiambao, .family-name-Mangahas, .family-name-Hernandez  {
    padding-bottom:25px;
}
#num_seats.Quiambao {
    margin-bottom: 18%;
    margin-left: 9%;
}
h1.Canlas {
    font-size:20px;
}
.family-name-Tayag, .family-name-Chao, .family-name-Bunn, .family-name-Belen, .family-name-Alugu{
    padding-bottom:45px;
}
.family-name.Munoz {
    padding-bottom:22px;
}
#num_seats.Corazon {
    margin-bottom: 18%;
    margin-left: 10%;
}
#num_seats.Bierthwirth {
    margin-bottom: 16%;
    margin-left: 9%;
}
#num_seats.Milagros {
    margin-bottom: 18%;
    margin-left: 10%;
}
#num_seats.Quan {
    margin-bottom: 30%;
    margin-left: 17%;
}
#num_seats.Galano {
    margin-bottom: 21%;
    margin-left: 12%;
}
#num_seats.Lazich {
    margin-bottom: 20%;
    margin-left: 12%;
}
#num_seats.Luperte {
    margin-bottom: 20%;
    margin-left: 12%;
}
#num_seats.Mangahas {
    margin-bottom: 18%;
    margin-left: 12%;
}
#num_seats.Ocampo {
    margin-bottom: 20%;
    margin-left: 12%;
}
#num_seats.number_seats-Jeanine {
    margin-bottom: 22%;
    margin-left: 12%;
}
#num_seats.Bea {
    margin-bottom: 28%;
    margin-left: 15%;
}
#num_seats.Canlas {
    margin-bottom: 15%;
    margin-left: 8%;
}
#num_seats.Sotalbo {
    margin-bottom: 22%;
    margin-left: 12%;
}
#num_seats.Tayag {
    margin-bottom: 20%;
    margin-left: 12%;
}
#num_seats.Tolentino {
    margin-bottom: 17%;
    margin-left: 10%;
}
#num_seats.Valdez {
    margin-bottom: 19%;
    margin-left: 11%;
}
#num_seats.Angeles {
    margin-bottom: 19%;
    margin-left: 10%;
}
#num_seats.Eduardo {
    margin-bottom: 18%;
    margin-left: 9%;    
}
#num_seats.Eduardo {
    margin-bottom: 18%;
    margin-left: 9%;    
}
#num_seats.Eduardo {
    margin-bottom: 18%;
    margin-left: 9%;    
}
#num_seats.Balatbat {
    margin-bottom: 23%;
}
.reception-direction {
    margin-bottom:100px;
}
.rsvp_wrapper {
    margin-bottom:100px;
}








@media only screen and (max-width: 1980px) {

}
@media only screen and (max-width: 1024px) {
    .rsvp {
       height:500px;

    }
    .family-name {
    padding-bottom:45px;
    }
}
/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 820px) {
    .rsvp {
       height:500px;
    }
    #num_seats.Balatbat {
        margin-bottom: 14%;
    }
    .family-name.Munoz {
        margin-bottom: 0%;
    }

}
/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
    .rsvp {
       height:250px;
    }
    .sidenav {
    height: auto;
    padding: 15px;
    }
    .row.content {height: auto;} 
    .family-name {
    padding-bottom:0px;
    font-size: 32px;
    }
    .content-message {
        margin-bottom:50px;
    }
    #num_seats {
    margin-bottom:13%;
    margin-left:11%;
    width:25px;
    height:25px;
    }
}
@media only screen and (max-width: 540px) {
    .rsvp {
       height:250px;
    }
    .sidenav {
    height: auto;
    padding: 15px;
    }
    .row.content {height: auto;} 
    .family-name {
    padding-bottom:5px;
    font-size: 32px;
    }
    #num_seats {
    margin-bottom:13%;
    margin-left:11%;
    width:25px;
    height:25px;
    }
    .content-message {
        margin-bottom:100px;
    }
    #num_seats.Quiambao {
    margin-bottom: 8%;
    margin-left: 9%;
    }
    .family-name.Munoz {
        margin-bottom: 14%;
    }
}
@media only screen and (max-width: 414px) {
    .family-name {
    padding-bottom:22px;
    font-size: 24px;
    }
    #num_seats {
    margin-bottom:18%;
    margin-left:11%;
    width:25px;
    height:25px;
    }
    .family-name-Piol {
    margin-top: 0;
    }
    .family-name {
    padding-bottom:25px;
    }
    #num_seats.Balatbat, #num_seats.Du, #num_seats.Bea, #num_seats.number_seats-Granadil {
        margin-bottom: 16%;
    }
    .family-name.Munoz {
        padding-bottom:0px;
    }
    #num_seats.number_seats-Bierthwirth, #num_seats.Corpuz, #num_seats.Galano, #num_seats.Lazich, #num_seats.number_seats-Jeanine, #num_seats.number_seats-Schroeder, #num_seats.Sotalbo, #num_seats.Tayag, #num_seats.Valdez, 
    #num_seats.Angeles, #num_seats.Avelina, #num_seats.PH {
        margin-bottom: 13%;
    }
    #num_seats.Luperte, #num_seats.Ocampo{    
        margin-bottom: 13%;
        margin-left: 9%;
    }
    #num_seats.Tolentino, #num_seats.Corazon,  #num_seats.Mangahas {
        margin-bottom: 11%;
        margin-left: 8%;
    }
    #num_seats.Canlas {
        margin-bottom: 9%;
        margin-left: 5%;
    }
    #num_seats.Photographers {
        margin-bottom: 7%;
        margin-left: 5%;
    }


}
@media only screen and (max-width: 411px) {
    .family-name {
    padding-bottom:25px;
    font-size: 24px;
    }
}
@media only screen and (max-width: 390px) {
    .family-name {
    padding-bottom:28px;
    font-size: 24px;
    }
    #num_seats {
    margin-bottom:15%;
    margin-left:11%;
    width:25px;
    height:25px;
    }
    .family-name-Piol {
    margin-top: 0;
    }
}
@media only screen and (max-width: 375px) {
    .family-name {
        padding-bottom:40px;
        font-size: 24px;
    }
    #num_seats {
        margin-bottom:12%;
        font-size: 12px;
        width:20px;
        height:20px;
    }
    #num_seats.Corazon, #num_seats.number_seats-Bierthwirth, #num_seats.Corpuz, #num_seats.Galano, #num_seats.Lazich, #num_seats.Luperte,
    #num_seats.Mangahas, #num_seats.Ocampo, #num_seats.number_seats-Jeanine, #num_seats.Sotalbo, #num_seats.Tayag, #num_seats.Tolentino,
    #num_seats.Valdez, #num_seats.Angeles, #num_seats.Angeles, #num_seats.Balatbat{
        margin-bottom: 8%;
        margin-left: 6%;
    }
    #num_seats.Avelina {
        margin-left: 6%;
    }
    h1.Canlas {
        font-size:12px;
    }
    #num_seats.Quiambao {
        margin-left: 6%;
    }
    #num_seats.Bea {
        margin-bottom: 10%;
        margin-left: 8%;
    }
    #num_seats.Du {
        margin-bottom: 12%;
        margin-left: 8%;
    }
    image.png
    .family-name-eigtheen-chars {
    font-size: 20px;
    }
    .family-name-Piol {
    margin-top: 0;
    }
}

@media only screen and (max-width: 360px) {
    .family-name {
        padding-bottom:40px;
        font-size: 24px;
    }
    #num_seats {
        margin-bottom:12%;
        font-size: 12px;
        width:20px;
        height:20px;
    }
    #num_seats.Corazon, #num_seats.number_seats-Bierthwirth, #num_seats.Corpuz, #num_seats.Galano, #num_seats.Lazich, #num_seats.Luperte,
    #num_seats.Mangahas, #num_seats.Ocampo, #num_seats.number_seats-Jeanine, #num_seats.Sotalbo, #num_seats.Tayag, #num_seats.Tolentino,
    #num_seats.Valdez, #num_seats.Angeles, #num_seats.Angeles, #num_seats.Balatbat{
        margin-bottom: 8%;
        margin-left: 6%;
    }
    #num_seats.Avelina {
        margin-left: 6%;
    }
    h1.Canlas {
        font-size:12px;
    }
    #num_seats.Quiambao {
        margin-left: 6%;
    }
    #num_seats.Bea {
        margin-bottom: 10%;
        margin-left: 8%;
    }
    #num_seats.Du {
        margin-bottom: 12%;
        margin-left: 8%;
    }
    .family-name.Munoz {
        margin-bottom: 21%;
    }
    image.png
    .family-name-eigtheen-chars {
    font-size: 20px;
    }
    .family-name-Piol {
    margin-top: 0;
    }
}
@media only screen and (max-width: 320px) {

}
@media only screen and (max-width: 280px) {

}