*, ::after, ::before {
	box-sizing: border-box
}

html {
	line-height: 1.15;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	background: rgb(24 26 27);
	background-size: 200% 200%;
	-webkit-animation: AnimationName 20s ease infinite;
	-moz-animation: AnimationName 20s ease infinite;
	animation: AnimationName 20s ease infinite;
}

@-webkit-keyframes AnimationName {
	0% {
		background-position: 0 86%
	}
	50% {
		background-position: 100% 15%
	}
	100% {
		background-position: 0 86%
	}
}

@-moz-keyframes AnimationName {
	0% {
		background-position: 0 86%
	}
	50% {
		background-position: 100% 15%
	}
	100% {
		background-position: 0 86%
	}
}

@keyframes AnimationName {
	0% {
		background-position: 0 86%
	}
	50% {
		background-position: 100% 15%
	}
	100% {
		background-position: 0 86%
	}
}

body {
	font-family: 'Montserrat', sans-serif;
	line-height: 1.42857143;
	color: #000;
	margin: 0;
}

body, html {
	overflow-x: hidden;
	height: 100%
}

.container {
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
	background-color: transparent;
	color: #fff;
	border: .5vmin solid;
	border-image: linear-gradient(to right, #163d3e, #163d3e) 1; 
}

@media only screen and (min-device-width :320px) and (max-device-width:720px) {
	body {
		font-family: Gill Sans, Gill Sans MT, Calibri, sans-serif;
		font-size: .9em;
		font-weight: 300;
	}
	.container {
		height: auto;
		padding: 5px;
		margin: 10px auto;
	}
}

@media only screen and (min-device-width :721px) and (max-device-width:2160px) {
	body {
		font-family: Gill Sans, Gill Sans MT, Calibri, sans-serif;
		font-size: 1em;
		font-weight: 300;
	}
	.container {
		height: auto;
		padding: 5px;
		margin: 10px auto;
		overflow: hidden;
	}
}

@media print {
	body {
		color: #000;
		background: #fff
	}
}

h1, .welcome {
	font-family: Optima, Segoe, Segoe UI, Candara, Calibri, Arial, sans-serif;
	font-size: 1.4rem;
	line-height: 25px;
	text-transform: uppercase;
	text-shadow: #7a7a7a 1px 1px 1px
}

h2 {
	font-family: Optima, Segoe, Segoe UI, Candara, Calibri, Arial, sans-serif;
	font-size: 1.2rem;
	color: #fff;
	text-shadow: 1px 1px #000;
	text-transform: uppercase
}

h1, h2, h3 {
	line-height: 25px;
}

@keyframes blink {
	from {
		color: #fff
	}
	to {
		color: #adff2f
	}
}

@-webkit-keyframes blink {
	from {
		color: #fff
	}
	to {
		color: #adff2f
	}
}

h1 {
	animation-duration: 1.2s;
	animation-name: blink;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes blink {
	from {
		color: rgb(21, 172, 202)
	}
	to {
		color: rgb(23, 188, 1)
	}
}

@-webkit-keyframes blink {
	from {
		color: rgba(255, 234, 0, 0.721)
	}
	to {
		color: #ff0
	}
}

.logo {
	border: 0;
	margin-top: 10px
}

a {
	color: #aea29e;
	text-decoration: none
}

.wrapper {
	display: inline-block
}

.headerContent {
	width: 100%;
	height: auto;
	margin-top: 40px !important
}

.header {
	display: block;
	margin: 0 auto;
	width: 100%;
	max-width: 100%;
	box-shadow: none;
	background-color: #000000;
	position: fixed;
	height: 60px !important;
	overflow: hidden;
	z-index: 10;
	color: #ddff00;
	opacity: .75
}

#sidebarMenu {
	height: 100%;
	position: fixed;
	left: 0;
	width: 250px;
	margin-top: 60px;
	transform: translateX(-250px);
	transition: transform 250ms ease-in-out;
	background: #020002;
	opacity: 1;
	z-index: 999
}

.sidebarMenuInner {
	margin: 0;
	padding: 0;
	border-top: 1px solid rgba(255, 255, 255, .1)
}

.sidebarMenuInner li {
	list-style: none;
	color: #fff;
	text-transform: uppercase;
	font-weight: 700;
	padding: 20px;
	cursor: pointer;
	border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.sidebarMenuInner li span {
	display: block;
	font-size: .9rem;
	color: rgba(255, 255, 255, .5)
}

.sidebarMenuInner li a {
	color: #fff;
	text-transform: uppercase;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none
}

input[type=checkbox]:checked~#sidebarMenu {
	transform: translateX(0)
}

input[type=checkbox] {
	transition: all .3s;
	box-sizing: border-box;
	display: none
}

.sidebarIconToggle {
	transition: all .3s;
	box-sizing: border-box;
	cursor: pointer;
	position: absolute;
	z-index: 99;
	height: 100%;
	width: 100%;
	top: 22px;
	left: 15px;
	height: 22px;
	width: 22px
}

.spinner {
	transition: all .3s;
	box-sizing: border-box;
	position: absolute;
	height: 3px;
	width: 100%;
	background-color: #fff
}

.horizontal {
	transition: all .3s;
	box-sizing: border-box;
	position: relative;
	float: left;
	margin-top: 3px
}

.diagonal.part-1 {
	position: relative;
	transition: all .3s;
	box-sizing: border-box;
	float: left
}

.diagonal.part-2 {
	transition: all .3s;
	box-sizing: border-box;
	position: relative;
	float: left;
	margin-top: 3px
}

input[type=checkbox]:checked~.sidebarIconToggle>.horizontal {
	transition: all .3s;
	box-sizing: border-box;
	opacity: 0
}

input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-1 {
	transition: all .3s;
	box-sizing: border-box;
	transform: rotate(135deg);
	margin-top: 8px
}

input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-2 {
	transition: all .3s;
	box-sizing: border-box;
	transform: rotate(-135deg);
	margin-top: -9px
}

.headTitle {
	text-align: center;
	display: block;
	font-size: 1.5em;
	margin-block-start: .83em;
	margin-block-end: .83em;
	margin-inline-start: 0;
	margin-inline-end: 0;
	font-weight: 700;
	text-transform: uppercase
}

.center {
	text-align: center
}

*, ::after, ::before {
	box-sizing: border-box
}

/* Button Css*/

.myButton {
	box-shadow: inset 0px 1px 0px 0px #ffffff;
	background: linear-gradient(to bottom, #0fdfff 0, #010a0a 100%);
	border-radius: 6px;
	border: 1px solid #ffffff;
	display: inline-block;
	cursor: pointer;
	color: #eab701;
	font-family: Arial;
	font-size: .9rem;
	font-weight: bold;
	padding: 6px 24px;
	text-decoration: none;
	text-shadow: 0px 1px 0px #000000;
	box-shadow: 0 0 15px #25201d;
}

.myButton:hover {
	background: linear-gradient(to bottom, #03b98e 5%, #a20453 100%);
	background-color: #22c20d;
}

.myButton:active {
	position: relative;
	top: 1px;
}
/* Table */

#mySearchHunter303 {
	width: 100%;
	padding: 12px 20px;
	margin: 8px 0;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	/* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;
	/* Firefox, other Gecko */
	box-sizing: border-box;
	/* Opera/IE 8+ */
	background-image: url('https://www.sipalingindex.shop/img/bag.jpg');
	background-position: 10px 10px;
	background-repeat: no-repeat;
	padding: 12px 20px 12px 40px;
}

#myTableHunter303 {
	width: 100%;
	max-width: 100%;
	padding: 0;
	border-spacing: 0;
	border-collapse: collapse;
}

#myTableHunter303 th {
	font-weight: bold;
	padding: 5px;
	background: linear-gradient(0deg, #363808 0%, #185466 50%, #082d38 100%);
	color:#f9f9f9;
	border-color: #454d55;
	line-height: 1.42857143;
	text-transform: uppercase;
	font-size: 1rem;
}

#myTableHunter303 td {
	letter-spacing: 1px;
	text-transform: capitalize;
	font-size: .9rem;
	padding: 8px 10px;
	line-height: 1.42857143;
	vertical-align: middle;
	border-top: 1px solid #dee2e6;
}

