/* ####################################
   Lightbox Grid Layout for Sub Articles and Sub Containers

   - Critical Rendering Path: Optional
   ################################## */

.lightboxGrid {
    position: relative;
    float: left;
    width: 100%;
    margin-bottom: 1em;
}

    .lightboxGrid .article {
        /* The default grid without hard coded columns will fit images in at their natural size. See further down for three, four, five fixed columns. */
        position: relative;
        float: left;
        min-width: 20%;
        margin-right: 20px;
    }

        .lightboxGrid .article .thumbnail {
            display: block;
            padding: 0;
        }

            .lightboxGrid .article .thumbnail img {
                max-width: 100%;
                width: 100%;
                margin: 0;
            }

        .lightboxGrid .article .text {
            display: block;
            padding: 0;
        }

            .lightboxGrid .article .text .title {
                padding: 0;
                text-align: center;
            }

            .lightboxGrid .article .text .date {
                display: none;
            }

            .lightboxGrid .article .text .summary {
                display: none;
            }

    .lightboxGrid.cols-3 .article {
        width: 30%;
        margin-right: 5%; 
    }

        .lightboxGrid.cols-3 .article:nth-of-type(3),
        .lightboxGrid.cols-3 .article:nth-of-type(6),
        .lightboxGrid.cols-3 .article:nth-of-type(9),
        .lightboxGrid.cols-3 .article:nth-of-type(12),
        .lightboxGrid.cols-3 .article:nth-of-type(15),
        .lightboxGrid.cols-3 .article:nth-of-type(18),
        .lightboxGrid.cols-3 .article:nth-of-type(21),
        .lightboxGrid.cols-3 .article:nth-of-type(24),
        .lightboxGrid.cols-3 .article:nth-of-type(27),
        .lightboxGrid.cols-3 .article:nth-of-type(30),
        .lightboxGrid.cols-3 .article:nth-of-type(33),
        .lightboxGrid.cols-3 .article:nth-of-type(36),
        .lightboxGrid.cols-3 .article:nth-of-type(39),
        .lightboxGrid.cols-3 .article:nth-of-type(42),
        .lightboxGrid.cols-3 .article:nth-of-type(45),
        .lightboxGrid.cols-3 .article:nth-of-type(48),
        .lightboxGrid.cols-3 .article:nth-of-type(51) {
            margin-right: 0;
        }
        
    #SubContainers.lightboxGrid.cols-4 .article,
    .lightboxGrid.cols-4 .article {
        width: 22.75%;
        margin-right: 3%; 
    }

        .lightboxGrid.cols-4 .article:nth-of-type(4),
        .lightboxGrid.cols-4 .article:nth-of-type(8),
        .lightboxGrid.cols-4 .article:nth-of-type(12),
        .lightboxGrid.cols-4 .article:nth-of-type(16),
        .lightboxGrid.cols-4 .article:nth-of-type(20),
        .lightboxGrid.cols-4 .article:nth-of-type(24),
        .lightboxGrid.cols-4 .article:nth-of-type(28),
        .lightboxGrid.cols-4 .article:nth-of-type(32),
        .lightboxGrid.cols-4 .article:nth-of-type(36),
        .lightboxGrid.cols-4 .article:nth-of-type(40),
        .lightboxGrid.cols-4 .article:nth-of-type(44),
        .lightboxGrid.cols-4 .article:nth-of-type(48) {
            margin-right: 0;
        }
        
    #SubContainers.lightboxGrid.cols-5 .article,
    .lightboxGrid.cols-5 .article {
        width: 18%;
        margin-right: 2.5%; 
    }

        .lightboxGrid.cols-5 .article:nth-of-type(5),
        .lightboxGrid.cols-5 .article:nth-of-type(10),
        .lightboxGrid.cols-5 .article:nth-of-type(15),
        .lightboxGrid.cols-5 .article:nth-of-type(20),
        .lightboxGrid.cols-5 .article:nth-of-type(25),
        .lightboxGrid.cols-5 .article:nth-of-type(30),
        .lightboxGrid.cols-5 .article:nth-of-type(35),
        .lightboxGrid.cols-5 .article:nth-of-type(40),
        .lightboxGrid.cols-5 .article:nth-of-type(45),
        .lightboxGrid.cols-5 .article:nth-of-type(50) {
            margin-right: 0;
        }

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

        .lightboxGrid {
            font-size: 80%;
        }

    }

.lightboxPopup .article { /* Would be better to target something specifically to do with lightboxes */
}

    .lightboxPopup .article .thumbnail {
        float: left;
        max-width: 35%;
        margin-right: 10px;
    }

        .lightboxPopup .article .thumbnail img {
            max-width: 100%;
            border-color: var(--site-color-1-light);
            border-width: var(--site-border-width);
            border-style: solid; 
        }

    .lightboxPopup .article .text {
    }

        .lightboxPopup .article .text .title {
            margin-top: 0;
        }

            .lightboxPopup .article .text .title a {
                font-size: 150%;
                color: #303030;
                text-decoration: none;
            }

        .lightboxPopup .article .text .date {
        }

        .lightboxPopup .article .text .summary {
        }

            .lightboxPopup .article .text .summary h2,
            .lightboxPopup .article .text .summary h3,
            .lightboxPopup .article .text .summary h4,
            .lightboxPopup .article .text .summary h5,
            .lightboxPopup .article .text .summary h6  {
                margin-top: 0;
            }