*,
ul {
	margin: 0;
	padding: 0;
}
.el-messiri {
	font-family: "El Messiri", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
}
body {
	font-family: "Inter", sans-serif;
	font-optical-sizing: auto;
	font-size: 14px;
}
header {
	height: 90vh;
	position: relative;
	margin-bottom: 100px;
}
.carousel-item,
.carousel-item img {
	height: 90vh;
	object-fit: cover;
}
.page-header {
	height: 300px !important;
}
header::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #000000ac;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	z-index: 1;
}
header img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
aside {
	position: absolute;
	left: 50%;
	top: 20px;
	transform: translateX(-50%);
	background: #fff;
	border-radius: 10px;
	width: 80%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
	border-left: 7px solid #8b721f;
	z-index: 99;
}
.logo img {
	width: 60px;
}
nav ul {
	display: flex;
	list-style-type: none;
}
nav ul li a {
	display: block;
	padding: 35px 15px;
	color: #000;
	font-weight: 600;
	font-size: 18px;
}
.search-form {
	width: 350px;
	display: flex;
	overflow: hidden;
	height: 0;
	transition: 0.5s;
}
.search-form.show {
	height: 45px;
}
.search-form input {
	width: 100%;
	border: none;
	padding: 8px 10px;
	border-left: 1px solid #dddddd;
	border-top: 1px solid #dddddd;
	border-bottom: 1px solid #dddddd;
	border-radius: 3px 0 0 3px;
}
.search-form input:focus {
	outline: none;
	border: 1px solid #f19d28;
}
.search-form button {
	padding: 0 15px;
	background: #ffa62b;
	color: white;
	border: 1px solid #f19d28;
	border-radius: 0 3px 3px 0;
}
.content-header {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 55%;
	text-align: center;
	color: white;
	z-index: 99;
}
.content-header h1 {
	font-weight: 700;
	color: #ffa62b;
}
.content-header a {
	color: #fff;
	background: #ffa62b;
	padding: 13px 28px;
	border-radius: 3px;
	display: inline-block;
}
.titlebar {
	display: inline-block;
	font-weight: 600;
	font-size: 38px;
	padding-bottom: 10px;
	position: relative;
}
.titlebar::before {
	position: absolute;
	content: "";
	left: 50%;
	transform: translateX(-50%);
	bottom: 0px;
	width: 30%;
	height: 5px;
	border-radius: 5px;
	background: #ffa62b;
}
.card-img {
	position: relative;
	overflow: hidden;
}
.card-img img {
	width: 100%;
	border-radius: 10px;
	height: 300px;
	object-fit: cover;
	transition: 0.5s;
}
.card-img img:hover {
	transform: scale(1.2);
}
.container-main {
	width: 90% !important;
	margin: auto;
}
section {
	margin-bottom: 100px;
}
.btn-main {
	color: #fff;
	background: #ffa62b;
	padding: 13px 28px;
	border-radius: 3px;
	display: inline-block;
	border: none;
}
.bg-utama {
	color: #fff;
	background: #235757;
	padding: 50px;
	border-radius: 10px;
	display: inline-block;
}
.bg-main::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #000000ac;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
.bg-main {
	background: url("assets/img/gambar-4.png");
	background-size: cover;
	background-position: center;
	padding: 100px 0;
	position: relative;
	color: white;
}
.text-gradient {
	background: -webkit-linear-gradient(#ffa62b, #8b721f);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.testi-img {
	display: flex;
	align-items: center;
	line-height: 15px;
}
.testi-img img {
	width: 40px !important;
	height: 40px !important;
	border-radius: 50%;
	border: 2px solid #ffa62b;
	margin-right: 10px;
}
.testi-img p {
	font-size: 12px;
}
.testi {
	min-height: 150px;
}
.testi p {
	font-size: 14px;
}
.profile {
	display: flex;
	position: relative;
	align-items: center;
}
.profile img {
	width: 480px;
	height: 600px;
	object-fit: cover;
	border-radius: 10px !important;
}
.profile > div {
	padding: 50px;
	background: #fff;
	border-radius: 10px;
	position: relative;
	left: -140px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.grid-content {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 20px;
	list-style-type: none;
}
.grid-content img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin-bottom: 20px;
	transition: 1s;
}
.grid-content li {
	position: relative;
	overflow: hidden;
	height: 400px;
	border-radius: 5px;
}
.grid-content li:hover img {
	transform: scale(1.4);
}
.content-fixed {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	padding: 20px;
	background: #235757ac;
	color: white;
	display: flex;
	align-items: end;
}

footer {
	background: #235757;
	color: white;
	position: relative;
	overflow: hidden;
}
footer::after {
	content: "";
	position: absolute;
	right: -200px;
	bottom: -100px;
	background: url("logo.png");
	width: 500px;
	height: 500px;
	opacity: 0.1;
}
footer .footer-top {
	padding: 80px 0 10px 0;
}
footer .logo-footer {
	display: flex;
}
footer .logo-footer .logo {
	display: inline-flex;
	width: 80px;
	height: 80px;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 5px;
}
footer .logo-footer .logo img {
	width: 80%;
}
footer .kontak {
	list-style-type: none;
	margin-bottom: 30px;
}
footer .kontak li {
	display: flex;
	align-items: start;
	padding: 5px 0;
}
footer .kontak li i {
	margin-top: 3px;
	width: 30px;
}
footer ul li a {
	display: block;
	color: white;
	padding: 5px 0;
}
footer h3 {
	color: #ffa62b;
}
footer hr {
	background: #ffffff22;
}
.sosmed {
	display: grid;
	list-style-type: none;
	grid-template-columns: 40px 40px 40px;
	grid-gap: 10px;
}
.sosmed i {
	width: 40px;
	height: 40px;
	background: #ffa72b5d;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	font-size: 20px;
}
.list-news li {
	display: grid;
	grid-template-columns: 140px 1fr;
	grid-gap: 20px;
	margin-bottom: 20px;
}
.list-news img {
	width: 100%;
	height: 100px;
	border-radius: 5px;
	object-fit: cover;
}
.email-footer {
	padding: 10px 15px;
	border-radius: 50px;
	background: #fff;
	z-index: 9999;
	position: relative;
	display: flex;
}
.email-footer input {
	border: none;
	width: 100%;
}
.email-footer input:focus {
	border: none;
	outline: none;
}
.email-footer button {
	font-family: "El Messiri", sans-serif;
	border: none;
	color: white;
	padding: 10px 20px;
	border-radius: 50px;
	background: #ffa62b;
	transition: 0.5s;
}
.email-footer button:hover {
	background: #d5881c;
}
.content-side {
	display: flex;
	height: 100vh;
}
.content-side > div {
	flex: 0.5;
	position: relative;
	overflow: hidden;
}
.content-side .content-first {
	background: rgb(0, 0, 0);
	background: linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.5265755960587359) 0%,
			rgba(0, 0, 0, 0.7478641114648985) 100%
		),
		url("bg.webp");
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
.content-side .content-first img {
	width: 100px;
}
.form-item {
	position: relative;
	margin-bottom: 15px;
}
.form-item input {
	display: block;
	width: 100%;
	height: 40px;
	background: transparent;
	border: solid 1px #ccc;
	transition: all 0.3s ease;
	border-radius: 5px;
	padding: 0 15px;
	background: #fff;
}
.form-item textarea {
	display: block;
	width: 100%;
	background: transparent;
	border: solid 1px #ccc;
	transition: all 0.3s ease;
	border-radius: 3px;
	padding: 15px;
}
.form-item input:focus,
.form-item textarea:focus {
	border-color: blue;
	outline: none;
}
.form-item label {
	position: absolute;
	cursor: text;
	z-index: 2;
	top: 9px;
	left: 5px;
	font-size: 14px;
	background: #fff;
	padding: 0 10px;
	color: #999;
	transition: all 0.3s ease;
}
.form-item input:focus + label,
.form-item input:valid + label {
	font-size: 11px;
	top: -8px;
}
.form-item textarea:focus + label,
.form-item textarea:valid + label {
	font-size: 11px;
	top: -8px;
}
.form-item input:focus + label {
	color: blue;
}
.form-item textarea:focus + label {
	color: blue;
}
.form-register {
	padding: 40px;
	border-radius: 10px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	width: 60%;
	z-index: 9999;
	background: #fff;
}
.form-register button,
.button {
	display: block;
	width: 100%;
	border: none;
	padding: 10px;
	background: #ffa62b;
	border-radius: 50px;
	font-weight: 700;
	color: white;
	transition: 0.5s;
}
.button:disabled {
	background-color: #d1d1d1;
	color: #444;
	opacity: 1;
}

