/*
    The following will reset all margins and paddings.
    Web Browsers have their own default settings on start up.
    Comment if desired.
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

a {
    text-decoration: none;
}

/* ------------------------------------------------------  Login Page */
.LogInPg {
    width: 75vw;
    height: 95vh;
    margin: 1vh auto;
    background-image: url(./Images/Slate1.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
}

.LogInBox {
    width: 56vw;
    margin: 0 auto 0 10vw;
    padding-top: 30vh;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, auto);
    grid-template-areas: 'Announce .' 'lblEmaiAddr Address' 'lblPwd Pwd' '. SignIn' 'ValErr ValErr';
}

    .LogInBox p {
        grid-area: Announce;
        font-family: Segoe Print;
        font-size: 6vmin;
        color: white;
        justify-self: right;
    }

.ValErr {
    grid-area: ValErr;
    font-size: 2.0vmin;
    padding-top: 3vh;
    justify-self: center;
}

.lblEmaiAddr {
    grid-area: lblEmaiAddr;
    color: white;
    font-size: 2vmin;
    justify-self: right;
    padding: 5vh 1vw 0 0;
}

.Address {
    grid-area: Address;
    font-size: 2vmin;
    padding-top: 5vh;
}

.lblPwd {
    grid-area: lblPwd;
    color: white;
    font-size: 2vmin;
    justify-self: right;
    padding: 10px 10px 10px 0;
}

.Pwd {
    grid-area: Pwd;
    font-size: 2vmin;
    padding: 10px 0 30px 0;
}

.SignIn {
    grid-area: SignIn;
    color: white;
    font-size: x-large;
    background-color: #39373A;
    justify-self: left;
}

@media only screen and (max-width: 1640px) {
    .LogInPg {
        width: 80vw;
    }

    .LogInBox {
        margin: 0 auto 0 12vw;
    }
}

@media only screen and (max-width: 1280px) {
    .LogInPg {
        width: 90vw;
    }

    .LogInBox {
        width: 70vw;
        margin: 0 auto 0 10vw;
        padding-top: 25vh;
    }
}

@media only screen and (max-width: 1000px) {
    .LogInPg {
        width: 100vw;
    }

    .LogInBox {
        width: 80vw;
        margin: 0 auto 0 12vw;
        padding-top: 20vh;
        grid-template-columns: .7fr 1fr;
        grid-template-areas: 'Announce Announce' 'lblEmaiAddr Address' 'lblPwd Pwd' '. SignIn' 'ValErr ValErr';
    }

        .LogInBox p {
            justify-self: left;
            padding-left: 5px;
        }

    .ValErr {
        padding-top: 1vh;
    }
}

@media only screen and (max-width: 820px) and (max-height: 560px) {
    .LogInBox {
        width: 40vw;
        margin: 0 auto 0 27vw;
        padding-top: 25vh;
        grid-template-columns: .5fr;
        grid-template-rows: repeat(7, auto);
        grid-template-areas: 'Announce' 'lblEmaiAddr' 'Address' 'lblPwd' 'Pwd' 'SignIn' 'ValErr';
    }

        .LogInBox p {
            font-size: 6vmin;
            padding-left: 15px;
        }

    .ValErr {
        font-size: 11px;
        padding-top: 1vh;
    }

    .lblEmaiAddr {
        font-size: 12px;
        justify-self: left;
        padding: 2vh 0 0 2vw;
    }

    .Address {
        padding: 0 2vw;
    }

    .lblPwd {
        font-size: 12px;
        justify-self: left;
        padding: 2vh 0 0 2vw;
    }

    .Pwd {
        padding: 0 0 2vh 2vw;
    }

    .SignIn {
        justify-self: center;
    }
}

@media only screen and (max-width: 820px) and (min-height: 561px) and (max-height: 1000px) {
    .LogInBox {
        padding-top: 15vh;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(7, auto);
        grid-template-areas: 'Announce' 'lblEmaiAddr' 'Address' 'lblPwd' 'Pwd' 'SignIn' 'ValErr';
    }

    .ValErr {
        font-size: 2.3vmin;
        padding-top: 1vh;
    }

    .lblEmaiAddr {
        justify-self: left;
        padding: 2vh 0 0 20vw;
    }

    .Address {
        padding: 0 20vw;
    }

    .lblPwd {
        justify-self: left;
        padding: 2vh 0 0 20vw;
    }

    .Pwd {
        padding: 0 0 2vh 20vw;
    }

    .SignIn {
        justify-self: center;
    }
}

@media only screen and (max-width: 820px) and (min-height: 1001px) {
    .LogInBox {
        padding-top: 10vh;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(7, auto);
        grid-template-areas: 'Announce' 'lblEmaiAddr' 'Address' 'lblPwd' 'Pwd' 'SignIn' 'ValErr';
    }

    .ValErr {
        font-size: 2.3vmin;
        padding-top: 1vh;
    }

    .lblEmaiAddr {
        justify-self: left;
        padding: 2vh 0 0 20vw;
    }

    .Address {
        padding: 0 20vw;
    }

    .lblPwd {
        justify-self: left;
        padding: 2vh 0 0 20vw;
    }

    .Pwd {
        padding: 0 0 2vh 20vw;
    }

    .SignIn {
        justify-self: center;
    }
}

