/* ======================== GENERAL SETTING ================================ */

html,body {
	background: white;
	margin: 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 12pt;
}

ul { 
	list-style-position: outside;
	list-style-type: none;
}

li:before { 
	content: '»'; 
	margin-left: -2.2rem; 
	margin-right: 1.2rem; 
	font-weight: 800;
} 

.nobul li:before { 
	content: '';
}
  
sup{font-size:1rem;}

iframe {
	width: -webkit-fill-available;
    height: -webkit-fill-available;
	border-radius: 10px;
}

a {
	text-decoration: none;
	color: unset;
}

.content {
	max-width: 1350px;
	margin: auto;
	padding: 1rem 6rem;
}

#scroll-button {
		display: inline-block;
		background-color: #FF9800;
		width: 50px;
		height: 50px;
		text-align: center;
		border-radius: 8px;
		position: fixed;
		bottom: 30px;
		right: 30px;
		transition: background-color .8s, 
		opacity 1.2s, visibility 1.2s;
		opacity: 0;
		visibility: hidden;
		z-index: 1000;
	}
	
	#scroll-button::after {
		content: "\f077";
		font-family: FontAwesome;
		font-weight: normal;
		font-style: normal;
		font-size: 2em;
		line-height: 50px;
		color: #fff;
	}
	
	#scroll-button:hover {
		cursor: pointer;
		background-color: #333;
	}
	
	#scroll-button:active {
		background-color: #555;
	}
	
	#scroll-button.showMe {
		transition: background-color .8s, 
		opacity 1.2s, visibility 1.2s;
		opacity: 0.85;
		visibility: visible;
	}

/* ======================== HEADER SETTING ================================ */

#header {
	background: linear-gradient(0deg, #a9a9a9, #bbbbbb 40%, #c5c5c5);
}

#logo {
	max-width: 50%;
    margin: auto;
}

#logo img {
	max-width: 400px;
	margin: auto;
    display: flex;
}

.topnav {
	display: flex;
    justify-content: center;
	align-items: center;
    max-width: 900px;
    font-size: 1.5rem;
    font-weight: 500;
    margin: auto;
}

.topnav .icon_menu {
  display: none;
}

.menu_item {
	margin: auto;
	font-size: 1.4rem;
}

/* ======================== BANNER SETTING ================================ */

.banner {
	position: relative;
}

.banner_img {
	display: flex;
    overflow-x: hidden;
    justify-content: center;
}

.banner_img img {
	min-width: 480px;
}

#banner_text_container {
	display: table;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: -webkit-fill-available;
}

#banner_button_row, #banner_text_row {
	display: table-row;
	width: 100%;
}

.banner_button {
	float: right;
	font-size: 1rem;
    font-weight: 800;
    padding: 1rem 1rem;
}

.banner_text {
    max-width: 620px;
    background-color: #ffffff90;
    padding: 1rem;
	font-size: 1rem;
    font-weight: 500;
	float: right;
}

/* ======================== SECTION SETTING ================================ */

.section {
	background-color: #e8e8e8;
	padding: 2rem 0rem;
}

.section_tbl {
	display: flex;
}

.section_cell {
	padding: 0 7px;
	position: relative;
}

.section_cell:first-child {
	padding-left: 0;
}

.section_cell:last-child {
	padding-right: 0;
}

.section_cell img {
	width: 100%;
}

.section_button {
	color: white;
	background-color: black;
	width: -webkit-fill-available;
    padding: 10px 33px;
    margin: auto;
    max-width: fit-content;
	text-align: center;
}


#anniv_tbl {
	width: 100%;
}

#anniv_cell_1 {
	width: 47%;
	padding-right: 0;
}

#anniv_cell_2, #contact_cell_2, #about_cell_2,#tiktok_cell_2 {
	width: 53%;
    background-color: #fff;
    margin: 20 0 20 0;
    padding: 30px;
    font-weight: 400;
    display: flex;
    align-items: center;
    font-size: 1.2rem;
	border-radius: 0 12px 12px 0;
}

#anniv_cell_2 img {
	width: 30%;
    top: -96px;
    position: absolute;
    right: 22px;
}

