@import url("https://fonts.googleapis.com/css?family=Roboto:100,400,500,700,900");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:100,400,500,700,900");
@import url("https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,700,700i");
html {
height: 100%;
width: 100%;
color: #222;
font-family: 'Open Sans', sans-serif;
word-break: normal; }
li {
list-style: none; }
[class*="col-"] {
padding: 2rem; }
@media screen and (max-width: 1000px) {
[class*="col-"] {
padding: 0rem; }
.row {
margin-right: 0px;
margin-left: 0px; } }
.narrow {
width: 100%;
margin: 1.5rem auto;
padding-top: 0rem; }
.narrow h1 {
font-size: 2.4rem; }
@media screen and (min-width: 1000px) {
.narrow {
width: 95%;
margin: 1.5rem auto;
padding-top: 2rem; } }
.offset:before {
display: block;
content: "";
height: 4rem;
margin-top: -4rem; }
img {
width: 100%; }
.landing {
position: relative;
width: 100%;
height: 100vh;
display: table;
z-index: -1; }
.main-wrap {
clip: rect(0, auto, auto, 0);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.main-inner {
position: fixed;
display: table;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: transform; }
.main-inner-2 {
position: fixed;
display: table;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: transform;
background-color: rgba(0, 0, 0, 0.5); }
.center-out {
display: flex;
align-items: center;
justify-content: space-between; }
.center-out-all {
display: flex;
align-items: center;
justify-content: center; }
@media screen and (max-width: 1000px) {
.center-out {
flex-direction: column; }
.center-out-all {
display: flex;
align-items: flex-start;
justify-content: center; } }
.detail_headline {
display: inline-block;
font-weight: 500;
padding-left: 0px; }
.detail_headline--inline {
display: inline-block;
font-weight: 400;
padding-left: 0px; }
.detail_headline--title {
color: #103b7a; }
.service-bg {
background-image: url(./../img/service.jpg); }
.caption {
width: 100%;
max-width: 100%;
position: absolute;
top: 38%;
z-index: 1;
color: #fff;
text-transform: uppercase; }
.caption h1 {
font-size: 3.8rem;
font-weight: 700;
letter-spacing: .3rem;
text-shadow: .1rem .1rem .8rem black;
padding-bottom: 1rem; }
.caption h3 {
font-size: 2rem;
text-shadow: .1rem .1rem .5rem black;
padding-bottom: 1.6rem; }
.btn-lg {
border-width: medium;
border-radius: 0;
padding: .6rem 1.3rem;
font-size: 1.1rem; }
/*--- Statement ---*/
#services i {
padding-bottom: 1rem; }
/*--- Services ---*/
.feature {
margin-bottom: 8rem; }
@media screen and (max-width: 1000px) {
.text-center .feature {
text-align: left; } }
.feature i {
color: var(--orange); }
.feature h3 {
font-size: 1.3rem;
text-transform: uppercase;
padding-bottom: .4rem;
font-weight: 700; }
.feature p {
font-size: 1.1rem; }
.jumbotron {
margin-bottom: 0;
padding: 2rem 1rem 3.5rem 1rem;
border-radius: 0;
/*this get rid of the rounded edges*/ }
/*--- Customer Review ---*/
.clients img {
width: 100%;
border-radius: 50%; }
blockquote i {
color: var(--orange); }
.client-hr {
border-top: solid var(--orange); }
/*--- footer ---*/
.footer {
background-color: #40474e;
color: #fff;
padding: 2rem 0; }
@media screen and (max-width: 1000px) {
.footer p {
font-size: .8rem; }
.footer [class*="col-"] {
padding: 1rem; }
.footer p, .footer .hr-white {
margin: 0; }
.footer .hr-white {
border-top: 2px solid #868e96; } }
.footer h5 {
color: #b5b5b5; }
.hubungi-kami, .main-service, .company-card, .news {
padding-top: 2rem;
padding-bottom: 2rem; }
h3.heading {
font-size: 1.9rem;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 1.9rem; }
.heading-underline {
width: 5rem;
height: .2rem;
background-color: var(--orange);
margin: 0 auto 2rem; }
.jumbo-title {
font-size: 3.8rem;
font-weight: 700;
letter-spacing: .3rem;
text-shadow: 0.1rem 0.1rem 0.8rem black;
padding-bottom: 1rem;
text-transform: uppercase; }
@media screen and (max-width: 620px) {
.jumbo-title {
font-size: 1.8rem; } }
.hr-white {
border-top: solid #fff; }
.hr-off {
border-top: solid #656361; }
.hr-black {
border-top: solid red; }
.hr-color {
border-top: solid var(--orange); }
.cap {
text-transform: uppercase; }
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #a3500c;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #008aff;
--secondary: #868e96;
--success: #77b826;
--info: #3183a6;
--warning: #ffd500;
--danger: #900;
--light: #f8f9fa;
--dark: #001324;
--accent: #ee7421;
--for-sale: #ee7421;
--rentals: #3183a6;
--foreclosures: #900;
--sold: #868e96; }
.type--light {
color: #cdcdcd; }
@keyframes moveDown {
0% {
transform: translateY(0); }
50% {
transform: translateY(1rem); }
100% {
transform: translateY(0); } }
@keyframes shake {
0% {
transform: translateY(0); }
20% {
transform: translateX(5px); }
40% {
transform: translateX(0); }
80% {
transform: translateX(-5px); }
100% {
transform: translateX(0); } }
.fadein {
opacity: 0; }
.btn-secondary {
border-width: medium;
border-radius: 0;
padding: .6rem 1.2rem;
font-size: 1.2rem;
text-transform: uppercase;
margin: 1rem;
border-color: #fa0101;
background-color: #fa0101;
color: white; }
.btn-secondary:hover {
border-color: #004fa5;
background-color: #004fa5; }
.navbar {
font-size: 1.6rem;
background-color: #fff;
color: #001324;
font-weight: 700;
padding: 10px 80px 10px 80px;
}
.navbar-toggle {
display: none; }
.main-nav li {
margin-left: 3rem;
text-transform: uppercase; }
.call {
color: black;
border: 2px solid; }
@media screen and (max-width: 1000px) {
.main-nav {
display: none; }
.main-nav li {
margin: 10px 0;
text-align: center; }
.main-nav li:first-child {
padding-top: 20px; }
.call {
display: none; }
.navbar-toggle {
display: block;
font-size: 2rem;
position: absolute;
top: 11px;
color: aqua;
right: 15px; }
.active {
display: block; } }
.hero {
background: url("https://tsoimageprod.azureedge.net/sys-master-hybrismedia/h2d/h88/8804318281758") no-repeat;
background-size: cover;
background-position: 40% 50%;
z-index: 0;
position: relative; }
@media screen and (max-width: 1000px) {
.hero {
background-size: contain;
background-position: 0% 0%; } }
@media screen and (max-width: 1000px) {
.hero {
height: none; } }
.hero_details {
display: grid;
grid-template-columns: 25% 75%;
background: rgba(0, 0, 0, 0.7); }
@media screen and (max-width: 1650px) {
.hero_details {
grid-template-columns: 30% 70%; } }
@media screen and (max-width: 1850px) {
.hero_details {
grid-template-columns: 30% 70%; } }
@media screen and (max-width: 1550px) {
.hero_details {
grid-template-columns: 50% 40%; } }
@media screen and (max-width: 1000px) {
.hero_details {
display: grid;
grid-template-columns: 100%;
background: rgba(0, 0, 0, 0.7); } }
.hero_info {
background-color: rgba(244, 7, 7, 0.9);
color: #f8f9fa;
padding: 50px 0 0 50px;
margin-left: 100px;
font-size: 1.8rem; }
@media screen and (max-width: 1000px) {
.hero_info {
grid-row: 2;
margin-left: 0px; } }
.hero_info_container {
margin-bottom: 6rem; }
.detail_container {
padding-bottom: 10px;
display: inline-block;
border-bottom: 3px solid #f8f9fa; }
.line-out {
border-bottom: 1px solid #f8f9fa;
display: block; }
.detail_list ul {
text-align: right;
margin-top: 20px; }
.details_list_li {
font-weight: 200;
padding-right: 30px;
margin-bottom: 5px;
font-size: 15px; }
.direction {
font-weight: 500;
margin: 20px 0 auto auto; }
.number_display {
font-weight: 500;
font-size: 2.5rem; }
@media screen and (max-width: 1000px) {
.number_display {
font-size: 1.5rem; } }
.hero_headline {
color: #f8f9fa; }
.hero_title footer {
font-weight: 100;
padding-bottom: 1rem; }
.hero_headline_container {
max-width: 1000px; }
@media screen and (max-width: 1000px) {
.hero_headline {
grid-row: 1;
margin-top: 100px;
text-align: right;
padding: 20px; } }
.hero_btn {
margin: auto; }
.main-service p {
font-size: 1.3rem;
padding-left: 1rem;
padding-right: 1rem;}
.main-service h3 {
font-size: 1.8rem;
text-transform: uppercase;
padding-bottom: .4rem;
color: var(--orange);
font-weight: 700; }
.main-service i {
margin-bottom: 1rem; }
.main-service-title h1 {
text-transform: uppercase; }
.customer-care-title h1 {
text-transform: uppercase; }
.customer-care-title {
background-color:white; ;
}
.customer-care-card {
background-color: white; }
.customer-care-card h1 {
}
.hubungi-kami {
background-color: white;
padding-left: 80px;
padding-right: 80px;}
.hubungi-kami h1 {
margin-top: 5rem;
}
.hubungi-kami img {
width: 50%; }
.mar0{
margin: 0;
}