@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&display=swap');
		*{
			padding:0;
			margin:0;
		}
		
		html, body{
			font-family:Montserrat;
		}
		body{
			
		}
		a{
			color:#000;
		}
		#cover{
			width:95%;
			max-width:1500px;
			margin:auto;
		}
		.clr{
			clear:both;
		}
		.logo{
			text-align:center;
			margin-top:2vh;
		}
		.logo img{
			width:200px;
		}
		.logo a img{
			filter:grayscale(100%);
			filter:brightness(0%);
		}
		.logo a:hover img{
			filter:grayscale(0%);
			filter:brightness(100%);
		}
		.menu{
			margin-top:2vh;
		}
		.menu div{
			float:left;
			height:30vh;
			background-size:cover; 
			background-position:center; 
			text-align:center;
			color:#FFF;
			font-weight:700;
			font-size:2vh;
			letter-spacing:2px;
			cursor:pointer;
			overflow:hidden;
		}
		.menu div .text{
			position:sticky;
			padding-top:8vh;
			text-align:center;
			margin-top:-30vh;
			z-index:999;
			width:100%;
		}
		.menu div .image{
			width:100%;
			height:100%;
			filter:grayscale(100%);
			height:30vh;
		}
		.menu div:hover .image{
			filter:grayscale(100%) brightness(50%);
		}
		.menu div a{
			color:#FFF;
			text-decoration:none;
			font-size:4vw;
		}
		.menu div:hover, .menu div:hover a{
			color:#DE00CA;
		}
		div.about{
			width:49.5%;
			margin-right:0.5%;
			margin-bottom:0.7vh;
		}
		div.about .image{
			background-image:url('About.jpg'); 
		}
		div.news{
			width:29.5%;
			margin-right:0.5%;
			margin-bottom:0.7vh;
		}
		div.news .image{
			background-image:url('News.jpg'); 
		}
		div.join{
			width:20%;
			margin-bottom:0.7vh;
			
		}
		div.join .image{
			background-image:url('Gallery pilihan 2.JPG'); 
		}
		div.shop{
			width:59.5%;
			margin-right:0.5%;
			
		}
		div.shop .image{
			background-image:url('Merch.jpg'); 
		}
		div.archive{
			width:40%;
			
		}
		div.archive .image{
			background-image:url('Archives color.jpg'); 
		}
		.collect{
			padding-top:1vh;
			padding-bottom:1vh;
			border-top:1px solid #000;
			margin-top:2vh;
		}
		.collect img{
			width:100%;
		}
		.ttle{
			text-align:center;
			font-size:2.2vh;
			font-weight:700;
			padding:2vh;
			border-top:1px solid #000;
			border-bottom:1px solid #000;
		}
		.ttle.head{
			border:none;
			text-align:left;
			font-size:3.2vh;
			padding:1.5vh;
		}
		.list-news, .list-shop{
			padding-top:2vh;
			padding-bottom:2vh;
		}
		.list-news .listing{
			width:23%;
			padding:1%;
			float:left;
			text-align:center;
		}
		.list-shop .listing{
			width:23%;
			height:50vh;
			padding:1%;
			float:left;
			text-align:center;
		}
		.list-shop .listing h3, .list-news .listing h3{
			padding-top:1vh;
			padding-bottom:1vh;
			border-bottom:1px solid #000;
		
		}
		.list-shop .listing span, .list-news .listing span{
			padding-top:1.2vh;
			font-size:1.2vh;
		}
		.list-shop .listing img, .list-news .listing img{
			width:100%;
			filter:grayscale(100%);
		}
		.list-shop .listing .gbr, .list-news .listing .gbr{
			width:100%;
			
			overflow:hidden;
		}
		.list-shop .listing:hover, .list-news .listing:hover{
			cursor:pointer;
		}
		.list-shop .listing:hover img, .list-news .listing:hover img{
			width:100%;
			filter:grayscale(0%);
		}
		.list-shop .listing:hover h3, .list-news .listing:hover h3{
			color:#999;
		}
		.list-shop .listing .cart{
			border:1px solid #000;
			padding:5px;
			width:80%;
			max-width:100px;
			margin:auto;
			margin-top:1vh;
		}
		.list-shop .listing .cart:hover{
			background:#000;
			color:#FFF;
			border:1px solid #FFF;
		}
		.footer{
			padding-top:2vh;
			padding-bottom:2vh;
			border-top:1px solid #000;
		}
		.logobot{
			width:7%;
			float:left;
		}
		.logobot img{
			width:100%;
		}
		.donate{
			width:10%;
			margin:auto;
			padding-right:0%;
			text-align:center;
			padding-top:1%;
			font-weight:bold;
			letter-spacing:2px;
		}
		.donate a{
			color:#FFF;
			text-decoration:none;
		}
		.donate span{
			padding:5%;
			background:#000;
		}
		.donate a:hover{
			color:#999;
		}
		.buy-print{
			background:#DE00CA;
			color:#FFF;
			text-align:center;
			padding:10px 0;
			width:90%;
			margin-left:10%;
			margin-top:20px;
			padding-right: 0%;
			text-align: center;
			font-weight: bold;
			letter-spacing: 2px;
		}
		.buy-print:hover{
			background:#000;
			color:#FFF;
			cursor:pointer;
		}
		.menu-right{
			float:right;
			width:20%;
			font-weight:700;
		}
		.menu-right ul li{
			font-weight:700;
			font-size:1.5vh;
			float:left;
			list-style-type:none;
			width:50%;
			text-align:right;
			padding-bottom:0.5vh;
		}
		.menu-right ul li a{
			text-decoration:none;
			color:#000;
		}
		.menu-right ul li a:hover{
			color:#DE00CA;
		}
		.context{
			border-top:1px solid #000;
			padding-top:5vh;
			padding-bottom:5vh;
		}
		.context .text{
			text-align:center;
			line-height:150%;
		}
		.context .text h3{
			padding-bottom:2vh;
		}
		.context .form{ 
			
		}
		.context .form div{
			margin-bottom:1vh;
		}
		.context .form input, .context .form textarea{
			width:90%;
			border:1px solid #000;
			padding:5%;
		}
		.context .form input[type=submit]{
			width:100%;
			text-align:center;
		}
		.context .form input[type=submit]:hover{
			cursor:pointer;
			background:#000;
			color:#FFF;
		}
		.context .form textarea{
			height:20vh;
		}
		.context .form{
			width:50%;
			float:left;
		}
		.context .right{
			float:left;
			text-align:left;
			width:48%;
			padding-left:2%;
		}
		
		#accordion {
		 width:100%;
		 margin-top:5vh;
		}

		#accordion h2 {
		 cursor:pointer;
		 padding:0vh 0;
		 font-size:6vh;
		}

		
		#accordion .content {
			 color:black;  
		}
		.grids{
			grid-gap: 1vw;
			margin-top:20px;
			margin-bottom:20px;
		}
		.grids.content{
			grid-gap: 1vw;
		}
		.list-accord.utama{
			float:left;
			text-align:center;
			color:#FFF;
			font-weight:700;
			font-size:6vh;
			filter: grayscale(100%);
			width:100%;
			padding:5vh 0;
		}
		.list-accord{
			float:left;
			text-align:center;
			font-weight:700;
			filter: grayscale(100%);
			width:100%;
		}
		.list-accord.sub{
			width:23%;
			height:auto;
			margin:0%;
			padding-top:0;
			color:#000;
			font-size:1.2em;
		}
		.list-accord:hover{
			color:#000;
			cursor:pointer;
			filter: grayscale(0%);
		}
		

		#accordion h2.active {
			
		}
		.logo a, .logo a h3{
			text-decoration:none;
			color:#000;
			font-size:1em;
		}
		.logo a h3:hover{
			color:#FF2DFF;
		}
		.logo a img{
			max-width:100%;
		}
		input[type=submit]:hover{
			cursor:pointer;
			background:#000;
			color:#FFF;
		}
		.grids{
			display: grid;
			grid-template-columns: 24% 24% 24% 24%;
		}
		.gridsub{
			
		}
		a .gridsub{
			text-decoration:none;
		}
		.gridsub h3{
			font-size:1em;
		}
		.gridsub img{
			width:100%;
		}
		a:-webkit-any-link {
			text-decoration:none;
		}
		.donate img{
		  filter: grayscale(100%) brightness(400%);
		  max-width:20%;
		}
		.donate img:hover{
			 filter: grayscale(0%);
			 cursor:pointer;
		}
		.spaner{
			float:left; width:20%; height:2vh;
		}
		.menuspaner{
			float:left; width:10%; padding-top:8vh;
		}
		.logospaner{
			float:left; width:20%;
		}
		.gridsub  .gbr{
			width:100%;
			overflow:hidden;
		}
		.list-accord h5{
			font-size:1.3em;
		}
		.search{
			float:right; margin-right:0px; text-align:right; width:300px; max-width:100%;
		}
	
	@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
		 .grids{
			display: grid;
			grid-template-columns:50% 50%;
		}
		
		.logobot, .menu-right, .donate{
			width:100%;
			text-align:center;
		}
		.logobot img{
			max-width:200px;
		}
		.menu-right{
			margin-bottom:20px;
		}
		.menu-right ul li{
			width:33%;
			text-align:center;
			padding:10px 0;
		}
		.spaner{
			display:none;
		}
		.menuspaner{
			width:100%; padding:10px 0;
		}
		.logospaner{
			width:100%;
		}
		.logo{
			text-align:center;
			margin-top:0vh;
		}
		.logo img{
			width:150px;
		}
		.ttle.head{
			border:none;
			text-align:center;
			font-size:1.5em;
			border-top:1px solid #000;
			border-bottom:1px solid #000;
		}
		.gridsub.list-accord.utama{
			font-size:2em;
		}
		.gridsub.list-accord{
			font-size:0.7em;
		}
		#accordion h2 {
		 font-size:1.5em;
		 height:5vh;
		}
		.search{
			float:right; margin-right:0px; text-align:right; width:100%;
		}
		.context .form, .text.right{
			width:100%;
		}
		.menu div .text {
			padding-top: 13vh;
		}
	}