body, html{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
}

a, p {
    color: black;
    text-decoration: none;
    padding: 0;
    margin: 0;
}

.hiddenLink {
    visibility: hidden;
    margin: 0 !important;
    padding: 0 !important;
}

/* Landing Section Styling */

.landingSection {
    width: 100%;
    height: 100%;
}

.landingGrid {
    display: grid;
    height: 100%;
    grid-template-columns: 2fr 3fr;
}

#greyLandingDiv {
    background-color: #262626;
    max-height: 100vh;
    max-width: 100%;
    z-index: 1;;
}

#greyLandingDiv h1:first-of-type {
    font-family: 'Poppins';
    font-style: italic;
    color: #c8c8c8;
    font-size: 20vh;
    opacity: 0.1;
    font-weight: 400;
    margin: 5% 0 0 -30%;
}

#quoteDiv {
    border: 8px solid rgba(208,208,208, 0.2);
    width: 100%;
    margin: 5% 0 0 40%;
    z-index: 10;
}

#quoteDiv h2 {
    color: #c8c8c8;
    font-family: 'Poppins';
    padding: 8%;
    font-size: 3vh;
    font-weight: 300;
}

#quoteDiv p {
    font-size: 3vh;
    color: #c8c8c8;
    font-family: 'Poppins';
    font-weight: 200;
    font-style: italic;
    float: right;
    margin-right: 100px;
    margin-top: -5%;
}

#moreButton {
    border: solid 2px #d0d0d0;
    width: 40%;
    text-align: center;
    padding: 1%;
    margin: 0 0 0 30%;
}

#moreButton a {
    color: #ffffff;
    font-family: 'Raleway';
    padding: 5%;
    font-size: 2vh;
    font-weight: 400;
}

#moreButton:hover {
    background-color: #d0d0d0;
    cursor: pointer;
}

#moreButton:hover a{
    color: #262626;
    font-weight: 500;
}


#imgLandingDiv {
    background-image: url("./Images/landing.jpg");
    background-size: cover;
    background-position: top right;
    position: relative;
    z-index: 0;
}

#brandName {
    margin-left: 10%;
    font-size: 5vh;
    display: inline-block;
    margin-top: 5%;
    
}
#brandName a {
    color: white;
    font-family: 'Playfair Display';
    
}

.navItem {
    margin-top: 30px;
    z-index: 10 !important;
    display: inline-block;
    color: white;
    font-family: 'Raleway Light';
    font-size: 3vh;
    cursor: pointer;
}

#navAboutUs {
    float: right;
}
.navItem a{
    color: white;
    font-family: 'Raleway Light';
    font-size: 3vh;
}

#navAboutUs {
    padding-right: 3%;
    display: inline-block;
    margin-left: -150px;
}

#navServices {
    padding-left: 3%;
    float: left;
}

#navEvents {
    float: right;
    padding-right: 3%;
}

#navContact {
    color: white;
    margin: 0;
    font-family: 'Raleway Light';
    font-size: 3vh;
    width: 500px;
    position: absolute;
    right: -200px;
    top: 50%;
    transform:rotate(90deg);
    
}

#navContact a {
    color: white;
    font-family: 'Raleway Light';
    font-size: 3vh;
    cursor: pointer;
}

#navContact a:last-of-type {
    padding-left: 10%;
}

#navBooking {
    padding-right: 10%;
}

.landingSocial {
    position: absolute;
    right: 20px;
    bottom: 30px;
    z-index: 1;
}

.landingSocial i {
    display: block;
    padding-bottom: 25px;
    color: white;
    padding-right: 10px;
}

.fab:hover {
    color: black;
    cursor: pointer;
}

#greyLandingDiv #aboutNav {
    display: none;
}

/* LANDING SECTION MEDIA QUERIES */

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

    .landingGrid {
        grid-template-columns: 1fr 1fr;
    }

    #imgLandingDiv {
        background-position: center;
    }

    #greyLandingDiv h1:first-of-type {
        margin: 10% 0 0 -30%;
        font-size: 15vw;
    }

    #quoteDiv {
        position: static;
        width:120%;
        margin: 10% 0 0 20%;
        z-index: 2;
    }

    #quoteDiv h2 {
        font-size: 2.5vw;
    }

    #quoteDiv p {
        font-size: 2.2vw;
        margin-top: -10%;
    }

    #moreButton {
        position: static;
        margin-left: 15%;
        margin-top: 10%;
        width: 60%;
    }
}

