@media only screen and (min-device-width: 0) and (max-device-width: 768px)
{
	.btn-utama
	{
		font-size: 16px;
		padding: 10px 15px;
	}
	/*====================================== SECTION LANDING PAGE ======================================*/
	section.section-home-hero
	{
		padding-bottom: 100px;
	}
	.home-hero .word .hero-tagline, .about-hero .word .hero-tagline
	{
		max-width: 250px;
	}
	.home-hero .image
	{
		padding: 0 15px;
	}
	.home-hero .word
	{
		padding: 0 15px;
	}
	.home-about-bg
	{
		overflow: hidden
	}
	.home-about-top
	{
		bottom: 35px;
		right: -30px;
		width: 120px;
		height: 100px;
	}
	.home-intermezo
	{
		padding: 0 15px;
	}
	section.section-home-about
	{
		margin-bottom: 0;
	}
	.row-middle
	{
		flex-direction: column;
	}
	.home-about-line
	{
		bottom: -50px;
	}
	.home-about .image
	{
		max-width: 320px;
		margin: -75px auto 15px auto;
	}
	.home-multi-bg
	{
		height: 50px;
	}
	.home-multi-bg-bottom
	{
		margin-top: -10px;
		z-index: 1;
		height: 150px;
	}
	section.section-home-multi
	{
		padding-top: 100px;
		background-size: 100px, contain, 200px;
		background-position: top left -35px, center center, bottom 100px right;
		margin-bottom: 0;
	}
	.home-multi-right
	{
		top: -25px;
		right: -50px;
		width: 175px;
		height: 175px;
	}
	section.section-home-product
	{
		height: 250px;
		background-size: contain, 75px, 75px;
		background-position: center center, top left, top right;
		margin-bottom: 0;
	}
	section.section-home-product .subject-heading
	{
		max-width: 250px;
		margin-bottom: 0;
	}
	.home-contact-top
	{
		height: 150px;
	}
	.home-product-left
	{
		width: 150px;
	}
	section.section-home-client
	{
		margin-bottom: -10px;
	}
	section.section-home-client .subject-heading
	{
		margin-bottom: 75px;
	}
	.client-top-left
	{
		max-width: 100px;
		top: 0px;
		left: 0;
	}
	.client-top-right
	{
		max-width: 100px;
		top: 25px;
		right: 0;
	}
	.client-bottom-left
	{
		max-width: 100px;
		bottom: -100px;
		left: -25px;
	}
	section.section-home-client .container
	{
		overflow: hidden;
	}
	.col-transition:nth-child(1) .client-card,
	.col-transition:nth-child(3) .client-card,
	.col-transition:nth-child(5) .client-card,
	.col-transition:nth-child(7) .client-card,
	.col-transition:nth-child(9) .client-card,
	.col-transition:nth-child(11) .client-card

	{
		animation-duration: 0.6s;
		animation-delay: 0.6s;
	}
	.col-transition:nth-child(2) .client-card,
	.col-transition:nth-child(4) .client-card,
	.col-transition:nth-child(6) .client-card,
	.col-transition:nth-child(8) .client-card,
	.col-transition:nth-child(10) .client-card,
	.col-transition:nth-child(12) .client-card
	{
		animation-duration: 0.9s;
		animation-delay: 1.2s;
	}
	.client-card .cover .image
	{
		height: 175px;
	}
	.contact-phone
	{
		top: -100px;
	}
	.contact-phone .image
	{
		max-width: 300px;
		width: 100%;
	}
	section.section-contact
	{
		height: 100%;
		padding-top: 0;
		margin-bottom: 0;
	}
	section.section-contact .subject-heading
	{
		max-width: 250px;
		margin-top: 150px;
		margin-left: 0;
	}
	/*====================================== SECTION ABOUT PAGE ======================================*/
	section.section-about-hero .about-hero
	{
		padding-top: 80px;
	}
	.about-hero .word
	{
		padding: 0 15px;
	}
	section.section-about-hero
	{
		padding-bottom: 100px
	}
	section.section-home-about.section-about
	{
		padding: 25px 0 125px 0
	}
	section.section-home-about.section-about .home-about-top
	{
		z-index: 1;
		top: -225px;
		right: 0;
		width: 175px;
		height: 175px;
	}
	section.section-home-about.section-about .home-about .image
	{
		margin-top: -75px;
		max-width: 150px;
		margin-bottom: 10px;
	}
	section.section-home-about.section-about .about-left
	{
		left: -125px;
		bottom: -20px;
		max-width: 110px;
	}
	.home-about .image
	{
		margin-bottom: 0;
	}
	.home-about .word
	{
		margin-top: 10px;
		text-align: center;
	}
	.home-about-bottom
	{
		height: 200px;
	}
	.about-image
	{
		transform: scale(1.5) translate(0, 35px);
	}
	.about-intermezo
	{
		bottom: 0;
		margin: 70px auto 0 auto;
		padding: 0 15px;
	}
	.about-intermezo-right
	{
		z-index: 1;
		top: -170px;
		max-width: 125px;
	}
	section.section-about-intermezo
	{
		padding-bottom: 0;
		margin-bottom: 0;
	}
	section.section-about-intermezo .container-fluid
	{
		width: 100%;
		padding: 0;
		overflow: hidden;
	}
	.different-top
	{
		height: 375px;
	}
	.different-top-left
	{
		top: -250px;
		left: 0;
		max-width: 175px;
	}
	.different-top-right
	{
		top: -225px;
		max-width: 100px;
	}
	section.section-different
	{
		height: 450px;
	}
	section.section-different .subject-heading
	{
		margin-bottom: 0;
	}
	.col-different:nth-child(1),
	.col-different:nth-child(5)
	{
		margin-left: -20px;
	}
	.col-different:nth-child(6)
	{
		margin-right: 0;
	}
	.different-card
	{
		margin-bottom: 0;
	}
	.different-card .image
	{
		height: 125px;
	}
	.different-bottom
	{
		height: 150px;
	}
	/*====================================== SECTION PRODUCT PAGE ======================================*/
	section.section-product-hero
	{
		height: 100%;
		background-position: top right;
		background-size: 250px;
		text-align: left;
		padding: 100px 0 0 0;
		margin-bottom: 0;
	}
	.product-hero .word
	{
		margin: 0 0 0 0;
	}
	.productone-top-left
	{
		top: -200px;
		left: -30px;
		max-width: 125px;
	}
	section.section-product-one, section.section-product-two, section.section-product-three,
	section.section-product-four, section.section-product-five, section.section-product-six, section.section-product-seven, section.section-product-eight
	{
		margin-bottom: 0;
	}
	.productfive-transition,
	.productseven-transition,
	.producteight-transition
	{
		margin-top: 0;
		background-position: center top 20px;
	}
	.product-card .image
	{
		height: 200px;
	}
	.product-card .action a
	{
		font-size: 18px;
	}
	.productone-right
	{
		max-width: 175px;
	}
	section.section-product-one
	{
		padding-bottom: 50px;
	}
	section.section-product-two
	{
		padding-bottom: 25px;
	}
	.producttwo-transition
	{
		height: 250px;
	}
	.productthree-top-left
	{
		top: -225px;
		max-width: 125px;
		left: -30px;
	}
	.productthree-top-right
	{
		top: -175px;
		right: 0;
		max-width: 100px;
	}
	section.section-product-three
	{
		padding-bottom: 0;
		background-image: url("../images/productthree-bg-1.png"),
		url("../images/productthree-bg-2.png");
		background-size: 200px, contain;
		background-position: center left -75px, top 100px right -150px;
	}
	.productfour-transition
	{
		margin-top: -2px;
		height: 200px;
	}
	section.section-product-four
	{
		padding-bottom: 50px;
		background-size: 150px, 150px;
		background-position: bottom 75px left, top right 0;
	}
	.productfour-top-left
	{
		top: -100px;
		left: -25px;
		max-width: 150px;
	}
	.productfour-top-right
	{
		top: -175px;
		max-width: 100px;
	}
	section.section-product-five
	{
		padding-bottom: 0;
		background-size: 200px, contain;
		background-repeat: no-repeat;
		background-position: bottom 0 left -100px, top right 0;
	}
	.productfive-top-left
	{
		max-width: 175px;
		top: -275px;
		left: -40px;
	}
	.productfive-top-right
	{
		top: -150px;
		max-width: 125px;
	}
	.productsix-transition
	{
		margin-top: -5px;
	}
	.producttsix-top-right
	{
		top: -150px;
		max-width: 100px;
	}
	.producttseven-top-right
	{
		max-width: 125px;
	}
	.producteight-top-right
	{
		top: -150px;
		right: 25px;
		max-width: 50px;
	}
	/*====================================== SECTION CONTACT PAGE ======================================*/
	section.section-contact-page
	{
		margin-top: 80px;
		padding: 15px;
	}
	section.section-contact-page .container
	{
		padding: 80px 20px;
		background-position: center top;
	}
	.contact-top-right
	{
		top: -50px;
		max-width: 125px;
	}
	.contact-bottom-left
	{
		display: none;
		bottom: 0;
		left: -25px;
		max-width: 125px;
	}
	.contact-bottom
	{
		margin-top: -50px;
		margin-bottom: 50px;
	}
	/*====================================== SECTION PRODUCT DETAIL PAGE ======================================*/
	section.section-product-detail
	{
		padding-top: 60px;
		background-image: none;
	}
	.product-detail .image
	{
		height: 300px;
	}
	.product-detail-transition
	{
		height: 200px;
	}
	.productdetail-top-left
	{
		max-width: 150px;
		top: -75px;
	}
	.productdetail-top-right
	{
		max-width: 125px;
		top: -100px;
	}
	.product-detail .spec .available .wrapper
	{
		margin-right: 10px;
	}
	section.section-product-more
	{
		margin-bottom: 0;
	}
	/*====================================== SECTION 404 PAGE ======================================*/
	section.notfound-page
	{
		margin-bottom: 0;
	}
	.notfound
	{
		height: 100%;
		padding: 15px 0;
	}
	.notfound .image
	{
		max-width: 720px;
		margin: 0 75px;
	}
	/*====================================== SECTION FOOTER PAGE ======================================*/
	footer.footer
	{
		margin-bottom: 0;
		background-size: 150px 150px, 200px;
		background-position: top left, bottom right;
	}
	.footer-logo
	{
		margin-top: -80px;
	}
	.footer-logo .image
	{
		max-width: 125px;
		margin-bottom: 15px;
	}
	.footer-left
	{
		top: -90px;
		left: -20px;
	}
	.footer-left .image
	{
		max-width: 80px;
	}
	.footer-menu
	{
		margin-top: -30px;
	}
	.footer-menu ul
	{
		margin-left: 0;
	}
	.footer-menu ul li
	{
		margin: 0 5px;
	}
	.footer-menu ul li a
	{
		font-size: 18px;
	}
	.footer-copyright .image
	{
		margin: 0 0 15px 0;
	}
}
/*TAB VIEW*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
{
	.nav--open
	{
		background-position: center bottom;
	}
	.btn-utama
	{
		padding: 10px 15px;
	}
	/*====================================== SECTION LANDING PAGE ======================================*/
	section.section-home-hero
	{
		padding-bottom: 100px;
	}
	.home-hero .word .hero-tagline, .about-hero .word .hero-tagline
	{
		max-width: 300px;
	}
	.home-hero .image
	{
		padding: 0 15px;
	}
	.home-hero .word
	{
		padding: 0 15px;
	}
	.home-about-top
	{
		top: -50px;
		width: 150px;
		height: 15vh;
	}
	.home-intermezo
	{
		max-width: 480px;
		padding: 0 15px;
	}
	section.section-home-about
	{
		margin-bottom: 0;
	}
	section.section-home-about .home-about-bg
	{
		height: 225px;
	}
	.row-middle
	{
		flex-direction: row;
	}
	section.section-home-about .row-middle
	{
		margin-top: -125px;
	}
	.home-about .image
	{
		max-width: 320px;
		margin: 20px auto 15px auto;
	}
	.home-multi-bg
	{
		height: 50px;
	}
	.home-multi-bg-bottom
	{
		z-index: 0;
		height: 100px;
	}
	section.section-home-multi
	{
		padding-top: 100px;
		background-size: 125px, contain, 300px, 300px, contain;
		background-position: top left 0, center top, center right -100px;
		margin-bottom: 0;
	}
	section.section-home-multi .subject-heading
	{
		max-width: 480px;
		margin-bottom: 0;
	}
	.home-multi-right
	{
		top: -150px;
		width: 175px;
		height: auto;
		right: -50px;
	}
	.multi-card .image
	{
		max-width: 275px;
		height: 275px;
	}
	section.section-home-product
	{
		height: 350px;
		background-size: contain, 125px, 150px;
		margin-bottom: 0;
	}
	section.section-home-product .subject-heading
	{
		max-width: 100%;
	}
	.home-contact-top
	{
		height: 150px;
	}
	.home-product-left
	{
		width: 150px;
	}
	.contact-phone
	{
		top: -100px;
	}
	.contact-phone .image
	{
		max-width: 350px;
		width: 100%;
	}
	section.section-contact
	{
		height: 100%;
		padding-top: 0;
		margin-bottom: 0;
	}
	section.section-contact .subject-heading
	{
		max-width: 350px;
		margin-top: 150px;
		margin-left: 0;
	}
	section.section-home-client
	{
		margin-bottom: -5px;
	}
	.col-transition:nth-child(1) .client-card,
	.col-transition:nth-child(7) .client-card
	{
		animation-duration: 0.6s;
	}
	.col-transition:nth-child(2) .client-card,
	.col-transition:nth-child(8) .client-card
	{
		animation-duration: 0.9s;
	}
	.col-transition:nth-child(3) .client-card,
	.col-transition:nth-child(9) .client-card
	{
		animation-duration: 1.2s;
	}
	.col-transition:nth-child(4) .client-card,
	.col-transition:nth-child(10) .client-card
	{
		animation-duration: 1.5s;
	}
	.col-transition:nth-child(5) .client-card,
	.col-transition:nth-child(11) .client-card
	{
		animation-duration: 1.8s;
	}
	.col-transition:nth-child(6) .client-card,
	.col-transition:nth-child(12) .client-card
	{
		animation-duration: 2.1s;
	}
	.client-top-left
	{
		max-width: 125px;
		top: 25px;
		left: 0;
	}
	.client-top-right
	{
		max-width: 125px;
		top: 100px;
		right: 0;
	}
	.client-bottom-left
	{
		max-width: 125px;
		bottom: -150px;
		left: 0;
	}
	.client-card .cover .image
	{
		height: 225px;
	}
	/*====================================== SECTION ABOUT PAGE ======================================*/
	section.section-about-hero .about-hero
	{
		padding-top: 80px;
	}
	.about-hero .word
	{
		padding: 0 15px;
	}
	section.section-about-hero
	{
		padding-bottom: 100px;
		margin-bottom: 0;
	}
	section.section-about-hero .home-intermezo
	{
		margin-top: -40px;
		margin-bottom: 30px;
	}
	.home-about-bg
	{
		height: 175px;
	}
	section.section-home-about.section-about
	{
		padding: 0 0 125px 0;
	}
	.home-about-line .image
	{
		width: 150px;
	}
	section.section-home-about.section-about .home-about-top
	{
		z-index: 2;
		top: -225px;
		width: 200px;
		height: 200px;
	}
	section.section-home-about.section-about .home-about .image
	{
		max-width: 150px;
		margin-bottom: 10px;
	}
	section.section-home-about.section-about .about-left
	{
		left: -180px;
		bottom: -40px;
		max-width: 150px;
	}
	.home-about .image
	{
		margin-bottom: 0;
	}
	.home-about .word
	{
		margin-top: 10px;
		text-align: left;
	}
	.home-about-bottom
	{
		margin-top: -100px;
		height: 200px;
	}
	.about-image
	{
		/*margin-top: -75px;*/
		transform: none;
	}
	.about-intermezo
	{
		margin: 15px auto 25px auto;
		padding: 0 15px;
	}
	.about-intermezo-right
	{
		top: -200px;
		max-width: 175px;
	}
	section.section-about-intermezo
	{
		padding-bottom: 0;
		margin-bottom: 0;
	}
	section.section-about-intermezo .container
	{
		width: 100%;
	}
	.different-top
	{
		height: 350px;
	}
	.different-top-left
	{
		top: -300px;
		left: 0;
		max-width: 175px;
	}
	.different-top-right
	{
		top: -250px;
		max-width: 150px;
	}
	section.section-different
	{
		height: 450px;
	}
	section.section-different .subject-heading
	{
		margin-bottom: 0;
	}
	.col-different:nth-child(1),
	.col-different:nth-child(5)
	{
		margin-left: -20px;
	}
	.col-different:nth-child(6)
	{
		margin-right: 0;
	}
	.different-card
	{
		margin-bottom: 0;
	}
	.different-card .image
	{
		height: 150px;
	}
	.different-bottom
	{
		height: 150px;
	}
	/*====================================== SECTION PRODUCT PAGE ======================================*/
	section.section-product-hero
	{
		height: 100%;
		background-position: top right;
		background-size: 400px;
		text-align: left;
		padding: 100px 0 0 0;
		margin-bottom: 0;
	}
	.product-hero .word
	{
		margin: 0 0 0 0;
	}
	.productone-top-left
	{
		top: -200px;
		left: -30px;
		max-width: 125px;
	}
	section.section-product-one, section.section-product-two, section.section-product-three,
	section.section-product-four, section.section-product-five, section.section-product-six, section.section-product-seven, section.section-product-eight
	{
		margin-bottom: 0;
	}
	.producttwo-transition,
	.productsix-transition
	{
		margin-top: -5px;
	}
	.product-card .image
	{
		height: 200px;
	}
	.product-card .action a
	{
		font-size: 18px;
	}
	.productone-right
	{
		max-width: 200px;
	}
	section.section-product-one
	{
		position: relative;
		margin-top: -75px;
		background-size: 300px, 300px;
		background-position: center left -200px, top right -50px;
		padding-bottom: 50px;
	}
	section.section-product-two
	{
		padding-bottom: 25px;
	}
	.producttwo-transition
	{
		height: 250px;
	}
	.productthree-top-left
	{
		top: -225px;
		max-width: 125px;
		left: -30px;
	}
	.productthree-top-right
	{
		top: -200px;
		max-width: 125px;
	}
	section.section-product-three
	{
		background-image: url(../images/productthree-bg-1.png), url(../images/productthree-bg-2.png);
		background-size: contain, 500px;
		background-position: bottom left -100px, center right -150px;
		padding-bottom: 0;
	}
	.productfour-transition
	{
		height: 200px;
	}
	section.section-product-four
	{
		position: relative;
		background-size: 200px, 300px;
		background-repeat: no-repeat;
		background-position: bottom 100px left, bottom right -150px;
		padding-bottom: 50px;
	}
	.productfour-top-left
	{
		top: -75px;
		left: -25px;
		max-width: 200px;
	}
	.productfour-top-right
	{
		top: -175px;
		max-width: 125px;
	}
	section.section-product-five
	{
		background-image: url(../images/productfive-line-1.png), url(../images/productfive-line-2.png);
		background-size: 300px, contain;
		background-position: center left -150px, top right 0;
		padding-bottom: 0;
	}
	.productfive-top-left
	{
		max-width: 250px;
		top: -275px;
		left: -40px;
	}
	.productfive-top-right
	{
		top: -200px;
		max-width: 200px;
	}
	/*====================================== SECTION CONTACT PAGE ======================================*/
	section.section-contact-page
	{
		margin-top: 80px;
		padding: 15px;
	}
	section.section-contact-page .container
	{
		padding: 80px 20px;
		background-position: center top;
	}
	.contact-top-right
	{
		top: -75px;
		max-width: 175px;
	}
	.contact-bottom-left
	{
		display: none;
		bottom: 0;
		left: -25px;
		max-width: 125px;
	}
	.contact-bottom
	{
		margin-top: -25px;
		margin-bottom: 50px;
	}
	/*====================================== SECTION PRODUCT DETAIL PAGE ======================================*/
	section.section-product-detail
	{
		background-image: none;
	}
	.product-detail .image
	{
		height: 450px;
	}
	.product-detail-transition
	{
		height: 200px;
	}
	.productdetail-top-left
	{
		max-width: 250px;
		top: -100px;
	}
	.productdetail-top-right
	{
		max-width: 175px;
		top: -125px;
	}
	section.section-product-more
	{
		margin-bottom: 0;
	}
	.product-detail .spec .available .wrapper
	{
		margin-right: 0;
	}
	/*====================================== SECTION 404 PAGE ======================================*/
	section.notfound-page
	{
		margin-bottom: 0;
	}
	.notfound
	{
		height: 100%;
		padding: 15px 0;
	}
	.notfound .image
	{
		max-width: 720px;
		margin: 0 75px;
	}
	/*====================================== SECTION FOOTER PAGE ======================================*/
	footer.footer
	{
		margin-bottom: 0;
		background-size: 150px 150px, 200px;
		background-position: top left, bottom right;
	}
	.footer-left
	{
		top: -50px;
		left: -20px;
	}
	.footer-left .image
	{
		max-width: 200px;
	}
	.footer-menu ul
	{
		margin-left: 0;
	}
	.footer-menu ul li
	{
		margin-bottom: 20px;
	}
	.footer-copyright .image
	{
		margin: 0 0 15px 0;
	}
}

