@media only screen and (min-device-width: 0) and (max-device-width: 767px)
{
	.maka-head
	{
		line-height: 46px;
	}
	/*====================================== SECTION LANDING PAGE ======================================*/
	.home-sequence
	{
		height: 275vh;
	}
	.home-element
	{
		transform: scale(1.5);
	}
	.home-sequence .home-scrolldown
	{
		bottom: 100px;
	}
	section.section-home-about .subject-heading h1,
	section.section-home-intermezo .subject-heading h1,
	section.section-home-wwd .subject-heading h1,
	section.section-home-work .subject-heading h1,
	section.section-karya-kami .subject-heading h1,
	section.section-pahlawan .subject-heading h1
	{
		font-size: 48px;
		line-height: 52px;
	}
	section.section-text-head .subject-heading h1::after
	{
		white-space: normal;
		transition: all 0s;
	}
	.subject-heading .content-word
	{
		margin: 5px auto;
	}
	section.section-home-intermezo
	{
		padding: 50px 0 0 0;
	}
	.intermezo-wrapper
	{
		overflow: hidden;
	}
	.intermezo-left
	{
		float: left;
		position: static;
		top: 0;
		left: 0;
	}
	.intermezo-right
	{
		float: right;
		position: static;
		top: 0;
		right: 0;
	}
	.intermezo-left .image, .intermezo-right .image
	{
		max-width: 125px;
	}
	section.section-home-intermezo .subject-heading .word-wrapper
	{
		padding-top: 0;
		padding-bottom: 0;
	}
	section.section-home-wwd
	{
		margin-top: 50px;
		/*margin-bottom: 50px;*/
	}
	section.section-home-wwd .under-text
	{
		bottom: 50px;
	}
	.horizontal-scroll-section__content-section
	{
		padding: 0 100px 0 15px;
	}
	.wwd-flight
	{
		top: 40px;
	}
	.wwd-card .image
	{
		min-width: 250px;
		max-width: 250px;
	}
	.wwd-card .wwd-desc
	{
		height: 100%;
		padding: 15px;
	}
	.wwd-card .wwd-desc .desc
	{
		min-width: 300px;
	}
	.wwd-image-bottom
	{
		bottom: -110px;
	}
	.wwd-image-bottom .image
	{
		max-width: 150px;
	}
	.home-work, .sticky-homework
	{
		height: 100%;
	}
	.collaborate-wrapper .video
	{
		margin: 0px auto 0 auto;
	}
	.karyahome-left
	{
		top: 0;
		left: -20px;
	}
	.karyahome-right
	{
		top: 0;
		right: -20px;
	}
	.karyahome-left .image, .karyahome-right .image
	{
		max-width: 100px;
	}
	section.section-home-karya
	{
		padding: 0;
		margin-top: 50px;
	}
	section.section-home-karya .flight .image
	{
		top: 0;
	}
	section.section-home-karya .subject-heading .word-wrapper
	{
		padding-top: 0;
	}
	section.section-home-karya .subject-heading .word-wrapper h1
	{
		font-size: 18px;
		font-weight: 700;
	}
	section.section-home-karya .subject-heading .word-wrapper .under-text
	{
		bottom: 65px;
	}
	section#contact
	{
		margin-top: 50px;
	}
	.sticky-contact
	{
		top: 0;
		display: none;
	}
	/*====================================== SECTION KARYA PAGE ======================================*/
	section.section-karya-gallery
	{
		padding: 40px 0 40px 0;
	}
	.client-row
	{
		margin-bottom: 15px;
	}
	.client-wrapper
	{
		margin-bottom: 20px;
	}
	.client-card
	{
		margin: 0 5px;
	}
	.client-card .image
	{
		width: 50px;
		height: 50px;
	}
	section.section-karya-kami
	{
		margin-top: 15px;
	}
	.karya-container
	{
		margin-bottom: 30px;
	}
	.col-karya
	{
		margin-top: 0;
	}
	#karya-sticky
	{
		position: static;
	}
	.swiper-karya
	{
		padding: 50px 0;
	}
	.karya-container .karya-float
	{
		z-index: 77;
	}
	.karya-container .karya-float .image
	{
		max-width: 60px;
	}
	.karya-container .karya-float.one
	{
		left: -15px;
	}
	.karya-container .karya-float.two
	{
		top: 75px;
		right: -15px;
	}
	.karya-container,
	.karya-container .card-front,
	.karya-container .card-back
	{
		max-width: 300px;
		height: 400px;
		min-height: 400px;
		margin-left: auto;
		margin-right: auto;
	}
	.karya-container .card-front
	{
		overflow: hidden;
		z-index: 3;
	}
	.karya-container .card-back .karya-flip
	{
		transform: scale(0);
		transition: transform 0.1s;
	}
	.karya-container.card-back .karya-flip .client,
	.karya-container .card-back .karya-flip .maka
	{ 
		max-width: 100px:
		height: 60px;
		margin: 0 auto;
	}
	.karya-container:hover .card-back .karya-flip
	{
		transform: scale(1);
	}
	.karya-gallery
	{
		max-width: 300px;
		height: 400px;
		min-height: 400px;
	}
	.karya-gallery .gallery-cta
	{
		height: 94%;
	}
	.karya-gallery .word
	{
		width: 100%;
		min-height: 390px;
		height: 390px;
	}
	.karya-container .word p.maka-info,
	.karya-gallery .word p.maka-info
	{
		font-size: 80%;
	}
	.karya-container .card-back .karya-flip .cta a.btn-show-second
	{
		font-size: 14px;
	}
	.karya-gallery .gallery-cta .cta a.btn-show-second
	{
		font-size: 14px;
	}
	.gallery-intermezo .object-left .image, .gallery-intermezo .object-right .image
	{
		max-width: 150px;
	}
	.gallery-intermezo .object-left
	{
		top: 30px;
		left: 0;
	}
	.gallery-intermezo .object-right
	{
		top: 30px;
		right: 0;
	}
	.gallery-intermezo .object-center
	{
		margin: -40px auto 0 auto;
	}
	.portrait-container
	{
		position: relative;
		height: 100vh;
	}
	.portraits .image
	{
		max-width: 150px;
		height: 100px;
	}
	.portrait
	{
		left: 20%;
		bottom: 35%;
	}
	.portrait-1
	{
		left: -25px;
	}
	.portrait-2
	{
		left: 35%;
		bottom: 58%;
	}
	.portrait-3
	{
		right: 2%;
		bottom: 45%;
	}
	.portrait-4
	{
		right: 0;
		bottom: 5%;
	}
	.portrait-5
	{
		right: 10px;
		bottom: 10%;
	}
	.portrait-6
	{
		left: 35%;
	}
	.portrait-7
	{
		left: -15px;
	}
	.portrait-8
	{
		left: -30px;
		bottom: 13%;
	}
	.pahlawan-container
	{
		margin-bottom: 40px;
	}
	.pahlawan-container > .image
	{
		transform: none;
		width: 270px;
		height: 100%;
	}
	.pahlawan-container .pahlawan-emoji
	{
		display: none;
	}
	.pahlawan-container .word
	{
		z-index: 1;
		opacity: 1;
		margin-top: 20px;
		transform: none;
	}
	.contact-wrapper
	{
		margin: 0 15px;
	}
	/*====================================== SECTION KARYA STUDY CASE ======================================*/
	.flight .image
	{
		width: 100%;
	}
	.hero-sequence .hero-word h1
	{
		font-size: 40px;
	}
	.hero-sequence
	{
		height: 150vh;
	}
	.sticky-element
	{
		z-index: -1;
		/*height: 100%;*/
		padding-bottom: 30px;
	}
	.sequence-element
	{
		margin-top: 0;
		max-width: 100%;
		height: 100%;
	}
	.sequence-element canvas#hero_canvas
	{
		position: absolute;
		width: 100%;
		height: auto;
		z-index: 0;
		top: 150px;
		left: 0;
		max-height: 100%;
		max-width: 100%;
		transform: none;
	}
	section.section-study-detail
	{
		margin-top: -60vh;
		z-index: 10;
		padding: 25px 0 0 0;
		border-top-left-radius: 75px;
		border-top-right-radius: 75px;
	}
	section.section-study-detail:hover
	{
		padding: 25px 0 0 0;
		border-top-left-radius: 75px;
		border-top-right-radius: 75px;
	}
	section.section-study-intermezo
	{
		padding-top: 0;
	}
	section.section-study-intermezo .hero-word .maka-head
	{
		font-size: 50px;
		line-height: 55px;
		margin-bottom: 0;
	}
	section.section-study-intermezo .hero-word
	{
		margin-bottom: 0;
	}
	.intermezo-sequence
	{
		height: 200vh;
	}
	.intermezo-element
	{
		background-color: #a1d4e9;
		margin-top: 0;
		width: 100%;
		height: 100%;
	}
	.sticky-col-intermezo
	{
		z-index: 1;
		position: sticky;
		position: -webkit-sticky;
		top: 0;
		left: 0;
		height: auto;
		display: block;
		align-items: center;
	}
	.col-intermezo
	{
		z-index: 2;
	}
	.sticky-intermezo
	{
		position: sticky;
		position: -webkit-sticky;
		top: 0;
		left: 0;
		height: 500px;
		overflow: hidden;
	}
	.intermezo-element
	{
		width: 100%;
		height: 100%;
	}
	.intermezo-element canvas#intermezo_canvas
	{
		width: 100%;
		height: auto;
		position: absolute;
		left: 0;
		bottom: 0;
		max-height: auto;
		max-width: auto;
		transform: none;
	}
	section.section-study-design
	{
		padding-top: 0;
		padding-bottom: 25px;
	}
	section.section-study-challenge
	{
		padding-top: 25px;
		padding-bottom: 0;
		margin-bottom: 0;
	}
	section.section-study-gallery
	{
		overflow: hidden;
	}
	.gallery-container
	{
		height: 600px;
	}
	.galleries
	{
		width: 115px;
	}
	.gallery-1
	{
		left: 0;
	}
	.gallery-2
	{
		left: 17%;
		width: 250px;
	}
	.challenge-video
	{
		margin: 0 auto 0 auto;
		height: 100%;
	}
	.sticky-study
	{
		position: static;
		top: 0;
	}
	.study-mockup
	{
		margin-bottom: 0;
	}
	.study-faces .image
	{
		max-width: 200px;
	}
	.study-font .wrapper .image
	{
		max-width: 300px;
	}
	section.section-study-karya .hero-word h1
	{
		font-size: 30px;
		line-height: 40px;
	}
	/*====================================== SECTION KARYA ADS ======================================*/
	section#hero-ads
	{
		height: 77vh;
		background-size: contain;
		background-position: center bottom;
		margin-bottom: 50px;
	}
	section#ads-product .subject-heading .maka-head
	{
		line-height: 60px;
	}
	.ads-picture
	{
		max-width: 200px;
	}
	.ads-picture .content
	{
		top: 55px;
		left: 25px;
	}
	.row-ads
	{
		margin-bottom: 50px;
	}
	.ads-ig .ads-picture .content
	{
		max-width: 150px;
		top: 50px;
	}
	.ads-ig .ads-picture .notif
	{
		width: 150px;
		bottom: 25px;
		right: -15px;
	}
	.ads-linkedin .ads-picture .content
	{
		top: 105px;
		width: 150px;
	}
	.ads-custom .subject-heading h1
	{
		font-size: 30px;
		line-height: 30px;
	}
	/*====================================== SECTION PRICING ======================================*/
	.pricing-card
	{
		margin-bottom: 60px;
	}
	.pricing-card.template .top > .image
	{
		margin-left: auto;
	}
	.pricing-card.template .top .tag .image
	{
		max-width: 100px;
	}
	.pricing-card.template .top .tag
	{
		left: 0;
	}
	.pricing-card.custom .top .tag
	{
		top: -20px;
		right: 0;
	}
	.pricing-card.custom .top .tag > .image
	{
		max-width: 125px;
	}
	.pricing-card .vector .image
	{
		display: none;
	}
	.pricing-character
	{
		display: none;
	}
	.row-aftersales
	{
		margin-top: 0;
	}
	/*====================================== SECTION ANIMATION ======================================*/
	section.section-animation.section-animation-hero
	{
		padding-top: 100px;
	}
	section.section-animation.section-animation-intermezo.relative
	{
		padding-top: 60px;
		padding-bottom: 60px;
		margin-top: -1px;
	}
	.animation-hero
	{
		display: block;
	}
	.animation-hero .word
	{
		padding: 0 15px;
	}
	section.section-animation.section-animation-hero .image
	{
		margin-top: 30px;
	}
	.herointermezo
	{
		top: -100px;
		left: -50px;
	}
	.herointermezo .image
	{
		max-width: 150px;
	}
	section.section-animation.section-animation-intermezo.relative .template-intermezo .image
	{
		margin-bottom: 30px;
	}
	section.section-animation.section-animation-intermezo.relative .template-intermezo .word
	{
		text-align: center;
	}
	section.section-animation.section-animation-ngajarin
	{
		margin-top: 0;
	}
	.ngajarin-video
	{
		margin-top: -30px;
		margin-bottom: 30px;
	}
	.ngajarin-video .cloud-left,
	.ngajarin-video .cloud-right
	{
		max-width: 100px;
	}
	.ngajarin-video .cloud-left
	{
		top: 125px;
	}
	.ngajarin-video .video .play
	{
		top: 30%;
	}
	.ngajarin-video .video .play .image
	{
		max-width: 75px;
	}
	section.section-animation.section-animation-course
	{
		background-position: top 50px center;
		background-size: contain;
	}
	.row-level
	{
		margin-top: 100px;
	}
	.card-level .image
	{
		max-width: 150px;
		height: 150px;
	}
	section.section-animation.section-animation-custom
	{
		margin-bottom: 50px;
	}
	.custom-card
	{
		margin-top: 50px;
	}
	.custom-image
	{
		margin-bottom: 15px;
	}
	.custom-image img
	{
		margin-top: -100px;
	}
	.custom-word
	{
		padding: 0 15px;	
	}
	section.section-animation.section-animation-style
	{
		background-position: top 50px center;
		margin-top: 50px;
	}
	.style-card
	{
		max-width: 320px;
		padding: 75px 15px 15px 15px;
		margin-bottom: 20px;
	}
	.style-card .image
	{
		width: 280px;
	}
	section.section-animation.section-animation-karya
	{
		margin-top: 50px;
	}
	.karya-swiper .swiper-container.swiper-karya:before,
	.karya-swiper .swiper-container.swiper-karya:after
	{
		width: 0;
	}
	.karya-swiper .swiper-button-prev
	{
		left: 0;
	}
	.karya-swiper .swiper-button-right
	{
		right: 0;
	}
	.karya-swiper .swiper-button-prev,
	.karya-swiper .swiper-button-next
	{
		top: 31%;
		background-color: #fff;
	}
	.karya-swiper .swiper-container.swiper-karya
	{
		margin: 0;
		padding: 0;
	}
	.karya-swiper > .image
	{
		max-width: 450px;
		margin: -100px auto 0 auto;
	}
	section.section-animation.section-animation-work
	{
		margin-top: 0;
	}
	.row-work
	{
		flex-direction: column;
	}
	.work-image
	{
		margin-bottom: 20px;
	}
	.work-image .video
	{
		height: 300px;
	}
	.iframe-wrapper .iframe-play
	{
		align-items: flex-end;
	}
	.iframe-wrapper .iframe-play .btn-cta
	{
		opacity: 1;
		margin-bottom: 20px;
	}
	.card.card-karya-iframe .iframe-karya .iframe-wrapper
	{
		opacity: 1;
	}
	.iframe-wrapper .iframe-play .btn-cta
	{
		opacity: 1;
	}
	.iframe-wrapper .iframe-play .btn-cta:active
	{
		opacity: 0.6;
	}
	.iframe-wrapper .iframe-play .btn-cta:focus
	{
		opacity: 0.6;
	}
	section.section-animation.section-animation-contact
	{
		margin-top: -50px;
	}
	.contact-animation
	{
		margin-top: 0;
	}
	.contact-animation .wrapper
	{
		padding: 50px 25px;
	}
	.contact-animation-left
	{
		left: -30px;
		top: -75px;
	}
	.contact-animation-left .image
	{
		max-width: 100px;
	}
	.animation-footer .airplane
	{
		left: 0;
		top: -75px;
	}
	.animation-footer .airplane .image
	{
		max-width: 100px;
	}
	.contact-animation-right
	{
		bottom: -130px;
		right: 0;
	}
	.contact-animation-right .image
	{
		max-width: 150px;
	}
	.contact-animation-bottom
	{
		max-width: 125px;
		bottom: -200px;
		right: 125px;
	}
	.animation-footer
	{
		height: 300px;
		background-size: contain;
		background-position: bottom center;
	}
	.animation-footer .word
	{
		bottom: 5px ;
	}
	.animation-footer .word h2.maka-category
	{
		font-size: 15px;
	}
	.animation-footer .word p.maka-semi
	{
		margin-top: 0;
		font-size: 12px;
	}
	/*====================================== SECTION ANIMATION COURSE ======================================*/
	section.section-animation.section-course-list
	{
		margin-bottom: 0;
	}
	section.section-animation.section-course-hero
	{
		padding-bottom: 225px;
	}
	.template-hero .word h1.maka-head, .course-hero .word h1.maka-head,
	.animation-hero .word h1.maka-head
	{
		font-size: 40px;
		line-height: 45px;
	}
	.course-left .image,
	.course-right .image
	{
		max-width: 100px;
	}
	.course-left,
	.course-right
	{
		opacity: 0.6;
		top: 80px;
	}
	.course-hero-trailer
	{
		margin-top: -225px;
		padding: 0 15px;
	}
	.course-hero-trailer .iframe-trailer
	{
		margin-bottom: 50px
	}
	.course-hero-trailer .iframe-trailer iframe
	{
		height: 350px;
	}
	.section-gerobak-hero .backto-cart
	{
		border-bottom: 1px solid #ceebf8;
		padding-bottom: 20px;
		margin-bottom: 5px !important;
	}
	.cart-wrapper .cart-list
	{
		background-color: transparent;
		border-bottom: 1px solid #ceebf8;
		border-radius: 0;
		margin-bottom: 5px;
	}
	.cart-wrapper .cart-list .cart-left
	{
		width: 100%;
		float: none;
		display: block;
		text-align: center;
	}
	.cart-wrapper .cart-list .cart-left .image
	{
		max-width: 320px;
		float: none;
		margin: 0 auto 10px auto;
	}
	.row-course .cart-wrapper .cart-list .image .trailer
	{
		opacity: 1;
	}
	.row-course .cart-wrapper .cart-list .cart-right
	{
		width: 100%;
		float: none;
		position: static;
		top: 0;
		right: 0;
		overflow: hidden;
		margin-top: 30px;
	}
	.course-desc
	{
		margin-left: 0;
	}
	.row-course .cart-wrapper .cart-list
	{
		justify-content: center;
	}
	.row-course .cart-wrapper .cart-list .cart-right .action
	{
		float: right;
	}
	.row-course .cart-wrapper .cart-list .cart-right .price
	{
		float: left;
		/*margin-top: 10px;*/
	}
	.row-course .cart-wrapper .cart-list .cart-left
	{
		max-width: 100%;
		width: 100%;
	}
	.row-course .cart-wrapper .cart-list.coming-soon .cart-right .action
	{
		float: none;
	}
	.choose-floating
	{
		padding: 10px 0;
	}
	.choose-floating.gerobak-checkout
	{
		z-index: 5;
		display: block;
	}
	.choose-floating.gerobak-checkout .backto
	{
		z-index: 2;
		bottom: 30px;
	}
	.choose-floating.gerobak-checkout .backto a
	{
		padding: 12px 16px;
	}
	.choose-floating.gerobak-checkout .backto a i
	{
		margin-left: 0;
	}
	.choose-floating.gerobak-checkout .container
	{
		padding: 0;
	}
	.nav-choose li
	{
		margin-right: 0;
	}
	.choose-card .image
	{
		height: auto;
	}
	.row-floating
	{
		display: block;
		flex-direction: column;
		margin: 0;
	}
	.row-floating .cta
	{
		margin-top: 10px;
	}
	section.section-animation.section-private
	{
		padding: 0 0 15px 0;
		margin-bottom: 175px;
	}
	.row-private
	{
		margin-bottom: 115px;
	}
	.private-left
	{
		max-width: 75px;
		left: -10px;
		bottom: 25px;
	}
	.private-right
	{
		max-width: 75px;
		right: 0;
		bottom: 25px;
	}
	.course-private span.underline
	{
		bottom: -15px;
		left: 25%;
		width: 50%;
	}
	.row-private .course-private .wrapper
	{
		border-radius: 20px;
		padding: 15px;
	}
	.private-toa
	{
		position: absolute;
		bottom: -115px;
		left: -50px;
		max-width: 150px;
	}
	.modal-animation
	{
		padding: 15px 0;
	}
	.modal-animation-wrapper .animation-section
	{
		background-position: top right;
	}
	.modal-animation-wrapper ul
	{
		padding-left: 15px;
	}
	/*====================================== SECTION CHECKOUT ======================================*/
	.checkout-hero .image
	{
		max-width: 200px;
	}
	.checkout-form
	{
		margin-bottom: 30px;
	}
	.cart-wrapper .cart-list .cart-right
	{
		min-width: 110px;
	}
	.checkout-summary .checkout-total .left
	{
		margin-left: 0;
	}
	.checkout-summary .checkout-total .right
	{
		min-width: 175px;
		margin-left: 5px;
		text-align: right;
	}
	.checkout-summary .checkout-total .right span.underline
	{
		max-width: 130px;
		right: -5px;
	}

	/*====================================== SECTION TEMPLATE ======================================*/
	.template-hero
	{
		display: flex;
		flex-direction: column-reverse;
	}
	.row-intermezo
	{
		flex-direction: column;
	}
	section.section-template.section-template-intermezo .template-intermezo
	{
		text-align: center;
	}
	.template-intermezo .image
	{
		max-width: 320px;
		margin: 20px auto 0 auto;
	}
	.template-circle .image
	{
		margin: 0px auto 50px auto;
	}
	.why-left .image, .why-right .image
	{
		max-width: 200px;
	}
	.why-left
	{
		left: -50px;
	}
	.why-right
	{
		bottom: 0;
		right: -50px;
	}
	section.section-template-package
	{
		margin-bottom: 50px;
	}
	.template-package.relative
	{
		margin-bottom: 100px;
	}
	.template-package .subject-head
	{
		margin-bottom: 80px
	}
	.template-package .image-left,
	.template-package .image-right
	{
		display: none;
	}
	.row-how
	{
		flex-direction: column;
	}
	.how-step .word
	{
		max-width: 250px;
	}
	.template-how .image
	{
		margin-top: 20px;
	}
	section.section-template.section-template-action
	{
		overflow: hidden;
	}
	.template-action .image-1
	{
		max-width: 75px;
		position: absolute;
		top: -75px;
		left: 0;
	}
	.template-action .image-2
	{
		max-width: 50px;
		position: absolute;
		top: 0;
		left: 40%;
	}
	.template-action .image-3
	{
		max-width: 100px;
		position: absolute;
		top: -50px;
		right: 0;
	}
	.template-action .image-4
	{
		max-width: 150px;
		position: absolute;
		top: 25px;
		right: -25px;
	}
	.template-action .image-5
	{
		max-width: 50px;
		position: absolute;
		top: 220px;
		right: 0;
	}
	.template-action .image-6
	{
		max-width: 50px;
		position: absolute;
		bottom: 200px;
		right: -25px;
	}
	.template-action .image-7
	{
		max-width: 150px;
		position: absolute;
		bottom: 25px;
		right: -25px;
	}
	.template-action .image-8
	{
		max-width: 100px;
		position: absolute;
		bottom: -50px;
		right: 250px;
	}
	.template-action .image-9
	{
		max-width: 50px;
		position: absolute;
		bottom: -25px;
		right: 50px;
	}
	.template-action .image-10
	{
		max-width: 50px;
		position: absolute;
		bottom: 10px;
		left: 40%;
	}
	.template-action .image-11
	{
		max-width: 125px;
		position: absolute;
		bottom: 65px;
		left: -20px;
	}
	.template-action .image-12
	{
		max-width: 75px;
		position: absolute;
		bottom: 200px;
		left: -25px;
	}
	.template-action .image-13
	{
		max-width: 150px;
		position: absolute;
		top: 55px;
		left: -50px;
	}
	/*====================================== SECTION FAQ ======================================*/
	section.section-faq-cta
	{
		margin-top: 75px;
	}
	.faq-cta
	{
		flex-direction: column;
	}
	.faq-cta .image
	{
		height: 100px;
	}
	.faq-cta .cta
	{
		text-align: center;
	}
	/*====================================== SECTION TEMPLATE CHOOSE ======================================*/
	.subject-head
	{
		margin-bottom: 20px;
	}
	section.section-template
	{
		margin-bottom: 50px;
	}
	.row-choose-hero
	{
		flex-direction: column;
	}
	.choose-hero 
	{
		text-align: center;
	}
	.section-template.section-choose-package .template-package
	{
		margin-top: 100px;
		margin-bottom: 0;
	}
	.row-choose-package
	{
		margin-bottom: 25px;
	}
	.choose-addon .swiper-container.swiper-addon:before
	{
		left: -15px;
	}
	.choose-addon .swiper-container.swiper-addon:after
	{
		right: -15px;
	}
	.choose-addon .swiper-container
	{
		padding: 25px 0;
	}
	.choose-addon .card
	{
		padding: 15px;
		margin-bottom: 50px;
	}
	.choose-btn-wrapper
	{
		position: absolute;
		bottom: 50px;
		width: 100%;
	}
	.choose-btn-wrapper .wrapper
	{
		position: relative;
		max-width: 150px;
		margin: 0 auto;
	}
	.question-wrapper .image
	{
		margin: 0 auto;
	}
	.section-template.section-choose-template
	{
		margin-top: 100px;
	}
	.template-bg-left,
	.template-bg-right
	{
		top: 0;
		opacity: 0.5;
	}
	.template-bg-left .image, .template-bg-right .image
	{
		max-width: 150px;
	}
	.choose-card .splash
	{
		max-width: 100px;
		right: 0;
	}
	.choose-floating .row-floating .cta
	{
		margin-top: 5px;
		margin-left: -25px;
	}
	.choose-floating .row-floating .price span.empty-floating
	{
		display: block;
		margin-top: 17px;
		margin-right: 10px;
		font-size: 12px;
		line-height: 18px;
	}
	.choose-floating .btn-cta
	{
		width: 150px;
	}
	.choose-floating .btn-cta span.iconbasket,
	.choose-floating .btn-cta span.iconcart
	{
		display: none;
	}
	.modal-addon
	{
		padding: 0;
	}
	.addon-check .wrapper
	{
		float: none;
		max-width: 100%;
		width: 100%;
	}
	.addon-check,
	.addon-check:hover
	{
		padding: 10px 5px;
	}
	.design-list .product .radio
	{
		margin: 0 5px 10px 5px;
	}
	.design-list .product .radio label span
	{
		right: -5px;
	}
	.design-list .product .radio label span a
	{
		opacity: 1;
		background-color: #CEEBF8;
	}
	.addon-check .price
	{
		text-align: center;
		float: none;
		margin-top: 10px;
	}
	.addon-check
	{
		border-bottom: 1px solid rgba(0,0,0,0.1);
		border-radius: 0;
		margin-bottom: 5px;
	}
	.modal.modal-addon .modal-dialog
	{
		margin: 0;
	}
	.modal.modal-addon .modal-footer .action
	{
		flex-direction: column;
	}
	.modal.modal-addon .modal-footer .action button
	{
		margin: 0 0 15px 0;
	}
	.modal.modal-addon .modal-footer
	{
		padding-bottom: 10px;
	}
	/*====================================== SECTION GEROBAK ======================================*/
	.gerobak-hero
	{
		margin-top: 75px;
	}
	section.section-template.section-edit-template
	{
		margin-bottom: 100px !important;
	}
	.section-template.section-edit-template .cart-wrapper .cart-list
	{
		display: flex;
		flex-direction: column;
	}
	.section-template.section-edit-template .cart-wrapper .cart-list .cart-right .action .cta button
	{
		margin: 10px;
	}
	.choose-floating.gerobak-checkout.gerobak-back .row-floating .cta
	{
		margin-top: 5px;
	}
	.choose-floating.gerobak-checkout.gerobak-back .backto
	{
		bottom: 30px;
		left: -5px;
	}
	.choose-floating.gerobak-checkout.gerobak-back .backto a
	{
		padding: 12px 16px;
	}
	/*====================================== SECTION CHECKOUT ======================================*/
	.section-template.section-gerobak-hero
	{
		margin-top: 100px;
	}
	.cart-wrapper .cart-list .cart-left
	{
		width: 60%;
	}
	.checkout-summary .cart-wrapper .cart-list .cart-left .image
	{
		max-width: 150px;
		margin-bottom: 0;
	}
	/*====================================== SECTION PEMBAYARAN ======================================*/
	.payment-left
	{
		top: 10px;
		z-index: 2;
	}
	.payment-right
	{
		bottom: -100px;
		z-index: 2;
	}
	.payment-left .image, .payment-right .image
	{
		max-width: 75px;
	}
	/*====================================== SECTION REFERRAL ======================================*/
	.ref-left
	{
		max-width: 50px;
		width: 100%;
		position: absolute;
		left: 50px;
		top: -5px;
	}
	.ref-right
	{
		max-width: 50px;
		width: 100%;
		position: absolute;
		right: 50px;
		bottom: auto;
		top: -5px;
	}
	/*==================================== SECTION 404 NOT FOUND ==================================*/
	.notfound-wrapper .word
	{
		bottom: 35%;
	}
	/*====================================== SECTION CARD LINK ======================================*/
	.cardlink-container .moon-one
	{
		max-width: 125px;
	}
	.cardlink-container .footer .bottom-vid
	{
		height: 150px;
	}
	.cardlink-container .footer h4.maka-category
	{
		font-size: 18px !important;
	}
}
/*TAB VIEW*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
{
	/*====================================== SECTION LANDING PAGE ======================================*/
	header .container
	{
		width: 100%;
	}
	.home-sequence .home-scrolldown
	{
		bottom: 115px;
	}
	/*====================================== SECTION LANDING PAGE ======================================*/
	.home-sequence
	{
		height: 250vh;
	}
	.home-element
	{
		transform: scale(1.25);
	}
	section.section-home-about .subject-heading h1,
	section.section-home-intermezo .subject-heading h1,
	section.section-home-wwd .subject-heading h1,
	section.section-home-work .subject-heading h1,
	section.section-karya-kami .subject-heading h1,
	section.section-pahlawan .subject-heading h1
	{
		font-size: 48px;
		line-height: 52px;
	}
	.subject-heading .content-word
	{
		margin: 5px auto;
	}
	section.section-home-intermezo
	{
		padding: 100px 0 0 0;
	}
	.intermezo-wrapper
	{
		overflow: hidden;
	}
	.intermezo-left
	{
		top: -75px;
		left: -100px;
	}
	.intermezo-right
	{
		top: -75px;
		right: -100px;
	}
	.intermezo-left .image, .intermezo-right .image
	{
		max-width: 175px;
	}
	section.section-home-intermezo .subject-heading .word-wrapper
	{
		padding-top: 0;
	}
	section.section-home-wwd
	{
		margin-top: 75px;
		/*margin-bottom: 50px;*/
	}
	section.section-home-wwd .under-text
	{
		bottom: 7px;
	}
	.horizontal-scroll-section__content-section
	{
		padding: 0 100px 0 15px;
	}
	.wwd-flight
	{
		top: 100px;
	}
	.wwd-card .image
	{
		min-width: 250px;
		max-width: 250px;
	}
	.wwd-card .wwd-desc
	{
		height: 100%;
		padding: 15px;
	}
	.wwd-card .wwd-desc .desc
	{
		min-width: 300px;
	}
	.wwd-image-bottom
	{
		bottom: -110px;
	}
	.wwd-image-bottom .image
	{
		max-width: 225px;
	}
	.home-work, .sticky-homework
	{
		height: 100%;
	}
	.collaborate-wrapper .video
	{
		margin: -100px auto 0 auto;
	}
	.karyahome-left
	{
		top: 0;
		left: -20px;
	}
	.karyahome-right
	{
		top: 0;
		right: -20px;
	}
	.karyahome-left .image, .karyahome-right .image
	{
		max-width: 200px;
	}
	section.section-home-karya
	{
		padding: 75px 0 75px 0;
	}
	section.section-home-karya .flight .image
	{
		top: 0;
	}
	section.section-home-karya .subject-heading .word-wrapper
	{
		padding-top: 0;
	}
	section.section-home-karya .subject-heading .word-wrapper h1
	{
		font-size: 40px;
		font-weight: 700;
	}
	section.section-home-karya .subject-heading .word-wrapper .under-text
	{
		bottom: 40px;
	}
	section#contact
	{
		margin-top: 50px;
	}
	.sticky-contact
	{
		top: 30%;
	}
	.contact-left
	{
		margin-left: -15px;
	}
	/*====================================== SECTION KARYA PAGE ======================================*/
	section.section-karya-gallery
	{
		padding: 75px 0 75px 0;
	}
	.client-row
	{
		margin-bottom: 15px;
	}
	.client-wrapper
	{
		margin-bottom: 20px;
	}
	.client-card
	{
		margin: 0 5px;
	}
	.client-card .image
	{
		width: 75px;
		height: 75px;
	}
	section.section-karya-kami
	{
		margin-top: 15px;
	}
	.karya-container
	{
		margin-bottom: 50px;
	}
	.karya-container .karya-float .image
	{
		max-width: 50px;
	}
	.karya-container .karya-float.one
	{
		left: -15px;
	}
	.karya-container .karya-float.two
	{
		top: 75px;
		right: -15px;
	}
	.swiper-karya
	{
		padding: 50px 0;
	}
	.karya-container,
	.karya-container .card-front,
	.karya-container .card-back
	{
		max-width: 300px;
		height: 375px;
		min-height: 375px;
		margin-left: auto;
		margin-right: auto;
	}
	.karya-gallery
	{
		max-width: 300px;
		height: 400px;
		min-height: 400px;
	}
	.karya-gallery .gallery-cta
	{
		height: 95%;
	}
	.karya-gallery .word
	{
		min-height: 390px;
		height: 390px;
	}
	.karya-container .word p.maka-info,
	.karya-gallery .word p.maka-info
	{
		font-size: 80%;
	}
	.karya-container .card-back .karya-flip .cta a.btn-show-second
	{
		font-size: 14px;
	}
	.karya-gallery .gallery-cta .cta a.btn-show-second
	{
		font-size: 14px;
	}
	.gallery-intermezo .object-left .image, .gallery-intermezo .object-right .image
	{
		max-width: 250px;
	}
	.gallery-intermezo .object-left
	{
		top: 30px;
		left: 0;
	}
	.gallery-intermezo .object-right
	{
		top: 30px;
		right: 0;
	}
	.gallery-intermezo .object-center
	{
		margin: -40px auto 0 auto;
	}
	.portrait-container
	{
		position: relative;
		height: 100vh;
	}
	.portraits .image
	{
		width: 275px;
		height: 175px;
	}
	.portrait
	{
		left: 32%;
		bottom: 35%;
	}
	.portrait-1
	{
		left: -25px;
	}
	.portrait-2
	{
		left: 35%;
		bottom: 58%;
	}
	.portrait-3
	{
		right: 2%;
		bottom: 45%;
	}
	.portrait-4
	{
		right: 0;
		bottom: 5%;
	}
	.portrait-5
	{
		right: 10px;
		bottom: 10%;
	}
	.portrait-6
	{
		left: 35%;
	}
	.portrait-7
	{
		left: -15px;
	}
	.portrait-8
	{
		left: -10px;
		bottom: 15%;
	}
	.pahlawan-container
	{
		margin-bottom: 40px;
	}
	.pahlawan-container > .image
	{
		transform: none;
		width: 270px;
		height: 100%;
	}
	.pahlawan-container .pahlawan-emoji
	{
		display: none;
	}
	.pahlawan-container .word
	{
		z-index: 1;
		opacity: 1;
		margin-top: 20px;
		transform: none;
	}
	.contact-wrapper
	{
		margin: 0 15px;
	}
	/*====================================== SECTION TEMPLATE ======================================*/
	section.section-template.section-template-action
	{
		overflow: hidden;
	}
	.template-action .image-13
	{
		max-width: 250px;
	}
	/*====================================== SECTION TEMPLATE CHOOSE ======================================*/
	section.section-template.section-choose-hero
	{
		margin-bottom: 50px;
	}
	.row-choose-hero
	{
		flex-direction: column;
	}
	.choose-hero 
	{
		text-align: center;
	}
	.choose-hero .image
	{
		max-width: 480px;
	}
	.section-template.section-choose-package .template-package
	{
		margin-top: 100px;
		margin-bottom: 0;
	}
	section.section-template.section-choose-package
	{
		margin-bottom: 50px;
	}
	.section-template.section-choose-question .row-choose-hero
	{
		flex-direction: row;
	}
	.question-wrapper .image
	{
		margin: 0 auto;
	}
	.section-template.section-choose-template
	{
		margin-top: 100px;
	}
	.template-bg-left,
	.template-bg-right
	{
		top: 0;
		opacity: 0.5;
	}
	.template-bg-left .image, .template-bg-right .image
	{
		max-width: 250px;
	}
	.choose-card .splash
	{
		max-width: 100px;
		right: 0;
		bottom: 60px;
	}
	/*====================================== SECTION GEROBAK ======================================*/
	.gerobak-hero
	{
		margin-top: 75px;
	}
	section.section-template.section-edit-template
	{
		margin-bottom: 100px !important;
	}
	.section-template.section-edit-template .cart-wrapper .cart-list
	{
		display: flex;
		flex-direction: row;
	}
	.section-template.section-edit-template .cart-wrapper .cart-list .cart-right .action .cta button
	{
		margin: 10px;
	}
	.choose-floating.gerobak-checkout.gerobak-back .row-floating .cta
	{
		margin-top: 5px;
	}
	.choose-floating .row-floating .price span.empty-floating
	{
		display: block;
		margin-top: 0px;
		/*font-size: 12px;*/
	}
	.choose-floating.gerobak-checkout.gerobak-back .backto
	{
		bottom: 35px;
		left: 0;
	}
	/*====================================== SECTION ANIMATION ======================================*/
	section.section-animation.section-animation-hero .image
	{
		margin-top: 60px;
	}
	.herointermezo
	{
		top: -175px;
		left: -125px;
	}
	section.section-animation.section-animation-intermezo
	{
		padding: 125px 0 100px 0;
	}
	section.section-animation.section-animation-course
	{
		background-position: top 100px center;
		background-size: contain;
	}
	.ngajarin-video
	{
		margin-bottom: 30px;
	}
	.ngajarin-video .video .play .image
	{
		max-width: 100px;
	}
	.ngajarin-video .cloud-left
	{
		top: 250px;
	}
	.ngajarin-video .cloud-left,
	.ngajarin-video .cloud-right
	{
		max-width: 200px;
	}
	.work-image .video
	{
		height: 350px;
	}
	section.section-animation.section-animation-work
	{
		margin-top: 0;
		background-position: top 200px center;
	}
	.iframe-wrapper .iframe-play
	{
		align-items: flex-end;
	}
	.iframe-wrapper .iframe-play .btn-cta
	{
		opacity: 1;
		margin-bottom: 20px;
	}
	.card.card-karya-iframe .iframe-karya .iframe-wrapper
	{
		opacity: 1;
	}
	.iframe-wrapper .iframe-play .btn-cta
	{
		opacity: 1;
	}
	.iframe-wrapper .iframe-play .btn-cta:active
	{
		opacity: 0.6;
	}
	.iframe-wrapper .iframe-play .btn-cta:focus
	{
		opacity: 0.6;
	}
	.animation-footer
	{
		height: 400px;
	}
	.animation-footer .airplane
	{
		left: 0;
		top: -75px;
	}
	.animation-footer .airplane .image
	{
		max-width: 150px;
	}
	.contact-animation
	{
		margin-top: 50px;
	}
	.contact-animation-left
	{
		left: -75px;
	}
	.contact-animation-left .image
	{
		max-width: 150px;
	}
	.contact-animation-right
	{
		bottom: -150px;
		right: 0px;
	}
	.contact-animation-right .image
	{
		max-width: 200px;
	}
	.contact-animation-bottom
	{
		max-width: 200px;
		bottom: -200px;
		right: 250px;
	}
	.choose-floating.gerobak-checkout .backto
	{
		z-index: 2;
	}
	/*====================================== SECTION ANIMATION COURSE ======================================*/
	section.section-animation.section-course-hero
	{
		padding-bottom: 250px;
	}
	.course-left .image,
	.course-right .image
	{
		max-width: 150px;
	}
	.course-left,
	.course-right
	{
		opacity: 0.6;
		top: 70px;
	}
	.course-hero-trailer
	{
		margin-top: -250px;
		padding: 0 15px;
	}
	.course-hero-trailer .iframe-trailer
	{
		margin-bottom: 50px
	}
	.course-hero-trailer .iframe-trailer iframe
	{
		height: 400px;
	}
	.section-gerobak-hero .backto-cart
	{
		border-bottom: 1px solid #ceebf8;
		padding-bottom: 20px;
		margin-bottom: 5px !important;
	}
	.checkout-summary .checkout-total .right span.underline
	{
		max-width: 130px;
		right: -5px;
	}
	.cart-wrapper .cart-list
	{
		background-color: transparent;
		border-bottom: 1px solid #ceebf8;
		border-radius: 0;
		margin-bottom: 5px;
	}
	.private-left
	{
		max-width: 150px;
		left: 0;
		bottom: 300px;
	}
	.private-right
	{
		max-width: 150px;
		right: 0;
		bottom: 300px;
	}
	.private-toa
	{
		position: absolute;
		bottom: -90px;
		left: -130px;
		max-width: 200px;
	}
	.course-private span.underline
	{
		bottom: -15px;
		left: 20%;
		width: 60%;
	}
	/*====================================== SECTION PEMBAYARAN ======================================*/
	.payment-left
	{
		top: 10px;
		z-index: 2;
	}
	.payment-right
	{
		bottom: -100px;
		z-index: 2;
	}
	.payment-left .image, .payment-right .image
	{
		max-width: 125px;
	}
	/*====================================== SECTION REFERRAL ======================================*/
	.ref-left
	{
		max-width: 115px;
		width: 100%;
		position: absolute;
		left: 0;
		top: 15px;
	}
	.ref-right
	{
		max-width: 115px;
		width: 100%;
		position: absolute;
		right: 0;
		bottom: auto;
		top: 15px;
	}
	/*====================================== SECTION FAQ ======================================*/
	section.section-faq-cta
	{
		margin-top: 75px;
	}
	/*====================================== SECTION KARYA STUDY CASE ======================================*/
	.flight .image
	{
		width: 100%;
	}
	.hero-sequence .hero-word h1
	{
		font-size: 40px;
	}
	.hero-sequence
	{
		/*height: 900px;*/
	}
	.sticky-element
	{
		z-index: -1;
		padding-bottom: 30px;
	}
	.sequence-element
	{
		margin-top: 0;
		max-width: 100%;
		height: 100%;
	}
	.sequence-element canvas#hero_canvas
	{
		position: absolute;
		width: 100%;
		height: auto;
		z-index: 0;
		top: 150px;
		left: 0;
		max-height: 100%;
		max-width: 100%;
		transform: none;
	}
	section.section-study-detail
	{
		margin-top: -55vh;
		z-index: 10;
		padding: 25px 0 0 0;
		border-top-left-radius: 75px;
		border-top-right-radius: 75px;
	}
	section.section-study-detail:hover
	{
		padding: 25px 0 0 0;
		border-top-left-radius: 75px;
		border-top-right-radius: 75px;
	}
	section.section-study-intermezo
	{
		padding-top: 0;
	}
	section.section-study-intermezo .hero-word .maka-head
	{
		font-size: 50px;
		line-height: 55px;
		margin-bottom: 0;
	}
	section.section-study-intermezo .hero-word
	{
		margin-bottom: 0;
	}
	.intermezo-sequence
	{
		height: 110vh;
	}
	.intermezo-element
	{
		background-color: #a1d4e9;
		margin-top: 0;
		width: 100%;
		height: 100%;
	}
	.sticky-col-intermezo
	{
		z-index: 1;
		position: sticky;
		position: -webkit-sticky;
		top: 0;
		left: 0;
		height: 500px;
		display: flex;
		align-items: center;
	}
	.col-intermezo
	{
		z-index: 2;
	}
	.sticky-intermezo
	{
		position: sticky;
		position: -webkit-sticky;
		top: -150px;
		left: 0;
		height: 50%;
		overflow: hidden;
	}
	.intermezo-element
	{
		width: 100%;
		height: 100%;
	}
	.intermezo-element canvas#intermezo_canvas
	{
		width: 100%;
		height: auto;
		position: absolute;
		left: 0;
		bottom: 0;
		max-height: auto;
		max-width: auto;
		transform: none;
	}
	section.section-study-design
	{
		padding-top: 0;
		padding-bottom: 25px;
	}
	section.section-study-challenge
	{
		padding-top: 25px;
		padding-bottom: 0;
		margin-bottom: 0;
	}
	.challenge-video
	{
		margin: 0 auto 25px auto;
		height: 100%;
	}
	.sticky-study
	{
		
	}
	.study-mockup
	{
		margin-bottom: 0;
	}
	.study-faces .image
	{
		max-width: 200px;
	}
	.study-font .wrapper .image
	{
		max-width: 300px;
	}
	section.section-study-karya .hero-word h1
	{
		font-size: 30px;
		line-height: 40px;
	}
	.gallery-container
	{
		height: 600px;
	}
	.galleries
	{
		width: 150px;
	}
	.gallery-1
	{
		left: 0;
	}
	.gallery-2
	{
		left: 30%;
		width: 350px;
	}
}
@media only screen and (min-device-width: 0) and (max-device-width: 1024px)
{
	/*====================================== SECTION DEFAULT ======================================*/
	.maka-semi
	{
		line-height: 26px;
	}
	.navbar-space
	{
		margin-top: 80px;
	}
	/*====================================== SECTION NAVBAR ======================================*/
	.nav-toggle {
		display: block;
	}
	ul.menu-right
	{
		float: none;
	}
	ul.menu-left,
	ul.menu-right {
		clear: both;
	}
	ul.menu-left,
	ul.menu-right,
	ul.menu-left li,
	ul.menu-right li {
		padding: .5em 0;
	}
	ul.menu-left {
		width: 85%;
		display: none;
		margin-top: -20px;
		width: 100%;
		display: none;
		max-height: none;
		transition: all 0.3s;
		opacity: 0;
	}
	ul.menu-left.collapse
	{
		opacity: 1;
		display: block;
		/*width: 100%;*/
		margin-left: 0;
		background-color: #fff;
		text-align: center !important;
		border-bottom: 2px solid #393e46;
	}
	.maka-contact
	{
		bottom: 0;
		right: 0;
	}
	.maka-contact .image
	{
		max-width: 60px;
	}
	.maka-contact p
	{
		display: none;
	}
	.subject-heading .maka-head
	{
		font-size: 50px;
	}
	/*==================================== SECTION 404 NOT FOUND ==================================*/
	.notfound-wrapper .word
	{
		bottom: 35%;
	}
}