/*!
Theme Name: Pine
Theme URI: https://preview.treethemes.com/pine/
Author: Treethemes
Author URI: https://treethemes.com/
Description: Pine is a WordPress theme bundled with premium plugins to build a modern and functional website.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: pine
Text Domain: pine-child
Tested up to: 6.7
Requires PHP: 7.0
*/

/* Utilities */
.kdc-row-no-padding .wpb_column .vc_column-inner {
	padding: 0 !important;
}

/* "KDC Portfolio" element */
.kdc-portfolio {
	
}

/* - Filters */
.kdc-portfolio .kdc--filters {
	display: flex;
	gap: 12px;
	justify-content: center;
	padding: 0 15px;
}

.kdc-portfolio .kdc--filters .kdc--button {
	background-color: white;
	border: 1px solid #ececec;
	color: #888888;
	font-size: 12px;
	letter-spacing: 1px;
	padding: 7px 17px 5px;
	position: relative;
	text-transform: uppercase;
	transition: all 250ms ease;
}
.kdc-portfolio .kdc--filters .kdc--button:hover {
	border-color: #dadada;
	color: #545454;
}
.kdc-portfolio .kdc--filters .kdc--button.kdc--active {
	background-color: #545454;
	border-color: #5d5d5d;
	color: white;
}

.kdc-portfolio .kdc--filters .kdc--button::after {
	background-color: #010101;
	bottom: -4px;
	content: "";
	display: block;
	height: 2px;
	left: 0;
	position: absolute;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 250ms ease;
	width: 100%;
}
.kdc-portfolio .kdc--filters .kdc--button:hover::after,
.kdc-portfolio .kdc--filters .kdc--button.kdc--active::after {
	transform: scaleX(1);
	transform-origin: left center;
}

/* - Posts */
.kdc-portfolio .kdc--posts {
	--kdc-gap: 0px;
	display: none;
	flex-wrap: wrap;
	gap: var(--kdc-gap);
	justify-content: center;
	margin-top: 30px;
}
.kdc-portfolio.kdc--gap .kdc--posts {
	--kdc-gap: 30px;
}
.kdc-portfolio.kdc--state--default .kdc--posts,
.kdc-portfolio.kdc--state--default-plus .kdc--posts,
.kdc-portfolio.kdc--state--full .kdc--posts,
.kdc-portfolio.kdc--state--loading .kdc--posts {
	display: flex;
}

.kdc-portfolio .kdc--post {
	background-color: #e0e0e0;
	overflow: hidden;
	position: relative;
}
.kdc-portfolio.kdc--aspect-ratio--4-3 .kdc--post {
	aspect-ratio: 4 / 3;
}
.kdc-portfolio.kdc--aspect-ratio--16-9 .kdc--post {
	aspect-ratio: 16 / 9;
}
.kdc-portfolio.kdc--rounded-corners .kdc--post {
	border-radius: 5px;
}
.kdc-portfolio.kdc--columns--2 .kdc--post {
	width: calc((100% - var(--kdc-gap)) / 2);
}
.kdc-portfolio.kdc--columns--3 .kdc--post {
	width: calc((100% - 2 * var(--kdc-gap)) / 3);
}

.kdc-portfolio .kdc--post .kdc--image {
	height: 100%;
	width: 100%;
}
.kdc-portfolio .kdc--post .kdc--image img {
	display: block;
	height: 100%;
	object-fit: cover;
	transform-origin: center;
	transition: transform 250ms ease;
	width: 100%;
}
.kdc-portfolio .kdc--post:hover .kdc--image img {
	filter: blur(3px);
	transform: scale(1.05);
}

.kdc-portfolio .kdc--post .kdc--overlay {
	align-items: center;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	height: 100%;
	justify-content: center;
	left: 0;
	opacity: 0;
	padding: 15px;
	position: absolute;
	top: 0;
	transition: opacity 250ms ease;
	width: 100%;
}
.kdc-portfolio .kdc--post:hover .kdc--overlay {
	opacity: 1;
}

.kdc-portfolio .kdc--post .kdc--title {
	color: white;
	font-size: 30px;
	font-weight: 500;
	margin: 0;
	position: relative;
	text-align: center;
}

/* - Footer */
.kdc-portfolio .kdc--footer {
	display: flex;
	gap: 20px;
	justify-content: center;
	margin-top: 50px;
}
.kdc-portfolio.kdc--state--full-loading .kdc--footer {
	margin: 150px 0;
}

/* -- Button */
.kdc-portfolio .kdc--footer .kdc--button {
	background-color: white;
	border: 1px solid #111111;
	color: #111111;
	font-size: 12px;
	padding: 8px 30px 6px;
	text-transform: uppercase;
	transition: all 250ms ease;
}
.kdc-portfolio .kdc--footer .kdc--button:hover {
	border-color: #dedede;
	color: #b0b0b0;
}

/* --- "Load more" button */
.kdc-portfolio .kdc--load-more {
	display: none;
}
.kdc-portfolio.kdc--state--default .kdc--load-more,
.kdc-portfolio.kdc--state--default-plus .kdc--load-more {
	display: block;
}

/* --- "Show less" button */
.kdc-portfolio .kdc--show-less {
	display: none;
}
.kdc-portfolio.kdc--state--default-plus .kdc--show-less,
.kdc-portfolio.kdc--state--full .kdc--show-less {
	display: block;
}

/* -- Loader */
.kdc-portfolio .kdc--loader {
	display: none;
}
.kdc-portfolio.kdc--state--loading .kdc--loader,
.kdc-portfolio.kdc--state--full-loading .kdc--loader {
	display: block;
}

/* - Responsive */
@media (max-width: 1024px) {
	.kdc-portfolio.kdc--columns--3 .kdc--post {
		width: calc((100% - var(--kdc-gap)) / 2);
	}
}

@media (max-width: 680px) {
	.kdc-portfolio.kdc--columns--2 .kdc--post {
		width: 100%;
	}

	.kdc-portfolio.kdc--columns--3 .kdc--post {
		width: 100%;
	}
}

/* Loader */
.kdc-loader {
	animation: kdc-rotate 1s linear infinite;
	border-radius: 50%;
	height: 40px;
	position: relative;
	width: 40px;
}
.kdc-loader::before {
	animation: kdc-prix-clip-fix 2s linear infinite;
	border: 4px solid black;
	border-radius: 50%;
	box-sizing: border-box;
	content: "";
	inset: 0px;
	position: absolute;
}
.kdc-loader.kdc--light::before {
	border-color: white;
}

@keyframes kdc-rotate {
	100% { transform: rotate(360deg); }
}

@keyframes kdc-prix-clip-fix {
	0%   { clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0); }
	25%  { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0); }
	50%  { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%); }
	75%  { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%); }
	100% { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0); }
}






/**/

/* Cube Portfolio element */
#cbpw-wrap197 .cbp-l-loadMore-button {
	display: flex;
	gap: 15px;
	justify-content: center;
}

#cbpw-wrap197 .kdc--show-less {
	color: #111111;
	background-color: transparent;
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #111111;
	font-size: 12px;
	font-family: Open Sans, sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: 34px;
	text-align: center;
	padding: 0px 30px 0px 30px;
	margin: 40px 0px 0px 0px;
	display: inline-block;
	text-transform: uppercase;
	cursor: pointer;
}
#cbpw-wrap197 .kdc--show-less:hover {
	color: #B0B0B0;
	background-color: transparent;
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #DEDEDE;
	font-size: 12px;
	font-family: Open Sans, sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: 34px;
	text-align: center;
	padding: 0px 30px 0px 30px;
	margin: 40px 0px 0px 0px;
}