@media only screen and (max-width: 640px) and (max-height: 560px) {
    .LogInBox {
        width: 60vw;
        margin: 0 auto 0 20vw;
        padding-top: 22vh;
    }

    .ValErr {
        font-size: 2.5vmin;
    }

    .lblEmaiAddr {
        padding: 1vh 0 0 3vw;
    }

    .Address {
        padding: 0 3vw;
    }

    .lblPwd {
        padding: 1vh 0 0 3vw;
    }

    .Pwd {
        padding: 0 0 2vh 3vw;
    }
}

@media only screen and (max-width: 640px) and (min-height: 561px) {
    .LogInBox {
        margin: 0 auto 0 12vw;
        padding-top: 12vh;
    }

    .ValErr {
        font-size: 2.5vmin;
    }

    .lblEmaiAddr {
        padding: 1vh 0 0 10vw;
    }

    .Address {
        padding: 0 10vw;
    }

    .lblPwd {
        padding: 1vh 0 0 10vw;
    }

    .Pwd {
        padding: 0 0 2vh 10vw;
    }
}

@media only screen and (max-width: 480px) and (max-height: 560px) {
    .LogInBox {
        width: 70vw;
        margin: 0 auto 0 15vw;
        padding-top: 18vh;
    }

    .lblEmaiAddr {
        padding: 1vh 0 0 4vw;
    }

    .Address {
        padding: 0 0 0 4vw;
    }

    .lblPwd {
        padding: 1vh 0 0 4vw;
    }

    .Pwd {
        padding: 0 0 1vh 4vw;
    }

    .SignIn {
        font-size: large;
    }
}

@media only screen and (max-width: 480px) and (min-height: 561px) {
    .lblEmaiAddr {
        padding: 1vh 0 0 8vw;
    }

    .Address {
        padding: 0 0 0 8vw;
    }

    .lblPwd {
        padding: 1vh 0 0 8vw;
    }

    .Pwd {
        padding: 0 0 1vh 8vw;
    }

    .SignIn {
        font-size: large;
    }
}

@media only screen and (max-width: 430px) {
    .LogInPg {
        width: 96vw;
        background-image: none;
        border: 5px thin black;
        border-radius: 8px;
        background-color: #39373A;
    }

    .LogInBox {
        width: 85vw;
        margin: 0 auto 0 2vw;
    }

        .LogInBox p {
            font-family: Segoe Print;
            font-size: 7vmin;
        }

    .ValErr {
        font-size: .7rem;
    }

    .lblEmaiAddr {
        font-size: 1rem;
        padding: 1vh 0 0 8vw;
    }

    .Address {
        padding: 0 0 0 8vw;
    }

    .lblPwd {
        font-size: 1rem;
        padding: 1vh 0 0 8vw;
    }

    .Pwd {
        padding: 0 0 1vh 8vw;
    }

    .SignIn {
        width: 100px;
        font-size: large;
        border-style: solid;
        border-width: 1px;
        border-color: #39373A;
        border-radius: 6px;
    }
}

/* ------------------------------------------------------  Navigation Bar  */
.navbar {
    width: 100vw;
    background-color: black;
}

.MenuItems {
    display: grid;
    grid-template-columns: 1fr repeat(3, minmax(min-content, 140px)) repeat(2, minmax(min-content, 175px)) minmax(min-content, 1fr);
    grid-template-areas: '. Home About Contact Accnt LogOut Logo';
}

    .MenuItems a {
        color: white;
    }

        .MenuItems a:hover {
            color: rgb(159, 157, 157);
        }

.Home {
    grid-area: Home;
    justify-self: center;
    align-self: center;
}

.About {
    grid-area: About;
    justify-self: center;
    align-self: center;
}

.Contact {
    grid-area: Contact;
    justify-self: center;
    align-self: center;
}

.Accnt {
    grid-area: Accnt;
    justify-self: center;
    align-self: center;
}

.LogOut {
    grid-area: LogOut;
    justify-self: center;
    align-self: center;
}

.Logo {
    grid-area: Logo;
    justify-self: center;
    padding: 3px 0;
}

@media only screen and (max-width: 800px) {
    .MenuItems {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-template-areas: 'Home Logo Logo Logo' 'About Contact Accnt LogOut';
    }
}

@media only screen and (max-width: 480px) {
    .MenuItems {
        display: grid;
        grid-template-columns: 1fr .5fr 1fr;
        grid-template-rows: repeat(3, 1fr);
        grid-template-areas: 'Logo Logo Logo' 'Home About Contact' 'Accnt . LogOut';
    }
}

/* ------------------------------------------------------  Home Page  */
.container {
    width: 75vw;
    margin: auto;
}

.mainview {
    margin-top: 2vh;
    border: 5px thin black;
    border-radius: 8px;
    background-color: #eee;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    grid-template-areas: 'HomeTitle imgHeaddress' 'lblWelcome imgHeaddress' 'HomeP1 HomeP1';
    padding: 20px 50px;
}

