.ls-origami-block {
position: absolute;
height : 100%;
top : 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.ls-origami-tile {
position: absolute;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 20;
}
.ls-origami-tile {
width: 100%;
height: 100%;
}
.ls-origami-left .ls-origami-tile {
left: 100%;
top: 0;
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.ls-origami-left > .ls-origami-tile {
width: 50%;
left: 0;
}
.ls-origami-right .ls-origami-tile {
right: 100%;
top: 0;
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
-o-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.ls-origami-right > .ls-origami-tile {
width: 50%;
right: 0;
}
.ls-origami-top .ls-origami-tile {
left: 0;
top: 100%;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
}
.ls-origami-top > .ls-origami-tile {
height: 50%;
top: 0;
}
.ls-origami-bottom .ls-origami-tile {
left: 0;
bottom: 100%;
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.ls-origami-bottom > .ls-origami-tile {
height: 50%;
bottom: 0;
}
.ls-origami-tile .ls-light,
.ls-origami-image-holder {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
}
.ls-origami-tile .ls-light {
z-index: 2;
}
.ls-origami-image-holder {
z-index: 10;
}
.ls-origami-image-holder > img {
position: relative;
z-index: 1;
}
.ls-origami-tile .ls-white {
background: white;
}
.ls-origami-tile .ls-black {
background: black;
}.ls-popup-overlay {
position: fixed !important;
z-index: 999999 !important;
left: 0;
top: 0;
width: 100% !important;
height: 100% !important;
display: none;
}
.ls-popup {
position: fixed !important;
width: auto !important;
height: auto !important;
z-index: 9999999 !important;
display: block !important;
overflow: visible !important;
visibility: visible !important;
}
.ls-popup:not(.ls-popup-visible) {
transform: translate(-10000px,-10000px);
}
.ls-popup:not(.ls-popup-visible),
.ls-popup:not(.ls-popup-visible) .ls-popup-inner .ls-container {
pointer-events: none !important;
visibility: hidden !important;
}
.ls-popup.ls-popup-scrollable {
position: absolute !important;
}
.ls-popup .ls-popup-inner {
width: 100% !important;
height: 100% !important;
}
.ls-popup,
.ls-popup-inner {
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: none !important;
background: none !important;
}
.ls-popup .ls-popup-inner .ls-container {
position: absolute !important;
pointer-events: auto !important;
}
.ls-popup-close-button {
position: absolute;
width: 28px;
height: 28px;
border-radius: 100%;
border: 2px solid white;
z-index: 1000;
left: 10px;
top: 10px;
cursor: pointer;
opacity: .75;
transition: opacity .3s ease-in-out;
background: rgba(0,0,0,.25);
box-sizing: content-box !important;
}
.ls-popup-close-button:before,
.ls-popup-close-button:after {
content: '';
width: 20px;
height: 2px;
position: absolute;
top: 13px;
left: 4px;
background: white;
border-radius: 10px;
transition: transform .2s ease-in-out;
}
.ls-popup-close-button:before {
transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
.ls-popup-close-button:after {
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
}
.ls-popup-close-button:hover {
opacity: 1;
}
.ls-popup-close-button:hover:before {
transform: rotate(135deg);
}
.ls-popup-close-button:hover:after {
transform: rotate(45deg);
}