.shape-1 {
	position: absolute;
	left: -10%;
	top: -20%;
	width: 50%;
	opacity: 0.2;
}
.shape-2 {
	position: absolute;
	right: -10%;
	bottom: -20%;
	width: 50%;
	opacity: 0.2;
}
.modal-custom {
	position: fixed;
	left: 0;
	top: 0;
	height: 100vh;
	width: 100%;
	background: #00000055;
	z-index: 9999;
	display: none;
}
.modal-custom .modal-content {
	background: #fff;
	overflow: hidden;
	border-radius: 10px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 25%;
}
.modal-custom-header {
	padding: 15px;
	border-bottom: 1px solid #ddd;
	position: relative;
}
.modal-custom-header .tutup {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 20px;
}
.border-red {
	border: 1px solid rgb(213, 28, 43) !important;
}
.timeline {
	background: #fff;
	border-radius: 10px;
	position: relative;
	margin-top: -240px;
	padding: 20px 60px 60px 60px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
	z-index: 99;
}
.timeline ul {
	display: flex;
	justify-content: space-around;
	list-style-type: none;
	position: relative;
	font-family: "El Messiri", sans-serif;
}
.timeline ul::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	height: 8px;
	background: #e7e7e7;
	border-radius: 4px;
}
.timeline ul li.active::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	height: 8px;
	background: #ffa62b;
	border-radius: 4px;
	z-index: 1;
}
.timeline ul li.active span,
.timeline ul li.active p {
	color: #ffa62b;
}
.timeline ul li {
	padding-top: 30px;
	position: relative;
	flex: 1;
}
.timeline ul li span {
	z-index: 9999;
	position: relative;
}
.timeline ul li span:first-child {
	width: 40px;
	height: 40px;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	background: #fff;
	border: 5px solid #e7e7e7;
	border-radius: 50%;
	left: 0;
	color: #727272;
	top: -5px;
}
.timeline ul li span.finish {
	width: 40px;
	height: 40px;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	background: #fff;
	border: 5px solid #e7e7e7;
	border-radius: 50%;
	right: 0;
	color: #727272;
	top: -5px;
}
.timeline ul li span.active {
	width: 40px;
	height: 40px;
	font-size: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	background: #fff;
	border: 5px solid #ffa62b;
	border-radius: 50%;
	left: 0;
	color: #ffa62b;
	top: -5px;
}
.timeline ul li span.last {
	font-size: 20px;
	position: absolute;
	left: -10px;
	top: -30px;
	font-weight: 700;
}
.timeline ul li p {
	position: absolute !important;
	text-align: center;
	line-height: 15px;
	left: 50%;
	transform: translateX(-50%);
}
iframe {
	width: 100%;
	padding: 20px;
	background: #ffa62b;
	height: 600px;
	border-radius: 10px;
}
#preloader {
	background: #fff;
	position: fixed;
	left: 0;
	top: 0;
	height: 100vh;
	width: 100%;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
}
#preloader img {
	width: 100px;
}
.content-utama::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	background: rgb(214, 214, 225);
	background: radial-gradient(
		circle,
		rgb(241, 241, 255) 0%,
		rgb(255, 255, 255) 100%
	);
	height: 100vh;
}
.top-main {
	display: flex;
	padding: 10px 0;
	align-items: center;
	justify-content: space-between;
}
.top-main img {
	width: 50px;
}
.top-main ul {
	display: flex;
	list-style-type: none;
}
.top-main ul li a {
	display: block;
	padding: 5px 20px;
	font-size: 13px;
	font-weight: 700;
	color: #444;
}
.content-body {
	margin: 30px auto;
	padding: 30px;
	background: #fff;
	z-index: 999;
}
.step-number {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	width: 20%;
	list-style-type: none;
	justify-content: space-between;
}
.step-number li {
	width: 30px;
	height: 30px;
	display: inline-flex;
	place-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 4px solid #ddd;
	background: #110c4c48;
	color: white;
	font-weight: 600;
}
.step-number li.active,
.step-number li:first-child {
	background: #110c4c;
	color: white;
}
.shadow-custom {
	box-shadow: 0 4px 200px rgba(0, 0, 0, 0.06);
}