.HomeTitle {
    grid-area: HomeTitle;
    font-size: 4rem;
    font-weight: 700;
    align-self: center;
}

.imgHeaddress {
    grid-area: imgHeaddress;
    justify-self: center;
    padding-top: 1vh;
}

.lblWelcome {
    grid-area: lblWelcome;
    font-size: 1.8rem;
    align-self: center;
}

.HomeP1 {
    grid-area: HomeP1;
    padding-top: 1vh;
    line-height: 1.5;
}

.row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-template-areas: 'block1 block2 block3';
    grid-gap: 20px;
    margin-top: 2vh;
}

.block1 {
    grid-area: block1;
    display: grid;
    grid-template-columns: .8fr 1fr;
    grid-template-rows: 2rem repeat(4, auto);
    grid-template-areas:
        'HomeSubTitle1 HomeSubTitle1'
        'HomeSP1a HomeSP1a'
        'Dir DirDescr'
        'HomeSP1b HomeSP1b'
        'Alum AlumDescr';
}

.HomeSubTitle1 {
    grid-area: HomeSubTitle1;
    font-size: 20px;
    font-weight: 700;
}

.HomeSP1a {
    grid-area: HomeSP1a;
    line-height: 1.3;
}

    .HomeSP1a p {
        padding-bottom: 5px;
    }

.Dir {
    grid-area: Dir;
    justify-self: center;
}

.DirDescr {
    grid-area: DirDescr;
    color: darkgray;
    align-self: center;
    padding-left: 10px;
}

.HomeSP1b {
    grid-area: HomeSP1b;
    line-height: 1.3;
}

    .HomeSP1b p {
        padding-bottom: 10px;
    }

.MsgBrd {
    grid-area: MsgBrd;
    justify-self: center;
}

.MsgBrdDescr {
    grid-area: MsgBrdDescr;
    color: darkgray;
    align-self: center;
    padding-left: 10px;
}

.block2 {
    grid-area: block2;
    display: grid;
    grid-template-columns: .35fr 1fr;
    grid-template-rows: 2rem repeat(8, auto);
    grid-template-areas:
        'HomeSubTitle2 HomeSubTitle2'
        'HomeSP2a HomeSP2a'
        'ReuReg ReuReg'
        'HomeSP2b HomeSP2b'
        'RegBtn RegDescr'
        'HomeSP2c HomeSP2c'
        'Things2Do ThingsDescr'
        'HomeSP2d HomeSP2d'
        'MsgBrd MsgBrdDescr';
}

.HomeSubTitle2 {
    grid-area: HomeSubTitle2;
    font-size: 20px;
    font-weight: 700;
}

.HomeSP2a {
    grid-area: HomeSP2a;
    line-height: 1.3;
}

    .HomeSP2a p {
        padding-bottom: 10px;
    }

.HomeSP2b {
    grid-area: HomeSP2b;
    line-height: 1.3;
}

    .HomeSP2b p {
        padding-bottom: 5px;
    }

.Things2Do {
    grid-area: Things2Do;
    justify-self: center;
    padding-top: 10px;
}

.ThingsDescr {
    grid-area: ThingsDescr;
    color: darkgray;
    align-self: center;
}

.ReuReg {
    grid-area: ReuReg;
    font-size: 16px;
    font-weight: 700;
    padding-top: 10px;
}

.HomeSP2c {
    grid-area: HomeSP2c;
    padding-top: 20px;
    line-height: 1.3;
}

    .HomeSP2c p {
        padding-bottom: 5px;
    }

.RegBtn {
    grid-area: RegBtn;
    justify-self: center;
    padding-top: 10px;
}

.RegDescr {
    grid-area: RegDescr;
    color: darkgray;
    align-self: center;
}

.HomeSP2d {
    grid-area: HomeSP2d;
    padding-top: 20px;
    line-height: 1.3;
}

    .HomeSP2d p {
        padding-bottom: 5px;
    }

.Alum {
    grid-area: Alum;
    justify-self: center;
    padding-top: 10px;
}

.AlumDescr {
    grid-area: AlumDescr;
    color: darkgray;
    align-self: center;
}

.block3 {
    grid-area: block3;
    display: grid;
    grid-template-columns: .5fr 1fr;
    grid-template-rows: 2rem repeat(6, auto);
    grid-template-areas:
        'HomeSubTitle3 HomeSubTitle3'
        'HomeSP3a HomeSP3a'
        'BSkt BSktDescr'
        'HomeSP3b HomeSP3b'
        'Rem RemDescr'
        'HomeSP3c HomeSP3c'
        'Reunion ReunionDescr';
}

.HomeSubTitle3 {
    grid-area: HomeSubTitle3;
    font-size: 20px;
    font-weight: 700;
}

.HomeSP3a {
    grid-area: HomeSP3a;
    line-height: 1.3;
}

    .HomeSP3a p {
        padding-bottom: 5px;
    }


.BSkt {
    grid-area: BSkt;
    justify-self: center;
}

.BSktDescr {
    grid-area: BSktDescr;
    color: darkgray;
    align-self: center;
}

