/* map gallery style---------------- */

body {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
a {
    text-decoration: none;
    text-decoration-color: none;
}
a:link {color: black;}      /* unvisited link */
a:visited {color: black;}   /* visited link */
a:hover {color: black;}     /* mouse over link */
a:active {color: black;} 

li {
    margin: 5px 0;
    text-align: left;

}

p {
    font-size: 16px;
}

.container {
    margin:10px;
    display:grid;
    grid-template-areas: 
        'masthead masthead masthead'
        'nav mapcontainer mapcontainer'
        'footer footer footer';
    max-width:100%;
    grid-template-columns: 100px auto auto;
}
/* --------------------------- body content*/

.masthead {
    grid-area: masthead;
    background-color: black;
}

.nav {
    grid-area: nav;
    display: grid;
    grid-template-areas:
        'tab1a'
        'tab1'
        'tab2'
        'tab3'
        'tab4';
    max-height:600px;
    color:black;
    margin-top:10px;
    
}

.nav div {
    text-align:center;
    width:100px;
    height:100px;
}

.mapcontainer {
    grid-area: mapcontainer;
    display:grid;
    min-height: 600px;
    grid-template-areas:
        'banner'
        'col1'
        'col1-expand'
        'col2'
        'col2-expand'
        'col3'
        'col3-expand'
        'col4'
        'col4-expand';
    margin: 5em;
    width:auto;
}

.other {
    grid-area: other;
    display: grid;
    grid-template-areas:
    'pic1'
    'pic2';
    max-height:700px;
}

.footer {
    grid-area: footer;
    font-size: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.footer div{
    width: 200px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* --------------nav------------------------- */
.tab1a, .tab1, .tab2, .tab3, .tab4 {
    box-shadow: 0px 0px 20px 2px;
    grid-area:tab1;
    transition:.1s;
    background:rgb(46, 177, 46);
    font-weight:bolder;
    border-radius:20%;
}

.tab1a {
    grid-area:tab1a;
}

.tab1 {
    grid-area:tab1;
}

.tab2 {
    grid-area:tab2;
}

.tab3 {
    grid-area:tab3;
}

.tab4 {
    grid-area:tab4;
}

.tab1a:hover, .tab1:hover, .tab2:hover, .tab3:hover, .tab4:hover{
    
    height:140px;
    background:lightgreen;
}

/* -------------------------- mapcontainer content----------*/

.banner {
    grid-area: banner;
    text-align: center;
}

.col1, .col2, .col3, .col4 {
    text-align: center;
    width: 500px;
    margin-left:auto;
    margin-right:auto;
}

.col1:hover, .col2:hover, .col3:hover, .col4:hover {
    transition: .1s;
    opacity: .70;
    background-color: darkgreen;
    border-left: 10px solid black;
}

.col1 {
    grid-area: col1;
}

.col1-expand {
    grid-area: col1-expand;
    display: grid;
    grid-template-columns:1fr 1fr;
}

#a_first_col {
    grid-gap:2em;
    margin-top:2em;
}

#a_second_col {
    grid-gap:2em;  
    margin-top:2em; 
}

.col1-expand img {
    margin-top:3em;
    margin-bottom:3em;
    box-shadow: 0px 0px 20px 2px;
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
    display:block;
}

.col2 {
    grid-area: col2;
}

.col2-expand {
    grid-area: col2-expand;
    display: grid;
    grid-template-columns:1fr 1fr;
}

.col2-expand img {
    margin-top:3em;
    margin-bottom:3em;
    box-shadow: 0px 0px 20px 2px;
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
    display:block;
}

.col3 {
    grid-area: col3;
}

.col3-expand {
    grid-area: col3-expand;
    display: grid;
    grid-template-columns:1fr 1fr;
}

#c_first_col {
    grid-gap:2em;
    margin-top:2em;
}

#c_second_col {
    grid-gap:2em;  
    margin-top:2em; 
}

.col3-expand img {
    margin-top:3em;
    margin-bottom:3em;
    box-shadow: 0px 0px 20px 2px;
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
    display:block;
}

.col4 {
    grid-area: col4; 
}

.col4-expand {
    grid-area: col4-expand;
    display: grid;
    grid-template-columns:1fr 1fr;
}

#d_first_col {
    grid-gap:2em;
    margin-top:2em;
}

#d_second_col {
    grid-gap:2em;  
    margin-top:2em; 
}

.col4-expand img {
    margin-top:3em;
    margin-bottom:3em;
    box-shadow: 0px 0px 20px 2px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    display:block;
}

/*-------------- making the img's display fullpage onclick..---------------*/

.overlay {
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    display: flex;
    align-items: center;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s;
  }
  
  .overlay img{
    max-width: 90%;
    max-height: 90%;
    width: auto;
    height: auto;
    transform: scale(0.95);
    transition: transform .3s;
  }
  
  .overlay:target {
    visibility: visible;
    outline: none;
    cursor: default;
  }

  .overlay:target img {
    transform: scale(1);
}

/* footer elements ----------------------*/

#fcol1 {
    grid-gap:1em;
}

#fcol2 {
    grid-gap:1em;
}


/* Media Queries-----------------------------*/

@media only screen and (max-width:1400px){
    .container {
        grid-template-areas: 
        'masthead masthead masthead'
        'nav mapcontainer mapcontainer'
        'footer footer footer';
        grid-gap:.5em;
    }

    .col1, .col2, .col3, .col4 {
        width: 80%;
    }

    .mapcontainer {
        margin: 0;
    }
}


@media only screen and (max-width:950px){
    .container {
        grid-template-areas: 
        'masthead'
        'nav'
        'mapcontainer'
        'footer';
        grid-template-columns: none;
    }

    .nav {
        grid-template-areas:
        'tab1a tab1 tab2 tab3 tab4';
        grid-gap:1em;
        margin:0 auto;
    }

    .nav div {
        text-align:center;
        width:50px;
        height:50px;
        font-size: 10px;
    }

    .mapcontainer {
        width: 100%;
    }
    
   
    .tab1a:hover, .tab1:hover, .tab2:hover, .tab3:hover, .tab4:hover{
        height:50px;
    }

    .footer {
        grid-template-rows: 1fr 1fr;
        grid-template-columns: none;
        text-align:left;
    }

    img {
        max-width: 100%;
    }

    .col1-expand, .col2-expand, .col3-expand, .col4-expand {
        grid-template-rows: 1fr 1fr;
        grid-template-columns: none;
    }
}