/* NOTE: mobile break at 1000px ; BODY CLASSES: clear-header , header-menu-to-left */

.my-header { 
	--max-width: 1920px;
	font-family: Work Sans; font-size: 14px; color: #606463;
	padding: 0 40px; 
	position: absolute; width: 100%; /*height: 86px;*/ top: 0; z-index: 55; 
	max-width: var(--max-width);
}
@media only screen and (min-width: 1920px) { 
.my-header {
	left: 50%;
	margin-left: calc(var(--max-width) / -2);
}
}

.page-template-events-2023 .my-header { z-index: 230; }

.my-logo { float: left; margin-right: 24px; }
	.my-logo img { display: block; margin-top: 5px; }


.my-menu ul ul { background: #fff; }
.my-menu a { display: block; color: inherit; }

/**/
.my-menu ul.menu { display: -webkit-flex; display: flex; -webkit-justify-content: flex-end; justify-content: flex-end; }
    @media only screen and (max-width: 1260px) { /* adj screen width value when needed */
    .my-menu ul.menu { white-space: nowrap; overflow-x: scroll; }
    }
    @media only screen and (max-width: 1000px) {
    .my-menu ul.menu { display: block; overflow: auto; }
    }

@media only screen and (min-width: 1001px) {
.header-menu-to-left .my-menu ul.menu { display: -webkit-flex; display: flex; -webkit-justify-content: flex-start; justify-content: flex-start; }
.header-menu-to-left .menu-cta.apply-btn { margin-left: auto !important; /* stick menu-cta to right */ }
}

/* menu EXTRAS */
.menu-ig { display: none; }
.header-whatsapp { 
	position: absolute; top: 23.5px; right: 55px;
	background: #4DA88E; padding: 5px 7px !important; border-radius: 100%;
	font-size: 23px; color: #fff; line-height: 1px;
}

/* menu CTA */
.my-menu .menu-cta { margin-left: 16px; -webkit-align-self: center; align-self: center; }
	.my-menu .menu-item:not(.menu-cta) + .menu-cta { margin-left: 20px; /*first menu-cta*/ }
	
	.my-menu .menu-cta a:not(.radial-hover) { background: #FF7C55; border: 3px solid #FF7C55; }
	.my-menu .menu-cta a { 
		padding: 0 23px; border-radius: 20px;
		line-height: 28px; color: #fff; font-weight: 600; letter-spacing: 1px;
	}
	.my-menu .menu-cta a:hover { color: #fff; }

	/*
	.my-menu .menu-cta.ghost a { background: none; color: #FF7C55; }
	.my-menu .menu-cta.ghost a:hover { opacity: 0.8; color: #FF7C55; }
	*/
	@media only screen and (min-width: 1001px) {
        .my-menu .menu-cta.ghost a { background: none; color: #fff; border-color: #fff; } 
    	.my-menu .menu-cta.ghost a:hover { color: #fff; }
    }


/* paged CTA on event page */
.menu-cta-paged { display: none !important; }
.css-paged .menu-cta-paged {  display: block !important; }
.css-paged .menu-cta-base {  display: none !important; }	

/* === ONLY read on non mobile === */
@media only screen and (min-width: 1001px) { 

.header-whatsapp { display: none; }

.my-menu > ul > li { display: inline-block; margin-right: -4px; }	

	.my-menu li:hover > a { color: #ff7c55; }	

	/* show sub menu */
	.my-menu > ul > li:hover > ul { visibility: visible; opacity: 1; }
		.my-menu > ul > li > a { 
			padding: 0 16px; 
			color: #fff; line-height: 86px; letter-spacing: 0.7px; text-transform: uppercase; }

	/* sub menu */
	.my-menu > ul ul { 
		position: absolute; transition: all 0.2s ease 0s; visibility: hidden; opacity: 0; 
		box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.2); border-radius: 0; 
	}
	.my-menu > ul ul:before {
		content: ""; display: block; width: 24px; height: 10px; 
		background: url(../png/icons.png) no-repeat; background-position: 0 0;
		position: absolute; top: -10px; left: 25px;
	}
		.my-menu ul ul li { border-top: 1px solid #f2f1ed; width: 220px; }
		.my-menu ul ul li:first-child { border-top: none; }
		.my-menu ul ul li:first-child:before {
			content: ""; width: 24px; height: 10px; 
			background: url(../png/icons.png) no-repeat; background-position: -24px 0;
			display: none; position: absolute; top: -10px; left: 25px;
		}
		
		/* show third level */
		.my-menu ul ul > li:hover > ul { visibility: visible; opacity: 1; }
		.my-menu ul ul li:hover > a { background: #FCF4E2; }
		
		.my-menu ul ul li:first-child:hover:before { display: block; }
		
			.my-menu ul ul a { display: block; font-size: 12px; padding: 20px; }
			
		/* third level */
		.my-menu ul ul ul { 
			left: 100%; top: 0; 
		}
		.my-menu ul ul ul:before { display: none; }
		.my-menu ul ul ul li:before { display: none !important; }
		
		.my-menu ul ul .menu-item-has-children { position: relative; }
		.my-menu ul ul .menu-item-has-children:after { 
			content: ""; display: block; position: absolute; top: 50%; right: 20px; margin-top: -3.5px;
			width: 4px; height: 7px; background: url(../png/icons.png) no-repeat; background-position: 0 -10px; 
		}
	
} /* END only read on non mobile */

@media only screen and (min-width: 1001px) and (max-width: 1290px) {
.my-menu { text-align: right; }
.sub-menu { text-align: left; }
}

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

.my-header { padding: 0; }

.my-logo {
	--logo-height: 48px;
	font-size: 16px; color: inherit; 
	padding: 16px; background: none; cursor: pointer;
	float: none; position: relative; z-index: 1; overflow: hidden;
	margin-right: 0;
}
.my-logo:before { 
	content: "All Yoga Training";
	display: inline-block; vertical-align: middle; margin-left: 10px; font-weight: 500;
	line-height: var(--logo-height); color: #fff; text-transform: uppercase;
}
.my-logo:after { 
	content:"\f0c9"; font-family: FontAwesome; font-size: 23px; color: #fff; width: 23px; height: 23px;
	position: absolute; top: 50%; right: 16px; margin-top: -11.5px;	
}

.my-logo-x:before { color: inherit; }
.my-logo-x:after { content: "\f00d"; color: #ff7c55; }

	.my-logo a { padding: 0; margin: 0; float: left; }		
	.my-logo a img { height: var(--logo-height); margin: 0; width: auto; }
	
	.my-logo .logo-select { display: none; }

.my-menu { max-width: 400px; width: 100%; height: 100%; overflow-y: scroll; 
	position: fixed; top: 0; left: -400px;
	-webkit-transition: 0.2s all ease; transition: 0.2s all ease; 
	font-size: 1.2em; z-index: 10;
	background: #f9f9f9; border-right: 1px solid #cfcfcf;
	-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.my-menu:before {
	content: ""; display: block; background: #fff;
	height: 100%; width: 100%; position: absolute; top: 0; left: 0;
}
.my-menu:after {
    content: ""; display: block; background: rgba(0,0,0,0.4);
    position: fixed; pointer-events: none; top: 0; bottom: 0; left: 0; right: 0;
    opacity: 0; -webkit-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; z-index: -1;
}
.show-menu:after { opacity: 1; }

.my-menu > ul { background: #fff; }

.my-menu ul li { float: none; position: relative; }
.my-menu ul li:hover { background: none; }

.my-menu > ul > li { border-bottom: 1px solid #d5d5d5; }
.my-menu > ul > li > a { padding: 15px; }	

.my-menu ul li a { line-height: normal; text-transform: capitalize; }
	.my-menu ul li.menu-item-has-children > a{ display: inline-block; }

.sub-menu { font-size: 14px; padding-left: 23px; background: #f3f3f3 !important; }
.sub-menu li a { 
	text-decoration-color: rgba(255,255,255,0); 
	-webkit-transition: text-decoration-color 500ms; transition: text-decoration-color 500ms; 
	opacity: 1 !important; padding: 12px 15px; 
}
.sub-menu li:hover > a { 
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-transform: capitalize;
    text-decoration-color: #ff7c55;
    text-underline-offset: 6px;
 }

.menu-item-has-children { padding-left: 0; position: relative; cursor: pointer; }
.menu-item-has-children:before { 

	content: "\f067"; font-family: FontAwesome; font-size: 20px; line-height: 2.8;
	position: absolute; right: 0; top: 0; width: 44px; height: 100%; padding-top: 0; 
	text-align: center; color: #ff7c55;
}
.open-menu:before { content: "\f068"; }

.my-menu ul ul { display: none; }

body { padding-top: 0; -webkit-transition: 0.2s all ease; transition: 0.2s all ease; position: relative; left: 0; }
.show-menu { left: 0 !important; }
.move-body { left: 400px; }

/* CTA and EXTRAS */
.my-menu .menu-cta { padding: 20px; margin: 0 !important; }
.my-menu .menu-cta:hover { background: inherit; }
.my-menu .menu-cta a { 
	padding: 7px 21px; text-align: center;
}

.menu-ig {  
	position: relative; z-index: 10; padding: 20px 0; background: #fff;
	font-size: 1.8em; color: #bba295; text-align: center;
	display: block;
}
.menu-ig span { display: block; }
.menu-ig a { margin: 6px auto 0; display: inline-block; }
.menu-ig img { max-width: 50px; }

}

@media only screen and (max-width: 500px) { 
.overflow-toggle { overflow: hidden; }	
.my-menu { max-width: none; left: -100%; }
.my-menu .my-logo { display: block !important; box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3); }
}

/* header fixed */
@media only screen and (max-width: 1000px) { 
.header-fixed { background: #fff; position: fixed; box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3); }

.header-fixed .my-logo:before { color: #292929; }
.header-fixed .my-logo:after { color: #606463; }
}

/* ==============  BALI PAGE ============================= */
@media only screen and (max-width: 1000px) {
.bali-page .my-logo:after { color: #fff; }
}

/* use .bali-page.css-paged if only applies to paged ver */
/* inactive style
@media only screen and (min-width: 1001px) {
.bali-page .my-menu > ul > li > a { font-weight: 500; color: #292929; }

.bali-page .my-menu .menu-cta a { line-height: 34px; border: none; color: #fff; }

.bali-page .my-menu .menu-cta.ghost a { color: #4DA88E; background: rgba(77, 168, 142, 0.15); }
        .bali-page .my-menu .menu-cta.ghost a:hover { color: #4DA88E; opacity: 0.8; }
        
}
*/


/* ============== CLEAR HEADER version / not transparent ============================= */
.clear-header { padding-top: 86px; }
.clear-header .my-header { z-index: 200; box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3); }

@media only screen and (min-width: 1001px) { 
.clear-header .my-header {
    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3); background: #fff; 
    position: fixed; width: 100%; z-index: 50;
}
.clear-header .my-menu > ul > li:not(.menu-cta) > a { color: #555; }    
}
.clear-header .my-menu > ul > .contact-btn a { border-color: var(--green); background: var(--green); color: #fff; }


@media only screen and (max-width: 1000px) { 
.clear-header { padding-top: 80px; }

.clear-header .my-logo { background: #fff; }
	.clear-header .my-logo:before { color: var(--black-2); }
	.clear-header .my-logo:after { color: #ff7c55; }
}

/* ================= FINAL OVERRIDES */

/* green contact btn on mobile */
@media only screen and (max-width: 1000px) {
.my-menu > ul > .contact-btn a { border-color: var(--green) !important; background: var(--green) !important; color: #fff; }
}