@import url('https://fonts.googleapis.com/css2?family=Archivo&display=swap');
	@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&display=swap');
	.opt_close{
		width:25px;
		height:25px;
		background:url(../tm_design/inq_delete.png) 0px 0px ;
		
		float:right;
	}

	.opt_close:hover{
		 
		background:url(../tm_design/inq_delete.png) 0px -28px ;
		cursor:pointer;
		 
	}
	.ishovered:hover{
		cursor:pointer;
		
	}
	
	a:hover{
		text-decoration:none !important;
		color:#ccc !important;
	}	 
	.fontbold{
		font-style:bold !important;
	}
	.fontsize_120{
		font-size:120%;
	}
	.fontsize_140{
		font-size:140%;
	}
	.fontsize_180{
		font-size:180%;
	}
	.fontsize_220{
		font-size:220%;
	}
	h1,h2,h3,h4,h5,h6{
		font-family: 'Playfair Display', serif;
		color:#333;
	}
	.fontheader{
		font-family: 'Playfair Display', serif;
	}
	.color_gray{
		color:#999999;
	}
	h1{
		font-size:200%;
	}
	h2{
		font-size:160%;
	}
	h3{
		font-size:120%;
	}
	body{
		font-size:16px;
		font-family: 'Archivo', sans-serif;
		color:#666;
	}
	ul.ulnav{
		margin:0px;
		padding:0px;
	}
	ul.ulnav li{
		list-style:none;
		display:inline-block;	
		padding:10px 10px;
		font-family: 'Archivo', sans-serif;
		color:#333;
		font-size:12px;
	}
	ul.ulnav li:hover{
		 
		background:#f5f5f5;
		 
	}
	ul.ulnav li a{
		letter-spacing: 1px;
		color:#333;
		position:relative;
	}
	 
	ul.ulnav li a.submenu::before{
		position: absolute;
		left:50%;
		top:20px;
		content: "";
		display: block;
		border-top: 5px solid #CCCCCC;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		margin-left: -5px;
 
	}
	ul.ulnav li a.submenu:hover::before{
		position: absolute;
		left:50%;
		top:20px;
		content: "";
		display: block;
		border-top: 5px solid #444444;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		margin-left: -5px;
 
	}
	ul.ulnav li span{
		letter-spacing: 1px;
		color:#333;
		position:relative;
		cursor:pointer;
	} 
	ul.ulnav li span::before{
		position: absolute;
		left:50%;
		top:20px;
		content: "";
		display: block;
		border-top: 5px solid #CCCCCC;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		margin-left: -5px;
 
	}
	ul.ulnav li span:hover::before{
		position: absolute;
		left:50%;
		top:20px;
		content: "";
		display: block;
		border-top: 5px solid #444444;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		margin-left: -5px;
 
	}
	ul.ulnav li a:hover{
		text-decoration:none;
		color:#666;
	}
	ul.ulnav li:hover ul{	
		display:block;
	}
	ul.ulnav li ul{
		position:absolute;
		padding:30px 0px 0px 0px;
		margin:0px 0px 0px -20px;
		display:none;
		width:150px;
	}
	ul.ulnav li ul li{
		display:list-item;
		padding:0px;
	}
	ul.ulnav li ul li a{
		letter-spacing: 1px;
		background:#fff;
		display:block;
		padding:10px 20px;
		
	}
	ul.ulnav li ul li a:hover{
		 
		background:#f5f5f5;
		color:#333 !important;
	}
	ul.uliconnav{
		margin:0px ;
		padding:0px ;
	}
	ul.uliconnav li{
		
		padding:18px 20px 12px 20px;
		list-style:none;
		display:inline-block;	
		border-left:solid 1px #dedede;		 
			
	}
	ul.uliconnav li span{
		display:inline-block;	
		width:38px;
		height:38px;		
	}
	ul.uliconnav li span:hover{
		cursor:pointer;
	}
	ul.uliconnav li span.icon_user{		
		background:url("../tm_design/icon_user.png") no-repeat;
	}
	ul.uliconnav li span.icon_user:hover{		
		background:url("../tm_design/icon_user.png") no-repeat 0px -42px;
	}
	ul.uliconnav li span.icon_cart{		
		background:url("../tm_design/icon_cart.png") no-repeat;
	}
	ul.uliconnav li span.icon_cart:hover{		
		background:url("../tm_design/icon_cart.png") no-repeat 0px -42px;
	}
	ul.uliconnav li span.icon_search{		
		background:url("../tm_design/icon_search.png") no-repeat;
	}
	ul.uliconnav li span.icon_search:hover{		
		background:url("../tm_design/icon_search.png") no-repeat 0px -42px;
	}
	ul.uliconnav li span.icon_kontak{		
		background:url("../tm_design/icon_kontak.png") no-repeat;
	}
	ul.uliconnav li span.icon_kontak:hover{
		background:url("../tm_design/icon_kontak.png") no-repeat 0px -42px;
	}
	ul.uliconnav li:hover ul{
		display:block;
	}
	ul.uliconnav li ul{
		
		position:absolute;
		background-color:#fff;
		padding:10px;
		left:30px;
		width:150px;	
		display:none;
	}
	ul.uliconnav li ul li{
		text-align:left;
		padding:0px 0px;
		list-style:none;
		display:list-item;	
		border-left:solid 0px #dedede;		
		border-bottom:solid 1px #dedede;
	}
	ul.uliconnav li ul li:last-of-type{
		 
		border-bottom:solid 0px #dedede;
	}
	ul.uliconnav li ul li a{
		display:block;
		padding:10px 5px;
		font-family: 'Archivo Narrow', sans-serif;
		color:#333;
		font-size:14px; 
	}
	ul.uliconnav li ul li a:hover{
		background:#dedede;
		text-decoration:none;
	}
	.header_footer{
		font-size:160%;
		font-weight:bold;	
		display:block;
	}
	.header_footer::before{
		bottom:-15px;
		content:"";
		background-color:#444;
		width:60px;
		height:2px;	
		position:absolute;
	}
	ul.ulfooter_nav{
		padding:0px 0px 0px 0px;
		margin:0px;
	}
	ul.ulfooter_nav li{
		color:#999; 
		padding:0px 0px 0px 20px;
		border-bottom:solid 1px #dedede;
		list-style:none;
		background:url(../tm_design/icon_ul.png) no-repeat left 14px;
	}
	ul.ulfooter_nav li a{
		display:block;
		padding:8px 0px;
		color:#999; 
		font-size:14px;
	}
	ul.ulfooter_nav li span{
		display:block;
		padding:8px 0px;
		color:#999; 
		font-size:14px;
	}
	ul.ulfooter_nav li a:hover{
		display:block;
		background:#f5f5f5;  
		text-decoration:none;
	}
	ul.ulfooter_nav li ul{
		margin:0px;
		padding:0px;
	}
	ul.ulfooter_nav li ul li{
		color:#999; 
		padding:0px 0px 0px 10px;
		border-bottom:solid 1px #dedede;
		list-style:none;
		background:none;
	}
	ul.ulfooter_nav li ul li:last-of-type{
		 
		border-bottom:solid 0px #dedede;
		 
	}
	.icon_menu_glip{
		display:inline-block;
		height:28px;
		width:30px;
		margin-top:5px;
	}
	.icon_glip_burger{
		background:url(../tm_design/icon_menu.png) no-repeat 0px 2px;
		
	}
	.icon_glip_close{
		background: url(../tm_design/icon_menu.png) no-repeat 0px -33px;		
	}
	.icon_menu_search_m{
		background:url(../tm_design/icon_search_m.png) no-repeat 0px 0px;
		display:inline-block;
		height:28px;
		width:30px;
		margin:0px 10px 0px 0px;
	}
	.icon_menu_cart_m{
		background:url(../tm_design/icon_cart_m.png) no-repeat 0px 0px;
		display:inline-block;
		height:28px;
		width:30px;
		margin:0px 10px 0px 0px;
	}
	.menu_mobile_box{
		width:100%;
		background:#fff;
		height:100%;
		position:fixed;
		z-index:1200;
		top:0px;
		left:-10000px;		
	
		overflow:none;
	}
	
	/*
	.menu_animasi{
		display:block;
		animation-name:goto_right;
		animation-duration: 0.5s;
		animation-fill-mode: both;
	}
	@keyframes goto_right{
		from {left: -500px;}
		to {left: 0px;}
	}
	.menu_animasi_sembunyi{		
		animation-name:goto_sembunyi;
		animation-duration: 0.5s;
		animation-delay: 0.5s;
		animation-fill-mode: both;		 
	}
	@keyframes goto_sembunyi{
		from {left: 0px;}
		to {left: -500px;}
	}
	*/
 
	.overlay_here{
	  transition: .5s ease;
	  opacity: 0;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  -ms-transform: translate(-50%, -50%);
	  text-align: center;
	  background:#666;	  
	}
	.image_box:hover .img_overlay{
		opacity:0.8;
	}
	.image_box:hover .overlay_here{
		opacity:0.8;
	}
	ul.ulmobilenav {
		padding:10px;
		margin:0px;		
	}
	ul.ulmobilenav li{
		padding:6px 30px 6px 6px;
		list-style:none;
		display:block;
		font-size:14px;
		 
		margin-bottom:1px;
		 
	}
	ul.ulmobilenav li.cparent {
		
		background: url(../tm_design/ulplus.png) right 10px no-repeat; 
	}
	ul.ulmobilenav li.cparent_selected {
		
		background: #f5f5f5 url(../tm_design/ulminus.png) right 15px no-repeat; 
	}	 
	ul.ulmobilenav li a{
		color:#444 !important;
		padding:4px ;
		display:block;
	}
	ul.ulmobilenav li a:hover{
		background-color:#f5f5f5;
	}
	ul.ulmobilenav li ul {
		padding:10px 0px 0px 20px;
		display:none;
	}
	ul.ulmobilenav li ul li{
		padding:4px 0px 4px 0px;
		 
	}
	ul.ulmobilenav li ul li:last-of-type{
		padding:4px 0px 20px 0px;
	}
	
	.thumbnail_text a{
		color:#999999;
		font-size:14px;
		display:block;		
	}
	.thumbnail_text span{
		color:#333;
		font-size:12px;
		display:block;		
		font-weight:bold;
		margin:5px 0px 0px 0px;
	}
	ul.ulsidemenu{
		padding:0px 20px 0px 0px;
		margin:0px;
	}
	ul.ulsidemenu li{
		list-style:none;
		color:#444;
		font-size:16px;
		padding:12px 0px;
		border-bottom:solid 1px #EEEEEE;
	 
	}
	ul.ulsidemenu li a{ 
		list-style:none;
		color:#444 !important;
		font-size:16px;		
	}
	ul.ulsidemenu li a:hover{ 
		list-style:none;
		color:#ccc !important;
		font-size:16px;		
	}
	ul.ulsidemenu li ul {		 
		padding:16px 0px 16px 40px;
	}
	ul.ulsidemenu li ul li{
		list-style:disc;
		color:#d8d8d8;
		font-size:14px;
		padding:8px 0px;
		border:none;	  
	}
	ul.ulsidemenu li ul li a{
		display:block;
		color:#999999 !important;
		font-size:14px !important ;
		font-weight:normal;  
	}
	
	a.img_link:hover{
		opacity:0.8 !important;
		z-index:1;
	}
	a.link_bg_gray:hover{
		text-decoration:none !important;
		background-color:#ccc !important;
		z-index:200;
	}
	a.linkdark{
		text-decoration:none !important;
		color:#333 !important;
	}
	a.linkdark:hover{
		 color:#666 !important;
		 text-decoration:none !important;		 
	}
		
	a.linkgray{
		color:#666 !important;
	}
	a.linkgray:hover{
		 color:#999 !important;
		 text-decoration:none !important;
	}
	.bg_gray{
		background: #f5f5f5; 
	}
