/* 
===========================================================================================
=================================== Gallery CSS ===========================================
===========================================================================================
*/

.grid-buttons {
	width:100%;
	height:auto;
	position:relative;
  	display:flex;
  	margin:1em 0 3.125em;
	right:0;
	box-sizing:border-box;
	z-index:1;
}

.grid-buttons ul {
	width:auto;
	height:auto;
	position:relative;
	display:flex;
	margin:0 auto;
}

.grid-buttons ul li {
	list-style-type: none;
}

/* Filter Button Styles */

#flabel {
    width: 2.5em;
    height: 2.5em;
    position: fixed;
    display: flex;
    margin: 0;
    padding:0.625em;
    top: -4em;
    left: 0;
    background-color: #2196F3;
    border-radius: 0.25em;
    -webkit-transition: all 0.85s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.85s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.85s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.85s cubic-bezier(0.645, 0.045, 0.355, 1);
	box-sizing: border-box;
}


#flabel .open, 
#flabel .close {
    width:100%;
    height:100%;
    position: absolute;
    display:flex;
    flex-wrap:wrap;
	top: 0;
	right: 0;
	left: 0;
	padding: 0.625em;
	box-sizing: border-box;
}

#flabel .open {
	-webkit-transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
	-moz-transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
	-o-transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
	fill: white;
	box-sizing: border-box;
}


#flabel line {
	fill: none;
	stroke: #3a3c48;
	stroke-width: 5.2094;
	stroke-miterlimit: 10;
	stroke-dasharray: 68;
	stroke:#cbe5f7;
}

#flabel .open line {
	-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	-moz-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	-o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

#flabel .close line {
	stroke-dashoffset: 68;
	-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	-moz-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	-o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}


/* ------Filter Menu List Selection Styles---------  */

.filter {
	width:auto;
	position:relative;
	display:flex;
	align-items:center;
	right:0;
	box-sizing:border-box;
	z-index:1;
}

.filter .row {
	width:auto;
	height:auto;
	position:relative;
	display:flex;
	flex-direction:column;
	margin:0 1em;
	padding:0 1em;
}

.filter .row .caption {
	width:auto;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
}

.filter .row .caption strong {
	font-family: oswald, sans-serif;
    font-style: normal;
	font-weight:500;
	color: #8f8f8f;
    text-align: center;
}

.filter .row .caption em {
    width: 0;
    height: 0.125em;
    position: relative;
    display: block;
    margin: 0 auto;
    left: 0;
    background-color: #e94e1b;
    -webkit-transition: width 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: width 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: width 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: width 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.filter .row label {
	width:calc(100% - 2em);
	height:100%;
	position:absolute;
	display:flex;
	cursor:pointer;
}

.filter .row label input[type='checkbox'] {
	width:100%;
	height:100%;
	display:block;
}

.ball-slider {
	width:4em;
	height:auto;
	position: relative;
	display:none;
	border-radius:5em;
	background-color:#ccc;
	box-sizing:border-box;
}

.ball {
	width:1.5em;
	height:1.5em;
	position: relative;
	margin:0.25em;
	float:left;
	left:0;
	top:0;
	border-radius:50%;
	background-color: white;
	-webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.filter a:hover .caption strong, .filter .f-active .caption strong {
	color:#e94e1b;
}

.filter a:hover .caption em, .filter .f-active .caption em {
	width:100%;
}

.filter .f-active .ball-slider {
	background-color: #2196F3;
}

.filter .f-active .ball {
	left:2em;
}


#fbutton:checked ~ main #gallery .section-inner .section-body .grid-buttons {
	-webkit-transform:translateY(0);
	-ms-transform:translateY(0);
	-moz-transform:translateY(0);
	transform:translateY(0);
}

#fbutton:checked ~ main #gallery .section-inner .section-body .grid-buttons ul .sort #flabel {
	margin:0;
	top:-2.5em;
	border-radius:0.625em 0.625em 0 0;
	z-index:2;
}

#fbutton:checked ~ main #gallery .section-inner .section-body .grid-buttons ul .sort #flabel .close line {
	stroke-dashoffset: 0;
}

#fbutton:checked ~ main #gallery .section-inner .section-body .grid-buttons ul .sort #flabel .open {
	fill:transparent;
}

#fbutton:checked ~ main #gallery .section-inner .section-body .grid-buttons ul .sort .filter {
	position:relative;
	flex-direction:unset;
	bottom: 0;
	top: unset;
}

