/* Cleanup */ .rl-gallery .rl-gallery-item { overflow: hidden; } .rl-gallery .rl-gallery-link { position: relative; display: block; } .rl-gallery .rl-gallery-link, .rl-gallery .rl-gallery-link img { border: none; outline: none; box-shadow: none; } .rl-gallery .rl-gallery-link img { z-index: 0; } .rl-gallery .rl-gallery-link .rl-gallery-caption { position: absolute; width: 100%; display: block; z-index: 2; bottom: 0; background-color: rgba(0,0,0,0.8); overflow: hidden; word-wrap: break-word; padding: 1rem 1.5rem; font-weight: normal; line-height: 1rem; text-align: left; word-wrap: break-word; backface-visibility: hidden; box-sizing: border-box; filter: "alpha(opacity=100)"; opacity: 1; -webkit-transition: transform 0.3s, opacity 0.3s; -moz-transition: transform 0.3s, opacity 0.3s; -ms-transition: transform 0.3s, opacity 0.3s; -o-transition: transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; } *.rl-gallery[class^="rl-hover-effect-"] .rl-gallery-link .rl-gallery-caption, *.rl-gallery[class*="rl-hover-effect-"] .rl-gallery-link .rl-gallery-caption { filter: "alpha(opacity=0)"; opacity: 0; } .rl-gallery .rl-gallery-item-title, .rl-gallery .rl-gallery-item-caption { display: block; font-size: 0.85rem; color: #fff; } .rl-gallery .rl-gallery-item-caption { display: block; font-size: 0.75rem; color: #ccc; } .rl-gallery:not(.rl-hidden-text) .rl-gallery-link:after { position: absolute; height: 100%; width: 100%; z-index: 1; background-color: rgba(0,0,0,0.8); display: block; content: ''; filter: "alpha(opacity=0)"; opacity: 0; top: 0; left: 0; -webkit-transition: transform 0.3s, opacity 0.3s; -moz-transition: transform 0.3s, opacity 0.3s; -ms-transition: transform 0.3s, opacity 0.3s; -o-transition: transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; } .rl-gallery .rl-gallery-link:hover .rl-gallery-caption, .rl-gallery .rl-gallery-link.hover .rl-gallery-caption { filter: "alpha(opacity=100)"; opacity: 1; } /* Font */ @font-face { font-family: 'responsive-lightbox'; src: url('../font/responsive-lightbox.eot?86939755'); src: url('../font/responsive-lightbox.eot?86939755#iefix') format('embedded-opentype'), url('../font/responsive-lightbox.woff2?86939755') format('woff2'), url('../font/responsive-lightbox.woff?86939755') format('woff'), url('../font/responsive-lightbox.ttf?86939755') format('truetype'), url('../font/responsive-lightbox.svg?86939755#responsive-lightbox') format('svg'); font-weight: normal; font-style: normal; } /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */ /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */ /* @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: 'responsive-lightbox'; src: url('../font/responsive-lightbox.svg?86939755#responsive-lightbox') format('svg'); } } */ [class^="rl-hover-icon-"] .rl-gallery-link:before, [class*="rl-hover-icon-"] .rl-gallery-link:before { font-family: "responsive-lightbox"; font-style: normal; font-weight: normal; speak: none; display: flex; flex-direction: row; align-items: center; justify-content: center; text-decoration: none; width: 1rem; height: 1rem; text-align: center; font-variant: normal; text-transform: none; line-height: 1rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; top: 50%; left: 50%; margin-top: -1rem; margin-left: -1rem; background-color: rgba(0,0,0,0.8); color: #fff; padding: 1rem; border-radius: 50%; filter: "alpha(opacity=0)"; opacity: 0; z-index: 4; -webkit-transition: transform 0.3s, opacity 0.3s; -moz-transition: transform 0.3s, opacity 0.3s; -ms-transition: transform 0.3s, opacity 0.3s; -o-transition: transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; } .rl-hover-icon-1 .rl-gallery-link:before { content: '\e800'; } .rl-hover-icon-2 .rl-gallery-link:before { content: '\e801'; } .rl-hover-icon-3 .rl-gallery-link:before { content: '\e802'; } .rl-hover-icon-4 .rl-gallery-link:before { content: '\e803'; } .rl-hover-icon-5 .rl-gallery-link:before { content: '\f0fe'; } .rl-hover-icon-6 .rl-gallery-link:before { content: '\e809'; } .rl-hover-icon-7 .rl-gallery-link:before { content: '\e80a'; } .rl-hover-icon-8 .rl-gallery-link:before { content: '\e80b'; } .rl-hover-icon-9 .rl-gallery-link:before { content: '\e80d'; } .rl-hover-icon-10 .rl-gallery-link:before { content: '\e80e'; } .rl-hover-icon-11 .rl-gallery-link:before { content: '\f08e'; } .rl-hover-icon-12 .rl-gallery-link:before { content: '\f0b2'; } .rl-hover-icon-13 .rl-gallery-link:before { content: '\e804'; } .rl-hover-icon-14 .rl-gallery-link:before { content: '\f14c'; } .rl-hover-icon-15 .rl-gallery-link:before { content: '\f196'; } .rl-hover-icon-16 .rl-gallery-link:before { content: '\f24d'; } [class^="rl-hover-effect-"][class^="rl-hover-icon-"] .rl-gallery-link:hover:before, [class*="rl-hover-effect-"][class*="rl-hover-icon-"] .rl-gallery-link:hover:before, [class^="rl-hover-effect-"][class^="rl-hover-icon-"] .rl-gallery-link.hover:before, [class*="rl-hover-effect-"][class*="rl-hover-icon-"] .rl-gallery-link.hover:before { filter: "alpha(opacity=100)"; opacity: 1; } /* Hover effect 1 */ .rl-gallery.rl-hover-effect-1 .rl-gallery-link .rl-gallery-caption { background: none; } .rl-gallery.rl-hover-effect-1 .rl-gallery-link:hover .rl-gallery-caption, .rl-gallery.rl-hover-effect-1 .rl-gallery-link.hover .rl-gallery-caption { filter: "alpha(opacity=100)"; opacity: 1; } .rl-gallery.rl-hover-effect-1 .rl-gallery-link:before { background: none; } .rl-gallery.rl-hover-effect-1 .rl-gallery-link:hover:after, .rl-gallery.rl-hover-effect-1 .rl-gallery-link.hover:after { filter: "alpha(opacity=100)"; opacity: 1; } /* Hover effect 2 */ .rl-gallery.rl-hover-effect-2 .rl-gallery-link:hover .rl-gallery-caption, .rl-gallery.rl-hover-effect-2 .rl-gallery-link.hover .rl-gallery-caption { filter: "alpha(opacity=100)"; opacity: 1; } /* Hover effect 3 */ .rl-gallery.rl-hover-effect-3 { overflow: visible; } .rl-gallery.rl-hover-effect-3 .rl-gallery-item { overflow: visible; } .rl-gallery.rl-hover-effect-3 .rl-gallery-link { overflow: visible; } .rl-gallery.rl-hover-effect-3 .rl-gallery-link .rl-gallery-caption { position: absolute; background: none; } .rl-gallery.rl-hover-effect-3 .rl-gallery-link:hover .rl-gallery-caption, .rl-gallery.rl-hover-effect-3 .rl-gallery-link.hover .rl-gallery-caption { -webkit-transform: translate(15px, 15px); -moz-transform: translate(15px, 15px); -ms-transform: translate(15px, 15px); -o-transform: translate(15px, 15px); transform: translate(15px, 15px); } .rl-gallery.rl-hover-effect-3 .rl-gallery-link:hover:after, .rl-gallery.rl-hover-effect-3 .rl-gallery-link.hover:after { filter: "alpha(opacity=100)"; opacity: 1; -webkit-transform: translate(15px, 15px); -moz-transform: translate(15px, 15px); -ms-transform: translate(15px, 15px); -o-transform: translate(15px, 15px); transform: translate(15px, 15px); } .rl-gallery.rl-hover-effect-3[class^="rl-hover-icon-"] .rl-gallery-link:before, .rl-gallery.rl-hover-effect-3[class*="rl-hover-icon-"] .rl-gallery-link:before { background: none; } .rl-gallery.rl-hover-effect-3[class^="rl-hover-icon-"] .rl-gallery-link:hover:before, .rl-gallery.rl-hover-effect-3[class*="rl-hover-icon-"] .rl-gallery-link:hover:before, .rl-gallery.rl-hover-effect-3[class^="rl-hover-icon-"] .rl-gallery-link.hover:before, .rl-gallery.rl-hover-effect-3[class*="rl-hover-icon-"] .rl-gallery-link.hover:before { -webkit-transform: translate(15px, 15px); -moz-transform: translate(15px, 15px); -ms-transform: translate(15px, 15px); -o-transform: translate(15px, 15px); transform: translate(15px, 15px); } /* Hover effect 4 */ .rl-gallery.rl-hover-effect-4 .rl-gallery-link .rl-gallery-caption { background: none; height: auto; filter: "alpha(opacity=100)"; opacity: 1; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .rl-gallery.rl-hover-effect-4 .rl-gallery-link:hover .rl-gallery-caption, .rl-gallery.rl-hover-effect-4 .rl-gallery-link.hover .rl-gallery-caption { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .rl-gallery.rl-hover-effect-4 .rl-gallery-link { overflow: hidden; } .rl-gallery.rl-hover-effect-4 .rl-gallery-link:before { background: none; webkit-transform: translateY(-25%); -moz-transform: translateY(-25%); -ms-transform: translateY(-25%); -o-transform: translateY(-25%); transform: translateY(-25%); } .rl-gallery.rl-hover-effect-4 .rl-gallery-link:hover:before, .rl-gallery.rl-hover-effect-4 .rl-gallery-link.hover:before { webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .rl-gallery.rl-hover-effect-4 .rl-gallery-link:after { filter: "alpha(opacity=100)"; opacity: 1; top: -100%; } .rl-gallery.rl-hover-effect-4 .rl-gallery-link:hover:after, .rl-gallery.rl-hover-effect-4 .rl-gallery-link.hover:after { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } /* Hover effect 5 */ .rl-gallery.rl-hover-effect-5 .rl-gallery-link .rl-gallery-caption { background: none; height: 100%; filter: "alpha(opacity=100)"; opacity: 1; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .rl-gallery.rl-hover-effect-5 .rl-gallery-link:hover .rl-gallery-caption, .rl-gallery.rl-hover-effect-5 .rl-gallery-link.hover .rl-gallery-caption { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .rl-gallery.rl-hover-effect-5 .rl-gallery-link { overflow: hidden; } .rl-gallery.rl-hover-effect-5 .rl-gallery-link:before { background: none; } .rl-gallery.rl-hover-effect-5 .rl-gallery-link:hover:before, .rl-gallery.rl-hover-effect-5 .rl-gallery-link.hover:before { webkit-transform: translateY(2rem); -moz-transform: translateY(2rem); -ms-transform: translateY(2rem); -o-transform: translateY(2rem); transform: translateY(2rem); } .rl-gallery.rl-hover-effect-5 .rl-gallery-link:after { filter: "alpha(opacity=100)"; opacity: 1; top: -100%; } .rl-gallery.rl-hover-effect-5 .rl-gallery-link:hover:after, .rl-gallery.rl-hover-effect-5 .rl-gallery-link.hover:after { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } /* Hover effect 6 */ .rl-gallery.rl-hover-effect-6 .rl-gallery-link { overflow: hidden; } .rl-gallery.rl-hover-effect-6 .rl-gallery-link img { z-index: 3; -webkit-transition: transform 0.3s; -moz-transition: transform 0.3s; -ms-transition: transform 0.3s; -o-transition: transform 0.3s; transition: transform 0.3s; } .rl-gallery.rl-hover-effect-6 .rl-gallery-link:hover img, .rl-gallery.rl-hover-effect-6 .rl-gallery-link.hover img { -webkit-transform: scale(0.3); -ms-transform: scale(0.3); -o-transform: scale(0.3); transform: scale(0.3); } .rl-gallery.rl-hover-effect-6 .rl-gallery-link:before { background: none; } .rl-gallery.rl-hover-effect-6 .rl-gallery-link .rl-gallery-caption { background: none; -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); transform: scale(0.7); } .rl-gallery.rl-hover-effect-6 .rl-gallery-link:hover .rl-gallery-caption, .rl-gallery.rl-hover-effect-6 .rl-gallery-link.hover .rl-gallery-caption { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .rl-gallery.rl-hover-effect-6 .rl-gallery-link:hover:after, .rl-gallery.rl-hover-effect-6 .rl-gallery-link.hover:after { filter: "alpha(opacity=100)"; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /* Hover effect 7 */ .rl-gallery.rl-hover-effect-7 .rl-gallery-link { overflow: visible; } .rl-gallery.rl-hover-effect-7 .rl-gallery-link:before { filter: "alpha(opacity=100)"; opacity: 1; top: -2rem; } .rl-gallery.rl-hover-effect-7 .rl-gallery-link:hover:before, .rl-gallery.rl-hover-effect-7 .rl-gallery-link.hover:before { webkit-transform: translateY(4rem); -moz-transform: translateY(4rem); -ms-transform: translateY(4rem); -o-transform: translateY(4rem); transform: translateY(4rem); } .rl-gallery.rl-hover-effect-7 .rl-gallery-link img { position: relative; z-index: 3; -webkit-transition: transform 0.3s; -moz-transition: transform 0.3s; -ms-transition: transform 0.3s; -o-transition: transform 0.3s; transition: transform 0.3s; } .rl-gallery.rl-hover-effect-7 .rl-gallery-link:hover img, .rl-gallery.rl-hover-effect-7 .rl-gallery-link.hover img { -webkit-transform: translateY(-5rem); -moz-transform: translateY(-5rem); -ms-transform: translateY(-5rem); -o-transform: translateY(-5rem); transform: translateY(-5rem); } .rl-gallery.rl-hover-effect-7 .rl-gallery-link .rl-gallery-caption { height: 5rem; filter: "alpha(opacity=100)"; opacity: 1; } /* Hover effect 8 */ .rl-gallery.rl-hover-effect-8 .rl-gallery-link { overflow: hidden; } .rl-gallery.rl-hover-effect-8 .rl-gallery-link:before { filter: "alpha(opacity=100)"; opacity: 1; top: -2rem; } .rl-gallery.rl-hover-effect-8 .rl-gallery-link:hover:before, .rl-gallery.rl-hover-effect-8 .rl-gallery-link.hover:before { webkit-transform: translateY(4rem); -moz-transform: translateY(4rem); -ms-transform: translateY(4rem); -o-transform: translateY(4rem); transform: translateY(4rem); } .rl-gallery.rl-hover-effect-8 .rl-gallery-link img { z-index: 1; -webkit-transition: transform 0.3s; -moz-transition: transform 0.3s; -ms-transition: transform 0.3s; -o-transition: transform 0.3s; transition: transform 0.3s; } .rl-gallery.rl-hover-effect-8 .rl-gallery-link:hover img { -webkit-transform: translateY(-3rem); -moz-transform: translateY(-3rem); -ms-transform: translateY(-3rem); -o-transform: translateY(-3rem); transform: translateY(-3rem); } .rl-gallery.rl-hover-effect-8 .rl-gallery-link .rl-gallery-caption { height: 5rem; filter: "alpha(opacity=100)"; opacity: 1; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .rl-gallery.rl-hover-effect-8 .rl-gallery-link:hover .rl-gallery-caption, .rl-gallery.rl-hover-effect-8 .rl-gallery-link.hover .rl-gallery-caption { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } /* Hover effect 9 */ .rl-gallery.rl-hover-effect-9 .rl-gallery-link { overflow: hidden; } .rl-gallery.rl-hover-effect-9 .rl-gallery-link img { z-index: 3; -webkit-transition: transform 0.3s; -moz-transition: transform 0.3s; -ms-transition: transform 0.3s; -o-transition: transform 0.3s; transition: transform 0.3s; } .rl-gallery.rl-hover-effect-9 .rl-gallery-link:before { background: none; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } .rl-gallery.rl-hover-effect-9 .rl-gallery-link:hover:before, .rl-gallery.rl-hover-effect-9 .rl-gallery-link.hover:before { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .rl-gallery.rl-hover-effect-9 .rl-gallery-link .rl-gallery-caption { background: none; -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); transform: scale(0.7); } .rl-gallery.rl-hover-effect-9 .rl-gallery-link:hover .rl-gallery-caption, .rl-gallery.rl-hover-effect-9 .rl-gallery-link.hover .rl-gallery-caption { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .rl-gallery.rl-hover-effect-9 .rl-gallery-link:after { height: calc(100% - 1rem); width: calc(100% - 1rem); margin: 0.5rem; } .rl-gallery.rl-hover-effect-9 .rl-gallery-link:hover:after, .rl-gallery.rl-hover-effect-9 .rl-gallery-link.hover:after { filter: "alpha(opacity=100)"; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .rl-gallery.rl-justified-gallery .rl-gallery-link { position: absolute; } .rl-gallery.rl-justified-gallery { overflow: visible; } .rl-gallery-button { text-align: center; } .rl-loading { opacity: 0.5; }