.slideshow   {display: inline-block;
              width: 200px;
              text-align: center;
              font-weight: bold;}

.slideshow a {color: black;
              text-decoration: none;}

.ss-button   {width: 100%;
              margin: 4px 0;
              border-radius: 10px;
              background-color: #FFFFFF;
              padding: 5px;
              opacity: 0.5;}
.ss-button > svg    {vertical-align: middle;}
.ss-button:disabled {background-color: #C0C0C0;}

.ss-content  {width: 100%;
              height: 230px;
              overflow: hidden;}

.ss-item     {display: flex;
              flex-direction: column;
              justify-content: center;
              width: 100%;
              height: 100%;}

.ss-caption  {flex: 0 0;
              margin-top: 4px;}

.ss-imwrap.toWidth  {flex: 0 0;}
.ss-imwrap.toHeight,
.ss-imwrap.crop     {flex: 1 0;
                     min-height: 0;}

.ss-imwrap > img {box-sizing: border-box;
                  min-width: 100px;
                  min-height: 100px;
                  border: 2px solid black;
                  object-fit: cover;
                  background-color: #E0E0E0;
                  /* .loading.svg */
                  background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iLTgwIC04MCAxNjAgMTYwIj4NCgk8Zz4NCgkJPHBhdGggaWQ9InRpY2siIGQ9Ik01LC00MHYtMjBoLTEwdjIweiIvPg0KCQk8dXNlIGhyZWY9IiN0aWNrIiBvcGFjaXR5PSIwLjkiIHRyYW5zZm9ybT0icm90YXRlKC0zMCkiLz4NCgkJPHVzZSBocmVmPSIjdGljayIgb3BhY2l0eT0iMC44IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjApIi8+DQoJCTx1c2UgaHJlZj0iI3RpY2siIG9wYWNpdHk9IjAuNyIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwKSIvPg0KCQk8dXNlIGhyZWY9IiN0aWNrIiBvcGFjaXR5PSIwLjYiIHRyYW5zZm9ybT0icm90YXRlKC0xMjApIi8+DQoJCTx1c2UgaHJlZj0iI3RpY2siIG9wYWNpdHk9IjAuNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCkiLz4NCgkJPHVzZSBocmVmPSIjdGljayIgb3BhY2l0eT0iMC40IiB0cmFuc2Zvcm09InJvdGF0ZSgtMTgwKSIvPg0KCQk8dXNlIGhyZWY9IiN0aWNrIiBvcGFjaXR5PSIwLjMiIHRyYW5zZm9ybT0icm90YXRlKC0yMTApIi8+DQoJCTx1c2UgaHJlZj0iI3RpY2siIG9wYWNpdHk9IjAuMiIgdHJhbnNmb3JtPSJyb3RhdGUoLTI0MCkiLz4NCgkJPHVzZSBocmVmPSIjdGljayIgb3BhY2l0eT0iMC4xIiB0cmFuc2Zvcm09InJvdGF0ZSgtMjcwKSIvPg0KCQk8YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgZnJvbT0iMCIgdG89IjM2MCIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4NCgk8L2c+DQo8L3N2Zz4NCg');
                  background-repeat: no-repeat;
                  background-size: 100px 100px;
                  background-position: center;}
.toWidth > img   {width: 100%;}
.toHeight > img  {height: 100%;}
.crop > img      {width: 100%;
                  height: 100%;}
.toCenter > img  {object-position: center;}
.toLeft > img    {object-position: left;}
.toRight > img   {object-position: right;}
.toTop > img     {object-position: top;}
.toBottom > img  {object-position: bottom;}