body {
    background-image: url("../Images/Background-1.jpg");
    background-color: #111111;
}
.RegText {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18px;
    text-align: center;
    color: #999999;
}
.GridContainerIndex {
    display: grid;
    padding: 10px;
    height: 92vh;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:"TP  TP  TP"
                         ".  CE  ."
                         ".  .   .";
    column-gap: 5px;
    row-gap: 5px;
}
.GridContainerGalleries {
    display: grid;
    padding: 10px;
    height: 92vh;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 60px 4fr 4fr 1fr;
    grid-template-areas: "HD  HD  HD  HD"
                         "M1  M2  M3  M4"
                         "AG1  AG2  AG3  AG4"
                         "AG5  AG6  AG7  AG8"
                         "FT  FT  FT  FT";
    column-gap: 10px;
    row-gap: 10px;
}
.GridContainerIndGall {
    
    display: grid;
    padding: 10px;
    height: 92vh;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 60px 40px 2fr 2fr 1fr;
    grid-template-areas: "HD  HD  HD  HD"
                         "M1  M2  M3  M4"
                         "GN  GN  GN  GN"
                         "A1  A1  A1  A1"
                         "A2  A2  A2  A2"
                         "FT  FT  FT  FT";
    column-gap: 10px;
    row-gap: 10px;
}
    .AreaThumbnails-G1 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        text-align: center;
        padding: 10px;
        grid-area: A1;
        justify-content: space-around;

        padding-top: 20px;
        padding-bottom: 20px;
        border: 2px solid rgb(80, 80, 80);
    }
    .AreaThumbnails-G1 img {
        width: 20vw;
        padding: 2vw 1vw;
    }
    /* .AreaThumbnails-G2 {
        display: flex;
        flex-direction: row;
        text-align: center;
        padding: 10px;
        grid-area: A2;
        justify-content: space-around;

        padding-top: 20px;
        padding-bottom: 20px;
        border: 2px solid rgb(80, 80, 80);
    }
    .AreaThumbnails-G2 img {
        width: 20vw;
        padding: 4px;
        border: 1px solid rgb(121, 121, 121);
    } */

.GridContainerAbCon {
    display: grid;
    padding: 10px;
    height: 92vh;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 60px 4fr 1fr;
    grid-template-areas:    "HD HD HD HD"
                            "M1 M2 M3 M4"
                            ".  TX TX  ."
                            "FT FT FT FT";
    column-gap: 10px;
    row-gap: 10px;
}
.AbConTextArea {
    display: flex;
    flex-direction: column;
    grid-area: TX;
    padding-top: 80px;
    padding-bottom: 50px;
    align-items: center;
}
.AbConTextArea img {
    width: 120px;
    padding: 10px;
}
.CentreCell {
    display: flex;
    flex-direction: column;
    grid-area: CE;
    /* width: 60%; */
    padding: 100px;
    justify-content: center;
    align-items: center;

}
.TePa {
    display: flex;
    margin: auto;
    width: 60%;
    height: auto;
    justify-content: center;   
    grid-area: TP;
}
.MyBox {
    display: flex;
    width: 220px;
    height: 160px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18px;
    text-align: center;
    color: #999999;
    justify-content: center;
    align-items: center;
}
img {                 /* <<<<<<<<  Is this needed? */
    width: 100%;
    height: auto;
}
.AreaThumbnails-G1 img, .AreaThumbnails-G2 img {    
    animation-name: DropAni-1;
    animation-duration: 2s;
}
.Line {
    width: 12em;
    height: 1px;
    background-color: #6699ff;
    margin-top: 12px;
    margin-bottom: 8px;
}
.Line2 {
    width: 70%;
    height: 1px;
    background-color: #6699ff;
    margin-top: 14px;
    margin-bottom: 10px;
}
.Line3 {
    grid-area: TX;
    width: 70%;
    height: 1px;
    margin:auto;
    background-color: #6699ff;
    margin-top: 14px;
    margin-bottom: 10px;
}
.Header {
    display: flex;
    margin: auto;
    width: 40%;
    height: auto;
    grid-area: HD;
    justify-content: center;
}
.Footer {
    display: flex;
    margin: auto;
    width: 40%;
    grid-area: FT;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18px;
    text-align: center;
    color: #999999;
    justify-content: center;
    padding-bottom: 20px;
}
.Menu1 {
    display:flex;
    grid-area: M1;
    justify-content: space-around;
    align-items: center;
    background-color: rgba(20,20,20,0.2);
    padding-bottom: 10px;

}
.Menu2 {
    display: flex;
    grid-area: M2;
    justify-content: space-around;
    align-items: center;
    padding-bottom: 10px;
    background-color: rgba(20,20,20,0.2);
}
.Menu3 {
    display: flex;
    grid-area: M3;
    justify-content: space-around;
    align-items: center;
    padding-bottom: 10px;
    background-color: rgba(20,20,20,0.2);
}
.Menu4 {
    display: flex;
    grid-area: M4;
    justify-content: space-around;
    align-items: center;
    padding-bottom: 10px;
    background-color: rgba(20,20,20,0.2);
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
li {
    float: left;
}
li a, .DropButton {
    display: inline-block;
    /* color: rgb(226, 142, 42); */
    text-align: center;
    padding: 14px 16px;
    width: 140px;
    text-decoration: none;

}
li a:hover  .Dropdown:hover  .DropButton  {
    background-color: rgba(100,100,100,0.6);
    border-radius: 12px;
}

li .Dropdown {
    display: inline-block;
}
.DropdownContent {
    display: none;
    position: absolute;
    background-color: rgba(60,60,60,0.9);
    border-radius: 12px;
    min-width: 140px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6);
    z-index: 1;
    animation-name: DropAni-1;
    animation-duration: 0.8s;
}
.DropdownContent a {
    /* color: white; */
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    animation-name: DropAni-1;
    animation-duration: 1s;
}
.DropdownContent a:hover {
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    animation-name: DropAni-1;
    animation-duration: 1s;
}
.Dropdown:hover .DropdownContent {
    display: block;
    animation-name: DropAni-1;
    animation-duration: 1s;
}
@keyframes DropAni-1 {
    0% {opacity: 10%;}
    100% {opacity: 100%;}
}
@keyframes BorderFade {
    0% {border: 2px solid rgba(150,150,150,0);}
    35% {border: 2px solid rgba(116, 118, 207, 0.822);}
    100% {border: 2px solid rgb(150, 150, 150, 1);}
}
.GalName {
    display: block;

    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 20pt;
    color: rgb(235, 163, 31);
    text-align: center;
    align-items: center;
    grid-area: GN;
    border: 1px solid rgb(110, 113, 155);
}
.Area1 {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 10px;
    grid-area: A1;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
    border: 2px solid rgba(150, 150, 150, 0);
}
.Area2 {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 10px;
    grid-area: A2;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
    border: 2px solid rgba(202, 40, 40, 0);
}
.Area3 {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 10px;
    grid-area: A3;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
    border: 2px solid rgba(202, 40, 40, 0);
}
.Area4 {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 10px;
    grid-area: A4;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
    border: 2px solid rgba(202, 40, 40, 0);
}
.AreaG1 {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 10px;
    grid-area: AG1;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
    border: 2px solid rgba(150, 150, 150, 0);
}
.AreaG2 {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 10px;
    grid-area: AG2;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
    border: 2px solid rgba(202, 40, 40, 0);
}
.AreaG3 {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 10px;
    grid-area: AG3;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
    border: 2px solid rgba(202, 40, 40, 0);
}
.AreaG4 {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 10px;
    grid-area: AG4;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
    border: 2px solid rgba(202, 40, 40, 0);
}
.AreaG5 {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 10px;
    grid-area: AG5;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
    border: 2px solid rgba(150, 150, 150, 0);
}
.AreaG6 {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 10px;
    grid-area: AG6;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
    border: 2px solid rgba(202, 40, 40, 0);
}
.AreaG7 {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 10px;
    grid-area: AG7;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
    border: 2px solid rgba(202, 40, 40, 0);
}
.AreaG8 {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 10px;
    grid-area: AG8;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
    border: 2px solid rgba(202, 40, 40, 0);
}

