:root {
	--textFont: 300 17px/25px Roboto, sans-serif;
	--h1Font: 400 32px/40px MerriweatherSerif, serif;
	--h2Font: 400 18px/25px MerriweatherSerif, serif;
	--btnFont: 400 13px/24px MerriweatherSerif, serif;

	--h1Color: rgb(0, 108, 102);
	--h2Color: var(--h1Color);
	--applyTextColor: rgb(255, 255, 255);
	--applyBtnColor: rgb(255, 255, 255);

	--textColor: rgb(51, 51, 51);
	--textColorBold: var(--textColor);
	--linkColor: rgb(0, 108, 102);
	--linkHoverColor: var(--textColor);
	--underlineColor: var(--linkColor);

	--bgColor: rgb(255, 255, 255);
	--bgLogo: rgb(238, 238, 238);
	--bgSublogo: var(--bgLogo);
	--bgHeaderImage: transparent;
	--bgIntro: var(--bgLogo);
	--bgApply: rgb(0, 109, 102);
	--bgFooter: rgb(0, 85, 85);
	--bgBoxes: var(--bgApply);
	--bgBtnColor: var(--bgFooter);

	--bgDepartment: transparent;
	--departmentColor: var(--textColor);
}

@font-face {
	font-family: "MerriweatherSerif";
	src: url(../fonts/merriweather-v22-latin-ext_latin-regular.woff2) format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: "Roboto";
	src: url(../fonts/roboto-v20-latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-300.woff2) format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: "Roboto";
	src: url(../fonts/roboto-v20-latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-300italic.woff2) format("woff2");
	font-weight: 300;
	font-style: italic;
	font-display: swap
}

@font-face {
	font-family: "Roboto";
	src: url(../fonts/roboto-v20-latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-700.woff2) format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: "Roboto";
	src: url(../fonts/roboto-v20-latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-700italic.woff2) format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap
}

@font-face {
	font-family: "mpg_iconsregular";
	src: url(../fonts/mpg_icons-webfont.woff) format("woff");
	font-weight: 700;
	font-style: italic;
	font-display: swap
}

@font-face {
	font-family: "Raleway";
	src: url(../fonts/Raleway.woff) format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap
}

/** global reset **/
* {
	margin: 0;
	padding: 0;
	position: relative;
	box-sizing: border-box;
}

html,
body {
	background: #fff;
}

p {
	padding: 5px 0;
}

ul,
ol {
	padding: 5px 0 5px 25px;
}

ul {
	list-style-type: disc;
}

ul ul {
	list-style-type: circle;
}

li::marker {
	color: var(--bgFooter);
}

#wrapper {
	margin: 0 auto;
	margin-bottom: 0;
	max-width: 900px;
	overflow: hidden;
	border: solid 1px var(--bgFooter);
	border-image: linear-gradient(to bottom, var(--bgLogo), var(--bgFooter) 100%) 0 100 0 100;
	font: var(--textFont);
}

main {
	line-height: 0;
}

main > div {
	font: var(--textFont);
}

h2:empty,
div:empty,
p:empty,
section:empty {
	display: none;
}

b,
strong {
	color: var(--textColorBold);
	font-weight: 700;
}

a[href^="tel:"] {
	white-space: nowrap;
}

body {
	color: var(--textColor);
	background: var(--bgColor);
}

a {
	color: var(--linkColor);
	text-decoration: underline;
	text-underline-offset: -1.6px;
    text-underline-position: under;
	text-decoration-thickness: 1px;
	transition-duration: 0.4s;
    transition-property: color;
    transition-timing-function: ease;
	text-decoration-color: var( --textColor );
}
#apply a {
	text-decoration-color: var( --applyColor );
}

a:hover {
	color: var(--linkHoverColor);
	text-decoration: underline !important;
	text-decoration-thickness: 2px;
    text-decoration-style: solid;
    transition: color .25s ease;
}


