/* ----------------------------------------------------------------

	

-----------------------------------------------------------------*/



:root {

	--cnvs-themecolor: #22B24C;

	--cnvs-themecolor-rgb:34,178,76;

	--cnvs-secondary-color: #434343;

	--cnvs-body-font: 'Roboto', sans-serif;

	--cnvs-primary-font: 'Rubik', sans-serif;

	--cnvs-secondary-font: 'Lora', serif;

}



#header {

	--cnvs-primary-menu-font-weight: 500;

	--cnvs-primary-menu-font-size:	1rem;

	--cnvs-primary-menu-submenu-font-weight:	400;

	--cnvs-primary-menu-submenu-hover-font-weight: 500;

}



@media (min-width: 992px) {



	#header {

		--cnvs-primary-menu-tt: uppercase;

		--cnvs-primary-menu-ls: 1px;

		--cnvs-primary-menu-submenu-tt: uppercase;

		--cnvs-primary-menu-color: var(--cnvs-contrast-800);

		--cnvs-primary-menu-hover-color: var(--cnvs-contrast-900);

	}



	#header.header-size-md + .include-header.include-topbar {

		margin-top: calc( -80px - 2px - 46px );

	}



	#top-bar.transparent-topbar {

		background: transparent;

		z-index: 399;

	}



	.top-links-container > .top-links-item { border: 0; }



	.top-links-container > .top-links-item > a {

		padding-left: 17px;

		padding-right: 17px;

		color: #EEE;

		font-weight: normal;

		text-transform: capitalize;

		font-size: 0.875rem;

	}



	.top-links-container > .top-links-item:hover { background-color: transparent; }



	.top-links-container > .top-links-item.top-bar-highlight > a {

		margin-top: 7px;

		margin-bottom: 7px;

		padding-top: 5px;

		padding-bottom: 5px;

		border: 1px solid #EEE;

		border-radius: 16px;

		-webkit-transition: all .3s ease;

		-o-transition: all .3s ease;

		transition: all .3s ease;

	}



	.top-links-container > .top-links-item.top-bar-highlight:hover > a {

		background-color: #FFF;

		color: #222;

	}



	.top-links-item a { font-family: var(--cnvs-primary-font); }



	.sub-menu-container:not(.mega-menu-column) {

		width: 210px;

		padding: 0 !important;

		border-radius: 3px;

		border: 0;

		background-color: var(--cnvs-themecolor);

	}



	.sub-menu-container .menu-item:not(:first-child) { border-top: 1px dotted rgba(255,255,255,0.1) !important; }



	.sub-menu-container .menu-item > .menu-link {

		font-size: 12px;

		letter-spacing: 1px;

		font-weight: 400;

		padding: 12px 17px;

		color: #FFF;

		font-family: var(--cnvs-primary-font) !important;

	}
	.sub-menu-container .menu-item > .menu-link .current{
		color: blue;
	}


	.sub-menu-container .menu-item:hover > .menu-link { padding-left: 20px; }



	.dark .primary-menu:not(.not-dark) .sub-menu-container,

	.dark .primary-menu:not(.not-dark) .mega-menu-content,

	.primary-menu.dark .sub-menu-container,

	.primary-menu.dark .mega-menu-content { background-color: var(--cnvs-themecolor); }



	.dark .primary-menu:not(.not-dark) .sub-menu-container .menu-item > .menu-link,

	.primary-menu.dark .sub-menu-container .menu-item > .menu-link { color: #fff !important; }



	.dark .primary-menu:not(.not-dark) .sub-menu-container .menu-item:hover > .menu-link,

	.primary-menu.dark .sub-menu-container .menu-item:hover > .menu-link {

		background-color: rgba(255,255,255,0.025);

		color: var(--cnvs-secondary-color) !important;

		border-radius: 3px;

	}



}





.dark #header:not(.transparent-header),

#header.dark:not(.transparent-header),

#header.dark.sticky-header.transparent-header #header-wrap:not(.not-dark),

#footer.dark { background-color: var(--cnvs-themecolor); }



.dark #header:not(.transparent-header),

#header.dark:not(.transparent-header) { border-bottom: 1px solid rgba(255,255,255,0.1); }







.menu-link {

	padding-left: 17px;

	padding-right: 17px;

	font-weight: 400;

	font-size: 13px;

	-webkit-transition: all .3s ease;

	-o-transition: all .3s ease;

	transition: all .3s ease;

}





/* ----------------------------------------------------------------

	Advanced Property Search

-----------------------------------------------------------------*/





.advanced-real-estate-tabs.tabs,

