.mainPage{
    position: absolute;
    background-color: rgb(112, 118, 231);
    height: 100%;
    margin: 0;
/*     border: 2px solid red;
 */    overflow: scroll;
}
.titleBlock{ /*Div for Header photo, Title, subtitle and Menu*/
    position: relative;
/*     border: 2px solid yellow;
 */}
.headImage{ /*Background Header Image*/
    display: block;
    position: relative;
    width: 100%;
    opacity: .6;
}
@font-face {
    font-family: 'Beyond The Mountains';
    src: url('https://fonts.cdnfonts.com/css/beyond_the_mountains.woff'),format("woff");
    font-weight: normal;
    font-style: normal;
}
.titleBlock>h2{/*Main Title - The Buzz*/
    margin-top: 0;
    position: absolute;
    top:20%;
    width: 100%;
    text-align: center;
    font-family: 'Beyond The Mountains',sans-serif;
    color: gold;
    font-size: 12vw;
    text-shadow: .8rem .8rem 1rem black;

}
.titleBlock h3{/*Subtitle - 5 Piece Cover Band*/
    margin-top: 0;
    position: absolute;
    top:65%;
    width: 100%;
    text-align: center;
    font-family: 'Beyond The Mountains',sans-serif;   
    color: gold;
    font-size: 7vw;
    text-shadow: .8rem .8rem 1rem black;

}
.menuDiv{ /*Container div for Nav Menu*/
    position: absolute;
    color: gold;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-shadow: 2px 2px black;
    font-size: 4vw;
    top:0;
    right: 0;
    width: auto;
    height:5.5vw;
    padding-left: 3%;
    padding-right: 3%;
    text-align: center;
/*     border: 2px solid red;
 */    overflow-y: hidden;
}
.menuText{ /*Menu Header - MENU*/
    margin-top: 0;
    margin-bottom: 1%;
    position: relative;
    top: 5%;
}
.menuListText{ /*Menu List Items*/
    text-shadow: none;
    position: relative;
    margin: 0;
/*     top:1.6rem;
 */    line-height: 130%;
}
.menuListText a{ /*Menu Links to other pages*/
    text-decoration: none;
    color: rgb(255, 255, 255);
}
.menuDiv:hover{ /*Menu Behaviour when hovered over*/
    height: auto;
    background-color: black;
    text-shadow: none;
}
.showreel{
    position: relative;
/*     background-image: linear-gradient(rgb(73, 73, 241), rgb(200, 200, 245)) ;
 */    width:60%;
    padding: 0;
    font-size: 6vw;
/*     border:7px inset rgb(198, 197, 197);
 */    align-items: center;
    margin: auto;
    padding-bottom: 5%;
}
.showreel>h3{
    text-align: center;
    color: gold;
    text-shadow: .2rem .2rem .3rem black;
}
.showreel>p{
    color: gold;
    text-shadow: .2rem .2rem .2rem black;
    width: 70%;
    margin: auto;
    text-align: justify;
    padding-top: 5%;
}
.showreelVid{
    align-self: center;
    position: relative;
    width: 97%;
    left: 2%;
    border: 0;
    margin: auto;
}
.imgContainer{
    width: 75%;
    margin: auto;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 80% );
/*     border: 3px solid rgb(24, 2, 219);
 */    overflow-y: hidden;
    background-color: rgb(134, 116, 238);
}

.indexImgLeft{
    grid-column: 1/2;
    width: 100%;
}
 .indexImgCentre{
    grid-column: 2/3;
    width: 100%;
}
 .indexImgRight{
    grid-column: 3/4;
    width: 100%;
}
.gigGuide{
   height: 50%; 
}


 @media (min-width:1100px)and (max-width:1350px){
    .menuDiv{
        font-size: 1.8vw;
        height: 1.8vw;
    }
    .showreel{
        font-size: 3vw;
    }
}
@media (min-width:800px){
    .menuDiv{
        font-size: 2.3vw;
        height: 2.3vw;
    }
    .showreel{
        font-size: 3vw;
    }
}
@media (min-width:1351px){
    .menuDiv{
        font-size: 1.5vw;
        height: 1.5vw;
    }
    .showreel{
        font-size: 2vw;
    }
}