@import './filter-style-button';

.portfolio-entries {
	margin: 0 -10px;

	.portfolio-filters {
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	    -webkit-justify-content: center;
    	justify-content: center;
		list-style: none;
	    padding: 0;
	    margin: 0 0 24px;

	    &.filter-pos-left {
		    -webkit-justify-content: flex-start;
	    	justify-content: flex-start;
	    }

	    &.filter-pos-right {
		    -webkit-justify-content: flex-end;
	    	justify-content: flex-end;
	    }

	    &.filter-pos-full li {
	    	-webkit-flex-grow: 1;
		    flex-grow: 1;
	    }

	    li {
		    margin: 0 3px;
		    text-align: center;

	    	&:first-child {
	    		margin-left: 0 !important;
	    	}

	    	&:last-child {
	    		margin-right: 0 !important;
	    	}

	    	a {
			    display: inline-block;
			    width: 100%;
			    padding: 3px 10px;
			    background-color: #f6f6f6;
			    color: #444444;
			    font-size: 13px;
			    line-height: 1.5;
			    letter-spacing: 0.3px;
			    text-transform: uppercase;
	    	}

		    &.active a,
		    a:hover {
			    background-color: #13aff0;
		    	color: #fff;
		    }
	    }
	}

	.column-1 {
		width: 100%;
	}

	.column-2 {
		width: 50%;
	}

	.column-3 {
		width: 33.33%;
	}

	.column-4 {
		width: 25%;
	}

	.column-5 {
		width: 20%;
	}

	.column-6 {
		width: 16.66666667%;
	}

	.column-7 {
		width: 14.28%;
	}

	.column-8 {
		width: 12.5%;
	}

	.column-9 {
		width: 11.11%;
	}

	.column-10 {
		width: 10%;
	}

	.portfolio-wrap {
		display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	}

    .portfolio-entry {
		display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
		flex-direction: row;
		float: none;
		padding: 10px;
		margin: 0;
    }

    .portfolio-entry-inner {
    	width: 100%;
    }

	.portfolio-entry-thumbnail {
		position: relative;

		img {
			width: 100%;
		}

		.overlay {
			position: absolute;
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 100%;
		    background-color: rgba(0,0,0,0.4);
		    opacity: 0;
		    text-align: center;
		    z-index: 1;
		    -webkit-transition: opacity .3s ease-in-out;
		    -moz-transition: opacity .3s ease-in-out;
		    -o-transition: opacity .3s ease-in-out;
		    -ms-transition: opacity .3s ease-in-out;
		    transition: opacity .3s ease-in-out;
		}

		&:hover .overlay {
		    opacity: 1;
		}

		.portfolio-overlay-content,
		.portfolio-overlay-icons li a {
		    display: -webkit-box;
		    display: -ms-flexbox;
		    display: flex;
		    -webkit-box-orient: vertical;
		    -webkit-box-direction: normal;
		    -ms-flex-direction: column;
		    flex-direction: column;
		    -webkit-box-pack: center;
		    -ms-flex-pack: center;
		    justify-content: center;
		    text-align: center;
		}

		.portfolio-overlay-content {
			position: absolute;
		    top: 0;
		    left: 0;
		    right: 0;
		    bottom: 0;
		}

	    .portfolio-overlay-icons {
		    list-style: none;
		    padding: 0;
		    margin: 0;

		    li {
		    	display: inline-block;
		    	padding: 0 4px;

		    	a {
				    position: relative;
				    width: 45px;
				    height: 45px;
				    line-height: 1;
				    font-size: 16px;
				    background-color: rgba(255, 255, 255, 0.2);
				    color: #fff;
				    border: 1px solid rgba(255,255,255,0.4);
				    border-radius: 50%;
				    z-index: 99;

				    &:hover {
				    	background-color: rgba(255, 255, 255, 0.4);
				    }
		    	}

				.owp-icon {
					margin: 0 auto;

					use {
						stroke: #fff;
					}
				}
		    }
	    }

		.portfolio-inside-content,
		.portfolio-overlay-icons li a {
		    opacity: 0;
		    -webkit-transform: scale(0);
		    -moz-transform: scale(0);
		    -ms-transform: scale(0);
		    -o-transform: scale(0);
		    transform: scale(0);
		}

		&:hover .portfolio-inside-content,
		&:hover .portfolio-overlay-icons li a {
		    opacity: 1;
		    -webkit-transform: scale(1);
		    -moz-transform: scale(1);
		    -ms-transform: scale(1);
		    -o-transform: scale(1);
		    transform: scale(1);
		}

		.portfolio-inside-content {
			position: relative;
		    z-index: 99;
		    transition: all .3s ease;
		    -webkit-transition: all .3s ease;
		    -moz-transition: all .3s ease;
		    -o-transition: all .3s ease;
		    -ms-transition: all .3s ease;
		    
			&.has-icons {
				margin-top: 15px;
			}

			.portfolio-entry-title a {
				color: #fff;

				&:hover {
					color: #ddd;
				}
			}

			.categories,
			.categories a {
				color: #ddd;

				&:hover {
					color: #fff;
				}
			}
		}

		.triangle-wrap {
			position: absolute;
			bottom: 0;
			left: 15%;
		    width: 0;
		    height: 0;
		    border-style: solid;
		    border-color: transparent;
		    border-bottom-width: 6px;
		    border-bottom-color: #f9f9f9;
		    border-right-width: 6px;
		    border-left-width: 6px;
		    z-index: 100;
		}

		&.has-placeholder {
			background-color: #f3f3f3;
			color: #cccccc;
			text-align: center;
			padding: 20px;
		}
	}

	.portfolio-content {
		display: block;
    	background-color: #f9f9f9;
	    padding: 25px;
	}

	.portfolio-entry-title {
		color: #fff;
		font-size: 16px;
	    margin: 0;
	    cursor: pointer;
	}

	.categories {
		font-size: 13px;
    	line-height: 1.3;
    	color: #a7a7a7;

    	a {
    		color: #a7a7a7;

    		&:hover {
    			color: #333;
    		}
    	}
	}

	.has-title .categories {
		margin-top: 5px;
	}

	.oceanwp-pagination {
		display: inline-block;
	    width: 100%;
	    margin-top: 20px;

	    ul.page-numbers {
	    	padding: 0;
	    }

		&.oceanwp-center {
			ul.page-numbers,
			.page-links {
				text-align: center;
			}
		}

		&.oceanwp-left {
			ul.page-numbers,
			.page-links {
				text-align: left;
			}
		}
	}
}

