input[type="text"] {
	width: 100%;
	border: 2px solid #aaa;
	border-radius: 4px;
	margin: 8px 0;
	outline: none;
	padding: 8px;
	box-sizing: border-box;
	transition: 0.3s;
	background-color: #821F1F;
	color: white;
	border-radius: 12px;

}

input[type="password"] {
	width: 100%;
	border: 2px solid #aaa;
	border-radius: 4px;
	margin: 8px 0;
	outline: none;
	padding: 8px;
	box-sizing: border-box;
	transition: 0.3s;
	background-color: #821F1F;
	color: white;
	border-radius: 12px;

}


input[type="text"]:focus {
	border-color: rgb(237, 238, 240);
	box-shadow: 0 0 8px 0 rgb(0, 4, 8);
}

input[type="password"]:focus {
	border-color: rgb(237, 238, 240);
	box-shadow: 0 0 8px 0 rgb(0, 4, 8);
}

.inputWithIcon input[type="text"] {
	padding-left: 40px;
}

.inputWithIcon input[type="password"] {
	padding-left: 40px;
}

.inputWithIcon {
	position: relative;
}

.inputWithIcon i {
	position: absolute;
	left: 0;
	top: 8px;
	padding: 9px 8px;
	color: rgb(236, 236, 236);
	transition: 0.3s;
}

.inputWithIcon input[type="text"]:focus+i {
	color: rgb(0, 4, 8);
}

.inputWithIcon.inputIconBg i {
	background-color: #821F1F;
	color: #821F1F;
	padding: 9px 4px;
	border-radius: 4px 0 0 4px;
}

.inputWithIcon.inputIconBg input[type="text"]:focus+i {
	color: #821F1F;
	background-color: #821F1F;
}

::placeholder {
	/* Chrome, Firefox, Opera, Safari 10.1+ */

	opacity: 1;
	/* Firefox */
}

.tombol {
	background-color: #BE191A;
	color: white;
	border-radius: 12px;
}

.tombol:hover {
	background-color: rgb(0, 4, 8);
	color: white;
}

input[type=checkbox]+label {
	color: rgb(0, 4, 8);
	font-style: italic;
}

input[type=checkbox]:checked+label {
	color: rgb(0, 4, 8);
	font-style: normal;
}

.link {
	color: black;
}

.circle {
	border: 4px solid #FFFFFF;
	border-radius: 50%;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	filter: alpha(opacity=80);
	opacity: 0.8;

	-webkit-box-shadow: 0 0 1px 0px #FFFFFF;
	box-shadow: 1 1 1px 1px #FFFFFF;
	width: 85px;
	height: 85px;
	z-index: 86;
	-webkit-transition: background-color .5s ease-in-out;
	-moz-transition: background-color .5s ease-in-out;
	-o-transition: background-color .5s ease-in-out;
	-ms-transition: background-color .5s ease-in-out;
	transition: background-color .5s ease-in-out;
}

.circle-red {
	border: 4px solid #A32727;
	border-radius: 50%;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	filter: alpha(opacity=80);
	opacity: 1;

	-webkit-box-shadow: 0 0 1px 0px #A32727;
	box-shadow: 1 1 1px 1px #A32727;
	width: 100px;
	height: 100px;
	z-index: 86;
	-webkit-transition: background-color .5s ease-in-out;
	-moz-transition: background-color .5s ease-in-out;
	-o-transition: background-color .5s ease-in-out;
	-ms-transition: background-color .5s ease-in-out;
	transition: background-color .5s ease-in-out;
}

.atau {
	color: #FFFFFF;
	margin-top: 17px;
	margin-left: 4px;
}

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 75%;
	height: 10%;
	margin-bottom: 20px;
	padding-left: 8px;
	padding-right: 8px;
}

.capture {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 75%;
}

#content {
	height: 1000px;
}

.kuning {
	border-radius: 12px;
	width: 130px;
}

.footer {
	height: 80px;
	margin-left: -20px;
	margin-right: -20px;
	position: relative;
}

.text {
	color: #eee;
}