#anniv_title {
	font-weight: 600;
    font-size: 3.5rem;
    line-height: 90%;
}

#anniv_title b {
	font-weight: 900;
    font-size: 4rem;
}

#learn_more {
	position: absolute;
    right: 36px;
    bottom: -22px;
	font-weight: 600;
}

#tiktok_cell_1 {
    background-color: #fff;
    margin: 20 0 20 0;
    padding: 30px;
    font-weight: 400;
    display: flex;
    align-items: center;
    font-size: 1.2rem;
	border-radius: 12px 0 0 12px;
}

.info_snk_text {
	font-weight: 500;
    line-height: 200%;
}

.info_snk_text li {
	padding-bottom: 12px;
}

.subtitle_snk {
	font-size: 2.2rem;
}

#events {
	font-size: 1.2rem;
}

.periode {
	margin: 0;
    background: linear-gradient(90deg, #f0a540, #f3b865 40%, #f0a540);
    width: fit-content;
    padding: 20px;
    line-height: 80%;
    font-weight: 700;
	border-radius: 0.7rem;
}

.info_title {
	margin: auto;
    padding: 12px 40px;
    line-height: 90%;
    width: fit-content;
    background: linear-gradient(90deg, #f0a540, #f3b865 40%, #f0a540);
    border-radius: 0px 0px 1rem 1rem;
	min-width: 25%;
    text-align: center;
	font-weight: 800;
	font-size: 2rem;
}

.info_container {
	margin: 50 0;
	display: flex;
	justify-content: space-evenly;
}

.info_cell_column {
	width: 30%;
	margin-bottom: 50px;
}

.info_cell_icon {
	max-width: 150px;
    padding: 10px 40px;
    margin: auto;
    display: flex;
}

.info_row {
	display: flex;
	width: 100%;
	justify-content: center;
	flex-wrap: wrap;
}

.info_cell_img {
	padding: 1rem 3rem;
}

.info_cell_img img, .info_cell_icon img {
    margin: auto;
}

.info_cell_text {
	font-size: 1.2rem;
    font-weight: 700;
    padding: 14px 1rem;
    text-align: center;
	margin: auto;
}

.steps {
	background-color: #fff;
    border-radius: 1.2rem;
    margin: 30px 0;
}

.info_steps_text {
	font-size: 1.2rem;
    font-weight: 500;
    padding: 2rem;
    text-align: center;
}

#location_address {
	column-count: 2;
    column-gap: 1.2rem;
}

.location_detail {
	background-color: #fff;
    border-radius: 1rem;
    padding: 1.5rem;
    font-size: 1.1rem;
    font-weight: 500;
    display: inline-block;
    margin: 0.7rem 0;
	width: -webkit-fill-available;
}

.city_name {
	font-size: 2rem;
    font-weight: 800;
}

#contact_cell_2 {
	
}

#contact_text_wrapper {
	padding: 50px;
    padding-top: 0;
    padding-bottom: 1.2rem;
}

#contact_whatsapp {
	display: flex;
    align-items: center;
	border-radius: 12px;
	width: 80%;
    column-gap: 13px;
    padding: 20px;
}

#contact_whatsapp_wrapper {
	display: flex;
    align-items: center;
	column-gap: 0.8rem;
}

#contact_wa_text {
	line-height: 150%;
    width: -webkit-fill-available;
	display: inline-grid;
}

#contact_click1 {
	float: left;
    font-size: 1.5rem;
}

#contact_click2 {
	font-size: 2rem;
    font-weight: 600;
    float: left;
}

#contact_band {
	background-color: #000;
}

.band_container {
	display: flex;
    justify-content: space-evenly;
}

.band_cell {
	color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    max-height: 114px;
}

.band_text {
	max-width: 200px;
}

.band_cell_img {
	padding: 20px;
}

.band_cell_img img {
	width: 100%;
}

#location_map img {
	width: 100%;
}

#aboutus_text {
	font-size: 1.2rem;
    font-weight: 500;
}

#about_cell_2 {
}

