.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;
}