@import url(https://fonts.googleapis.com/css?family=Roboto:400);
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400);
@import url(https://fonts.googleapis.com/css?family=Lora);
@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:500);
@import url('https://fonts.googleapis.com/css?family=Raleway:400&display=swap');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Quicksand:500&display=swap');
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');
@import url('https://fonts.googleapis.com/css?family=Assistant:800&display=swap');
@import url('https://fonts.googleapis.com/css?family=Vollkorn&display=swap');
@import url('https://fonts.googleapis.com/css?family=Baskervville&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&display=swap');
@import url('https://fonts.googleapis.com/css?family=Merriweather&display=swap');
@import url('https://fonts.googleapis.com/css?family=Asap:700&display=swap');


body {
	padding-right: 0 !important;
	margin: 0 auto;
	padding: 0;
	overflow-x: hidden;
}

body::-webkit-scrollbar{
	width: 0.5em;
	background-color: white;
}

body::-webkit-scrollbar-track {
	border-left: solid 1px lightgray;
}

header>nav::-webkit-scrollbar{
    width: 0.5em;
}
 
header>nav::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
			box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
}
 
header>nav::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

input {
	font-family: 'Roboto', sans-serif;
	color: #363636;
}

input:focus {
	outline: none;
}

input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: darkgray;
  opacity: 1; /* Firefox */
}

select:focus {
	outline: none;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}


/*----TOP BAR & NAVIGASI----*/
header {
	position: fixed;
	width: 100%;
	height: 70px;
	z-index: 50;
}

.top {
	position: fixed;
	width: 100%;
	height: 0px;
	background-color: #fff7e0;
	box-shadow: 0px 2px 10px #ffe79e;
	opacity: 0.9;
	transition: all 0.3s ease;
}

.strip-container {
	float: left;
	position: relative;
	margin: 15px 0px 0px 20px;
	padding: 10px 0px;
	width: 52px;
	border-right: solid 1px #ebb000;
	z-index: 15;
}

.menu-button {
	width: 32px;
	cursor: pointer;
}

.strip-1 {
	width: 30px;
	border: solid 1px #ebb000;
	transition: all 0.3s ease;
}

.strip-2, .strip-3 {
	margin-top: 5px;
	width: 30px;
	border: solid 1px #ebb000;
	transition: all 0.3s ease;
}

.menu-button:hover>.strip-2 {
	width: 20px;
}

.menu-button:hover>.strip-3 {
	width: 10px;
}

.strip-container-2 {
	width: 350px;
	height: 30px;
	z-index: 15;
}

.bukopin-logo-mobile {
	float: left;
	margin-top: 10px;
	margin-left: 20px;
	width: 150px;
	z-index: 30;
}

.bukopin-logo-mobile>img {
	width: 160px;
}

.menu-button-2 {
	float: left;
	margin-top: 10px;
	margin-left: 120px;
	width: 30px;
	cursor: pointer;
}

header>nav {
	position: fixed;
	margin-left: -360px;
	height: 100%;
	background-color: #F9FCFA;
	overflow-y: scroll;
	transition: all 0.3s ease;
	z-index: 30;
}

.list {
	list-style-type: none;
	padding-left: 20px;
	padding: 0;
	margin: 0;
	margin-top: 70px;
	text-indent: 20px;
	width: 350px;
	font-size: 15px;
	color: #363636;
}

.first-list {
	border-top: solid 1px #e8e8e8;
}

.list>a>li {
	border-bottom: solid 1px #e8e8e8;
}

.list-hover {
	position: absolute;
	width: 0px;
	height: 59px;
	transition: all 0.5s ease;
	z-index: -1;
}

.list>a {
	text-decoration: none;
	color: #363636;
	transition: all 0.5s ease;
}

.list>a>li>p, .list>li>p {
	padding: 17px 0px;
	margin: 0;
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
	letter-spacing: 0.6px;
	font-weight: bold;
	color: grey;
	content: '\25BC';
}

.list>a>li:hover>.list-hover {
	width: 350px;
	background-color: #ebb000;
	content: '\25BC';
}

.list>a>li:hover>p {
	color: white;
	content: '\25BC';
}

.list>li {
	width: 350px;
	font-family: 'Raleway', sans-serif;
	font-weight: bold;
	color: #363636;
	border-bottom: solid 1px #e8e8e8;
	cursor: pointer;
}

.list>li:hover>.list-hover {
	width: 350px;
	background-color: #ebb000;
}

.list>li:hover>p {
	color: white;
}

.list>li>ul {
	display: none;
	list-style-type: none;
	padding: 0;
	text-indent: 30px;
}

.list>li>ul>a {
	text-decoration: none;
}

.list>li>ul>a>li {
	background-color: #ebebeb;
}

.list>li>ul>a>li>p {
	padding: 9px 0px;
	letter-spacing: 0.5px;
	margin: 0;
	font-size: 14px;
	color: #99959B;
	transition: all 0.3s ease;
}

