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