.jetpack-slideshow-window { background-color: #222; border: 20px solid #222; border-radius: 10px; height: 0; margin-bottom: 20px; overflow: hidden; padding-top: 30px !important; padding-bottom: 56.25% !important; position: relative; z-index: 1; } .jetpack-slideshow-window.jetpack-slideshow-white { background-color: #fff; border-color: #fff; } .jetpack-slideshow-window, .jetpack-slideshow-window * { box-sizing: content-box; } .jetpack-slideshow-loading { height: 100%; text-align: center; margin: auto; } body div.jetpack-slideshow-window * img { /* Override any styles that might be present in the page stylesheet */ background-color: transparent !important; background-image: none !important; border-width: 0 !important; display: block; margin: 0 auto; max-width: 100%; max-height: 100%; padding: 0 !important; position: relative; transform: translateY(-50%); top: 50%; } .jetpack-slideshow-loading img { vertical-align: middle; } .jetpack-slideshow-slide { display: none; height: 100% !important; right: 0; margin: auto; position: absolute; text-align: center; top: 0; width: 100% !important; } .jetpack-slideshow-slide img { vertical-align: middle; } .jetpack-slideshow-line-height-hack { overflow: hidden; width: 0px; font-size: 0px; } .jetpack-slideshow-slide-caption { font-size: 13px; font-family: "Helvetica Neue", sans-serif; color: #f6f7f7; text-shadow: #222 -1px 1px 2px; line-height: 25px; height: 25px; position: absolute; bottom: 5px; right: 0; z-index: 100; width: 100%; text-align: center; } .jetpack-slideshow-controls { z-index: 1000; position: absolute; bottom: 30px; margin: auto; text-align: center; width: 100%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; opacity: 0.5; direction: ltr; transition: 300ms opacity ease-out; } .jetpack-slideshow-window:hover .jetpack-slideshow-controls { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; } body div div.jetpack-slideshow-controls a, body div div.jetpack-slideshow-controls a:hover { border: 2px solid rgba(255, 255, 255, 0.1) !important; background-color: #000 !important; background-color: rgba(0, 0, 0, 0.6) !important; background-image: url(../../../modules/shortcodes/img/slideshow-controls.png) !important; background-repeat: no-repeat; background-size: 142px 16px !important; background-position: -34px 8px !important; color: #222 !important; margin: 0 5px !important; padding: 0 !important; display: inline-block !important; *display: inline; zoom: 1; height: 32px !important; width: 32px !important; line-height: 32px !important; text-align: center !important; border-radius: 10em !important; transition: 300ms border-color ease-out; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { body div div.jetpack-slideshow-controls a, body div div.jetpack-slideshow-controls a:hover { background-image: url(../../../modules/shortcodes/img/slideshow-controls-2x.png) !important; } } body div div.jetpack-slideshow-controls a:hover { border-color: white !important; } body div div.jetpack-slideshow-controls a:first-child { background-position: -76px 8px !important; } body div div.jetpack-slideshow-controls a:last-child { background-position: -117px 8px !important; } body div div.jetpack-slideshow-controls a:nth-child(2) { background-position: -34px 8px !important; } body div div.jetpack-slideshow-controls a.running { background-position: -34px 8px !important; } body div div.jetpack-slideshow-controls a.paused { background-position: 9px 8px !important; } .jetpack-slideshow-controls a img { border: 50px dotted fuchsia; }