@media screen and (max-width: 800px) {
    #brandName {
        font-size: 4vw;
    }

    .navItem a, #navContact a, .fab{
        font-size: 3.5vw !important;
    }

    .navItem {
        margin-top: 20px;
    }

    #navContact {
        margin-right: -25px;
    }

    #quoteDiv {
        margin: 30% 0 0 10%;
        width: 140%;
    }

    #quoteDiv h2 {
        font-size: 3vw;
    }

    #greyLandingDiv h1:first-of-type {
        font-size: 13vw;
    }

    #moreButton {
        margin-top: 30%;
    }

    .overlay a {
        padding-top: 3% !important;
    }

    #greyLandingDiv #aboutNav  i{
        color: white !important;
    }

    .navItem, #navContact {
        display: none !important;
    }

    #greyLandingDiv #aboutNav {
        display: block;
                position: relative;
        top: -8%;
        right: -93%;
    }
}

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

    #greyLandingDiv #aboutNav {
        display: block;
                position: relative;
        top: -8%;
        right: -93%;
    }

    #greyLandingDiv #aboutNav  i{
        color: white !important;
    }

    .navItem, #navContact {
        display: none !important;
    }

    #quoteDiv {
        width: 170%;
    }

    #quoteDiv h2 {
        font-size: 4vw;
    }

    #brandName {
        font-size: 6vw;
    }

    #greyLandingDiv h1:first-of-type {
        margin-top: 50%;
    }

    .navItem a, #navContact a, .fab{
        font-size: 5vw !important;
        padding-bottom: 40px;
    }
}



/* ABOUT SECTION */

.aboutSection {
    height: 80%;
}

#aboutNav img{
    height: 8vh;
    padding: 1% 0 0 2%;
}

#aboutNav {
    z-index: 5;
    
}

.fa-bars {
    float: right;
    color: black;
    padding: 1% 3% 0 0;
    cursor: pointer;
    z-index: 5;
}

.eventsGrid {
    display: grid;
    grid-template-columns: 3fr 0.5fr 0.5fr 1fr;
    grid-template-rows: 1fr 0.05fr;
    padding: 0% 10% 2% 10%;
    margin-top: 2%;
    z-index: 5;
}




#eventImg {
    background-image: url("./Images/aboutUs.jpg");
    background-position: center;
    background-size: cover;
    grid-row: 1 / 3;
    grid-column: 2/5;
    margin: 5%;
    animation-duration: 2s;
}

.eventsGrid p {
    font-family: 'Raleway Regular';
    color: #262626;
    font-size: 20px;
    z-index: 2;
}

#eventsInfo1 {
    padding: 4% 3% 0 0;
}


.aboutSection h1{
    font-family: 'Poppins';
    font-style: italic;
    color: #c8c8c8;
    font-size: 12vw;
    opacity: 0.6;
    font-weight: 400;
    margin-top: -5%;
}

#aboutButtonContainer {
    grid-column: 3/5;
}

#greyLine {
    background-color: #262626;
}

#aboutButton {
    border: solid 2px #262626;
    width: 200px;
    text-align: center;
    padding: 1%;
    margin: 20% 5% 5% 20%;
}

#aboutButton a {
    color: #262626;
    font-family: 'Raleway';
    padding: 5%;
    font-size: 2vh;
    font-weight: 500;

}

#aboutThreeDots {
    margin-top: -3%;
    margin-right: 20%;
    float: right;
}

#emptyEventDiv {
    display: none;
}

/* About us grid media queries */

@media screen and (max-width: 1500px) {
    .eventsGrid {
    grid-template-rows:  1fr 0.01fr;
    }

    .aboutSection h1 {
        font-size: 12vw;
    }

    .aboutSection {
        height: 100%;
    }
}

