nav.menu a, nav.contact a:not(.icononly), footer a
{
color: inherit;
text-decoration: none;
display: inline;
-webkit-transition: all 0.3s, background 0.5s;
transition: all 0.3s, background 0.5s;
background-position: 0% 100%;
background-size: 0% 2px;
background-repeat: no-repeat;
display: inline;
-webkit-transition: all 0.3s, background 0.6s;
transition: all 0.3s, background 0.6s;
padding-top: 0.2em;
margin-top: -0.2em;
padding-bottom: 0.2em;
margin-bottom: -0.2em;
}

nav.contact a:not(.icononly)
{
opacity: 0.7;
}

nav.menu a:hover, nav.contact a:not(.icononly):hover, footer a:hover
{
background-size: 100% 2px;
opacity: 1;
}

header div.menu > nav.menu > ul > li.open > a
{
background-image: none !important;
}

footer nav
{
display: block;
break-before: column;
}


/**************************************/
/*                                    */
/*     header                         */
/*                                    */
/**************************************/

header
{
position: fixed;
top: 0px;
width: 100%;
z-index: 100;
}

header .container
{
position: relative;
z-index: 100;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}

body.scrolled header .container
{

}

body.scrolled header a.icononly.facebook::before {background-image:url("../img/icon-facebook-white.png");}
body.scrolled header a.icononly.twitter::before {background-image:url("../img/icon-twitter-white.png");}
body.scrolled header a.icononly.linkedin::before {background-image:url("../img/icon-linkedin-white.png");}
body.scrolled header a.icononly.instagram::before {background-image:url("../img/icon-instagram-white.png");}
body.scrolled header a.icononly.youtube::before {background-image:url("../img/icon-youtube-white.png");}
body.scrolled header a.icononly.search::before {background-image:url("../img/icon-search-white.png");}

div.eie-logo
{
display: inline-block;
background-image: url("../img/logo-eie.svg");
background-size: contain;
background-position: 0% 50%;
width: 440px;
height: 110px;
vertical-align: top;
text-indent: -1000px;
/* -webkit-transition: all 0.5s; */
/* transition: all 0.5s; */
}

div.eie-logo.small
{
width: 320px;
height: 80px;
}

div.eie-logo.white
{
background-image: url("../img/logo-eie-white.svg");
}

nav ul li
{
line-height: 1em;
display: inline-block;
margin: 0px;
padding: 0px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}

nav ul li.hide
{
display: none !important;
}

nav button
{
display: none;
}

header div.bg
{
position: absolute;
top: 0px;
left: 0px;
opacity: 0;
width: 100%;
height: 110px;
background-color: #ffffff;
border-bottom: 1px solid rgba(255,255,255,0);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}

body.scrolled header div.bg
{
opacity: 1;
border-bottom: 1px solid rgba(255,255,255,1);
}

header div.logo
{
position: fixed;
top: calc(var(--spacing) * 0.5);
opacity: 1;
-webkit-transition: all 0.5s;
transition: all 0.5s;
z-index: 100;
}

body.scrolled header div.logo
{
top: calc(var(--spacing) * 0.25);
}

body.scrolled header div.eie-logo
{
width: 440px;
height: 110px;
width: 320px;
height: 80px;
}

header div.espa 
{
position: absolute;
top: calc((var(--spacing) * 1) - 28px);
right: calc((var(--spacing) * 1) - 15px);
height: 70px;
}

header div.espa img
{
height: 70px;
}

header div.ellada2 
{
position: absolute;
top: calc((var(--spacing) * 1) - 28px);
right: calc((var(--spacing) * 1) + 300px);
height: 70px;
}

header div.ellada2 img
{
height: 70px;
}

header div.menu
{
position: absolute;
top: calc(var(--menu-height) - (var(--spacing) * 1.75) - var(--font-size-xlarge) - var(--font-size-normal)); /* xlarge: title, normal: categories */
left: var(--spacing);
width: calc(100% - (var(--spacing) * 2));
/* -webkit-transition: all 0.5s; */
/* transition: all 0.5s; */
}

