/********************************************************************************************************
    PIXEL TO REM CONVERSION TABLE - Root Size: 16px
---------------------------------------------------------------------------------------------------------
    PX   REM / EM |  PX   REM / EM |  PX   REM / EM |  PX   REM / EM |  PX   REM     |  PX   REM / EM
---------------------------------------------------------------------------------------------------------
    10 = 0.625    |  20 = 1.25     |  30 = 1.875    |  40 = 2.5      |  50 = 3.125   |  60 = 3.75
    11 = 0.6875   |  21 = 1.3125   |  31 = 1.9375   |  41 = 2.5625   |  51 = 3.1875  |  61 = 3.8125
    12 = 0.75     |  22 = 1.375    |  32 = 2        |  42 = 2.625    |  52 = 3.25    |  62 = 3.875
    13 = 0.8125   |  23 = 1.4375   |  33 = 2.0625   |  43 = 2.6875   |  53 = 3.3125  |  63 = 3.9375
    14 = 0.875    |  24 = 1.5      |  34 = 2.125    |  44 = 2.75     |  54 = 3.375   |  64 = 4
    15 = 0.9375   |  25 = 1.5625   |  35 = 2.1875   |  45 = 2.8125   |  55 = 3.4375
    16 = 1        |  26 = 1.625    |  36 = 2.25     |  46 = 2.875    |  56 = 3.5
    17 = 1.0625   |  27 = 1.6875   |  37 = 2.3125   |  47 = 2.9375   |  57 = 3.5625
    18 = 1.125    |  28 = 1.75     |  38 = 2.375    |  48 = 3        |  58 = 3.625
    19 = 1.1875   |  29 = 1.8125   |  39 = 2.4375   |  49 = 3.0625   |  59 = 3.6875
---------------------------------------------------------------------------------------------------------
*********************************************************************************************************/

/* Header */
/** ----------------- SPACES RELATED --------------------- */
.nav__top__contacts__contact__icon { margin-right: 0.34rem; }
.fa-phone.nav__top__contacts__contact__icon { margin-top: 0.4rem; }
.nav__top__contacts__contact__flag { width: 1.8rem; height: 1.8rem; }
.nav__top__contacts__contact__arrow-icon { margin: 0.4em 0 0 0.5rem; }
.nav__bottom__navigations li a { margin-right: 4.5vw; }
.fixed-on-top .nav__bottom__navigations li a { margin-right: 4vw; }
.nav__bottom__socmed__icon { margin-left: 1.5em; }
	
	
/** ----------------- FONTS RELATED ---------------------- */
.nav__top__contacts__logo { font-size: 20px; }
.nav__top__contacts__contact__icon { font-size: 1.8rem; }
.nav__top__contacts__contact { font-size: 1.2rem; }
.nav__top__contacts__contact__icon__text__tagline { font-size: 0.65rem !important; }
.nav__top__contacts__contact__icon__text__content { font-size: 0.86rem !important; }
.nav__bottom__navigations li a { font-size: 0.8rem; }
.nav__bottom__close-menu__icon { font-size: 2rem; }