@media screen and (max-width: 1200px) {
    .eventsGrid {
    grid-template-rows: 0.1fr 1fr 0.1fr;
    margin-top: 2%;;
    padding: 0 5% 1% 5%;
    }

    #eventImg {
        grid-column: 2/ span 5;
        grid-row: 1/ span 2;
    }

    #eventsInfo1 {
        grid-column: 1/ span 1;
        grid-row: 2/ span 1;
    }

    .quoteDiv h2 {
        font-size: 3vw;
    }

    #emptyEventDiv {
        display: inline;
        grid-column: 2/ span 5;
    }

    

    #greyLine {
        margin-top: 2%; 
        height: 5px;
        grid-column: 1 / span 1;
        grid-row: 4 / span 1;
    }

    .aboutSection {
        height: 100%;
    }



    .aboutSection h1 {
    margin-top: -20%;
    }

    #aboutButtonContainer #aboutButton {
        margin-top: 40%;
    }
}

@media screen and (max-width: 1000px) {
    .eventsGrid p {
        font-size: 18px;
    }

    .aboutSection {
        height: 50%;
    }

    #aboutButtonContainer #aboutButton {
        width: 70%;
        margin-top: 50%;
    }
}
@media screen and (max-width: 800px) {
    .eventsGrid p {
        font-size: 18px;
    }

    .quoteDiv  h2 {
        font-size: 4vw;
    }

    .eventsGrid {
        margin-top: 5%;
        grid-template-columns: 0.1fr 1fr 1fr 0.1fr;
        grid-template-rows: 0.1fr 1.5fr  0.1fr 1fr 0.1fr;
        width: 90%;
    }
    #emptyEventDiv {
        display: none;
    }

    #eventsInfo1 {
        grid-area: 4/1/5/5;
    }

    #eventsInfo1 {
        padding: 0;
    }

    #aboutButtonContainer {
        grid-area: 3/1/4/5;
    }

    #greyLine {
        grid-area: 6/1/7/3;
    }

    #aboutButtonContainer #aboutButton {
        display: none;
    }

    .aboutSection {
        height: 80%;
    }

    .eventsGrid .quoteDiv {
        grid-column: 1 / 5;
        grid-row: 1/ 2;
    }

    .aboutSection h1 {
        display: none;
    }

    #eventImg {
        grid-column: 1 / 5;
        grid-row: 2/ 3;
    }

    #aboutThreeDots {
        margin-top: 0
    }

    .aboutSection {
        height: 70%;
    }

    #greyLine {
        margin-top: 0;
    }

}



@media screen and (max-width: 500px) {
    #eventsInfo1 {
        font-size: 18px;
        }

        .aboutSection {
            height: 120vh;
        }

        
}




/* Responsive Nav */

.overlay {
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 20; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 1s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

.overlay-content {
    position: relative;
    top: 15%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

.overlay a {
    padding: 1%;
    text-decoration: none;
    font-size: 6vh;
    color: #818181;
    font-family: 'Playfair Display Regular';
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
    cursor: pointer;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

@media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
}




/* Services Section */

.servicesGrid {
    display: grid;
    grid-template-columns: 60% 40%;
    height: 80%;
    
}

.servicesGrid #aboutNav {
    margin: 4%;
}


.servicesImg {
    background-image: url("./Images/services.jpg");
    background-position: left center;
    background-size: cover;
}

.darkgreyServices {
    background-color: #373737;
    z-index: 5;
}

#quoteDiv3 {
    border: 8px solid rgba(85,85,85,0.4);
    width: 40%;
    margin: 10% 0 0 15%;
}

#quoteDiv3 h2 {
    color: #818181;
    font-family: 'Playfair Display Regular';
    padding: 2%;
    font-size: 6vh;
    font-weight: 300;
    margin: 0;
    margin-left: -15%;
}

#quoteDiv3 h2 span{
    color: #e3e3e3;
}



#greyLine2 {
    background-color: #d6d6d6;
    height: 4px;
    width: 60%;
    margin-left: 10%;
    margin-top: 1%;
}

