/* --
HTML tags
*/
body {
font-family: arial, helvetica, sans-serif;
/*font-size: 1.3vw;*/
-webkit-font-smoothing: antialiased;
}
.data-table {
display:table;
border-collapse: collapse;
}
.data-row {
display:table-row;
line-height: 2em;
border-bottom:1px solid #000;
}
.data-cell {
display:table-cell;
}
.data-row:last-child {
border-bottom:0;
}
/*
@font-face {
font-family: "Avenir LT Std";
src: url(../fonts/AvenirLTStd-Light.otf) format("opentype");
}
*/
h1, h2, h3 {
/* font-family: "Playfair Display" */
}
/* Links */
a {
color: inherit;
text-decoration: none;
cursor:pointer;
transition-property: color;
transition-duration: 0.5s;
}
a:link {
text-decoration: none;
}
a:visited {
color: inherit;
text-decoration: none;
}
a:focus {
text-decoration: none;
}
a:hover {
text-decoration:none;
/* color: #a0a09f; */
}
a:active {
color: inherit;
text-decoration:none;
}
/* current link */
a.curr {
color: #a0a09f !important;
}
p {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
text-align: justify;
}
/* ---
Loader
*/
.loader {
width: 100%;
height: 100%;
position: fixed;
background-color: #fff;
opacity: 1;
z-index: 9999;
top: 0;
left: 0;
}
.loader_disappearing {
animation: disappear/*name*/ 1s/*duration*/ 0s/*delay*/ forwards/*fill mode*/, pull-left 0s 1005ms/*delay*/ forwards;
}
@keyframes disappear {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes pull-left {
to {
left: -100%;
}
}
.loader > div {
width: 50%;
height: 50%;
position: absolute;
left: 45%;
top: 45%;
transform: translateX(-50%), translateY(-50%);
text-transform: uppercase;
}
/* Draw/pull down */
.pull_down {
-webkit-transform: translateY(100%) !important;
-ms-transform: translateY(100%) !important;
transform: translateY(100%) !important;
}
.pull_left {
-webkit-transform: translateX(-100%) !important;
-ms-transform: translateX(-100%) !important;
transform: translateX(-100%) !important;
}
.pull_up {
-webkit-transform: translateY(-100%) !important;
-ms-transform: translateY(-100%) !important;
transform: translateY(-100%) !important;
}
.hide {
opacity: 0;
}
/* ---
Form elements
*/
input[type="text"],
textarea {
width: 99%; width: 100%;
border: 0;
box-shadow: 0 .1em .3em 0 rgba(0,0,0, 0.3);
margin-bottom: .3em;
font-family: georgia, palatino, serif;
font-style: italic;
font-size: .9em;
padding: .3em;
}
.custom-btn {
background-color: rgba(126, 199, 107, 1);
display: inline-block;
color: #fff;
font-size: .7em;
padding: .5em 1.5em;
margin-top: .5em;
}
button[type="submit"] {
/*
font-family: georgia, palatino, serif;
font-style: italic;
*/
font-weight: bold;
color: #fff;
background-color: rgba(126,199,107,1)/* rgb(96,94,94) */;
border: 0;
padding: 0.1em;
padding-left: 0.4em;
padding-right: 0.4em;
box-shadow: 0 .1em .3em 0 rgba(0,0,0, 0.3);
cursor: pointer;
}
/* Placeholder text */
::-webkit-input-placeholder {
color: inherit;
}
:-moz-placeholder {
color: inherit;
}
::-moz-placeholder {
color: inherit;
}
:-ms-input-placeholder {
color: inherit;
}
/* ---
CSS property classes
*/
.display_block {
display: block !important;
}
/* ---
Containers
*/
.boxed {
padding: 1em;
}
.unboxed {
padding: 0em;
}
/* ---
Header
*/
/* Page header */
body > .wrap .header {
background-color: #fff;
position: relative;
width: 80%; width: 100%;
margin-bottom: 0;
min-height: 67px;
top: 0;
z-index: 999;
/* padding-top: 0.5em; */
border-bottom: 1px solid;
}
body > .wrap .header > div.menu-container {
/* position: fixed; */
/* left: 10%; */
margin: 0 auto;
z-index: 999;
width: 95%;
display: flex;
align-items: flex-end;
justify-content: space-between;
}
/* Burger icon */
.burger {
position: absolute;
top: 2em;
top: 20%;
right: 2em;
width: 2em;
height: 2em;
cursor: pointer;
display: none;
}
.burger:after {
content: "\f20d";
font-family: "Ionicons";
width: 100%;
height: 100%;
font-size: 2em;
}
/* ---
Logo
*/
body > .wrap .header .logo {
/* float: left; */
/* margin-left: 2em; */
margin-top: .5em;
}
body > .wrap .header .logo img {
/* width: 100%; */
}
/* ---
Navigation menu
*/
/* Top navigation menu*/
.top-menu {
text-align: center;
margin-bottom: -.39em;
}
/* 1st level menu */
.top-menu > ul {
list-style: none;
margin-bottom: 0em;
margin-top: 0em;
/* margin-left: 5.8em; */
display: inline-block;
padding: 0;
/*
position: absolute;
float: left;
bottom: 10px;
left: 200px;
*/
}
.top-menu > ul > li.active,
.top-menu > ul > li:hover {
background-color: rgba(126,199,107,1);
color: #fff !important;
}
/* 1st level menu items */
.top-menu > ul > li {
float: left;
margin-right: 4.3em;
font-size: 0.7em;
text-transform: uppercase;
line-height: 0.9em;
padding: .5em .5em;
}
/* 2nd level menu (ie submenu) */
.top-menu ul ul {
background-color: #eee;
position: absolute;
margin-top: 0;
text-align: left;
width: auto;
top: 2.2em;
top: 100%;
padding-left: 0;
}
.top-menu ul ul > li {
padding: .5em .5em;
color: black;
transition: none;
}
.top-menu ul ul > li:hover {
background-color: rgba(126,199,107,1);
}
.top-menu ul ul > li a:hover {
color: #fff;
transition: none;
}
/* ---
Featured image or images
*/
figure#featured-image {
width: 100%;
overflow: hidden;
}
figure {
width: 100%;
overflow: hidden;
}
figure img {
width: 100%;
}
/* ---
Carousel
*/
.carousel-control-prev,
.carousel-control-next {
display: none;
}
/* ---
Sections
*/
/*
Sub-sections
*/
.sub-section {
background-color: transparent;
width: 80%; width: 70%;
margin: 0 auto;
margin-top: 2em;
margin-top: 5em;
margin-bottom: 5em;
clear: both;
}
.sub-section h2 {
border-bottom: 1px solid;
/* width: 70%; */
padding-bottom: 0.15em;
margin-bottom: 0.6em;
font-size: 2.1em;
}
.sub-section > p {
/* width: 70%; */
text-align: justify;
margin-bottom:
}
.sub-section h3 {
font-size: 1.2em;
font-weight: bold;
margin-bottom: 1.7em;
}
.sub-section h3 small {
color: inherit;
font-weight: bold;
font-size: 0.7em;
}
/*
Interior section
*/
#interior-section {
position: relative;
}
#interior-section .button-caption,
.button-caption {
display: inline-block;
padding: 0.7em;
padding-left: 3.5em;
padding-right: 3.5em;
position: absolute;
font-size: 0.9em;
top: 7em;
right: auto;
background-color: #fff;
border: 1px solid rgb(174,154,101);
color: rgb(174,154,101);
}
/*
Contact section
*/
#contact-section {
border-top: 0px solid;
margin-bottom: 5em;
}
#contact-section .sub-section {
width:70%;
}
/* Left panel */
#contact-section .contact-left {
}
#contact-section .contact-left > div {
width: 90%;
float: left;
margin-left: -15px;
}
#contact-section p {
margin-bottom: 2em;
}
#contact-section .contact-details h3 {
margin-bottom: .5em;
}
#contact-section .contact-details p {
font-size: .75em;
margin-bottom: 1em;
text-align: start;
}
#contact-section .contact-details > div {
margin-bottom: 2em;
}
/* Form */
#contact-section .form-left {
/* background-color:blue */;
padding-right: .3em;
}
#contact-section .form-right {
padding-left: 0;
}
#contact-section .submit-btn-container {
text-align: end;
}
/*
Map/location section
*/
#location-section ul {
list-style: none;
padding-left: 1em;
display: inline-block;
background-color: rgba( 255, 255, 255, .6 );
position: relative;
/* right: 0; */
left: 10%;
}
#location-section ul li {
margin-bottom: 1em/* 2.5em */;
}
/* icon*/
#location-section ul li img {
height: 60%;
}
#location-section ul li div {
display: inline-block;
vertical-align: bottom;
margin-left: 0.8em;
font-size: 0.7em;
}
#location-section .map-right img {
vertical-align: top;
}
#location-section .map-right ul div {
display: inline-block;
margin-left: 1em;
}
#location-section .map-left {
min-height: 500px;
background-image: url('../images/map.jpg');
background-size: contain;
background-repeat: no-repeat;
}
/*
Project section
*/
#project-section {
border-top: 1px solid;
}
#project-section ul {
list-style-type: disc;
padding-left: 1em;
font-family: "Playfair Display";
}
#project-section ul li {
margin-bottom: .5em;
}
/*
Floor plan section
*/
#floor-plan-section {
}
#floor-plan-section .sub-section h2 {
width: 85%;
}
#floor-plan-section .subtitle {
width: 85%;
border-bottom: 1px solid;
padding-bottom: .6em;
}
#floor-plan-section ol {
padding-left:1em;
}
/*
Developer section
*/
.sub-section h3 small.smaller {
/* font-family: "Avenir LT Std"; */
font-size: 0.4em;
margin-left: 0.7em;
}
/*
Usaha section
*/
#usaha_cendera_page img {
margin-bottom:.3em;
}
/* ---
Footer
*/
div.footer {
font-size: .8em;
padding-top: .5em;
padding-bottom: .5em;
border-top: 1px solid;
position: relative;
/*
color: #fff;
background-color: rgba(126,199,107,1);
*/
line-height: .9em;
}
div.footer .gotop {
position: absolute;
right: 1em;
top: 1em;
font-size: .7em;
}
div.footer p {
text-align: center;
width: 80%;
margin: 0 auto;
margin-top: .2em;
margin-bottom: 1em;
font-size: .8em;
}
/*
Medium screen size
*/
@media screen and (max-width: 1200px) {
}/* Medium screen size */
/*
Small screen size
*/
@media screen and (max-width: 991px) {
/*
Burger icon
*/
.burger {
display: inline !important;
width: 3em;
height: 3em;
}
.mobile-top-menu {
width: 100%;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 9999;
background-color: rgba(250,250,250,1);
overflow: auto;
}
/* Top menu */
.mobile-top-menu > ul {
list-style: none;
padding-left: 0;
}
.mobile-top-menu li {
cursor: pointer;
}
/* Top menu items */
.mobile-top-menu > ul > li {
display: block;
padding: 1em;
border-bottom: 1px solid rgba(200,200,200,0.3);
font-weight: normal;
font-size: 1.1em;
text-transform: uppercase;
}
.mobile-top-menu li.has-submenu,
.mobile-top-menu li.menu-item-has-children {
}
/* Chevron icon */
.mobile-top-menu li.has-submenu > i,
.mobile-top-menu li.menu-item-has-children > i {
opacity: 0.3;
margin-left: 0.1em;
}
/* 2nd level menu */
.mobile-top-menu li.has-submenu > ul,
.mobile-top-menu li.menu-item-has-children > ul {
opacity: 1;
list-style: none;
padding-left: 0;
}
/* 2nd level, 3rd level, 4th level, … menu */
.mobile-top-menu ul ul {
display: none;
}
.mobile-top-menu li.has-submenu > ul li,
.mobile-top-menu li.menu-item-has-children > ul li {
font-size: 0.9em;
padding: 0.4em;
}
/* Close icon */
span.ion-close, i.fa-times {
width: 1em;
height: 1em;
right: 0.5em;
top: 0.5em;
font-size: 1.5em;
position: absolute;
cursor: pointer;
}
/* Chevron/angle icons*/
.mobile-top-menu .fa-angle-down {
padding-left: 0.5em;
padding-right: 0;
cursor: pointer;
display: inline-block;
}
.mobile-top-menu .fa-angle-up {
padding: 0.5em;
padding-right: 0;
cursor: pointer;
display: inline-block;
}
/* ---
Form elements
*/
.form-right {
padding-left: 15px !important;
/* padding-right: 0 !important; */
}
.submit-btn-container {
padding-right: 0 !important;
}
/*
Regular top menu items
*/
.top-menu /* .menu-mng-theme-menu-container */ > ul {
display: none;
}
body > .wrap .header > div.menu-container {
}
/*
Contact details section
*/
.contact-details {
padding-left: 0;
}
#contact-section .contact-left > div {
width: 100%;
}
#contact-section .form-left {
padding-right: 0;
}
}/* Small screen size */
.number {
padding-top: .2em;
padding-bottom: .2em;
font-size: 2em;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
margin-top: .5em;
display: inline-block;
margin-bottom: .5em;
}
.location {
font-size: smaller;
}
@media screen and (max-width: 834px) {
.content-right {
padding-top: 3em !important;
}
.data-row, .data-table, .data-cell {
display: block;
}
body > .wrap .header .logo {
margin-left: 0;
}
#location-seciton ul {
list-style: none;
}
#current-projs-menu, #completed-projs-menu {
position: relative !important;
display: block !important;
}
.mobile-top-menu ul ul {
display: block !important;
background-color: transparent !important;
}
#location-section ul li {
margin-bottom: 0em;
display: inline;
margin-right: 1em;
margin-bottom:2em;
white-space: nowrap;
}
#exquisite-design .button-caption {
left: 10% !important;
right: auto !important;
}
.future-projects {
flex-direction: column;
}
.future-projects > div {
margin-bottom: 1em;
}
.phone-email {
right: 25% !important;
}
}
/*
xs-screen size
*/
@media screen and (max-width: 767px) {
.content-right {
padding-top: 0 !important;
}
.data-row, .data-table, .data-cell {
display: block;
}
body > .wrap .header .logo {
margin-left: 0;
}
#location-seciton ul {
list-style: none;
}
#current-projs-menu, #completed-projs-menu {
position: relative !important;
display: block !important;
}
.mobile-top-menu ul ul {
display: block !important;
background-color: transparent !important;
}
#location-section ul li {
margin-bottom: 0em;
display: inline;
margin-right: 1em;
margin-bottom:2em;
white-space: nowrap;
}
#exquisite-design .button-caption {
left: 10% !important;
right: auto !important;
}
.future-projects {
flex-direction: column;
}
.future-projects > div {
margin-bottom: 1em;
}
} /* Small screen size */
ul.icons {
}
ul.icons li {
margin-bottom: 1em;
}