.scale {
	animation: leaves 20s ease-in-out infinite alternate;
}
@keyframes leaves {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(2);
	}
}
.xbtn {
	padding: 10px 25px;
	border-radius: 3px;
	outline: none;
	border: none;
	display: inline-block;
	font-weight: 600;
	font-size: 11px;
}
.xbtn-lg {
	padding: 10px 25px;
	font-size: 16px;
	font-weight: 500;
}
.xbtn.xbtn-primary {
	background: #5356ff;
	color: white;
}
.xbtn.xbtn-light {
	background: #efefef;
	color: #444;
}
.berkas {
	display: grid;
	list-style-type: none;
	grid-template-columns: 1fr;
	column-gap: 10px;
}
.berkas input {
	display: none;
}
.berkas li label {
	display: block;
	padding: 10px 20px;
	border: 1px dashed #5e5e5e;
	border-radius: 4px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.content-step {
	display: none;
}
.list-items{
	background: #FFF;
	border-radius: 3px;
	overflow: hidden;
	border: 1px solid #ddd;
	display: none;
	position: absolute;
	left: 0;
	top: 40px;
	z-index: 9999;
	width: 100%;
}
.list-items li{
	padding: 8px 10px;
	border-bottom: 1px  dashed #ddd;
}
.list-items li:last-child{
	border: none;
}
.list-items li:hover{
	cursor: pointer;
	background: #5356ff;
	color: white;
}
.list-table {
	width: 100%;
}
.list-table tbody tr td > div {
	background: #fff;
	height: 100%;
	padding: 13px 15px;
	margin-bottom: 10px;
	border-bottom: 1px solid #ddd;
	border-top: 1px solid #ddd;
}
.list-table tbody tr td:first-child > div {
	border-radius: 5px 0 0 5px;
	border-left: 1px solid #ddd;
}
.list-table tbody tr td:last-child > div {
	border-radius: 0 5px 5px 0;
	border-right: 1px solid #ddd;
}

.list-table .fa-envelope {
	font-size: 24px;
}
.list-table a {
	color: #002661;
}
.list-table p {
	-webkit-line-clamp: 1;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	width: 200px;
}
.sidebar-left-fix {
	position: fixed;
	right: 0;
	top: 0;
	height: 100vh;
	width: 400px;
	background: #fff;
	z-index: 99999;
	transition: 0.5s;
	overflow-y: scroll;
	animation: fadeIn 0.2s ease-in-out;
	display: none;
}
.sidebar-left-fix.show {
	right: 0;
	display: block !important;
	opacity: 1;
}
.space-form {
	border-bottom: 1px dashed #ddd;
	padding: 12px;
}
.blur {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #00000069;
	z-index: 999;
	left: 0;
	backdrop-filter: blur(5px);
	display: none;
}
.blur > div {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	width: 50%;
	border-radius: 5px;
}
body.hidden{
	overflow: hidden;
}
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: scale(0.99) translateY(-0.7em);
		transform-origin: top;
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}
.bg-soft {
	border-radius: 25px;
	padding: 3px 10px;
	font-weight: 600;
	font-size: 12px;
	display: inline-flex;
	align-items: center;
}
.blue-soft {
	background: #00276113;
	border: 1px solid #002661;
	color: #002661;
}
.red-soft {
	background: #61002a13;
	border: 1px solid #61002a;
	color: #61002a;
}
.orange-soft {
	background: #fc410013;
	border: 1px solid #fc4100;
	color: #fc4100;
}
.pink-soft {
	background: #ff76ce13;
	border: 1px solid #ff76ce;
	color: #ff76ce;
}
.green-soft {
	background: #29adb213;
	border: 1px solid #29adb2;
	color: #29adb2;
}
.grey-soft {
	background: #a0a0a013;
	border: 1px solid #dfdfdf;
	color: #444;
}
.contact-list{
	position: relative;
	margin-top: 30px;
}
.contact-list li{
	display: grid;
	grid-template-columns: 50px 1fr;
	gap: 15px;
	margin-bottom: 20px;
}
.contact-list li i{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #ffa62b;
}
.sosmed-list{
	display: flex;
	list-style-type: none;
	gap: 10px;
}
.sosmed-list li i{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 5px;
	font-size: 20px;
	color: #fff;
}
.sosmed-list li i.fa-facebook{
	background: #1267e6;
}
.sosmed-list li i.fa-instagram{
	background: #e61298;
}
.sosmed-list li i.fa-youtube{
	background: #e61239;
}
.sosmed-list li i.fa-twitter{
	background: #129fe6;
}
.list-nontable{
	display: flex;
	background: #FFF;
	border: 1px solid #ddd;
	border-radius: 5px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
	justify-content: space-between;
	margin-bottom: 10px;
}
.list-nontable:hover{
	background: #f4f4f4;
	cursor: pointer;
}
.list-nontable>div{
	display: flex;
    flex-direction: column;
	padding: 15px 20px;
}
.list-nontable p{
	flex-grow: 1;
	font-weight: 600;
	font-size: 16px;
	margin: 0;
}
.mumtaaz{
	text-align: center;
	position: relative;
	width: 600px !important;
}
.mumtaaz h2{
	font-size: 40px;
	font-weight: bold;
}
.mumtaaz::before{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	background: url('img/logo.png');
	content: '';
	width: 244px;
	height: 288px;
	opacity: 0.1;
}