.card_imgthumbnail{
	overflow:hidden;	
}
.card_imgthumbnail img{
	
	transition: transform .2s;	
}
.card_imgthumbnail img:hover{
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1);

}

.hover_img_play_youtube{
	transition: .5s ease;
	opacity: 0.5;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	text-align: center;
} 
.hover_img_play_youtube:hover{
	opacity: 1;
	cursor:pointer;
}	
div.div_as_table{
	display:table;
}
div.div_as_table div {
	display:table-cell;
}
@media screen and (min-width:1000px){
	.show_on_mobile{display:none;}.show_on_desk{display:block;}
	.paging {
		padding:7px;
		text-align  : center;	
		font-size   : 12px;	

	}
	.paging a
	{
		padding:8px 14px 8px 14px;
		margin:4px;
		border              : 1px solid #ccc;
		text-decoration     : none; 
		font-size			:12px;
		color :#333 !important;
		background:#fff;
		 
		text-align:center;
	}
	.paging a:hover
	{
		border           : 1px solid #fff;
		background-color : #ccc;
		color			 : #fff !important;
		box-shadow:0px 0px 2px #333;
		
	}
	.paging span.current
	{
		border           : 1px solid #fff;
		background-color : #ccc;
		color			 : #fff !important;
		box-shadow:0px 0px 2px #333;
		padding:8px 14px 8px 14px;
		margin:4px;
		font-size			:12px;
		 
	}

	.paging span.disabled
	{
		padding:8px 14px 8px 14px;
		margin:4px;
		border              : 1px solid #eee;
		text-decoration     : none; 
		font-size			:12px;
		color :#ccc !important;
		background:#fff;
		 
		text-align:center;
	}
}
@media screen and (max-width:999px){
	.card_mobile{
		border:solid 1px #dedede;
	}
	.show_on_mobile{display:block;}.show_on_desk{display:none;}
	.menu_icon_white{
		background:url(../tm_design/icon_menu_gray.png) no-repeat 0px 0px;
		width:30px;
		height:18px;
		float:left;
		margin-top:10px;
	}
	.paging {
		padding:4px;
		text-align  : center;	
		font-size   : 12px;	

	}
	.paging a
	{
		padding:4px 6px 4px 6px;
		margin:3px;
		border              : 1px solid #ccc;
		text-decoration     : none; 
		font-size			:12px;
		color :#333 !important;
		background:#fff;
		 
		text-align:center;
	}
	.paging a:hover
	{
		border           : 1px solid #fff;
		background-color : #ccc;
		color			 : #fff !important;
		box-shadow:0px 0px 2px #333;
		
	}
	.paging span.current
	{
		border           : 1px solid #fff;
		background-color : #ccc;
		color			 : #fff !important;
		box-shadow:0px 0px 2px #333;
		padding:4px 6px 4px 6px;
		margin:3px;
		font-size			:12px;
		 
	}

	.paging span.disabled
	{
		padding:4px 6px 4px 6px;
		margin:3px;
		border              : 1px solid #eee;
		text-decoration     : none; 
		font-size			:12px;
		color :#ccc !important;
		background:#fff;
		 
		text-align:center;
	}
}