html,body{
	width:100%;
	height:100%;
	margin:0;
	font-family:calibri;
	}

a{
	text-decoration:none;
	}
@font-face{
	font-family: "AdventPro-Medium";
    src: url('../AdventPro-Medium.ttf');
    }

@font-face{
	font-family: "MDGroteskRegular";
    src: url('../MDGroteskRegular.ttf');
    }
@font-face{
	font-family: "RobotoSlab-Regular";
    src: url('../RobotoSlab-Regular.ttf');
    }
@font-face{
	font-family: "timeburnerbold";
    src: url('../timeburnerbold.ttf');
    }
@font-face{
	font-family: "Kanit-ExtraLight";
    src: url('../Kanit-ExtraLight.ttf');
    }
@font-face{
	font-family: "NunitoSans_7pt_Condensed-Medium";
    src: url('../NunitoSans_7pt_Condensed-Medium.ttf');
    }
@font-face{
	font-family: "NunitoSans_7pt_Condensed-Light";
    src: url('../NunitoSans_7pt_Condensed-Light.ttf');
    }


#batal_masuk_atas{
	background-color:#B22222;
	color:white;
	}
#masuk_anggota{
	background-color:#1E90FF;
	color:white;
	}
.index_depann_1{
	width:90%;
	height:auto;
	margin-left:5%;
	padding-top:5mm;
	}
.index_depan_1{
	width:100%;
	height:auto;
	background-color:#2980B9;
	background-color:white;
	margin-bottom:5mm;
	}
	.index_depan_11{
		width:100%;
		height:auto;
		cursor:pointer;
		}
		.index_depan_111{
			width:10%;
			height:auto;
			padding-top:2mm;
			padding-bottom:2mm;
			}
		.index_depan_112{
			width:10%;
			height:auto;
			padding-top:3mm;
			padding-bottom:3mm;
			}
		.index_depan_113{
			width:50%;
			height:auto;
			}
			.index_depan_1131{
				width:20%;
				height:auto;
				text-align:center;
				padding-top:3mm;
				padding-bottom:3mm;
				float:left;
				color:#696969;
				}
			a .index_depan_1131{
				color:#696969;
				}
		.index_depan_114{
			width:15%;
			height:auto;
			padding-top:3mm;
			padding-bottom:3mm;
			text-align:center;
			}
		.index_depan_115{
			width:5%;
			height:auto;
			padding-top:3mm;
			padding-bottom:3mm;
			text-align:center;
			}
		.index_depan_116{
			width:10%;
			height:auto;
			padding-top:3mm;
			padding-bottom:3mm;
			text-align:center;
			}

.index_depan_2{
	width:100%;
	height:auto;
	background-color:white;
	background-color:#F8F8FF;
	padding-top:10mm;
	padding-bottom:10mm;
	}
.index_depan_foto{
	width:100%;
	height:auto;
	border-radius:10px 10px 0px 0px;
	}
	.index_depan_21{
		width:90%;
		height:auto;
		margin-left:5%;
		border:1px #DCDCDC solid;
		border:1px transparent solid;
		overflow:hidden;
		}
		.index_depan_kotak_211{
			width:25%;
			height:100mm;
			float:left;
			background-color:#F8F8FF;
			}
		.index_depan_211{
			width:96%;
			height:100%;
			margin-left:2%;
			border-radius:10px;
			background-color:white;
			}
			.index_depan_2111{
				width:100%;
				height:20mm;
				padding-top:5mm;
				}
				.index_depan_21111{
					width:80%;
					height:auto;
					margin-left:10%;
					font-size:18px;
					text-align:left;
					}


.menu_depan{
	width:20%;
	height:100%;
	text-align:center;
	float:right;
	color:white;
	}

.index_depan_3{
	width:100%;
	height:auto;
	padding-top:15mm;
	padding-bottom:15mm;
	background-color:#F8F8FF;
	}
	.index_depan_31{
		width:100%;
		height:auto;
		background-color:#F8F8FF;
		}
	.foto_pdm_depan{
		width:90%;
		height:auto;
		}