.nav__top {
	background: linear-gradient(90deg, #ffbe00 0%, #fee600 100%);
	z-index: 99;
}

.nav__top.fixed-on-top {
	position: fixed;
	width: 100%;
}

.nav__top__contacts__logo {
	font-weight: 400;
	color: var(--defaultFontBlack);
	text-decoration: none;
}
.nav__top__contacts__logo { max-width: 25%; }
.nav__bottom__wrapper .nav__top__contacts__logo { max-width: 18%; }

.nav__top__contacts__logo, .nav__top__contacts__logo img {
	
}
.nav__top__contacts__logo img {
	/*margin-left: -0.86em;*/
}

.nav__top__contacts__logo img {
	max-width: 86%;
}

.nav__top__contacts__wrap {
	display: flex;
}

.nav__top__contacts__contact { 
	font-weight: 600;
	margin: 0;
	line-height: 0.5em !important;
}

.nav__top__contacts__contact.nav__top__contacts__contact--language {
	transform: scale(0.8);
}

.nav__top__contacts__contact__icon__text__content {
	line-height: 1em !important;
	font-weight: 600;
}
.nav__top__contacts__contact__icon__text__content:hover{
	color: var(--defaultFontBlack);
}

.nav__top__contacts__contact__flag {
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	background-color: red;
	border: 2px solid var(--defaultBlack);
}

.nav__top__contacts__contact__arrow-icon {
	border: 8px solid black;
	border-bottom-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;	
}

.nav__top__contacts__hamburger-menu {
	width: 44px;
	height: 44px;
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border: none;
	background-color: transparent;
	z-index: 999;
	cursor: pointer;
}

.nav__top__contacts__hamburger-menu__line {
	width: 100%;
	height: 4px;
	background-color: white;
	margin-bottom: 3px;
	border-radius: 10px;
}

.nav__top__contacts__hamburger-menu__line--last {
	margin-bottom: 0 !important;
}

.nav__bottom {
	background: linear-gradient(to right, hsl(0, 0%, 30%), var(--defaultBlack));
	transition: 0.3s ease;
	z-index: 999;
}

.nav__bottom__wrapper {
	justify-content: space-between;
	align-items: center;
}

.nav__bottom__navigations,
.nav__bottom__navigations li { line-height: 1em; }

.nav__bottom__navigations {
	display: flex;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.nav__bottom__navigations li a {
	color: white;
	text-decoration: none;
	font-weight: 600;
	text-transform: uppercase;
	transition: 0.3s ease;
}

.nav__bottom__navigations li a:hover {
	color: var(--defaultYellow);
}

.nav__bottom__navigations li.current-menu-parent > a,
.nav__bottom__navigations li.current-menu-item > a,
.nav__bottom__navigations li.active > a {
	color: var(--defaultYellow);
}
.nav__bottom__navigations li.current-menu-parent li.current-menu-item > a {
	color: var(--defaultFontBlack);
}
.nav__bottom__navigations li.current-menu-parent li.current-menu-item:not(.menu-item-type-custom) > a {
	text-decoration: underline;
}

.nav__bottom__navigations > li {
	position: relative;
	padding: 0.5rem 0px;
}
@media screen and (min-width: 992px){
	.nav__bottom__navigations > li {
		padding: 0.5rem 0px;
	}
}
.nav__bottom__navigations > li .ast-menu-toggle {
	position: absolute;
	right: 2.86vw;
	margin: 0px;
	padding: 0px;
	background: transparent;
	border: 0px;
}
.nav__bottom__navigations > li .ast-menu-toggle svg {
	width: 0.67rem;
}
.nav__bottom__navigations > li .ast-menu-toggle path{
	fill: var(--defaultWhite);
}
.nav__bottom__navigations > li.current-menu-parent .ast-menu-toggle path{
	fill: var(--defaultYellow);
}
.nav__bottom__navigations li ul,
.nav__bottom__navigations li ul li {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
.nav__bottom__navigations li ul {
	display: none;
	padding: 0.5rem 0.75rem;
	width: 100%;
}
@media screen and (min-width: 992px){
	.nav__bottom__navigations li ul {
		position: absolute;
		top: calc( 100% );
		left: 0%;
		width: 150%;
		background: var(--defaultYellow);
	}
}
.nav__bottom__navigations li:hover ul {
	display: inline-block;
}
.nav__bottom__navigations li ul li {
	padding: 0.15rem 0px;
}
.fixed-on-top .nav__bottom__navigations li ul li a,
.nav__bottom__navigations li ul li a {
	line-height: 1.5em;
	margin-right: 0px;
}
@media screen and (min-width: 992px){
	.nav__bottom__navigations li ul li a {
		color: var(--defaultFontBlack);
	}
}
.nav__bottom__navigations li ul li a:hover{
	color: var(--defaultFontBlack);
	text-decoration: underline;
}

.nav__bottom__socmed ul,
.nav__bottom__socmed ul li { margin: 0px; padding: 0px; list-style: none; }
.nav__bottom__socmed ul { display: flex; flex-direction: row; }

.nav__bottom__socmed__icon {
	color: white;
	cursor: pointer;
	transition: 0.3s ease;
}



.nav__bottom__socmed__icon:hover {
	color: var(--defaultYellow);
}

.nav__bottom__close-menu {
	display: none;
	cursor: pointer;
	border: none;
	background-color: transparent;
}
 
.nav__bottom__close-menu__icon {
	color: white;
}

/** TRANSLATE PRESS **/
.custom-container .trp-language-switcher {
	margin: 0px;
}
.custom-container .trp-language-switcher > div {
	position: relative;
	padding: 0px 15px 0px 0px;
	width: 40px !important;
	height: 25px !important;
	background: none;
	border: 0px;
	border-radius: 0px;
}
.custom-container .trp-language-switcher > div:after {
	position: absolute;
	right: 0px;
	top: 3px;
	display: inline-block;
	content:  " ";
	border: 6px solid black;
	border-bottom-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
	margin: 0.4em 0 0 0.5rem;
}
.custom-container .trp-language-switcher > div > a,
.custom-container .trp-language-switcher > div > a > img {
	position: relative;
	display:  inline-block;
	padding: 0px;
	margin: 0px;
	width: 100%;
	height: 100%;
}
.custom-container .trp-language-switcher > div > a { 
	border: 2px solid var(--defaultFontBlack);
	border-radius: 15px;
	overflow: hidden;
}
.custom-container .trp-language-switcher > div > a > img {
	position: absolute;
	top: 0px;
	left: 0px;
	object-fit: cover;
	object-position: center;
}
.custom-container .trp-language-switcher .trp-ls-shortcode-language { 
	overflow: initial !important;
}
.nav__bottom__wrapper .nav__top__contacts__contact--language { display: none !important; }
.nav__bottom__wrapper .nav__top__contacts__contact--language .trp-language-switcher > div > a{
	border-color: var(--defaultYellow);
}
.nav__bottom__wrapper .nav__top__contacts__contact--language .trp-language-switcher > div:after {
	border-top-color: white;
}
@media screen and (min-width: 992px){

		.fixed-on-top .nav__bottom__wrapper .nav__top__contacts__contact--language { display: flex !important; }
}
@media screen and (max-width: 991px){

		.nav__bottom__wrapper .nav__top__contacts__contact--language { display: flex !important; align-self: flex-start; }
		.nav__bottom__wrapper .nav__top__contacts__contact .lang-text { margin-left: 13px; margin-right: 1rem; font-size: 1.5rem !important; } 
}

@media screen and (min-width: 2500px){

		.nav__top__contacts__logo { max-width: 18rem; }
}
@media screen and (min-width: 1500px){

		.nav__top__contacts__logo { max-width: 18rem; }
		.nav__bottom__navigations li a { margin-right: 3rem; }
		.nav__bottom__navigations > li .ast-menu-toggle { right: 2rem; }
}
@media screen and (max-width: 1200px) {

	/* Header */
	.nav__top__contacts__contact__icon {
		font-size: 1.2rem;
		margin-right: 0.5rem;
	}

	.nav__top__contacts__contact__text {
		font-size: 1rem;
	}

	.nav__bottom__navigations li a,
	.fixed-on-top .nav__bottom__navigations li a {
		margin-right: 2em;
	}

	/* Akhir Header */
}

@media screen and (min-width: 992.1px) {
	/* Header */

	.nav__bottom.fixed-on-top {
		position: fixed;
		width: 100%;
		/* padding: 1em 0; */
		padding: 0px;
	}

	.nav__bottom .nav__bottom__wrapper .nav__top__contacts__logo {
		display: none;
	}

	.nav__bottom.fixed-on-top .nav__bottom__wrapper .nav__top__contacts__logo {
		display: inline-block;
	}

	.nav__bottom.fixed-on-top .nav__bottom__wrapper {
		padding: 3px 0px !important;
	}

	.nav__bottom.fixed-on-top .nav__bottom__socmed {
		display: none !important;
	}

	.nav__bottom.unset-fixed {
		position: fixed;
		top: 6em;
		width: 100%;
		padding: 0;
	}

	/* Akhir Header */
}

@media screen and (min-width: 992px) and (max-width: 1450px){

		.nav__bottom__navigations > li .ast-menu-toggle {
				right: auto;
				left: 5.8ch;
		}
		.fixed-on-top .nav__bottom__navigations > li .ast-menu-toggle { 
				left: 6ch;
		}
}
@media screen and (min-width: 976px) and (max-width: 991px){

		.nav__bottom__navigations > li .ast-menu-toggle{
				right: auto;
				left: 5.5ch;
		}
}

@media screen and (max-width: 992px) {

	/* Header */
	.nav__top {
		position: fixed;
		width: 100%;
	}

	.nav__top__contacts__logo,
	.nav__top__contacts__logo img .footer__logo,
	.footer__logo img {
		max-width: 78%;
	}

	.nav__top__contacts__wrap {
		display: none !important;
	}

	.nav__bottom {
		position: fixed;
		top: 0;
		right: 0;
		width: 50%;
		height: 100%;
		z-index: 99;
		background: var(--defaultBlack);
		transform: translateX(100%);
	}

	.nav__bottom.active {
		transform: unset;
	}

	.nav__bottom__wrapper {
		display: flex;
		flex-direction: column;
	}

	.nav__bottom .nav__bottom__wrapper .nav__top__contacts__logo {
		display: none;
	}
}

@media screen and (max-width: 992px) {

	/** ----------------- SPACES RELATED --------------------- */
	.nav__bottom__navigations { margin: 6.5em 0 1.6em; }
	.nav__bottom__navigations li { margin-bottom: 1em; }
	.nav__bottom__socmed { bottom: 1.5em; }
	.nav__bottom__close-menu { right: 2.75em; top: 1.6em; }

	/** ----------------- FONTS RELATED ---------------------- */
	.nav__bottom__navigations li a { font-size: 1.2rem; }

	/* Header */
	.nav__top {
		position: fixed;
		width: 100%;
	}

	.nav__top__contacts__logo,
	.footer__logo {
		max-width: 43%;
	}

	.nav__top__contacts__logo img,
	.footer__logo img {
		max-width: 78%;
	}

	.nav__top__contacts__wrap,
	.nav__bottom .nav__bottom__wrapper .nav__top__contacts__logo { display: none !important; }

	.nav__bottom {
		position: fixed;
		top: 0;
		right: 0;
		width: 50%;
		height: 100%;
		z-index: 99;
		background: var(--defaultBlack);
		transform: translateX(100%);
	}

	.nav__bottom.active { transform: unset; }

	.nav__bottom__wrapper,
	.nav__bottom__navigations { display: flex; flex-direction: column; }
	.nav__bottom__navigations { width: 86%; }

	.nav__bottom__socmed { position: absolute; }

	.nav__bottom__socmed__icon--first { margin-left: unset; }

	.nav__top__contacts__hamburger-menu { display: flex !important; }

	/* Position should be relative to hamburger-menu position to */
	.nav__bottom__close-menu { display: unset; position: fixed; }

}

@media screen and (max-width: 768px) {

	/** ----------------- SPACES RELATED --------------------- */
	.nav__bottom__close-menu { right: 2.5em; top: 1.8em; }

	/** ----------------- FONTS RELATED ---------------------- */
	.nav__bottom__navigations ul a { font-size: 0.9rem; }

	.nav__bottom { width: 67%; }

}

@media screen and (max-width: 576px) {

	/** ----------------- SPACES RELATED --------------------- */
	.nav__bottom__navigations { margin-top: 3.5em; }
	.nav__bottom__close-menu { right: 1.6em; top: 1.8em; }
	.nav__top__contacts__contact__flag { width: 1.8rem; height: 1.8rem; }

	.nav__top__contacts__logo { max-width: 78%; }
	.nav__bottom { width: 78%; } 
}

/* Akhir Header */