@media only screen and (min-device-width: 0px) and (max-device-width: 480px)
{
	/*====================================== SECTION DEFAULT ======================================*/
	h1 { font-size: 40px; line-height: 44px;}
	h2 { font-size: 30px; line-height: 32px;}
	h3 { font-size: 20px; line-height: 26px;}
	h4 { font-size: 16px; line-height: 24px;}
	h5 { font-size: 15px; line-height: 23px;}
	h6 { font-size: 12px; line-height: 20px;}
	.paw-head{
		line-height: 54px;
	}
	.paw-category{
		line-height: 42px;
	}
	p.paw-semi.p-heading
	{
		font-size: 18px;
	}
	.navbar-space
	{
		margin-top: 60px;
	}
	section
	{
		margin-bottom: 50px;
	}
	/*====================================== SECTION NAVBAR ======================================*/
	header .container-nav
	{
		padding: 10px 15px;
	}
	header nav
	{
		padding: 0;
		border-bottom: 1px solid #8fc0a9;
	}
	header #navigation .logo
	{
		margin-top: 0;
	}
	header #navigation .logo.black img.navbar-logo,
	header #navigation .logo.white img.navbar-logo
	{
		margin-top: 0;
		width: 150px;
	}
	.nav-toggle
	{
		display: block;
		margin-top: -10px;
		margin-bottom: 0;
	}
	img.navbar-logo
	{
		width: 60px;
		margin-top: 15px;
		margin-left: 0;
		/*height: 50px;*/
	}
	.clock
	{
		font-size: 20px;
		float: none;
		display: inline-block;
		position: absolute;
		right: 65px;
	}
	ul.menu-left
	{
		display: none;
	}
	ul.menu-right
	{
		display: none;
		float: none;
		clear: both;
		background-color: #fff;
		padding: 10px;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		transition: all 0.3s;
	}
	ul.menu-right.collapse
	{	
		display: block;
		z-index: 99;
		background-color: #fff;
		padding: 10px;
		transition: all 0.3s;
	}
	ul.menu-right .menu-mobile
	{
		display: block;
	}
	ul.menu-right .picture
	{
		position: relative;
		width: 150px;
		margin: 10px auto;
	}
	ul.menu-right li
	{
		float: none;
		margin-left: 0;
		text-align: center;
	}
	ul.menu-right li.button-vc
	{
		text-align: center;
	}
	ul.menu-right li a
	{
		position: relative;
		display: block;
		padding: 15px;
		border-radius: 30px;
		font-size: 18px;
		line-height: 24px;
		letter-spacing: 1.2px;
		font-weight: 700;
		color: #31b3bd;
		transition: all 0.3s;
	}
	ul.menu-right li a i
	{
		display: inline-block;
		width: 20px;
		text-align: center;
		margin-right: 10px;
	}
	ul.menu-right li a .total
	{
		display: inline-block;
		position: relative;
		top: -10px;
		width: 20px;
		height: 20px;
		font-size: 14px;
		background-color: #e67816;
		border-radius: 50%;
		color: #fff;
		text-align: center;
	}
	ul.menu-right li a .total span
	{
		position: relative;
		top: -2px;
		left: 1px;
	}
	ul.menu-right li a.li-login
	{
		margin-bottom: 15px;
	}
	ul.menu-right li.logout 
	{
		background-color: red;
		position: absolute;
		top: 75px;
		left: 75px;
		width: 35px;
		height: 35px;
		border-radius: 50%;
	}
	ul.menu-right li.logout span
	{
		color: #fff;
		font-size: 20px;
		position: relative;
		left: 8px;
		top: 7px;
	}
	ul.menu-right li.logout a
	{
		position: relative;
		display: block;
		padding: 0;
		border-radius: 0;
		font-size: 18px;
		line-height: 24px;
		letter-spacing: 1.2px;
		font-weight: 300;
		color: #1b262c;
		transition: all 0.3s;
	}
	/*====================================== SECTION LANDING PAGE ======================================*/
	section.section-hero
	{
		height: 100%;
		overflow: hidden;
		margin-bottom: 0;
	}
	.hero-landing .subject-heading
	{
		padding-top: 25px;
		margin-top: 0;
		margin-bottom: 0;
	}
	.hero-landing .subject-heading .action
	{
		margin: 10px 0 0 0;
		padding: 0 15px;
	}
	.hero-landing .hero-paw
	{
		top: 0;
	}
	.hero-landing .hero-paw img
	{
		width: 100px;
	}
	.hero-image
	{
		height: auto;
	}
	.hero-image .image
	{
		position: static;
		width: auto;
		max-width: 480px;
		min-width: 450px;
		margin-left: -75px;
	}
	.running-left
	{
		margin-bottom: 20px;
	}
	section.section-landing-about
	{
		background-size: 150px, 50px;
		background-position: left top, right top 100px;
		margin-bottom: 0;
	}
	.about-container
	{
		height: 200px;
		margin-bottom: 0;
	}
	.about-container .about-wrapper .logo
	{
		max-width: 225px;
		margin-top: 0;
	}
	.about-dog
	{
		right: 0;
	}
	.about-dog .image, .about-dog-left .image
	{
		max-width: 200px;
	}
	section.section-landing-wwd
	{
		padding-bottom: 50px;
		margin-bottom: 25px;
	}
	.wwd-container
	{
		padding: 50px 30px;
		border-top-right-radius: 100px;
		border-bottom-right-radius: 100px;
		margin-right: 15px;
	}
	.wwd-list
	{
		display: block;
		margin-bottom: 20px;
	}
	.wwd-list .image
	{
		width: 72px;
		height: 72px;
		float: none;
		clear: both;
		margin-bottom: 10px;
	}
	.wwd-image
	{
		position: static;
	}
	section.section-landing-shop
	{
		position: relative;
		padding: 0 0 0 0;
		background-image: url(../images/shop-left.png), url(../images/shop-right.png);
		background-size: 75px, 100px;
		background-repeat: no-repeat;
		background-position: bottom 120px left, bottom 120px right;
		margin-bottom: 0;
	}
	.wwd-container
	{
		background-size: 100px, 100px;
		background-position: bottom 20px left -25px, top 50px right 50px;
	}
	.shop-list
	{
		/*background-color: #ffffff9e;*/
		border-radius: 20px;
	}
	.shop-list a
	{
		display: block;
		text-align: center;
	}
	.shop-list .image
	{
		margin: 0 auto;
	}
	.paw-shop
	{
		top: -200px;
	}
	.paw-shop .paw-image
	{
		max-width: 100px;
	}
	.intermezo-wrapper .logo
	{
		max-width: 250px;
	}
	.intermezo-additional
	{
		margin-bottom: 20px;
	}
	.additional-wrapper
	{
		margin-bottom: 30px;
	}
	.additional-wrapper > .image
	{
		width: 125px;
		height: 125px;
	}
	.additional-wrapper > .word
	{
		margin-bottom: 10px;
	}
	.additional-wrapper > .word.word-align
	{
		min-height: auto;
	}
	.additional-wrapper .action .link-ticket
	{
		margin-bottom: 5px;
	}
	.row-contact
	{
		flex-direction: column;
		text-align: center;
		margin-bottom: 40px;
	}
	.additional-contact > .image
	{
		width: 200px;
		height: 200px;
	}
	.additional-contact .action span
	{
		display: block;
		margin-left: 0;
		position: static;
	}
	section.section-intermezo
	{
		margin-bottom: 50px;
	}
	section.section-event
	{
		background-position: bottom 100px left, top 200px right;
		background-size: 75px, 75px;
	}
	.row-event
	{
		flex-direction: column;
	}
	.paw-wof
	{
		right: 0;
		bottom: -25px;
	}
	.paw-wof .paw-image
	{
		max-width: 100px;
	}
	.paw-bazaar
	{
		left: 50%;
		bottom: -90px;
	}
	.paw-bazaar .paw-image
	{
		max-width: 75px;
	}
	section.section-landing-vc .subject-heading
	{
		padding: 0 15px;
	}
	.partner-list .image
	{
		max-width: 200px;
		height: 100px;
		margin-bottom: 20px;
	}
	/*====================================== SECTION WOF PAGE ======================================*/
	section.section-hero-wof
	{
		margin-bottom: 0;
		background-size: 100px;
	}
	.row-wof
	{
		flex-direction: column;
	}
	.row-wof .backto
	{
		margin-left: -20px;
	}
	.hero-wof
	{
		margin-top: 0;
	}
	.wof-uploaded .wof-photo
	{
		max-width: 155px !important;
		width: 100%;
	}
	.wof-uploaded .wof-photo .name
	{
		padding: 5px 15px;
	}
	.wof-uploaded .wof-photo .name .btn-kedua
	{
		font-size: 16px;
		width: 100%;
	}
	.wof-uploaded .swiper-container.wof-edit
	{
		padding: 0;
	}
	.wof-uploaded .wof-edit .button-container.button-edit
	{
		display: none;
	}
	.wof-photo
	{
		height: 100%;
		margin-bottom: 20px;
	}
	.col-wof .wof-photo
	{
		width: 100%;
		max-width: 150px;
	}
	.wof-photo .image
	{
		height: 145px;
		max-height: 145px;
		min-height: 145px;
	}
	.wof-photo .name
	{
		padding: 0;
	}
	.wof-photo .name p.paw-semi
	{
		font-size: 15px;
	}
	.wof-photo.wof-modal
	{
		max-width: 300px;
		height: auto;
		margin: 0 auto 30px auto;
	}
	.wof-photo.wof-modal .image
	{
		max-width: 300px;
		max-height: 300px;
		min-height: 300px;
		height: 300px;
	}
	.load-more button.btn-kedua
	{
		margin: 0;
	}
	.row-upload
	{
		left: auto;
	}
	.wof-footer-upload
	{
		margin-top: 0;
		padding-top: 0;
	}
	.wof-footer-upload p.paw-semi
	{
		font-size: 15px;
		line-height: 24px;
	}
	.modal-body.body-upload .wof-photo.wof-modal
	{
		height: 100%;
		padding-bottom: 10px;
	}
	.imagePreview
	{
		margin: 0 auto;
		max-height: 300px;
		min-height: 300px;
	}
	/*====================================== SECTION VIRTUAL CITY PAGE ======================================*/
	.modal-body .desc .detail .list-service .sub-service span,
	.modal-terms ul li
	{
		font-size: 16px;
	}
	/*====================================== SECTION 404 PAGE ======================================*/
	section.section-notfound
	{
		margin-bottom: 0;
		background-size: 100px, 50px;
		background-size: 100px, 50px;
		background-position: left top, right bottom 50px;
	}
	/*====================================== SECTION FOOTER PAGE ======================================*/
	footer.footer
	{
		margin-top: -20px;
		margin-bottom: 30px;
		padding-top: 30px;
	}
	.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 (max-device-width: 1024px)
{
	section
	{
		margin-bottom: 0;
	}
	/*====================================== SECTION LANDING PAGE PAGE ======================================*/
	.landing-vc > .image img
	{
		opacity: 0.5;
	}
	.landing-vc > .image .action
	{
		top: 50px;
		opacity: 1;
	}
	.running-left, .running-right
	{
		height: 150px;
		margin: 0;
	}
	.running-left #videoHero, .running-right #videoRunning
	{
		width: 100%;
		height: 100%;
	}
	/*====================================== SECTION VIRTUAL CITY PAGE ======================================*/
	.backto-vc
	{
		z-index: 10;
		position: fixed;
		top: 0;
		left: 0;
	}
	.backto-vc .btn-utama
	{
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		border-top-right-radius: 0;
		border-bottom-right-radius: 15px;
		font-size: 12px;
		padding: 5px 10px;
	}
	section.section-vc
	{
		display: none;
	}
	section.section-vc-mobile
	{
		display: block;
	}
	.row-mobile
	{
		background-image: url(../images/vc/mobile-1.png), url(../images/vc/mobile-2.png), url(../images/vc/mobile-3.png),
		url(../images/vc/mobile-4.png), url(../images/vc/mobile-5.png), url(../images/vc/mobile-6.png),
		url(../images/vc/mobile-7.png), url(../images/vc/mobile-8.png), url(../images/vc/mobile-9.png),
		url(../images/vc/mobile-10.png), url(../images/vc/mobile-11.png), url(../images/vc/mobile-12.png),
		url(../images/vc/mobile-13.png), url(../images/vc/mobile-14.png), url(../images/vc/mobile-15.png);
		background-position:top 0 left 0, top 25px right -30px, top 10% left -20px, top 15% right -50px,
		top 25% left -25px, top 28% right 0px, top 37% left -25px,
		top 45% right -24px, top 52% left 0, top 59% right 0, bottom 32% left -30px, bottom 25% right -20px,
		bottom 18% left -10px,  bottom 13% right 0px, bottom 30px left 0px;
		background-size: 100px;
		background-repeat: no-repeat;
	}
	.col-full
	{
		padding: 0;
	}
	.vc-mobile .desc
	{
		margin-top: 10px;
		padding: 0 15px;
	}
	.vc-mobile .building
	{
		margin-bottom: 50px;
	}
	.vc-mobile .building .image
	{
		max-width: 480px;
		width: 100%;
		height: 320px;
		margin: 0 auto 15px auto;
	}
	.modal-vc .modal-body
	{
		max-height: 100%;
	}
	.modal-vc .modal-footer
	{
		background-position: right 25px bottom -10px, left 25px bottom -10px;
	}
	.modal-body .desc .detail h4
	{
		font-size: 20px;
	}
	.modal-body .desc .detail .list .wrapper
	{
		flex-direction: column;
		text-align: center;
		margin-bottom: 15px;
	}
	.modal-body .desc .detail .list .wrapper .icon-detail
	{
		margin-right: 0;
	}
	.modal-body .desc .detail .list .wrapper .icon-detail img
	{
		width: 48px;
		height: 48px
	}
	.modal-body .desc .detail .list .wrapper .word.facility .facil-list span
	{
		display: inline-block;
		font-size: 16px;
	}
	.modal-body .desc .detail .list-service .service
	{
		margin-bottom: 15px;
	}
	.modal-body .desc .detail .list-service .sub-service
	{
		margin-bottom: 10px;
	}
	.modal-body .desc .detail .list-service .sub-service .image-sub
	{
		width: 48px;
		height: 48px;
	}
	.modal-body .desc .detail .list-service
	{
		text-align: center;
	}
	.modal-body .desc .detail .list .wrapper,
	.modal-body .desc .detail .list-service .sub-service
	{
		flex-direction: column;
		text-align: center;
	}
	.modal-body .desc .detail .list .wrapper .word.facility
	{
		text-align: left;
		margin-top: 15px;
	}
	.modal-body.modal-body-wof .button-container .swiper-button-prev
	{
		left: 0 !important;
	}
	.modal-body.modal-body-wof .button-container .swiper-button-next
	{
		right: 0 !important;
	}
	/*====================================== SECTION BAZAAR PAGE ======================================*/
	.row-mobile-bazaar
	{
		background-image: url(../images/vc/mobile-1.png), url(../images/vc/mobile-4.png), url(../images/vc/mobile-5.png),
		url(../images/vc/mobile-8.png), url(../images/vc/mobile-12.png), url(../images/vc/mobile-14.png), url(../images/vc/mobile-15.png);
		background-position: top 0 left 0, top 15% right -50px,
		top 35% left -24px, top 59% right 0, bottom 32% left -30px,
		bottom 13% right 0px, bottom 30px left 0px;
		background-size: 100px;
		background-repeat: no-repeat;
	}
	/*====================================== SECTION WOF PAGE ======================================*/
	.wof-upload
	{
		padding: 5px 15px;
	}
	.modal-body.body-upload
	{
		padding: 10px;
	}
	.wof-photo.wof-modal .twibbon > .image
	{
		/*max-width: 320px;*/
	}
	.wof-photo.wof-modal .name
	{
		padding: 10px 0;
	}
	.wof-photo.wof-modal
	{
		height: auto;
		margin: 0 auto 30px auto;
	}
}
@media only screen and (min-device-width: 0px) and (max-device-width: 480px)
{
	.vc-mobile .building
	{
		margin-bottom: 30px;
	}
	.vc-mobile .building .image
	{
		margin-bottom: 15px;
	}
	.vc-mobile .building .title h3.paw-category
	{
		font-size: 24px;
	}
	.bazaar-wrapper
	{
		margin-top: 20px;
	}
	.bazaar-wrapper .modal-logo, .bazaar-wrapper .bazaar-logo
	{
		max-width: 125px;
		height: 125px;
	}
	.bazaar-wrapper .bazaar-logo:before
	{
		top: 55px;
	}
	.modal-body .modal-teaser iframe
	{
		height: 250px;
	}
}
@media only screen and (min-device-width: 481px) and (max-device-width: 768px)
{

}
@media only screen and (min-device-width: 769px) and (max-device-width: 1056px)
{

}