@media (max-width: 325px)
{
	header #navigation .logo img.navbar-logo
	{
		width: 120px !important;
		margin-top: 5px !important;
	}
	
}
@media (max-width: 1024px)
{
	h1 {
		font-size: 42px;
	}
	h2 {
		font-size: 30px;
	}
	h3 {
		font-size: 26px;
	}
	h4 {
		font-size: 20px;
	}
	h5 {
		font-size: 18px;
	}
	h6 {
		font-size: 16px;
		font-weight: 600;
	}
	p
	{
		font-size: 16px;
	}
	/*====================================== SECTION WORD ======================================*/
	.sam-head {
		font-weight: 700;
		line-height: 1.25;
		letter-spacing: 0;
		color: #fff;
		transition: all 0.3s;
	}
	.sam-category
	{
		color: #fff;
		line-height: 1.25;
		letter-spacing: 0;
		font-weight: 600;
		color: #fff;
		transition: all 0.3s;
	}
	.sam-break
	{
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	.sam-small
	{
		font-size: 12px;
		color: #fff;
		line-height: 1.5;
		letter-spacing: 0.5px;
		transition: all 0.3s;
	}
	.navbar-space
	{
		margin-top: 60px;
	}
	.modal-header .close
	{
		opacity: 1;
		top: 8px;
		right: 5px;
	}
	header nav
	{
		padding: 10px 15px 15px 15px;
	}
	header #navigation .logo
	{
		margin-top: 5px;
	}
	header #navigation .logo img.navbar-logo
	{
		margin-top: 3px;
		width: 135px;
	}
	.nav-toggle
	{
		display: block;
	}
	img.navbar-logo
	{
		width: 60px;
		margin-top: 15px;
		margin-left: 0;
	}
	ul.menu-left
	{
		display: none;
	}
	.menu-right
	{
		/*display: none;*/
		/*	padding: 0 60px 50px 20px;*/
		display: flex;
		justify-content: flex-start;
		transition: all 0.3s;
	}
	.menu-right li:nth-child(1) a
	{
		margin-left: 0;
	}
	.container-nav .nav-menu
	{
		padding: 0 15px;
	}
	.container-nav .nav-menu .swiper-wrapper
	{
		justify-content: flex-start;
		align-items: center;
	}
	.form-group
	{
		margin-bottom: 30px;
	}
}
/*Phone View*/
@media (max-width: 767px)
{

	/*====================================== SECTION MENU NAVBAR ======================================*/
	header nav
	{
		padding: 10px 15px 10px 15px;
	}
	.container-nav
	{
		/*flex-direction: column;*/
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 10px;
	}
	.container-nav .nav-title
	{
		margin-right: auto;
	}
	.container-nav .nav-title img
	{
		width: 150px;
	}
	.container-nav .nav-cta
	{
		order: 2;
		padding-left: 0;
		margin-left: auto;
	}
	.container-nav .nav-cta .sft-btn--outlined
	{
		width: 25px;
		height: 25px;
		padding: 0;
		border-color: #f54036 !important;
	}
	.container-nav .nav-menu
	{
		margin-top: 10px;
		padding: 0;
		order: 3;
		flex: 0 0 auto;
		min-width: auto;
		/*overflow: auto;*/
		-webkit-box-ordinal-group: 4;
	}
	.nav-menu .swiper-button-prev
	{
		left: -30px;
	}
	.nav-menu .swiper-button-next
	{
		right: -30px;
	}
	/*====================================== SECTION DEFAULT ======================================*/
	.navbar-space
	{
		margin-top: 60px;
	}
	/*====================================== SECTION HOME PAGE ======================================*/
	section.section-hero
	{
		padding-top: 150px;
	}
	section.section-hero.hero-home .hero-left
	{
		max-width: 150px;
		top: 0;
		left: 0;
	}
	section.section-hero.hero-home .rainbow-icon
	{
		top: 70px;
		left: -75px;
		max-width: 150px;
	}
	section.section-hero.hero-home .hero-right
	{
		top: 0;
		max-width: 175px;
	}
	section.section-hero.hero-home .subject-title
	{
		margin-bottom: 16px;
	}
	section.section-hero.hero-home .subject-desc h3.sam-category
	{
		margin-bottom: 32px !important;
	}
	section.section-video
	{
		padding-bottom: 100px;
	}
	.video-kerning
	{
		max-width: 150px;
		right: -70px;
		top: 300px;
	}
	.iframe-video .video-wrapper
	{
		height: 250px;
	}
	.iframe-video .poster:before
	{
		background-size: 75px;
	}
	.iframe-word-left
	{
		top: 0;
		left: -350px
	}
	.iframe-word-right
	{
		bottom: 0;
		right: -195px;
	}
	section.section-fyi.fyi-bg
	{
		margin-top: -100px;
		margin-bottom: 0;
	}
	.fyi-list ol li
	{
		padding-left: 40px;
	}
	section.section-champion
	{
		background-position: center top 250px, top 385px center;
	}
	section.section-champion.section-champ
	{
		background-position: center top 150px, top 475px center;
	}
	.bg-pinyata
	{
		bottom: 75%;
	}
	section.section-champion.section-champ .bg-pinyata
	{
		bottom: 60%;
	}
	.champ-list
	{
		flex-direction: column;
		column-gap: 0;
	}
	.champ-card
	{
		padding: 15px 15px 30px 15px;
	}
	.champ-card .number
	{
		margin: -52px auto 0 auto;
	}
	.champ-card:nth-child(1)
	{
		order: 1;
	}
	.champ-card:nth-child(2)
	{
		order: 2;
		transform: translateY(0);
		margin-top: 60px;
	}
	.champ-card:nth-child(3)
	{
		order: 3;
		transform: translateY(0);
		margin-top: 60px;
	}
	.champ-choice
	{
		margin: 60px auto 0 auto;
	}
	.empowering-lamp
	{
		bottom: -20px;
	}
	.empowering-lamp .image
	{
		max-width: 100px;
	}
	.empowering-logic .image, .empowering-atom .image
	{
		max-width: 25px;
	}
	.empowering-logic
	{
		left: 30%;
		bottom: -50px;
	}
	.empowering-atom
	{
		right: 30%;
		bottom: -30px;
	}
	section.section-theme
	{
		margin-top: -12px;
		padding-top: 30px;
	}
	section.section-theme .subject-title
	{
		margin-bottom: 32px;
	}
	.row-theme
	{
		padding: 0 15px;
		flex-direction: column;
		margin-bottom: 15px;
	}
	.swiper-theme .swiper-slide .row-theme.clmn-rvrs
	{
		flex-direction: column-reverse;
	}
	.theme-image
	{
		margin-bottom: 15px;
	}
	.swiper-theme .swiper-button-prev,
	.swiper-theme .swiper-button-next
	{
		background-size: 36px;
		border: 1px solid #e1a35d;
		top: 100px;
	}
	section.section-jury, section.section-jury-list
	{
		padding-top: 25px;
		padding-bottom: 25px;
	}
	.nav.nav-pills.nav-criteria
	{
		flex-wrap: nowrap;
		margin-left: 0;
	}
	.criteria-card .number h1 span
	{
		font-size: 22px;
		transform: translateY(-8px);
		margin-left: -6px;
	}
	.criteria-card .number p.sam-semi
	{
		margin-top: -10px;
	}
	section.section-news
	{
		padding: 50px 0 25px 0;
	}
	.news-desc
	{
		position: static;
		margin-top: 15px;
		padding-left: 10px;
		padding-bottom: 10px;
	}
	.news-divider
	{
		margin: 0 auto 30px auto;
	}
	.support-logo .image-logo img
	{
		max-width: 100px;
	}
	section.section-supported
	{
		padding-bottom: 50px;
	}
	.support-logo
	{
		flex-direction: column
	}
	.support-logo .image-logo
	{
		max-width: 100%;
		margin-bottom: 20px;
	}
	.support-logo .image-logo:before
	{
		display: none;
	}
	/*====================================== SECTION LOGIN PAGE ======================================*/
	section.section-login
	{
		padding: 30px 0 75px 0
	}
	section.section-login .kerning-bottom
	{
		max-width: 125px;
		bottom: -50px;
		right: -50px;
	}
	section.section-login .forget-back
	{
		top: -30px;
		left: 15px;
	}
	section.section-login .subject-title
	{
		padding: 0 15px;
	}
	.login-box .user-box
	{
		min-height: auto;
	}
	/*====================================== SECTION FORGET PASS PAGE ======================================*/
	section.section-forget
	{

	}
	section.section-forget .kerning-left,
	section.section-forget .kerning-right
	{
		position: absolute;
		max-width: 125px;
	}
	section.section-forget .kerning-left
	{
		top: 100px;
		left: -65px;
	}
	section.section-forget .kerning-right
	{
		bottom: -50px;
		right: -55px;
	}
	/*====================================== SECTION FAQ PAGE ======================================*/
	section.section-faq
	{
		margin-top: 100px;
	}
	.faq-image
	{
		margin: 0 auto 15px auto;
	}
	.sticky-faq
	{
		position: static;
		top: 0;
	}
	.faq .card .card-body
	{
		padding: 30px 15px 10px 15px;
		padding-left: 15px;
	}
	/*====================================== SECTION TERMS PAGE ======================================*/
	section.section-hero.section-terms .hero-left,
	section.section-hero.section-terms .hero-right
	{
		max-width: 150px;
		top: 0;
	}
	.tnc-list .table.leftright
	{
		padding: 0;
	}
	.tnc-list.tncmobile
	{
		overflow: auto;
	}
	.tnc-list.tncmobile .table.leftright tr,
	.tnc-list .table-periode table tr
	{
		margin: 10px 0 0 0;
		display: flex;
		flex-direction: column;
	}
	/*====================================== SECTION CHAMPION PAGE ======================================*/
	section.section-champion.section-champ .subject-title .image-champion
	{
		max-width: 100px;
		margin-right: 10px;
	}
/*	.champ-finalist .finalist ol
	{
		padding-left: 20px;
	}*/
	.champ-finalist
	{
		/*padding: 30px 0;*/
	}
	.section-fyi.fyi-champ
	{
		background-size: contain;
	}
	.choice-container
	{
		padding: 45px 30px;
	}
	.choice-container .image
	{
		margin-right: 0;
		margin-bottom: 20px;
	}
	.video-container
	{
		text-align: center;
	}
	.video-container .image
	{
		margin: 0 auto;
	}
	/*====================================== SECTION SUBMISSION PAGE ======================================*/
	section.section-hero.section-submission
	{
		padding-top: 150px;
		padding-bottom: 50px;
	}
	section.section-hero.section-submission .hero-left
	{
		max-width: 150px;
		top: 0;
	}
	section.section-hero.section-submission .rainbow-icon
	{
		max-width: 150px;
		top: -15px;
		left: 15px;
	}
	section.section-hero.section-submission .hero-right
	{
		max-width: 150px;
		top: 0;
	}
	.section-submission .cta-wrapper .wrapper
	{
		margin-left: 40px !important;
		margin-bottom: 10px;
	}
	.erase-team
	{
		top: -60px;
		left: 140px;
	}
	/*====================================== SECTION REGISTER PAGE ======================================*/
	section.section-register
	{
		padding-top: 150px;
	}
	.register-bg
	{
		padding: 15px 0 20px 0;
	}
	.register-bg .subject-title
	{
		padding: 0 20px;
	}
	.register-bg .kerning-left,
	.register-bg .kerning-right
	{
		position: absolute;
		max-width: 125px;
	}
	.register-bg .kerning-left
	{
		top: -70px;
		left: -85px;
	}
	.register-bg .kerning-right
	{
		bottom: -100px;
		right: -75px;
	}
	/*====================================== SECTION DASHBOARD PAGE ======================================*/
	section.section-profile
	{
		padding-top: 150px;
		background-size: 350px;
	}
	section.section-profile .kerning-right
	{
		max-width: 125px;
		position: absolute;
		right: -60px;
		top: 85px;
	}
	section.section-profile-edit .kerning-left
	{
		max-width: 125px;
		left: -65px;
		top: 60px;
	}
	section.section-profile-edit
	{
		background-size: 350px;
	}
	.profile-body
	{
		padding: 30px 15px;
	}
	.fyi-list ul li
	{
		flex-direction: column;
	}
	.fyi-list ul li .list-date
	{
		max-width: 100%;
		margin-bottom: 15px;
	}
	.when-kerning-left
	{
		max-width: 150px;
		bottom: -115px;
		left: -75px;
	}
	section.section-fyi
	{
		margin-top: 40px;
	}
	section.section-fyi.section-fyi-profile
	{
		background-size: 300px, 300px;
		background-position: top left -125px, top 300px right;
	}
	section.section-fyi.section-fyi-profile .when-kerning-right
	{
		max-width: 125px;
		top: 60px;
		right: -60px;
	}
	.subject-change span
	{
		font-size: 16px;
		top: 8px;
	}
	/*====================================== SECTION THANK YOU PAGE ======================================*/
	section.section-thankyou
	{
		min-height: 100vh;
		height: 100%;
	}
	section.section-thankyou .hero-left,
	section.section-thankyou .kerning-right,
	section.section-thankyou .kerning-left
	{
		max-width: 150px;
	}
	section.section-thankyou .kerning-right
	{
		right: -65px;
		top: -50px;
	}
	section.section-thankyou .kerning-left
	{
		left: -70px;
		bottom: -65px;
	}
	/*====================================== SECTION NOT FOUND PAGE ======================================*/
	section.section-notfound
	{
		margin-top: 150px;
	}
	.row-notfound
	{
		height: 100%;
		display: flex;
		flex-direction: column;
		text-align: center;
	}
	.pagenotfound .image
	{
		max-width: 320px;
		margin: 0 auto 20px auto;
	}
}
/*IMG NAVBAR*/
@media (max-width: 340px)
{
	.container-nav .nav-title img
	{
		width: 130px;
	}
}
/*Tab View & Ipad View*/
@media (min-width:  768px) and (max-width: 1024px)
{
	header #navigation .logo img.navbar-logo
	{
		width: 150px;
	}
	/*====================================== SECTION DEFAULT ======================================*/
	.navbar-space
	{
		margin-top: 60px;
	}
	.btn-transition {
		display: inline-block;
		position: relative;
		min-width: 150px;
		padding: 15px 20px;
		border-radius: 30px;
	}
	/*====================================== SECTION HOME PAGE ======================================*/
	section.section-hero.hero-home .hero-left
	{
		max-width: 200px;
		top: 0;
		left: 0;
	}
	section.section-hero.hero-home .rainbow-icon
	{
		max-width: 175px;
		top: 30px;
		left: -15px;
	}
	section.section-hero.hero-home .hero-right
	{
		top: 0;
		max-width: 175px;
	}
	section.section-hero.hero-home .subject-title
	{
		margin-bottom: 16px;
	}
	section.section-hero.hero-home .subject-desc h3.sam-category
	{
		margin-bottom: 32px !important;
	}
	section.section-video
	{
		padding-bottom: 100px;
	}
	.video-kerning
	{
		max-width: 175px;
		right: -90px;
		top: 445px;
	}
	.iframe-video .video-wrapper
	{
		height: 400px;
	}
	.iframe-word-left
	{
		top: 50px;
		left: -375px;
	}
	.iframe-word-right
	{
		bottom: 15px;
		right: -220px
	}
	.fyi-list ol li
	{
		padding-left: 40px;
	}
	section.section-champion
	{
		background-position: center top 250px, top 230px center;
	}
	section.section-champion.section-champ
	{
		background-position: center top 75px, top 450px center;
	}
	section.section-fyi.fyi-bg
	{
		margin-bottom: 0;
	}
	.champ-choice
	{
		margin: 200px auto 0 auto;
	}
	.champ-card
	{
		padding: 15px 15px 30px 15px;
	}
	.champ-card .number
	{
		margin: -45px auto 0 auto;
	}
	.bg-pinyata
	{
		bottom: 400px;
	}
	section.section-champion .bg-pinyata
	{
		bottom: 600px;
	}
	.empowering-lamp
	{
		bottom: -30px;
	}
	.empowering-lamp .image
	{
		max-width: 175px;
	}
	.empowering-logic .image, .empowering-atom .image
	{
		max-width: 50px;
	}
	.empowering-logic
	{
		left: 30%;
		bottom: -100px;
	}
	.empowering-atom
	{
		right: 30%;
		bottom: -45px;
	}
	section.section-theme
	{
		margin-top: -25px;
		padding-top: 30px;
	}
	section.section-theme .subject-title
	{
		margin-bottom: 32px;
	}
	.row-theme
	{
		padding: 0 15px;
		flex-direction: column;
		margin-bottom: 15px;
	}
	.theme-image
	{
		margin-bottom: 15px;
	}
	.swiper-theme .swiper-slide .row-theme.clmn-rvrs
	{
		flex-direction: column-reverse;
	}
	.swiper-theme .swiper-button-prev,
	.swiper-theme .swiper-button-next
	{
		background-size: 36px;
		border: 1px solid #e1a35d;
		top: 175px;
	}
	section.section-jury, section.section-jury-list
	{
		padding-top: 25px;
		padding-bottom: 25px;
	}
	.nav.nav-pills.nav-criteria
	{
		margin-left: 0;
	}
	.criteria-card
	{
		margin-bottom: 15px;
	}
	.criteria-card .number h1 span
	{
		font-size: 22px;
		transform: translateY(-8px);
		margin-left: -6px;
	}
	.criteria-card .number p.sam-semi
	{
		margin-top: -10px;
	}
	section.section-news
	{
		padding: 50px 0 25px 0;
	}
	.news-desc
	{
		position: static;
		margin-top: 15px;
		padding-left: 10px;
		padding-bottom: 10px;
	}
	.news-divider
	{
		margin: 0 auto 30px auto;
	}
	.support-logo .image-logo
	{
		max-width: 50%;
	}
	/*====================================== SECTION REGISTER PAGE ======================================*/
	.register-bg
	{
		padding: 15px 0 20px 0;
	}
	.register-bg .subject-title
	{
		padding: 0 20px;
	}
	.register-bg .kerning-left,
	.register-bg .kerning-right
	{
		position: absolute;
		max-width: 150px;
	}
	.register-bg .kerning-left
	{
		top: -75px;
		left: -100px;
	}
	.register-bg .kerning-right
	{
		bottom: -110px;
		right: -90px
	}
	/*====================================== SECTION LOGIN PAGE ======================================*/
	section.section-login
	{
		padding: 30px 0 75px 0
	}
	section.section-login .kerning-bottom
	{
		max-width: 150px;
		bottom: -60px;
		right: -60px;
	}
	section.section-login .forget-back
	{
		top: -30px;
		left: 15px;
	}
	section.section-login .subject-title
	{
		padding: 0 15px;
	}
	section.section-login .forget-back
	{
		top: 0;
		left: 30px;
	}
	.login-box .user-box
	{
		min-height: 77px;
	}
	/*====================================== SECTION FAQ PAGE ======================================*/
	section.section-faq
	{
		margin-top: 80px;
	}
	.faq-image
	{
		margin: 0 auto 15px auto;
	}
	.sticky-faq
	{
		position: static;
		top: 0;
	}
	.faq .card .card-body
	{
		padding: 30px 15px 10px 15px;
		padding-left: 15px;
	}
	/*====================================== SECTION CHAMPION PAGE ======================================*/
	.champ-finalist
	{
		max-width: 480px;
	}
	.choice-container
	{
		padding: 45px 30px;
	}
	.choice-container .image
	{
		max-width: 125px;
		width: 100%;
		margin-right: 20px;
	}
	.video-container .image
	{
		margin: 0 auto;
	}
	/*====================================== SECTION THANK YOU PAGE ======================================*/
	section.section-thankyou .hero-left,
	section.section-thankyou .kerning-right,
	section.section-thankyou .kerning-left
	{
		max-width: 200px;
	}
	section.section-thankyou .kerning-right
	{
		right: -85px;
		top: -70px;
	}
	section.section-thankyou .kerning-left
	{
		left: -90px;
		bottom: -85px;
	}
	/*====================================== SECTION SUBMISSION PAGE ======================================*/
	section.section-hero.section-submission
	{
		padding-bottom: 50px;
	}
	section.section-hero.section-submission .hero-left
	{
		max-width: 175px;
		top: 0;
	}
	section.section-hero.section-submission .rainbow-icon
	{
		max-width: 175px;
		top: 30px;
		left: -15px;
	}
	section.section-hero.section-submission .hero-right
	{
		max-width: 175px;
		top: 0;
	}
	.erase-team
	{
		top: -60px;
		left: 140px;
	}
	/*====================================== SECTION DASHBOARD PAGE ======================================*/
	section.section-profile .kerning-right
	{
		max-width: 175px;
		position: absolute;
		right: -85px;
		top: 50px;
	}
	section.section-profile-edit .kerning-left
	{
		max-width: 175px;
		left: -85px;
		top: 50px;
	}
	section.section-fyi
	{
		margin-top: 50px;
	}
	.when-kerning-left
	{
		max-width: 225px;
		bottom: 40%;
		left: -120px;
	}
	section.section-fyi.section-fyi-profile .when-kerning-right
	{
		max-width: 175px;
		top: 10px;
		right: -85px;
	}
	.subject-change span
	{
		font-size: 18px;
		top: 8px;
	}
}

/* Landscape */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1180px) 
and (orientation: landscape) 
and (-webkit-min-device-pixel-ratio: 1)
{
	header nav
	{
		padding: 10px 15px 10px 15px;
	}
	header #navigation .logo img.navbar-logo
	{
		width: 150px;
	}	
	/*====================================== SECTION HOME PAGE ======================================*/
	section.section-hero.hero-home .rainbow-icon
	{
		max-width: 225px;
		top: -20px;
		left: 15px;
	}
	section.section-hero.hero-home .hero-right
	{
		max-width: 200px;
	}
	.iframe-word-left
	{
		top: 50px;
		left: -600px;
	}
	.iframe-word-right
	{
		right: -375px;
		bottom: 35px;
	}
	section.section-champion
	{
		background-position: center top 50px, top 175px center;
	}
	section.section-champion.section-champ
	{
		background-position: center top 50px, top 450px center;
	}
	.bg-pinyata
	{
		bottom: 300px;
	}
	section.section-champion .bg-pinyata
	{
		bottom: 450px;
	}
	section.section-theme
	{
		margin-top: -30px;
	}
	.swiper-theme .swiper-button-prev, .swiper-theme .swiper-button-next
	{
		top: 225px;
	}
	.empowering-lamp 
	{
		bottom: -55px;
	}
	.empowering-lamp .image
	{
		max-width: 250px;
	}
	section.section-news
	{
		padding: 50px 0 50px 0;
	}
	.news-desc
	{
		position: absolute;
		bottom: 0;
		right: 30px;
	}
	/*====================================== SECTION LOGIN PAGE ======================================*/
	section.section-login .forget-back
	{
		left: 150px;
	}
	/*====================================== SECTION FAQ PAGE ======================================*/
	.sticky-faq
	{
		position: sticky;
		top: 150px;
	}
	/*====================================== SECTION SUBMISSION PAGE ======================================*/
	section.section-hero.section-submission
	{
		padding-bottom: 50px;
	}
	section.section-hero.section-submission .hero-left
	{
		max-width: 225px;
		top: 0;
	}
	section.section-hero.section-submission .rainbow-icon
	{
		max-width: 225px;
		top: -20px;
		left: 15px;
	}
}
@media only screen 
and (max-device-width: 1024px) 
and (orientation: landscape) 
and (-webkit-min-device-pixel-ratio: 1)
{
	.iframe-word-left
	{
		top: 50px;
		left: -425px;
	}
	.iframe-word-right
	{
		right: -275px
	}
}

/* 11-12 Inch */
@media (min-width: 1056px) and (max-width: 1152px)
{
	.rainbow-icon
	{
		top: -5px;
		left: -25px;
		max-width: 250px;
	}
	.iframe-word-left
	{
		top: 50px;
		left: -600px
	}
	.iframe-word-right
	{
		bottom: 25px;
		right: -375px;
	}
}

/* >16 Inch */
@media (min-width: 1550px)
{
	section.section-hero
	{
		background-size: 450px, 400px, contain;
		background-position: top -75px left, top right, bottom center;
	}
	.hero-left
	{
		max-width: 400px;
	}
	.rainbow-icon
	{
		max-width: 400px;
	}
	.hero-right
	{
		max-width: 500px;
	}
	.bg-pinyata
	{
		position: absolute;
		bottom: 0;
	}
	section.section-champion
	{
		padding-top: 50px;
		background-position: center top -60px, top 250px center;
	}
}