/** header **/
header {
	display: grid;
	grid-template-columns: 70% 30%;
	background: var(--bgLogo);
	justify-items: start;
}

header img {
	max-width: 100%;
	width: 100%;
}

header div {
	line-height: 0;
}

.department {
	display: none;
	background: var(--bgDepartment);
	color: var(--departmentColor);
}

#logo {
	background: var(--bgLogo);
	padding: 45px 0 45px 7%;
	/* justify-self: start; */
	/* width: 100%; */
}

#logo a {
	display: block;
	width: 95%;
	max-width: 95%;
	/* justify-self: start; */
}

#logo picture,
#logo img {
	max-width: 100%;
	max-height: 90px;
	/* mix-blend-mode: multiply; */
}

#sublogo {
	background: var(--bgSublogo);
	padding: 45px 7% 45px 0;
	justify-self: end;
	width: 100%;
}

#sublogo img {
	max-width: 95%;
	max-height: 90px;
}

#headerImage {
	grid-column-start: 1;
	grid-column-end: 3;
	background: var(--bgHeaderImage);
}

#headerImage:has(img:nth-child(2)) {
	display: grid;
	grid-template-columns: 49.5% 49.5%;
	column-gap: 1%;
}

/** main **/
h1 {
	font: var(--h1Font);
	color: var(--h1Color);
}

h2 {
	font: var(--h2Font);
	color: var(--h2Color);
	margin: 15px 0 0;
}

#intro {
	background: var(--bgIntro);
	padding: 0 5% 35px;
}

header:has(#headerImage:not(>img)) + main #intro {
	padding-top: 35px;
	padding-bottom: 0;
}

header:has(#headerImage:not(>img)) + main #intro:has(section:empty) {
	padding-top: 0;
}

#intro:has(section:empty) {
	padding-bottom: 3px;
	padding-top: 0 !important;
}

header:has(#headerImage img) + main #intro {
	padding-top: 35px;
}

body:has(.h1Center) h1 {
	text-align: center;
}

#title,
#tasks,
#profile,
#offer,
#legal {
	padding: 0 5%;
}

#title section:empty + h1 {
	margin-top: 50px;
}

#prolog {
	margin: 35px 0 25px;
}

/* #subtitle {} */

#epilog {
	padding-top: 20px;
	margin-bottom: 20px;
	color: var(--textColor);
}

#apply {
	background: var(--bgApply);
	padding: 35px 5%;
}

.noWrap {
	white-space: nowrap;
}

#apply * {
	color: var(--applyTextColor);
}

#apply div.grid {
	display: grid;
	grid-template-columns: 60% 40%;
}

#apply div.grid:has(>section) {
	grid-template-columns: 100%;
}

#apply div.grid:has(.btn) {
	grid-template-columns: 67% 33%;
	width: 100%;
}

#apply div.grid:has(>section img) {
	grid-template-columns: 67% 33%;
}

#apply div.grid > section:has(img),
#apply div.grid > section:has(.btn) {
	justify-self: end;
}

#apply div.grid > section:has(img) {
	align-self: end;
}

#apply li::marker {
	color: var(--applyTextColor);
}


#apply div:has(.btn) {
	justify-self: end;
}

#apply .btn {
	background: var(--bgBtnColor);
	display: inline-block;
	padding: 6px 40px;
	font: var(--btnFont);
	color: var(--applyBtnColor);
}

#apply .btn p {
	color: var(--applyBtnColor);
}

#apply .grid + .grid {
	margin-top: 20px;
}

#triangle {
	width: 100%;
	height: 40px;
}

/** order **/

main {
	display: flex;
	flex-flow: column;
}

#intro {
	order: 1;
}

#title {
	order: 2;
}

#tasks {
	order: 3;
}

#profile {
	order: 4;
}

#offer {
	order: 5;
}

#legal {
	order: 6;
}

main > svg {
	order: 7;
}

#apply {
	order: 8;
}

