/**********************************************************
slideshow-matrix.css
For displaying thumbnail pictures in matrix grid with
varying number of columns, dependent on screen-width.
Thumbnails are all aspect ratio 3:4, portrait or landscape.
14/08/2016 original version (matrix.css)
24/04/2019 now "mobile-dominant"
13/03/2020 new version for slideshow
**********************************************************/
.cell {
    position: relative;
    display: inline-block;
    width: 46px;        /* default is for smallest screen */
    height: 46px;       /* default is for smallest screen */
    margin: 0px;
    border: 1px solid black;
}
/*.cell .wide, .cell .square, .cell .narrow {
    position: relative;
    width: 100%;
    height: 100%;
}
*/
.cell-wide > img {
    /* position: absolute
     * makes the nearest non-static ancestor its container */
    position: absolute;
    width: 100%;
}
.cell-square img {
    position: absolute;
    width: 100%;
    height: 100%;
}
.cell-narrow img {
    position: absolute;
/*    height: 100%;  causes image to disappear, unclickable!!
*/
    overflow: visible;
}

.thumb-control {
  cursor: pointer;  /* mouse cursor shows pointing finger */
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: white; /*  #bbb; */
  border-radius: 50%;
  display: inline;
  transition: background-color 0.6s ease;
}

@media screen and (min-width: 505px) {
    .cell {
        width: 74px;
        height: 74px;
    }
    .landscape {
        width: 72px;
        height: 54px;
        top: 8px;
    }
    .portrait {
        width: 54px;
        height: 72px;
        left: 8px;
    }
}


/****************************
.cell .landscape form input {
    position: absolute;
    width: 100%;
}
.cell .portrait form input {
    position: absolute;
    width: 100%;
}
****************************/