/* Carousel */
#hero-carousel-container {
	position: relative;
	height: 100svh;
	min-height: 30rem;
	margin-top: -105px;
	width: 100%;
}

#hero-carousel-container div {
	height: 100%;
}

@media screen and (max-width: 767px) {

	#inner-container,
	#inner-container>.col,
	#inner-container>.col .wpb_column {
		height: 100% !important;
	}
}

#inner-container>.col>.wpb_column>.wpb_wrapper {
	/* --translateX: '-25%'; */
	position: relative;
	height: 100%;
	display: flex;
	flex-wrap: nowrap;
	/* transform: translateX(var(--translateX)); */
	width: 100%;
}

#inner-container>.col>.wpb_column>.wpb_wrapper.animate {
	transition: transform 0.4s linear;
	opacity: 1 !important;
}

#hero-carousel-container .carousel-item {
	width: 100%;
	/* position: relative; */
	position: absolute;
	margin-bottom: 0;
}

.carousel-item .col,
.carousel-item .wpb_wrapper,
.carousel-item .wpb_content_element {
	height: 100%;
	margin-bottom: 0;
}

@keyframes reveal {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.carousel-item:first-child {
	z-index: 100;
}

.carousel-item.active {
	opacity: 0;
	animation: reveal 500ms ease-in-out;
	animation-fill-mode: forwards;
}

#hero-carousel-container video,
#hero-carousel-container img {
	width: 100%;
	object-fit: cover;
	height: 100%;
	min-height: 100%;
	object-position: 50% 50%;
}

.carousel-item .gradient {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	background: linear-gradient(45deg, rgba(0, 0, 0, 0.35), transparent 70%);
}

.carousel-item .vc_figure,
.carousel-item .vc_single_image-wrapper,
.carousel-item img {
	width: 100%;
}

.carousel-item img {
	object-fit: cover;
}

.carousel-item .text-container {
	position: absolute;
	bottom: 20%;
	left: 10%;
	overflow: visible;
	height: auto !important;
	max-width: 60ch;
	z-index: 10;
	width: 80%;
}

.carousel-item .text-container br {
	display: none;
}

.carousel-item .text-container .desktop_br br {
	display: block !important;
}

@media screen and (max-width: 767px) {
	.carousel-item .text-container .desktop_br br {
		display: none
	}

	.carousel-item .text-container .mobile_br br {
		display: block !important;
	}
}

.carousel-item .text-container h1,
.carousel-item .text-container h2 {
	font-family: 'Karbon', sans-serif;
	color: white;
	line-height: 1.1;
	font-size: 2.5rem;
	padding: 0;
	text-transform: none;
	font-weight: normal;
	margin-bottom: 5px;
}

.carousel-item .text-container h2 {
	font-size: 1.25rem;
	margin-bottom: 15px;
}

.carousel-item .text-container h1:last-child,
.carousel-item .text-container h2:last-child {
	margin-bottom: 0;
}

.carousel-item .text-container button {
	position: relative;
	background: none;
	border: 1px solid white;
	border-radius: 40px !important;
	padding: 0.7rem;
	font-size: 0.9rem;
	text-transform: none;
	letter-spacing: normal;
	font-family: 'Karbon', sans-serif;
	font-weight: 400;
	color: white;
	padding-bottom: 0.4rem;
	padding-right: 1.6rem;
	box-shadow: 0 0 1px 0 #aaa inset, 0 0 1px 0 #aaa;
	margin: 0;
}

.carousel-item .text-container button:hover {
	background: rgba(255, 255, 255, 0.1);
}

.carousel-item .text-container button:active {
	background-color: white;
	color: black;
	border-color: white;
}