/** footer **/
footer {
	background: var(--bgFooter);
	padding: 25px 5%;
}

footer a {
	text-decoration: none;
}

footer img {
	max-height: 50px;
	max-width: 305px;
	width: 80%;
}

.bgApply {
	fill: var(--bgApply);
}

/** logos **/
.audit {
	max-height: 100px;
	max-width: 100px;
	height: 100px;
}

.audit + .audit {
	margin-left: 20px;
}

img.charta {
	width: 100%;
	max-width: 320px;
	margin-top: 30px;
}

@media (max-width: 650px) {
	header {
		grid-template-columns: 100%;
	}

	#logo,
	#sublogo {
		padding-left: 7%;
		padding-right: 7%;
	}

	#sublogo {
		padding-top: 0;
	}

	#headerImage {
		grid-column-end: 2;
	}

	#apply .grid {
		grid-template-columns: 100%;
	}

	#apply div:has(.btn) {
		justify-self: start;
		padding: 35px 0;
	}
}

body:has(.mpiwg) {
	--h1Font: 700 32px/40px Roboto, serif;
	--h2Font: 700 18px/25px Roboto, serif;
	--textColor: rgb(0, 70, 70);
	--linkColor: rgb(0, 70, 70);
	--textColorBold: rgb(0, 70, 70);
	--h1Color: rgb(0, 70, 70);
	--h2Color: rgb(0, 70, 70);
}

body:has(.inf) #intro:has(section:empty) {
	padding: 0 !important;
}

body:has(.inf) #apply {
	margin-top: 35px;
}

body:has(.mpitax) #triangle,
body:has(.mpinno) #triangle,
body:has(.mpinb) #triangle,
body:has(.mpimath) #triangle,
body:has(.is) #triangle,
body:has(.mpil) #triangle,
body:has(.cbg) #triangle,
body:has(.ip) #triangle,
body:has(.inf) #triangle,
body:has(.mpipriv) #triangle,
body:has(.mpidr) #triangle {
	display: none;
}

#legal {
	margin-bottom: 30px;
}

body:has(.inf) strong {
	text-transform: none;
	margin-bottom: 20px;
	color: var(--textColor);
}

:root:has(.aie) {
	--bgApply: rgb(0, 102, 153);
	--h1Color: rgb(41, 72, 93);
	--bgFooter: rgb(0, 68, 95);
}


:root body:has(.biochem) {
	--bgApply: rgb(102, 102, 102);
	--h1Color: rgb(93, 93, 93);
	--h2Color: rgb(93, 93, 93);
	--bgFooter: rgb(68, 68, 68);
	--bgBtnColor: rgb(68, 68, 68);
}

:root:has(.coll) {
	--textColorBold: var(--textColor);
}

body:has(.mpidr) #logo picture,
body:has(.mpidr) #logo img {
	max-height: 140px;
}

body:has(.mpiib) #subtitle,
body:has(.kofo) #subtitle {
	color: var(--h1Color);
}

body:has(.biochem) header .department {
	display: block;
}

body:has(.biochem) #sublogo section {
	border-left: solid 1px var(--textColor);
	padding: 0 0 0 10px;
	/* margin-top: 5px; */
	font: var(--textFont);
}

body:has(.biochem) #sublogo a {
	display: none;
}

:root:has(.biophys) {
	--bgApply: rgb(0, 109, 102);
	--h1Color: rgb(0, 108, 102);
	--bgFooter: rgb(0, 85, 85);
}

:root:has(.hd) {
	--bgLogo: rgb(238, 238, 238);
	--bgApply: rgb(238, 238, 238);
	--h1Color: rgb(0, 108, 102);
	--linkColor: rgb(0, 108, 102);
	--bgFooter: rgb(0, 85, 85);
	--applyTextColor: var(--textColor);
}

:root:has(.cbg) {
	--bgLogo: rgb(255, 255, 255);
	--bgSublogo: rgb(255, 255, 255);
	--bgIntro: rgb(238, 238, 238);
}

