@font-face{ font-family:'Proxima Nova'; src:url('../fonts/ProximaNova.ttf') format('truetype'); }

html, body{
	background-color:white;
	color:black;
    max-width: 100vw;
    min-height: 100vh;
	font-family:Proxima Nova;
	font-style: normal;
}

img{
    max-width: 100%;
    max-height: 100%;
}

a{
	text-decoration: none;
	color: black;
}

#nav{
	position:fixed;
	z-index: 1000;
	top:0;
	left:0;
	height: 100px;
	width: 100vw;
}
#sidenav{
	display: none;
	position:fixed;
	z-index:1000;
	top:100px;
	right:0;
	height: calc(100% - 100px);
	width: 80vw;
	background-color:white;
	padding: 10px;
}
#footer{
	height: 100px;
}

h1, h2, h3, h4, h5, h6, h7, .h1, .h2, .h3, .h4, .h5, .h6, .h7{
	font-weight: 400;
	margin: 0px;
}
h1, .h1{
	font-size: 38px;
	line-height: 48px;
}
h2, .h2{
	font-size: 34px;
	line-height: 44px;
}
h3, .h3{
	font-size: 30px;
	line-height: 40px;
}
h4, .h4{
	font-size: 26px;
	line-height: 36px;
}
h5, .h5{
	font-size: 22px;
	line-height: 32px;
}
h6, .h6{
	font-size: 18px;
	line-height: 28px;
}
h7, .h7{
	font-size: 14px;
	line-height: 24px;
}

hr.white{
	margin-top: 20px;
	border-top: 1px solid white;
	opacity: 1;
}

.row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    max-width: 100vw;
}

.mts{
	margin-top:100px;
}

.banner{
    width: 100%;
    height: 220px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.banner.md{
    height: 420px;
}
.banner.lg{
    height: 620px;
}
.banner.xl{
    height: 820px;
}

.brt{
	border-radius: 50px 50px 0px 0px;
}
.br-orange{
	color: white;
	border-radius: 32px;
	border: 3px solid #F90;
	min-width: 300px !important;
}
.br-orange.btn:hover{
	color: #F90;
	border-radius: 32px;
	border: 3px solid white;
	min-width: 300px !important;
}

.br-green{
	color: white;
	border-radius: 32px;
	border: 3px solid #4CAF50;
}
.br-green.btn:hover{
	color: #4CAF50;
	border-radius: 32px;
	border: 3px solid white;
	min-width: 300px !important;
}

.bg-orange{
	background: #F18400;
}
.bg-orange-grad{
	background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(241,132,0,1) 50%, rgba(241,132,0,1) 100%);
}
.bg-brown{
	background: #7B2719;
}
.btn:hover {
    background-color: black;
}

.contact{
	width: 350px !important;
}

.icon{
	max-height: 80px;
	width: 80px;
}
.icon-xs{
	max-height: 10px !important;
	width: 10px !important;
}
.icon-sm{
	max-height: 25px !important;
	width: 25px !important;
}
.icon-md{
	max-height: 40px !important;
	width: 40px !important;
}
.icon-lg{
	max-height: 100px !important;
	width: 100px !important;
}
.icon-xl{
	max-height: 140px !important;
	width: 140px !important;
}

.news-img{
	height: 20vh;
	width: 100%;
}
.news-text{
	height: 130px;
	width: 100%;
}

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

.text-orange{
	color: #FF9900;
}
.text-brown{
	color: #8E4E00;
}
.text-black > *{
	color: #000 !important;
}

@media (max-width:600px) {
	h1, .h1{
		font-size: 22px;
		line-height: 24px;
	}
	h2, .h2{
		font-size: 20px;
		line-height: 22px;
	}
	h3, .h3{
		font-size: 18px;
		line-height: 20px;
	}
	h4, .h4{
		font-size: 16px;
		line-height: 18px;
	}
	h5, .h5{
		font-size: 14px;
		line-height: 16px;
	}
	h6, .h6{
		font-size: 12px;
		line-height: 14px;
	}
	h7, .h7{
		font-size: 10px;
		line-height: 12px;
	}
	.banner.xl{
		min-height: 200px !important;
	}
	.news-text{
		height: 80px;
	}
}
@media (min-width:2000px) {
	.banner.xl{
		min-height: 1000px !important;
	}
}






















#ayam{
    width: 500px;
    padding-top: 50px;
    padding-bottom: 50px;
}