@media only screen and (min-device-width: 0) and (max-device-width: 1024px)
{
	/*====================================== SECTION DEFAULT ======================================*/
	h1 { font-size: 32px; line-height: 46px;}
	h2 { font-size: 26px; 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;}
	p
	{
		font-size: 16px;
	}
	.safe-head
	{
		line-height: 38px;
	}
	.safe-category
	{
		line-height: 42px;
	}
	.safe-semi
	{
		line-height: 26px;
	}
	p.safe-semi.p-heading
	{
		font-size: 18px;
	}
	.navbar-space
	{
		margin-top: 80px;
	}
	section
	{
		margin-bottom: 50px;
	}
	.btn-background
	{
		font-size: 18px;
	}
	/*====================================== SECTION NAVBAR ======================================*/
	.navbar--container
	{
		position: fixed;
		z-index: 10;
		top: 0;
		background: transparent;
		height: auto;
		width: auto;
	}
	.navbar--title
	{
		display: inline-block;
	}
	.navbar--title .navbar-menu
	{
		flex-direction: row-reverse;
		margin-left: 0;
		padding: 10px 5px;
		border-top-right-radius: 0;
		border-bottom-right-radius: 20px;
	}
	.navbar--title .nav-toggle
	{
		transform: rotate(0deg);
		float: left;
		display: inline-block;
		width: 38px;
		margin-top: 10px;
		margin-left: 10px;
	}
	.navbar--title h4
	{
		display: inline-block;
		margin-top: -3px;
		margin-left: 0;
		margin-right: 10px;
		font-weight: 700;
		-webkit-transform: rotate(0);
		transform: rotate(0);
		-ms-writing-mode: horizontal-tb;
		-webkit-writing-mode: horizontal-tb;
		writing-mode: horizontal-tb;
	}
	.nav--open
	{
		transform: translateX(-720px);
	}
	.nav--open-title .logo
	{
		max-width: 100px;
	}
	.nav--open-menu a
	{
		font-size: 22px;
	}
}