#fbutton:checked ~ .overlay {
	-webkit-transform:translate(0, 0);
	-ms-transform:translate(0, 0);
	-moz-transform:translate(0, 0);
	transform:translate(0, 0);
	z-index:0;
}

/* ---------------------------Light Gallery CSS---------------------------  */
.lg-outer #lg-share, .lg-outer #lg-download {
  display: none;
}

.home .demo-gallery {
  width:100%;
  position: relative;
  display:flex;
  flex-wrap:wrap;
}

.demo-gallery h3 {
  width:100%;
  text-transform:capitalize;
}

.demo-gallery .lightgallery,
.image-carousel .lightgallery {
  width:100%;
  position: relative;
  display:flex;
  flex-wrap:wrap;
  margin:0 0 3.125em;
}

.demo-gallery .lightgallery li {
  width:16em;
  height:16em;
  display:block;
  float: left;
}

.image-carousel .lightgallery li {
	width: calc(100%/6 - 1em);
	height: calc(100vw/6 *(2/3) - 0em);
	margin: 0 0.5em 1em;

}

.demo-gallery .lightgallery li a,
.image-carousel .lightgallery li a {
  width: 100%;
  height: 100%;
  position: relative;
  float: left;
  border: 3px solid #fff;
  border-radius: 3px;
  display: block;
  overflow: hidden;
}

.demo-gallery .lightgallery li a img,
.image-carousel .lightgallery li a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-transition: -webkit-transform 0.15s ease 0s;
  -moz-transition: -moz-transform 0.15s ease 0s;
  -o-transition: -o-transform 0.15s ease 0s;
  transition: transform 0.15s ease 0s;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}

.demo-gallery .lightgallery li a:hover img {
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
  transform: scale3d(1.1, 1.1, 1.1);
}

.demo-gallery .lightgallery li a:hover .demo-gallery-poster img {
  opacity: 1;
}

.demo-gallery .lightgallery li a .demo-gallery-poster {
  background-color: rgba(0, 0, 0, 0.1);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition: background-color 0.15s ease 0s;
  -o-transition: background-color 0.15s ease 0s;
  transition: background-color 0.15s ease 0s;
}

.demo-gallery .lightgallery li a .demo-gallery-poster img {
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
  opacity: 0;
  position: absolute;
  top: 50%;
  -webkit-transition: opacity 0.3s ease 0s;
  -o-transition: opacity 0.3s ease 0s;
  transition: opacity 0.3s ease 0s;
}

.demo-gallery .lightgallery li a:hover .demo-gallery-poster {
  background-color: rgba(0, 0, 0, 0.5);
}

.demo-gallery .justified-gallery > a > img {
  -webkit-transition: -webkit-transform 0.15s ease 0s;
  -moz-transition: -moz-transform 0.15s ease 0s;
  -o-transition: -o-transform 0.15s ease 0s;
  transition: transform 0.15s ease 0s;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  height: 100%;
  width: 100%;
}

.demo-gallery .justified-gallery a:hover img {
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
  transform: scale3d(1.1, 1.1, 1.1);
}

.demo-gallery .justified-gallery a:hover .demo-gallery-poster img {
  opacity: 1;
}

.demo-gallery .justified-gallery a .demo-gallery-poster {
  background-color: rgba(0, 0, 0, 0.1);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition: background-color 0.15s ease 0s;
  -o-transition: background-color 0.15s ease 0s;
  transition: background-color 0.15s ease 0s;
}

.demo-gallery .justified-gallery a .demo-gallery-poster img {
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
  opacity: 0;
  position: absolute;
  top: 50%;
  -webkit-transition: opacity 0.3s ease 0s;
  -o-transition: opacity 0.3s ease 0s;
  transition: opacity 0.3s ease 0s;
}

.demo-gallery .justified-gallery a:hover .demo-gallery-poster {
  background-color: rgba(0, 0, 0, 0.5);
}

.demo-gallery .video .demo-gallery-poster img { 
  width:3em;
  height:3em;
  margin-left: -1.5em;
  margin-top: -1.5em;
  opacity: 0.8;
 
}

.demo-gallery.dark .lightgallery li a {
  border: 3px solid #04070a;
}


/*
====================================================================================================
=====================================                ===============================================
=====================================  Media Queries ===============================================
=====================================                ===============================================
====================================================================================================
*/


