.slideshow-ext { display: grid; text-align: left; margin-top: 30px; margin-bottom: 30px; } .slideshow-ext > input { display: none; } .slideshow-ext > .slide-content { opacity: 0; visibility: hidden; grid-row: 1; grid-column: 1; position: relative; display: flex; width: 100%; height: auto; overflow: hidden; transition: visibility 0s 2s, opacity 2s linear; box-sizing: border-box; white-space: normal; justify-content: center; } .slideshow-ext > .slide-content > div { width: 15%; line-height: normal; display: flex; flex-direction: column; justify-content: center; } .slideshow-ext > .slide-content h6 { font: bold 20pt "Unica One", sans-serif; color: rgb(152, 0, 0); background-color: transparent; text-decoration: none; } .slideshow-ext > .slide-content p { font: 18pt "Marcellus SC", serif; color: rgb(0, 0, 0); background-color: transparent; text-decoration: none; } .slideshow-ext > .slide-content a { display: block; text-align: center; margin: 0 auto; background-color: rgb(54, 71, 79); font: 12pt "Unica One", sans-serif; color: rgb(255, 255, 255); text-decoration: none; /* padding: 1px; border-radius: 0px;*/ border-style: solid; border-width: 0px; border-color: rgb(55, 71, 79); padding: 5px; border-radius: 5px; } .slideshow-controls { width: 80%; margin: 0 auto; grid-row: 1; grid-column: 1; position: relative; top: 50%; height: 26px; z-index: 5; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } .slideshow-controls label { display: none; position: absolute; top: -50%; padding: 13px; box-shadow: inset 2px -2px 0 1px #3a3a3a; cursor: pointer; -moz-transition: box-shadow 0.15s, margin 0.15s; -o-transition: box-shadow 0.15s, margin 0.15s; -webkit-transition: box-shadow 0.15s, margin 0.15s; transition: box-shadow 0.15s, margin 0.15s; } .slideshow-controls label:hover { box-shadow: inset 3px -3px 0 2px #71ad37; margin: 0 0px; } .slideshow-controls label:before { content: ''; position: absolute; top: 50%; left: 10%; } @media (max-width: 1500px) { .slideshow-ext { width: 90%; margin: 30px auto; } .slideshow-controls { width: 95%; top: 95%; } .slideshow-controls label { box-shadow: inset 2px -2px 0 1px #71ad37; } } @media (max-width: 1150px) { .slideshow-ext > .slide-content { flex-direction: column; } .slideshow-ext > .slide-content > div { margin: 0 auto; margin-bottom: 10px; width: 80%; } .slideshow-controls { top: 10%; width: 90%; } }