:root {
  --var_biru: #1e90ff;
  --var_putihgading: #f4edc2;
  --var_hitam: #0d0628;
  --var_hijaulime:#b2e92e;
}

.w100{
	width: 100% !important;
}
.w90{
	width: 90% !important;
}
.w80{
	width: 80% !important;
}
.w70{
	width: 70% !important;
}
.w60{
	width: 60% !important;
}
.w50{
	width: 50% !important;
}
.w40{
	width: 40% !important;
}
.w30{
	width: 30% !important;
}
.w20{
	width: 20% !important;
}
.w10{
	width: 10% !important;
}

.mt10{
	margin-top: 10% !important;
}

.lh10{
	line-height: 10px;
}
.lh10{
	line-height: 15px;
}
.font_antiquewhite{
	background: #f0f8ff00;
	letter-spacing: 2px;
	color: var(--var_putihgading)!important
}

.font_antiqueblack{
	color: var(--var_hitam)!important;
}

.btn_mobile_menu{
	display: none;
	position: absolute;
	right: 5px;
	color: #f1f1f1 !important;
	font-size: 30px;
}
.pembungkus_menu_mobile{
	margin-top: 4px;
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
/*	background-color: var(--var_hijaulime);*/
/*	background-color: #f2f2f2;*/
background: linear-gradient(179deg, rgb(64 107 88) 0%, rgb(89 126 51) 100%);
/*	background-color: rgb(52 52 52 / 90%);*/
	overflow-x: hidden;
	transition: 0.5s;
/*	padding-top: 60px;*/
}
.menu_mobile{
	display: none;
}
.head_menu{
	display: flex;
	width: 100%;
	background: #407a6d;
	padding: 10px 8px;
	margin-bottom: 20px;
	font-size: 28px;
	justify-content: space-between;
	align-items: center;
}
.head_menu h2 {
	margin-left: 10px;
	font-size: 11px;
	letter-spacing: 2px;
	font-weight: 800;
	line-height: 14px;
	font-family: Poppins, sans-serif;
	color: var(--var_hitam);
}
.head_menu .left_title{
	display: flex;
	align-items: center;
}
.closebtn{
	color: #F44336 !important;
}

.menu_mobile ul li{
	/*font-family: Poppins, sans-serif;
	box-shadow: 2px 2px 5px #00000047, -2px -4px 5px #00000047;
	cursor: pointer;
	padding: 12px;
	margin: 0px 15px;
	margin-bottom: 3px;
	background: #407a6d;
	border-radius: 8px 0px 8px 8px;
	border: 1px solid #00968894;
	transition: 0.3s;
	display: flex;
	justify-content: space-between;
	align-items: center;*/
}
.menu_mobile ul a {
	margin-left: 10px;
	font-size: 12px;
	color: white;
}
@media screen and (max-width: 992px) {

}

@media screen and (max-width: 600px) {
	.rs_hide {
		display: none !important;
	}
	header .menu_atas{
		justify-content: center !important;
	}
	.lokasi {
		width: 295px !important;
	}
	.btn_mobile_menu{
		display: block !important;
	}
	.menu_mobile{
		display: block !important;
	}
	.layers__pembungkus_katagori {
		margin-top: 77px !important;
		height: 35vh !important;
		min-height: 210px !important;
	}
	.pencarian_ontop{
		position: absolute !important;
		top: 0px !important;
		width: 90% !important;
	}
	ul.list_kategori_index li{
		margin: 5px 5px !important;
		width: 100px !important;
		height: 100px !important;
	}
	.r_lebar_4 {
		width: 100% !important;
		padding: 15px 10px ;
		display: none;
		animation: fadeIn 1s forwards linear;
		display: inline-block;
	}
	.footer .baris {
		display: flex;
		align-items: flex-start !important;
		height: fit-content !important;
		color: var(--var_putihgading);
		flex-direction: column;
	}
	.footer .baris .footer_kanan {
		width: 100% !important;
		display: flex;
		align-items: flex-start;
		text-align: left;
		padding: 35px;
		justify-content: space-around;
		flex-direction: column;
	}
	.footer .baris .footer_kiri {
		text-align: left;
		width: 100% !important;
/*		background: #9dd90d;*/
		height: fit-content;
	}
}



 /*responsive atribut*/
  .form_grup{
    margin: 10px;
    position: relative;
  }
  .baris_flex{
    width: 100%;
    display: flex;
  }
  .r_lebar_50{
    width: 50%;
  }
  .r_lebar_10{
    width: 100%;
  }
  textarea,  input[type="text"],  input[type=email],  input[type=password],  input[type=button], .listsearch-input-item input[type="text"] {
    float: left;
    border: 1px solid #e5e7f2;
    background: #f9f9f9;
    width: 100%;
    padding: 15px 20px 15px 45px;
    border-radius: 4px;
    color: var(--var_hitam);
    font-size: 12px;
    -webkit-appearance: none;
    outline: none;
    overflow: hidden;
    z-index: 1;
  }

  .input_grup{
  	position: relative;
  }
  .input_grup ion-icon{
  	position: absolute;
  	top: 10px;
  	left: 10px;
  }
  textarea.input,  input[type="text"].input,  input[type=email].input,  input[type=password].input,  input[type=button].input, .listsearch-input-item input[type="text"].input {
    height: 35px;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-bottom: 15px;
    padding: 0 5px 0 33px;
    font-size: 1rem;
  }

