#hero{
    background: no-repeat  url(imgs/Splash\ Page\ Pic\ Neon.png);
    background-size: 100%;
    height: 100vh;
    margin-top: -230px;
}

#herocontent{
    margin-top: 18rem;
}

#herocontent h1{
    color: whitesmoke;
    font-size: 3.8rem;
    font-weight: 700;
    margin-bottom: 2rem;
    text-align: left;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
				0px 8px 13px rgba(0,0,0,0.1),
                0px 18px 23px rgba(0,0,0,0.1);
}

#herocontent button{
    font-size: 1.5rem;
    /* margin-top: 1.8rem; */
    }

#ewalogo{
    width: 100px;
}

#neon{
    width: 450px;
    z-index: 3;
    position: absolute;
    top: 500px;
}

.navbar-brand{
    font-size: 1.8rem;
    margin-right: 2.4rem;
}

.nav-link{
    font-size: 1.2rem;
}

/* -------------------------Gallery Page Styles Start Here------------------------------------- */

#header{
    margin-top: 100px;
    text-align: center;
}

#header h3{
    font-style: italic;

}

.img-box{
    /* border: solid 2px green; */
    height: 30rem;
}

.logolarge img{
    max-width: 480px;
    margin: 1rem;
}



.flex-container{
    /* border: solid 1px black; */
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    padding-top: 1rem;
    flex-wrap: wrap;
}

.img_l{
    width: 350px;
    margin-bottom: 50px;
    border: solid 1px   black;
    box-shadow: 0px 4px 3px rgba(0,0,0,0.4),
    0px 8px 13px rgba(0,0,0,0.1),
    0px 18px 23px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
    .img_l {
        margin-bottom: 0px;
    }
  
    .blurb{
        font-size: 1rem;   
    }

    .logolarge img{
        max-width: 380px;
    }
}

.img_p{
    height: 350px;
    border: solid 1px   black;
    box-shadow: 0px 4px 3px rgba(0,0,0,0.4),
    0px 8px 13px rgba(0,0,0,0.1),
    0px 18px 23px rgba(0,0,0,0.1);
}

.img-label{
  
    margin-top: 2rem;
    margin-bottom: 2rem;
    font-weight: bold;
    font-size: 1.3rem;
  
}

.thumbnail{
    border: solid 1px   black;
    box-shadow: 0px 4px 3px rgba(0,0,0,0.4),
    0px 8px 13px rgba(0,0,0,0.1),
    0px 18px 23px rgba(0,0,0,0.1);
}
p{
    font-size: 1.3rem;
}

.headpic{
    width: 350px;
}

/* -----------------------------------------------------------------------------About Page Styling Starts Here------------------------------------------------ */

#parent{
    display: grid;
    grid-template-columns: repeat(3,1fr) ;
    grid-auto-rows: minmax(0px, max-content) ;
    max-width: 90%;
    margin: auto;
    margin-top: 170px;
    grid-template-areas:
    "headshot me me"
    "ew ew ytwax"
    "pp pp pp"
    "wpic wpic wpic"
     ;
}

   
/* .grid-item{
    /* border: solid 1px black; */
    /* } */

#item1 img{
    width: 100%;
    grid-area: headshot;
    margin-bottom: 1rem;
}

#item2{
    
    font-size: 1.5rem;
    justify-content: start;
    align-content: start;
    grid-area: me;
    padding-left: 2%;
    padding-right: 2%;
}

#item3{
    
    grid-area: ew;
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
    margin-bottom: 2rem;
}

#item3 p{
    padding-right: 1%;
}

#item4{
    
    grid-area: wpic;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between; 
}

#item4 img{
       min-width: 50%;
       width: 100%;
       padding: 5px;
}

#item5{  
    grid-area: pp;
    padding-bottom: 0px;
    margin-bottom: 1rem;
}

#ytpp{
    grid-area: ytpp;
    
}
#ytwax{
    grid-area: ytwax;
   
}




.grid-item p{
    margin-top: 8spx;
    
}

.grid-item h2{
    margin-top: 0px;
    margin-bottom: 0;
    font-size: 1.5rem;
}