#myTableHunter303 tr.header, #myTableHunter303 tr:hover {
	background-color: #666666;
}

/* Penomoran otomatis pada baris */

.css-serial {
	counter-reset: serial-number;
	/* Atur penomoran ke 0 */
}

.css-serial td:first-child:before {
	counter-increment: serial-number;
	/* Kenaikan penomoran */
	content: counter(serial-number);
	/* Tampilan counter */
}

.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

a {
	text-decoration: none;
	text-transform: uppercase;
	color: #ffffff;
}

.hot-img {
	background-image: url('https://www.sipalingindex.shop/img/speaker.png');
	background-position: relative;
	background-repeat: no-repeat;
	padding: 5px 20px 12px 40px;
	top: -10px;
	margin-left: 5px;
}

.logo-hunter303 {
	border: 0;
	margin-top: 10px;
}

legend {
	color: #fa004f;
	border: 1px solid #fff;
	border-radius: 5px;
	padding: 2px 2px 3px 2px;
	text-transform: uppercase;
}

legend h4, h3 {
	font-size: .9rem;
	line-height: 0px;
}

fieldset {
	color: #fff;
	text-shadow: 1px 1px #000000;
}

fieldset {
	border: 1px solid #fff;
	border-radius: 5px;
	margin-top: 20px;
}