.advanced-real-estate-tabs .canvas-tabs {

	--bs-nav-tabs-border-width: 0;

	--bs-nav-link-padding-x: 20px;

	--cnvs-tabs-bg-color: var(--cnvs-themecolor);

	--bs-nav-link-color: #FFF;

	--bs-nav-link-font-size : 15px;

	--bs-nav-link-font-weight: 600;

	--cnvs-tabs-active-bg-color: var(--cnvs-secondary-color);

	--cnvs-tabs-active-color: #FFF;

}



.advanced-real-estate-tabs .nav-tabs .nav-item .nav-link {

	padding: 0 20px;

	height: 42px;

	line-height: 42px;

	font-family: var(--cnvs-primary-font);

	letter-spacing: 1px;

	text-transform: uppercase;

}



.advanced-real-estate-tabs .nav-tabs .nav-item .nav-link:hover,

.advanced-real-estate-tabs .nav-tabs .nav-item .nav-link:focus {

	color: #FFF;

}



.advanced-real-estate-tabs .nav-tabs .nav-item.ui-tabs-active .nav-link {

	top: 0;

	background-color: var(--bs-nav-pills-link-active-bg);

}



.advanced-real-estate-tabs .nav-tabs .nav-item.ui-tabs-active .nav-link .badge.bg-warning {

	background-color: var(--cnvs-themecolor);

}



.advanced-real-estate-tabs .nav-tabs .nav-item .badge { margin-left: 5px; }



.advanced-real-estate-tabs .tab-content {

	padding: 30px;

	background-color: rgba(255,255,255,0.95);

	border-top: 3px solid var(--cnvs-secondary-color);

}



.advanced-real-estate-tabs.tabs label {

	font-weight: 600;

	text-transform: uppercase;

	font-size: .875rem;

	letter-spacing: 1px;

}



#slider + .advanced-real-estate-tabs {

	top: -42px;

	margin-bottom: -42px;

	z-index: 3;

}



#slider + .advanced-real-estate-tabs .tab-content {

	background-color: var(--cnvs-contrast-200);

	padding: 50px;

}



.promo.bg-color .button:not(:hover) {

	color: #FFF;

	background-color: var(--cnvs-secondary-color);

	border-color: var(--cnvs-secondary-color);

}



.promo.bg-color .button:hover {

	background-color: #FFF;

	color: var(--cnvs-themecolor);

	text-shadow: none;

}





/* ----------------------------------------------------------------

	Real Estate Items

-----------------------------------------------------------------*/



.owl-carousel .owl-nav [class*=owl-] {

	border-color: transparent;

	color: #FFF;

	background-color: var(--cnvs-themecolor);

}



.owl-carousel.real-estate .owl-nav [class*=owl-]:hover { background-color: var(--cnvs-secondary-color) !important; }





.real-estate-item { position: relative; }



.real-estate-item-image {

	position: relative;

	width: 100%;

}



.real-estate-item-image::before {

	position: absolute;

	content: '';

	pointer-events: none;

	z-index: 1;

	opacity: 0.90;

	top: auto;

	bottom: 0;

	width: 100%;

	height: 50%;

	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); /* FF3.6+ */

	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.85))); /* Chrome,Safari4+ */

	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%); /* Chrome10+,Safari5.1+ */

	background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%); /* Opera 11.10+ */

	background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%); /* IE10+ */

	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%); /* W3C */

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */

}



.real-estate-item-image > a,

.real-estate-item-image > img {

	display: block;

	width: 100%;

	height: auto;

}





.real-estate-item-image .badge {

	display: block;

	position: absolute;

	top: 20px;

	left: 20px;

	z-index: 1;

	font-size: 11px;

	padding: 5px 8px;

	text-transform: uppercase;

	font-weight: 400;

	letter-spacing: 1px;

}





.real-estate-item-price {

	position: absolute;

	right: 20px;

	bottom: 20px;

	z-index: 1;

	font-size: 26px;

	font-weight: 400;

	letter-spacing: 1px;

	line-height: 1;

	color: #FFF;

	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);

}



.real-estate-item-price span {

	display: block;

	margin-top: 3px;

	font-weight: 300;

	font-size: 12px;

	color: rgba(255,255,255,0.85);

	text-align: right;

}



.real-estate-item-info {

	position: absolute;

	left: 20px;

	bottom: 20px;

	z-index: 1;

}



.real-estate-item-info a {

	display: block;

	float: left;

	color: #FFF;

	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);

	font-size: 12px;

	line-height: 1;

	text-align: center;

	padding: 8px;

	background-color: rgba(0,0,0,0.25);

	border-radius: 4px;

	-webkit-transition: all .3s ease;

	-o-transition: all .3s ease;

	transition: all .3s ease;

}



.real-estate-item-info a:hover { background-color: rgba(0,0,0,0.75); }



.real-estate-item-info a i {

	width: 12px;

	height: 12px;

}



.real-estate-item-info a:not(:first-child) { margin-left: 5px; }





