.peFlareLightbox { z-index: 2000; position: fixed; overflow: hidden; top: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-transform: translateZ(0px); -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; -ms-transition: opacity 0.5s; opacity: 0; filter: Alpha(Opacity=0); overflow: hidden; left: 0px; display: none; zoom: 1; } .peFlareLightbox img { max-width: none !important; } .peFlareLightbox div, .peFlareLightbox span, .peFlareLightbox img { outline: 0; margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -moz-box-shadow:0px; -webkit-box-shadow: 0px; box-shadow: 0px; } .peFlareLightbox.peFlareLightboxActive { opacity: 1; } .peFlareLightbox .peFlareLightboxHidden { position: absolute; opacity: 0; visibility: hidden; filter: Alpha(Opacity=0); z-index: 1; } .peFlareLightbox .peFlareLightboxOverlay { position: absolute; opacity: 0.8; background-color: black; filter: Alpha(Opacity=100); width: 100%; height: 100%; z-index: 2; } .peFlareLightbox .peFlareLightboxContent { position: absolute; width: 100%; height: 100%; z-index: 3; } .peFlareLightbox .peFlareLightboxVideo { -webkit-transform: translateZ(0px); -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; -ms-transition: opacity 0.5s; position: absolute; background-color: black; width: 100%; height: 100%; z-index: 6; opacity: 0; visibility: hidden; } .peFlareLightbox .peFlareLightboxVideo video { display: block; } .peFlareLightbox .peFlareLightboxVideo.peFlareLightboxActive { opacity: 1; visibility: visible; } .peFlareLightbox .peFlareLightboxVideo > div, .peFlareLightbox .peFlareLightboxVideo > iframe { width: 100%; } .peFlareLightbox .peFlareLightboxThumbs { -webkit-transform: translateZ(0px); position: absolute; width: 100%; height: 86px; margin-top: 0px; top: 100%; z-index: 5; -webkit-transition: margin-top 0.5s; -moz-transition: margin-top 0.5s; -o-transition: margin-top 0.5s; -ms-transition: margin-top 0.5s; } .peFlareLightbox .peFlareLightboxThumbs.peFlareLightboxActive { margin-top: -84px; } .peFlareLightbox .peFlareLightboxThumbs > span { overflow: hidden; display: block; width: 100%; height: 50px; margin-top: -50px; } .peFlareLightbox.msie .peFlareLightboxThumbs > span { background-color: black; opacity: 0; filter: Alpha(Opacity=0); } .peFlareLightbox .peFlareLightboxThumbs > div { overflow: hidden; background-color: black; background-color: rgba(0,0,0,0.5); } .peFlareLightbox .peFlareLightboxThumbs > div > div { overflow: hidden; margin: auto; } .peFlareLightbox.mobile .peFlareLightboxThumbs > div > div { -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s; } .peFlareLightbox.mobile .peFlareLightboxThumbs > div > div.touchMove { -webkit-transition: all 0s; -moz-transition: all 0s; -o-transition: all 0s; -ms-transition: all 0s; } .peFlareLightbox .peFlareLightboxThumbs > div > div > span { width: 90px; height: 60px; display: block; overflow: hidden; float: left; margin: 10px 0px 10px 10px; cursor: pointer; } .peFlareLightbox .peFlareLightboxThumbs > div > span { width: 90px; height: 60px; display: block; overflow: hidden; float: left; margin: 10px 0px 10px 10px; cursor: pointer; } .peFlareLightbox .peFlareLightboxThumbs > div > span.loaded { background-image: none; } .peFlareLightbox .peFlareLightboxContent > div { -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; -ms-transition: all 1s; -webkit-transform: translateZ(0px); position: absolute; overflow:hidden; display: block; width: 100%; height: 100%; opacity: 0; } .peFlareLightbox .peFlareLightboxContent > div.touchMove { -webkit-transition: all 0s; -moz-transition: all 0s; -o-transition: all 0s; -ms-transition: all 0s; } .peFlareLightbox .peFlareLightboxControls { -webkit-transform: translateZ(0px); z-index: 1000; left:50%; position: absolute; } .peFlareLightbox .peFlareLightboxControls > div{ position:relative; left:-50%; } .peFlareLightbox .peFlareLightboxControls a { display: block; float: right; margin: 5px 5px 5px 0px; z-index: 1000; } .peFlareLightbox .peFlareLightboxSpinner { -webkit-transform: translateZ(0px); z-index: 1010; width: 100%; height: 100%; position: absolute; filter: Alpha(Opacity=100); } .peFlareLightbox .peFlareLightboxSpinner span { display: block; width: 24px; height: 24px; position: absolute; top: 50%; margin-top: -12px; left: 50%; margin-left: -12px; border-radius: 4px; filter: Alpha(Opacity=100); } .peFlareLightbox a.peFlareLightboxVideoIcon { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-transform: translateZ(0px); -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; -ms-transition: opacity 0.5s; position:absolute; z-index:10; cursor: pointer; display: block; height: 84px; width: 84px; top:50%; left:50%; display: block; visibility: hidden; opacity: 0; } .peFlareLightbox a.peFlareLightboxVideoIcon.peFlareLightboxActive { opacity: 1; visibility: visible; } .peFlareLightbox a.peFlareLightboxVideoIcon span { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position:relative; display:block; width:84px; height:84px; margin-top:-42px; margin-left:-42px; } .peFlareLightbox .peFlareLightboxContent .peFlareLightboxRenderImage img { -webkit-transition: all 1s; } .peFlareLightbox .peFlareLightboxContent > div.peFlareLightboxRenderGallery { -webkit-transition: all 0s; -moz-transition: all 0s; -o-transition: all 0s; -ms-transition: all 0s; background-color: black; filter: Alpha(Opacity=100); opacity: 1; } .peFlareLightbox .peFlareLightboxContent > div.peFlareLightboxRenderGallery img { display:block; position:absolute; -webkit-transform-origin: 0 0; } .peFlareLightbox .peFlareLightboxContent > div.peFlareLightboxRenderGallery img.pePrevBW{ z-index:1; } .peFlareLightbox .peFlareLightboxContent > div.peFlareLightboxRenderGallery img.pePrevColor{ z-index:2; } .peFlareLightbox .peFlareLightboxContent > div.peFlareLightboxRenderGallery img.peCurrentBW{ z-index:4; } .peFlareLightbox .peFlareLightboxContent > div.peFlareLightboxRenderGallery img.peCurrentColor{ z-index:5; } /*mobile resolution*/ @media (min-width: 480px) and (max-width: 767px) { .peFlareLightbox a.peFlareLightboxVideoIcon { height: 42px; width: 42px; } .peFlareLightbox a.peFlareLightboxVideoIcon span { width:42px; height:42px; margin-top:-21px; margin-left:-21px; } } /*hide lightbox gallery content in page*/ .hiddenLightboxContent{ display:none; }