.card-head {
	background-color: #BE1B1C;
	color: white;
}

.judul {
	color: #000;

}

.login {
	height: 800px;
}

.ukuran {
	height: 472px;
}

.news {
	width: 250px;
}

.author {
	border-radius: 0.5rem;
	background: #F5F5F5
}

.kiri {
	border-right: 0px;
	border-top: 0px;
	border-bottom: 0px;
}

.no-border {
	border-right: 0px;
	border-top: 0px;
	border-bottom: 0px;
	border-left: 0px;
}

.card-artikel {
	border-right: 0px;
	border-top: 0px;
	border-bottom: 0px;
	border-left: 0px;

}

.card-keterangan {
	background: #EBEBEB;
	color: #000;
	width: 300px;
	margin-top: -15px;
}

.video {
	height: 400px;
}

#backgroundimage {
	width: 870px;
	height: 350px;
	padding-bottom: 70px
}

.layanan {
	height: 379px;
}

.float {
	position: absolute;
	width: 100px;
	height: 100px;
	bottom: 20em;
	right: 57em;
	background-color: #A32727;
	border-radius: 50%;

}

.card {
	border-radius: 10px;
}

.navbar {
	border-radius: 10px;
}

.card-view {
	width: 342px;
}

.card-no-border {
	border-radius: 0;
}

.kanan {

	margin-right: -75px;
}

.kiri {
	margin-left: -75px;
}

/* DDF1F4 */
.bg-dark {
	background-color: #F5F5F5 !important;
}

.card-new {
	displaY: block;
	float: left;
	width: 33.33%;
	text-align: center;
	color: white;
	font-family: 'Calibri';
}

.sempit {
	z-index: 1;
}

.tambah {
	height: 200px;
}

/* mixin for multiline */
.module {
	width: 100%;
	margin: 0 0 1em 0;
	overflow: hidden;
}

.module p {
	margin: 0;
}

.line-clamp {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;

}

p.innerCircleBlue {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #A32727;
	border: 5px Solid #fff;
	color: #fff;
	min-width: 1em;
	border-radius: 50%;
	vertical-align: middle;
	padding: 20px;
	box-shadow: 0px -0px 0px 3px #A32727;
	-webkit-box-shadow: 0px -0px 0px 3px #A32727;
	-moz-box-shadow: 0px -0px 0px 3px #A32727;
	margin: 5px;
}

p.innerCircleBlue:before {
	content: '';
	float: left;
	width: auto;
	padding-bottom: 100%;
}

p.normal {
	font-weight: normal;
}

[aria-expanded="false"]>.expanded,
[aria-expanded="true"]>.collapsed {
	display: none;
}

/* BELLOW JUST STYLING */
.container-link {
	margin-top: 30px;
	padding-top: 30px;
	padding-bottom: 30px;
	background-color: #efefef;
}

.content {
	margin: auto;
	padding: 40px;
	background: #EBEBEB;
	margin-bottom: 30px;

}

.anelka-text {
	text-align: justify;
	text-justify: inter-word
}

.gambar {
	margin-top: -20px;
	margin-left: 82%;
	width: 300px;
	height: 100%;
	padding-top: 20px;
	margin-bottom: -25px
}

.gambar-text {
	position: absolute;
	z-index: 1;
}

.nempel {
	margin-top: -22px
}

#gambar {
	background-image: url('https://pami2.olmatix.com/assets/anelka_test/ccc.png');
	background-position: left;
	width: 100%;
	height: 99%;
	margin-top: 5%;
	padding: 3%;
	position: absolute;
}

.cihuy {
	margin-right: 2%
}

#merah {
	background: #A32727
}

.atas {
	margin-top: -5%;
}

.text-cihuy {
	text-overflow: ellipsis;
}

.bungkus {
	width: 100%;
	height: 0;
	border-style: solid;
	border-width: 130px 1200px 0 0;
	border-color: #333333 transparent transparent transparent;

}

hr.new4 {
	border: 3px solid black;
}

body {
	width: 100%;
}

.panjang {
	height: 260px;
}