.HomeSP3b {
    grid-area: HomeSP3b;
    line-height: 1.3;
}

    .HomeSP3b p {
        padding-bottom: 5px;
    }

.Rem {
    grid-area: Rem;
    justify-self: center;
}

.RemDescr {
    grid-area: RemDescr;
    color: darkgray;
    align-self: center;
}

.HomeSP3c {
    grid-area: HomeSP3c;
    padding-top: 20px;
    line-height: 1.3;
}

    .HomeSP3c p {
        padding-bottom: 5px;
    }

.Reunion {
    grid-area: Reunion;
    justify-self: center;
}

.ReunionDescr {
    grid-area: ReunionDescr;
    color: darkgray;
    padding-left: 5px;
    align-self: center;
}

@media only screen and (max-width: 1440px) {
    .container {
        width: 90vw;
    }
}

@media only screen and (max-width: 1280px) {
    .container {
        width: 95vw;
    }
}

@media only screen and (max-width: 1150px) {
    .container {
        width: 95vw;
    }

    .mainview {
        grid-template-columns: 1fr .5fr;
        grid-template-areas: 'HomeTitle imgHeaddress' 'lblWelcome imgHeaddress' 'HomeP1 HomeP1';
        padding: 25px;
    }

    .row {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-template-areas: 'block1 block2' 'block3 .';
    }

    .block1 {
        grid-template-rows: repeat(4, auto);
    }

    .block2 {
        grid-template-rows: repeat(7, auto);
    }

    .block3 {
        grid-template-rows: repeat(5, auto);
    }
}

@media only screen and (max-width: 800px) {
    .container {
        width: 95vw;
    }

    .mainview {
        padding: 25px;
    }

    .HomeTitle {
        font-size: 3rem;
    }

    .HomeP1 {
        line-height: 1.3;
    }

    .row {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, auto);
        grid-template-areas: 'block1' 'block2' 'block3';
        grid-row-gap: 20px;
    }

    .block1 {
        grid-template-columns: .5fr 1fr;
    }

    .block2 {
        grid-template-columns: .2fr 1fr;
    }

    .block3 {
        grid-template-columns: .3fr 1fr;
    }
}

@media only screen and (max-width: 640px) {
    .HomeTitle {
        font-size: 2.4rem;
    }

    .lblWelcome {
        font-size: 1.4rem;
    }

    .block2 {
        grid-template-columns: .25fr 1fr;
    }
}

@media only screen and (max-width: 480px) {
    .container {
        width: 95vw;
    }

    .mainview {
        margin-top: 1vh;
        grid-template-rows: repeat(3 1fr);
        grid-template-areas: 'HomeTitle imgHeaddress' 'lblWelcome imgHeaddress' 'HomeP1 HomeP1';
        padding: 10px;
    }

    .HomeTitle {
        font-size: 7vmin;
        align-self: end;
    }

    .imgHeaddress {
        padding-top: 10px;
    }

    .lblWelcome {
        font-size: 5vmin;
        align-self: end;
    }

    .HomeP1 {
        font-size: 1rem;
        line-height: 1.1;
    }

    .row {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, auto);
        grid-template-areas: 'block1' 'block2' 'block3';
    }

    .HomeSubTitle1 {
        font-size: 18px;
        padding-bottom: 3px;
    }

    .HomeSP1 {
        font-size: 1rem;
        line-height: 1.2;
    }

    .block2 {
        grid-template-columns: .3fr 1fr;
    }

    .HomeSubTitle2 {
        font-size: 18px;
    }

    .HomeSP2a {
        font-size: 1rem;
        line-height: 1.2;
    }

    .HomeSP2b {
        font-size: 1rem;
        line-height: 1.2;
        padding: 10px 0;
    }

    .HomeSubTitle3 {
        font-size: 18px;
    }

    .HomeSP3b {
        font-size: 1rem;
        line-height: 1.2;
    }

    .HomeSP3c {
        font-size: 1rem;
        line-height: 1.2;
    }
}

/* ------------------------------------------------------  Video Page */
.btnVidRtrn {
    position: absolute;
    left: 5px;
    top: 55px;
    right: 0px;
    bottom: 0px;
}

.btnVidRtrn a {
    background-color: white;
    color: black;
    border: 2px solid #eee;
    padding: 10px;
    border-radius: 6px;
}

    .btnVidRtrn a:hover {
        background-color: #eee;
    }

.VideoPg {
    margin-top: 60px;
    margin-left: 12%;
    width: 75%;
}

.Player {
    position: relative;
    padding-bottom: 56.25%;
    height: 0px;
}

.Player iframe {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    height: 100%;
    width: 100%;
}

@media only screen and (max-width: 1440px) and (min-height: 500px) {
    .VideoPg {
        margin-left: 10%;
        width: 80%;
    }
}

@media only screen and (max-width: 1280px) and (min-height: 500px) {
    .VideoPg {
        margin-left: 7%;
        width: 85%;
    }
}

@media only screen and (max-width: 1150px) and (min-height: 500px) {
    .VideoPg {
        margin-left: 5%;
        width: 90%;
    }
}

