/* Masonry Filter */
.masonry-grid {
		-webkit-transition: height .4s ease;
		transition: height .4s ease;
		margin-right: -15px;
		margin-left: -15px;
		position: relative;
}

.grid-preloader {
		display: inline-block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		text-align: center;
		font-size: 4em;
		color: #000;
		background-color: #fff;
}

.grid-preloader .preloader-icon {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translateX(-50%) translateY(-50%);
		transform: translateX(-50%) translateY(-50%);
}

.masonry-item {
		will-change: transform;
}

.masonry-item img {
		width: 100%;
		height: auto;
}

.masonry-item .progressive__img:not(.section-parallax-img) {
		position: relative;
}

.masonry-filters {
		margin-bottom: 75px;
		/* Boxed*/
		/* Outline*/
		/* Elegant*/
}

.masonry-filters ul {
		margin: 0;
}

.masonry-filters li {
		font-size: 14px;
		font-weight: 700;
		line-height: 3.5em;
		position: relative;
		cursor: pointer;
		-webkit-transition: background .5s ease;
		transition: background .5s ease;
		letter-spacing: .12em;
		/* color: $color-secondary;*/
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
}

.masonry-filters li:last-child {
		margin-right: 0;
}

.masonry-filters li span {
		position: relative;
		z-index: 2;
}

.masonry-filters .counter {
		position: absolute;
		top: -0.71429em;
		right: 0;
		z-index: 0;
		font-size: 1.14286em;
		font-weight: 700;
		color: #000;
		opacity: 0;
		visibility: hidden;
		-webkit-transition: all 0.35s cubic-bezier(0.21, 0.795, 0.42, 0.985);
		transition: all 0.35s cubic-bezier(0.21, 0.795, 0.42, 0.985);
}

.masonry-filters .active .counter {
		/* opacity: 1;*/
		/* transform: translateY(-50%);*/
}

.boxed-filters .masonry-filters {
		border: 1px solid #eceeef;
		border-radius: 3px;
}

.boxed-filters .masonry-filters li {
		padding: 0 2em;
}

.boxed-filters .masonry-filters li:hover, .boxed-filters .masonry-filters li.active {
		color: white;
		background: #f42958;
}

.outline-filters .masonry-filters {
		margin-bottom: 4.5em;
}

.outline-filters .masonry-filters li {
		font-size: 0.93333em;
		line-height: 2em;
		padding: 0.58em 20px;
		color: #bbb;
		border: 2px solid transparent;
		border-radius: 5px;
		letter-spacing: 0.1em;
}

.outline-filters .masonry-filters li:hover, .outline-filters .masonry-filters li.active {
		color: #f42958;
		border: 2px solid #f42958;
}

.elegant-filters .masonry-filters {
		margin-bottom: 0.71429em;
}

.elegant-filters .masonry-filters li {
		padding: 0 1.66667em;
}

.elegant-filters .masonry-filters li.active {
		color: #f42958;
}

.elegant-center-filters .masonry-filters {
		border: 1px solid #ddd;
}

.elegant-center-filters .masonry-filters li {
		line-height: 54px;
}

.elegant-center-filters .masonry-filters li.active {
		background: #f42958;
		color: #fff;
}

/* Portfolio */
.portfolio {
		/* .portfolio-thumbnail img { @include size(100%) }*/
}

.portfolio .masonry-item {
		opacity: 1;
		visibility: visible;
}

.portfolio .portfolio-item {
		position: relative;
		overflow: hidden;
		margin-bottom: 20px;
		-webkit-perspective: 600px;
		perspective: 600px;
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
}

.portfolio .item-details {
		-webkit-transition: all .7s ease;
		transition: all .7s ease;
		opacity: 0;
		color: #fff;
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		right: 0;
}

.portfolio h3,
.portfolio p,
.portfolio .btn {
		visibility: hidden;
		-webkit-transition: all 0.6s cubic-bezier(0.4, 0.885, 0.44, 1);
		transition: all 0.6s cubic-bezier(0.4, 0.885, 0.44, 1);
		opacity: 0;
}

.portfolio p {
		font-size: 15.4px;
		margin-bottom: 30px;
}

.portfolio .load-more {
		visibility: visible;
		opacity: 1;
}

.portfolio .portfolio-item:hover .item-details {
		opacity: 1;
}

.portfolio .portfolio-item:hover h3,
.portfolio .portfolio-item:hover p,
.portfolio .portfolio-item:hover .btn {
		visibility: visible;
		opacity: 1;
}

