/* retail opportunities basic text bloxk
======================================================= */
/*body.retail-opportunities .basic-block > div {padding-top:var(--89px);padding-bottom:var(--98px);}
body.retail-opportunities .basic-block h2{font:var(--h3);}*/
header .logo > svg .bottom,
header .logo > svg .top{
	transition: fill 0.33s;
}

body.faqs header .logo > svg .top,
body.privacy header .logo > svg .top,
body.terms header .logo > svg .top,
body[class^='events-'] header .logo > svg .top,
body.mega-open header .logo > svg .top{
	fill:var(--dgreen);
}

body.faqs header .logo > svg .bottom,
body.privacy header .logo > svg .bottom,
body.terms header .logo > svg .bottom,
body[class^='events-'] header .logo > svg .bottom,
body.mega-open header .logo > svg .bottom{
	fill:#5F8884;
}

header {
	--color: var(--white);
	--active: var(--dgreen);
	--hover: var(--dgreen);
	--mb:calc(0px - var(--logosize));
	/*--bg:linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 33%);*/
	--padding:var(--62px) var(--65px) 0 var(--65px);
	--logoheight:var(--134px);	
	--logowidth:var(--140px);
	--portalwidth: calc(var(--ss)30vw);
  	--portalheight: calc(var(--ss)30vw);
}
body.contact header{
	--active: var(--pgreen);
	--hover: var(--pgreen);
}
.mega-menu {
	--padding:var(--107px) 0 var(--65px);
	--bg:var(--cream);
	--bold: var(--n6) var(--12px) / var(--16px) var(--bff);
	--font: var(--n4) var(--13px) / var(--17px) var(--bff);
	--small: var(--n4) var(--10px) / var(--14px) var(--bff);
	--pt:var(--107px);
	--mb:var(--9px);
	--pb:var(--65px);
	--li-width:var(--103px);
	--flex-dir:row;
	--li-translate:var(--243px);
	--a-display:none;
}
header .burger-menu {
	--bg:var(--cream);
	--span-height:var(--2px);
	--bghover:var(--dgreen);
}
header #menu {
	--font: var(--n4) var(--20px) / var(--20px) var(--bff);
	--translate:var(--n100px), 0;
}

@media (max-width:768px){
	header{
		--logoheight:var(--106px);	
		--logowidth:var(--112px);
		--padding:var(--39px) var(--37px) 0 var(--31px);
		--portalwidth: calc(var(--ss)22vw);
  		--portalheight: calc(var(--ss)22vw);
	}
	.mega-menu {
		--padding:var(--147px) var(--37px) var(--70px) var(--31px);
		--li-width:100%;
		--flex-dir:column;
		--li-translate:0;
		--a-display:block;
		--bold: var(--n6) var(--10px) / var(--14px) var(--bff);
		--bold2: var(--n6) var(--14px) / var(--17px) var(--bff);
	}
}

header:not(.a) * {color:var(--white);}

header ul li > a, p, h1, h2, h3, a {transition:color .33s ease;}
body.mega-open:not(.a) header #menu li > a { color: var(--fc1);}


header #menu .parent{position:relative;}
/*header #menu .mod-menu__sub{display:none;}*/


/* HEADER
======================================================= */
header { position:absolute; top:0; display:flex; width: 100%; justify-content: space-between; align-items:flex-start; z-index:666; margin-bottom:var(--mb); padding:var(--padding); pointer-events: none; }
body.has-banner header,body.has-banner .mega-menu{ top:var(--65px)};

header .logo { width: var(--logowidth); height: var(--logoheight); display:flex; justify-content:center; align-items:center; }
header > a { width:var(--logowidth); height:var(--logoheight); pointer-events:all; }
header .logo > svg { width:100%; height:100%; }
header > div#menu { flex-basis:var(--910px); }
header #menu a { font:var(--font); pointer-events: all; }
header #menu ul { width:100%; display:flex; list-style:none; justify-content:space-between; }
header #menu ul li { align-items:center; display:flex; }
header #menu ul li > a { transition:.3s ease; letter-spacing: -0.005em; /*normal;*/ }
header #menu ul li:hover > a { color:var(--hover); }
header #menu ul li.current.active > a { color:var(--active); }
header .nav-item { position:relative; }
header::before{ display:none; position:absolute; top:0; left:0; display:block; content:''; width:100%; height:var(--105px); transform:translate(0%, 100%); transition:0.8s; z-index:555; background:var(--bg); opacity:0; }

.icon-menu{margin-top:var(--n5px);width:}
.icon-menu > a{width:var(--portalwidth);height:var(--portalheight);pointer-events: all;}
.icon-menu > a:not(:first-child){margin-left:var(--6px);}
.icon-menu .user-portal{background:url('/templates/newacres/images/shared/portal.svg') no-repeat center / contain;}
.icon-menu .menu-tel{background:url('/templates/newacres/images/shared/phone.svg') no-repeat center / contain;}
.icon-menu .menu-map{background:url('/templates/newacres/images/shared/map-icon.svg') no-repeat center / contain;}
.icon-menu .menu-whatsapp{background:url('/templates/newacres/images/icons/whatsapp.svg') no-repeat center / contain;}