#about_cell_2 div {
	padding: 0 20px;
    font-size: 1.2rem;
}

#about_cell_2 ul {
	padding-top: 0;
	padding-bottom: 0;
}

.about_text_img {
	float: right;
    width: 45%;
    margin-left: 30px;
    margin-top: -120px;
}

.about_text_img img {
	width: 100%;
}

#about_bottom_img img {
	width: 100%;
	border-radius: 1rem;
}

.about_vm_title {
	font-size: 1.5rem;
    font-weight: 800;
}

.plus {
	position: absolute;
    bottom: 16px;
    right: 16px;
    width: 50px;
    height: 50px;
    margin-right: 8px;
    color: #fff;
    background-color: #000;
    border-radius: 50%;
    text-align: center;
	font-size: 2.2rem;
}

.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }

.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.mytext {
	font-size: 1.5rem;
	font-weight: 800;
	bottom: 0px;
}

#footer img {
	width: 100%;
}

#our_brands {
	background-color: #000;
}

#brands {
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.brand_logo {
	
}

#location {
	display: flex;
    background-color: white;
    border-radius: 12px;
	width: 100%;
	flex-wrap: wrap;
}

#berlangganan {
	background: linear-gradient(90deg, #f0a540, #f3b865 40%, #f0a540);
}

#langganan_container {
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}

#langganan_text {
	font-size: 16pt;
	font-weight: 500;
	width: -webkit-fill-available;
    max-width: 808px;
	text-align: center;
	margin: auto;
}

#submit_container {
	display: flex;
    align-items: center;
}

#langganan_input_email, #langganan_input_nama {
	width: 100%;
    margin: 12px;
    align-items: center;
    display: flex;
}

#langganan_input_email img,  #langganan_input_nama img {
	width: 44px;
    position: absolute;
    margin-left: 11px;
}

::placeholder {
  color: #afafaf;
  opacity: 1;
}

#email_address {
	padding: 16px;
	padding-left: 60px;
    font-size: 16pt;
    border-radius: 8px;
    border: none;
    width: 450px;
}

#nama {
	padding: 16px;
	padding-left: 60px;
    font-size: 16pt;
    border-radius: 8px;
    border: none;
    width: 350px;
}

#mail_icon {
	position: relative;
    color: #afafaf;
    left: 28px;
	width: 0px;
}

#langganan_button {
	width: -webkit-fill-available;
    max-width: 101px;
    align-items: center;
}

#subscribeplayworks {
	margin: auto;
	width: fit-content;
}

#langganan_submit {
	width: 100%;
    padding: 16px;
    background-color: #000000;
    color: #ffffff;
    font-size: 16pt;
    border: none;
    border-radius: 8px;
}

#map_image_title {
	width: -webkit-fill-available;
    margin: auto;
    max-width: fit-content;
	font-weight: 800;
	font-size: 28pt;
	text-align: center;
}

#map_image_subtitle {
	width: -webkit-fill-available;
    margin: auto;
    max-width: fit-content;
	font-weight: 400;
	font-size: 16pt;
	text-align: center;
}

#map_images {
	padding: 20px;
    width: -webkit-fill-available;
    margin: auto;
	max-width: 750px;
	justify-content: center;
    display: inline-grid;
}

#map_image_container {
	width: inherit;
	margin: auto;
}

#map_container {
	margin: auto;
    border-radius: 10px;
    width: -webkit-fill-available;
    max-width: 520px;
    padding: 14px;
    height: 510px;
}

#whatsapp {
	margin: auto;
	max-width: 600px;
	margin-top: 30px;
}

#ecommerce {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
    justify-content: center;
}

.button {
	margin: auto;
    max-width: 730px;
    margin-top: 30px;
}

.click_button {
	background: #3eafff;
    padding: 5px 10px;
    border-radius: 6px;
    color: #ffffff;
    font-weight: 600;
}

#our_ecommerce, #our_location {
	background-color: #e8e8e8;
}

#our_location {
	padding-top: 50px;
}

#social_media {
	display: flex;
	max-width: 1200px;
	flex-wrap: wrap;
	align-items: center;
    justify-content: center;
	margin: auto;
}