header div.menu.sector
{
top: calc(var(--menu-height) - (var(--spacing) * 1.75) - var(--font-size-xlarge) - var(--font-size-normal) + var(--font-size-xlarge) + var(--spacing)); 
}

body.eie header div.menu
{
top: calc(var(--menu-height-eie) - (var(--spacing) * 0.75) - var(--font-size-normal)); /* normal: categories */
}

header div.menu .title
{
padding: var(--spacing);
padding-top: calc(var(--spacing) * 0.5);
padding-bottom: calc(var(--spacing) * 0.5);
font-size: var(--font-size-xlarge);
line-height: 1;
text-transform: uppercase;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}

header div.menu .title .institute
{
display: none;
}

body.eie header div.menu .title
{
display: none;
background-color: transparent;
}

header div.menu .marker
{
position: absolute;
top: calc(var(--spacing)* 0.25);
right: calc(var(--spacing)* 0.25);
display: block;
font-size: var(--font-size-medium);
font-weight: var(--font-weight-bold);
width: 63px;
height: 63px;
line-height: 63px;
text-align: center;
z-index: 10;
display: none;
}

header div.menu .marker::before
{
content:"";
display: inline-block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-color: #ffffff;
border-radius: 100%;
z-index: -10;
}

body.scrolled header div.menu .marker
{
display: block;
right: calc(50% - (63px/2));
top: -11px;
}

header div.menu > nav
{
width: calc(100% - var(--logo-head-width));
width: 100%;
display: flex;
justify-content: space-between;
padding: 0px;
padding-left: calc(var(--spacing) * 0.5);
padding-right: calc(var(--spacing) * 0.5);
padding-bottom: calc(var(--spacing) * 0.25);
}

body.eie header div.menu > nav
{
background-color: transparent;
}

body.eie header div.menu nav
{
padding-left: calc(var(--logo-head-width) - (var(--spacing) * 0.5));
padding-right: 0px;
}

header div.menu > nav > ul /*root menu */
{
width: 100%;
display: flex;
justify-content: space-between;
font-size: var(--font-size-normal);
font-weight: var(--font-weight-heavy);
line-height: 1;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}

header div.menu > nav > ul > li
{
padding: 0px;
margin: 0px;
padding: calc(var(--spacing) * 0.5);
padding-top: calc(var(--spacing) * 0.25);
padding-bottom: calc(var(--spacing) * 0.25);
white-space: nowrap;
}

header div.menu > nav > ul > li.open
{
background-color: var(--bgcolor-lightgrey);
}

header div.menu > nav > ul > li > ul /*sub menu */
{
z-index: 0;
position: absolute;
left: 0px;
top: calc((var(--spacing) * 0.5) + var(--font-size-normal)); 
width: 100%;
background-color: var(--bgcolor-lightgrey);
column-gap: var(--spacing);
column-count: 3;
padding: calc(var(--spacing) * 0.5);
font-size: var(--font-size-normal);
font-weight: var(--font-weight-heavy);
break-inside: avoid;
box-shadow: 0px 15px 10px rgba(0,0,0,0.3);
white-space: normal;
}

body:not(.scrolled) header div.menu > nav > ul > li > ul
{
top: calc((var(--spacing) * 1.5) + var(--font-size-normal) + var(--font-size-xlarge) ); 
}

body.eie header div.menu > nav > ul > li > ul 
{
top: calc((var(--spacing) * 0.5) + var(--font-size-normal)); /* normal: categories */
}

header div.menu > nav > ul > li > ul > li
{
display: block;
padding: calc(var(--spacing) * 0.5);
padding-top: calc(var(--spacing) * 0.25);
padding-bottom: calc(var(--spacing) * 0.25);
break-inside: avoid;
line-height: 1.4;
break-inside: avoid;
}

header div.menu > nav > ul > li > ul > li > ul /*subsub menu */
{
display: block;
font-size: var(--font-size-small);
break-inside: avoid;
}

header div.menu > nav > ul > li > ul > li > ul > li
{
display: block;
margin-top: calc(var(--spacing) * 0.125);
padding: calc(var(--spacing) * 0.5);
padding-top: calc(var(--spacing) * 0.125);
padding-bottom: 0px;
line-height: 1.4;
break-inside: avoid;
}