.carousel-item .text-container button::after {
	content: "";
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 11px;
	height: 10px;
	mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="9.525" height="9.705" viewBox="0 0 9.525 9.705"%3E%3Cg id="Group_3" data-name="Group 3" transform="translate(0 0.283)"%3E%3Cline id="Line_3" data-name="Line 3" x2="9.242" transform="translate(0 4.569)" fill="none" stroke="%23000" stroke-width="0.8"/%3E%3Cline id="Line_4" data-name="Line 4" x2="4.569" y2="4.569" transform="translate(4.673 0)" fill="none" stroke="%23000" stroke-width="0.8"/%3E%3Cline id="Line_5" data-name="Line 5" y1="4.569" x2="4.569" transform="translate(4.673 4.569)" fill="none" stroke="%23000" stroke-width="0.8"/%3E%3C/g%3E%3C/svg%3E') no-repeat 50% 50%;
	mask-size: 100%;
	background-color: white;
	transition: background-color 0.2s;
}

.carousel-item .text-container button:active::after {
	background-color: black;
}

@media screen and (max-width: 768px) {
	.carousel-item .text-container {
		left: 10%;
		bottom: 10%;
	}

	.carousel-item .text-container h1 {
		text-align: left;
	}
}

#carousel-button-container {
	height: auto !important;
	position: absolute;
	width: 100%;
	top: 50%;
	left: 0%;
	transform: translateY(-50%);
	z-index: 20;
	margin-bottom: 0;
	/* background-color: rgba(0, 0, 0, 0.4);
  border-radius: 30px; */
}

#carousel-button-container .vc_btn3-container {
	margin: 0;
}

#carousel-button-container .wpb_column {
	height: fit-content !important;
}

#carousel-button-container button {
	border: none !important;
	background: transparent;
	box-shadow: none;
}

#carousel-button-container button.button.small:hover::after {
	background-color: black;
}

#carousel-button-container #carousel-previous button::after {
	mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="5.34" height="9.266" viewBox="0 0 5.34 9.266"%3E%3Cg id="Group_4357" data-name="Group 4357" transform="translate(56.952 -1686.236) rotate(90)"%3E%3Cpath id="Path_2" data-name="Path 2" d="M183.59 6653l4.28 4.28 4.28-4.28" transform="translate(1503 -6601.034)" fill="none" stroke="%23000" stroke-width="1"/%3E%3C/g%3E%3C/svg%3E');
}

#carousel-button-container #carousel-next button::after {
	mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="5.34" height="9.266" viewBox="0 0 5.34 9.266"%3E%3Cg id="Group_4356" data-name="Group 4356" transform="translate(-51.612 1695.503) rotate(-90)"%3E%3Cpath id="Path_2" data-name="Path 2" d="M183.59 6653l4.28 4.28 4.28-4.28" transform="translate(1503 -6601.034)" fill="none" stroke="%23000" stroke-width="1"/%3E%3C/g%3E%3C/svg%3E');
}

#carousel-button-container button::after {
	mask-size: cover !important;
	width: 9px;
	height: 16px;
	right: 50%;
	transform: translate(50%, -50%);
	background-color: white;
}

#carousel-button-container .vc_btn3-container.alt-style button::after {
	background-color: black;
}

#carousel-button-container .wpb_wrapper {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

#carousel-button-container>.col>.wpb_column>.wpb_wrapper>.wpb_content_element {
	width: 100%;
}

#carousel-button-inner-container {
	margin-bottom: 0 !important;
	position: absolute;
	width: 100%;
	height: auto !important;
	bottom: calc(5% - 10px);
}

#carousel-button-inner-container .wpb_column {
	height: fit-content !important;
}

#carousel-button-inner-container .wpb_wrapper {
	display: flex;
	flex-direction: row;
	gap: 10px;
	z-index: 11;
	height: fit-content;
	justify-content: center;
	width: 100%;
}

#carousel-button-inner-container .carousel-btn {
	background-color: rgba(255, 255, 255, 0.35);
	border: none;
	margin: 0;
	padding: 0;
	height: 3px;
	width: 50px;
	border-radius: 0 !important;
}

#carousel-button-inner-container .carousel-btn:hover {
	background-color: rgba(255, 255, 255, 0.6);
}

#carousel-button-inner-container .carousel-btn.active {
	background-color: white;
}

#carousel-button-inner-container .carousel-btn.active:hover {
	background-color: white;
}

#carousel-button-inner-container .carousel-btn.alt-style {
	background-color: rgba(0, 0, 0, 0.35);
}