.ocean_portfolio {
	.related-portfolio-title {
		margin: 12px 0 0;
	}
}

ul.opms-default {
	li {
		&::after {
			content: '-';
		}
	}
}

ul.opms-modern {
	li {
		&::after {
			content: '|';
		}
	}
}

ul.opms-classic {
	li {
		&::after {
			content: '/';
		}
	}
}

ul.opms-stylish {
	li {
		&::after {
			content: '//';
		}
	}
}

ul.opms-none {
	li {
		&::after {
			content: '';
			margin: 0 5px;
		}
	}
}

body .pswp {
    z-index: 999999;
}

/* CSS for the customizer preview if is a custom column */
.portfolio-entries {
	&.custom-col .col.first {
		clear: none;
	}

	&.archives-col-1 .portfolio-entry,
	&.archives-col-2 .portfolio-entry:nth-child(2n+1),
	&.archives-col-3 .portfolio-entry:nth-child(3n+1),
	&.archives-col-4 .portfolio-entry:nth-child(4n+1),
	&.archives-col-5 .portfolio-entry:nth-child(5n+1),
	&.archives-col-6 .portfolio-entry:nth-child(6n+1),
	&.archives-col-7 .portfolio-entry:nth-child(7n+1),
	&.archives-col-8 .portfolio-entry:nth-child(8n+1),
	&.archives-col-9 .portfolio-entry:nth-child(9n+1),
	&.archives-col-10 .portfolio-entry:nth-child(10n+1) {
		clear: both;
	}
}

