:root{
	--orange: #fed201;
}

.images-content{
	height: var(--h);
	background: green;
	color: white;
	background-size: cover;
	background-position: center;
	position: relative;
}

.card{
  margin-bottom: 24px !important;
}

.card{
  box-shadow: 0 0 10px rgba(125,125,125,0.1);
  border-radius: 10px;
  overflow: hidden;
}

.title-header{
  color: white;
  text-shadow: 0 0 20px rgba(125,125,125,0.4);
}

.head-info{
  color: white;
  text-shadow: 0 0 20px rgba(125,125,125,0.4);
}

.nav-orange{
	display: flex;
	align-items: center;
  	background-color: #fed201;
	box-shadow: 0 10px 5px rgba(125,125,125,0.5);
}

.nav-orange a:hover{
  transition: 0.5s;	
}

.draggable {
      cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

.draggable:active {
    cursor: url(images/grabbing.cur);
    cursor: -webkit-grabbing;
    cursor:    -moz-grabbing;
    cursor:         grabbing;
}


.nav-orange a:hover{
  color: white;
  font-weight: bold;
  font-size: 14pt;	
}

.nav-orange a.active{
  color: white;
  font-weight: bold;
  font-size: 14pt;
}

.nav-orange a{
  color: #333;
}

.grid-2-column{
  display: flex;
  justify-content: center;
  align-items: center;
}

.images-content .harga{
	font-size: 14pt;
	position: absolute;
	bottom: 10px;
	left: 20px;
}

.images-content .status{
	font-size: 14pt;
	position: absolute;
	bottom: -18px;
	right: 20px;
	color: #333;
	font-size: 12pt;
	font-weight: bold;
	padding: 5px 10px;
	border-radius: 20px;
	background: #fed201;
	border: 4px solid white;
}

html, body{
	overflow-x: hidden;
}

.head-nav{
	padding: 16px;
	box-shadow: 0 0 5px rgba(125,125,125,0.5);
}

.form-search{
	border-radius: 20px;
	border: 1px solid #ddd;
	font-size: 12pt;
	padding: 8px 16px;
	padding-right: 50px;
	outline: none;
	width: 100%;
}

.search-icon{
	position: absolute;
	right: 6px;
	border-radius: 20px;
	top: 5px;
	padding: 8px 10px;
	background-color: #fed201;
}

.title-header{
	font-size: 50pt;
}

.icon-daftar{
	margin: 5px 10px;
	padding: 15px;
	background: #fed201;
	border-radius: 50%;
}

.agen-info button{
  border: none;
  outline: none;
  font-size: 9pt;
  padding: 5px 10px;
  border-radius: 10px;
  background: #fed201;
  width: 100%;
  margin-bottom: 10px;
}

#header{
	height: 80vh;
	background-size: cover;
	background-position: bottom;

}

.agen{
  display: grid;
  grid-template-columns: 60px auto;
}

.agen div:nth-child(2){
  padding: 10px;
}

.agen div:nth-child(2) h4 {
  font-size: 14pt;
}

.agen .foto-agen{
  height: 60px;
  width: 60px;
  background-color: green;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
}

.navbar-nav li{
	font-size: 12pt;
}

.card-content{
  width: 360px;
}

.icon-menu{
  font-size: 20px;
  color: #fed201;
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  max-height: 40px;
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1px solid #fda;
  cursor: pointer;
}

.mobile-hide{
	display: inline-flex !important;
}

.head-menu{
	display: grid;
	grid-template-columns: 120px auto 180px;
}


.lokasi{
  display: grid;
  margin-top: 20px;
  grid-template-columns: auto auto auto auto;
}

.lokasi a{
  font-size: 12pt;
  padding: 6px 8px;
  margin-bottom: 5px;
  font-weight: 300 !important;
}

.footer-top a.active{
	padding-bottom: 10px;
	border-bottom: 2px solid var(--orange)
}

@media only screen and (max-width: 600px) {

	.nav-orange a.active{
		font-size: 12pt;
	}

	.nav-orange a:hover{
		font-size: 12pt;
	}

	.nav-orange a{
		font-size: 10pt;
	}

	.mobile-hide{
		display: none !important;
	}

	.head-menu{
		display: grid;
		grid-template-columns: 120px auto 120px;
	}

	.title-header{
		font-size: 28pt;
	}
	.head-info{
		font-size: 14pt;
	}
	#header{
		height: 300px;
	}
	.why-me{
		width: 250px;
		max-width: 250px;
	}
	.title-why-me{
		font-size: 14pt;
	}

	.lokasi{
	  display: grid;
	  margin-top: 20px;
	  grid-template-columns: auto auto ;
	}

}