.list>li>ul>a>li:hover>p {
	color: #ebb000;
}

.bukopin-logo {
	float: left;
	position: relative;
	margin-top: 8px;
	margin-left: 30px;
	z-index: 30;
}

.bukopin-logo>a>img {
	width: 170px;
}

.search-container {
	float: right;
	position: relative;
	margin: 15px 20px 0px 0px;
	width: 235px;
	background-color: white;
	border: solid 1px #ebb000;
	border-radius: 10px;
	z-index: 20;
}

.search-container>input {
	float: left;
	padding: 0px 10px;
	margin-right: 5px;
	width: 200px;
	height: 35px;
	background-color: transparent;
	border: unset;
	border-right: solid 1px lightgray;
}

.search-container>div {
	height: 35px;
	cursor: pointer;
}

.search-container>div>img {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.search-container-mobile {
	display: none;
	float: right;
	position: relative;
	margin: 15px 20px 0px 0px;
	cursor: pointer;
	z-index: 20;
}

#search-input-mobile {
	float: left;
	position: relative;
	padding: 0px 10px;
	margin: 20px auto;
	left: 50%;
	width: 90%;
	height: 35px;
	font-size: 15px;
	border: solid 2px lightgray;
	transform: translateX(-50%);
	z-index: 30;
}

#myModalNotif {
	padding: 0;
	text-align: justify;
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
}




/*----CAROUSEL (BANNER)----*/

.bghome {
	position: absolute;
	width: 100%;
	overflow: hidden;
	z-index: -1;
}

#carouselBannerMobile {
	display: none;
	width: 100%;
	height: 400px;
}

#carousel-caption-banner {
	left: 8%;
	right: 53%;
	top: 20%;
	bottom: unset; 
	transform: translateY(-25%); 
	text-align: justify;
}

#caption-banner-mobile {
	position: relative;
	left: 14%;
	right: unset;
	bottom: unset; 
	margin-top: 85px;
	width: 300px;
	/**text-align: left;**/
}

.carousel-caption>h1 {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 35px;
	margin-bottom: 10px;
	text-shadow: 0px 0.5px 2.5px #D5A824;
	color: #88693A;
	text-align: left;
	width: fit-content;
}

.carousel-caption>p {
	width: 500px;
	line-height: 20px;
	letter-spacing: 0.2px;
	color: #68450D;
}

.tombol-banner, .tombol-banner-mobile {
	padding: 12px 0px;
	width: 200px;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 0.5px;
	background-image: linear-gradient(to bottom, #ffdd00, #F5B41D);
	color: white;
	cursor: pointer;
	border-radius: 25px;
	box-shadow: 0px 3px 5px 0px #ebb000;
	transition: all 0.3s ease;
}

.tombol-banner:hover {
	background-image: linear-gradient(to bottom, #856919, #5c480e);
}

.tombol-banner-mobile:hover {
	background-color: #d6a000;
}

.banner-arrow {
	font-size: 40px;
	color: gray;
}

.banner-arrow:hover {
	background-image: #3b3b3b;
}




/*----FOOTER----*/

footer {
	width: 100%;
	background-color: #404040;
}

.footer-box-container {
	display: flex;
	justify-content: center;
	padding: 50px 0px;
}

.footer-box {
	margin: 0px 20px;
	width: 350px;
}

#footer-company, #footer-link, #footer-socmed {
	float: left;
}

.footer-title {
	font-size: 22px;
	font-weight: bold;
	color: white;
}

.footer-desc {
	font-size: 13px;
	line-height: 18px;
	color: darkgray;
}

.link-list {
	list-style: none;
	padding-left: 15px;
	margin: 0;
}

.link-list>li::before {
	content: "\2022";
	color: darkgray;
	font-weight: bold;
	display: inline-block; 
	width: 1em;
	margin-left: -1em;
}

.link-list>li>a {
	text-decoration: none;
	font-size: 13px;
	line-height: 18px;
	color: darkgray;
	transition: all 0.3s ease;
}

.link-list>li>a:hover {
	color: white;
}

.bufincare {
	margin-top: 30px;
}

.socmed-list {
	list-style-type: none;
	padding-left: 0px;
}

.socmed-list>li {
	display: inline-block;
	transition: all 0.3s ease;
}

.socmed-list>li:hover {
	filter: grayscale(100%);
}

.ojk-desc {
	margin-top: 50px;
	font-size: 13px;
	line-height: 18px;
	color: darkgray;
}

.ojk {
	margin: 0px;
}

.copyright {
	bottom: 0;
	padding: 10px 0px;
	width: 100%;
	background-color: #262626;
	text-align: center;
	font-size: 11px;
	font-family: 'Arial', sans-serif;
	color: gray;
}

.copyright>p {
	margin: 0;
}