/* * Jquery Chroma Gallery * author: casulworks * Licensed under the MIT license * Credits for easing classes: http://matthewlein.com/ceaser/ * Credits for jello animation: https://daneden.github.io/animate.css/; */ @font-face { font-family: chroma-ui; src: url(../fonts/chroma-ui/chroma-ui.eot?-etc1qp); src: url(../fonts/chroma-ui/chroma-ui.eot?#iefix-etc1qp) format('embedded-opentype'), url(../fonts/chroma-ui/chroma-ui.ttf?-etc1qp) format('truetype'), url(../fonts/chroma-ui/chroma-ui.woff?-etc1qp) format('woff'), url(../fonts/chroma-ui/chroma-ui.svg?-etc1qp#chroma-ui) format('svg'); font-weight: 400; font-style: normal } [class*=" chrgi-"], [class^=chrgi-] { font-family: chroma-ui; speak: none; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; /* -moz-osx-font-smoothing: grayscale */ } .chrgi-download:before { content: "\e069" } .chrgi-image:before { content: "\e010" } .chrgi-zoom-in:before { content: "\e037" } .chrgi-zoom-out:before { content: "\e038" } .chrgi-return:before { content: "\e039" } .chrgi-play:before { content: "\e052" } .chrgi-pause:before { content: "\e053" } .chrgi-repeat:before { content: "\e058" } .chrgi-maximize:before { content: "\e112" } .chrgi-minimize:before { content: "\e113" } .chrgi-close:before { content: "\e117" } .chrgi-open:before { content: "\e128" } .chrgi-ellipsis:before { content: "\e129" } .chrgi-next:before { content: "\e600" } .chrgi-previous:before { content: "\e601" } :-moz-full-screen, :-webkit-full-screen, :fullscreen :-ms-fullscreen { overflow-y: hidden !important } .chroma-gallery *, .chroma-screen * { border: none; padding: none; outline: 0; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } .chrg-no-select { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .chroma-screen { width: 100%; height: 100%; display: none; top: 0; left: 0; position: fixed; touch-action: none; z-index: 9999; overflow: hidden } .chrg-dof-body { -webkit-filter: blur(0); -moz-filter: blur(0); -o-filter: blur(0); filter: blur(0); -webkit-transition: -webkit-filter .5s ease-in-out; -moz-transition: -moz-filter .5s ease-in-out; -o-transition: -o-filter .5s ease-in-out; transition: filter .5s ease-in-out } .chrg-dof-effect { -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); filter: blur(10px) } .chroma-screen .chrg-bg, .chroma-screen .chrg-content, .chroma-screen .chrg-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden } .chroma-screen .chrg-bg { opacity: 0; -webkit-transition: opacity .35s ease-in-out; -moz-transition: opacity .35s ease-in-out; -ms-transition: opacity .35s ease-in-out; -o-transition: opacity .35s ease-in-out; transition: opacity .35s ease-in-out; background-color: #000; will-change: opacity; touch-action: none } .chroma-screen .chrg-ui { width: 100%; position: absolute; top: 0; left: 0; height: 40px; opacity: 0; -webkit-transition: opacity .35s ease-in-out; -moz-transition: opacity .35s ease-in-out; -ms-transition: opacity .35s ease-in-out; -o-transition: opacity .35s ease-in-out; transition: opacity .35s ease-in-out; background: -moz-linear-gradient(top, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, 0) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, .2)), color-stop(100%, rgba(0, 0, 0, 0))); background: -webkit-linear-gradient(top, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, 0) 100%); background: -o-linear-gradient(top, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, 0) 100%); background: -ms-linear-gradient(top, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, 0) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33000000', endColorstr='#00000000', GradientType=0); will-change: opacity; z-index: 2 } .chroma-screen .chrg-ui button { width: 38px; height: 38px; float: right; position: relative; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; display: block; cursor: pointer; color: rgba(255, 255, 255, .7); background-color: transparent; text-align: center; -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; text-shadow: 0 3px 4px rgba(0, 0, 0, .4); font-size: 1.2em; will-change: background-color } .chroma-screen .chrg-ui button:hover { -webkit-box-shadow: 0 3px 8px 0 rgba(0, 0, 0, .3); -moz-box-shadow: 0 3px 8px 0 rgba(0, 0, 0, .3); box-shadow: 0 3px 8px 0 rgba(0, 0, 0, .3); background: rgba(0, 0, 0, .35); color: rgba(255, 255, 255, 1) } .chroma-screen .chrg-imgwrap { position: absolute; top: 0; left: 0; -webkit-transform-origin: 0 0; -mos-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform, -webkit-transform, -moz-transform, -ms-transform, -o-transform; z-index: 1 } .chroma-screen .chrg-imgwrap img { position: absolute; width: 100%; height: 100%; display: block; top: 0; left: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden } .chrg-loader, .chrg-loader-line-wrap, .chrg-loader-line-wrap-wrap { top: 0; width: 42px; position: absolute; left: 0 } .chrg-animation { -webkit-transition: all .35s; -moz-transition: all .35s; -ms-transition: all .35s; -o-transition: all .35s; transition: all .35s } .chrg-loader { bottom: 0; height: 25px; margin: auto; display: none; right: 0 } .chrg-loader-line-wrap-wrap { animation: loader-spin 1.8s cubic-bezier(.175, .885, .32, 1.275) infinite; -o-animation: loader-spin 1.8s cubic-bezier(.175, .885, .32, 1.275) infinite; -ms-animation: loader-spin 1.8s cubic-bezier(.175, .885, .32, 1.275) infinite; -webkit-animation: loader-spin 1.8s cubic-bezier(.175, .885, .32, 1.275) infinite; -moz-animation: loader-spin 1.8s cubic-bezier(.175, .885, .32, 1.275) infinite; box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; height: 21px; overflow: hidden; transform-origin: 50% 100%; -o-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100% } .chrg-loader-line-wrap { border: 2px solid transparent; border-radius: 100%; -o-border-radius: 100%; -ms-border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; height: 42px; margin: 0 auto; right: 0 } .chrg-loader-line-wrap-wrap:nth-child(1) { animation-delay: -45ms; -o-animation-delay: -45ms; -ms-animation-delay: -45ms; -webkit-animation-delay: -45ms; -moz-animation-delay: -45ms } .chrg-loader-line-wrap-wrap:nth-child(2) { animation-delay: -90ms; -o-animation-delay: -90ms; -ms-animation-delay: -90ms; -webkit-animation-delay: -90ms; -moz-animation-delay: -90ms } .chrg-loader-line-wrap-wrap:nth-child(3) { animation-delay: -135ms; -o-animation-delay: -135ms; -ms-animation-delay: -135ms; -webkit-animation-delay: -135ms; -moz-animation-delay: -135ms } .chrg-loader-line-wrap-wrap:nth-child(4) { animation-delay: -180ms; -o-animation-delay: -180ms; -ms-animation-delay: -180ms; -webkit-animation-delay: -180ms; -moz-animation-delay: -180ms } .chrg-loader-line-wrap-wrap:nth-child(5) { animation-delay: -225ms; -o-animation-delay: -225ms; -ms-animation-delay: -225ms; -webkit-animation-delay: -225ms; -moz-animation-delay: -225ms } .chrg-loader-line-wrap-wrap:nth-child(1) .chrg-loader-line-wrap { border-color: #ea4747; height: 38px; width: 38px; top: 3px } .chrg-loader-line-wrap-wrap:nth-child(2) .chrg-loader-line-wrap { border-color: #eaea47; height: 32px; width: 32px; top: 6px } .chrg-loader-line-wrap-wrap:nth-child(3) .chrg-loader-line-wrap { border-color: #47ea47; height: 26px; width: 26px; top: 9px } .chrg-loader-line-wrap-wrap:nth-child(4) .chrg-loader-line-wrap { border-color: #47eaea; height: 20px; width: 20px; top: 12px } .chrg-loader-line-wrap-wrap:nth-child(5) .chrg-loader-line-wrap { border-color: #4747ea; height: 14px; width: 14px; top: 15px } .chroma-gallery { width: 100%; min-width: 200px; min-height: 200px; display: none } .chroma-gallery .chrg-loadicon { visibility: hidden; font-size: 0; display: block } .chroma-gallery img { display: none } .chroma-gallery .chrg-grid:after { content: ''; display: block; clear: both } .chroma-gallery .chrg-item { opacity: 0; cursor: pointer; -webkit-transition: opacity .4s ease-in-out; -moz-transition: opacity .4s ease-in-out; -ms-transition: opacity .4s ease-in-out; -o-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out; will-change: opacity } .chroma-gallery .chrg-item img { width: 100%; display: block } .chroma-gallery .chrg-item:hover img { /* -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -o-filter: grayscale(1); filter: grayscale(1) */ } .chroma-gallery .chrg-description { display: block; /* background: rgba(0, 0, 0, .4); */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; -webkit-transition: opacity .4s ease-in-out, -webkit-filter .4s ease-in-out; -moz-transition: opacity .4s ease-in-out, -moz-filter .4s ease-in-out; -ms-transition: opacity .4s ease-in-out, -ms-filter .4s ease-in-out; -o-transition: opacity .4s ease-in-out, -o-filter .4s ease-in-out; transition: opacity .4s ease-in-out, filter .4s ease-in-out; text-align: center; font-size: 17px; will-change: opacity, filter, -webkit-filter, -moz-filter, -ms-filter, -o-filter; color: #fff } .chroma-gallery .chrg-description:hover { opacity: 1 } .chroma-gallery .chrg-description:before { content: ''; height: 100% } .chroma-gallery .chrg-description p { padding: 20%; line-height: 26px; /*border: 1px solid #fff;*/ } .chroma-gallery .chrg-description span { font-size: 50px; line-height: 20px } .chroma-gallery .chrg-description p, .chroma-gallery .chrg-description:before { display: inline-block; vertical-align: middle } @keyframes loader-spin { 0%, 15% { transform: rotate(0) } 100% { transform: rotate(360deg) } } @-o-keyframes loader-spin { 0%, 15% { -o-transform: rotate(0); transform: rotate(0) } 100% { -o-transform: rotate(360deg); transform: rotate(360deg) } } @-ms-keyframes loader-spin { 0%, 15% { -ms-transform: rotate(0); transform: rotate(0) } 100% { -ms-transform: rotate(360deg); transform: rotate(360deg) } } @-webkit-keyframes loader-spin { 0%, 15% { -webkit-transform: rotate(0); transform: rotate(0) } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg) } } @-moz-keyframes loader-spin { 0%, 15% { -moz-transform: rotate(0); transform: rotate(0) } 100% { -moz-transform: rotate(360deg); transform: rotate(360deg) } } .chrg-easing-linear { -webkit-transition-timing-function: linear !important; -moz-transition-timing-function: linear !important; -o-transition-timing-function: linear !important; transition-timing-function: linear !important } .chrg-easing-ease { -webkit-transition-timing-function: ease !important; -moz-transition-timing-function: ease !important; -o-transition-timing-function: ease !important; transition-timing-function: ease !important } .chrg-easing-easeIn { -webkit-transition-timing-function: ease-in !important; -moz-transition-timing-function: ease-in !important; -o-transition-timing-function: ease-in !important; transition-timing-function: ease-in !important } .chrg-easing-easeOut { -webkit-transition-timing-function: ease-out !important; -moz-transition-timing-function: ease-out !important; -o-transition-timing-function: ease-out !important; transition-timing-function: ease-out !important } .chrg-easing-easeInOut { -webkit-transition-timing-function: ease-in-out !important; -moz-transition-timing-function: ease-in-out !important; -o-transition-timing-function: ease-in-out !important; transition-timing-function: ease-in-out !important } .chrg-easing-easeInQuad { -webkit-transition-timing-function: cubic-bezier(.55, .085, .68, .53) !important; -moz-transition-timing-function: cubic-bezier(.55, .085, .68, .53) !important; -o-transition-timing-function: cubic-bezier(.55, .085, .68, .53) !important; transition-timing-function: cubic-bezier(.55, .085, .68, .53) !important } .chrg-easing-easeInCubic { -webkit-transition-timing-function: cubic-bezier(.55, .055, .675, .19) !important; -moz-transition-timing-function: cubic-bezier(.55, .055, .675, .19) !important; -o-transition-timing-function: cubic-bezier(.55, .055, .675, .19) !important; transition-timing-function: cubic-bezier(.55, .055, .675, .19) !important } .chrg-easing-easeInQuart { -webkit-transition-timing-function: cubic-bezier(.895, .030, .685, .22) !important; -moz-transition-timing-function: cubic-bezier(.895, .030, .685, .22) !important; -o-transition-timing-function: cubic-bezier(.895, .030, .685, .22) !important; transition-timing-function: cubic-bezier(.895, .030, .685, .22) !important } .chrg-easing-easeInQuint { -webkit-transition-timing-function: cubic-bezier(.755, .050, .855, .060) !important; -moz-transition-timing-function: cubic-bezier(.755, .050, .855, .060) !important; -o-transition-timing-function: cubic-bezier(.755, .050, .855, .060) !important; transition-timing-function: cubic-bezier(.755, .050, .855, .060) !important } .chrg-easing-easeInSine { -webkit-transition-timing-function: cubic-bezier(.47, 0, .745, .715) !important; -moz-transition-timing-function: cubic-bezier(.47, 0, .745, .715) !important; -o-transition-timing-function: cubic-bezier(.47, 0, .745, .715) !important; transition-timing-function: cubic-bezier(.47, 0, .745, .715) !important } .chrg-easing-easeInExpo { -webkit-transition-timing-function: cubic-bezier(.95, .050, .795, .035) !important; -moz-transition-timing-function: cubic-bezier(.95, .050, .795, .035) !important; -o-transition-timing-function: cubic-bezier(.95, .050, .795, .035) !important; transition-timing-function: cubic-bezier(.95, .050, .795, .035) !important } .chrg-easing-easeInCirc { -webkit-transition-timing-function: cubic-bezier(.6, .040, .98, .335) !important; -moz-transition-timing-function: cubic-bezier(.6, .040, .98, .335) !important; -o-transition-timing-function: cubic-bezier(.6, .040, .98, .335) !important; transition-timing-function: cubic-bezier(.6, .040, .98, .335) !important } .chrg-easing-easeInBack { -webkit-transition-timing-function: cubic-bezier(.6, 0, .735, .045) !important; -webkit-transition-timing-function: cubic-bezier(.6, -.28, .735, .045) !important; -moz-transition-timing-function: cubic-bezier(.6, -.28, .735, .045) !important; -o-transition-timing-function: cubic-bezier(.6, -.28, .735, .045) !important; transition-timing-function: cubic-bezier(.6, -.28, .735, .045) !important } .chrg-easing-easeOutQuad { -webkit-transition-timing-function: cubic-bezier(.25, .46, .45, .94) !important; -moz-transition-timing-function: cubic-bezier(.25, .46, .45, .94) !important; -o-transition-timing-function: cubic-bezier(.25, .46, .45, .94) !important; transition-timing-function: cubic-bezier(.25, .46, .45, .94) !important } .chrg-easing-easeOutExpo { -webkit-transition-timing-function: cubic-bezier(.19, 1, .22, 1) !important; -moz-transition-timing-function: cubic-bezier(.19, 1, .22, 1) !important; -o-transition-timing-function: cubic-bezier(.19, 1, .22, 1) !important; transition-timing-function: cubic-bezier(.19, 1, .22, 1) !important } .chrg-easing-easeOutCubic { -webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1) !important; -moz-transition-timing-function: cubic-bezier(.215, .61, .355, 1) !important; -o-transition-timing-function: cubic-bezier(.215, .61, .355, 1) !important; transition-timing-function: cubic-bezier(.215, .61, .355, 1) !important } .chrg-easing-easeOutQuart { -webkit-transition-timing-function: cubic-bezier(.165, .84, .44, 1) !important; -moz-transition-timing-function: cubic-bezier(.165, .84, .44, 1) !important; -o-transition-timing-function: cubic-bezier(.165, .84, .44, 1) !important; transition-timing-function: cubic-bezier(.165, .84, .44, 1) !important } .chrg-easing-easeOutQuint { -webkit-transition-timing-function: cubic-bezier(.23, 1, .32, 1) !important; -moz-transition-timing-function: cubic-bezier(.23, 1, .32, 1) !important; -o-transition-timing-function: cubic-bezier(.23, 1, .32, 1) !important; transition-timing-function: cubic-bezier(.23, 1, .32, 1) !important } .chrg-easing-easeOutSine { -webkit-transition-timing-function: cubic-bezier(.39, .575, .565, 1) !important; -moz-transition-timing-function: cubic-bezier(.39, .575, .565, 1) !important; -o-transition-timing-function: cubic-bezier(.39, .575, .565, 1) !important; transition-timing-function: cubic-bezier(.39, .575, .565, 1) !important } .chrg-easing-easeOutCirc { -webkit-transition-timing-function: cubic-bezier(.075, .82, .165, 1) !important; -moz-transition-timing-function: cubic-bezier(.075, .82, .165, 1) !important; -o-transition-timing-function: cubic-bezier(.075, .82, .165, 1) !important; transition-timing-function: cubic-bezier(.075, .82, .165, 1) !important } .chrg-easing-easeOutBack { -webkit-transition-timing-function: cubic-bezier(.175, .885, .32, 1) !important; -webkit-transition-timing-function: cubic-bezier(.175, .885, .32, 1.275) !important; -moz-transition-timing-function: cubic-bezier(.175, .885, .32, 1.275) !important; -o-transition-timing-function: cubic-bezier(.175, .885, .32, 1.275) !important; transition-timing-function: cubic-bezier(.175, .885, .32, 1.275) !important } .chrg-easing-easeInOutQuad { -webkit-transition-timing-function: cubic-bezier(.455, .030, .515, .955) !important; -moz-transition-timing-function: cubic-bezier(.455, .030, .515, .955) !important; -o-transition-timing-function: cubic-bezier(.455, .030, .515, .955) !important; transition-timing-function: cubic-bezier(.455, .030, .515, .955) !important } .chrg-easing-easeInOutCubic { -webkit-transition-timing-function: cubic-bezier(.645, .045, .355, 1) !important; -moz-transition-timing-function: cubic-bezier(.645, .045, .355, 1) !important; -o-transition-timing-function: cubic-bezier(.645, .045, .355, 1) !important; transition-timing-function: cubic-bezier(.645, .045, .355, 1) !important } .chrg-easing-easeInOutQuart { -webkit-transition-timing-function: cubic-bezier(.77, 0, .175, 1) !important; -moz-transition-timing-function: cubic-bezier(.77, 0, .175, 1) !important; -o-transition-timing-function: cubic-bezier(.77, 0, .175, 1) !important; transition-timing-function: cubic-bezier(.77, 0, .175, 1) !important } .chrg-easing-easeInOutQuint { -webkit-transition-timing-function: cubic-bezier(.86, 0, .070, 1) !important; -moz-transition-timing-function: cubic-bezier(.86, 0, .070, 1) !important; -o-transition-timing-function: cubic-bezier(.86, 0, .070, 1) !important; transition-timing-function: cubic-bezier(.86, 0, .070, 1) !important } .chrg-easing-easeInOutSine { -webkit-transition-timing-function: cubic-bezier(.445, .050, .55, .95) !important; -moz-transition-timing-function: cubic-bezier(.445, .050, .55, .95) !important; -o-transition-timing-function: cubic-bezier(.445, .050, .55, .95) !important; transition-timing-function: cubic-bezier(.445, .050, .55, .95) !important } .chrg-easing-easeInOutExpo { -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1) !important; -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1) !important; -o-transition-timing-function: cubic-bezier(1, 0, 0, 1) !important; transition-timing-function: cubic-bezier(1, 0, 0, 1) !important } .chrg-easing-easeInOutCirc { -webkit-transition-timing-function: cubic-bezier(.785, .135, .15, .86) !important; -moz-transition-timing-function: cubic-bezier(.785, .135, .15, .86) !important; -o-transition-timing-function: cubic-bezier(.785, .135, .15, .86) !important; transition-timing-function: cubic-bezier(.785, .135, .15, .86) !important } .chrg-easing-easeInOutBack { -webkit-transition-timing-function: cubic-bezier(.68, 0, .265, 1) !important; -webkit-transition-timing-function: cubic-bezier(.68, -.55, .265, 1.55) !important; -moz-transition-timing-function: cubic-bezier(.68, -.55, .265, 1.55) !important; -o-transition-timing-function: cubic-bezier(.68, -.55, .265, 1.55) !important; transition-timing-function: cubic-bezier(.68, -.55, .265, 1.55) !important } .chrg-easing-chroma { -webkit-transition-timing-function: cubic-bezier(1, .015, .44, 1) !important; -moz-transition-timing-function: cubic-bezier(1, .015, .44, 1) !important; -o-transition-timing-function: cubic-bezier(1, .015, .44, 1) !important; transition-timing-function: cubic-bezier(1, .015, .44, 1) !important }