:root:has(.sf) main .department {
	--departmentColor: #fff;
	--bgDepartment: #666;
	display: inline-block;
	padding: 0 10px;
	font-weight: bold;
	text-transform: uppercase;
	position: absolute;
	right: 5%;
	bottom: -15px;
}

:root:has(.cbs) {
	--bgLogo: rgb(238, 238, 238);
	--bgApply: rgb(78, 97, 109);
	--bgFooter: rgb(68, 83, 92);
	--linkColor: rgb(68, 83, 92);
	--h1Color: rgb(68, 83, 92);
}

body:has(.sp) {
	--linkColor: rgb(0, 31, 33);
	--h1Color: rgb(41, 72, 93);
	--h1Color: rgb(41, 72, 93);
	--h2Color: rgb(41, 72, 93);
	--textColorBold: rgb(73, 73, 73);
	--bgApply: rgb(0, 102, 153);
	--bgFooter: rgb(41, 72, 93);
}

body:has(.cbg) {
	/* --textColor: rgb(0,0,0); */
	--linkColor: rgb(33, 36, 41);
	--h1Color: rgb(33, 36, 41);
	--h2Color: rgb(33, 36, 41);
	--bgApply: rgb(33, 36, 41);
	--bgFooter: rgb(33, 36, 41);
	--bgBtnColor: rgb(255, 255, 255);
	--applyBtnColor: rgb(33, 36, 41);
	/* --h1Color: rgb(33, 36, 41); */
}



body:has(.cbs) {
	--textColorBold: rgb(68, 83, 92);
	--h1Color: rgb(68, 83, 92);
	--h2Color: rgb(68, 83, 92);
	--bgApply: rgb(78, 97, 109);
	--bgFooter: rgb(68, 83, 92);
}

body:has(.cec) {
	--h1Color: rgb(73, 73, 73);
	--h2Color: rgb(73, 73, 73);
	--textColorBold: rgb(73, 73, 73);
	--linkColor: rgb(73, 73, 73);
	--bgApply: rgb(235, 235, 235);
	--applyTextColor: rgb(102, 102, 102);
	--bgFooter: rgb(73, 73, 73);
	--bgBtnColor: rgb(73, 73, 73);
}

body:has(.ds) {
	--h1Color: rgb(68, 68, 68);
	--h2Color: rgb(68, 68, 68);
	--textColorBold: rgb(73, 73, 73);
	--bgApply: rgb(93, 93, 93);
	--bgFooter: rgb(68, 68, 68);
	--bgBtnColor: rgb(68, 68, 68);
	--linkColor: rgb(0, 33, 31);
}

body:has(.fkf) {
	--h1Color: rgb(97, 97, 97);
	--h2Color: rgb(97, 97, 97);
	--textColorBold: rgb(73, 73, 73);
	--bgApply: rgb(97, 97, 97);
	--bgFooter: rgb(73, 73, 73);
	--bgBtnColor: rgb(73, 73, 73);
	--linkColor: rgb(0, 33, 31);
}

body:has(.ip) {
	--bgLogo: rgb(0, 72, 153);
	--bgSublogo: rgb(0, 72, 153);
	--bgIntro: rgb(238, 238, 238);
	--textColor: rgb(0, 0, 0);
	--textColorBold: rgb(0, 0, 0);
	--textFont: 400 17px/25px Arial, Helvetica, sans-serif;
	--h1Color: rgb(0, 0, 0);
	--h2Color: rgb(0, 72, 153);
	--bgApply: rgb(246, 246, 246);
	--bgFooter: rgb(0, 72, 153);
	--bgBtnColor: rgb(0, 72, 153);
	--applyTextColor: rgb(0, 0, 0);
}

body:has(.mpitax) #apply,
body:has(.ip) #apply {
	border-top: solid 1px #ddd;
}

