@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Bitter:wght@700&display=swap');
body{ font-family: 'Open Sans', sans-serif; }
a{text-decoration:none !important;}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #ccc; }
::-webkit-scrollbar-thumb { background: #eee; border-radius: 10px; border: 1px solid #ddd;}
::-webkit-scrollbar-thumb:hover { background: #ddd; }
:root{--swiper-navigation-size:25px!important;--swiper-theme-color:#0360A5!important}

.font-title{font-family:'Bitter', serif; font-weight:700}
.navbar-brand{padding-top:10px}
.navbar img{height:35px}
.content {min-height:100vh;}
#breadcrumb a{text-decoration:none;}
.jumbotron{/* background:url('https://cutewallpaper.org/21/black-abstract-background/Red-and-Black-Abstract-Backgrounds-62-pictures.jpg') fixed bottom; background-size:cover; */ background:#333; height: 100vh; }
.jumbotron_effect{filter: contrast(50%);-webkit-filter: contrast(50%);}
.jumbotron img{margin-top:10%;width:80%;}
.quality_label{border-bottom-left-radius:10px}
.row{overflow:hidden}

.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.swiper-button-next,.swiper-button-prev,.swiper-pagination .pagination{color:#000!important;fill:#000!important;stroke:#000!important;padding:19px 15px;border-radius:5px;background:#fff;opacity:.3}
.swiper-pagination-bullet .swiper-pagination-bullet-active{background:#333; color: #333}

.gerai-cover{height: 350px;}
.gerai-photo{width: 170px; height: 170px; border: 3px solid #fff; background-color: #fff; box-shadow: 0px 1px 3px #888; background-size: cover; z-index:1;margin-left:auto;margin-right:auto}
.price_label{position:relative; bottom:5px;}
.drop_cap:first-letter{float:left;font-size:75px;line-height:60px;padding-top:4px;padding-right:8px;padding-left:3px}
.dropdown-backdrop {position: static;} /* Repair Bootstrap Dropdown */
.form-control{height:36px;}
.form-control:focus{border-color: #BB988F; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(169 125 113 / 60%); box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(169 125 113 / 60%);}
textarea.form-control{height:90px;}

/* Pembuatan Pallete Warna: https://coolors.co/gradient-palette/0360a5-044474?number=6*/
.custom{background-color:#0360A5!important;}
.custom.darken-1{background-color:#035A9B!important;}
.custom.darken-2{background-color:#035591!important;}
.custom.darken-3{background-color:#044F88!important;}
.custom.darken-4{background-color:#044A7E!important;}
.custom.darken-5{background-color:#044474!important;}
.custom.lighten-1{background-color:#307DB7!important;}
.custom.lighten-2{background-color:#5C9AC9!important;}
.custom.lighten-3{background-color:#89B8DA!important;}
.custom.lighten-4{background-color:#B5D5EC!important;}
.custom.lighten-5{background-color:#E2F2FE!important;}
.custom-text{color:#0360A5!important;}
.custom-text.text-darken-1{color:#035A9B!important;}
.custom-text.text-darken-2{color:#035591!important;}
.custom-text.text-darken-3{color:#044F88!important;}
.custom-text.text-darken-4{color:#044A7E!important;}
.custom-text.text-darken-5{color:#044474!important;}
.custom-text.text-lighten-1{color:#307DB7!important;}
.custom-text.text-lighten-2{color:#5C9AC9!important;}
.custom-text.text-lighten-3{color:#89B8DA!important;}
.custom-text.text-lighten-4{color:#B5D5EC!important;}
.custom-text.text-lighten-5{color:#E2F2FE!important;}
.custom-border{border-color:#0360A5!important;}
.custom-border.border-darken-1{border-color:#035A9B!important;}
.custom-border.border-darken-2{border-color:#035591!important;}
.custom-border.border-darken-3{border-color:#044F88!important;}
.custom-border.border-darken-4{border-color:#044A7E!important;}
.custom-border.border-darken-5{border-color:#044474!important;}
.custom-border.border-lighten-1{border-color:#307DB7!important;}
.custom-border.border-lighten-2{border-color:#5C9AC9!important;}
.custom-border.border-lighten-3{border-color:#89B8DA!important;}
.custom-border.border-lighten-4{border-color:#B5D5EC!important;}
.custom-border.border-lighten-5{border-color:#E2F2FE!important;}
.custom-text-link a,.custom-text-link-sub a:hover,.custom-text-link-sub a:active,.custom-text-link-sub a:focus{color:#0360A5!important}
.custom-text-link.link-text-darken-1 a,.custom-text-link-sub.sub-link-text-darken-1 a:hover,.custom-text-link-sub.sub-link-text-darken-1 a:active,.custom-text-link-sub.sub-link-text-darken-1 a:focus{color:#035A9B!important}
.custom-text-link.link-text-darken-2 a,.custom-text-link-sub.sub-link-text-darken-2 a:hover,.custom-text-link-sub.sub-link-text-darken-2 a:active,.custom-text-link-sub.sub-link-text-darken-2 a:focus{color:#035591!important}
.custom-text-link.link-text-darken-3 a,.custom-text-link-sub.sub-link-text-darken-3 a:hover,.custom-text-link-sub.sub-link-text-darken-3 a:active,.custom-text-link-sub.sub-link-text-darken-3 a:focus{color:#044F88!important}
.custom-text-link.link-text-darken-4 a,.custom-text-link-sub.sub-link-text-darken-4 a:hover,.custom-text-link-sub.sub-link-text-darken-4 a:active,.custom-text-link-sub.sub-link-text-darken-4 a:focus{color:#044A7E!important}
.custom-text-link.link-text-darken-5 a,.custom-text-link-sub.sub-link-text-darken-5 a:hover,.custom-text-link-sub.sub-link-text-darken-5 a:active,.custom-text-link-sub.sub-link-text-darken-5 a:focus{color:#044474!important}
.custom-text-link.link-text-lighten-1 a,.custom-text-link-sub.sub-link-text-lighten-1 a:hover,.custom-text-link-sub.sub-link-text-lighten-1 a:active,.custom-text-link-sub.sub-link-text-lighten-1 a:focus{color:#307DB7!important}
.custom-text-link.link-text-lighten-2 a,.custom-text-link-sub.sub-link-text-lighten-2 a:hover,.custom-text-link-sub.sub-link-text-lighten-2 a:active,.custom-text-link-sub.sub-link-text-lighten-2 a:focus{color:#5C9AC9!important}
.custom-text-link.link-text-lighten-3 a,.custom-text-link-sub.sub-link-text-lighten-3 a:hover,.custom-text-link-sub.sub-link-text-lighten-3 a:active,.custom-text-link-sub.sub-link-text-lighten-3 a:focus{color:#89B8DA!important}
.custom-text-link.link-text-lighten-4 a,.custom-text-link-sub.sub-link-text-lighten-4 a:hover,.custom-text-link-sub.sub-link-text-lighten-4 a:active,.custom-text-link-sub.sub-link-text-lighten-4 a:focus{color:#B5D5EC!important}
.custom-text-link.link-text-lighten-5 a,.custom-text-link-sub.sub-link-text-lighten-5 a:hover,.custom-text-link-sub.sub-link-text-lighten-5 a:active,.custom-text-link-sub.sub-link-text-lighten-5 a:focus{color:#E2F2FE!important}
.custom-button,.custom-button-sub:hover,.custom-button-sub:active,.custom-button-sub:focus,.custom-bg:hover,.custom-bg:active,.custom-bg:focus{background-color:#ffeb3b!important}
.custom-button.button-darken-1,.custom-button-sub.sub-button-darken-1:hover,.custom-button-sub.sub-button-darken-1:active,.custom-button-sub.sub-button-darken-1:focus,.custom-bg.bg-darken-1:hover,.custom-bg.bg-darken-1:active,.custom-bg.bg-darken-1:focus{background-color:#035A9B!important}
.custom-button.button-darken-2,.custom-button-sub.sub-button-darken-2:hover,.custom-button-sub.sub-button-darken-2:active,.custom-button-sub.sub-button-darken-2:focus,.custom-bg.bg-darken-2:hover,.custom-bg.bg-darken-2:active,.custom-bg.bg-darken-2:focus{background-color:#035591!important}
.custom-button.button-darken-3,.custom-button-sub.sub-button-darken-3:hover,.custom-button-sub.sub-button-darken-3:active,.custom-button-sub.sub-button-darken-3:focus,.custom-bg.bg-darken-3:hover,.custom-bg.bg-darken-3:active,.custom-bg.bg-darken-3:focus{background-color:#044F88!important}
.custom-button.button-darken-4,.custom-button-sub.sub-button-darken-4:hover,.custom-button-sub.sub-button-darken-4:active,.custom-button-sub.sub-button-darken-4:focus,.custom-bg.bg-darken-4:hover,.custom-bg.bg-darken-4:active,.custom-bg.bg-darken-4:focus{background-color:#044A7E!important}
.custom-button.button-darken-5,.custom-button-sub.sub-button-darken-5:hover,.custom-button-sub.sub-button-darken-5:active,.custom-button-sub.sub-button-darken-5:focus,.custom-bg.bg-darken-5:hover,.custom-bg.bg-darken-5:active,.custom-bg.bg-darken-5:focus{background-color:#044474!important}
.custom-button.button-lighten-1,.custom-button-sub.sub-button-lighten-1:hover,.custom-button-sub.sub-button-lighten-1:active,.custom-button-sub.sub-button-lighten-1:focus,.custom-bg.bg-lighten-1:hover,.custom-bg.bg-lighten-1:active,.custom-bg.bg-lighten-1:focus{background-color:#307DB7!important}
.custom-button.button-lighten-2,.custom-button-sub.sub-button-lighten-2:hover,.custom-button-sub.sub-button-lighten-2:active,.custom-button-sub.sub-button-lighten-2:focus,.custom-bg.bg-lighten-2:hover,.custom-bg.bg-lighten-2:active,.custom-bg.bg-lighten-2:focus{background-color:#5C9AC9!important}
.custom-button.button-lighten-3,.custom-button-sub.sub-button-lighten-3:hover,.custom-button-sub.sub-button-lighten-3:active,.custom-button-sub.sub-button-lighten-3:focus,.custom-bg.bg-lighten-3:hover,.custom-bg.bg-lighten-3:active,.custom-bg.bg-lighten-3:focus{background-color:#89B8DA!important}
.custom-button.button-lighten-4,.custom-button-sub.sub-button-lighten-4:hover,.custom-button-sub.sub-button-lighten-4:active,.custom-button-sub.sub-button-lighten-4:focus,.custom-bg.bg-lighten-4:hover,.custom-bg.bg-lighten-4:active,.custom-bg.bg-lighten-4:focus{background-color:#B5D5EC!important}
.custom-button.button-lighten-5,.custom-button-sub.sub-button-lighten-5:hover,.custom-button-sub.sub-button-lighten-5:active,.custom-button-sub.sub-button-lighten-5:focus,.custom-bg.bg-lighten-5:hover,.custom-bg.bg-lighten-5:active,.custom-bg.bg-lighten-5:focus{background-color:#E2F2FE!important}


@media (min-width: 768px) and (max-width: 992px){
	/* p{
		font-size:13px;
	} */
	.drop_cap:first-letter {
		font-size:60px;
	}
}
@media (max-width: 768px) {
	.navbar-header {
		  text-align:center;
	}
	#form_pendaftaran .text-center{text-align:left;}
}

@media (max-width:500px) and (max-height: 700px) {
	
}

@media (max-width:700px) and (max-height: 500px) {
	
}

/* Bootstrap 3 Responsive */
@media (min-width: 200px) and (max-width: 300px) {}
	.gerai-cover{height: 150px;}
}
@media (min-width: 301px) {
	.gerai-cover{height: 200px;}
}
@media (min-width: 768px) {
	.gerai-cover{height: 250px;}
}
@media (min-width: 992px) {
	.gerai-cover{height: 300px;}
}
@media (min-width: 1200px) {
	
}