body.mega-open header::before{ transform:translate(0%, 0%); opacity: 1; display:none; }

/*faq header*/
body.faqs header *, body.privacy header *, body[class^='events-'] header * { color:var(--dgreen) !important; }

@media (max-width:768px){
	header #menu { display:none; }
	.icon-menu{width:var(--86px);margin-top:var(--n2px);margin-left:auto;}
}



/* MEGA MENU + HEADER
====================================================== */
.mega-menu { position:absolute; top:0; z-index:777; width:100%; background:var(--bg); padding:var(--padding); display:flex; align-items:center; justify-content:flex-start; transform:translate(0); transition:1s; opacity:0; pointer-events:none;}
.mega-menu > ul { width:100%; display:flex; align-items:flex-start; flex-direction:var(--flex-dir); }
.mega-menu > ul > li { width:var(--li-width); }
.mega-menu > ul > li > a{ display:var(--a-display); }
/*live here*/
.mega-menu > ul > li > a{ font:var(--font); }
.mega-menu > ul > li:first-child > a { font:var(--bold2); }
.mega-menu > ul > li > ul > li > a{ font:var(--small); }
.mega-menu > ul > li a.bold{ font:var(--bold); }
.mega-menu .item-271{ transform:translate(var(--li-translate)); }
.mega-menu > ul > li > ul > li{ margin-bottom:var(--mb); line-height:1; }
.mega-menu > ul > li > ul > li:last-child{ margin-bottom:0; }
.mega-menu  > ul > li > ul > li.item-287,.mega-menu  > ul > li > ul > li.item-288{ margin-bottom:calc(var(--mb) * 2); }
.mega-menu  > ul > li > ul > li.current.active > a { color:var(--active); text-decoration:underline; }

@media (max-width:768px){
	.mega-menu ul li a { text-align:right; display:block; }
	.mega-menu > ul > li:not(:first-child){ margin-top:var(--34px); }
	.mega-menu > ul > li > ul{ margin-top:var(--22px); }
	/* .mega-menu > ul > li.item-288{display:none} */
}



/* MEGA MENU OPEN
====================================================== */
body.mega-open header { z-index:888; pointer-events:none; }
body.mega-open header a { pointer-events:all; }
body.mega-open header a, body.mega-open header div { z-index:900; }
body.mega-open .mega-menu { transform:translate(0%, 0%); opacity:1; pointer-events:auto; }


/* BURGER MENU
====================================================== */
#hamburger{
	--width: var(--22px);
  	--height: var(--18px);
	--ml: var(--11px);
	--span-height:var(--2px)
}
#hamburger span{
	--rotate:0deg;
	--opacity:1;
	--left-open:var(--2px);
	--bg-color:var(--white);
}

body[class^='events-'] #hamburger span,
body.mega-open #hamburger span{
	--bg-color:var(--dgreen);
}

#hamburger span:nth-child(even) { 
	--left:50%; 
}
#hamburger span:nth-child(odd){ 
	--left:0px;
}
#hamburger .hb1, #hamburger .hb2 {
  --top: 0px;
}
#hamburger .hb3, #hamburger .hb4 {
  --top: var(--8px);
}
#hamburger .hb5, #hamburger .hb6 {
  --top: var(--16px);
}
body.mega-open #hamburger .hb1,body.mega-open #hamburger .hb6{
  --rotate:45deg;
}
body.mega-open #hamburger .hb2,body.mega-open #hamburger .hb5 {
  --rotate:-45deg;
}
body.mega-open #hamburger .hb1 {
  --left: var(--left-open); --top: var(--5px);
}
body.mega-open #hamburger .hb2 {
  --left: calc(50% - var(--left-open)); --top: var(--5px);
}
body.mega-open #hamburger .hb3 {
  --left: -50%; --opacity: 0;
}
body.mega-open #hamburger .hb4 {
  --left: 100%; --opacity: 0;
}
body.mega-open #hamburger .hb5 {
  --left: var(--left-open); --top: var(--12px);
}
body.mega-open #hamburger .hb6 {
  --left: calc(50% - var(--left-open)); --top: var(--12px);
}

body.mega-open #hamburger { pointer-events:all; }

#hamburger{ width:var(--width); height:var(--height); position:relative; margin-left:var(--ml); transition:.5s ease-in-out; display:none; background:transparent; z-index:555; }

#hamburger span { display:block; position: absolute; height: var(--span-height); width:50%; background:var(--bg-color); opacity:var(--opacity); transform:rotate(var(--rotate)); transition:.25s ease-in-out; top:var(--top); left:var(--left); }

@media (max-width:768px) {
	#hamburger{ display:block; pointer-events:all; }

}
