@media screen and (max-width: 768px)
{
	/*====================================== SECTION DEFAULT ======================================*/
	h1 { font-size: 40px; line-height: 44px;}
	h2 { font-size: 30px; line-height: 32px;}
	h3 { font-size: 18px; line-height: 26px;}
	h4 { font-size: 16px; line-height: 24px;}
	h5 { font-size: 15px; line-height: 23px;}
	h6 { font-size: 12px; line-height: 20px;}
	.miles-head{
		line-height: 54px;
	}
	.miles-category{
		line-height: 42px;
	}
	p.miles-semi.p-heading
	{
		font-size: 18px;
	}
	/*====================================== SECTION NAVBAR ======================================*/
	header .container-nav
	{
		padding: 0px 15px;
	}
	header nav
	{
		height: 40px;
	}
	header #navigation .logo
	{
		margin-top: 0;
	}
	header #navigation .logo img.navbar-logo
	{
		width: 75px;
		height: 75px;
		margin-top: 0;
	}
	.close-wrapper
	{
		position: absolute;
		top: 50px;
		left: 30px;
	}
	.nav-toggle
	{
		margin-right: -20px;
		display: block;
	}
	img.navbar-logo
	{
		width: 60px;
		margin-top: 15px;
		margin-left: 0;
	}
	ul.menu-right
	{
		/*display: none;*/
		top: 0;
		position: fixed;
		transform: translateX(2000px);
		right: 0;
		width: 75%;
		height: 100vh;
		background-color: #fff;
		transition: all 0.6s;
		box-shadow: 0 8px 18px 0 rgba(0,0,0,.18);
	}
	ul.menu-right .wrapper-menu
	{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: flex-end;
		align-items: flex-end;
		width: 100%;
		height: 100vh;
		background-color: #030200;
		box-shadow: 0 8px 18px 0 rgba(0,0,0,.18);
		background-image: url("../images/footer-left.png"), url("../images/footer-right.png");
		background-size: 150px 150px, 150px 150px;
		background-repeat: no-repeat, no-repeat;
		background-position: top left, bottom right;
	}
	ul.menu-right li
	{
		display: inline-block;
		margin-bottom: 5px;
	}
	ul.menu-right li a
	{
		color: #fff;
		font-size: 18px;
	}
	/*====================================== SECTION LANDING PAGE ======================================*/
	section.section-hero
	{
		/*padding-top: 80px;*/
		margin-top: 0;
		height: 550px;
		background-size: contain;
		background-position: bottom;
		margin-bottom: 50px;
	}
	.hero-image
	{
		opacity: 0.7;
	}
	.hero-container
	{
		margin-top: 40px;
	}
	.hero-container .dash
	{
		margin: 10px 0;
	}
	.home-about-left .image
	{
		max-width: 320px;
	}
	.home-about-right
	{
		margin-top: 40px;
		height: auto;
	}
	.home-about-right .cta
	{
		text-align: center;	
	}
	.product-home .word .cta
	{
		margin-top: 15px;
	}
	.product-card {
		padding: 15px 5px;
	}
	.product-card .dash {
		margin: 5px auto 10px auto;
	}
	section.section-product-home
	{
		margin-bottom: 20px;
	}
	.brand-card
	{
		padding: 0 15px;
		margin-bottom: 10px;
	}
	section.section-home-brand
	{
		margin-bottom: 20px;
	}
	.location-home.store
	{
		height: 350px;
	}
	.location-home .word .cta
	{
		text-align: center;
	}
	.location-home .map
	{
		margin-left: -15px;
	}
	section.section-contact-home
	{
		margin-bottom: 40px;
	}
	.event-card
	{
		padding: 0 30px;
		bottom: 0;
	}
	.event-card .wrapper
	{
		padding: 15px 30px;
	}
	.event-card .wrapper .title,
	.event-card .wrapper .cta
	{
		padding: 0 10px;
	}
	.button-slide .swiper-button-prev
	{
		left: 0;
	}
	.button-slide .swiper-button-next
	{
		right: 0;
	}
	section.section-event-home
	{
		padding-bottom: 40px;
		margin-bottom: 0;
	}
	/*====================================== SECTION STORE LOCATION ======================================*/
	.hero-banner
	{
		height: 100%;
		padding-top: 40px;
	}
	.hero-wrapper
	{
		height: 70vh;
		justify-content: flex-end;
	}
	section.section-location-store
	{
		margin-top: 40px;
	}
	.card-store
	{
		padding: 15px;
	}
	.card-store .address
	{
		min-height: auto;
		max-height: 100%;
	}
	section.section-join
	{

	}
	.store-join
	{
		padding: 30px 15px;
		background-size: 200px;
	}
	.store-join .image
	{
		max-width: 200px;
		opacity: 0.4;
	}
	.row-join
	{
		margin-top: 40px;
	}
	/*====================================== SECTION CONTACT PAGE ======================================*/
	section.section-contact
	{
		height: 50vh;
	}
	.hero-contact .hero-word .dash,
	.contact-office .dash,
	.hero-event .hero-word .dash
	{
		margin: 5px 0;
	}
	.contact-info
	{
		margin: 0 15px;
	}
	.contact-info .icon
	{
		margin: 10px auto 10px auto;
	}
	.contact-socmed .socmed
	{
		margin: 0 10px;
	}
	.contact-socmed .socmed .image
	{
		width: 48px;
		height: 48px;
	}
	/*====================================== SECTION ABOUT PAGE ======================================*/
	section.hero-banner.about
	{
		background-position: top right;
	}
	.hero-about
	{
		height: 60vh;
		justify-content: flex-end;
		margin-bottom: 40px;
	}
	.hero-about .dash
	{
		margin: 10px 0;
	}
	section.section-about.one
	{
		height: 100%;
		background-size: 200px 200px, contain;
	}
	.about-two .image
	{
		width: 100%;
		margin-left: -100px;
	}
	.about-one
	{
		padding-bottom: 40px;
	}
	.about-two
	{
		margin-top: 20px;
		height: 100%;
		display: block;
	}
	.about-two .image
	{
		width: 950px;
		height: 100%;
		margin-left: -100px;
	}
	.about-two .wrapper
	{
		padding: 30px;
	}
	section.section-about.three
	{
		margin-top: 60px;
		padding: 0;
	}
	.about-three
	{
		margin-top: 40px;
	}
	.about-three .word,
	.about-four .wrapper
	{
		height: 100%;
		display: block;
	}
	section.section-about.four
	{
		background-size: 200px 200px;
	}
	.about-four .image
	{
		margin: 20px auto 0 auto;
	}
	/*====================================== SECTION PRODUCT & BANNER PAGE ======================================*/
	.hero-banner.brand-partner
	{
		background-size: contain;
		margin-top: 70px;
	}
	.hero-banner.brand-partner .hero-about
	{
		height: 50vh;
	}
	section.section-product
	{
		background-size: 300px 300px;
		margin-bottom: 40px;
	}
	.product-card.product
	{
		background-size: 125px;
	}
	.product-card.product .image
	{
		height: 200px;
		margin-bottom: 20px;
	}
	section.section-partner
	{
		background-size: contain, 300px 300px;
	}
	.section-partner .home-brand
	{
		margin-bottom: 20px;
	}
	.section-partner .brand-card
	{
		margin-bottom: 20px;
	}
	/*====================================== SECTION EVENT PROMOTION PAGE ======================================*/
	section.section-event
	{
		margin-bottom: 40px;
	}
	.hero-image-event
	{
		height: 400px;
	}
	.hero-event .hero-image
	{
		margin-top: 70px;
	}
	.hero-event .hero-word
	{
		margin-top: -100px;
	}
	.card-event
	{
		margin-bottom: 30px;
	}
	.card-event .category
	{
		margin-bottom: 0;
	}
	.card-event .title
	{
		margin-bottom: 0;
	}
	/*====================================== SECTION FOOTER PAGE ======================================*/
	footer.footer
	{
		background-size: 150px 150px, 200px;
		background-position: top left, bottom right;
	}
}