.darkgreyServices h1 {
    font-family: 'Poppins';
    font-style: italic;
    color: #c8c8c8;
    font-size: 20vh;
    opacity: 0.1;
    font-weight: 400;
    margin-left: 20%;
    margin-top: 0;
    height: 20%;
}

#moreButton2 {
    border: solid 2px #d0d0d0;
    width: 50%;
    text-align: center;
    padding: 1%;
    margin-top: -30%;
    margin-left: 20%;
}

#moreButton2 a {
    color: #ffffff;
    font-family: 'Raleway';
    padding: 5%;
    font-size: 2vh;
    font-weight: 400;
}

#moreButton2:hover {
    background-color: #d0d0d0;
    cursor: pointer;
}

#moreButton2:hover a{
    color: #262626;
    font-weight: 500;
}

.servicesMiniGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    margin: 25% 5% 20% 5%;
    padding: 5%;
    background-color: rgba(235,235,235,0.8);
    grid-gap: 5%;
}

.servicesMiniGrid div div{
    height: 2px;
    width: 20%;
    background-color: black;
    margin-bottom: 3%;
}

.servicesMiniGrid div h1{
    margin: 1% 0 1% 0;
}

.servicesMiniGrid div img {
    height: 60px;
    width: 150px;
}

.fortunerGallery {
    cursor: pointer;
    font-weight: 700;
    text-decoration: underline;
}

.darkgreyServices div i {
    color: #d0d0d0;
}

.darkgreyServices .quoteDiv {
    margin-left: 15%;
}

.servicesMiniGrid div p{
    font-family: 'Playfair Display';
    color: #1d1d1d;
    font-weight: 400;
}

.servicesMiniGrid div h1 {
    font-family: 'Poppins Regular';
}

.servicesMiniGrid div:nth-child(3), .servicesMiniGrid div:nth-child(4),
.servicesMiniGrid div:nth-child(5), .servicesMiniGrid div:nth-child(6){
    display: none;
}


/* Services Section Media Queries */

@media screen and (max-width:800px) {
    .servicesMiniGrid {
        grid-template-columns: 1fr;
        margin: 5%;
    }

    .servicesMiniGrid div:nth-of-type(3),.servicesMiniGrid div:nth-of-type(4) {
        display: none;
    }

    .servicesMiniGrid div img {
        height: 40px;
        width: 100px;
    }

    .servicesMiniGrid div {
        padding-top: 5%;
    }

    .servicesMiniGrid div div {
        padding: 0;
    }

    .servicesMiniGrid div p {
        font-size: 15px;
    }

    #quoteDiv3 h2 {
        font-size: 6vw;
    }

    #servicesDescription {
        font-size: 2.5vw;
    }

    .darkgreyServices .quoteDiv {
        margin-top: 5%;
    }
    .servicesGrid {
        grid-template-columns: 1fr;
        grid-template-rows: 0.1fr 1fr;
    }

    .darkgreyServices {
        grid-area: 1 / 1/ 2/ 2;
        padding-bottom: 3%;
    }

    .servicesMiniGrid div {
        padding-top: 2%;
    }
    .servicesMiniGrid div img {
        height: 30px;
        width: 80px;
    }

    .servicesMiniGrid div h1 {
        font-size: 15px;
    }

    .servicesMiniGrid div p {
        font-size:12px;
    }

    #quoteDiv3 {
        margin: 0 0 0 10%;
    }

    #servicesDescription {
        padding: 2% 2% 1% 5%;
    }

    .darkgreyServices h1 {
        display: none;
    }

    #moreButton2 {
        margin-top: 5%;
        margin-bottom: 5%;
    }
}


/* Events Section */

.ourEventsSection h1{
    font-family: 'Poppins';
    font-style: italic;
    color: #c8c8c8;
    font-size: 20vh;
    opacity: 0.6;
    font-weight: 400;
    margin: -20% 0 0 -10%;
    z-index: -10;
}

.ourEventsSection {
    height: 50%;
}

.eventGrid div #quoteDiv2 {
    width: 50%;
}

.eventGrid {
    display: grid;
    grid-template-columns: 2fr 3fr;
    grid-template-rows: 1fr;
    padding: 0% 10% 2% 10%;
    margin-top: 2%;
    z-index: 5 !important;

}


