/* ============================================================ FOOTER ====== */

.site-item .site-body .site-footer {
	display: none !important
}

/* ============================================================ FOOTER ====== */

#portfolio .panel.hero {
	min-height: 100vh
}

/* ============================================================ RESET ====== */
#portfolio figure {
	margin: 0;
	padding: 0;
}

/* ============================================================ SITE ITEM ====== */

.site-item {
	width: 100%;
	position: relative;
	background-color: var(--dark-color)
}

.site-item.active {
	background-color: transparent;
}

/* ============================================================ SITE TITLE ====== */

.site-item .site-body .site-title {
	position: relative;
	flex-shrink: 0;

	justify-content: flex-start;
	padding: 0 3rem 0 0;
	min-height: 3rem;

	background:
		radial-gradient(circle at 20% 20%, var(--dark-color), transparent 60%),
		radial-gradient(circle at 80% 30%, var(--main-color), transparent 60%),
		radial-gradient(circle at 50% 80%, var(--dark-color), transparent 60%),
		var(--dark-color);
}

.site-item .site-body .site-title:before {
	content: '';
	display: block;

	position: absolute;
	left: 0;
	top: 0;

	width: 100%;
	height: 1px;

	background: linear-gradient(to right,
			var(--main-color) 0%,
			rgba(255, 255, 255, .5) 100%);
}

/* title text */

.site-item .site-body .site-title h3 {
	color: var(--main-color);
	font-size: 1.1rem;
	font-weight: 300;
	line-height: 1.2;
	margin: 0;
	padding: 0;
}

.site-item .site-body .site-title a {
	margin-left: auto;
	background: transparent;
	width: 40px;
	height: 40px;
	color: #fff;
}

/* ============================================================ ALL PORTFOLIO ====== */

.all-portfolio,
.all-portfolio a {
	font-size: .85rem;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.all-portfolio li,
.all-portfolio li a {
	color: var(--main-color);
}

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

.all-portfolio ul li,
.all-portfolio ul li a {
	line-height: 1;
}

/* ============================================================ SITE ALIGN ====== */

@media (min-width: 1024px) {
	html body.body-portfolio #smooth-wrapper {
		background: none !important;
	}

	.site-item {
		min-height: calc(100vh - var(--header-height));
		margin-bottom: 57vh;
		transform-origin: center 160px;
		transition: filter 0.4s ease;
	}

	.site-item .site-body .site-title {
		padding-left: 4rem
	}

	/* ============================================================ SITE BODY ====== */

	.site-item .site-body {
		background: transparent;
		width: 100%;
		display: flex;
		flex-direction: column;
		min-height: 100%;
	}

	/* ============================================================ CAROUSEL WRAPPER ====== */

	.site-item .carousel-wrapper {
		position: relative;
		width: 100%;
		min-height: calc(100vh - var(--header-height) - 3rem);

		flex: 1 1 auto;
		overflow: hidden
	}

	/* ============================================================ IMAGES ====== */

	.site-item .carousel-wrapper img.inner-slide {
		position: absolute;
		top: 0;
		left: 0;

		width: 100%;
		height: 100%;
		max-width: calc(100% - 4rem);

		object-fit: contain;

		opacity: 0;
		z-index: 1;
		transition: opacity 0.4s ease;
	}

	.site-item .carousel-wrapper img.inner-slide.cover {
		object-fit: cover
	}

	.site-item .carousel-wrapper img.inner-slide.active-slide {
		opacity: 1;
		z-index: 2;
	}

	/* ============================================================ CAROUSEL NAV ====== */

	.site-item .carousel-wrapper .carousel-nav {
		position: absolute;
		top: 50%;
		left: 0;

		width: 100%;
		display: flex;
		justify-content: space-between;

		z-index: 10;
		pointer-events: none;
	}

	.site-item .carousel-wrapper .carousel-nav button {
		pointer-events: all;
		background: rgba(0, 0, 0, 0.5);
		color: #fff;
		border: none;
		padding: 10px;
		cursor: pointer;
	}



}

@media (max-width: 1024px) {
	/*#portfolio{
		max-width:100vw;
		overflow:hidden
	}*/
	
	#portfolio .panel.hero {
		min-height: calc(100vh - var(--header-height))
	}
	
	.site-item .site-body .site-title {
		padding:4rem 1rem;
		min-height:50vh
	}
	
	.site-item .site-body .site-title h3{
		font-size:1.5rem !important;
		line-height: 1.5 !important;
	}
 
	#portfolio .carousel-wrapper .carousel-nav {
		display: none !important
	}
}