.portfolio-default .item-details,
.portfolio-fold .item-details,
.portfolio-no-gap .item-details, .portfolio-flat .item-details,
.portfolio-elegant .item-details, .portfolio-elegant-center .item-details,
.portfolio-classic .item-details {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		text-align: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-ms-flex-flow: column;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		flex-flow: column;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
}

/* Default
========================*/
.portfolio-default .masonry-filters {
		margin-bottom: 3.92857em;
}

.portfolio-default .masonry-filters li {
		margin-top: -1px;
		margin-bottom: -1px;
		padding: 0.85em 2.8%;
		border-radius: 4px;
		font-size: 1em;
		line-height: 2em;
		font-weight: 700;
		letter-spacing: 0.12em;
}

.portfolio-default .portfolio-item {
		margin-bottom: 30px;
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-webkit-perspective: 1200px;
		perspective: 1200px;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
}

.portfolio-default .item-details {
		width: 102%;
		height: 102%;
		top: -1%;
		left: -1%;
		padding: 0 10%;
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-webkit-perspective: 1200px;
		perspective: 1200px;
		-webkit-transition: all 0.4s cubic-bezier(0.34, 0.675, 0.45, 0.94);
		transition: all 0.4s cubic-bezier(0.34, 0.675, 0.45, 0.94);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
}