#follow_us {
	background-color: #dcdcdc;	
}

/* ======================== FOOTER SETTING ================================ */

.ecommerce {
	max-width: 350px;
	margin-top: 22px;
}

.horizon {

}

.hor1 {
	position: relative;
	background-color: black;
    height: 2px;
    border: none;
	border-radius: 2px;
    top: 5px;
}

.hor2 {
	position: relative;
	background: #d90000;
    height: 8px;
    border: none;
	border-radius: 8px;
	top: -12px;
    max-width: 200px;
}


/* ======================== FOLLOW US SETTING ================================ */

.icon {
	border: 1px dashed #000000;
	border-radius: 50%;
	padding: 2%;
    max-width: 55px;
    max-height: 55px;
	display: flex;
	margin: 12px 40px;
}

@media screen and (max-width: 1514px) {
	#map_container {
		max-width: none;
		width: 100%;
	}
	#map_images {
		padding: 60px 30px;
		max-width: none;
		display: flex;
		flex-wrap: wrap;
	}
}

@media screen and (max-width: 1360px) {
	html,body {
		font-size: 10pt;
	}
}

@media screen and (max-width: 1167px) {
	html,body {
		font-size: 9pt;
	}
	.about_text_img {
		width: 55%;
	}
	#submit_container {
		flex-wrap: wrap;
	}
	
	#langganan_input_email, #langganan_input_nama {
		margin: 10 0;
	}
	
	#submit_container {
		flex-wrap: wrap;
		justify-content: center;
	}
	
	#email_address, #nama {
		width: -webkit-fill-available;
	}
		
}

@media screen and (max-width: 945px) {
	.content {
		padding: 2rem 2.5rem;
	}
	.topnav {
		font-size: 1.2rem;
	}
	.info_steps_text {
		font-size: 1rem;
	}
	.info_cell_text {
		font-size: 1rem;
	}
	.mytext {
		font-size: 2rem;
	}
	.about_text_img {
		width: unset;
		float: unset;
		margin-left: unset;
		margin-top: unset;
	}
}

@media screen and (max-width: 920px) {
	.section_tbl {
		flex-wrap: wrap;
	}
	.section_cell {
		padding: 20px 0;
		width: 100%;
	}
	.plus {
		margin: 0 7% 10%;
	}
	
	#anniv_cell_1 {
		width: 100%;
	}
	
	.section_cell img, #tiktok_cell_1 {
		border-radius: 20px;
	}
	
	.info_container {
		display: block;
	}
	
	.info_cell_column {
		width: 80%;
		margin-left: auto;
		margin-right: auto;
	}
	
	#anniv_cell_2, #contact_cell_2, #about_cell_2, #tiktok_cell_2 {
		width: 100%;
		margin-top: -40px;
		border-radius: 0px 0px 20px 20px;
		display: block;
	}
	
	#contact_whatsapp_wrapper img {
		border-radius: 0;
	}
	
	#learn_more {
		position: unset;
		margin-top: 40px;
		margin-bottom: 40px;
	}
	
	#anniv_title {
		line-height: 120%;
	}
}

@media screen and (max-width: 600px) {
	.topnav {
		display: block;
		line-height: 4rem;
		font-size: 2rem;
	}
	/*.topnav a:not(:first-child) {display: none;}*/
	.topnav a {display: none;}
	.topnav a.icon_menu {
		float: right;
		display: block;
		position: absolute;
		right: 31px;
		top: 27px;
	}
	.topnav.responsive .icon_menux {
		position: absolute;
		right: 0;
		top: 7px;
	}
	.topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
	.banner_text {
		padding: 0.4rem 0.7rem;
		font-size: 0.7rem;
	}
	.info_steps_text {
		font-size: 1.3rem;
		line-height: 2rem;
	}
	#location_address {
		column-count: 1;
	}
	#location_detail {
		font-size: 0.9rem;
	}
	#header .content {
		padding: 1.5rem;
	}
	#anniv_title b {
		font-weight: 900;
		font-size: 3.5rem;
	}
	.info_cell_img {
		max-width: 70%;
	}
}