@media (min-width: 768px) and (max-width: 1024px) {
	body, html{
		overflow-x: hidden;
	}
	.font-xl{font-size: 40px;}
	.font-lg{font-size: 16px;}
	.font-md{font-size: 12px;}
	.font-sm{font-size: 8px;}
}
@media (min-width: 320px) and (max-width: 480px) {
	body, html{
		overflow-x: hidden;
	}
	.section{
		max-width: 90vw;
		margin: auto;
	}
	.font-xxl{font-size: 36px;}
	.font-xl{font-size: 32px;}
	.font-lg{font-size: 20px;}
	.font-md{font-size: 16px;}
	.font-sm{font-size: 14px;}
	.font-xs{font-size: 12px;}

	#navbar{
		padding: 0px;
		max-width: 100vw;
		overflow: hidden;
	}
	.navbar-transparent{
		background-color: #fff !important;
		color: #000 !important;
	}
	.navbar-left img{
		width: 100% !important;
	}
	.navbar-line{
		display: none;
	}
	.trigger{
		display: block;
		padding: 25px 0;
	}
	.navbar-right{
		height: 0px;
		padding: 0px;
		opacity: 0;
		overflow: hidden;
		margin-top: 0px;
	}
	.navbar-right ul{
		width: 100%;
	}
	.navbar-right ul li{
		display: block;
		text-align: center;
		font-size: 20px;
		margin-bottom: 10px;
	}
	.navbar-right .limiter{
		display: none;
	}
	.navbar-right.active{
		height: 30vh;
		opacity: 1;
		padding: 20px;
	}

	#masukform .panel-body{
		padding: 30px;
	}

	#tentang .col-md-7{
		padding: 20px;
		text-align: center;
	}

	#bottom-cta{
		padding: 60px 0;
	}

	#footer{
		text-align: center;
	}
	.footer-left img{
		width: 90%;
	}
	.footer-right{
		text-align: center !important;
	}
	.footer-right img{
		height: 40px;
		margin: 10px;
	}
}