.form_grup{
	margin: 10px;
	position: relative;
}
.baris_flex{
	width: 100%;
	display: flex;
}
textarea,  input[type="text"],  input[type=email],  input[type=password],  input[type=button], .listsearch-input-item input[type="text"] {
	float: left;
	border: 1px solid #e5e7f2;
	background: #f9f9f9;
	width: 100%;
	padding: 15px 20px 15px 45px;
	border-radius: 4px;
	color: var(--var_hitam);
	font-size: 12px;
	-webkit-appearance: none;
	outline: none;
	overflow: hidden;
	z-index: 1;
}
/*responsive atribut end*/



/*detail*/

@media screen and (max-width: 600px) {
		.pembungkus_reting{
			display: none;
		}
		.pembungkus_header_detail .header_detail .page_detail {
/*			background: var(--var_hijaulime) ;*/
			background: linear-gradient(179deg, rgb(64 107 88) 0%, rgb(89 126 51) 100%);
			width: 100%;
			height: 25vh;
			position: absolute;
			bottom: 0px;
			display: flex;
/*      justify-content: space-between;*/
      align-items: center;
    }
    .pembungkus_header_detail .header_detail .page_detail .data_atas {
      width: 100%;
      display: flex;
      line-height: 17px;
      position: relative;
      padding: 10px 20px;
      justify-content: flex-start;
/*      align-items: center;*/
/*      flex-direction: column;*/
    }
    .pembungkus_header_detail .header_detail .page_detail .data_atas .Judul_page{
    	font-size: 20px !important;
    }
    .pembungkus_header_detail .header_detail .page_detail .data_atas .upt_data {
      margin-bottom: 15px;
    }
    .pembungkus_detail {
      max-width: 390px !important;
      width: 100%!important;
      flex-direction: column !important;
    }
    .menu_detail {
    	padding-left: 0px;
    	padding-right: 0px;
    }
    .menu_detail .bagikan.web{
      display: none !important;
    }
    section.baris_menu {
      top: 70px!important;
    }
    .menu_detail .bagikan_m {
      color: white;
      font-size: 24px;
      display: flex;
      align-items: center;
      border: 1px solid;
      border-radius: 4px;
      margin-left: 10px;
      width: 50px;
      justify-content: center;
    }
    .konten_detail_kiri {
      margin: 0px;
      width: 100% !important;
    }

    .konten_detail_kanan {
      margin: 0px;
      width: 100% !important;
    }
    .filter-buttons .aksi {
    	flex-direction: column;
    	display: none;
    }
    .detail_fasilitas{
      display: flex;
      padding: 10px;
      justify-content: flex-start;
      flex-wrap: wrap;
    }
    .detail_fasilitas .fasilitas {
      width: 50%;
      display: flex;
      align-items: center;
    }
    .detail_fasilitas .fasilitas ion-icon {
      font-size: 20px;
      color: #f4edc2;
      margin-right: 5px;
      margin-left: 15px;
      margin-bottom: 5px;
      background: #406b58;
      padding: 8px;
      border-radius: 20px;
    }

    .mengunjungi ion-icon.label, .melihat ion-icon.label {
      position: absolute;
      top: 8px;
      right: 12px;
      font-size: 30px;
      color: white;
    }
    .mengunjungi, .melihat {
      padding: 20px 5px 5px;
    }
    .konten_detail_kiri .img_detail {
      width: 390px;
    }
    .menu_detail ul li {
      padding: 10px;
    }
    .hasil_review .skor {
      width: 90px;
    }
    .hasil_review .skor span {
      width: 45px;
      height: 45px;
      font-size: 18px;
    }
    .hasil_review .skor .bintang ion-icon {
      font-size: 12px;
    }
    .pesan_user {
      margin: 20px 10px;
    }
    .pesan_user .pesan .reting span {
      width: 30px;
      height: 30px;
      font-size: 12px;
    }
    .konten_detail_kiri .kotak_detail .detail p {
      margin-top: 15px;
    }
    .pesan_user .foto ion-icon {
      font-size: 14px;
    }
    .pesan_user .pesan {
      margin: 0px 0px 0px 20px;
    }
  }
  @media screen and (max-width: 320px) {
    .pembungkus_detail {
      max-width: 230px !important;
      width: 100% !important;
      flex-direction: column !important;
    }
    .konten_detail_kiri .img_detail {
      width: 270px !important;
    }
  }

/*end detail*/