.eventGrid div:first-child div:nth-child(3) {
    background-color: #262626;
    height: 3px;
    width: 80%;
    margin-top: 2%;
}

.eventsImageGrid {
    display: grid;
    grid-template-columns: 1fr;
    height: 100%;
    z-index: 1;

}
.eventsImageGrid div {
    background-position: center;
    background-size: cover;
    margin: 2% 10% 2% 10%;
}
.eventsImageGrid div:nth-child(1) {
    background-image: url("./Images/Cars/Ford/Ford-B&W.jpg");
}




.eventInfo {
    background-image: none !important;
    background-color: rgba(235,235,235,0.8);
    /* margin: 20% ; */
    text-align: center;
    visibility: hidden;
}

#eventImg1 .eventInfo{
    /* visibility: visible !important; */
}

.eventsImageGrid div:hover .eventInfo {
    visibility: visible;
}

.eventsImageGrid div:hover {
    cursor: pointer;
}

.eventInfo:hover {
    visibility: visible;
}

.eventInfo h1, h2, h4 {
    font-family:"Playfair Display";
    font-size: 25px;
    margin: 0;
    color: #262626;
    font-style: normal;
    opacity: 1;
    font-weight: 400;
    padding: 5%;
}

.eventInfo h2 {
    font-size: 20px;
    font-style: italic; 
}

.eventInfo h4 {
font-size: 18px;
}

#moreEventsButton {
    border: solid 2px #1d1d1d;
    width: 50%;
    text-align: center;
    padding: 1%;
    margin-top: 3%;
}

#moreEventsButton a {
    color: #1d1d1d;
    font-family: 'Raleway';
    padding: 5%;
    font-size: 2vh;
    font-weight: 400;
}

#moreEventsButton:hover {
    background-color: #1d1d1d;
    cursor: pointer;
}
#moreEventsButton:hover a{
    color: #d0d0d0;
    font-weight: 500;
}


/* Events Section Media Queries */
@media screen and (max-width:1500px){
    .ourEventsSection h1 {
        margin-top: -15%;
    }

    .ourEventsSection {
        height: 50%;
    }

    #quoteDiv2 {
        width: 70%;
    }

    .eventInfo h1, h2, h4 {
        padding: 5%;
        margin: 0 !important;
    }
    
    .eventInfo h2 {
        font-style: italic; 
    }
    
    .eventInfo h4 {
    }

}

@media screen and (max-width:1320px){
    .eventGrid {
        padding: 0% 5% 2% 5%;
        grid-template-columns: 1fr 2fr;
        height: 100%;
    }

    .ourEventsSection {
        height: 40%;
        margin-bottom: 5%;
    }

    .ourEventsSection h1 {
        margin-top: -12%;
    }

    #moreEventsButton {
        width: 70%;
    }

}

@media screen and (max-width:1000px){
    .ourEventsSection h1 {
        margin-top: -10%;
    }

    .ourEventsSection {
        height: 40%;;
    }
}

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

    #moreEventsButton {
        width: 100%;
    }

    .ourEventsSection {
        height: 55%;
    }

    #quoteDiv2 {
        width: 40%;
    }

    #quoteDiv2 h2 {
        font-size: 4vw;
    }


    .eventGrid {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        margin-top: 5%;
        height: 90%;
        
    }

    .eventsImageGrid {
        padding-top: 2%;
        grid-template-rows: 1fr;
    }

    #eventImg1 {
    }

    .ourEventsSection h1 {
        display: none;
    }

    .eventInfo h1 {
        display: block;
    }

}

@media screen and (max-width: 600px) {
    .ourEventsSection {
        height: 65%;
        padding-bottom: 5%;
    }

    .eventGrid {
        grid-template-rows: 0.5fr 1fr;
    }

    .eventsImageGrid div {
        margin: 0;
    }

   
}

/* WORK SECTION */
.ourWork{
    display: grid;
    grid-template-columns: 2fr 3fr;
    grid-template-rows: 1fr;
    padding: 0% 10% 2% 10%;
    margin-top: 2%;
    z-index: 5 !important;
    margin-bottom: 2%;
}