.portfolio-default .item-details:before {
		content: '';
		display: inline-block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0.85;
		background: linear-gradient(135deg, #d67723 0%, #e72d2b 100%);
}

.portfolio-default figure {
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-webkit-perspective: 1200px;
		perspective: 1200px;
		will-change: transform, filter;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-transition: all 0.4s cubic-bezier(0.12, 0.79, 0.34, 0.99);
		transition: all 0.4s cubic-bezier(0.12, 0.79, 0.34, 0.99);
}

.portfolio-default h3 {
		font-size: 1.78571em;
		line-height: 1.2em;
		margin-top: 0;
		margin-bottom: 0;
		letter-spacing: -0.03em;
		-webkit-transform: scale(0.8);
		transform: scale(0.8);
		-webkit-transition: all 0.7s cubic-bezier(0, 0.89, 0.34, 0.99);
		transition: all 0.7s cubic-bezier(0, 0.89, 0.34, 0.99);
}

.portfolio-default h3 a {
		color: #fff;
}

.portfolio-default h3 a:hover {
		color: #fff;
}

.portfolio-default .portfolio-item:hover figure {
		-webkit-transform: scale(1.15);
		transform: scale(1.15);
		-webkit-filter: blur(4px) saturate(0.7);
		filter: blur(4px) saturate(0.7);
}

.portfolio-default .portfolio-item:hover h3 {
		-webkit-transform: scale(1);
		transform: scale(1);
}

/* Fold
========================*/
.portfolio-fold .fold {
		border-color: transparent;
		border-right-color: #fff;
}

.portfolio-fold .fold, .portfolio-fold .fold:before {
		z-index: 10;
		content: '';
		-webkit-transition: all .7s ease;
		transition: all .7s ease;
		border-width: 0;
		border-style: solid;
		height: 0;
		width: 0;
		position: absolute;
		top: 0;
		right: 0;
}

.portfolio-fold .fold:before {
		left: 0;
		border-color: transparent;
		border-left-color: rgba(255, 255, 255, 0.3);
}

.portfolio-fold .item-details {
		padding: 0 5%;
		background: rgba(244, 41, 88, 0.95);
}

.portfolio-fold h3, .portfolio-fold p, .portfolio-fold .btn {
		-webkit-transform: translateY(-30px);
		transform: translateY(-30px);
}

.portfolio-fold .btn {
		padding: 5px;
}

.portfolio-fold h3 {
		font-size: 12.6px;
		font-weight: 700;
		line-height: 30px;
		margin-top: 0;
		color: #fff;
		-webkit-transition-delay: .2s;
		transition-delay: .2s;
		letter-spacing: .12em;
}

.portfolio-fold p {
		-webkit-transition-delay: .1s;
		transition-delay: .1s;
}

.portfolio-fold .portfolio-item:hover .fold {
		border-width: 0 50px 50px 0;
}

.portfolio-fold .portfolio-item:hover .fold:before {
		border-width: 50px 0 0 50px;
}

.portfolio-fold .portfolio-item:hover h3, .portfolio-fold .portfolio-item:hover p, .portfolio-fold .portfolio-item:hover .btn {
		-webkit-transform: translateY(0);
		transform: translateY(0);
}

.portfolio-fold .portfolio-item:hover p {
		opacity: .6;
}

/* No Gap
========================*/
.portfolio-no-gap .masonry-grid, .portfolio-flat .masonry-grid {
		margin-right: 0;
		margin-left: 0;
}

.portfolio-no-gap .masonry-item, .portfolio-flat .masonry-item {
		padding: 0;
}

.portfolio-no-gap .portfolio-item, .portfolio-flat .portfolio-item {
		margin-bottom: 0;
}

.portfolio-no-gap .item-details:before, .portfolio-flat .item-details:before {
		content: '';
		display: inline-block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: #f42958;
		opacity: 0.8;
}

.portfolio-no-gap h3, .portfolio-flat h3, .portfolio-no-gap h3 a, .portfolio-flat h3 a, .portfolio-no-gap .btn, .portfolio-flat .btn, .portfolio-no-gap p, .portfolio-flat p {
		color: #fff;
		-webkit-transform: translateY(-40px);
		transform: translateY(-40px);
		-webkit-transition-delay: 0s;
		transition-delay: 0s;
}

.portfolio-no-gap h3, .portfolio-flat h3 {
		margin-top: 0.6em;
		margin-bottom: 1em;
		font-size: 2em;
}

.portfolio-no-gap p, .portfolio-flat p {
		font-size: 0.93333em;
		letter-spacing: .07em;
}

.portfolio-no-gap .btn, .portfolio-flat .btn {
		font-size: 4em;
		font-weight: 100;
		line-height: 1;
		color: #fff;
}

.portfolio-no-gap h3:hover, .portfolio-flat h3:hover, .portfolio-no-gap h3 a:hover, .portfolio-flat h3 a:hover, .portfolio-no-gap .btn:hover, .portfolio-flat .btn:hover, .portfolio-no-gap .btn a:hover, .portfolio-flat .btn a:hover {
		color: #fff;
}

.portfolio-no-gap .portfolio-item:hover h3, .portfolio-flat .portfolio-item:hover h3, .portfolio-no-gap .portfolio-item:hover .btn, .portfolio-flat .portfolio-item:hover .btn, .portfolio-no-gap .portfolio-item:hover p, .portfolio-flat .portfolio-item:hover p {
		-webkit-transform: translateY(0);
		transform: translateY(0);
}

.portfolio-no-gap .portfolio-item:hover h3, .portfolio-flat .portfolio-item:hover h3 {
		-webkit-transition-delay: .1s;
		transition-delay: .1s;
}

.portfolio-no-gap .portfolio-item:hover .btn, .portfolio-flat .portfolio-item:hover .btn {
		-webkit-transition-delay: .2s;
		transition-delay: .2s;
}

/* Elegant
========================*/
.portfolio-elegant .main .item-details, .portfolio-elegant-center .main .item-details {
		width: 82%;
}

.portfolio-elegant .masonry-grid, .portfolio-elegant-center .masonry-grid {
		margin-top: 40px;
}

.portfolio-elegant .item-details, .portfolio-elegant-center .item-details {
		padding: 10%;
		-webkit-transform: translateX(50px);
		transform: translateX(50px);
		background: linear-gradient(45deg, #00b1ff 0%, #0070ff 100%);
}

.portfolio-elegant h3, .portfolio-elegant-center h3, .portfolio-elegant p, .portfolio-elegant-center p, .portfolio-elegant .btn, .portfolio-elegant-center .btn {
		color: #fff;
		-webkit-transform: translateX(40px);
		transform: translateX(40px);
}

.portfolio-elegant h3, .portfolio-elegant-center h3 {
		margin-top: 0;
		margin-bottom: 0.2em;
		font-size: 1.53333em;
		font-weight: 500;
		-webkit-transition-delay: .3s;
		transition-delay: .3s;
}

.portfolio-elegant p, .portfolio-elegant-center p {
		margin-bottom: 1.3em;
		-webkit-transition-delay: .1s;
		transition-delay: .1s;
}

.portfolio-elegant .subheading, .portfolio-elegant-center .subheading {
		margin-bottom: 1em;
		-webkit-transition-delay: .2s;
		transition-delay: .2s;
		font-size: 0.93333em;
		letter-spacing: .15em;
		color: rgba(255, 255, 255, 0.6);
}

.portfolio-elegant .btn, .portfolio-elegant-center .btn {
		font-size: 20px;
		line-height: 50px;
		display: inline-block;
		padding: 0;
		opacity: .6;
		color: rgba(255, 255, 255, 0.6);
		border-color: rgba(255, 255, 255, 0.6);
		border-radius: 50em;
		height: 50px;
		width: 50px;
}

.portfolio-elegant .btn span, .portfolio-elegant-center .btn span {
		padding: 0;
}

.portfolio-elegant .btn:last-child, .portfolio-elegant-center .btn:last-child {
		-webkit-transition-delay: 0.08s;
		transition-delay: 0.08s;
}

.portfolio-elegant .btn:hover, .portfolio-elegant-center .btn:hover, .portfolio-elegant .btn:focus, .portfolio-elegant-center .btn:focus {
		color: white;
		border-color: white;
		background: none;
		-webkit-box-shadow: none;
		box-shadow: none;
}

.portfolio-elegant .portfolio-item:hover .item-details, .portfolio-elegant-center .portfolio-item:hover .item-details {
		-webkit-transform: translateX(0);
		transform: translateX(0);
}

.portfolio-elegant .portfolio-item:hover .item-details h3, .portfolio-elegant-center .portfolio-item:hover .item-details h3, .portfolio-elegant .portfolio-item:hover .item-details .subheading, .portfolio-elegant-center .portfolio-item:hover .item-details .subheading, .portfolio-elegant .portfolio-item:hover .item-details p, .portfolio-elegant-center .portfolio-item:hover .item-details p, .portfolio-elegant .portfolio-item:hover .item-details .btn, .portfolio-elegant-center .portfolio-item:hover .item-details .btn {
		-webkit-transform: translateX(0);
		transform: translateX(0);
}

.portfolio-elegant.style2 h3, .style2.portfolio-elegant-center h3 {
		font-size: 1.5em;
		font-weight: 700;
		letter-spacing: 0;
}

.portfolio-elegant.style2 p, .style2.portfolio-elegant-center p {
		font-size: 1em;
}

.portfolio-elegant.style2 .item-details, .style2.portfolio-elegant-center .item-details {
		background: rgba(244, 41, 88, 0.8);
}

.portfolio-elegant.style2 .main .item-details, .style2.portfolio-elegant-center .main .item-details {
		padding-right: 6em;
		padding-left: 6em;
}

/* Classic
========================*/
.portfolio-classic {
		margin-bottom: 60px;
}

.portfolio-classic .portfolio-item {
		margin-bottom: 1.875em;
}

.portfolio-classic .item-details:before {
		content: '';
		display: inline-block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: #f42958;
		opacity: 0.8;
}

.portfolio-classic .item-details .btn {
		font-size: 1.5em;
		line-height: 1em;
		width: 150px;
		color: #fff;
}

.portfolio-classic p {
		font-size: 0.75em;
		margin-bottom: 0;
		letter-spacing: .2em;
}

.portfolio-classic h3 {
		font-size: 1.25em;
		line-height: 1em;
		margin: 0.7em 0;
}

.portfolio-classic h3, .portfolio-classic p, .portfolio-classic .item-details .btn {
		color: #fff;
		-webkit-transform: translateX(-50px);
		transform: translateX(-50px);
		-webkit-transition-delay: 0;
		transition-delay: 0;
}

.portfolio-classic .load-more {
		margin-top: 32px;
}

.portfolio-classic .portfolio-item:hover h3, .portfolio-classic .portfolio-item:hover p, .portfolio-classic .portfolio-item:hover .item-details .btn {
		-webkit-transform: translateY(0);
		transform: translateY(0);
}

.portfolio-classic .portfolio-item:hover h3 {
		-webkit-transition-delay: 0.2s;
		transition-delay: 0.2s;
}

.portfolio-classic .portfolio-item:hover .item-details .btn {
		-webkit-transition-delay: 0.4s;
		transition-delay: 0.4s;
}

/* Flat
========================*/
.portfolio-flat .item-details {
		display: block;
		background: #f42958;
}

.portfolio-flat h3 {
		font-size: 15px;
		margin: 10px;
}

.portfolio-flat p {
		margin-bottom: 0;
		font-size: 13px;
}

.portfolio-flat .item-details .btn {
		border-color: #fff;
		border-width: 3px;
		border-radius: 100px;
		width: 30px;
		line-height: 25px;
		padding: 0;
		font-size: 15px;
		margin-top: 58px;
		margin-bottom: 30px;
}

.portfolio-flat .item-details .btn:before, .portfolio-flat .item-details .btn:after {
		position: absolute;
		top: 0;
		left: 50%;
		content: '';
}

.portfolio-flat .item-details .btn:before {
		-webkit-transform: translate(-50%, -100%);
		transform: translate(-50%, -100%);
		background: #fff;
		width: 3px;
		height: 60px;
}

.portfolio-flat .item-details .btn:after {
		-webkit-transform: translate(-50%, calc(-100% - 57px));
		transform: translate(-50%, calc(-100% - 57px));
		border-style: solid;
		height: 0;
		width: 0;
		border-color: #fff transparent transparent;
		border-width: 5px 10px 0;
}

/* Elegant Center
========================*/
.portfolio-elegant-center .item-details {
		-webkit-transform: translateY(0) scale(0.8);
		transform: translateY(0) scale(0.8);
		background: rgba(244, 41, 88, 0.9);
}

.portfolio-elegant-center h3, .portfolio-elegant-center p, .portfolio-elegant-center .item-details .btn {
		-webkit-transform: none;
		transform: none;
}

.portfolio-elegant-center .main .item-details {
		width: 80%;
		height: 80%;
		top: 10%;
		right: 10%;
}

/* Masonry
========================*/
.portfolio-masonry .portfolio-item:before, .portfolio-masonry .portfolio-item:after {
		content: "";
		display: table;
}

.portfolio-masonry .portfolio-item:after {
		clear: both;
}

.portfolio-masonry .item-details, .portfolio-masonry .portfolio-item {
		overflow: visible;
		opacity: 1;
}

.portfolio-masonry h3, .portfolio-masonry .btn {
		visibility: visible;
}

.portfolio-masonry h3 {
		display: inline-block;
		opacity: 1;
		margin: 0;
		padding: 0;
		color: #111;
		font-size: 14px;
		line-height: 30px;
}

.portfolio-masonry .caption-top-left h3 {
		-webkit-transform: translateX(calc(-100% - 30px)) rotateZ(-90deg);
		transform: translateX(calc(-100% - 30px)) rotateZ(-90deg);
		-webkit-transform-origin: center right;
		transform-origin: center right;
		position: absolute;
		top: 0;
		left: 0;
}

.portfolio-masonry .caption-top-right h3 {
		-webkit-transform: translateX(calc(100% + 30px)) rotateZ(90deg);
		transform: translateX(calc(100% + 30px)) rotateZ(90deg);
		-webkit-transform-origin: center left;
		transform-origin: center left;
		position: absolute;
		top: 0;
		right: 0;
}

.portfolio-masonry .caption-bottom-left h3 {
		-webkit-transform: translateX(-30px) rotateZ(-90deg);
		transform: translateX(-30px) rotateZ(-90deg);
		-webkit-transform-origin: center left;
		transform-origin: center left;
		position: absolute;
		bottom: 0;
		left: 0;
}

.portfolio-masonry .caption-bottom-right h3 {
		-webkit-transform: translateX(30px) rotateZ(90deg);
		transform: translateX(30px) rotateZ(90deg);
		-webkit-transform-origin: center right;
		transform-origin: center right;
		position: absolute;
		right: 0;
		bottom: 0;
}

.portfolio-masonry .btn {
		width: calc(100% - 40px);
		height: calc(100% - 40px);
		margin-top: 20px;
		position: relative;
		border: none;
		color: white;
}

.portfolio-masonry .btn i {
		vertical-align: middle;
		-webkit-transform: none;
		transform: none;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
}

.portfolio-masonry .btn:hover, .portfolio-masonry .btn:focus {
		background: rgba(17, 17, 17, 0.9);
		-webkit-box-shadow: none;
		box-shadow: none;
		color: #fff;
}

/* Masonry
========================*/
.portfolio-simple .portfolio-item:before, .portfolio-simple .portfolio-item:after {
		content: "";
		display: table;
}

.portfolio-simple .portfolio-item:after {
		clear: both;
}

.portfolio-simple .item-details,
.portfolio-simple .portfolio-item {
		overflow: visible;
		opacity: 1;
}

.portfolio-simple .portfolio-item:hover .btn:before {
		opacity: 0.8;
}

.portfolio-simple .btn {
		width: 100%;
		height: 100%;
		position: relative;
		border: none;
		background-color: transparent;
		color: white;
		font-size: 3em;
		color: #fff;
}

.portfolio-simple .btn:before {
		content: '';
		display: inline-block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		background-color: #f42958;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
}

.portfolio-simple .btn span {
		vertical-align: middle;
		-webkit-transform: none;
		transform: none;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
}

.portfolio-simple .btn:hover, .portfolio-simple .btn:focus {
		background-color: transparent !important;
		-webkit-box-shadow: none;
		box-shadow: none;
		color: #fff;
}