@media only screen and (max-width: 800px) {
    .btnVidRtrn {
        top: 95px;
    }
}

@media only screen and (max-width: 800px) and (min-height: 500px) {
    .VideoPg {
        margin-left: 2%;
        width: 96%;
    }

}

@media only screen and (max-width: 480px) {
    .btnVidRtrn {
        top: 130px;
    }
}

/* ------------------------------------------------------  Registration Page */
.RegPg {
    width: 50vw;
    margin: 1vh auto;
}

.Reg {
    padding-bottom: 10px;
    display: grid;
    grid-template-columns: 1.2fr .5fr .1fr .8fr;
    grid-template-rows: repeat(24, auto);
    grid-template-areas:
        'RegImg RegImg RegImg RegImg'
        'RegTitle RegTitle RegTitle RegTitle'
        'lblName lblName lblName lblName'
        'Name Name Name Name'
        'Fee Fee Fee Fee'
        'RegInfo . optYes optYes'
        'Info1 . optNo optNo'
        'Info1 lblGuest lblGuest Guest '
        'Info1 . NoGuest NoGuest'
        'Info1 . Photo Photo'
        'Info1 . lblPhQty PhQty'
        '. . Directory Directory'
        'Dinner . MealCM MealCM'
        'Info2 . . CMmeal'
        'Info2 . . CMmeal'
        'Info2 . . CMmeal'
        'Info2 . . CMmeal'
        'Info2 . MealG MealG'
        'Info2 . . Gmeal'
        'Info2 . . Gmeal'
        'Info2 . . Gmeal'
        'Info2 . . Gmeal'
        'Info2 . . .'
        'Info2 btnRegSave . btnRegCancel';
}

.RegImg {
    grid-area: RegImg;
    height: 300px;
    justify-self: center;
}

.RegTitle {
    grid-area: RegTitle;
    font-size: 30px;
    font-weight: 600;
    justify-self: center;
    padding: 2vh 0 3vh 0;
}

.lblName {
    grid-area: lblName;
    justify-self: center;
    padding-bottom: 5px;
}

.Name {
    grid-area: Name;
    font-size: 20px;
    justify-self: center;
}

.Fee {
    grid-area: Fee;
    font-size: 20px;
    justify-self: center;
    padding-bottom: 20px;
}

.RegInfo {
    grid-area: RegInfo;
    font-weight: 700;
    align-self: center;
    justify-self: center;
    padding-bottom: 10px;
}

.Info1 {
    grid-area: Info1;
}

    .Info1 p {
        padding-bottom: 5px;
    }

    .Info1 ul {
        padding: 10px 0;
        color: #2374ff;
        line-height: 1;
    }

    .Info1 li {
        list-style-type: none;
        padding: 5px 0 0 35px;
    }

.Dinner {
    grid-area: Dinner;
    font-weight: 700;
    justify-self: center;
}

.Info2 {
    grid-area: Info2;
}

    .Info2 ol {
        padding-left: 20px;
        line-height: 1;
    }

    .Info2 li {
        padding: 10px 0 0 5px;
    }

    .Info2 p {
        padding-top: 10px;
    }

.optYes {
    grid-area: optYes;
    padding-bottom: 5px;
}

.optNo {
    grid-area: optNo;
    padding-bottom: 30px;
}

.lblGuest {
    grid-area: lblGuest;
    justify-self: right;
    padding: 2px 5px 0 0;
}

.Guest {
    grid-area: Guest;
}

.NoGuest {
    grid-area: NoGuest;
    padding-top: 10px;
}

.Photo {
    grid-area: Photo;
    padding-top: 20px;
}

.lblPhQty {
    grid-area: lblPhQty;
    justify-self: right;
    padding: 5px 5px 30px 0;
}

.PhQty {
    grid-area: PhQty;
    padding-top: 3px;
}

.Directory {
    grid-area: Directory;
    padding-bottom: 30px;
}

.MealCM {
    grid-area: MealCM;
}

.CMmeal {
    grid-area: CMmeal;
}

.MealG {
    grid-area: MealG;
    padding-top: 5px;
}

.Gmeal {
    grid-area: Gmeal;
}

.btnRegSave {
    grid-area: btnRegSave;
    justify-self: right;
    padding-top: 20px;
}

.btnRegCancel {
    grid-area: btnRegCancel;
    align-self: end;
}

@media only screen and (max-width: 1920px) {
    .RegPg {
        width: 60vw;
    }
}

@media only screen and (max-width: 1800px) {
    .RegPg {
        width: 70vw;
    }
}

@media only screen and (max-width: 1640px) {
    .RegPg {
        width: 80vw;
    }
}

@media only screen and (max-width: 1500px) {
    .RegPg {
        width: 85vw;
    }
}

@media only screen and (max-width: 1340px) {
    .RegPg {
        width: 95vw;
    }
}

@media only screen and (max-width: 1200px) {
    .RegPg {
        width: 98vw;
        margin: 5px auto;
    }
}

@media only screen and (max-width: 1060px) {
    .RegTitle {
        font-size: 28px;
        padding: 2vh 0;
    }
}