.real-estate-item-desc {

	position: relative;

	margin-top: 20px;

	padding: 0 20px;

}





.real-estate-item-desc h3 { font-size: 21px; }



.real-estate-item-desc h3 + span {

	display: block;

	margin-top: -27px;

	color: #999;

}



.real-estate-item-desc h3 a { color: #333; }



.real-estate-item-desc h3 a:hover { color: #555; }





.real-estate-item-features { margin-top: 15px; }



.real-estate-item-features [class^=col-] { margin-top: 5px; }



.real-estate-item-features i {

	position: relative;

	top: 1px;

	margin-left: 3px;

}





.real-estate-item-link {

	position: absolute;

	top: 2px;

	right: 20px;

	width: 32px;

	height: 32px;

	line-height: 30px;

	text-align: center;

	font-size: 16px;

	color: #555;

	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);

	border: 1px solid #555;

	border-radius: 50%;

	-webkit-transition: all .3s ease;

	-o-transition: all .3s ease;

	transition: all .3s ease;

}



.real-estate-item-link:hover {

	border-color: transparent;

	background-color: var(--cnvs-themecolor);

	color: #FFF;

}







/* ----------------------------------------------------------------

	Real Estate City Properties

-----------------------------------------------------------------*/



.real-estate-properties [class^=col-] {

	position: relative;

	margin-bottom: 30px;

}



.real-estate-properties [class^=col-] > a {

	display: block;

	position: relative;

	height: 250px;

	background-color: #EEE;

}



.real-estate-properties [class^=col-] img { display: block; }



.real-estate-properties [class^=col-] > a::before {

	content: '';

	position: absolute;

	width: 100%;

	height: 100%;

	top: 0;

	left: 0;

	background-color: rgba(0,0,0,0.4);

	opacity: 0.4;

	-webkit-transition: opacity .3s ease;

	-o-transition: opacity .3s ease;

	transition: opacity .3s ease;

}



.real-estate-properties [class^=col-] > a:hover::before { opacity: 1; }





/* ----------------------------------------------------------------

	Real Estate Popular Links

-----------------------------------------------------------------*/



.widget_real_estate_popular { margin-left: 0; }



.widget_real_estate_popular li::before {

	opacity: 0.5;

}





#side-panel { background-color: #FFF; }



body.side-panel-open #side-panel {

	-webkit-box-shadow: -5px 0px 20px -6px rgba(0,0,0,0.15);

	-moz-box-shadow: -5px 0px 20px -6px rgba(0,0,0,0.15);

	box-shadow: -5px 0px 20px -6px rgba(0,0,0,0.15);

}



@media (min-width: 992px) {



	#side-panel {

		right: -400px;

		width: 400px;

	}



	#side-panel .side-panel-wrap { width: 430px; }



	#side-panel .widget { width: 320px; }



	body.side-push-panel.side-panel-open.stretched #wrapper,

	body.side-push-panel.side-panel-open.stretched #header.sticky-header .container { right: 400px; }



	body.side-push-panel.side-panel-open.stretched .slider-inner { left: -400px; }



}





/* ----------------------------------------------------------------

	Real Estate Hero Slider Overlay

-----------------------------------------------------------------*/



.metagro-video-overlay {

	background: -moz-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); /* FF3.6+ */

	background: -webkit-gradient(linear, left bottom, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.5))); /* Chrome,Safari4+ */

	background: -webkit-linear-gradient(bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* Chrome10+,Safari5.1+ */

	background: -o-linear-gradient(bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* Opera 11.10+ */

	background: -ms-linear-gradient(bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* IE10+ */

	background: linear-gradient(to top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%); /* W3C */

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */

}





#gotoTop {

	background-color: var(--cnvs-themecolor);

	border-radius: 50%;

}



#gotoTop:hover { background-color: var(--cnvs-secondary-color) !important; }





.color-2 { color: var(--cnvs-secondary-color) !important; }

.bg-color2 { background-color: var(--cnvs-secondary-color) !important; }


#header, #header-wrap, #logo img {
	transition: all .4s ease;
}

.feature-box h3 span.subtitle { font-size: 14px; }

.feature-box.fbox-plain .fbox-icon img { height: 50px; }

.col-padding {padding: 100px 60px !important; }

.heading-block::before {
	content: attr(data-heading);
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	color: var(--cnvs-contrast-200);
	z-index: -1;
	font-family: var(--cnvs-primary-font);
	font-weight: bold;
	font-size: 90px;
	line-height: .3;
}

.heading-block.center::before {
	right: 0;
	left: 0;
	margin: auto;
}

.text-rotater {
	display: inline-block;
	font-weight: 300;
	font-size: 20px;
	line-height: 1.7;
	color: var(--cnvs-contrast-600);
}