.AreaThumbnails-G1:hover, .AreaThumbnails-G2:hover {
    animation-name: BorderFade;
    animation-duration: 3s; 
}
.SendArea {
    margin: auto;
    text-align: center;
    padding: 30px 0px 10px 0px;
    box-sizing: border-box;
}
button {
    background-color: transparent;
    border: none;
    cursor: pointer;
}
#BTformSubmit {
    width: 70%;
}
a:link {
    display: flex;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 20px;
    text-align: center;
    color: #eeee33;
    text-decoration: none;
    letter-spacing: 2px;
    justify-content: center;
    align-items: center;
    text-shadow: 2px 2px 6px #000000;
}
a:visited {
    display: flex;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 20px;
    text-align: center;
    color: #eeee33;
    text-decoration: none;
    letter-spacing: 2px;
    justify-content: center;
    align-items: center;
    text-shadow: 2px 2px 6px #000000;
}
a:hover {
    display: flex;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 20px;
    text-align: center;
    color: white;
    text-decoration: none;
    letter-spacing: 2px;
    justify-content: center;
    align-items: center;
    text-shadow: 2px 2px 6px #000000;
}
a:active {
    display: flex;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 20px;
    text-align: center;
    color: #336699;
    text-decoration: none;
    letter-spacing: 2px;
    justify-content: center;
    align-items: center;
    text-shadow: 2px 2px 6px #000000;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> @media >>>>>>*/
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
@media only screen and (max-width: 650px) {
    .GridContainerGalleries {
        display: grid;
        padding: 10px;
        height: 92vh;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 60px 60px 2fr 2fr 2fr 2fr 1fr;
        grid-template-areas: "HD  HD"
                             "M1  M2"
                             "M3  M4"
                             "AG1  AG2"
                             "AG3  AG4"
                             "AG5  AG6"
                             "AG7  AG8"
                             "FT  FT";
        column-gap: 10px;
        row-gap: 10px;
    }
    .Dropdown:hover .DropdownContent {
        display: none;
    }
        .GridContainerIndGall {
            display: grid;
            padding: 10px;
            height: 92vh;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 60px 60px 1fr 2fr 2fr 2fr 2fr 1fr;
            grid-template-areas: "HD  HD"
                                 "M1  M2"
                                 "M3  M4"
                                 "GN  GN"
                                 "A1  A1"
                                 "A2  A2"
                                 "FT  FT";
            column-gap: 10px;
            row-gap: 10px;
        }

        .AreaThumbnails-G1 img {
            width: 40vw;
            padding: 2vw 1vw;
        }
        .GridContainerAbCon {
            display: grid;
            padding: 10px;
            height: 92vh;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 60px 60px 4fr 1fr;
            grid-template-areas:    "HD HD"
                                    "M1 M2"
                                    "M3 M4"
                                    "TX TX"
                                    "FT FT";
            column-gap: 10px;
            row-gap: 10px;
        }
    .TePa {
        width: 90%;
    }
    .Header {
        width: 90%;
    }
    .Footer {
        width: 90%;
    }
}