.collapsible {
	background: #aa1515;
	background: -webkit-gradient(linear, left top, left bottom, from(#aa1515), to(#aa1515));
	background: -moz-linear-gradient(top, #aa1515, #aa1515);
	background: linear-gradient(to bottom, #ff0066, #06a67e6e);
	color: #ffffff;
	cursor: pointer;
	padding: 18px;
	width: 100%;
	border: 0px solid #ffffff;
	border-radius: 5px;
	text-align: center;
	text-transform: uppercase;
	font-size: 1rem;
}

.active, .collapsible:hover {
	background-color: #555;
}

.list-situs-lengkap {
	width: 100%;
	display: none;
}

.list-situs-terbaik {
	width: 100%;
}

.active, .collapsible:hover {
	background-color: #555;
}

@media (min-width:576px) {
	.container {
		max-width: 540px
	}
}

@media (min-width:768px) {
	.container {
		max-width: 735px
	}
}

@media (min-width:992px) {
	.container {
		max-width: 960px
	}
}

@media (min-width:1200px) {
	.container {
		max-width: 1140px
	}
}

/* List Card*/

.card_btn {
	background-color: #000;
	cursor: pointer;
	font-size: .5rem;
}

.card_btn {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	padding: .8rem;
	width: 100%;
	border: 1px solid #aa1515;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	background: #899aaa;
	background: -webkit-gradient(linear, left top, left bottom, from(#1f3a51), to(#aa1515));
	background: -moz-linear-gradient(top, #1f3a51, #aa1515);
	background: linear-gradient(to bottom, #1f3a51, #aa1515);
	-webkit-box-shadow: #082d38 0 0 40px 0;
	-moz-box-shadow: #082d38 0 0 40px 0;
	box-shadow: #082d38 0 0 40px 0;
	text-shadow: #082d38 1px 1px 1px;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase
}

.card_btn:hover {
	border: 1px solid #e35a10;
	background: #ff8c19;
	background: -webkit-gradient(linear, left top, left bottom, from(#ff8c19), to(#da5610));
	background: -moz-linear-gradient(top, #ff8c19, #da5610);
	background: linear-gradient(to bottom, #ff8c19, #da5610);
	color: #fff;
}

.card_btn:active {
	background: #aa1515;
	background: -webkit-gradient(linear, left top, left bottom, from(#aa1515), to(#aa1515));
	background: -moz-linear-gradient(top, #aa1515, #aa1515);
	background: linear-gradient(to bottom, #aa1515, #aa1515);
	text-transform: uppercase;
}

.card_btn:focus {
	text-transform: uppercase
}

.cards {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cards_item {
	display: flex;
	padding: .2rem;
}

@media (min-width:15rem) {
	.cards_item {
		width: 25%;
	}
	.card_btn {
		font: normal normal bold 2vw arial;
	}
}

@media (min-width:56rem) {
	.cards_item {
		width: 20%;
	}
	.card_btn {
		font: normal normal bold 1vw arial;
	}
}

.card {
	background: linear-gradient(to bottom, #185466 0, #082d38 100%);
	border-radius: .25rem;
	box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .25);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.card_content {
	background: #000;
}

.card_title {
	color: #fff;
	font-size: .9rem;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: capitalize;
	margin: 0;
}

.card_text {
	color: #fff;
	font-size: .875rem;
	line-height: 1.5;
	margin-bottom: 1rem;
	font-weight: 400;
}

.img {
	height: auto;
	max-width: 100%;
	vertical-align: middle;
}

.artikel {
	text-align: justify;
	font-size: 1rem;
	line-height: 1.6;
}

.copyright {
	color: #fff;
	font-size: .9em;
	text-align: center
}

#footer {
	margin-top: 50px;
	margin-bottom: 20px;
	height: auto;
	max-width: 100%;
	background: 0 0
}

#menu ul, #menu-footer {
	margin: 0;
	padding: 0;
	list-style: none
}

#menu-footer {
	margin: 15px 0 5px 0;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.6;
}

#menu-footer li {
	display: inline-block;
	padding: 0 3px;
}

#menu-footer li:first-child {
	border: none
}

#menu-footer li a {
	color: #fff;
}

.rating {
	font-size: 10px;
}