/*===Desktop Style===*/
    /*===================*/
 		/* pagging awal */
 		.pagging_atas{
			display:flex;
			justify-content: end;
			flex-wrap:wrap;
		}
		.pagging_bawah{
			display:flex;
			justify-content:center;
			flex-wrap:wrap;
		}
	/* pagging akhir */
	#back{
		position:absolute;
		right:0;
		top:0;
		width:100px;
		height:50vh;
	}
	.cari{
		margin-bottom:20px;
		}
	.fcari{
		display:flex;
		justify-content:flex-end;
	}
	#tombol-cover{
		display:block;
	}
	#tombol-cover input{
		width:100%;
	}
 		#page-gbr{
			 position:absolute;
			 bottom:0;
			 left:0;
			 color:white;
			 background-color:black;
			 padding-left:5px;
			 padding-right:5px;
		 }
		
		.list_menu{
			width:100%; 
			overflow:auto;
		}
		
		.change_urut{
			position: absolute;
			top:10px;
			right:-10px;

		}
		.change_urut_icon{
			display:none;
			width:25px;
		}
		.no-sub{
			position:absolute;
			bottom:10px;
			right:3px;
			border:2px solid white;
			border-radius:25px 25px;
			background-color: rgb(196, 150, 0);
			color:white;
			padding:3px;
		}
		
		.hapus_sub{
			position:absolute;
			top:0;
			left:0;
			opacity: 0.5;
		}
		.hapus_sub img{
			width:30px;
		}
		.tmb_del{
			position:absolute;
			top:200px;
			right:0;
			margin-top:10px;
			margin-right:10px;
			
			border-radius: 5px;
			padding:2px;
			padding-bottom:5px;
			opacity: 0.5;
	
		}
		.tmb_del a:hover svg{
			fill:blue;
		}
		.list-gambar{
			height :28vh;
			width:auto;
		}
		.list-gambar .figure-img{
			height :28vh;
			width:auto;
		}
		
		
		.pic-utama{
			width:100%;
			height:100vh;
			margin:0;
			padding:0;
			background-color: black;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow:none;
			
		}
		#figure-cover{
			margin:0;
			padding:0;
			width:auto;
			height:100vh;
			max-width: 100vw;
			object-fit: contain;
		}
		.pic-utama .figure{
			margin:0;
			padding:0;
			margin-left:auto;
			margin-right:auto;

		}
		#menu_app{
			position:absolute;
			top:0;
			left:0;
			background-color:rgb(0, 0, 0,0.6);
			width:100vw;
			height:100vh;
			display:none;
		}
		#menu_app-body{
			position: absolute;
			left: 50%;
			top: 50%;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			background-color:white;
			width:100vw;
			height:auto;
			display:none;
			border-radius:10px 10px;
			padding:20px;
		}
		.menu-app-judul{
			font-size: larger;
			font-weight: bold;
		}
		.menu-app-body{
			display:flex;
		}
		#menu-kecil{
			position: absolute;
			left: 50%;
			top: 40%;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			background-color:white;
			border-radius:10px 10px;
			padding:20px;
			display:none;
		}
		#list-data{
			display:block; 
		}
		#list-data .figure{
			position: relative;
		}
		#list-img .figure-img{
			height:280px;
		}
		#tutup-list-data{
			position:fixed;
			right:0;
			bottom:0;
			display:inline-block;
			width:20px;
			height:25px;
			cursor: pointer;
		}
		#tombol-back{
			position:fixed;
			right:0;
			top:0;
			width:20px;
			height:50vh;
			cursor: pointer;
			
		}
		#gambar-next{
			position:fixed;
			right:0;
			bottom:0;
			display:inline-block;
			width:20px;
			height:50vh;
		}
		#gambar-prev{
			position:fixed;
			left:0;
			bottom:0;
			display:inline-block;
			width:20px;
			height:50vh;
		}

		.format-video{
			height:400px;
		}
		#ket{
			position:absolute;
			top:0;
			right:0;
			margin:10px;
			
		}
		.breadcrumb{
			background-color:white !important;
			padding:10px !important;
			margin-bottom:-5px;
		}
		.sb-menu{
			padding:20px;
			margin:5px;
			font-weight: bold;
			font-size:1.2rem;
		}
		#my-video{
			width:100vw;
			height:100vh;
			max-width:100vw;
			max-height:100vh;
			background-color: black;
		}
		.footer{
			position: fixed;
			bottom: 0px;
			width:100vw;
		}
		/*===Tablet Style===*/
		/*==================*/
	@media only screen and (min-width: 481px) and (max-width: 900px){  
		
		.pic-utama{
			width:100%;
			height:100vh;
			margin:0;
			padding:0;
			background-color: black;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow:hidden;
			
		}
		#figure-cover{
			width:100vw;
			height:auto;
			max-height: 100vh;
		}
		#list-img .figure{
			padding:0;
			margin:0;
		}
		#list-img .figure-img{
			width:33vw;
			height: auto;
			padding:0;
			margin:0;
		}
		.list-gambar{
			height :auto;
			width:100vw;
			margin-bottom:0;
			padding-bottom:0;
		}
		.list-gambar .figure-img{
			width:100%;
			height: auto;
			padding:0;
			margin:0;
		}
		.format-video{
			width:80%;
			height: auto;
			margin-left:auto;
			margin-right:auto;
		}
		#my-video{
			width:100vw;
		}
		.footer{
			position: relative;
			bottom: 0px;
			width:100vw;
		}
		
	}
		/*===Smartphone Style===*/
		/*======================*/
	@media only screen and (max-width: 480px){ 
		
		.pic-utama{
			width:100%;
			height:100vh;
			margin:0;
			padding:0;
			background-color: black;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow:hidden;
		}
		#my-video{
			width:100vw;
		}
		#figure-cover{
			width:100vw;
			height:auto;	
		}
		
		#list-img .figure{
			padding:0;
			margin:0;
		}
		#list-img .figure-img{
			width:33vw;
			height: auto;
			padding:0;
			margin:0;
		}
		.list-gambar{
			height :auto;
			width:100vw;
			margin-bottom:0;
			padding-bottom:0;
		}
		.list-gambar .figure-img{
			height :auto;
			width:100vw;
			margin-bottom:0;
			padding-bottom:0;
		}
		
		.format-video{
			width:80%;
			height: auto;
			margin-left:auto;
			margin-right:auto;
		} 
		.footer{
			position: relative;
			bottom: 0px;
		}
	   
		
		
	}