.index_depan_4{
	width:100%;
	height:285mm;
	overflow:hidden;
	background-color:#F8F8FF;
	}
	.index_depan_41{
		width:20%;
		margin-left:5%;
		height:255mm;
		float:left;
		border-radius:5px;
		box-shadow:0px 0px 2px 2px #DCDCDC;
		background-color:white;
		padding-top:5mm;
		padding-bottom:5mm;
		}
		.index_depan_411{
			width:90%;
			height:auto;
			margin-left:5%;
			font-size:30px;
			padding-top:5mm;
			padding-bottom:5mm;
			border-bottom:5px #DCDCDC solid;
			border-bottom:3px #B22222 solid;
			}
		.index_depan_412{
			width:90%;
			height:200mm;
			margin-left:5%;
			padding-top:10mm;
			padding-bottom:10mm;
			overflow:hidden;
			}
			.index_depan_4121{
				width:100%;
				height:auto;
				background-color:white;
				margin-bottom:5mm;
				border-bottom:1px #DCDCDC solid;
				}
				.index_depan_41211{
					width:100%;
					height:auto;
					}
					.foto_berita{
						width:100%;
						height:auto;
						}
				.index_depan_41212{
					width:100%;
					height:auto;
					padding-top:5mm;
					padding-bottom:5mm;
					}
	.index_depan_42{
		width:44%;
		height:255mm;
		overflow-x:hidden;
		overflow-y:scroll;
		float:left;
		border-radius:5px;
		margin-left:2.5%;
		padding-top:5mm;
		padding-bottom:5mm;
		background-color:white;
		box-shadow:0px 0px 2px 2px #DCDCDC;
		}
		.index_depan_421{
			width:90%;
			height:auto;
			margin-left:5%;
			padding-top:5mm;
			padding-bottom:5mm;
			border-bottom:3px #DCDCDC solid;
			}
		.index_depan_4211{
			width:100%;
			height:auto;
			background-color:white;
			overflow:hidden;
			}
			.index_depan_42111{
				width:100%;
				height:auto;
				}
			.index_depan_42112{
				width:100%;
				height:auto;
				padding-top:3mm;
				padding-bottom:5mm;
				}
				.index_depan_421121{
					width:90%;
					height:auto;
					margin-left:5%;
					}

	.index_depan_43{
		width:20%;
		height:255mm;
		overflow-x:hidden;
		overflow-y:scroll;
		float:left;
		border-radius:5px;
		box-shadow:0px 0px 2px 2px #DCDCDC;
		background-color:white;
		margin-left:2.5%;
		padding-top:5mm;
		padding-bottom:5mm;
		}


.index_depan_2_icon_1{
	width:70px;
	height:auto;
	}
.index_depan_2_icon_2{
	width:50px;
	height:50px;
	border-radius:50%;
	}


.judul_1{
	width:100%;
	height:auto;
	text-align:center;
	font-size:40pt;
	margin-bottom:5mm;
	font-family: "MDGroteskRegular";
	}
.judul_2{
	width:100%;
	height:auto;
	text-align:center;
	font-size:20pt;
	font-family: "MDGroteskRegular";
	}

m{
color:#FF8C00;		
	}
.index_masuk_1{
	width:30%;
	height:100%;
	position:fixed;
	right:0%;
	top:0%;
	display:none;
	background-color:black;
	background-color:#DC143C;
	cursor:pointer;
	}
	.index_masuk_11{
		width:80%;
		height:auto;
		color:white;
		padding-top:10mm;
		padding-bottom:20mm;
		margin-left:10%;
		margin-bottom:10mm;
		font-size:15pt;
		font-family: "Kanit-ExtraLight";
		}
	.index_masuk_12{
		width:80%;
		height:auto;
		color:white;
		background-color:#DC143C;
		margin-left:10%;
		font-size:15pt;
		font-family: "Kanit-ExtraLight";
		border-bottom:1px #DCDCDC solid;
		}
		.index_masuk_121{
			width:99%;
			height:auto;
			outline:none;
			padding-top:3mm;
			padding-bottom:3mm;
			font-size:15pt;
			background-color:#DC143C;
			color:white;
			font-family: "Kanit-ExtraLight";
			border:1px transparent solid;
			}
		.index_masuk_121::placeholder{
			padding-top:2mm;
			padding-bottom:2mm;
			font-size:12pt;
			background-color:#DC143C;
			color:#DCDCDC;
			font-family: "Kanit-ExtraLight";
			border:1px transparent solid;
			}
	.index_masuk_13{
		width:50%;
		height:auto;
		color:white;
		font-weight:bold;
		margin-top:25mm;
		padding-top:3mm;
		padding-bottom:3mm;
		margin-left:10%;
		font-size:13pt;
		color:#DC143C;
		border-radius:25px;
		background-color:#DCDCDC;
		text-align:center;
		font-family: "Kanit-ExtraLight";
		border-bottom:1px #808080 solid;
		}
.index_1{
	width:100%;
	height:auto;
	padding-top:10mm;
	cursor:pointer;
	}
	.index_11{
		width:90%;
		height:auto;
		margin-left:5%;
		}
		.index_111{
			width:100%;
			height:auto;
			}
			.index_1111{
				width:10%;
				height:auto;
				text-align:center;
				float:right;
				padding-top:2mm;
				padding-bottom:2mm;
				border-radius:25px;
				font-size:10pt;
				font-family: "Kanit-ExtraLight";
				border:1px #DCDCDC solid;
				border:1px transparent solid;
				}
			a .index_1111{
				color:black;
				}
				.index_11211 a{
					color:black;
					}