body:has(.ip) #apply h2 {
	color: var(--h2Color);
}

body:has(.offerTop) #tasks,
body:has(.offerTasksProfile) #tasks {
	order: 4;
}

body:has(.offerTop) #profile,
body:has(.offerMiddle) #profile,
body:has(.tasksOfferProfile) #profile,
body:has(.offerTasksProfile) #profile {
	order: 5;
}

body:has(.offerTop) #offer,
body:has(.offerTasksProfile) #offer {
	order: 3;
}

body:has(.offerMiddle) #offer,
body:has(.tasksOfferProfile) #offer {
	order: 4;
}

body:has(.is) {
	--bgLogo: rgb(0, 111, 98);
	--bgSublogo: rgb(0, 111, 98);
	--bgApply: rgb(39, 39, 39);
	--bgFooter: rgb(34, 34, 34);
	--bgBtnColor: rgb(34, 34, 34);
}

body:has(.mpfpr) {
	--h1Color: rgb(33, 106, 149);
	--h2Color: rgb(33, 106, 149);
	--linkColor: rgb(33, 106, 149);
	--bgApply: rgb(119, 119, 119);
	--bgFooter: rgb(77, 77, 77);
	--bgBtnColor: rgb(77, 77, 77);
}

body:has(.kyp),
body:has(.brain),
body:has(.mmg),
body:has(.mpimath),
body:has(.mpic) {
	--h1Font: 400 32px/40px Roboto, sans-serif;
	--h2Font: 400 18px/25px Roboto, sans-serif;
}

body:has(.mpil) {
	--h1Font: 400 32px/40px Raleway, sans-serif;
	--h2Font: 400 18px/25px Raleway, sans-serif;
}

body:has(.logoBottom) #logo {
	order: 2;
	padding-top: 30px;
	padding-bottom: 0;
}

body:has(.logoBottom) #sublogo {
	order: 3;
	padding-top: 30px;
	padding-bottom: 0;
}

body:has(.logoBottom) #headerImage {
	order: 1;
	padding-top: 10px;
}

body:has(.mpifr) {
	--bgHeaderImage: rgb(0, 104, 150);
}

body:has(.brain),
body:has(.mpifr),
body:has(.mpia),
body:has(.mpic),
body:has(.kyp),
body:has(.mmg),
body:has(.mpihl) {
	--h1Color: rgb(41, 72, 93);
	--h2Color: rgb(41, 72, 93);
	--linkColor: rgb(41, 72, 93);
	--bgFooter: rgb(41, 72, 93);
	--bgBtnColor: rgb(41, 72, 93);
	--bgApply: rgb(0, 102, 153);
}

body:has(.mpier) {
	--h1Color: rgb(142, 27, 21);
	--h2Color: rgb(142, 27, 21);
	--linkColor: rgb(142, 27, 21);
	--bgFooter: rgb(142, 27, 21);
	--bgBtnColor: rgb(142, 27, 21);
	--bgApply: rgb(97, 97, 97);
}

body:has(.mpil) {
	--h1Color: rgb(0, 128, 165);
	--h2Color: rgb(0, 128, 165);
	--linkColor: rgb(0, 128, 165);
	--bgApply: rgb(0, 128, 165);
	--bgFooter: rgb(0, 128, 165);
	--bgBtnColor: rgb(255, 255, 255);
	--applyBtnColor: rgb(0, 128, 165);
	--bgLogo: rgb(255, 255, 255);
	--bgSublogo: rgb(255, 255, 255);
}

body:has(.mpinno) #apply .btn,
body:has(.mpisoc) #apply a,
body:has(.mpisoc) #apply .btn,
body:has(.mpinb) #apply .btn,
body:has(.cec) #apply .btn,
body:has(.cbg) #apply .btn,
body:has(.mpimath) #apply .btn,
body:has(.mpil) #apply .btn {
	text-decoration: none;
}