@media only screen and (max-width: 900px) {
    .RegTitle {
        font-size: 24px;
    }
}

@media only screen and (max-width: 800px) {
    .Reg {
        grid-template-columns: .5fr .1fr 1fr;
        grid-template-rows: repeat(18, auto);
        grid-template-areas:
            'RegImg RegImg RegImg'
            'RegTitle RegTitle RegTitle'
            'lblName lblName lblName'
            'Name Name Name'
            'Fee Fee Fee'
            'RegInfo RegInfo RegInfo'
            'Info1 Info1 Info1'
            '. optYes optYes'
            '. optNo optNo '
            'lblGuest Guest Guest'
            '. NoGuest NoGuest'
            '. Photo Photo '
            '. lblPhQty PhQty'
            '. Directory Directory'
            'Dinner Dinner .'
            'Info2 Info2 Info2'
            'MealCM MealCM MealG'
            'CMmeal CMmeal Gmeal'
            'btnRegSave btnRegSave btnRegCancel';
        padding: 0;
        font-size: 14px;
    }

    .RegTitle {
        font-size: 20px;
    }

    .Fee {
        font-size: 18px;
    }

    .RegInfo {
        justify-self: left;
        padding: 0 0 0 10px;
    }

    .Info1 p {
        padding: 5px 10px;
    }

    .Info1 ul {
        padding-bottom: 20px;
        line-height: 1;
    }

    .Info1 li {
        list-style-type: none;
        padding-left: 40px;
    }

    .Dinner {
        justify-self: left;
        padding: 0 0 0 10px;
    }

    .Info2 ol {
        padding-left: 30px;
    }

    .Info2 li {
        padding: 5px 5px 5px 5px;
    }

    .MealCM {
        justify-self: center;
        padding: 10px 0 5px 0;
    }

    .CMmeal {
        justify-self: center;
    }

    .MealG {
        padding: 10px 0 5px 0;
    }

    .Gmeal {
        padding-left: 5vw;
    }

    .btnRegSave {
        padding: 20px 0 20px 0;
    }

    .btnRegCancel {
        padding: 20px 0 20px 40px;
    }
}

@media only screen and (max-width: 640px) {
    .Reg {
        grid-template-columns: .5fr .2fr 1fr;
    }

    .Fee {
        font-size: 16px;
    }
}

@media only screen and (max-width: 480px) {
    .Reg {
        grid-template-columns: .5fr .2fr .7fr;
    }

    .RegImg {
        height: 260px;
    }

    .RegTitle {
        padding: 10px 0;
    }
}

@media only screen and (max-width: 400px) {
    .RegImg {
        height: 230px;
    }

    .RegTitle {
        font-size: 20px;
    }
}

/* ------------------------------------------------------  Registration Thanks Page */
.ThxPg {
    width: 26vw;
    margin: 1vh auto;
}

.Thx {
    padding-bottom: 10px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(7, auto);
    grid-template-areas:
        'ThxImg'
        'ThxTitle'
        'ThxName'
        'NameTxt'
        'ThxMsg'
        'ThxFee'
        'btnThxOK';
}

.ThxImg {
    grid-area: ThxImg;
    width: 450px;
    justify-self: center;
}

.ThxTitle {
    grid-area: ThxTitle;
    font-size: 30px;
    font-weight: 600;
    justify-self: center;
    padding: 20px 0 20px 0;
}

.ThxName {
    grid-area: ThxName;
    justify-self: center;
}

.NameTxt {
    grid-area: NameTxt;
    font-size: 20px;
    justify-self: center;
    padding-top: 5px;
}

.ThxMsg {
    grid-area: ThxMsg;
    padding-top: 30px;
}

    .ThxMsg p {
        padding-bottom: 10px;
    }

.ThxFee {
    grid-area: ThxFee;
    padding-top: 30px;
}

    .ThxFee p {
        padding: 5px 0 5px 5px;
    }

    .ThxFee ul {
        padding-bottom: 10px;
        line-height: 1;
    }

    .ThxFee li {
        list-style-type: none;
        padding-left: 35px;
    }

.btnThxOK {
    grid-area: btnThxOK;
    justify-self: center;
    padding-top: 30px;
}

@media only screen and (max-width: 1920px) {
    .ThxPg {
        width: 28vw;
    }
}

@media only screen and (max-width: 1800px) {
    .ThxPg {
        width: 30vw;
    }
}

@media only screen and (max-width: 1640px) {
    .ThxPg {
        width: 36vw;
    }
}

@media only screen and (max-width: 1400px) {
    .ThxPg {
        width: 40vw;
    }
}

@media only screen and (max-width: 1250px) {
    .ThxPg {
        width: 44vw;
    }
}

@media only screen and (max-width: 1150px) {
    .ThxPg {
        width: 46vw;
    }
}

@media only screen and (max-width: 1060px) {
    .ThxPg {
        width: 64vw;
    }

    .ThxTitle {
        font-size: 24px;
    }

    .btnThxOK {
        padding-top: 10px;
    }
}

@media only screen and (max-width: 800px) {
    .ThxPg {
        width: 76vw;
    }
}