header div.contact
{
position: absolute;
top: 100px;
right: var(--spacing);
/* -webkit-transition: all 0.5s; */
/* transition: all 0.5s; */
}

header div.contact > nav > ul /*contact menu */
{
font-size: var(--font-size-small);
font-weight: var(--font-weight-bold);
line-height: 1;
}

header div.contact > nav > ul > li > a
{
margin-left: 1em;
}

header div.contact > nav > ul > li > a.icononly
{
margin-left: 0.5em;
opacity: 0.8;
}

header div.contact > nav > ul > li > a.icononly:hover
{
opacity: 1;
}

body.scrolled header div.menu .title
{
position: fixed;
top: -75px;
}

nav button
{
position: absolute;
top: 37px;
padding: 0px;
right: var(--spacing);
width: 36px;
height: 36px;
background-image: url('../img/menu.png');
background-color: transparent;
background-size: contain;
z-index: 100;
font-size: 0px;
}

body.menuopen header div.eie-logo
{
background-image: url("../img/logo-eie-white.svg");
}

header div.menu ul.sub-menu
{
display: none;
}


/**************************************/
/*                                    */
/*     scrolled                       */
/*                                    */
/**************************************/


body.scrolled header div.espa
{
top: -200px;
}

body.scrolled header div.bg
{
z-index: 10;
}

body.scrolled nav button
{
position: absolute;
top: 0px;
right: var(--spacing);
background-image: url('../img/menu-white.png');
display: block;
}

body.scrolled.menuopen nav button
{
background-image: url('../img/menu-close-white.png');
}

body.scrolled header div.menu
{
position: absolute;
top: 35px;
width: 100%;
left: 0px;
}

body.scrolled header div.menu > nav
{
position: absolute;
}

 /*root menu */
body.scrolled header div.menu > nav > ul
{
position: absolute;
top: 0px;
right: 0px;
}

/*root menu */

body.scrolled header div.menu > nav > ul
{
padding-left: calc(var(--spacing) * 1);
padding-right: calc(var(--spacing) * 1);
}

body.scrolled header div.menu > nav > ul > li
{
padding-top: calc(var(--spacing)* 0.375);
padding-bottom: calc(var(--spacing)* 0.375);
}

body.scrolled header div.menu > nav > ul > li > ul
{
top: calc((var(--spacing)* 0.75) + var(--font-size-normal));
}

body.scrolled.menuopen header div.menu > nav > ul
{
top: 75px;
}

body.scrolled header div.eie-logo, body.menuopen header div.eie-logo
{
background-image: url("../img/logo-eie-white.svg");
}

body.scrolled header div.contact
{
top: 46px;
right: 100px;
z-index: 10;
}



/**************************************/
/*                                    */
/*     responsive                     */
/*                                    */
/**************************************/


/*-- 1001-1200 start --*/
@media screen and (max-width: 1250px)
{
	header div.ellada2 
	{
	position: absolute;
	top: calc(100vh - 70px);
	right: calc(var(--spacing) * 1);
	height: 70px;
	border: 1px solid #8e8e8e;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
	}

	body.scrolled header div.ellada2 
	{
	top: calc(100vh + 20px);
	}

}

/*-- 1001-1200 start --*/
@media screen and (max-width: 1200px)
{

	header div.contact
	{
	top: 90px;
	}

	body header div.eie-logo
	{
	width: 360px;
    height: 90px;
	}

	body.iie header div.menu > nav > ul
	{
	font-size: var(--font-size-normal);
	}

	body.iie.bigmenu header div.menu > nav > ul
	{
	font-size: var(--font-size-small);
	}

	body.iie:not(.scrolled) header div.menu 
	{
	top: calc(var(--menu-height) - (var(--spacing) * 1.5) - var(--font-size-large) - var(--font-size-normal));
	}

	body.iie.tbe:not(.scrolled) header div.menu.sector 
	{
	top: calc(var(--menu-height) - (var(--spacing) * 1.5) - var(--font-size-large) - var(--font-size-normal) + var(--font-size-large) + var(--spacing) - 1px);
	}

	body.iie:not(.scrolled) header div.menu > nav > ul > li > ul
	{
	top: calc((var(--spacing) * 1.5) + var(--font-size-normal) + var(--font-size-large) ); 
	}

	body.iie header div.menu > nav > ul > li > ul
	{
	top: calc((var(--spacing)* 0.5) + var(--font-size-normal));
	}

	body.sector section.splash
	{
	margin-top: calc(var(--menu-height) + var(--font-size-large) + var(--spacing));
	}
}



