html {
	font-feature-settings: normal;
	font-variation-settings: normal;
}

body {
	background-color: #EAEEF4;
	color: #203864;

	max-width: 1920px;

	font-family: "OpenSans-Regular",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;

	--screen-margin: 4rem;
	--body-content-max: 80rem;

	--footer-bgc: 200 15% 20%;
	--footer-col: 45 30% 98%;

	--color-theme: #3d54a2;

	--color-white: hsl(0, 0%, 100%);
	--color-gray-800: hsl(220, 15%, 18%);
	--color-text-primary: var(--color-gray-800);
	--color-bg-primary: var(--color-white);

	--font-size-xs: 0.75rem;
	--font-size-sm: 0.875rem;
	--font-size-base: 1rem;
	--font-size-lg: 1.125rem;
	--font-size-xl: 1.25rem;
	--font-size-2xl: 1.5rem;
	--font-size-3xl: 1.875rem;
	--font-size-4xl: 2.25rem;
	--font-size-5xl: 3rem;
	--font-size-6xl: 3.75rem;

	--font-weight-medium: 500;
	--line-height-normal: 1.5;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-6: 1.5rem;
	--radius-lg: 0.75rem;
	--transition-base: 250ms ease;

	scrollbar-gutter: stable;
	
}

@media (max-width: 78rem) {
	body {
		--screen-margin: 2rem;
	}
}


body > h1 {
	position: absolute;
}

#logo > a {
	background-image: url(../img/eurotrans-logo-2016.png);
	background-size: 110%;
	width: 12rem;
	height: 12rem;
	left: 4rem;
	top: 1rem;
	transition-property: width, height;
	transition: .2s ease-in-out;
}
@media screen and (max-width: 90rem) {
	header #logo {
		width: 12rem;
		height: 4rem;
		left: 2rem;
	}
	.sticky header #logo {
		top: -1px;
		width: 10rem;
		height: 4rem;
	}
}
@media screen and (max-width: 78rem) {
	#logo > a {
		top: 0;
		left: 0;
	}
}

#footer {
	background-color: #fff;
	color: #203864;
	text-shadow: unset;
}

#footer .menus a {
	color: #0070C0;
}
#footer .menus a:hover {
	color: inherit;
	text-decoration: underline;
}

#footer h4 {
	font-size: var(--step-0);
}

#footer .bottom {
	font-size: unset;
	color: #305496;
	background-color: #fff;
	padding-block: 2rem;
	border-top: 1px solid #30549623;
	text-shadow: unset;  
}

#social.logolist li a {
	opacity: .9;
	filter: invert(31%) sepia(18%) saturate(2450%) hue-rotate(184deg) brightness(92%) contrast(89%);
}
#footer .bottom a:hover {
	color: inherit;
	opacity: .5;
}



menu a {
  --menu-a-col: #203864;
  font-weight: 600;
}
menu a[aria-haspopup="true"] {
	padding-inline-end: .135rem;
}

menu .dropdown {
	min-width: 20rem;
}
menu ul {
	--menu-dd-bgc: #0070C0;
	--menu-dd-a-col: #fff;
	--menu-dd-a-bgc-hover: #fff;
	--menu-dd-a-col-hover: #0070C0;
	translate: -.5rem -1.25rem;
}
menu ul a {
	width: 100%;
	line-height: 2rem;
}
menu .dropdown a {
	padding: .5rem 1.25rem;
}


#header .header {
	height: 16rem;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;

	background: url(../img/header-deco-3.png) center right / cover no-repeat;
}


#header,
#header .header {
	transition-property: height;
	transition: .2s ease-in-out;
}
.sticky #header,
.sticky #header .header {
	height: 4rem;
}

.sticky #logo {
	position: absolute;
}
.sticky #logo > a {
	height: 3rem;
	width: 4rem;
	top: .5rem;
	left: 2rem;
}

.sticky #menu {
	grid-row-start: 1;
	grid-row-end: 1;
	grid-column-start: 1;
	grid-column-end: 1;
}
.sticky main#content {
	padding-block-start: 16rem;
}

@media (max-width: 78rem) {

	#header .header {
		height: 8rem;
	}

	#logo > a {
		height: 4rem;
		width: 6rem;
		top: 1rem;
		left: 0;
	}
	.sticky #logo > a {
		top: .5rem;
		left: 0;
	}
}



.img {
	display: grid;
}

.layout-row .txt {
	margin: 0;
	padding: 5vw;
}

#nav {
	justify-content: center;
}

#menu {
	grid-row-start: 2;
	grid-row-end: 2;
	grid-column-start: 1;
	grid-column-end: 1;
}

#nav .primary {
	justify-content: end;
	line-height: 4rem;
	padding-inline: 3rem;
	gap: 4rem;
}
@media (max-width: 78rem) {
	#nav .primary {
		gap: unset;
	}
}



section.header {
	text-align: center;
}

.custom-bg {
	background-color: #EAEEF4;
}


.contenttable {
	width: 100%;
}

/* newsletter section */

section.cta {
	border-top: 1px solid #deddd9;
	padding-block-start: var(--space-2xl);
	text-align: center;
}