@media all and (min-width:702px ) and (max-width: 1025px) {

	#gallery .section-inner {
		max-width:unset;
	}

	.demo-gallery .lightgallery li {
		width:11em;
		height:11em;
	}

}

@media all and (min-width:501px ) and (max-width: 701px) {

	#gallery .section-inner {
		max-width:unset;
	}

	.grid-buttons {
		width:calc(100% - 6em);
		max-width:32em;
		height:auto;
		position:fixed;
		justify-content:center;
		margin:0 auto;
		right:0;
		left:0;
		bottom:0;
		-webkit-transform:translateY(100%);
		-ms-transform:translateY(100%);
		-moz-transform:translateY(100%);
		transform:translateY(100%);
		-webkit-transition: all 0.85s cubic-bezier(0.645, 0.045, 0.355, 1);
		-moz-transition: all 0.85s cubic-bezier(0.645, 0.045, 0.355, 1);
		-o-transition: all 0.85s cubic-bezier(0.645, 0.045, 0.355, 1);
		transition:all 0.85s cubic-bezier(0.645, 0.045, 0.355, 1);
		z-index:3;
	}

	.grid-buttons ul {
		width:100%;
		display:flex;
		margin:auto 0;
	}

	.sort {
		width:100%;
	}

	.filter {
		width:100%;
		height:auto;
		display:flex;
		flex-wrap:wrap;
		padding:1em 0.625em;
		top:0;
		border-width:2px 2px 0;
		border-radius:0 0.625em 0 0;
		border-style:solid;
		border-color:#d9d9d9;
		background-color:#f2f2f2;
		-webkit-transition: all 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
		-moz-transition: all 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
		-o-transition: all 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
		transition:all 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
	}

	.filter .row {
		width:100%;
		margin:0 auto 0.75em;
		flex-direction:row;
	}

	.filter .row label {
		width:auto;
		height:auto;
		position:relative;
		margin:0 0 0 auto;
	}

	.ball-slider {
		display:block;
	}

	.filter a:hover .caption strong, .filter .f-active .caption strong {
		color:#2196F3;
	}

	.filter a:hover .caption em, .filter .f-active .caption em {
		width:0;
	}

	/* ---------------------------Light Gallery CSS---------------------------  */
	.demo-gallery .lightgallery li {
		width:calc(33.3% - 0.5em);
		height:auto;
	}

}

@media all and (max-width: 500px) {

	.grid-buttons {
		width:calc(100% - 2em);
		height:auto;
		position:fixed;
		justify-content:center;
		margin:0 auto;
		bottom:0;
		right:0;
		left:0;
		-webkit-transform:translateY(100%);
		-ms-transform:translateY(100%);
		-moz-transform:translateY(100%);
		transform:translateY(100%);
		-webkit-transition: all 0.85s cubic-bezier(0.645, 0.045, 0.355, 1);
		-moz-transition: all 0.85s cubic-bezier(0.645, 0.045, 0.355, 1);
		-o-transition: all 0.85s cubic-bezier(0.645, 0.045, 0.355, 1);
		transition:all 0.85s cubic-bezier(0.645, 0.045, 0.355, 1);
		z-index:3;
	}

	.grid-buttons ul {
		width:100%;
		display:flex;
		margin:auto 0;
	}

	.sort {
		width:100%;
	}

	.filter {
		width:100%;
		height:auto;
		display:flex;
		flex-wrap:wrap;
		padding:1em 0.625em;
		top:0;
		border-width:2px 2px 0;
		border-radius:0 0.625em 0 0;
		border-style:solid;
		border-color:#d9d9d9;
		background-color:#f2f2f2;
		-webkit-transition: all 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
		-moz-transition: all 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
		-o-transition: all 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
		transition:all 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
	}

	.filter .row {
		width:100%;
		margin:0 auto 0.75em;
		flex-direction:row;
	}

	.filter .row label {
		width:auto;
		height:auto;
		position:relative;
		margin:0 0 0 auto;
	}

	.ball-slider {
		display:block;
	}


	.filter a:hover .caption strong, .filter .f-active .caption strong {
		color:#2196F3;
	}

	.filter a:hover .caption em, .filter .f-active .caption em {
		width:0;
	}

	/* ---------------------------Light Gallery CSS---------------------------  */
	.demo-gallery .lightgallery li {
		width: calc(50% - 0.5em);
		height:auto;
	}

}