*{
    margin: 0px;
}

.btn-link{
    align-self: center;
    justify-self: end;
    margin-top: 1rem;
}

/* ---------------------------------------------------------------------Commissions Page Styling Starts Here------------------------------------------------- */

#gridmaster{
    display: grid;
    max-width: 80%;
    margin: auto;
    margin-top: 100px;
    grid-template-areas:
    "griditem0 griditem0 griditem0 griditem0"
    "griditem1 griditem2 griditem2  griditem3"
    "griditem3a griditem3a griditem3a griditem3a"
    "griditem4 griditem4 griditem4 griditem4"
    "griditem5 griditem5 griditem5 griditem5"
    ;
}

.griditem img{
max-width: 100%;
margin: 0px;
padding: 5px;
}

#griditem0{
    /* grid-column: 1/4; */
    grid-area: griditem0;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2em;
    }

#griditem1{
    /* grid-column: 1/2; */
    grid-area: griditem1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

#griditem2{
    /* grid-column: 2/3; */
    grid-area: griditem2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-left: 40px;
    padding-right: 40px;
   }

#griditem2  h3{
   text-align: center;
   margin-bottom: 1rem;
   display: block;
    }

#griditem2  ul{
    list-style: none;
    padding-left: 0px;
    padding-right: 0px;
    }


#griditem2  ul li{
    margin-bottom: 1rem ;
    }

.bold{
    font-weight: bold;
}

#griditem3{
    /* grid-column: 3/4; */
    grid-area: griditem3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}

#griditem3a{
    /* grid-column: 1/4; */
    grid-area: griditem3a;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 1em;
}

#griditem4{
    /* grid-column: 1/4; */
    grid-area: griditem4;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 1em;
    margin-bottom: 1em;
}

#griditem5{
    /* grid-column: 1/4; */
    grid-area: griditem5;
    /* display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start; */
}

#griditem5 p{
    font-style: italic;
    text-align: center;
}

#griditem5  h3{
    text-align: center;
    margin-bottom: 1rem;
    margin-top: 1rem;
    display: block;
     }

     .caption{
         text-align: center;
         font-weight: bold;
         border: solid 1px black;
     }
   
      .prices{
         margin-left: 5em;
         font-weight: bold;
         margin-bottom: 1em;
     }
     /* --------------------------------------------------start of contact page styles--------------------------------------------------------------------- */

     #contactwrap{
         min-height : 95vh;
         padding-top: 50px;
         display: grid;
         max-width: 90%;
         margin: auto;
         /* margin-top: 50px; */
         grid-template-columns: 1fr 1fr 1fr;
         grid-template-rows: auto;
         grid-template-areas:
         "header header header"
         "fbfeed contacts map"
         "fbfeed contacts bookings";
     }

     /* .contactgrid{
        /* border: solid 2px black; */
     /* } */

     #map{
         grid-area: map;
         display: flex;
         flex-wrap: wrap;
         flex-direction: column;
         max-width: 100%;
         /* margin-top: 2rem; */
     }

     #map h3{
         margin-bottom: 0px;
     }
     #map p{
         margin-bottom: 0px;
     }
     
     #fbfeed{
         grid-area: fbfeed;
         display: flex;
         max-width: 100%;
         justify-content: center;     
    }

     #header{
         grid-area: header;
         display: flex;
         flex-direction: column;
         
     }

     #header p{
         margin-bottom: 2em;
     }

     #contacts{
        grid-area: contacts;
        justify-content: start;
        padding-left: 2em;
        padding-right: 2em;
        display: flex;
        flex-direction: column;
     }

     .strike{
         text-decoration: line-through;
     }

  
/* --------------------------------------------------------Footer Styling starts here----------------------------------------------------------- */

.footer{
    text-align: right;
    padding-right: 2rem;
    padding-left: 2rem;
    padding-top: .9rem;
    height: 3rem;
    /* margin-top: 2rem; */
    /* margin-bottom: 2rem; */
    color: #fff;
    font-size: 0.8REM;
}

.footer img{
    height: 100%;
}