section.cta p + p {
	margin-block-start: 1.25rem;
}
section.cta p a  {
	border-radius: 3rem;
	border: 1px solid;
	text-decoration: none;
	padding: .5rem 3rem;
	line-height: 2rem;
	transition: all .1s ease-in-out;
	border-color: #829c79;
	background-color: #829c79;
	color: #fff;
}
section.cta p a:hover {
	background-color: #fff;
	color: #829c79;
}


.hero {
}



#mainMenuOpen {
	top: 1rem;
	left: calc(-4.5rem + 100vw);
	font-size: 3rem;
	transition: top .1s ease-in-out;
}
.sticky #mainMenuOpen {
	top: -1px;
	font-size: 3rem;
}



/* ------------------------------------------------------------------------- */

#footer .menus {
	padding: 12rem var(--screen-margin);
	border-block-start: 1px solid #30549623;
	margin-block-start: 4rem;
}

#footer .menus .center {
	grid-template-columns: 1fr;
}

#members {
	position: relative;
	width: 100%;
}
#footer #members ul {
	display: flex;
	align-items: center;
	list-style: none;
	flex-flow: wrap;
	justify-content: center;
	margin: 0 1rem;
	padding: 0;
	gap: 4rem 16rem;
}

#members ul li {
}

#members ul li a {
	background: center center / 100% auto no-repeat;
	background-size: contain;
	display: block;
	width: 10rem;
	height: 5rem;
	overflow: hidden;
	text-indent: 100%;
}

#members ul li a.agoria    { background-image: url(../img/members/agoria.svg);      background-size: auto 1.5rem; }
#members ul li a.artema    { background-image: url(../img/members/artema.png);      background-size: auto 7rem; translate: 0 .5rem; }
#members ul li a.assiot    { background-image: url(../img/members/federtec.png);    }
#members ul li a.bga       { background-image: url(../img/members/bga.png);         background-size: auto 3rem; width: 8rem; }
#members ul li a.mib       { background-image: url(../img/members/mib-logo-en.png); background-size: auto 2.5rem; width: 12rem; }
#members ul li a.swissmem  { background-image: url(../img/members/swissmem.png);    }
#members ul li a.ffti      { background-image: url(../img/members/ffti.png);        }
#members ul li a.vdma      { background-image: url(../img/members/vdma.svg);        }





main#content {
	padding-block: 4.5rem;
	/* background: #EAEEF4; */

	font-size: 1.1rem;
}
@media (max-width: 78rem) {
	main#content {
		padding-block: 2rem;
	}
	.sticky main#content {
		padding-block-start: 12rem;
	}
}


/* ------------------------------------------------------------------------- */ /* news */

.news-list-view {
	/* Variable for column width calculation */
	--column-width: min(var(--auto-grid-min-size, 26rem), 100%);

	display: grid;
	/* Apply the calculated column width */
	grid-template-columns: repeat(auto-fit, minmax(var(--column-width), 1fr));

	/* gap with fallback */
	gap: 4rem;
}
@media (max-width: 78rem) {
	.news-list-view {
		gap: 2rem;
	}
}

.entry {
	border: 1px solid #fff;
	box-shadow: 0 2px 8px hsla(220, 20%, 10%, 0.06), 0 8px 24px hsla(220, 20%, 10%, 0.08);
	transition: 250ms ease;
}
.entry:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 25px -5px hsla(220, 20%, 10%, 0.1), 0 8px 10px -6px hsla(220, 20%, 10%, 0.05);
}

.entry a {
	width: 100%;
	text-decoration: none;
	color: inherit;
}

.entry .media-element {
	width: auto;
	height: 34.5rem;
	overflow: hidden;
}

.entry .media-element img {
	min-height: 35rem;
	width: auto;
}

.entry .desc {
	margin-block: .75rem;
	display: flex;
	justify-content: left;
	gap: 1rem;
}

.entry .desc .date {
	padding-inline-start: .75rem;
	line-height: 1.75;
}

.entry .desc h2 {
	margin: 0 1rem 0 0;
	font-size: var(--step-0);
}


.news-single {
	margin-block: 0 8rem;
}

.news-single h1 {
	margin-block: 0 var(--space-s);
}

.news-single .news-img {
	margin-block-end: var(--space-s);
}
.news-single img {
	width: 100%;
	height: auto;
}

.news-single .info-sharing {
	display: block;
	padding: 25px;
	line-height: 26px;
	border-top: 1px solid #e6e6e6;
}


.news-single .info-sharing span {
	padding: 0 10px 0 0;
	position: relative;
	/* top: -4px; */
}

.news-single .info-sharing a {
	display: inline-block;
	margin: 0 8px;
	width: 26px;
	height: 26px;
	overflow: hidden;
	text-decoration: none;
	border-bottom: 0;
	opacity: 0.66;
	transition: all 0.5s;
	position: relative;
	top: 6px;
}
.news-single .info-sharing a:hover {
	opacity: 1;
}
.news-single .info-sharing a#li-sharer {
	background-image: url(../img/linkedin.svg);
}
.news-single .info-sharing a#xi-sharer {
	background-image: url(../img/xing.svg);
}