.pgwSlideshow { width: 100%; display: none; } .pgwSlideshow a{ color: #fff; } .pgwSlideshow .ps-current { text-align: center; position: relative; min-height: 150px; overflow: hidden; } .pgwSlideshow .ps-current > ul > li { text-align: center; width: 100%; z-index: 1; opacity: 0; display: block; } .pgwSlideshow .ps-current > ul > li img { display: block; max-width: 100%; margin: auto; border-radius:6px; } .pgwSlideshow .ps-caption { background: rgba(0, 0, 0, 0.5); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#99000000', endColorstr='#99000000'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#99000000', endColorstr='#99000000')"; text-align: left; font-size: 1rem; color: #fff; position: absolute; left: 0px; bottom: 0px; width: 100%; padding: 10px; display: none; } .pgwSlideshow .ps-caption span { padding: 7px; display: inline-block; } .pgwSlideshow .ps-list { margin-top:20px; overflow: hidden; position: relative; border-radius: 6px; } .pgwSlideshow .ps-list ul { position: relative; list-style: none; margin: 0; padding: 0; left: 0; } .pgwSlideshow .ps-list li { float: left; } .pgwSlideshow .ps-list li .ps-item { display: block; margin: 0px 5px; opacity: 0.8; filter: alpha(opacity=80); } .pgwSlideshow .ps-list li img { display: block; width: 200px; height: 112px; } .pgwSlideshow .ps-list li .ps-item.ps-selected { float: left; opacity: 1; overflow: hidden; } .pgwSlideshow .ps-list li .ps-item:hover { opacity: 1; filter: alpha(opacity=100); } .pgwSlideshow .ps-list li .ps-item.ps-selected img { margin: 0px; } .pgwSlideshow .ps-prevIcon { border-color:transparent #fff transparent; border-style: solid; border-width: 8px 10px 8px 0; display: block; } .pgwSlideshow .ps-nextIcon { border-color:transparent #fff transparent; border-style: solid; border-width: 8px 0 8px 8px; display: block; } .pgwSlideshow .ps-current .ps-prev { background: rgba(0, 0, 0, 0.35); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#99000000', endColorstr='#99000000'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#99000000', endColorstr='#99000000')"; border-radius: 40px; position: absolute; padding: 15px 19px; left: 10px; top: 50%; cursor: pointer; margin-top:-20px } .pgwSlideshow .ps-current .ps-next { background: rgba(0, 0, 0, 0.35); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#99000000', endColorstr='#99000000'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#99000000', endColorstr='#99000000')"; border-radius: 40px; position: absolute; padding: 15px 19px; right: 10px; top: 50%; cursor: pointer; margin-top:-20px } .pgwSlideshow .ps-list .ps-prev { background: rgba(0, 0, 0, 0.6); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#bb000000', endColorstr='#bb000000'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#bb000000', endColorstr='#bb000000')"; padding: 48px 10px 48px 10px; cursor: pointer; position: absolute; left: 0; top: 0px; z-index: 1000; display: none; border-radius: 6px; } .pgwSlideshow .ps-list .ps-next { background: rgba(0, 0, 0, 0.6); filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#bb000000', endColorstr='#bb000000'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#bb000000', endColorstr='#bb000000')"; padding: 48px 10px 48px 10px; cursor: pointer; position: absolute; right: 0; top: 0px; z-index: 1000; display: none; border-radius: 6px; } /* * The media-queries are not used because IE8 doesn't support them. */ .pgwSlideshow.narrow .ps-list li img { width: 120px; height:68px; } .pgwSlideshow.narrow .ps-current .ps-prev { padding: 20px 10px 20px 10px; top: 50%; margin-top:-20px } .pgwSlideshow.narrow .ps-current .ps-next { padding: 20px 10px 20px 10px; top: 50%; margin-top:-20px } .pgwSlideshow.narrow .ps-list .ps-prev { padding: 37px 10px 37px 10px; top: 0px; } .pgwSlideshow.narrow .ps-list .ps-next { padding: 37px 10px 37px 10px; top: 0px; } .pgwSlideshow.narrow .ps-caption { font-size: 0.75rem; padding: 8px; } @media screen and (max-width:640px) { .pgwSlideshow.narrow .ps-list .ps-prev { padding: 30px 10px 30px 10px; } .pgwSlideshow.narrow .ps-list .ps-next { padding: 30px 10px 30px 10px; } }