.ourWork div:first-child div:nth-child(3) {
background-color: #262626;
height: 3px;
width: 80%;
margin-top: 2%;
}

.workGallery {
    display: grid;
    grid-template: 1fr/1fr ;
}

.workGallery  {
    background-image: url("./Images/Work/work1-BW.jpg");
    background-position: center top;
    background-size: cover;
    margin: 2% 10% 2% 10%;
    cursor: pointer;
}

.workHeading {
    background-color: rgba(235,235,235,0.8) !important;
    margin: 10% 20% 10% 20%;
    text-align: center;
    background-color: rgba(235,235,235,0.8);
    visibility: hidden;
}

.workHeading h1 {
    font-family: 'Playfair Display';
    font-size: 25px;
    font-weight: 400;
    position: relative;
    top: 10%;
}

.workGallery:hover .workHeading{
    visibility: visible;
}

@media screen and (max-width:1320px) {
    .ourWork{
    padding: 0% 5% 2% 5%;
    grid-template-columns: 1fr 2fr;
    }

    .workHeading h1 {
        top: 15%;
    }
}

@media screen and (max-width:800px) {
    .ourWork{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    height: 55%;
    }

    .workHeading h1 {
        top: 10%;
    }
}

@media screen and (max-width:600px) {
    .ourWork {
        height: 65%;
        grid-template-rows: 0.5fr 1fr;
    }

    .workGallery {
        margin: 4% 0 0 4%;
    }

    .workHeading h1 {
        top: 20%;
    }
}





/* TEAM SECTION */

.teamGrid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-template-rows: 1fr;
    height: 100%;
}

.teamMiniGrid {
    grid-column: 1/2;
    grid-row: 1/3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100%;
}

.teamMiniGrid div {
    background-position: center top;
    background-size: cover;
}

.teamMiniGrid div:nth-child(1) {
    background-image: url("./Images/cayne.jpg")

}

.teamMiniGrid div:nth-child(2) {
    background-color: #f4f4f4;
}


.teamMiniGrid div:nth-child(3) {
    background-color: #f4f4f4;
}

.teamMiniGrid div:nth-child(4) {
    background-image: url("./Images/solly.jpg");
    background-position: left center;
}

.teamInfo {
    background-image: none !important;
    padding: 5%;
}

.teamInfo h2, h3 {
    font-family: 'Raleway';
    font-weight: 400;
    color: #1e1e1e;
    padding: 1%;
    margin: 0;
}

.teamInfo h2 {
    font-size: 2.5vw;
}

.teamInfo h2 span {
    font-style: italic;
}

.teamInfo h3 {
    font-size: 1.8vw;
    padding-top: 2%;
    padding-bottom: 10%;
    font-style: italic;
}
#greyline {
    height: 2px;
    background-color: #1e1e1e;
}

.teamInfo p {
    padding: 1%;
    font-size: 1.2vw;
    font-family: 'Raleway Regular'
}
.darkgreyTeam {
    background-color: #373737;
    z-index: 5;
    height: 100%;
}
.darkgreyTeam h1 {
    font-family: 'Poppins';
    font-style: italic;
    color: #c8c8c8;
    font-size: 14vw;
    opacity: 0.1;
    font-weight: 400;
    margin: 10% 0 0 40%;
}

.darkgreyTeam .quoteDiv {
    margin-left: 15%;
    margin-top: 4%;
}

/* Team Section */

@media screen and (max-width:1200px) {
    .darkgreyTeam #quoteDiv3 h2 {
        font-size: 4vw;
    }

    .darkgreyTeam #servicesDescription {
        font-size: 1.5vw;
    }

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

@media screen and (max-width:1000px) {
    .darkgreyTeam h1 {
            font-size: 12vw;
    }
}

