Viewing File: /home/maglabs/exclusive/wp-content/themes/homeid/assets/sass/_elements.scss

@import "elements/elements";

.toggle-icon {
	cursor: pointer;
	display: inline-block;
	width: 32px;
	height: 30px;
	position: relative;
	vertical-align: middle;
}

.toggle-icon > span {
	bottom: 0;
	display: block;
	height: 2px;
	left: 0;
	right: 0;
	margin: auto;
	position: absolute;
	top: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	background-color: currentColor;
}

.toggle-icon > span:after,
.toggle-icon > span:before {
	content: '';
	height: 2px;
	left: 0;
	right: 0;
	margin: auto;
	position: absolute;


	-webkit-transition: top 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out, background 0.3s;
	-moz-transition: top 0.3s ease-in-out, -moz-transform 0.3s ease-in-out, background 0.3s;
	transition: top 0.3s ease-in-out, transform 0.3s ease-in-out, background 0.3s;

	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	background-color: currentColor;
}

.toggle-icon > span:before {
	top: 8px;
}

.toggle-icon > span:after {
	top: -8px;
}

.toggle-icon:hover {
	color: #e4573d;
}

.toggle-icon.in > span {
	background-color: transparent !important;
}

.toggle-icon.in > span:after,
.toggle-icon.in > span:before {
	-webkit-transition: top 0.3s ease-in-out, -webkit-transform 0.3s 0.5s ease-in-out, background 0.3s;
	-moz-transition: top 0.3s ease-in-out, -moz-transform 0.3s 0.5s ease-in-out, background 0.3s;
	transition: top 0.3s ease-in-out, transform 0.3s 0.5s ease-in-out, background 0.3s;
	top: 0;
}

.toggle-icon.in > span:after {
	-webkit-transform: rotate3d(0, 0, 1, -45deg);
	-moz-transform: rotate3d(0, 0, 1, -45deg);
	-ms-transform: rotate3d(0, 0, 1, -45deg);
	-o-transform: rotate3d(0, 0, 1, -45deg);
	transform: rotate3d(0, 0, 1, -45deg);
}

.toggle-icon.in > span:before {
	-webkit-transform: rotate3d(0, 0, 1, 45deg);
	-moz-transform: rotate3d(0, 0, 1, 45deg);
	-ms-transform: rotate3d(0, 0, 1, 45deg);
	-o-transform: rotate3d(0, 0, 1, 45deg);
	transform: rotate3d(0, 0, 1, 45deg);
}


.vc-col-no-pt > .vc_column-inner,
.vc_row.vc_row.vc-col-no-pt > .vc_column_container > .vc_column-inner,
.vc_row.vc_row.vc-col-no-pt > .vc_column_container > .vc_column-inner,
.vc_row.vc_row.vc-col-no-pt > .vc_column_container > .vc_column-inner {
	padding-top: 0;
}