/*-- 768-1000 start --*/
@media screen and (max-width: 1000px)
{

	footer nav
	{
	break-before: auto;
	}

	header div.menu .title
	{
	font-size: var(--font-size-large);
	}

	header div.menu > nav > ul
	{
	font-size: var(--font-size-xsmall);
	}	

	body.iie header div.menu > nav > ul
	{
	font-size: var(--font-size-small);
	}

	body.iie.bigmenu header div.menu > nav > ul
	{
	font-size: var(--font-size-tags);
	}

	body.iie header div.menu 
	{
	top: calc(var(--menu-height) - (var(--spacing) * 1.75) - var(--font-size-large) - var(--font-size-small));
	}

	header div.menu 
	{
	top: calc(var(--menu-height) - (var(--spacing) * 1.75) - var(--font-size-large) - var(--font-size-xsmall));
	}

	body:not(.scrolled) header div.menu > nav > ul > li > ul
	{
	top: calc((var(--spacing) * 1.5) + var(--font-size-xsmall) + var(--font-size-large) ); 
	}

	body.iie:not(.scrolled) header div.menu > nav > ul > li > ul
	{
	top: calc((var(--spacing) * 1.5) + var(--font-size-tags) + var(--font-size-large) ); 
	}

	body.eie header div.menu > nav > ul > li > ul
	{
	top: calc((var(--spacing) * 0.5) + var(--font-size-xsmall));
	}

	header div.menu > nav > ul > li > ul
	{
	font-size: var(--font-size-xsmall);
	top: calc((var(--spacing)* 0.5) + var(--font-size-xsmall));
	}

	body.scrolled header div.menu > nav > ul > li > ul
	{
	font-size: var(--font-size-xsmall);
	top: calc((var(--spacing)* 0.5) + var(--font-size-xsmall));
	}

	body.iie header div.menu > nav > ul > li > ul
	{
	top: calc((var(--spacing)* 0.5) + var(--font-size-small));
	}

	body.scrolled header div.eie-logo
	{
	width: 280px;
	height: 70px;
	}

	body.scrolled header div.menu
	{
	top: 25px;
	}

	body.scrolled.menuopen header div.menu > nav > ul
	{
	top: 65px;
	}

	body.scrolled header div.contact
	{
	top: 36px;
	}

	header div.bg
	{
	height: 90px;
	}

	body.scrolled header div.menu .marker
	{
	/* display: none; */
	}

	body.eie header div.menu nav
	{
	padding-left: 0px;
	}

	header div.contact > nav > ul /*contact menu */
	{
	font-size: var(--font-size-xsmall);
	}

	body.scrolled header div.contact
	{
	right: 75px;
	}

}
/*-- 768-1000 end --*/