@media screen and (max-width:800px) {
    .teamGrid {
        grid-template-columns: 1fr;
        grid-template-rows: 0.5fr 1fr;
    }

    .darkgreyTeam {
        grid-area: 1 / 1/ 2/ 2;
        margin-bottom: 4%;
    }

    .darkgreyTeam h1 {
       display: none;
    }

    #quoteDiv3 {
        margin-top: 5%;
    }

    .darkgreyTeam #servicesDescription {
        font-size: 2vw;
    }

    .teamInfo p {
        font-size: 12px;
    }

    .teamInfo h3 {
        padding-bottom: 5%;
    }


    .teamMiniGrid {
        grid-row: 2/ span 1;
    }
}

@media screen and (max-width:550px) {
    .teamMiniGrid {
        grid-template-columns: repeat(3, 1fr);
        padding-top: 3%;

    }

    .teamMiniGrid div:nth-child(1) {
        grid-column: 1 / 2;
    }

    .teamMiniGrid div:nth-child(2) {
        grid-column: 2 / 4;
    }

    .teamMiniGrid div:nth-child(3) {
        grid-column: 1 / 3;
    }

    .teamMiniGrid div:nth-child(4) {
        grid-column: 3 / 4;
    }
}

/* footer */

.contactForm {
    background-image: url("./Images/footer.jpg");
    background-position: center;
    background-size: cover;
    grid-column: 2/2;
    padding: 10%;
    grid-row: 1 / span 2;
    margin-top: 15%;
    height: 50%;
}
.footerGrid h1 {
    font-family: 'Poppins';
    font-style: italic;
    color: #c8c8c8;
    font-size: 20vh;
    opacity: 0.8;
    font-weight: 400;
    z-index: -50;
    margin: 0;
    margin-left: -60%;
}

.footerGrid {
    display: grid;
    grid-template-columns: 2fr 3fr;
    grid-template-rows: 1fr 1fr;
    padding: 0 10% 1% 10%;
    margin-top: 2%;
    z-index: 5 !important;
    
}

.footerGrid :first-child {
    grid-row: 1 / span 3;
}


#submitButton {
    border: solid 2px #d0d0d0;
    background-color: transparent;
    width: 60%;
    text-align: center;
    font-family: 'Raleway';
    padding: 1%;
    font-size: 2vh;
    font-weight: 400;
    color: #d0d0d0;
    margin-left: 10%;
}

#submitButton:hover {
    background-color: rgba(208,208,208,0.1);
    cursor: pointer;
    color: #1e1e1e;
    border: solid 2px #1e1e1e;
    font-weight: 700;
}


::placeholder {
    color: #d0d0d0;
    opacity: 1;
}

#copy{
    text-align: center;
    font-size: 1.5vw;
    padding-bottom: 0.5%;
    font-family: 'Raleway Light'

}



.contactForm input,textarea {
    background-color: transparent;
    font-family: 'Raleway';
    border: none;
    border-bottom: 2px solid  #d0d0d0;
    margin-left: 10%;
    margin-bottom: 5%;
    margin-top: 5%;
    font-size: 20px;
    color: white;
    width: 80%;
}

.contactForm input,textarea:focus {
    outline: none;
}

#topButton {
    background-color: #1d1d1d;
    padding: 0.8%;
    height: 2px;
    width: 2px;
    position: relative;
    right: -95%;
    top: -40px;
    cursor: pointer;
}

#topButton i {
    color: #f4f4f4;
}

.contactInfo {
    margin: 5% 0 0 5%
}

.contactInfo p {
    font-family: "Playfair Display";
    font-weight: 400;
    padding-bottom: 3%;
    font-size: 2.3vh;
}

.contactInfo p span{
    font-weight: 700;
}

/* Footer Media Queries */

@media screen and (max-width:1500px) {
    .footerGrid h1 {
        font-size: 12vw;
    }
}


@media screen and (max-width:1000px) {
    .footerGrid div p{
        padding-bottom: 4%;
    }

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

    .footerGrid #quoteDiv2 {
        width: 40%;
    }

    .contactForm input,textarea, #submitButton {
        font-size: 2vw;
        width: 90%;
        margin-left: 5%;
    }

    .contactForm form {
        margin-top: 5%;
        padding: 0 !important;
    }

    footer > p {
        font-size: 20px !important;
    }
}