.index_2{
	width:100%;
	height:100%;
	position:fixed;
	top:0%;
	font-family: "MDGroteskRegular";
	}
	.index_21{
		width:100%;
		height:100%;
		}
		.index_211{
			width:100%;
			height:100%;
			}


.index_4{
	width:100%;
	height:auto;
	text-align:center;
	}

			.index_2111{
				width:26.6%;
				height:auto;
				margin-left:5%;
				margin-bottom:10mm;
				float:left;
				}
				.index_21111{
					width:100%;
					height:auto;
					}
				.index_21112{
					width:100%;
					height:auto;
					padding-top:2mm;
					padding-bottom:2mm;
					}
		.index_212{
			width:75%;
			height:auto;
			font-size:14pt;
			}


	a .index_21{
		color:black;
		}
	a .index_21:hover{
		font-size:14pt;
		font-weight:bold;
		}
	.index_22{
		width:80%;
		height:auto;
		margin-left:10%;
		margin-bottom:30px;
		font-family: "MDGroteskRegular";
		}
		.index_221{
			width:100%;
			height:auto;
			margin-top:10px;
			font-size:15pt;
			color:#696969;
			color:black;
			}
		.index_222{
			width:100%;
			height:auto;
			font-size:10pt;
			color:white;
			color:#696969;
			}
		.index_223{
			width:100%;
			height:auto;
			}
			.index_2231{
				width:25%;
				height:auto;
				padding-top:3mm;
				}
			.index_2232{
				width:75%;
				height:auto;
				padding-left:3%;
				}

.index_3{
	width:100%;
	height:auto;
	}

.index_4{
	width:95%;
	height:auto;
	padding-left:5%;
	padding-top:5mm;
	background-color:#DCDCDC;
	background-color:white;
	font-size:20pt;
	font-family: "MDGroteskRegular";
	}


	.index_52{
		width:70%;
		height:100%;
		float:right;
		overflow:hidden;
		}

.index_icon_1{
	width:45px;
	height:auto;
	border-radius:50%;
	box-shadow:0px 1px 5px #DCDCDC;
	}
.index_icon_2{
	width:30px;
	height:auto;
	padding:5px;
	border-radius:50%;
	box-shadow:0px 1px 5px #DCDCDC;
	}
.index_icon_3{
	width:30px;
	height:auto;
	}
.index_icon_4{
	width:20px;
	height:20px;
	padding:2px;
	margin-right:2%;
	border:2px white solid;
	border-radius:50%;
	}
.index_foto_1{
	width:100%;
	height:auto;
	}
.index_none_1{
	display:none;
	}

#hilang{
	display:none;
	}
#berita_kegiatan{
	font-size:28px;
	}

.index_depan_5{
	width:100%;
	height:50mm;
	background-color:#696969;
	}
.block_atas_1{
	width:100%;
	height:100%;
	background-color:#696969;
	position:fixed;
	top:0%;
	z-index:2;
	opacity:0.5;
	display:none;
	}
.index_menu_masuk_1{
	width:40%;
	height:50%;
	background-color:white;
	position:fixed;
	top:25%;
	left:30%;
	z-index:2;
	display:none;
	cursor:pointer;
	}
.index_menu_masuk_2{
	width:90%;
	height:80%;
	margin-left:5%;
	margin-top:5%;
	border-radius:15px;
	border:1px #DCDCDC solid;
	}
	.index_menu_masuk_21{
		width:100%;
		height:auto;
		padding-top:10mm;
		}
		.index_menu_masuk_211{
			width:80%;
			height:auto;
			margin-left:10%;
			padding-top:3mm;
			padding-bottom:3mm;
			margin-bottom:5mm;
			outline:none;
			border:1px transparent solid;
			border-bottom:1px #DCDCDC solid;
			}
		.index_menu_masuk_212{
			width:60%;
			height:auto;
			margin-left:10%;
			margin-top:5mm;
			padding-top:3mm;
			padding-bottom:3mm;
			border:1px transparent solid;
			}
			.index_menu_masuk_2121{
				width:50%;
				height:auto;
				padding-top:4mm;
				padding-bottom:4mm;
				border-radius:25px;
				text-align:center;
				font-size:13px;
				}



/* scrollbar starts on line 31 */

/* fonts and basic setup */

/* custom scrollbar */
::-webkit-scrollbar {
  width: 0px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
  border-radius: 20px;
  border: 1px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
  background-color: red;
}