#header{
  position: relative;
}

#header::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(2,0,36);
  background: linear-gradient(0deg, rgba(2,0,36,0.5) 0%, rgba(255,255,255,0.1) 100%); 
}

.why-me{
	width: auto;
}

@media only screen and (min-width: 600px) {

	.card-content{
	  width: auto;
	}

}


.footer-top a{
	color: #fff;
	font-size: 14pt;
	margin-bottom: 10px;
	text-decoration: none;
	font-weight: bold;
	margin: 0 10px;
}

.footer-top{
  background-color: #404042;
  color: #fff;
  padding: 25px 0;
}

.foto{
	background-image: var(--foto);
	background-size: cover;
}

.agen .foto{
	border-radius: 50%;
	width: 60px;
	height: 60px;
}

footer{
  background-color: #231f20;
  color: white;
}

footer{
  display: block;
  padding: 25px 8px;
}

.icon-bottom{
  font-size: 16pt;
  margin: 0 5px;
  cursor: pointer;
}

.lokasi a{
  text-decoration: none;
  color: white;
  font-size: 12pt;
}

.btn-header{
  padding: 10px 18px;
  border-radius: 20px;
  outline: none;
  border: none;
  font-size: 16pt;
  margin: 0 10px;
  box-shadow: 0 0 20px rgba(125,125,125,0.5);
}

.orange{
  background-color: var(--orange)
}

.icon-menu{
  color: #3d3;
  border: 1px solid #3d3;
  box-shadow: 0 0 14px rgba(125,125,125,0.1)
}

.form-search{
  box-shadow: 0 0 14px rgba(125,125,125,0.1)
}

ol li{
  margin-bottom: 10px;
}

.kontak-pin span{
  display: inline-flex;
  width: 60px;
  height: 60px;
  background: var(--orange);
  color: #333;
  font-size: 16pt;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  margin-bottom: 20px;
}
@keyframes ldio-6xpymcz56 {
  0% { opacity: 1 }
  100% { opacity: 0 }
}
.ldio-6xpymcz56 div {
  left: 94px;
  top: 48px;
  position: absolute;
  animation: ldio-6xpymcz56 linear 1s infinite;
  background: #fe718d;
  width: 12px;
  height: 24px;
  border-radius: 6px / 12px;
  transform-origin: 6px 52px;
}.ldio-6xpymcz56 div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -0.9166666666666666s;
  background: #fe718d;
}.ldio-6xpymcz56 div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -0.8333333333333334s;
  background: #fe718d;
}.ldio-6xpymcz56 div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.75s;
  background: #fe718d;
}.ldio-6xpymcz56 div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.6666666666666666s;
  background: #fe718d;
}.ldio-6xpymcz56 div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.5833333333333334s;
  background: #fe718d;
}.ldio-6xpymcz56 div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.5s;
  background: #fe718d;
}.ldio-6xpymcz56 div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.4166666666666667s;
  background: #fe718d;
}.ldio-6xpymcz56 div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.3333333333333333s;
  background: #fe718d;
}.ldio-6xpymcz56 div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.25s;
  background: #fe718d;
}.ldio-6xpymcz56 div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.16666666666666666s;
  background: #fe718d;
}.ldio-6xpymcz56 div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.08333333333333333s;
  background: #fe718d;
}.ldio-6xpymcz56 div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
  background: #fe718d;
}
.loadingio-spinner-spinner-2lqweg6m29r {
  width: 200px;
  height: 200px;
  display: inline-block;
  overflow: hidden;
  background: #ffffff;
}
.ldio-6xpymcz56 {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
}
.ldio-6xpymcz56 div { box-sizing: content-box; }
/* generated by https://loading.io/ */

.list-menu{
  margin: 10px 0;  
}

.list-menu span{
  cursor: pointer;
  display: block;
}

.grid-col-2 {
  display: grid;
  grid-template-columns: 200px auto;
}

@media screen and (max-width: 600px){
  .grid-col-2 {
    display: grid;
    grid-template-columns: auto;
  }
}

.lighten a{
  cursor: pointer;
  transition: 0.3s;
  background-color: white;
}

.lighten a:hover{
  background-color: var(--orange)
}

.d-inline{
  display: inline-block;
  width: auto !important;
}