/* #firstfoot{
    margin-top: -55px;
    height: 60px;
}  */

/* .............................................new navbar styling starts here........................................................................... */

.newnav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1b3a5a;
    padding: 1rem ;
   position: fixed;
    top: 0;
    width: 100%;
}

.logo a{
    color: #fff;
    font-size: 1.8rem;
}

.newnav img{
    width: 250px;
    padding-right: .5rem;
   
}

.links{
    display: flex;
    flex-direction: row;
    justify-self: flex-end;
    /* border: solid 1px red; */
    padding: 0px;
    margin: 0px;
    width: fit-content;
    
   
}

.links ul{
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0px;
}

.links li{
    padding-left: 1rem ;
    justify-self: end;
}

.links a{
    color: rgb(143, 142, 142);
    font-size: 1.7rem;
}

.links a:hover{
    color: #fff;
    text-decoration: none;
}

label{
    color: #fff;
    font-size: 2rem;
    position: absolute;
    right: 2rem;
    display: none;
}

#toggle{
   display: none;
}

.links li .active{
    color: #fff;
}


/* .toggle-button{
    position: absolute;
    top: 1.3rem;
    right: 2.3rem;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 2rem;
    height: 1.5rem;
}

.toggle-button .bar{
    height: 3px;
    width: 100%;
    background-color: #fff;
    border-radius: 10px;
} */


/* ......................................................media queries start here................................................................... */

@media (max-width:950px){

    #herocontent h1{
        color: whitesmoke;
        background: #1b3a5a;
        font-size: 2.8rem;
        font-weight: 700;
        text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
                    0px 8px 13px rgba(0,0,0,0.1),
                    0px 18px 23px rgba(0,0,0,0.1);
    }


    label{
        display: flex;
        cursor: pointer;
    }

    .links{
        display: none;
    }

    .newnav{
        flex-direction: column;
        align-items: flex-start;
    }
    
    .newnav ul{
        flex-direction: column;
        padding-top: 1rem;
    }

    #toggle:checked + .links{
        display: flex;
    }

    #contactwrap{
        grid-template-areas:
         "header header header"
         "contacts contacts contacts"
         "map map map"
         "fbfeed fbfeed fbfeed"
         ;
         margin: auto;
         margin-top: 40px;
    }

    #contacts{
        margin-bottom: 1rem;
    }

    .contactgrid{
        width: 100%;
        margin: auto;
    }

    #header p{
        margin-bottom: 0;
    }

    .map{
        /* height: 400px; */
        justify-self: center;
        margin-bottom: 2rem;
    }

    /* .contacts{
        flex-shrink: initial;
    } */

#parent{
    display: grid;
    grid-template-columns: repeat(2,1fr) ;
    grid-auto-rows: minmax(100px, max-content) ;
    max-width: 80%;
    margin: auto;
    margin-top: 100px;
    grid-template-areas:
    "headshot headshot"
    "me me"
    "ew ew"
    "ytwax ytwax"
    "pp pp"
    "wpic wpic"  
    ;
    }

#item1 img{
    margin-top: 40px;
    width: 100%;
}
#item4{
    flex-wrap: wrap;
    }

#item5{
    margin-top: 30px;
    margin-bottom: 0px;
    padding: 0px;
}
   
.footer{
    font-size: .7rem;
    }
    
 #gridmaster{
        display: grid;
        /* grid-template-columns: (1fr,2fr,1fr); */
        /* grid-auto-rows: max-content; */
        max-width: 80%;
        margin: auto;
        margin-top: 100px;
        grid-template-areas:
        "griditem0 griditem0"
        "griditem1 griditem3"
        
        "griditem2 griditem2"
        "griditem3a griditem3a"
        "griditem4 griditem4"
        "griditem5 griditem5"
        ;
    }

   #header p{
       margin-bottom: 2rem;
   }

}

@media (max-width:400px){

    .logo a{
        color: #fff;
        font-size: 1.4rem;
        
    }
    
    .newnav img{
        width: 80px;
        padding-right: .5rem;
       
    }

    .logolarge img{
        max-width: 350px;
    }

    #firstfoot{
        display: none;
    }


}