/*! * ===================================================== * V0.4.3 - powered by chinieer * ===================================================== */ /*.hairline(@position, @color) when (@position = top) { &:before { content: ''; position: absolute; left: 0; top: 0; bottom: auto; right: auto; height: 1px; width: 100%; background-color: @color; display: block; z-index: 15; transform-origin: 50% 0%; @media only screen and (-webkit-min-device-pixel-ratio: 2) { transform: scaleY(0.5); } @media only screen and (-webkit-min-device-pixel-ratio: 3) { transform: scaleY(0.33); } } } .hairline(@position, @color) when (@position = left) { &:before { content: ''; position: absolute; left: 0; top: 0; bottom: auto; right: auto; width: 1px; height: 100%; background-color: @color; display: block; z-index: 15; transform-origin: 0% 50%; @media only screen and (-webkit-min-device-pixel-ratio: 2) { transform: scaleY(0.5); } @media only screen and (-webkit-min-device-pixel-ratio: 3) { transform: scaleY(0.33); } } } .hairline(@position, @color) when (@position = bottom) { &:after { content: ''; position: absolute; left: 0; bottom: 0; right: auto; top: auto; height: 1px; width: 100%; background-color: @color; display: block; z-index: 15; transform-origin: 50% 100%; @media only screen and (-webkit-min-device-pixel-ratio: 2) { transform: scaleY(0.5); } @media only screen and (-webkit-min-device-pixel-ratio: 3) { transform: scaleY(0.33); } } } .hairline(@position, @color) when (@position = right) { &:after { content: ''; position: absolute; right: 0; top: 0; left: auto; bottom: auto; width: 1px; height: 100%; background-color: @color; display: block; z-index: 15; transform-origin: 100% 50%; @media only screen and (-webkit-min-device-pixel-ratio: 2) { transform: scaleY(0.5); } @media only screen and (-webkit-min-device-pixel-ratio: 3) { transform: scaleY(0.33); } } } // For right and bottom .hairline-remove(@position) when not (@position = left) and not (@position = top) { &:after { display: none; } } // For left and top .hairline-remove(@position) when not (@position = right) and not (@position = bottom) { &:before { display: none; } } // For right and bottom .hairline-color(@position, @color) when not (@position = left) and not (@position = top) { &:after { background-color: @color; } } // For left and top .hairline-color(@position, @color) when not (@position = right) and not (@position = bottom) { &:before { background-color: @color; } }*/ /*.transition(@d) { -webkit-transition-duration: @d; transition-duration: @d; } .delay(@d) { -webkit-transition-delay: @d; transition-delay: @d; } .transform(@t) { -webkit-transform: @t; transform: @t; } .transform-origin(@to) { -webkit-transform-origin: @to; transform-origin: @to; } .translate3d(@x:0, @y:0, @z:0) { -webkit-transform: translate3d(@x,@y,@z); transform: translate3d(@x,@y,@z); } .animation(@a) { -webkit-animation: @a; animation: @a; } .border-box(){ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .box-shadow(@bs) { -webkit-box-shadow: @bs; box-shadow: @bs; } .animation-name(@name) { -webkit-animation-name: @name; -moz-animation-name: @name; animation-name: @name; } .animation-duration(@duration) { -webkit-animation-duration: @duration; -moz-animation-duration: @duration; animation-duration: @duration; } .animation-direction(@direction) { -webkit-animation-direction: @direction; -moz-animation-direction: @direction; animation-direction: @direction; } */ /* === Photo Browser === */ .photo-browser { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 10500; } .photo-browser .bar-tab .tab-item .icon { width: 14px; height: 14px; margin-top: -5px; } .photo-browser .bar-tab ~ .photo-browser-captions { bottom: 52px; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .photo-browser.photo-browser-in { display: block; -webkit-animation: photoBrowserIn 400ms forwards; -o-animation: photoBrowserIn 400ms forwards; animation: photoBrowserIn 400ms forwards; } .photo-browser.photo-browser-out { display: block; -webkit-animation: photoBrowserOut 400ms forwards; -o-animation: photoBrowserOut 400ms forwards; animation: photoBrowserOut 400ms forwards; } html.with-statusbar-overlay .photo-browser { height: -webkit-calc(100% - 1rem); height: calc(100% - 1rem); top: 1rem; } .popup > .photo-browser .navbar, body > .photo-browser .navbar, .popup > .photo-browser .toolbar, body > .photo-browser .toolbar { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .photo-browser .page[data-page="photo-browser-slides"] { background: none; } .photo-browser .page { -moz-box-sizing: border-box; box-sizing: border-box; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #efeff4; } .photo-browser .view { overflow: hidden; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; width: 100%; height: 100%; z-index: 5000; } .page[data-page="photo-browser-slides"] .toolbar a { color: #4cd964; } .photo-browser-popup { background: none; } .photo-browser .navbar, .view[data-page="photo-browser-slides"] .navbar, .photo-browser .toolbar, .view[data-page="photo-browser-slides"] .toolbar { background: rgba(247, 247, 247, 0.95); -webkit-transition: 400ms; -o-transition: 400ms; transition: 400ms; } .view[data-page="photo-browser-slides"] .page[data-page="photo-browser-slides"] .navbar, .view[data-page="photo-browser-slides"] .page[data-page="photo-browser-slides"] .toolbar { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .photo-browser-exposed .navbar, .photo-browser-exposed .toolbar { opacity: 0; visibility: hidden; pointer-events: none; } .photo-browser-exposed .photo-browser-swiper-container { background: #000; } .photo-browser-of { margin: 0 0.25rem; } .photo-browser-captions { pointer-events: none; position: absolute; left: 0; width: 100%; bottom: 0; z-index: 10; opacity: 1; -webkit-transition: 400ms; -o-transition: 400ms; transition: 400ms; } .photo-browser-captions.photo-browser-captions-exposed { opacity: 0; } .toolbar ~ .photo-browser-captions { bottom: 2.2rem; -webkit-transform: translate3d(0, 0rem, 0); transform: translate3d(0, 0rem, 0); } .photo-browser-exposed .toolbar ~ .photo-browser-captions { -webkit-transform: translate3d(0, 2.2rem, 0); transform: translate3d(0, 2.2rem, 0); } .toolbar ~ .photo-browser-captions.photo-browser-captions-exposed { transformt: ranslate3d(0, 0rem, 0); } .photo-browser-caption { -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: 300ms; -o-transition: 300ms; transition: 300ms; position: absolute; bottom: 0; left: 0; opacity: 0; padding: 0.2rem 0.25px; width: 100%; text-align: center; color: #fff; background: rgba(0, 0, 0, 0.8); } .photo-browser-caption:empty { display: none; } .photo-browser-caption.photo-browser-caption-active { opacity: 1; } .photo-browser-captions-light .photo-browser-caption { background: rgba(255, 255, 255, 0.8); color: #3d4145; } .photo-browser-exposed .photo-browser-caption { color: #fff; background: rgba(0, 0, 0, 0.8); } .photo-browser-swiper-container { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background: #fff; -webkit-transition: 400ms; -o-transition: 400ms; transition: 400ms; } .photo-browser-swiper-wrapper { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .photo-browser-link-inactive { opacity: 0.3; } .photo-browser-slide { width: 100%; height: 100%; position: relative; overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -moz-box-sizing: border-box; box-sizing: border-box; } .photo-browser-slide.transitioning { -webkit-transition: 400ms; -o-transition: 400ms; transition: 400ms; } .photo-browser-slide span.photo-browser-zoom-container { width: 100%; text-align: center; display: none; } .photo-browser-slide img { width: auto; height: auto; max-width: 100%; max-height: 100%; display: none; } .photo-browser-slide.swiper-slide-active span.photo-browser-zoom-container, .photo-browser-slide.swiper-slide-next span.photo-browser-zoom-container, .photo-browser-slide.swiper-slide-prev span.photo-browser-zoom-container { display: block; } .photo-browser-slide.swiper-slide-active img, .photo-browser-slide.swiper-slide-next img, .photo-browser-slide.swiper-slide-prev img { display: inline; } .photo-browser-slide.swiper-slide-active.photo-browser-slide-lazy .preloader, .photo-browser-slide.swiper-slide-next.photo-browser-slide-lazy .preloader, .photo-browser-slide.swiper-slide-prev.photo-browser-slide-lazy .preloader { display: block; } .photo-browser-slide iframe { width: 100%; height: 100%; } .photo-browser-slide .preloader { display: none; position: absolute; width: 2.1rem; height: 2.1rem; margin-left: -2.1rem; margin-top: -2.1rem; left: 50%; top: 50%; } .photo-browser-dark .navbar, .photo-browser-dark .toolbar { background: rgba(30, 30, 30, 0.8); color: #fff; } .photo-browser-dark .navbar:before, .photo-browser-dark .toolbar:before { display: none; } .photo-browser-dark .navbar:after, .photo-browser-dark .toolbar:after { display: none; } .photo-browser-dark .navbar a, .photo-browser-dark .toolbar a { color: #fff; } .photo-browser-dark .photo-browser-swiper-container { background: #000; } @-webkit-keyframes photoBrowserIn { 0% { -webkit-transform: translate3d(0, 0, 0) scale(0.5); transform: translate3d(0, 0, 0) scale(0.5); opacity: 0; } 100% { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); opacity: 1; } } @-o-keyframes photoBrowserIn { 0% { transform: translate3d(0, 0, 0) scale(0.5); opacity: 0; } 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; } } @keyframes photoBrowserIn { 0% { -webkit-transform: translate3d(0, 0, 0) scale(0.5); transform: translate3d(0, 0, 0) scale(0.5); opacity: 0; } 100% { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); opacity: 1; } } @-webkit-keyframes photoBrowserOut { 0% { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); opacity: 1; } 100% { -webkit-transform: translate3d(0, 0, 0) scale(0.5); transform: translate3d(0, 0, 0) scale(0.5); opacity: 0; } } @-o-keyframes photoBrowserOut { 0% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; } 100% { transform: translate3d(0, 0, 0) scale(0.5); opacity: 0; } } @keyframes photoBrowserOut { 0% { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); opacity: 1; } 100% { -webkit-transform: translate3d(0, 0, 0) scale(0.5); transform: translate3d(0, 0, 0) scale(0.5); opacity: 0; } } /* === Swiper === */ .swiper-container { margin: 0 auto; position: relative; overflow: hidden; padding-bottom: 30px; /* Fix of Webkit flickering */ z-index: 1; } .swiper-container-no-flexbox .swiper-slide { float: left; } .swiper-container-vertical > .swiper-wrapper { -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition-property: -webkit-transform; -o-transition-property: -o-transform; transition-property: transform; -moz-box-sizing: content-box; box-sizing: content-box; } .swiper-container-android .swiper-slide, .swiper-wrapper { -webkit-transform: translate3d(0px, 0, 0); -o-transform: translate(0px, 0px); -ms-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } .swiper-container-multirow > .swiper-wrapper { -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-fles-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .swiper-container-free-mode > .swiper-wrapper { -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto; } .swiper-slide { -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; width: 100%; height: 100%; position: relative; } /* a11y */ .swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } /* IE10 Windows Phone 8 Fixes */ .swiper-wp8-horizontal { -ms-touch-action: pan-y; touch-action: pan-y; } .swiper-wp8-vertical { -ms-touch-action: pan-x; touch-action: pan-x; } /* Arrows */ .swiper-button-prev, .swiper-button-next { position: absolute; top: 50%; width: 27px; height: 44px; margin-top: -22px; z-index: 10; cursor: pointer; background-size: 27px 44px; background-position: center; background-repeat: no-repeat; } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); left: 10px; right: auto; } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); right: 10px; left: auto; } /* Pagination Styles */ .swiper-pagination { position: absolute; text-align: center; -webkit-transition: 300ms; -o-transition: 300ms; transition: 300ms; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } .swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #000; opacity: 0.2; } .swiper-pagination-bullet-active { opacity: 1; background: #007aff; } .swiper-container-vertical > .swiper-pagination { right: 10px; top: 50%; -webkit-transform: translate3d(0px, -50%, 0); -o-transform: translate(0px, -50%); -ms-transform: translate3d(0px, -50%, 0); transform: translate3d(0px, -50%, 0); } .swiper-container-vertical > .swiper-pagination .swiper-pagination-bullet { margin: 5px 0; display: block; } .swiper-container-horizontal > .swiper-pagination { bottom: 10px; left: 0; width: 100%; } .swiper-container-horizontal > .swiper-pagination .swiper-pagination-bullet { margin: 0 5px; } /* 3D Container */ .swiper-container-3d { -webkit-perspective: 1200px; -o-perspective: 1200px; perspective: 1200px; } .swiper-container-3d .swiper-wrapper, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-cube-shadow { -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-container-3d .swiper-slide-shadow-left { background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); /* Safari 4+, Chrome */ background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Chrome 10+, Safari 5.1+, iOS 5+ */ /* Firefox 3.6-15 */ background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Opera 11.10-12.00 */ background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Firefox 16+, IE10, Opera 12.50+ */ } .swiper-container-3d .swiper-slide-shadow-right { background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); /* Safari 4+, Chrome */ background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Chrome 10+, Safari 5.1+, iOS 5+ */ /* Firefox 3.6-15 */ background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Opera 11.10-12.00 */ background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Firefox 16+, IE10, Opera 12.50+ */ } .swiper-container-3d .swiper-slide-shadow-top { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); /* Safari 4+, Chrome */ background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Chrome 10+, Safari 5.1+, iOS 5+ */ /* Firefox 3.6-15 */ background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Opera 11.10-12.00 */ background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Firefox 16+, IE10, Opera 12.50+ */ } .swiper-container-3d .swiper-slide-shadow-bottom { background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); /* Safari 4+, Chrome */ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Chrome 10+, Safari 5.1+, iOS 5+ */ /* Firefox 3.6-15 */ background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Opera 11.10-12.00 */ background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Firefox 16+, IE10, Opera 12.50+ */ } /* Coverflow */ .swiper-container-coverflow .swiper-wrapper { /* Windows 8 IE 10 fix */ -ms-perspective: 1200px; } /* Fade */ .swiper-container-fade.swiper-container-free-mode .swiper-slide { -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .swiper-container-fade .swiper-slide { pointer-events: none; } .swiper-container-fade .swiper-slide-active { pointer-events: auto; } /* Cube */ .swiper-container-cube { overflow: visible; } .swiper-container-cube .swiper-slide { pointer-events: none; visibility: hidden; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; width: 100%; height: 100%; } .swiper-container-cube.swiper-container-rtl .swiper-slide { -webkit-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-prev, .swiper-container-cube .swiper-slide-next + .swiper-slide { pointer-events: auto; visibility: visible; } .swiper-container-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; background: #000; opacity: 0.6; -webkit-filter: blur(50px); filter: blur(50px); } .swiper-container-cube.swiper-container-vertical .swiper-cube-shadow { z-index: 0; } /* Scrollbar */ .swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, 0.1); } .swiper-container-horizontal > .swiper-scrollbar { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98%; } .swiper-container-vertical > .swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%; } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 10px; left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } /* Preloader */ .swiper-slide .preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; } .swiper-slide img { display: block; }