/* Responsive columns */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.portfolio-entries {
		&.tablet-col .col.first,
		&.tablet-col .col {
			clear: none;
		}

		&.tablet-1-col .portfolio-entry,
		&.tablet-2-col .portfolio-entry:nth-child(2n+1),
		&.tablet-3-col .portfolio-entry:nth-child(3n+1),
		&.tablet-4-col .portfolio-entry:nth-child(4n+1),
		&.tablet-5-col .portfolio-entry:nth-child(5n+1),
		&.tablet-6-col .portfolio-entry:nth-child(6n+1),
		&.tablet-7-col .portfolio-entry:nth-child(7n+1),
		&.tablet-8-col .portfolio-entry:nth-child(8n+1),
		&.tablet-9-col .portfolio-entry:nth-child(9n+1),
		&.tablet-10-col .portfolio-entry:nth-child(10n+1) {
			clear: both;
		}

		&.tablet-1-col .portfolio-entry {
			width: calc( 100% / 1 ) !important;
		}

		&.tablet-2-col .portfolio-entry {
			width: calc( 100% / 2 ) !important;
		}

		&.tablet-3-col .portfolio-entry {
			width: calc( 100% / 3 ) !important;
		}

		&.tablet-4-col .portfolio-entry {
			width: calc( 100% / 4 ) !important;
		}

		&.tablet-5-col .portfolio-entry {
			width: calc( 100% / 5 ) !important;
		}

		&.tablet-6-col .portfolio-entry {
			width: calc( 100% / 6 ) !important;
		}

		&.tablet-7-col .portfolio-entry {
			width: 14.28% !important;
			width: calc( 100% / 7 ) !important;
		}

		&.tablet-8-col .portfolio-entry {
			width: calc( 100% / 8 ) !important;
		}

		&.tablet-9-col .portfolio-entry {
			width: 14.28% !important;
			width: calc( 100% / 9 ) !important;
		}

		&.tablet-10-col .portfolio-entry {
			width: calc( 100% / 10 ) !important;
		}
	}
}

@media only screen and (max-width: 767px) {
	.portfolio-entries {
		&.mobile-col .col.first,
		&.mobile-col .col {
			clear: none;
		}

		&.mobile-1-col .portfolio-entry,
		&.mobile-2-col .portfolio-entry:nth-child(2n+1),
		&.mobile-3-col .portfolio-entry:nth-child(3n+1),
		&.mobile-4-col .portfolio-entry:nth-child(4n+1),
		&.mobile-5-col .portfolio-entry:nth-child(5n+1),
		&.mobile-6-col .portfolio-entry:nth-child(6n+1),
		&.mobile-7-col .portfolio-entry:nth-child(7n+1),
		&.mobile-8-col .portfolio-entry:nth-child(8n+1),
		&.mobile-9-col .portfolio-entry:nth-child(9n+1),
		&.mobile-10-col .portfolio-entry:nth-child(10n+1) {
			clear: both;
		}

		&.mobile-1-col .portfolio-entry {
			width: calc( 100% / 1 ) !important;
		}

		&.mobile-2-col .portfolio-entry {
			width: calc( 100% / 2 ) !important;
		}

		&.mobile-3-col .portfolio-entry {
			width: calc( 100% / 3 ) !important;
		}

		&.mobile-4-col .portfolio-entry {
			width: calc( 100% / 4 ) !important;
		}

		&.mobile-5-col .portfolio-entry {
			width: calc( 100% / 5 ) !important;
		}

		&.mobile-6-col .portfolio-entry {
			width: calc( 100% / 6 ) !important;
		}

		&.mobile-7-col .portfolio-entry {
			width: 14.28% !important;
			width: calc( 100% / 7 ) !important;
		}

		&.mobile-8-col .portfolio-entry {
			width: calc( 100% / 8 ) !important;
		}

		&.mobile-9-col .portfolio-entry {
			width: 14.28% !important;
			width: calc( 100% / 9 ) !important;
		}

		&.mobile-10-col .portfolio-entry {
			width: calc( 100% / 10 ) !important;
		}
	}
}

/* RTL */
body.rtl .portfolio-entries {
	.portfolio-filters {

	    &.filter-pos-left {
		    -webkit-justify-content: flex-end;
	    	justify-content: flex-end;
	    }

	    &.filter-pos-right {
		    -webkit-justify-content: flex-start;
	    	justify-content: flex-start;
	    }
	}

	.portfolio-entry-thumbnail {

		.overlay {
		    right: 0;
		    left: auto;
		}

		.triangle-wrap {
			right: 15%;
			left: auto;
		}
	}

}

.op-has-animation {

	.portfolio-entry-thumbnail {
		overflow: hidden;

		&:hover {
			img {
				animation: move 10s ease;
			}
		}
	}
}

@keyframes move {
	0% {
		transform-origin: bottom left;
		transform: scale(1.0);
	}
	100% {
		transform: scale(1.3);
	}
}