#lagcc-geo-maps {
    /* padding: 0 1rem; */
    margin: 0 auto;
    font-family: 'Overpass', sans-serif;

}

/* Map styles */

#map { 
    position: relative; 
    border: 1px solid black; 
    border-radius: 8px; 
    height: 600px; 
    width: 100%; /* This means "100% of the width of its container" */ 
    margin-top: 2rem;
}

/* .leaflet-tile-container {
  filter: grayscale(1)
} */

.popup-link {
    font-family: 'Overpass', sans-serif;
}

.marker-position {
    position: center;
    bottom: 0;
    left: 0;
    z-index: 999;
    padding: 10px;
    font-weight: 700;
    background-color: #fff;
}

.active {
    text-decoration: underline;
}

/*color*/

.purple {
    background-color: #9191be;
}

.blue {
    background-color: #6fa8bc;
}

/* graphic elements and alignment */

hr.lgbtq-spaces {
    border: 2px solid #9191be;
    /* border-radius: 10px; */
    opacity: .5;
}

.vertical-align {
     display: inside;
     align-items: center;
     justify-content: center;
     flex-direction: row;
 }

 .big-box {
     height: max-content;
 }

 .small-box {
     height: max-content;
 }

 

/* Typography styling*/

.allerta-stencil-regular {
    font-family: "Allerta Stencil", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.spaces-title {
    /* font-family: "Overpass Mono", monospace; */
    font-family: "Allerta Stencil",
        sans-serif;

    font-weight: 700;
    font-size: 6rem;
    text-align: center;
    /* color: #9191be; */
        color: #0e0e13;
}

p.council-mapsfont {
    font-family: 'Overpass', sans-serif;
    font-weight: 300;
    font-size: .9rem;
    text-align: justify;
}

.credits {
    font-weight: 300;
}

.council-mapsfont-head {
    font-family: 'Overpass', 'sans-serif';
    font-size: 1.7rem;
    font-weight: 400;
    text-align: center;
    /* margin-bottom: 1rem; */
    color: white;
}

.mapsfont-head-lg {
    white-space: nowrap;
        font-family: 'Overpass', 'sans-serif';
        font-size: 1.7rem;
        font-weight: 400;
        text-align: left;
        /* margin-bottom: 1rem; */
        color: white;
}

.council-mapsfont-subhead {
    font-family: 'Overpass', sans-serif;
    /* font-size: 1rem; */
    font-weight: 400;
    text-align: center;
    margin-bottom: .6rem;
    color: rgb(0, 0, 0);

}

.author {
    width: 100%;
    color: rgb(103, 96, 96);
    font-size: 1.0rem;
    line-height: 1.6;
    font-weight: 200;
    text-align: center;
    font-family: 'Overpass', sans-serif;
}

.author.strong {
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 1.8;
}

.pquote {
    float: center;
    width: 100%;
    color: rgb(0, 0, 0);
    font-size: 2.0rem;
    line-height: 1.7;
    font-weight: 400;
    text-indent: 0px;
    text-align: center;
    font-family: 'Overpass', sans-serif;

}

.photo-caption {
    padding-bottom: -2rem;
    margin-bottom: -2rem;
    font-family: 'Titillium Web', sans-serif;
    color: darkslategray;
    line-height: 1rem;
    text-align: left;
    font-family: 'Overpass', sans-serif;
    font-weight: 400;
    padding: 0 15px;
    /* font-size: 1rem; */
}

.photo-attribution {
    margin-bottom: -2rem;
    margin-top: -2rem;
    padding-top: -5rem;
    font-family: 'Overpass', sans-serif;
    color: gray;
    line-height: .1rem;
    text-align: center;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 400;
    padding: 0 15px;
    /* font-size: .625rem; */
}

.single-spaced {
    margin-top: .2rem;
    line-height: 1.1rem;
}

.small {
    text-align: center;
}

.pquote-landing {
    float: center;
    width: 100%;
    color: gray;
    font-size: 1.0rem;
    line-height: 1.3rem;
    font-weight: 300;
    text-indent: 0px;
    text-align: justify;
    font-family: 'Overpass', sans-serif;
    margin-top: 1%;
    margin-bottom: 1%;
    padding: 0 15px;
}

.council-maps-contact-text {
    float: center;
    width: 100%;
    color: rgb(255, 255, 255);
    font-size: 1.3rem;
    line-height: 1.5;
    font-weight: 400;
    text-indent: 0px;
    text-align: justify;
    font-family: 'Overpass', sans-serif;
    margin-top: 1%;
    margin-bottom: 1%;
}

ul.credits {
    list-style: none;
    padding-left: 0;
}

​ .lead {
    padding: 40px 0;
}


/*audio clip*/
.audio-clip {
    margin: 2;
}

/* media queries  for typography*/
/* Small devices */
@media (max-width: 767px) {
    .spaces-title {
        font-size: 2rem;
    }
    
    p.council-mapsfont {
        font-size: 0.9rem;
    }

    .pquote {
        font-size: 1.5rem;
    }

    .credits {
        font-size: 0.7rem;
    }

    .photo-caption {
        font-size: 1rem;
    }

    .council-mapsfont-head {
        font-size: 1.3rem;
    }

    .council-mapsfont-subhead {
        font-size: 1.8rem;    }
}

/* Medium devices */
@media (min-width: 768px) {
    .spaces-title {
            font-size: 3.5rem;
    }
    p.council-mapsfont {
        font-size: .9rem;
    }

    .pquote {
        font-size: 1.0rem;
    }

    .credits {
        font-size: .7rem;
    }

    .photo-caption {
        font-size: .9rem;
    }
    .council-mapsfont-head {
        font-size: 1.618rem;
    }

    .council-mapsfont-subhead {
        font-size: 1rem;
    }
}

/* Medium devices */
@media (min-width: 992px) {
    p.council-mapsfont {
        font-size: 1.1rem;
    }

    .pquote {
        font-size: 1.3rem;
    }

        .credits {
            font-size: .7rem;
        }

    .author {
        font-size: 1rem;
    }

    .photo-caption {
        font-size: 1rem;
    }

    .photo-attribution {
        font-size: .7rem;
    }

    .council-mapsfont-head {
        font-size: 2.617rem;
    }

    .council-mapsfont-subhead {
        font-size: 1.6rem;
    }
}

/* Large devices */
@media (min-width: 1200px) {
    .spaces-title {
            font-size: 4.5rem;
    }
    p.council-mapsfont {
        font-size: 1.1rem;
    }

    .pquote {
        font-size: 1.6rem;
    }

    .credits {
        font-size: .8rem;
    }

    .author {
        font-size: 1.1rem;
    }

    .photo-caption {
        font-size: 1rem;
    }

    .photo-attribution {
        font-size: .7rem;
    }

    .council-mapsfont-head {
        font-size: 3rem;
    }

    .council-mapsfont-subhead {
        font-size: 1.6rem;
    }
}





/* masonry for masonry on landing page using classes */

.masonry {
    margin: 50px auto;
    width: 100%;
    position: relative;

}

.items {
    margin: 50px auto;
    text-align: justify;
}

.item {
    margin: 0 0 50px;
    text-align: center;


}

.item img {
    padding: 0 30px;
    width: 100%;
}

/* .h-gutter {
    margin: 2rem 0;
} */

.masonry.js-masonry.items {
    margin: 0 auto;
}

.LGBTcard-img.gallery {
    padding-bottom: 2rem;
}



/* media queries  for masonry*/
/* Small devices */
@media (max-width: 767px) {
    .item {
        width: 100%;
    }

    .item.landscape {
        width: 100%;
    }
}

/* Medium devices */
@media (min-width: 768px) {
    .item {
        width: 255px;
    }

    .item.landscape {
        width: 340px;
    }
}

/* Medium devices */
@media (min-width: 992px) {
    .item {
        width: 322px
    }

    .item.landscape {
        width: 471px;
    }
}

/* Large devices */
@media (min-width: 1200px) {
    .masonry {
        padding-left: 20px;
        padding-right: 20px;
        position: relative;
    }

    .masonry.js-masonry.items {
        margin: auto;
    }

    .item {
        width: 200px;
    }

    .item.landscape {
        width: 270px;
    }
}

/* Large devices min-width (1200px) + a .item margin (50px) * 2 (100px) = 1300px */
/* 1300px gives me the clearance I need to keep the margins of the entire #masonry (the
bleed if you will) the same width as the .item margins items (50px). Basically I'm
being really picky about whitespace. */
@media (min-width: 1300px) {
    .masonry {
        padding-left: 60px;
        padding-right: 60px;
        position: relative;
    }
}