.container {
padding: 20px var(--autopad);
background: var(--colorbg);
position: relative;
} #header {
margin-top: 0;
background: var(--colorlight);
position: relative;
z-index: 999;
}
#header._slider {
background: var(--colortrans);
transition: .5s;
}
.header {
position: relative;
padding: 15px var(--autopad);
height: 100px;
display: grid;
grid-template-columns: 300px auto 300px;
gap: 30px;
justify-content:space-between;
align-items: center;
}
.header select,
.header button,
.header .bttn {
height: 36px;
padding: 0 10px;
}
.header-left b {
font-size: 1.5em;
color: var(--color1);
}
.header-left .logo-web {
max-height: 70px;
display: block;
}
.header .search-mobile {
display: none;
} .topmenu {
background: var(--color1);
width: 100%;
padding: 0 var(--autopad);
display: none;
font-size: .9em;
position: absolute;
}
.topmenu > ul {
display: flex;
flex-wrap: wrap;
}
.topmenu > ul > li:hover {
background: var(--color2);
}
.topmenu > ul > li > a {
color: var(--colorwhite);
}
.topmenu ul li {
list-style: none;
padding: 5px 7px;
margin: 0;
position: relative;
transition: .3s;
}
.topmenu li a {
text-decoration: none;
text-transform: capitalize;
line-height: normal;
}
.topmenu li li {
margin-left: 12px;
border-bottom: none
}
.topmenu li li:before {
content: '';
position: absolute;
top: 10px;
left: 0;
width: 10px;
height: 10px;
border-bottom: 1px solid #ddd;
border-left: 1px solid #ddd
}
.topmenu li li a {
font-size: .9em;
margin-left: 10px;
}
.topmenu>ul>li:has(.children),
.topmenu>ul>li:has(.sub-menu) {
position: relative;
padding-right: 30px;
}
.topmenu > ul > li > .children,
.topmenu > ul > li > .sub-menu {
transition: .5s ease-in-out;
position: absolute;
top: 100%;
left: 0;
z-index: 98;
max-height: 0;
overflow: hidden;
min-width: 150px;
background: var(--colorlight);
display: block;
padding: 5px;
visibility: hidden;
border-bottom-left-radius: var(--bradius);
border-bottom-right-radius: var(--bradius);
}
.topmenu > ul > li:hover > .children,
.topmenu > ul > li:hover > .sub-menu {
max-height: 400px;
overflow-y: auto;
overflow-x: hidden;
visibility: visible;
}
.topmenu>ul>li:has(.children):after,
.topmenu>ul>li:has(.sub-menu):after {
content: '';
position: absolute;
top: 10px;
right: 0;
width: 30px;
height: 10px;
background-image: url(//vroperty.oketheme.com/wp-content/themes/vroperty-demo/assets/img/downArrow.png);
background-repeat: no-repeat;
background-position: right
} #topslider {
margin-top: -100px;
}
#topslider .slider-item{
height: 450px;
}
#topslider .owl-dots {
position: absolute;
bottom: 20px;
left: 0;
right: 0;
}
#topslider .owl-nav {
top: calc(50% + 25px);
}
.konten-slider {
position: absolute;
max-width: 768px;
width: 90%;
top: calc(50% + 25px);
left: 50%;
flex-direction: column;
align-items: center;
justify-content: center;
transform: translate(-50%, -50%);
padding: 30px;
border-radius: var(--bradius);
text-align: center;
background: var(--colortrans);
}
.konten-slider h2 {
font-size: 2.4em;
}
.konten-slider h2 span {
color: var(--color2);
font-size: .5em;
line-height: 1.5em;
font-weight: 400;
display: block;
} #content {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
#content ._left {
width: calc(100% - 302px - 20px);
position: sticky;
top: 20px;
height: fit-content;
}
#content ._right {
width: 302px;
position: sticky;
top: 20px;
height: fit-content;
}
.box-content {
border: 1px solid var(--colorborder);
border-radius: var(--bradius);
background: var(--colorlight);
padding: 20px;
position: relative;
width: 100%;
}
.box-content ._title {
font-size: 1.2em;
font-weight: 600;
padding-bottom: 10px;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
color: var(--color1);
border-bottom: 2px solid var(--colorborder);
position: relative;
}
.box-content ._title:after {
content: '';
display: block;
position: absolute;
bottom: -2px;
left: 0;
width: 60px;
height: 2px;
background: var(--color2);
}
.box-content ._title .m-icon {
margin-bottom: .2em;
}
.box-content ._title ._more {
border-radius: var(--bradius);
background: var(--colorborder);
font-size: .7em;
padding: 5px 7px;
line-height: normal;
font-weight: normal;
} .benefit .box-content{
overflow: hidden;
}
.benefit ._icon {
position: absolute;
bottom: 20px;
right: 20px;
color: var(--color1);
font-size: 80px;
opacity: .05;
}
.benefit h3 {
margin: 10px 0;
} .loop {
border: 1px solid var(--colorborder);
background: var(--colorlight);
border-radius: var(--bradius);
position: relative;
transition: all .3s cubic-bezier(0.2, 1, 0.2, 1) 0ms;
overflow: hidden;
width: 100%;
}
.loop:hover {
box-shadow: 0 5px 0 var(--colorborder);
}
.loop ._pigura {
width: 100%;
height: 220px;
overflow: hidden;
display: block;
}
.loop ._pigura img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
transition: all .3s ease;
}
.loop:hover ._pigura img {
transform: scale(1.2);
}
.loop ._content {
padding: 15px;
}
.loop ._content h3 {
font-size: 1.1em;
}
.loop ._detail {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.loop ._detail li {
display: flex;
gap: 5px;
align-items: center;
} .grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
} .list {
display: flex;
flex-direction: column;
gap: 20px;
}
.list .loop {
display: flex;
align-self: unset;
}
.list ._pigura {
width: 45%;
height: auto;
overflow: hidden;
display: block;
}
.list ._content {
width: 55%;
}  .properti-wilayah {
position: relative;
overflow: hidden;
}
.properti-wilayah ul {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
position: relative;
}
.properti-wilayah li {
list-style: circle;
margin-left: 20px;
}
.properti-wilayah ._img {
position: absolute;
top: 0;
right: 0;
height: 100%;
max-width: 50%;
}
.properti-wilayah ._img::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to right, var(--colorlight), transparent);
}
.properti-wilayah.bg ._title,
.properti-wilayah.bg ul {
margin-right: 30%
} .properti-unggulan {
max-width: 100%;
flex: 1 0 100%;
padding-bottom: 10px;
}
.properti-unggulan ._pigura {
width: 120px;
}
.properti-unggulan ._content {
width: calc(100% - 120px);
line-height: 1.4em;
} ._properti ._status {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--colortrans);
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
._properti ._status span{
line-height: normal;
letter-spacing: 1px;
font-weight: 500;
text-transform: uppercase;
color: var(--colorwhite);
padding: 10px;
border-radius: var(--inbradius);
background: #777;
opacity: .3;
}
._properti._small ._status span {
font-size: .7em;
padding: 7px;
}
._properti ._detail {
display: grid;
grid-template-columns: repeat(2, 1fr);
border-top: 1px solid var(--colorborder);
padding-top: 5px;
margin-top: 5px;
}
._properti ._detail li:has(sup) {
align-items: baseline;
}
._properti ._detail li:has(sup) .m-icon{
align-self: end;
}
._properti ._category .wilayah a{
color: var(--colorbody);
text-decoration: underline;
}
._properti ._harga {
display: flex;
align-items: center;
gap: 5px;
}
._properti ._harga b {
color: var(--color1);
font-size: 1.2em;
}
.nego {
background: var(--color2);
color: var(--colorwhite);
padding: 5px;
border-radius: var(--inbradius);
line-height: normal;
font-size: .7em;
margin-bottom: 5px;
} .agen-properti {
overflow: hidden;
border-radius: var(--bradius);
border: 1px solid var(--colorborder);
width: 100%;
position: relative;
}
.agen-properti ._pigura {
width: 100%;
height: 350px;
overflow: hidden;
display: block;
}
.agen-properti ._content {
position: absolute;
left: -10px;
right: -10px;
bottom: -10px;
padding: 20px;
background: var(--colortrans);
text-align: center;
}
.agen-properti ._detail {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
max-height: 0;
transition: .5s;
margin: 10px 0 -10px!important;
}
.agen-properti:hover ._detail {
max-height: 300px;
margin-bottom: 0!important;
}
.agen-properti ._detail li {
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis;
line-height: normal;
}
.agen-properti ._detail li a {
color: var(--colorbody);
}
.agen-properti ._detail li i {
margin-right: 3px;
} .agen-galeri .lSGallery {
margin-top: 10px!important;
}
.agen-galeri .lSGallery li {
border: 1px solid var(--colorborder)!important;
border-radius: var(--bradius)!important;
background: var(--colorlight)!important;
} .agen-properti-popup {
align-items: center;
}
.agen-properti-popup ._pigura {
width: 150px;
height: auto;
border-radius: var(--bradius);
overflow: hidden;
}
.agen-properti-popup ._content {
width: calc(100% - 170px);
}
.agen-properti-popup ._detail {
list-style: none;
display: flex;
gap: 10px;
margin-top: 10px!important;
flex-wrap: wrap;
}
.agen-properti-popup ._detail li {
padding: 0;
}
.agen-properti-popup ._detail li a {
padding: 5px 8px;
border-radius: var(--bradius);
display: inline-block;
color: var(--colorbody);
border: 1px solid var(--colorborder);
background: var(--colorbg);
}
.agen-properti-popup ._detail li a:hover {
border-color: var(--color2);
color: var(--color2);
}
.agen-galeri-popup {
position: relative;
overflow: hidden;
max-width: 500px;
}
.agen-galeri-popup ._icon {
position: absolute;
right: -70px;
top: 20%;
font-size: 300px;
line-height: normal;
color: var(--color1);
opacity: .05;
}
#agen-galeri-popup .owl-nav {
top: -63px;
right: 0;
left: unset;
transform: none;
opacity: unset;
gap: 5px;
}
#agen-galeri-popup:hover .owl-nav{
left: unset;
right: 0;
}
#agen-galeri-popup .owl-nav .owl-prev,
#agen-galeri-popup .owl-nav .owl-next {
background-color: var(--colorbg)!important;
width: 30px;
height: 30px;
}
#agen-galeri-popup .owl-nav .owl-prev span,
#agen-galeri-popup .owl-nav .owl-next span {
color: var(--colorbody)!important;
font-size: 20px;
} ._blog ._category a{
background: var(--color2);
color: var(--colorwhite);
padding: 4px 6px;
border-radius: var(--inbradius);
font-size: .8em;
}
._blog ._excerpt p{
margin: 0;
}
._blog ._excerpt {
-webkit-line-clamp: 4;
line-clamp: 4;
}
._blog._small {
gap: 10px;
border: none;
border-radius: 0;
}
._blog._small:hover {
box-shadow: none;
}
._blog._small ._pigura{
width: 90px;
height: 90px;
overflow: hidden;
border-radius: var(--bradius);
}
._blog._small ._content {
width: calc(100% - 100px);
padding: 0;
line-height: 1.4em;
}
._blog._small ._detail {
flex-direction: column;
gap: 5px;
} .banner img {
display: block;
width: 100%;
border-radius: var(--bradius);
border: 1px solid var(--colorborder);
background: var(--colorlight);
} .prop-galeri .ofc {
width: 100%;
height: 400px;
}
.prop-galeri .lSGallery {
margin-top: 10px!important;
}
.prop-galeri img {
border-radius: var(--bradius);
display: block;
}
.prop-detail {
overflow: hidden;
}
.prop-detail ._harga b {
font-size: 1.5em;
}
.prop-detail ._category {
margin: -15px 0!important;
}
.prop-detail ._cicilan {
margin-top: -15px!important;
}
.prop-detail ._detail {
list-style: none;
padding-top: 15px;
gap: 10px;
}
.prop-detail ._detail li {
display: flex;
gap: 10px;
}
.prop-detail ._detail li i {
font-size: inherit;
align-self: center;
}
.prop-detail ._status {
top: -1px;
right: -1px;
left: unset;
bottom: unset;
background: var(--color2);
color: var(--colorwhite);
padding: 10px;
line-height: normal;
border-bottom-left-radius: var(--bradius);
}
.prop-fasilitas ul {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
list-style: none;
}
.prop-fasilitas li::before {
content: "\2713";
margin-right: 10px;
}
.prop-lokasi .rwmb-osm-canvas {
border-radius: var(--bradius);
}
.prop-video iframe {
width: 100%;
height: 400px;
border-radius: var(--bradius);
} .simulasi .form-group {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 10px;
position: relative;
}
.simulasi input[type="range"] {
width: 100%;
}
.simulasi .dpwrap {
background: var(--cololight);
color: var(--colorbody);
border: 1px solid var(--colorborder);
border-radius: var(--inbradius);
box-shadow: 0 2px 0 0 rgba(0, 0, 0, .027);
overflow: hidden;
}
.simulasi .dpwrap input{
border: none!important;
border-radius: 0!important;
box-shadow: none!important;
flex: 1;
text-align: right;
height: 35px;
}
.simulasi .dpwrap span {
background: var(--colorlight);
padding-left: 10px;
}
#dp-value {
padding: .3em .6em;
background:var(--color2);
color: var(--colorwhite);
border-radius: var(--inbradius);
}
#cicilan-result b {
font-size: 1.2em;
} .single-blog ._blog ._detail li {
display: flex;
gap: 5px;
align-items: center;
}
.single-blog ._blog ._featured {
height: 300px;
overflow: hidden;
border-radius: var(--bradius);
}
.author img {
width: 96px;
height: 96px;
overflow: hidden;
border-radius: var(--bradius);
float: left;
margin: 0 15px 5px 0;
} .tags {
display: flex;
gap: 5px;
flex-wrap: wrap;
align-items: center;
}
.tags > * {
padding: 5px 10px;
border: 1px solid var(--colorborder);
background: var(--colorlight);
border-radius: var(--inbradius);
line-height: 1.2em;
font-size: .9em;
}
.tags b {
background: none;
border: none;
padding-left: 0;
color: var(--color1);
} .shareit {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.shareit i {
font-size: 24px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
transition: .5s;
}
.shareit .icofont-facebook {
color: #1877f2;
}
.shareit .icofont-x {
color: #333;
}
.shareit .icofont-brand-whatsapp{
color: #25d366;
}
.shareit .icofont-pinterest{
color: #bd081c;
}
.shareit [class*=icofont-]:hover {
transform: translateY(-3px);
background: var(--colorlight);
} .pagination {
width: 100%;
text-align: center;
}
.pagination a, .pagination > .current {
border: var(--colorborder) solid 1px;
padding: 5px 10px;
background: var(--colorlight);
margin: 0 2px;
display: inline-block;
min-width: 40px;
border-radius: var(--inbradius);
}
.pagination a:hover, .pagination > .current {
color: var(--colorwhite);
background: var(--color1);
} .comment-form {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.comment-form p {
display: flex;
flex-direction: column;
gap: 5px;
margin: 0;
}
.comment-notes,
.comment-form-comment,
.comment-form-cookies-consent,
.form-submit {
grid-column: span 2;
}
.comment-form .comment-form-cookies-consent {
display: block;
}
.form-submit {
align-items: flex-start;
}
.comments label {
font-weight: bold;
}
.comments .avatar {
float: left;
margin: 0 10px 2px 0;
border-radius: var(--bradius);
}
.comments .komentar {
position: relative;
overflow: hidden;
}
.comments .comment-respond {
margin-top: 20px;
}
.comment .comment-respond {
border: none;
border-radius: 0;
background: none;
}
.comments .comment-reply-title small {
margin-left: 10px;
}
.comment_text li {
list-style-type: none;
overflow: hidden;
margin-left: 20px;
border-radius: var(--inbradius);
border: 1px solid var(--colorborder);
}
.comment_text {
display: flex;
flex-direction: column;
gap: 20px;
}
.comment_text .depth-1 {
padding-bottom: 20px;
margin-left: 0;
border: none;
border-bottom: 1px solid var(--colorborder);
border-radius: 0;
}
.comment_text .depth-1:last-child {
border: none;
}
.comment_text .children {
margin-top: 20px;
display: flex;
flex-direction: column;
gap: 20px;
}
.comment_text .children li {
padding: 20px;
}
.comment_text li,
.comment_text li li li {
background: var(--colorlight);
}
.comment_text li li,
.comment_text li li li li {
background: var(--colorbg);
}
.comment_text li li input:focus,
.comment_text li li textarea:focus,
.comment_text li li li li input:focus,
.comment_text li li li li textarea:focus{
background: var(--colorlight);
}
.comment_text li li img {
width: 40px;
height: 40px;
} .search-form {
display: flex;
gap: 10px;
max-width: 400px;
}
.search-form input {
height: 40px;
width: 70%;
}
.search-form button {
height: 40px;
width: 30%;
} .scrollup {
display: none;
align-items: center;
justify-content: center;
position: fixed;
bottom: 20px;
right: 20px;
width: 40px;
height: 40px;
color: var(--colorwhite);
background: #0002;
border-radius: var(--bradius);
z-index: 3;
cursor: pointer;
transition: 0.3s;
}
.scrollup:hover {
background: var(--color2);
} #footer {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
padding: 0 var(--autopad);
background: var(--colorlight);
color: var(--colorbody);
border-top: 1px solid var(--colorborder);
background-image: url(//vroperty.oketheme.com/wp-content/themes/vroperty-demo/assets/img/bg_footer.png);
}
#footer:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, transparent, var(--color1));
opacity: .15;
}
#footer.active {
padding: 60px var(--autopad);
}
#footer > div {
position: relative;
gap: 30px!important;
}
#footer > div:first-child {
grid-column: span 2;
}
#footer h4 {
font-size: 1.2em;
border-bottom: 2px solid var(--colorborder);
position: relative;
padding-bottom: 10px;
}
#footer h4:after {
content: '';
display: block;
position: absolute;
bottom: -2px;
left: 0;
width: 60px;
height: 2px;
background: var(--color2);
}
#footer a {
color: var(--colorbody);
}
#footer a:hover {
color: var(--color2);
border-bottom: 1px dotted var(--color2);
}
.widgets ul li {
list-style: none;
margin-bottom: 5px;
}
.copyright {
padding: 20px var(--autopad);
background: var(--color1);
color: var(--colorwhite);
display: grid;
grid-template-columns: auto auto;
justify-content: space-between;
align-items: center;
}
.copyright a {
color: var(--colorwhite);
}
.copyright h5 {
color: var(--colorwhite);
display: inline-block;
margin: 0;
}
.copyright h5:hover {
border-bottom: 1px dotted var(--colorwhite);
}
.copyright .socmed {
font-size: 15px;
}
.copyright .socmed a {
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
color: var(--color1);
background: var(--colorwhite);
}
.copyright .socmed a:hover {
color: var(--color2);
} .live-wa {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 3;
}
.live-wa ._toggle {
font-size: 23px;
width: 46px;
height: 46px;
color: var(--colorwhite);
background: #24CC63;
border-radius: 50%;
transition: 0.3s ease-in-out;
border: 2px solid transparent;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.live-wa ._toggle:hover {
border-color: var(--colorlight);
}
.live-wa ._content {
position: absolute;
bottom: calc(100% + 15px);
left: 0;
width: max-content;
background: var(--colorlight);
border-radius: var(--bradius);
padding: 10px;
line-height: normal;
box-shadow: 0 3px 1px var(--colorborder);
overflow: hidden;
display: none;
}
.live-wa ._content img {
float: left;
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
}
.live-wa ._list {
max-height: 300px;
overflow-y: auto;
overflow-x: hidden;
}
.live-wa ._link {
padding: 10px;
border-radius: var(--inbradius);
overflow: hidden;
color: var(--colorbody);
border: 1px solid transparent;
display: block;
}
.live-wa ._link:hover {
background: var(--colorbg);
border-color: var(--colorborder);
}
.live-wa h5 {
padding: 10px;
margin: -10px -10px 10px -10px;
background: #24CC63;
color: var(--colorwhite);
text-align: center;
} .maintenis {
position: sticky;
top: 0;
left: 0;
width: 100%;
height: 35px;
background: #ff0000a1;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
color: var(--colorwhite);
font-size: 15px;
} .side-close {
width: 40px;
height: 40px;
position: fixed;
top: 0;
left: 0;
border-radius: 0;
border-bottom-right-radius: var(--bradius);
display: none;
} .testimonial p::before {
font-family: arial, sans-serif;
content: "\201C";
color: var(--color1);
font-size: 6em;
float: left;
margin: 30px 20px -25px 0;
}
.testimonial ._title {
margin-right: 120px!important;
}
.testimonial ._pigura {
position: absolute;
bottom: 20px;
right: 20px;
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
}
.testimonial .fill {
color: var(--color2);
}
.testimonial .empty {
color: #999;
}