/**** MEDIA QUERIES *****/

/* PHONES */
@media screen and (max-device-width: 812px) and (orientation: portrait) {

    body {
        font-size: 150%;
        margin: 0px;
        padding: 0px;
    }    

    /**** NAV ****/
    nav {
        height: 8vh;
        width: 100vw; 
        position: fixed;
    }

    header {
        width: 100vw;
        height: 100vh;
    }

    .underbar {
        display: none;
    }

    .hamburger{
        display: inline-block;
        position: absolute;
        width: 10vw;
        right: 3vw;
        top: 2vh;
        z-index: 3;
    }

    .hamburger img {
        width: 100%;
    }

    .closeHamburger {
        display: none;
        width: 10vw;
        position: fixed;
        right: 3vw;
        top: 0vh;
        color: white;
        font-size: 5em;
        z-index: 3;
    }

    .navList {
        float: none;
        font-size: 3em; 
        color: white;
        display: none;
        align-content: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        background: rgba(0,0,0,0.7);
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: -72px;
        left: 0px;
        right: 0px;
    }

    .navList li {
        
    }

    .logoDiv {
        float: left;
        max-width: 70vw;
    }

    .a4nLogo {
        max-height: 100%;
        width: 100%;
    }

    /** FOOTER **/

    footer {
        height: 60vh;
    }

    .socialMediaButtons {
        grid-template-columns: 15vw 15vw 15vw 15vw;
        grid-auto-rows: 15vw;
        grid-column-gap: 4vw;
    }

    footer h4 {
        margin-bottom: 10%;
    }

    .footerContact {
        margin-top: 15%;
    }

    .footerCopyright {
        margin-top: 25%;
    }

    /**** INDEX ****/

    #nextShowBox {
        display: none;
    }

    .indexSection {
        padding: 10%;
    }

    .indexSection p, .indexSection h1 {
        text-align: center;
        width: 80vw;
    }

    .reviews {
        grid-template-columns: 96%;
    }

    .socialMed img {
        width: 35%;
    }

    .socialMed img:first-child{
        margin-right: 5%;
    }

    /* OTHER BODIES */

    .bodySections {
        width: 100vw;
    }

    .bodySection {
        width: 90vw;
        margin: 15% 0px 0px 0px ;
        padding: 0px 5vw;
        text-align: center;
    }

    .bodySection h1 {
        margin-top: 5%;
        font-size: 2.5em;
    }

    /* ABOUT */
    #historySection {
        padding: 2.5vw;
        max-width: 85vw;
        width: 85vw;
        right: 5vw;
        left: 5vw;
    }

    .member {
        width: 100%;
        height: auto;
        margin-bottom: 10%;
    }

    .member img {
        float: none;
        height: auto;
        width: 60%;
        max-width: 60%;
        margin: auto 20%;
    }

    .memberDescription{
        width: 100%;
        margin: 0px;
    }

    .member p {
        font-size: .8em;
    }

    /* EVENT INFO */
    .gigsContainer {
        width: 100%;
        float: none;
        grid-template-columns: 20% 20% 20% ;
        grid-template-rows: 20%;
        grid-column-gap: 15%;
        grid-row-gap: 35%;
    }

    .gigsContainer img {
        width: 100%;
    }

    .gigDiv h3 {
        font-size: .8em;
    }

    #songListTable {
        width: 100%;
    }

    .picture-slider {
        width: 90%;
        max-width: 90vw;
        margin: auto 5%;
    }

    .logoContainer {
        width: 100%;
    }

    .quoteBlock {
        width: 100%;
    }

    #bookingReviewsSection .quoteDiv{
        float: none;
        width: 90%;
        margin: auto 5% 15% 5%;
    }

    #bookingReviewsSection .readMore {
        text-align: center;
    }

    /* SCHEDULE */

    #schedulePage {
        width: 100vw;
        margin-top: 8vh;
    }

    #scheduleHeading h1 div {
        margin-top: -2vh;
    }

    #scheduleHeading a {
        float: left;
        font-size: 1.5em;
    }

    #calendarTileContainer {
        grid-template-columns: 80vw;
        grid-row-gap: 5vw;
    }

    .calendarTile {
        min-height: 30vh;
    }


    /* MEDIA */
    #mediaPage {
        margin-top: 10vh;
    }

    #videoBlock {
        width: 80vw;
        margin: 1vh 10vw auto 10vw;
        height: 50vh;
    }

    .one-time {
        height: 40vh;
    }

    .slider iframe {
        width: 100%;
        height: 100%;
    }

    .photosContainer {
        display: grid;
        grid-template-columns: 25vw 25vw 25vw;
        grid-auto-rows: 25vw;
        grid-row-gap: 3vw;
        grid-column-gap: 7vw;
        
        margin: 5% auto;
    }


    .close, .next, .previous {
        font-size: 4em;
    }

    /* CONTACT */
    #contactFormBody{
        margin: 5% 2.5%;
    }

    #contactFormBody h1 {
        text-align: center;
    }

    #contactIntroMessage {
        width: 100%;
        text-align: center;
    }

    #contactFormBody p {
        font-size: 1.5em;
    }

    form input[type=text] {
        height: 5vh;
        width: 100%;
        float: none;
    }

    ::placeholder {
        font-size: 1.5em;
    }

    form input[type=submit]{
        background: none;
        border: solid 5px #CE0F0F;
        color: #CE0F0F;
        display: block;
        height: 5vh;
        width: 30vw;
        border-radius: 40px;
        margin: 10px auto auto auto;
        letter-spacing: 3px;
        font: bold 1.5em Calibri;
    }

}

/* COMPUTER */
@media only screen and (max-width: 990px) {
    nav {
        font-size: .9em;
    }

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


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

    .pageBody {
        margin-top: 8vh;
    }