@media only screen and (max-width: 640px) {
    .ThxPg {
        width: 98vw;
        margin: 5px auto;
    }

    .ThxTitle {
        font-size: 20px;
    }
}

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

    .ThxImg {
        width: 94vw;
    }
}

    /* ------------------------------------------------------  About Page */
    .AboutPg {
        width: 50vw;
        margin: 10px auto;
        background-color: #eee;
        border-radius: 8px;
    }

    .AbtBox {
        padding: 5px 55px 15px 55px;
    }

        .AbtBox h1 {
            padding-top: 15px;
        }

        .AbtBox p {
            line-height: 1.3;
            padding: 10px 0;
        }

    @media only screen and (max-width: 1280px) {
        .AboutPg {
            width: 80vw;
        }
    }

    @media only screen and (max-width: 800px) {
        .AboutPg {
            width: 90vw;
        }

        .AbtBox {
            padding: 5px 30px 15px 30px;
        }
    }

    @media only screen and (max-width: 480px) {
        .AboutPg {
            width: 95vw;
        }

        .AbtBox {
            padding: 5px 10px 15px 10px;
        }

            .AbtBox h1 {
                font-size: x-large;
            }

            .AbtBox p {
                line-height: 1.2;
            }
    }

    /* ------------------------------------------------------  Contact Page */
    .ContactPg {
        width: 50vw;
        margin: 10px auto;
        background-color: #eee;
        border-radius: 8px;
    }

    .CntctBox {
        width: 44vw;
        margin: 5px auto;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, auto);
        grid-template-areas: 'cTitle' 'cAddr' 'cPrgrph' 'Mailto';
    }

    .cTitle {
        grid-area: cTitle;
        padding-top: 15px;
    }

        .cTitle h1 {
            padding-bottom: 20px;
        }

        .cTitle p {
            padding-left: 10px;
        }

    .cAddr {
        grid-area: cAddr;
    }

        .cAddr ul {
            padding-top: 10px;
        }

        .cAddr li {
            list-style-type: none;
            padding-left: 25px;
        }

        .cAddr p {
            padding: 8px 0 0 25px;
        }

    .cPrgrph {
        grid-area: cPrgrph;
        padding: 20px 10px;
    }

        .cPrgrph ul {
            padding-bottom: 5px;
        }

        .cPrgrph li {
            list-style-type: none;
            padding-left: 35px;
        }

    .Mailto {
        grid-area: Mailto;
        padding-bottom: 25px;
    }

    @media only screen and (max-width: 1280px) {
        .ContactPg {
            width: 65vw;
        }

        .CntctBox {
            width: 56vw;
        }
    }

    @media only screen and (max-width: 1000px) {
        .ContactPg {
            width: 80vw;
        }

        .CntctBox {
            width: 70vw;
        }
    }

    @media only screen and (max-width: 800px) {
        .ContactPg {
            width: 94vw;
        }

        .CntctBox {
            width: 85vw;
        }
    }

    @media only screen and (max-width: 480px) {
        .CntctBox {
            width: 90vw;
        }

        .cTitle h1 {
            font-size: x-large;
            padding-bottom: 10px;
        }

        .cAddr ul {
            padding-top: 5px;
        }

        .cPrgrph li {
            padding-left: 25px;
        }

        .cAddr p {
            padding: 5px 0 0 25px;
        }
    }

    /* ------------------------------------------------------  Account Page */
    .BtnItems {
        width: 100vw;
        display: grid;
        grid-template-columns: 1fr repeat(2, .3fr) 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: '. btnUpdate btnCancel Logo';
    }

    .btnUpdate {
        grid-area: btnUpdate;
        justify-self: center;
        align-self: center;
    }

    .btnCancel {
        grid-area: btnCancel;
        justify-self: center;
        align-self: center;
    }

    .Account {
        width: 56vw;
        height: 80vh;
        margin: 1vh auto;
        background-image: url(./Images/Desks.jpg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: top;
    }

    .ActBox {
        width: 56vw;
        display: grid;
        grid-template-columns: .5fr repeat(2, 1fr);
        grid-template-rows: repeat(9, auto);
        grid-template-areas: 'ActTitle ActTitle ActTitle' '. Current New' 'lblActEmail ActEmail NewEmail' '. . valEmail' 'lblaPwd aPwd NewPwd' '. . valPwd' 'ChgPwd1 ChgPwd1 ChgPwd1' 'ChgPwd2 ChgPwd2 ChgPwd2' 'ChgPwd3 ChgPwd3 ChgPwd3 ';
        color: white;
    }

    .ActTitle {
        grid-area: ActTitle;
        justify-self: center;
        padding: 10vmax 0 4vmax 0;
    }

    .Current {
        grid-area: Current;
        font-size: 1.3rem;
        padding: 0 0 15px 20px;
    }

    .New {
        grid-area: New;
        font-size: 1.3rem;
        padding-left: 50px;
    }

    .lblActEmail {
        grid-area: lblActEmail;
        padding-right: 15px;
        justify-self: right;
    }

    .ActEmail {
        grid-area: ActEmail;
        color: #A4D1FF;
    }

    .NewEmail {
        grid-area: NewEmail;
        padding: 0 10px;
    }

    .valEmail {
        grid-area: valEmail;
        padding-left: 10px;
        padding-bottom: 5px;
    }

    .lblaPwd {
        grid-area: lblaPwd;
        padding-right: 15px;
        justify-self: right;
    }

    .aPwd {
        grid-area: aPwd;
        color: #D7FFD7;
    }

    .NewPwd {
        grid-area: NewPwd;
        padding-left: 10px;
    }

    .valPwd {
        grid-area: valPwd;
        padding-right: 10px;
    }

    .ChgPwd1 {
        grid-area: ChgPwd1;
        padding: 1vh 3vw;
    }

    .ChgPwd2 {
        grid-area: ChgPwd2;
        padding: 1vh 3vw;
    }

    .ChgPwd3 {
        grid-area: ChgPwd3;
        padding: 1vh 3vw;
    }

    @media only screen and (max-width: 1280px) {
        .BtnItems {
            grid-template-columns: 1fr repeat(2, .5fr) 1fr;
        }

        .Account {
            width: 70vw;
            background-size: cover;
        }

        .ActBox {
            width: 70vw;
        }

        .ActTitle {
            padding: 13vmax 0 4vmax 0;
        }

        .ChgPwd1 {
            padding: 1vh 2vw;
        }

        .ChgPwd2 {
            padding: 1vh 2vw;
        }

        .ChgPwd3 {
            padding: 1vh 2vw;
        }
    }

    @media only screen and (max-width: 1000px) {
        .Account {
            width: 96vw;
            height: 100%;
        }

        .ActBox {
            width: 90vw;
            margin: 0 auto;
            grid-template-columns: .4fr repeat(2, 1fr);
        }

        .ActTitle {
            padding: 16vmax 0 4vmax 0;
        }
    }

    @media only screen and (max-width: 800px) {
        .BtnItems {
            grid-template-columns: repeat(3, .5fr) 1fr;
        }

        .Account {
            width: 100vw;
        }

        .ActBox {
            width: 100vw;
            margin: 0;
            grid-template-columns: .5fr 1fr;
            grid-template-rows: repeat(12, auto);
            grid-template-areas: 'ActTitle ActTitle' 'Current Current' 'lblActEmail ActEmail' 'lblaPwd aPwd' 'New New' '. NewEmail' '. valEmail' '.  NewPwd' ' . valPwd' 'ChgPwd1 ChgPwd1' 'ChgPwd2 ChgPwd2' 'ChgPwd3 ChgPwd3 ';
        }

        .ActTitle {
            padding: 9vmax 0 4vmax 0;
        }

        .Current {
            font-size: 1.2rem;
            justify-self: center;
            padding: 0 0 10px 0;
        }

        .lblActEmail {
            padding: 0 15px 5px 0;
        }

        .New {
            font-size: 1.2rem;
            justify-self: center;
            padding: 25px 0 10px 0;
        }

        .NewEmail {
            padding: 0;
        }

        .NewPwd {
            padding: 0;
        }
    }

    @media only screen and (max-width: 640px) {
        .BtnItems {
            grid-template-columns: repeat(2, .5fr) 1fr;
            grid-template-areas: 'btnUpdate btnCancel Logo';
        }

        .btnUpdate {
            justify-self: right;
        }

        .Account {
            height: 100vh;
        }

        .ActTitle {
            font-size: 12px;
        }
    }

    @media only screen and (max-width: 480px) {
        .BtnItems {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            grid-template-areas: 'Logo Logo' 'btnUpdate btnCancel';
        }

        .ActBox {
            grid-template-columns: .5fr 1fr;
            grid-template-rows: repeat(12, auto);
            grid-template-areas: 'ActTitle ActTitle' 'Current Current' 'lblActEmail ActEmail' 'lblaPwd aPwd' 'New New' 'NewEmail NewEmail' 'valEmail valEmail' 'NewPwd  NewPwd' 'valPwd valPwd' 'ChgPwd1 ChgPwd1' 'ChgPwd2 ChgPwd2' 'ChgPwd3 ChgPwd3 ';
        }

        .ActTitle {
            font-size: 10px;
        }

        .Current {
            font-size: 4vmin;
        }

        .New {
            font-size: 4vmin;
        }

        .NewEmail {
            justify-self: center;
        }

        .valEmail {
            padding: 0;
            justify-self: center;
        }

        .NewPwd {
            padding-right: 15px;
            justify-self: center;
        }

        .valPwd {
            padding: 0 5px;
        }

        .ChgPwd1 {
            font-size: 14px;
        }

        .ChgPwd2 {
            font-size: 14px;
        }

        .ChgPwd3 {
            font-size: 14px;
        }
    }

    @media only screen and (max-width: 390px) {
        .ActTitle {
            font-size: 8px;
            padding: 4vmax 0 2vmax 0;
        }
    }

    .Clear {
        clear: both;
    }

    /* ------------------------------------------------------  Footer */
    footer {
        padding: 3px 0 0 2%;
    }

        footer p {
            font-size: small;
        }