@media screen and (max-width:800px) {
    .footerGrid {
        grid-template-columns: 1fr;
        grid-template-rows: 0.5fr 1fr;
        padding: 5% 5% 1% 5%;
    }

    .footerGrid h1 {
        display: none;
    }

    .contactInfo {
        margin: 0 0 0 5%;
    }

    .contactInfo p {
        font-size: 15px !important;
    }

    .contactForm {
        grid-area: 2/ 1/ 3/ 2;
        margin-top: 0;
        padding: 4%;
        height: auto;
    }

    .footerGrid :first-child {
        grid-area: 1/ 1/ 2/ 2;
    }



    footer p:last-child {
        font-size: 2.5vw;
    }

    .contactForm input,textarea, #submitButton {
        font-size: 15px;
    }

    footer > p {
        font-size: 18px !important;
    }
}


/* General Media Queries */

.sectionDescriptionWhite {
    font-family: 'Raleway Regular';
    color: #d6d6d6;
    font-size: 20px;
    z-index: 2;
    padding: 5% 15% 1% 10%;
}

.sectionDescriptionBlack {
    font-family: 'Raleway Regular';
    color: #262626;
    font-size: 20px;
    z-index: 2;
    padding: 5% 5% 0 0;

}

.quoteDiv {
    border: 8px solid rgba(85,85,85,0.4);
    width: 40%;
    margin-left: 5%;
    margin-top: 3%;
}

.quoteDiv  h2 {
    color: #818181;
    font-family: 'Playfair Display Regular';
    padding: 2%;
    font-size: 6vh;
    font-weight: 300;
    margin: 0;
    margin-left: -15%;
}

.quoteDiv  h2 span{
    color: #262626;
}


@media screen and (max-width: 800px) {
    .quoteDiv h2 {
        font-size: 5vw;
    }

    .quoteDiv {
        border: 4px solid rgba(85,85,85,0.4);
        margin-left: 15%;
        width: 50%;
    }
    .sectionDescriptionBlack, .sectionDescriptionWhite {
        padding-top: 2%;
        font-size: 2.4vw;
    }
}

@media screen and (max-width: 550px) {
    .sectionDescriptionBlack, .sectionDescriptionWhite {
        padding-top: 2%;
        font-size: 15px;
    }
}




/* Modal Gallery */

.modal {
    height: 0;
    width: 100%;
    position: fixed; /* Stay in place */
    z-index: 20; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 1s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

.modal .closebtn {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 60px;
    color: #ffffff;
}

.modalGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: 94%;
    padding: 2%;
    grid-gap: 2% 2%;
}
.modalGrid div {
    height: 100%;
    width: 100%;
    background-size: cover;    
}



/* BOOKING HTML */

#bookingForm {
    margin: 2% 20% 0 15%;
    height: 80%;
    width: 70%;
}

#bookingCalendar {
    margin: 2% 20% 0 15%;
    height: 80%;
    width: 70%;
}

.bookingDiv {
    background-color: #e3e3e3;
    padding: 1%;
}

.bookingDiv .quoteDiv, .bookingDiv p {
    margin-left: 10% !important;
}

.bookingDiv p {
    padding: 2% 5% 2% 0;
}


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

#aboutNav img {
    height: 10vw;
}

#bookingForm {
    margin: 2% 5% 0 5%;
    height: 80%;
    width: 90%;
}

#bookingCalendar {
    margin: 5% 5% 0 5%;
    height: 80%;
    width: 90%;
}

}



/* 404 Page */

.lostBody {
    background-image: url("./Images/404.jpg");
    background-position: center top;
    background-size: cover;
    text-align: center;
}

.lostBody h1,.lostBody h2, .lostBody h3 {
    font-family: 'Raleway Regular';
    padding: 1%;
    margin: 0;
}

.lostBody h1 {
    font-size: 70px;
}

.lostBody h2 {
    font-size: 50px;
}

.lostBody h3 {
    font-size: 30px;
}

.lostBody span {
    text-decoration: underline;
}

.webdacityLink {
    font-weight: 500 !important;
    font-family: 'Raleway'
}

.webdacityLink:hover {
    text-decoration: underline;
;}