?? GreyFile — Mystic File Browser

Current path: home/webdevt/www/wdp/wp-content/themes/quadric/assets/css/scss/modules/shortcodes/


?? Go up: /home/webdevt/www/wdp/wp-content/themes/quadric/assets/css/scss/modules

?? Viewing: _imagegallery.scss

/* ==========================================================================
# Image Gallery - begin
========================================================================== */

/* Image Gallery Grid - begin
========================================================================== */

.edgtf-image-gallery {

	.edgtf-grayscale .edgtf-gallery-image img {
		-webkit-filter: grayscale(100%);
		-moz-filter: grayscale(100%);
		filter: gray;
		filter: grayscale(100%);
		filter: url(img/desaturate.svg#grayscale);
	}

	.edgtf-grayscale .edgtf-gallery-image:hover img {
		-webkit-filter: grayscale(0);
		filter: none;
	}


	.edgtf-gallery-image img {
		display: block;
	}

	.edgtf-image-gallery-grid.edgtf-gallery-columns-2 {

		.edgtf-gallery-image {
			width: 49%;
			margin-right: 2%;
			margin-bottom: 2%;
			display: inline-block;
			float: left;

			&:nth-child(2n) {
				margin-right: 0;
			}

			&:nth-child(2n+1) {
				clear: both;
			}

		}


	}

	.edgtf-image-gallery-grid.edgtf-gallery-columns-3 {

		.edgtf-gallery-image {
			width: 32%;
			margin-right: 2%;
			margin-bottom: 2%;
			display: inline-block;
			float: left;

			&:nth-child(3n) {
				margin-right: 0;
			}

			&:nth-child(3n+1) {
				clear: both;
			}

		}

	}

	.edgtf-image-gallery-grid.edgtf-gallery-columns-4 {

		.edgtf-gallery-image {
			width: 24%;
			margin-right: 1.33333%;
			margin-bottom: 1.33333%;
			display: inline-block;
			float: left;

			&:nth-child(4n) {
				margin-right: 0;
			}

			&:nth-child(4n+1) {
				clear: both;
			}

		}

	}

	.edgtf-image-gallery-grid.edgtf-gallery-columns-5 {

		.edgtf-gallery-image {
			width: 19%;
			margin-right: 1.25%;
			margin-bottom: 1.25%;
			display: inline-block;
			float: left;

			&:nth-child(5n) {
				margin-right: 0;
			}

			&:nth-child(5n+1) {
				clear: both;
			}

		}

	}

}

/* Image Gallery Grid - end
========================================================================== */

/* Image Gallery Slider - begin
========================================================================== */

.edgtf-image-gallery-slider{
	text-align:center;
	display:none;
}


.edgtf-image-gallery {

	.edgtf-image-gallery-wrapper{
		display:inline-block;
		vertical-align: middle;
		img{
			vertical-align: middle;
		}
	}

	.owl-nav {

		.owl-prev {
			position: absolute;
			top: 50%;
			@include edgtfTransform(translateY(-50%));
			left: 2%;
		}

		.owl-next {
			position: absolute;
			top: 50%;
			@include edgtfTransform(translateY(-50%));
			right: 2%;
		}

		.edgtf-prev-icon,
		.edgtf-next-icon {
			display: inline-block;
			width: 42px;
			height: 42px;
			text-align: center;

			i {
				@include edgtfTransition(color .3s ease-out);
				font-size: 45px;
				line-height: 45px;
				color: #fff;
			}
			&:hover{
                i {
                    color:$first-main-color;
                }
            }
		}
	}

	.owl-dots {
		text-align: center;

		.owl-dot {
			display: inline-block;
		}

		.owl-dot span {
			display: inline-block;
			width: 12px;
			height: 12px;
			margin: 3px;
			filter: Alpha(Opacity=50);
			opacity: 0.5;
			-webkit-border-radius: 20px;
			-moz-border-radius: 20px;
			border-radius: 20px;
			background: #74797b;
		}

		.owl-dot.active span {
			opacity: 1;
		}

	}


}

/* Image Gallery Slider - end
========================================================================== */
.edgtf-image-gallery.carousel{
	overflow:hidden;
	position:relative;
}

.edgtf-image-gallery-carousel{
	display:none;
	width: 33.33%;
    margin: 0 auto;
    overflow:visible;

    .owl-stage-outer{
		overflow:visible;
	}

	.owl-controls{
		position:absolute;
		width:100%;
		bottom: 10px;
	}
	
	.edgtf-image-gallery-wrapper{
		background-color:#0e1718;
	}
	
	img{
		opacity:0.19;
		@include edgtfTransition(opacity .3s ease-out);
	}

	.owl-item.active{
		img{
			opacity:1;
		}
	}
}

.edgtf-image-gallery-carousel-wrapper{
	position:relative;
}

.edgtf-image-gallery-nav{
	span{
		position: absolute;
		display: inline-block;
	    top: 50%;
	    color: #fff;
	    font-size:45px;
	    z-index: 1;
	    transform: translateY(-50%);
	    cursor:pointer;

	    &.edgtf-prev-icon{
	    	left:0;
	    }

	    &.edgtf-next-icon{
	    	right:0;
	    }
	}
}

/* ==========================================================================
# Image Gallery - end
========================================================================== */

??

??