#carousel-button-inner-container .carousel-btn.alt-style:hover {
	background-color: rgba(0, 0, 0, 0.5);
}

#carousel-button-inner-container .carousel-btn.alt-style.active,
#carousel-button-inner-container .carousel-btn.alt-style.active:hover {
	background-color: black;
}

#hero-carousel-container .carousel-item.right img {
	object-position: right;
}

@media screen and (max-width: 767px) {
	#hero-carousel-container .carousel-item.right img {
		object-position: 50% 67%;
	}
}

#hero-carousel-container .carousel-item.no-shadow .gradient {
	display: none;
}

#hero-carousel-container .carousel-item.low-text .text-container {
	bottom: 12.5% !important;
}

@media screen and (max-width: 767px) {
	#hero-carousel-container .carousel-item.low-text .text-container {
		bottom: 10% !important;
	}
}

#hero-carousel-container .carousel-item.black-text .text-container h1,
#hero-carousel-container .carousel-item.black-text .text-container h2 {
	color: black;
}

#hero-carousel-container .carousel-item.black-text .text-container button {
	border-color: black;
	color: black;
}

#hero-carousel-container .carousel-item.black-text .text-container button::after {
	background-color: black;
}

#hero-carousel-container .carousel-item.black-text .text-container button:hover {
	background: rgba(0, 0, 0, 0.1);
}

#hero-carousel-container .carousel-item.black-text .text-container button:active {
	background-color: black;
	color: white;
	border-color: black;
}

#hero-carousel-container .carousel-item.black-text .text-container button:active::after {
	background-color: white;
}

/* New Homepage Sections */
.rc-homepage-section {
	background-position: center;
	background-size: cover;
	height: 640px;
	position: relative;
}

.rc-homepage-section .background {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	z-index: 0;
}

.rc-homepage-section.commercial .background.desktop {
	background-position-x: right;
}

.rc-homepage-section.commercial .background.mobile {
	background-position-x: left;
}

.rc-homepage-section.commercial .background.mobile > .col {
	height: 100%;
	background: linear-gradient(184deg, transparent 23.3%, #FEDCC3 104.01%);
}

.rc-homepage-section .text-container {
	width: fit-content;
	position: absolute;
	margin-bottom: 0;
	top: 50%;
	transform: translateY(-50%);
}

.rc-homepage-section.alt .text-container {
	background-color: white;
	padding: 3.125rem 2.5rem;
}

.rc-homepage-section.residential .text-container {
	left: 10%;
}

.rc-homepage-section.commercial .text-container {
	right: 10%;
}

.rc-homepage-section.residential.alt .text-container {
	left: 8%;
}

.rc-homepage-section.commercial.alt .text-container {
	right: 8%;
}

@media screen and (max-width: 767px) {
	.rc-homepage-section.alt {
		height: auto;
		padding: 0 !important;
	}

	.rc-homepage-section.alt .img-container {
		margin-bottom: 0;
	}

	.rc-homepage-section.alt .img-container .vc_figure,
	.rc-homepage-section.alt .img-container .vc_single_image-wrapper,
	.rc-homepage-section.alt .img-container img {
		width: 100%;
		height: auto;
	}

	.rc-homepage-section .text-container {
		transform: translateY(0%);
		top: auto;
		bottom: 7.5%;
		right: auto !important;
		left: 10% !important;
		width: 80%;
	}

	.rc-homepage-section.alt .text-container {
		position: static;
		width: 100%;
		box-sizing: border-box;
		padding-top: 3.9rem;
		padding-bottom: 3.9rem;
	}

	.rc-homepage-section.alt .text-container p {
		line-height: 1.5;
	}
}

.rc-homepage-section .text-container .wpb_text_column {
	margin-bottom: 20px;
}

.rc-homepage-section.alt .text-container .wpb_text_column {
	margin-bottom: 30px;
}

.rc-homepage-section h1 {
	font-family: 'Karbon', sans-serif;
	text-transform: uppercase;
	font-size: 24px;
	padding-left: 0;
	text-align: left;
}

.rc-homepage-section.alt h1 {
	text-transform: none;
	font-weight: 500;
	margin-bottom: 26px;
}

.rc-homepage-section p {
	max-width: 40ch;
	font-size: 1rem;
	line-height: 1.2;
}

.rc-homepage-section.residential p {
	max-width: 41ch;
}

.rc-homepage-section.residential:not(.alt) h1,
.rc-homepage-section.residential:not(.alt) p {
	color: white;
}

.rc-homepage-section h1,
.rc-homepage-section p {
	color: black;
}

.vc_btn3-container button.vc_btn3.vc_btn3-size-md,
.vc_btn3-container a.vc_btn3.vc_btn3-size-md {
    position: relative;
    background: none;
    border: 1px solid black;
    border-radius: 40px !important;
    padding: 0.7rem;
    font-size: 0.9rem;
    text-transform: none;
    letter-spacing: normal;
    font-family: 'Karbon', sans-serif;
    font-weight: 400;
    color: black;
    padding-bottom: 0.4rem;
    padding-right: 1.6rem;
    box-shadow: 0 0 1px 0 #aaa inset, 0 0 1px 0 #aaa;
    margin: 0;
}

#space-customization .vc_btn3-container:nth-of-type(2) {
    display: block;
    margin-bottom: 1rem;
}