/*-- 651-767 start --*/
@media screen and (max-width: 767px)
{

	body.menuopen
	{
	overflow-y: hidden;
	}

	body:not(.eie) nav button
	{
	background-image: url('../img/menu-white.png');
	}

	body.menuopen:not(.eie) nav button
	{
	background-image: url('../img/menu-close-white.png');
	}

	body.eie.menuopen nav button
	{
	background-image: url('../img/menu-close-white.png');
	}

	body nav button 
	{
	display: block;
	}

	body header div.menu .title
	{
	position: fixed;
	top: 75px;
	top: 73px;
	left: 0px;
	width: 100%;
	font-size: var(--font-size-bigger);
	z-index: 20;
	}

	header div.menu .title .institute
	{
	display: inline;
	}

	header div.bg
	{
	height: 75px;
	opacity: 1;
	}

	body header div.menu .marker, body.scrolled header div.menu .marker
	{
	top: 18px;
	}

	nav button, body.scrolled nav button
	{
	top: 18px;
	}

	header div.logo, body.scrolled header div.logo
	{
    top: calc(var(--spacing)* 0.25);
	}

	header div.menu > nav > ul > li > ul, body.scrolled header div.menu > nav > ul > li > ul
	{
	column-count: 1;
	}

	body header div.eie-logo, body.scrolled header div.eie-logo
	{
	width: 240px;
    height: 60px;
	width: 200px;
	height: 50px;
	margin-top: 5px;
	}

	body header div.menu > nav > ul, body.scrolled header div.menu > nav > ul
	{
	padding-top: 80px;
	}

	body header div.menu > nav > ul > li > ul > li, body.scrolled header div.menu > nav > ul > li > ul > li
	{
	width: 30%;
    display: inline-block;
    float: left;
	}

	body header div.menu > nav > ul > li > ul > li > ul, body.scrolled header div.menu > nav > ul > li > ul > li > ul
	{
	display: none !important;
	}

	header div.menu .marker
	{
	width: 40px;
	height: 40px;
	line-height: 40px;
	font-size: var(--font-size-normal);
	}

	body.iie header div.menu > nav > ul
	{
	font-size: var(--font-size-inbetween);
	}
	

	/* former narrow */
	body.menuopen header a.icononly.facebook::before {background-image:url("../img/icon-facebook-white.png");}
	body.menuopen header a.icononly.twitter::before {background-image:url("../img/icon-twitter-white.png");}
	body.menuopen header a.icononly.linkedin::before {background-image:url("../img/icon-linkedin-white.png");}
	body.menuopen header a.icononly.instagram::before {background-image:url("../img/icon-instagram-white.png");}
	body.menuopen header a.icononly.youtube::before {background-image:url("../img/icon-youtube-white.png");}
	body.menuopen header a.icononly.search::before {background-image:url("../img/icon-search-white.png");}


	body header div.contact, body.scrolled header div.contact
	{
	top: 120vh;
	right: auto;
	left: 0px;
	width: calc(100% - var(--spacing));
	width: 100%;
	text-align: center;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
	}	

	body.menuopen header div.contact, body.scrolled.menuopen header div.contact
	{
	top: calc(100vh - (var(--spacing)* 3));
	}

	body.scrolled.menuopen header div.menu > nav > ul
	{
	top: 0px;
	}

	body header div.menu
	{
	position: fixed;
	top: 0px !important;
	left: 0px;
	width: 100%;
	}

	body header div.menu > nav
	{
	position: relative;
	margin: auto;
	width: 100%;
	max-width: 1300px;
	display: block;
	padding: 0px;
	text-align: center;
	}

	body.eie header div.menu > nav
	{
	background-color: transparent;
	}

	body.eie header div.menu nav
	{
	padding-left: 0px;
	padding-right: 0px;
	}

	body header div.menu > nav > ul, body.scrolled header div.menu > nav > ul
	{
	padding-left: calc(var(--spacing)* 0.5);
    padding-right: calc(var(--spacing)* 0.5);
	}

	/*root menu */
	body header div.menu > nav > ul, body.scrolled header div.menu > nav > ul
	{
	position: absolute;
	display: block;
	height: 100vh;
	padding-top: 135px;
	top: -130vh;
	background: rgba(255,255,255,0.9);
	}

	/*root menu */
	body.menuopen header div.menu > nav > ul 
	{
	top: 0px;
	}

	body header div.menu > nav > ul > li
	{
	position: relative;
	display: block;
	padding: 0px;
	margin: 0px;
	padding: calc(var(--spacing) * 0.5);
	-webkit-transition: none;
	transition: none;
	}

	body header div.menu > nav > ul > li::after
	{
	content: "";
	position: absolute;
	bottom: 0px;
	left: 50%;
	width: 2em;
	height: 2em;
	display: none;
	margin-left: -1em;
	background-color: red;
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
	}

	body header div.menu > nav > ul > li.open::after
	{

	}

	body header div.menu > nav > ul > li.open
	{
	background-color: var(--bgcolor-lightgrey);
	background-color: rgba(255,255,255,0.7);
	}

	body header div.menu > nav > ul > li.closed
	{

	}

	/*sub menu */
	body header div.menu > nav > ul > li > ul, body.eie header div.menu > nav > ul > li > ul, body:not(.scrolled) header div.menu > nav > ul > li > ul, body.iie:not(.scrolled) header div.menu > nav > ul > li > ul, body.iie header div.menu > nav > ul > li > ul
	{
	z-index: 0;
	position: relative;
	top: 0px;
	left: 0px;
	text-align: left;
	width: 100%;
	background-color: transparent;
	padding-top: calc(var(--spacing) * 0.5);
	padding: 0px;
	margin: 0px;
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-bold);
	box-shadow: none;
	}

	body header div.menu > nav > ul > li.open > ul
	{
	padding: calc(var(--spacing) * 0.5);
	opacity: 1;
	}

	body body.eie header div.menu > nav > ul > li > ul
	{
	top: calc((var(--spacing) * 0.5) + var(--font-size-normal)); /* normal: categories */
	}

	body header div.menu > nav > ul > li > ul > li
	{
	display: block;
	padding: calc(var(--spacing) * 0.25);
	padding-left: calc(var(--spacing) * 0.125);
	break-inside: avoid;
	line-height: 1.4;
	}

	/*subsub menu */
	body header div.menu > nav > ul > li > ul > li > ul 
	{
	display: block;
	font-size: var(--font-size-tags);
	break-inside: avoid;
	}

	body header div.menu > nav > ul > li > ul > li > ul > li
	{
	display: block;
	margin-top: calc(var(--spacing) * 0.125);
	padding: calc(var(--spacing) * 0.5);
	padding-top: calc(var(--spacing) * 0.125);
	padding-bottom: 0px;
	line-height: 1.4;
	}

	body.scrolled header div.eie-logo, body:not(.eie) header div.eie-logo
	{
	background-image: url("../img/logo-eie-white.svg");
	}

	nav.menu a, nav.contact a:not(.icononly), footer a
	{
	padding-top: 0.4em;
	padding-bottom: 0.4em;
	margin-top: 0px;
	margin-bottom: 0px;
	}

    body.scrolled header div.menu .marker 
	{
    display: block;
	font-size: var(--font-size-xsmall);
	right: 75px;
    }

	header div.contact > nav > ul 
	{
    font-size: var(--font-size-xsmall);
    }

	body.scrolled header div.menu > nav > ul > li
	{
	padding: calc(var(--spacing)* 0.5);
	}

	body.scrolled header div.menu > nav > ul > li > ul
	{
	top: 0px;
	}

	header div.espa 
	{
	position: absolute;
	top: calc(100vh - 140px);
	right: 0px;
	width: 100%;
	height: 140px;
	border-top: 1px solid #8e8e8e;
	background-color: #ffffff;
	text-align: center;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
	}	

	header div.espa a
	{
	display: inline-block;
	}

	body.scrolled header div.espa 
	{
	top: calc(100vh + 70px);
	}

	header div.ellada2
	{
	position: absolute;
	top: calc(100vh - 70px);
	right: 0px;
	width: 100%;
	height: 70px;
	border: none;
	background-color: #ffffff;
	text-align: center;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
    }

	header div.ellada2 a
	{
	display: inline-block;
	}

	body.scrolled header div.ellada2 
	{
	top: calc(100vh + 140px);
	}
	
}
/*-- 651-767 end --*/


/*-- 0-650 start --*/
@media screen and (max-width: 650px)
{
	body header div.menu > nav > ul > li
	{
	padding: calc(var(--spacing)* 0.25);
	}

	body header div.menu > nav > ul > li > ul > li, body.scrolled header div.menu > nav > ul > li > ul > li
	{
	width: 45%;
	line-height: 1.2;
	}

	body header div.menu > nav > ul > li > ul, body.eie header div.menu > nav > ul > li > ul
	{
	font-size: var(--font-size-xsmall);
	}

	header div.contact > nav > ul
	{
	font-size: var(--font-size-xsmall);
	}
}
/*-- 0-650 end --*/