@media (max-width: 991px) {
	.gel-vc-no-pd-md .vc_column_container > .vc_column-inner {
		padding-left: 0;
		padding-right: 0;
	}

	.md-col-pd-left-right-15 > .vc_column-inner {
		padding-right: 15px !important;
		padding-left: 15px !important;
	}

	div.md-mg-left-right-0 {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

@media (min-width: 992px) {
	.gel-vc-no-pb-lg > .vc_column-inner {
		padding-bottom: 0 !important;
	}
}

.bg-position-bt {
	background-position: bottom !important;
}

.custom-icon-oval {
	height: 0;

	.vc_single_image-wrapper {
		width: 64px;
		height: 64px;
		background-color: var(--g5-color-primary);
		@include border-radius(50%);
		@include d-flex();
		@include align-items-center();
		@include justify-content-center();
		position: absolute;
		top: -32px;
		left: -47px;
	}
}

.custom-call {
	.icon {
		font-size: 40px;
		font-weight: 300;
		line-height: 1.4;
		color: var(--g5-color-accent);
		margin-bottom: 10px;
	}

	.title {
		font-size: 13px;
		opacity: 0.8;
		line-height: 2;
		letter-spacing: 1.73px;
		text-transform: uppercase;
		margin-bottom: 9px;
		margin-top: 0;
	}

	.phone {
		font-size: 42px;
		font-weight: 600;
		line-height: 1.33;
		color: var(--g5-color-primary);
		margin-bottom: 18px;
	}
}

.custom-box-shadow-01 {
	@include box-shadow(0 19px 34px 0 rgba(51, 51, 51, 0.06));
}

.custom-box-shadow-02 {
	@include box-shadow(0 0 29px 0 rgba(0, 0, 0, 0.05));
}

.custom-box-shadow-03 {
	@include box-shadow(0 2px 16px 0 rgba(14, 198, 213, 0.43));
}

.custom-box-shadow-04 {
	@include box-shadow(0 15px 30px 0 rgba(0, 0, 0, 0.05));
}


.custom-col-border-top {
	.vc_column-inner > .wpb_wrapper {
		border-top: 1px solid var(--g5-color-border);
	}
}

.custom-vc_tta-mb-0 {
	.vc_tta-container {
		margin-bottom: 0 !important;
	}
}

.custom-img-br-5 {
	img {
		@include border-radius(5px);
	}
}

.custom-col-container {
	.vc_column-inner {
		padding-left: 15px !important;
		padding-right: 15px !important;
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;

		> .wpb_wrapper {
			background-color: $color_white;
			max-width: 570px;
			margin-left: auto;
			@include border-radius(5px);
			padding: 63px 100px 66px;
			margin-top: 80px;
			margin-bottom: 80px;
		}
	}
}

.custom-title-property {
	.sub-title {
		font-size: 22px;
		font-weight: 500;
		line-height: 1.27;
		letter-spacing: 3.67px;
		margin-bottom: 28px;
	}

	.title a {
		font-size: 60px;
		font-weight: 500;
		line-height: 1.2;
		margin-bottom: 24px;
		display: block;
		color: #fff;
		@include transition(color 0.3s);

		&:hover {
			color: var(--g5-color-accent);
		}
	}

	.description {
		font-size: 22px;
		font-weight: 500;
		line-height: 1.27;
		margin-bottom: 18px;
	}

	.price {
		font-size: 32px;
		font-weight: 600;
	}
}

.custom-bg-image {
	background-image: url('assets/images/templates/explore-by-property-01.png'), url('assets/images/templates/explore-by-property-02.png');
	background-position: left top, right bottom;
	background-repeat: no-repeat, no-repeat;
	background-size: auto, auto;
	background-color: var(--g5-color-primary);
}

.custom-bg-image-02 {
	background-image: url('assets/images/templates/single-image-02.png'), url('assets/images/templates/single-image-03.png');
	background-position: left top, right bottom;
	background-repeat: no-repeat, no-repeat;
	background-size: auto, auto;
}

.custom-bg-page-title-01 {
	background-image: url('assets/images/templates/icon-page-title-01.png'), url('assets/images/templates/icon-page-title-02.png');
	background-position: left bottom, right top;
	background-repeat: no-repeat, no-repeat;
	background-size: auto, auto;
}

.custom-bg-page-contact-01 {
	background-image: url('assets/images/templates/icon-page-contact-01.png'), url('assets/images/templates/icon-page-contact-02.png');
	background-position: right 160px, left bottom;
	background-repeat: no-repeat, no-repeat;
	background-size: auto, auto;
}

.custom-bg-visual-landing {
	background-image: url('assets/images/templates/icon-visual-landing-01.png'), url('assets/images/templates/icon-visual-landing-02.png');
	background-position: left top, bottom right 30px;
	background-repeat: no-repeat, no-repeat;
	background-size: auto, auto;
}

.custom-bg-powerful-landing {
	background-image: url('assets/images/templates/bg-banner-landing-01.png'), url('assets/images/templates/bg-banner-landing-02.png');
	background-position: right top, left bottom;
	background-repeat: no-repeat, no-repeat;
	background-size: auto, auto;
}

.custom-bg-agent-landing-01 {
	background-image: url('assets/images/templates/agent-landing-01.png');
	background-position: right top;
	background-repeat: no-repeat, no-repeat;
	background-size: auto, auto;
}

.custom-bg-agent-landing-02 {
	background-image: url('assets/images/templates/agent-landing-01.png');
	background-position: left bottom;
	background-repeat: no-repeat, no-repeat;
	background-size: auto, auto;
}

.custom-bg-listing-landing {
	background-image: url('assets/images/templates/bg-listing-landing-left.png'), url('assets/images/templates/bg-listing-landing-right.png');
	background-position: left center, right center;
	background-repeat: no-repeat, no-repeat;
	background-size: auto, auto;
}

.custom-overflow-unset {
	overflow: unset !important;
}

.wpb_single_image .vc_single_image-wrapper.vc_box_rounded,
.wpb_single_image .vc_single_image-wrapper.vc_box_rounded img {
	@include border-radius(5px);
}

.custom-icon-btn-landing {
	i {
		font-size: 24px;
		margin-right: 8px;
		color: var(--g5-color-accent);
	}

	a {
		@include d-inline-flex();
		@include align-items-center();

		&:hover i,
		&:focus i {
			color: inherit;
		}

		&:focus {
			color: $color_white !important;
		}
	}
}

.custom-col-br-top-33 > .vc_column-inner {
	@include border-radius(33px 33px 0 0);
}

.custom-col-br-bottom-33 > .vc_column-inner {
	@include border-radius(0 0 33px 33px);
}

.custom-heading-center-landing-01,
.custom-heading-center-landing-02,
.custom-heading-center-landing-03,
.custom-heading-center-landing-04 {
	position: relative;

	.gel-heading-title,
	.gel-heading-subtitle {
		position: relative;
		z-index: 2;
	}
}

.custom-heading-center-landing-01,
.custom-heading-center-landing-02 {
	.gel-heading-description {
		position: absolute;
		margin-top: 0;
		left: 50%;
		@include transform(translateX(-50%));
	}

	.gel-heading-title,
	.gel-heading-subtitle {
		position: relative;
		z-index: 2;
	}
}

.custom-heading-center-landing-01 {
	.gel-heading-description {
		top: -75px;
	}
}

.custom-heading-center-landing-02 {
	.gel-heading-description {
		top: -40px;
	}
}

.custom-heading-center-landing-03 {
	.gel-heading-description {
		top: -40px;
		position: absolute;
		margin-top: 0;
		left: -80px;
	}
}

.custom-heading-center-landing-04 {
	.gel-heading-description {
		top: -40px;
		position: absolute;
		margin-top: 0;
		left: 0;
	}
}

.custom-icon-features-landing {
	position: relative;

	.vc_figure {
		position: absolute;
		top: -35px;
		left: 50%;
		@include transform(translateX(-50%));
	}
}

.custom-vc-min-height-100 {
	> .vc_column_container {
		@include align-items-center();
		min-height: inherit;
	}
}

.custom-pos-parallax-lg-01 {
	top: 5%;
	left: -160px;
}

.custom-pos-parallax-lg-02 {
	left: 5%;
	bottom: 0;
}

.custom-pos-parallax-lg-03 {
	top: 10%;
	right: 10%;
}

.custom-pos-parallax-lg-04 {
	right: -7%;
	bottom: 0;
}

.custom-pos-parallax-lg-05 {
	right: 26%;
	bottom: -5%;
}

.custom-col-bg-white {
	> .vc_column-inner > .wpb_wrapper {
		@include border-radius(5px);
		background-color: $color_white;
		@include box-shadow(0 2px 0 0 #f8f8f8);
	}
}

.custom-pos-parallax-lg-01,
.custom-pos-parallax-lg-02,
.custom-pos-parallax-lg-03,
.custom-pos-parallax-lg-04,
.custom-pos-parallax-lg-05 {
	position: absolute;
	z-index: -1;
}

.custom-agency-search {
	&.g5element__agency-search, .g5element__agency-search {
		.form-control {
			background-color: transparent;
			border-width: 0 0 2px;
			border-color: #eee;
			border-style: solid;
			border-radius: 0;
			padding-left: 0;
		}
	}
}

.custom-agency-search.g5element__agency-search,
.custom-agency-search > .elementor-widget-container {
	box-shadow: 0 20px 15px 0 rgba(51, 51, 51, .03);
}

@media (min-width: 992px) {
	.md-border-left {
		border-left: 1px solid;
	}

	.md-border-right {
		border-right: 1px solid;
	}
}

@media (min-width: 1200px) {
	.xl-pd-left-right-20 > .vc_column-inner {
		padding-right: 20px !important;
		padding-left: 20px !important;
	}

	.xl-col-6-full-right {
		position: absolute;
		height: 100%;
		top: 0;
		width: 50vw;
		right: 50%;
		margin-right: -50vw;
	}

	.custom-xl-map-height-full {
		.vc_column-inner, .wpb_wrapper, .gel-google-map {
			height: 100% !important;
		}
	}
	.custom-bg-page-sercices {
		background-image: url('assets/images/templates/single-image-04.png'), url('assets/images/templates/single-image-05.png');
		background-position: right top, bottom 270px left;
		background-repeat: no-repeat, no-repeat;
		background-size: auto, auto;
	}
	.custom-xl-col-pd-left-right-30 {
		margin-left: -30px;
		margin-right: -30px;

		.vc_column_container {
			padding-right: 15px;
			padding-left: 15px;
		}
	}
}

@media (min-width: 1441px) and (max-width: 2559px) {
	.vc-row-left-right-200 {
		padding-left: 185px !important;
		padding-right: 185px !important;

		&.custom-pd-180 {
			padding-left: 180px !important;
			padding-right: 180px !important;
		}

		&.custom-xl-col-pd-left-right-30 {
			padding-left: 170px !important;
			padding-right: 170px !important;
		}
	}
}

@media (max-width: 1440px) and (min-width: 1200px) {
	.vc-row-left-right-200 {
		padding-left: 15px !important;
		padding-right: 15px !important;

		&.custom-xl-col-pd-left-right-30 {
			padding-left: 0 !important;
			padding-right: 0 !important;
		}
	}
	.custom-parallax-single-image {
		.wpb_single_image img {
			max-width: 70%;
		}
	}
	.custom-pos-parallax-lg-03 {
		right: 5%;
	}
}

@media (max-width: 1440px) {
	div.xxl-pd-left-right-15 {
		padding-right: 15px !important;
		padding-left: 15px !important;
	}
}

@media (max-width: 1366px) {
	div.xl-pd-left-right-15 {
		padding-right: 15px !important;
		padding-left: 15px !important;
	}
	.xl-col-pd-left-right-15 > .vc_column-inner {
		padding-right: 15px !important;
		padding-left: 15px !important;
	}

	.custom-heading-center-landing-03 {
		.gel-heading-description {
			left: 0;
		}
	}
}

@media (max-width: 1199px) {
	div.lg-col-pd-left-right-15 > .vc_column-inner {
		padding-right: 15px !important;
		padding-left: 15px !important;
	}

	div.lg-pd-left-right-0 {
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	.lg-col-pd-right-15 > .vc_column-inner {
		padding-right: 15px !important;
	}

	.lg-col-pd-left-right-0 > .vc_column-inner {
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	.lg-col-mg-left-right-0 > .vc_column-inner {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	div.lg-mg-left-right-0 {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	div.lg-mg-0 {
		margin: 0 !important;
	}

	.custom-icon-oval {
		.vc_single_image-wrapper {
			left: 50%;
			@include transform(translateX(-50%));
		}
	}

	.lg-col-full-width {
		position: absolute !important;
		width: 100vw;
		right: 50%;
		margin-right: -50vw;
	}

	.lg-sections-column {
		@include flex-flow-column();
	}
	.custom-col-container {
		.vc_column-inner {
			max-width: 960px;
		}
	}
	.custom-parallax-single-image {
		.wpb_single_image img {
			display: none;
		}
	}
}

@media (max-width: 991px) {
	.custom-col-container {
		.vc_column-inner {
			max-width: 720px;
		}
	}
	div.md-mg-mt-0 {
		margin-top: 0 !important;
	}
	div.md-col-mg-mt-0 > .vc_column-inner {
		margin-top: 0 !important;
	}
	div.md-pd-left-right-0 {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

@media (max-width: 767px) {
	div.sm-mg-left-right-0 {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	div.sm-mg-left-right-15 {
		margin-left: 15px !important;
		margin-right: 15px !important;
	}
	div.sm-col-pd-left-right-0 > .vc_column-inner {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	div.sm-col-pd-left-right-15 > .vc_column-inner {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}
	.custom-col-container {
		.vc_column-inner {
			max-width: 540px;
		}
	}
}

@media (max-width: 575px) {
	div.xs-pd-left-right-15 {
		padding-right: 15px !important;
		padding-left: 15px !important;
	}
	.xs-col-pd-left-right-15 > .vc_column-inner {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}
	.xs-sections-full {
		@include flex-flow-column();

		.gel-layout-section {
			@include flex(1 1 100%);
		}

		.gel-layout-section + .gel-layout-section {
			margin-left: 0 !important;
			margin-top: 30px;
		}
	}
	.custom-col-container {
		.vc_column-inner {
			max-width: 100%;

			> .wpb_wrapper {
				padding: 30px;
			}
		}
	}

}

@media (max-width: 480px) {
	.custom-vc_col-xxs-12 .vc_column_container {
		width: 100%;
	}
}

.icon-accent-color i {
	color: var(--g5-color-accent);
}

.custom-width-client-logo .gel-client-logo-inner .image {
	max-width: 162px;
}
Back to Directory File Manager