.vc_btn3-container button.vc_btn3.vc_btn3-size-md:hover,
.vc_btn3-container a.vc_btn3.vc_btn3-size-md:hover {
    background: rgba(0, 0, 0, 0.1);
    color: initial;
    border-color: initial;
}

.vc_btn3-container button.vc_btn3.vc_btn3-size-md:active,
.vc_btn3-container a.vc_btn3.vc_btn3-size-md:active {
    background-color: black;
    color: white;
    border-color: black;
}

.vc_btn3-container button.vc_btn3.vc_btn3-size-md::after,
.vc_btn3-container a.vc_btn3.vc_btn3-size-md::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 11px;
    height: 10px;
    mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="9.525" height="9.705" viewBox="0 0 9.525 9.705"%3E%3Cg id="Group_3" data-name="Group 3" transform="translate(0 0.283)"%3E%3Cline id="Line_3" data-name="Line 3" x2="9.242" transform="translate(0 4.569)" fill="none" stroke="%23000" stroke-width="0.8"/%3E%3Cline id="Line_4" data-name="Line 4" x2="4.569" y2="4.569" transform="translate(4.673 0)" fill="none" stroke="%23000" stroke-width="0.8"/%3E%3Cline id="Line_5" data-name="Line 5" y1="4.569" x2="4.569" transform="translate(4.673 4.569)" fill="none" stroke="%23000" stroke-width="0.8"/%3E%3C/g%3E%3C/svg%3E') no-repeat 50% 50%;
    mask-size: 100%;
    background-color: black;
    transition: background 0.2s;
}

.vc_btn3-container button.vc_btn3.vc_btn3-size-md:active::after,
.vc_btn3-container a.vc_btn3.vc_btn3-size-md:active::after {
    background-color: white;
}

.rc-homepage-section.residential:not(.alt) .vc_btn3-container a.vc_btn3.vc_btn3-size-md {
    color: white;
    border-color: white;
    box-shadow: 0 0 0 0 #eee inset, 0 0 1px 0 #aaa;
}

.rc-homepage-section.residential:not(.alt) .vc_btn3-container a.vc_btn3.vc_btn3-size-md:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.rc-homepage-section.residential:not(.alt) .vc_btn3-container a.vc_btn3.vc_btn3-size-md:active {
    background-color: white;
    color: black;
    border-color: white;
}

.rc-homepage-section.residential:not(.alt) .vc_btn3-container a.vc_btn3.vc_btn3-size-md::after {
    background-color: white;
}

.rc-homepage-section.residential:not(.alt) .vc_btn3-container a.vc_btn3.vc_btn3-size-md:active::after {
    background-color: black;
}

.mobile { display: none; }

@media screen and (max-width: 767px) {
	.desktop { display: none; }
	.mobile { display: block; }
}