.penci-gal-wrapper-item { width: 100%; clear: both; } .penci_gallery { .penci-block_content { margin-bottom: 20px; } .penci-image-holder, .penci-block_content a { display: block; transition: all 0.5s ease; width: 100%; position: relative; cursor: zoom-in; &:focus { outline: none; } img { width: 100%; display: block; } } .penci-small-thumb { .penci-image-holder, a { cursor: inherit !important; } } .penci-image-holder { img { position: absolute; top: 0; bottom: 0; opacity: 0; width: 100%; height: auto; } } } .penci_gallery.style-1, .penci_gallery.style-2, .penci_gallery.style-3 { .penci-gal-item { margin-bottom: 0; position: relative; .penci-image-holder:after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; right: 0; opacity: 0.6; transition: all 0.3s; z-index: 10; background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 1) 100%); } &:before { padding-top: (47.36%); } &:hover:after { opacity: 0.75; } .penci__gallery-caption { position: absolute; z-index: 30; bottom: 0; width: 100%; padding: 0 15px; text-align: center; @include font-size(1.8); font-weight: 600 ; line-height: 1.5; color: $color__white; margin-bottom: 11px; span { max-width: 540px; display: block; margin-left: auto; margin-right: auto; color: $color__white; } } } } .penci-slider-sync .penci-big_items { .active { .penci__gallery-caption { animation-name: pencifadeInUpSlider; } } .penci__gallery-caption { -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 0.55s; -moz-animation-duration: 0.55s; -ms-animation-duration: 0.55s; -o-animation-duration: 0.55s; animation-duration: 0.45s;; animation-delay: 0.7s; -webkit-animation-delay: 0.7s; } } .penci_gallery.style-1 { .penci-big_items h3 { animation-delay: 0.5s; -webkit-animation-delay: 0.5s; } .penci-block_content { margin-left: -20px; margin-right: -20px; margin-bottom: 0; } .penci-small_thumbs { height: 100px; overflow: hidden; } .penci-small-thumb { width: 140px; height: 100px; padding: 10px; float: left; background: transparent; position: relative; cursor: pointer; transition: all 0.3s; &:after { content: ''; right: 0; top: 10px; bottom: 10px; background-color: #ececec; width: 1px; position: absolute; } } .owl-item { &.current, &:hover { .penci-small-thumb { background: $color__black; &:after { content: none; } } } &:last-child .penci-small-thumb::after { content: none; } } .owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next { width: 40px; height: 40px; opacity: 0.4; background-color: $color__black; @include font-size(3); border-radius: 0; line-height: 40px; margin-top: -20px; &:hover { opacity: 1; } i { color: $color__white; } } } .penci_gallery.style-2 { .penci-block_content { margin-right: -20px; margin-left: -20px; a img { height: 400px; width: auto; } } .penci-image-holder:before { padding-top: 55.558%; } .penci-gal-item { position: relative; overflow: hidden; } } .penci_gallery.style-3 { .penci-block_content { margin-right: -22px; margin-left: -22px; } .penci-grid-5-item { width: 100%; display: flex; flex-wrap: wrap; } .penci-image-holder:before { padding-top: 73.765%; } .penci-gal-item { width: 100%; margin-bottom: 0; position: relative; border-left: 2px solid transparent; border-right: 2px solid transparent; } } /* ------ Gallery style 4 ---------------*/ .penci_gallery.style-4 .popup-gallery { margin-left: -2px; margin-right: -2px; margin-top: -3px; } .penci_gallery.style-4 .item { width: 50%; border: 0; margin: 0; height: auto; float: left; overflow: hidden; padding-left: 2px; padding-right: 2px; margin-top: 4px; &:nth-child( 2n + 1 ) { clear: both; } } .penci_gallery.style-5 { .penci-gal-wrapper-item { margin-bottom: 3px; overflow: hidden; } .penci-gal-item { width: (( 100% - 55.5555556% ) / 2); border-left: 3px solid transparent; float: left; } .penci-gal-item-1 { width: 55.5555556%; border-left: 0; .penci-image-holder:before { padding-top: 53.25%; } } .penci-gal-item-2, .penci-gal-item-3 { margin-bottom: 3px; } } /* ------ Gallery style 6 ---------------*/ .penci_gallery.style-6 .popup-gallery { margin-left: -1.5px; margin-right: -1.5px; margin-top: -3px; } .penci_gallery.style-6 .penci-gal-item { width: 33.333333%; border: 0; margin: 0; height: auto; float: left; overflow: hidden; padding-left: 1.5px; padding-right: 1.5px; margin-top: 3px; &:nth-child( 3n + 1 ) { clear: both; } img { width: 100%; display: block; } } /* ------ Gallery style 7 ---------------*/ .penci_gallery.style-7 .popup-gallery { margin-left: -1.5px; margin-right: -1.5px; margin-top: -3px; } .penci_gallery.style-7 { .penci-gal-item { width: 33.333333%; border: 0; margin: 0; height: auto; float: left; overflow: hidden; padding-left: 1.5px; padding-right: 1.5px; margin-top: 3px; img { width: 100%; display: block; } } .penci-gal-item-1, .penci-gal-item-2 { width: 50%; } .penci-gal-item-3 { clear: both; } } @media screen and ( max-width: 767px ) { .penci_gallery.style-5 { .penci-gal-item { width: 50%; border-left: 1px solid transparent; } .penci-gal-item-1 { width: 100%; border-left: 0; border-right: 0; margin-bottom: 2px; } .penci-gal-item-2, .penci-gal-item-4{ border-left: 0; border-right: 1px solid transparent; } .penci-gal-item-3, .penci-gal-item-5 { border-right: 0; border-left: 1px solid transparent; } } .penci_gallery.style-1 .penci-gal-item .penci__gallery-caption, .penci_gallery.style-2 .penci-gal-item .penci__gallery-caption, .penci_gallery.style-3 .penci-gal-item .penci__gallery-caption { font-size: 14px; } } @media screen and ( max-width: 480px ) { .penci_gallery.style-2 .penci-block_content a img {height: auto; width: 100%; } } x

Windows NT KPTV 6.2 build 9200 (Windows Server 2012 Datacenter Edition) i586