Data hosted with ♥ by Pastebin.com - Download Raw - See Original
  1. @import url("https://fonts.googleapis.com/css?family=Roboto:100,400,500,700,900");
  2. @import url("https://fonts.googleapis.com/css?family=Open+Sans:100,400,500,700,900");
  3. @import url("https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,700,700i");
  4. html {
  5.   height: 100%;
  6.   width: 100%;
  7.   color: #222;
  8.   font-family: 'Open Sans', sans-serif;
  9.   word-break: normal; }
  10.  
  11. li {
  12.   list-style: none; }
  13.  
  14. [class*="col-"] {
  15.   padding: 2rem; }
  16.  
  17. @media screen and (max-width: 1000px) {
  18.   [class*="col-"] {
  19.     padding: 0rem; }
  20.   .row {
  21.     margin-right: 0px;
  22.     margin-left: 0px; } }
  23.  
  24. .narrow {
  25.   width: 100%;
  26.   margin: 1.5rem auto;
  27.   padding-top: 0rem; }
  28.  
  29. .narrow h1 {
  30.   font-size: 2.4rem; }
  31.  
  32. @media screen and (min-width: 1000px) {
  33.   .narrow {
  34.     width: 95%;
  35.     margin: 1.5rem auto;
  36.     padding-top: 2rem; } }
  37.  
  38. .offset:before {
  39.   display: block;
  40.   content: "";
  41.   height: 4rem;
  42.   margin-top: -4rem; }
  43.  
  44. img {
  45.   width: 100%; }
  46.  
  47. .landing {
  48.   position: relative;
  49.   width: 100%;
  50.   height: 100vh;
  51.   display: table;
  52.   z-index: -1; }
  53.  
  54. .main-wrap {
  55.   clip: rect(0, auto, auto, 0);
  56.   position: absolute;
  57.   top: 0;
  58.   left: 0;
  59.   width: 100%;
  60.   height: 100%; }
  61.  
  62. .main-inner {
  63.   position: fixed;
  64.   display: table;
  65.   top: 0;
  66.   left: 0;
  67.   width: 100%;
  68.   height: 100%;
  69.   background-size: cover;
  70.   background-position: center center;
  71.   -webkit-transform: translateZ(0);
  72.   transform: translateZ(0);
  73.   will-change: transform; }
  74.  
  75. .main-inner-2 {
  76.   position: fixed;
  77.   display: table;
  78.   top: 0;
  79.   left: 0;
  80.   width: 100%;
  81.   height: 100%;
  82.   background-size: cover;
  83.   background-position: center center;
  84.   -webkit-transform: translateZ(0);
  85.   transform: translateZ(0);
  86.   will-change: transform;
  87.   background-color: rgba(0, 0, 0, 0.5); }
  88.  
  89. .center-out {
  90.   display: flex;
  91.   align-items: center;
  92.   justify-content: space-between; }
  93.  
  94. .center-out-all {
  95.   display: flex;
  96.   align-items: center;
  97.   justify-content: center; }
  98.  
  99. @media screen and (max-width: 1000px) {
  100.   .center-out {
  101.     flex-direction: column; }
  102.   .center-out-all {
  103.     display: flex;
  104.     align-items: flex-start;
  105.     justify-content: center; } }
  106.  
  107. .detail_headline {
  108.   display: inline-block;
  109.   font-weight: 500;
  110.   padding-left: 0px; }
  111.  
  112. .detail_headline--inline {
  113.   display: inline-block;
  114.   font-weight: 400;
  115.   padding-left: 0px; }
  116.  
  117. .detail_headline--title {
  118.   color: #103b7a; }
  119.  
  120. .service-bg {
  121.   background-image: url(./../img/service.jpg); }
  122.  
  123. .caption {
  124.   width: 100%;
  125.   max-width: 100%;
  126.   position: absolute;
  127.   top: 38%;
  128.   z-index: 1;
  129.   color: #fff;
  130.   text-transform: uppercase; }
  131.  
  132. .caption h1 {
  133.   font-size: 3.8rem;
  134.   font-weight: 700;
  135.   letter-spacing: .3rem;
  136.   text-shadow: .1rem .1rem .8rem black;
  137.   padding-bottom: 1rem; }
  138.  
  139. .caption h3 {
  140.   font-size: 2rem;
  141.   text-shadow: .1rem .1rem .5rem black;
  142.   padding-bottom: 1.6rem; }
  143.  
  144. .btn-lg {
  145.   border-width: medium;
  146.   border-radius: 0;
  147.   padding: .6rem 1.3rem;
  148.   font-size: 1.1rem; }
  149.  
  150. /*---  Statement ---*/
  151. #services i {
  152.   padding-bottom: 1rem; }
  153.  
  154. /*---  Services ---*/
  155. .feature {
  156.   margin-bottom: 8rem; }
  157.  
  158. @media screen and (max-width: 1000px) {
  159.   .text-center .feature {
  160.     text-align: left; } }
  161.  
  162. .feature i {
  163.   color: var(--orange); }
  164.  
  165. .feature h3 {
  166.   font-size: 1.3rem;
  167.   text-transform: uppercase;
  168.   padding-bottom: .4rem;
  169.   font-weight: 700; }
  170.  
  171. .feature p {
  172.   font-size: 1.1rem; }
  173.  
  174. .jumbotron {
  175.   margin-bottom: 0;
  176.   padding: 2rem 1rem 3.5rem 1rem;
  177.   border-radius: 0;
  178.   /*this get rid of the rounded edges*/ }
  179.  
  180. /*---  Customer Review ---*/
  181. .clients img {
  182.   width: 100%;
  183.   border-radius: 50%; }
  184.  
  185. blockquote i {
  186.   color: var(--orange); }
  187.  
  188. .client-hr {
  189.   border-top: solid var(--orange); }
  190.  
  191. /*---  footer ---*/
  192. .footer {
  193.   background-color: #40474e;
  194.   color: #fff;
  195.   padding: 2rem 0; }
  196.  
  197. @media screen and (max-width: 1000px) {
  198.   .footer p {
  199.     font-size: .8rem; }
  200.   .footer [class*="col-"] {
  201.     padding: 1rem; }
  202.   .footer p, .footer .hr-white {
  203.     margin: 0; }
  204.   .footer .hr-white {
  205.     border-top: 2px solid #868e96; } }
  206.  
  207. .footer h5 {
  208.   color: #b5b5b5; }
  209.  
  210. .hubungi-kami, .main-service, .company-card, .news {
  211.   padding-top: 2rem;
  212.   padding-bottom: 2rem; }
  213.  
  214. h3.heading {
  215.   font-size: 1.9rem;
  216.   font-weight: 700;
  217.   text-transform: uppercase;
  218.   margin-bottom: 1.9rem; }
  219.  
  220. .heading-underline {
  221.   width: 5rem;
  222.   height: .2rem;
  223.   background-color: var(--orange);
  224.   margin: 0 auto 2rem; }
  225.  
  226. .jumbo-title {
  227.   font-size: 3.8rem;
  228.   font-weight: 700;
  229.   letter-spacing: .3rem;
  230.   text-shadow: 0.1rem 0.1rem 0.8rem black;
  231.   padding-bottom: 1rem;
  232.   text-transform: uppercase; }
  233.  
  234. @media screen and (max-width: 620px) {
  235.   .jumbo-title {
  236.     font-size: 1.8rem; } }
  237.  
  238. .hr-white {
  239.   border-top: solid #fff; }
  240.  
  241. .hr-off {
  242.   border-top: solid  #656361; }
  243.  
  244. .hr-black {
  245.   border-top: solid red; }
  246.  
  247. .hr-color {
  248.   border-top: solid var(--orange); }
  249.  
  250. .cap {
  251.   text-transform: uppercase; }
  252.  
  253. :root {
  254.   --blue: #007bff;
  255.   --indigo: #6610f2;
  256.   --purple: #6f42c1;
  257.   --pink: #e83e8c;
  258.   --red: #dc3545;
  259.   --orange: #a3500c;
  260.   --yellow: #ffc107;
  261.   --green: #28a745;
  262.   --teal: #20c997;
  263.   --cyan: #17a2b8;
  264.   --white: #fff;
  265.   --gray: #6c757d;
  266.   --gray-dark: #343a40;
  267.   --primary: #008aff;
  268.   --secondary: #868e96;
  269.   --success: #77b826;
  270.   --info: #3183a6;
  271.   --warning: #ffd500;
  272.   --danger: #900;
  273.   --light: #f8f9fa;
  274.   --dark: #001324;
  275.   --accent: #ee7421;
  276.   --for-sale: #ee7421;
  277.   --rentals: #3183a6;
  278.   --foreclosures: #900;
  279.   --sold: #868e96; }
  280.  
  281. .type--light {
  282.   color: #cdcdcd; }
  283.  
  284. @keyframes moveDown {
  285.   0% {
  286.     transform: translateY(0); }
  287.   50% {
  288.     transform: translateY(1rem); }
  289.   100% {
  290.     transform: translateY(0); } }
  291.  
  292. @keyframes shake {
  293.   0% {
  294.     transform: translateY(0); }
  295.   20% {
  296.     transform: translateX(5px); }
  297.   40% {
  298.     transform: translateX(0); }
  299.   80% {
  300.     transform: translateX(-5px); }
  301.   100% {
  302.     transform: translateX(0); } }
  303.  
  304. .fadein {
  305.   opacity: 0; }
  306.  
  307. .btn-secondary {
  308.   border-width: medium;
  309.   border-radius: 0;
  310.   padding: .6rem 1.2rem;
  311.   font-size: 1.2rem;
  312.   text-transform: uppercase;
  313.   margin: 1rem;
  314.   border-color: #fa0101;
  315.   background-color: #fa0101;
  316.   color: white; }
  317.  
  318. .btn-secondary:hover {
  319.   border-color: #004fa5;
  320.   background-color: #004fa5; }
  321.  
  322. .navbar {
  323.   font-size: 1.6rem;
  324.   background-color: #fff;
  325.   color: #001324;
  326.   font-weight: 700;
  327.   padding: 10px 80px 10px 80px;
  328. }
  329.  
  330. .navbar-toggle {
  331.   display: none; }
  332.  
  333. .main-nav li {
  334.   margin-left: 3rem;
  335.   text-transform: uppercase; }
  336.  
  337. .call {
  338.   color: black;
  339.   border: 2px solid; }
  340.  
  341. @media screen and (max-width: 1000px) {
  342.   .main-nav {
  343.     display: none; }
  344.   .main-nav li {
  345.     margin: 10px 0;
  346.     text-align: center; }
  347.   .main-nav li:first-child {
  348.     padding-top: 20px; }
  349.   .call {
  350.     display: none; }
  351.   .navbar-toggle {
  352.     display: block;
  353.     font-size: 2rem;
  354.     position: absolute;
  355.     top: 11px;
  356.     color: aqua;
  357.     right: 15px; }
  358.   .active {
  359.     display: block; } }
  360.  
  361. .hero {
  362.   background: url("https://tsoimageprod.azureedge.net/sys-master-hybrismedia/h2d/h88/8804318281758") no-repeat;
  363.   background-size: cover;
  364.   background-position: 40% 50%;
  365.   z-index: 0;
  366.   position: relative; }
  367.  
  368. @media screen and (max-width: 1000px) {
  369.   .hero {
  370.     background-size: contain;
  371.     background-position: 0% 0%; } }
  372.  
  373. @media screen and (max-width: 1000px) {
  374.   .hero {
  375.     height: none; } }
  376.  
  377. .hero_details {
  378.   display: grid;
  379.   grid-template-columns: 25% 75%;
  380.   background: rgba(0, 0, 0, 0.7); }
  381.  
  382. @media screen and (max-width: 1650px) {
  383.   .hero_details {
  384.     grid-template-columns: 30% 70%; } }
  385.  
  386. @media screen and (max-width: 1850px) {
  387.   .hero_details {
  388.     grid-template-columns: 30% 70%; } }
  389.  
  390. @media screen and (max-width: 1550px) {
  391.   .hero_details {
  392.     grid-template-columns: 50% 40%; } }
  393.  
  394. @media screen and (max-width: 1000px) {
  395.   .hero_details {
  396.     display: grid;
  397.     grid-template-columns: 100%;
  398.     background: rgba(0, 0, 0, 0.7); } }
  399.  
  400. .hero_info {
  401.   background-color: rgba(244, 7, 7, 0.9);
  402.   color: #f8f9fa;
  403.   padding: 50px 0 0 50px;
  404.   margin-left: 100px;
  405.   font-size: 1.8rem; }
  406.  
  407. @media screen and (max-width: 1000px) {
  408.   .hero_info {
  409.     grid-row: 2;
  410.     margin-left: 0px; } }
  411.  
  412. .hero_info_container {
  413.   margin-bottom: 6rem; }
  414.  
  415. .detail_container {
  416.   padding-bottom: 10px;
  417.   display: inline-block;
  418.   border-bottom: 3px solid #f8f9fa; }
  419.  
  420. .line-out {
  421.   border-bottom: 1px solid #f8f9fa;
  422.   display: block; }
  423.  
  424. .detail_list ul {
  425.   text-align: right;
  426.   margin-top: 20px; }
  427.  
  428. .details_list_li {
  429.   font-weight: 200;
  430.   padding-right: 30px;
  431.   margin-bottom: 5px;
  432.   font-size: 15px; }
  433.  
  434. .direction {
  435.   font-weight: 500;
  436.   margin: 20px 0 auto auto; }
  437.  
  438. .number_display {
  439.   font-weight: 500;
  440.   font-size: 2.5rem; }
  441.  
  442. @media screen and (max-width: 1000px) {
  443.   .number_display {
  444.     font-size: 1.5rem; } }
  445.  
  446. .hero_headline {
  447.   color: #f8f9fa; }
  448.  
  449. .hero_title footer {
  450.   font-weight: 100;
  451.   padding-bottom: 1rem; }
  452.  
  453. .hero_headline_container {
  454.   max-width: 1000px; }
  455.  
  456. @media screen and (max-width: 1000px) {
  457.   .hero_headline {
  458.     grid-row: 1;
  459.     margin-top: 100px;
  460.     text-align: right;
  461.     padding: 20px; } }
  462.  
  463. .hero_btn {
  464.   margin: auto; }
  465.  
  466. .main-service p {
  467.   font-size: 1.3rem;
  468.   padding-left: 1rem;
  469.   padding-right: 1rem;}
  470.  
  471. .main-service h3 {
  472.   font-size: 1.8rem;
  473.   text-transform: uppercase;
  474.   padding-bottom: .4rem;
  475.   color: var(--orange);
  476.   font-weight: 700; }
  477.  
  478. .main-service i {
  479.   margin-bottom: 1rem; }
  480.  
  481. .main-service-title h1 {
  482.   text-transform: uppercase; }
  483.  
  484. .customer-care-title h1 {
  485.   text-transform: uppercase; }
  486.  
  487. .customer-care-title {
  488.   background-color:white; ;
  489. }
  490.  
  491. .customer-care-card {
  492.   background-color: white; }
  493.  
  494. .customer-care-card h1 {
  495.  }
  496.  
  497. .hubungi-kami {
  498.   background-color: white;
  499.   padding-left: 80px;
  500.   padding-right: 80px;}
  501.  
  502. .hubungi-kami h1 {
  503.   margin-top: 5rem;
  504. }
  505.  
  506. .hubungi-kami img {
  507.   width: 50%; }
  508.  
  509. .mar0{
  510.   margin: 0;
  511. }