body:has(.mpimath) {
	--h1Color: rgb(53, 97, 177);
	--h2Color: rgb(53, 97, 177);
	--linkColor: rgb(53, 97, 177);
	--bgBtnColor: rgb(48, 105, 179);
	--bgApply: rgb(219, 235, 247);
	--bgFooter: rgb(48, 105, 179);
	--applyTextColor: var(--textColor);
	--bgIntro: rgb(255, 255, 255);
	--btnFont: 300 17px/25px Roboto, sans-serif;
}

body:has(.mpimath) #logo,
body:has(.mpimath) #sublogo {
	background: linear-gradient(180deg, rgba(43, 97, 174, 1) 0%, rgba(117, 198, 242, 1) 100%)
}

body:has(.mpinb) {
	--h1Color: rgb(51, 51, 51);
	--h2Color: rgb(51, 51, 51);
	--linkColor: rgb(51, 51, 51);
	--bgApply: rgb(255, 255, 255);
	--applyColor: rgb(51, 51, 51);
	--bgBtnColor: rgb(140, 29, 25);
	--bgFooter: rgb(238, 238, 238);
	--applyTextColor: var(--textColor);
}

body:has(.mpinb) #apply {
	border-top: solid 1px #ddd;
}

body:has(.mpinb) #apply .btn {
	border-radius: 5px;
	--btnFont: var(--textFont);
}

body:has(.mpinno) {
	--bgLogo: rgb(0, 108, 102);
	--bgSublogo: rgb(0, 108, 102);
	--bgHeaderImage: rgb(0, 108, 102);
}

body:has(.mpinno) #headerImage {
	padding-bottom: 5px;
}
body:has(.mpinno) footer {
	display: none;
}

body:has(.mpipks) {
	--h1Color: rgb(255,124,0);
	--h2Color: rgb(255,124,0);
	--linkColor: rgb(255,124,0);
	--bgLogo: rgb(238, 238, 238);
	--bgSublogo: rgb(238, 238, 238);
	--bgApply: rgb(238, 238, 238);
	--bgFooter: rgb(255,124,0);
	--bgBtnColor: rgb(255,124,0);
	--applyTextColor: var(--textColor);
}

body:has(.mpisoc) {
	--bgApply: rgb(160, 205, 199);
}
body:has(.mpisoc) #subtitle b,
body:has(.mpisoc) #subtitle strong {
	color: var( --h1Color );
}
body:has(.ip) #legal .charta,
body:has(.mpisoc) #legal .charta {
	display: none;
}
body:has(.ip) #apply .charta,
body:has(.mpisoc) #apply .charta {
	display: block;
	justify-self: start;
}

body:has(.biblhert) {
	--h1Color: rgb(142, 27, 21);
	--h2Color: rgb(142, 27, 21);
	--linkColor: rgb(142, 27, 21);
	--bgBtnColor: rgb(142, 27, 21);
	--bgFooter: rgb(142, 27, 21);
	--bgApply: rgb(93, 93, 93);
	--underlineColor: var(--linkColor);
}
body:has(.mpitax) {
	--h1Color: rgb(0, 68, 95);
	--h2Color: rgb(0, 68, 95);
	--linkColor: rgb(0, 68, 95);
	--bgLogo: rgb(0, 68, 95);
	--bgSublogo: rgb(0, 68, 95);
	--bgFooter: rgb(0, 68, 95);
	--bgBtnColor: rgb(0, 68, 95);
	--bgApply: rgb(246, 246, 246);
	--applyTextColor: var(--textColor );
}
body:has(.mpinl) {
	--h1Color: rgb(0 108 102);
	--h2Color: rgb(0 108 102);
	--linkHoverColor: rgb(0 108 102);
	--linkColor: rgb(239 124 0);
	--bgApply: rgb(93 89 79);
	--bgFooter: rgb(82 78 68);
	--bgBtnColor:rgb(82 78 68);
}
body:has(.mpinl) main a {
	text-decoration-color: var( --linkColor );
}