@media only screen and (max-width: 768px) {
	.list-nontable{
		display: flex;
		flex-direction: column;
		padding: 15px 0;
	}
	.list-nontable>div{
		padding: 5px 20px;
	}
	.mumtaaz{
		width: 95% !important;
		padding: 30px;
	}
	.top-main img {
		width: 40px;
	}
	.top-main ul {
		display: block;
		position: fixed;
		left: 0;
		top: 0;
		height: 100vh;
		background-color: #fff;
		z-index: 9999;
		width: 50%;
		display: none;
	}
	.p-5 {
		padding: 30px !important;
	}
	.step-number {
		width: 40%;
		list-style-type: none;
	}
	.bg-utama {
		padding: 30px;
	}
	iframe {
		height: 200px;
		padding: 10px;
	}
	.page-header {
		height: 25vh !important;
		margin-bottom: 50px;
	}
	.page-header .content-header {
		top: 80px;
	}
	.page-header .content-header h1 {
		font-size: 30px;
	}
	.modal-custom .modal-content {
		width: 90%;
	}
	.shape-1,
	.shape-2 {
		width: 70%;
	}

	.content-side .content-first {
		display: none;
	}
	.content-side > div {
		flex: 1;
	}
	.form-register {
		width: 95%;
		padding: 40px 20px;
	}
	.content-header a {
		padding: 8px 15px;
	}
	.grid-content {
		grid-template-columns: 1fr;
	}
	.profile {
		flex-direction: column;
	}
	.profile > div {
		left: 0;
		padding: 10px;
		box-shadow: none;
	}
	.profile img {
		width: 100%;
		height: 200px;
		margin-bottom: 20px;
	}
	.profile > div p {
		font-size: 14px;
	}
	.content-header {
		top: 60%;
	}
	.content-header {
		width: 95%;
	}
	.content-header h1 {
		font-size: 19px;
	}
	.content-header p {
		font-size: 14px;
	}
	aside {
		z-index: 999;
	}
	.logo img {
		width: 50px;
	}
	aside {
		width: 90%;
	}
	header {
		height: 50vh;
		margin-bottom: 50px;
	}
	nav ul {
		display: block;
		top: 53px;
		left: 0;
		position: absolute;
		background: #fff;
		width: 100%;
		border-radius: 0 0 10px 10px;
		height: 0;
		overflow: hidden;
		transition: 0.5s;
	}
	nav ul.show {
		height: 280px;
	}
	nav ul li a {
		padding: 10px 20px;
	}
	nav {
		background: #fff;
	}
	.fa-bars {
		font-size: 20px;
	}
	.container-main h1 {
		font-size: 20px;
	}
	.timeline {
		overflow-x: scroll;
		margin-top: -130px;
	}
	.timeline ul {
		width: 250%;
	}
	.timeline ul li span:first-child {
		width: 30px;
		height: 30px;
		font-size: 14px;
		position: absolute;
		background: #fff;
		left: 0;
		top: -1px;
	}

	.timeline ul li.active::after,
	.timeline ul::after {
		height: 4px;
	}
	.timeline {
		padding: 50px 30px 60px 30px;
	}
	.timeline ul li span.last {
		font-size: 16px;
		position: absolute;
		left: -10px;
		top: -25px;
		font-weight: 700;
	}
	.timeline h4 {
		display: none;
	}
	.timeline ul li p {
		width: 100%;
	}

	.search-form {
		width: 70%;
	}
	.search-form.show {
		height: 35px;
	}
}
.top-fixed{
	padding: 20px;
}
.top-fixed>div{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 20px;
	background: #000;
	z-index: 999;
}