/* ––––––––––––––––––––––––––––––––––––––––– CSS Variables ––––––––––––––––––––––––––––––––––––––––– */

:root {
  --txt-color-bright: #f4eff0;
  --txt-color-dark: #100F0C;
  --txt-color-dark75: #100f0ca8;
  --txt-color-highlight: #2221ff;
  --txt-color-highlight50: #2121ffd8;
  --txt-color-highlight-2: #FF6969;

  --c-background-bright: #F4F2EF;
  --c-background-dark: #100F0C;

  --font-Regular-body: "Riegla-Regular", Fallback, sans-serif;
  --font-Bold-headings: "Riegla-Bold", Fallback, sans-serif;
  --font-Italic-emphasised: "Riegraf-Italic", Fallback, sans-serif;

  /* ––––––––––––––––– Responsive Font Variables –––––––––––––––––  */
  --font-size-90: clamp(3rem, 6vw, 10rem);
  /* font-size: 78px; –––––– Project Name*/
  --font-size-78: clamp(2.6rem, 4.4vw, 8rem);
  /* font-size: 78px; –––––– Project Name*/
  --font-size-60: clamp(2rem, 3.8vw, 7rem);
  /* font-size: 60px; –––––– Big Sentences */
  --font-size-50: clamp(1.8rem, 3.0vw, 5.5rem);
  /* font-size: 50px; –––––– Quotes*/
  --font-size-34: clamp(1.4rem, 1.8vw, 3rem);
  /* font-size: 34px; –––––– Article Headings*/
  --font-size-30: clamp(1.4rem, 1.8vw, 2.6rem);
  /* font-size: 30px; –––––– Introduction Text */
  --font-size-20: clamp(1rem, 1.25vw, 1.8rem);
  /* font-size: 20px; –––––– Body Text */
  --font-size-18: clamp(0.8rem, 1vw, 1.4rem);
  /* font-size: 18px; */
  --font-size-16: clamp(0.75rem, 0.8vw, 1.35rem);
  /* font-size: 16px; */

  --shadow: 0px 0px 50px rgba(104, 104, 104, 0.3);
  /* --shadow: none; */

  --font-size-huge: 60px;

  --border-radius: 4px;

}

::selection {
  background: var(--txt-color-highlight);
  color: var(--txt-color-bright);
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* ––––––––––––––––––––––––––––––––––––––––– Main HTML –––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

html {
  box-sizing: border-box;
  /*     font-family: Arial, Helvetica, sans-serif; */
  font-family: var(--font-Regular-body);
}

body {
  margin: 0px 0px;
  line-height: 1.4;
  background-color: var(--c-background-bright);
  /* cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 32 32"><circle cx="16" cy="16" r="16" fill="black"/></svg>'), auto; */
}

cursor {
  filter: blur(4px);
}

.btn {
  padding: 0.6rem 1.3rem;
  text-decoration: none;
  border: 0;
}

.image {
  /* Tag for all iamges */
  width: 100%;
  max-width: 400%;
  box-shadow: var(--shadow);
  border-radius: var(--border-radius);
}

.image_special {
  /* Tag for big process images -> NO SHADOW */
  width: 100%;
  max-width: 400%;
  border-radius: var(--border-radius);
}

.myHTMLvideo {
  /* Big process images */
  width: 100%;
  max-width: 400%;
  box-shadow: var(--shadow);
  border-radius: var(--border-radius);
}

.wrapper {
  padding: 0px 0px;
  overflow-x: hidden;
}

/* ––––––––––––––––––––––––––––– General Font Style Classes ––––––––––––––––––––––––– */


.italic {
  font-family: var(--font-Italic-emphasised);
}

.highlight-1 {
  color: var(--txt-color-highlight);
}

.highlight-2 {
  color: var(--txt-color-highlight-2);
}

.bold {
  font-family: var(--font-Bold-headings) !important;
}

.darkText {
  color: var(--txt-color-dark);
}

.brightText {
  color: var(--txt-color-bright) !important;
}

.opacityLow {
  opacity: 0.6;
}

.opacityLower {
  opacity: 0.4;
}

.shadow {
  box-shadow: var(--shadow) !important;
}

.textShadow {
  /* text-shadow: var(--c-background-dark) 1px 1px 120px; */
  text-shadow: 0px 4px 20px rgba(16, 15, 12, 0.25);
}

/* ––––––––––––––––––––––––––––––––––––––––– Navigation ––––––––––––––––––––––––––––––––––––––––– */

.head {
  background-color: var(--c-background-bright);
  opacity: 1;
}

.head a {
  font-family: var(--font-Regular-body);
}

.main-nav {
  display: grid;
  grid-row-gap: 120px;
  grid-column-gap: 40px;
  list-style: none;
  grid-template-columns: repeat(12, 1fr);
  padding: 15px 0px 15px 0px;
  /* background-color: var(--c-background-bright); */
  background-color: transparent;
  height: 30px;
  z-index: 2;
}

.main-nav a {
  text-decoration: none;
  color: var(--txt-color-dark);
  z-index: 10;
}

.main-nav a:hover {
  text-decoration: none;
  opacity: 1;
}

.link {
  grid-column: 2/4;
  font-size: var(--font-size-30);
  align-self: center;
  opacity: 0.6;
}

.link1 {
  grid-column: 9;
  text-align: right;
  font-size: var(--font-size-20);
  align-self: center;
  opacity: 1;
}

.link2 {
  grid-column: 10;
  text-align: right;
  font-size: var(--font-size-20);
  align-self: center;
  opacity: 0.62;
}

.link3 {
  grid-column: 11;
  text-align: right;
  font-size: var(--font-size-20);
  align-self: center;
  opacity: 0.62;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––– Section: Project –––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

.project {
  display: grid;
  grid-row-gap: 0em;
  grid-column-gap: 40px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  grid-column: 2/7;
  /* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
  background-color: var(--c-background-bright);
}

/* ––––––––––––––––––––––––––––––––––––––––– Article PLacement –––––––––––––––––––––––––––––––––––––––––– */

.project article {
  grid-column: 4/10;
}

/* ––––––––––––––––––––––––––––––––––––––––––––– Introduction ––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */


/* ––––––––––––––––––––––––––––––––––––––––––––– New Hero Intro ––––––––––––––––––––––––––––––––––––––––––––––– */

.heroIntro {
  grid-column: 1/13;
  display: grid;
  grid-column-gap: 40px;
  /* grid-row-gap: 20px; */
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, 2fr);
  /* grid-template-rows: auto; */
  /* grid-template-rows: auto; */
  /* background-color: aqua; */
  height: calc(100vh - 60px);
  /* overflow: hidden; */
}

/* ––––––––––––––––––––––––––––––––––– Project Specific ID's ––––––––––––––––––––––––––––––––––––––– */


#iaiHero {
  grid-column: 6/13;
  grid-row: 1/6;
  z-index: 0;
  translate: 0px -340px;
  /* background-color: coral; */
}

#capraHero {
  grid-column: 7/13;
  grid-row: 1/6;
  z-index: 0;
  /* translate: 0px -140px; */
}

#comingSoon {
  grid-column: 4/11;
  grid-row: 1/8;
  background-color: var(--txt-color-bright);
  z-index: 10;
  border-radius: var(--border-radius);
  padding: 1em 2em 1em 2em;
  height: fit-content;
  width: fit-content;
  align-self: center;
}

#comingSoon p {
  font-size: var(--font-size-30);
  color: #4B504A;
  margin: 0px;
  /* width: auto; */
  text-align: center;

}



#coCreativeHero {
  grid-column: 8/13;
  grid-row: 1/6;
  z-index: 0;
  /* translate: 0px -80px; */
}

#nzzHero {
  grid-column: 6/13;
  grid-row: 1/6;
  z-index: 0;
  translate: 0px 80px;
}

#dataInterHero {
  grid-column: 6/13;
  grid-row: 1/6;
  z-index: 0;
  translate: 0px 100px;
}

#beamHero {
  grid-column: 7/13;
  grid-row: 1/6;
  z-index: 0;
  /* translate: 0px -40px; */
}

#journalHero {
  grid-column: 8/13;
  grid-row: 1/4;
  z-index: 0;
  /* translate: 0px 100px; */
}

#geoCollage {
  grid-column: 8/13;
  grid-row: 1/4;
  z-index: 0;
  /* translate: 0px 100px; */
}

#faceHero {
  grid-column: 6/13;
  grid-row: 1/4;
  z-index: 0;
  /* translate: 0px 0px; */
}


/* ––––––––––––––––––––––––––– Style Of Big text ––––––––––––––––––––––––––––––– */

.heroIntroText {
  margin-top: clamp(0rem, 2vh, 4rem);
  grid-column: 2/10 !important;
  grid-row: 1/3;
  z-index: 1;
  /* background-color: aqua; */
  height: auto;

}

.heroIntroText h1 {
  /* font-size: 90px !important;  */
  font-size: var(--font-size-90);
  font-family: var(--font-Italic-emphasised);
  font-weight: normal;
  color: var(--txt-color-dark);
  margin-bottom: 0em;
  margin-top: 0em;
  z-index: 1;
}

.heroIntroText p {
  font-size: var(--font-size-34) !important;
  /* Project Name big */
  font-weight: normal;
  color: var(--txt-color-dark);
  line-height: 1.4 !important;
  margin-bottom: 0em;
  margin-top: 1.3em;
  padding-inline-end: 12em;
  z-index: 1;

}

/* ––––––––––––––––––––––––––– Style Of Informtaion ––––––––––––––––––––––––––––––– */

.projectInfo {
  font-size: var(--font-size-18);
  z-index: 1;
}

.PiFlag {
  font-size: var(--font-size-16);
  margin-bottom: 0.6em;
  letter-spacing: 0.6px;
  opacity: 0.5;
  z-index: 1;

}

.deliverables {
  /* font-size: var(--font-size-20); */
  font-size: var(--font-size-20);
  font-family: var(--font-Italic-emphasised);
  z-index: 1;
}

.keyTag {
  font-size: var(--font-size-16);
  /* USED TO BE --> padding: 6px 16px 6px 16px; */
  padding: clamp(0.4em, 0.5vw, 0.8em) clamp(0.5em, 1.2vw, 1em) clamp(0.4em, 0.5vw, 0.8em) clamp(0.5em, 1.2vw, 1em);
  width: fit-content;
  /* border-color: var(--c-background-dark) !important; */
  border: 1px solid;
  border-radius: 4px;
  /* USED TO BE --> margin: 0px 12px 12px 0px; */
  margin: 0px clamp(0.6em, 1.8vw, 1em) clamp(0.6em, 1.8vw, 1em) 0px;
  z-index: 1;
  /* backdrop-filter: blur(4px); */
}

.tagBox {
  display: flex;
  flex-wrap: wrap;
}

/* ––––––––––––––––––––––––––– Placement Of Informtaion ––––––––––––––––––––––––––––––– */


/* #team {
  grid-column: 2/4;
  grid-row: 7/9;
} */

#role {
  grid-column: 2/4;
  grid-row: 7;
  /* background-color:lightgreen; */
}

#deliverables {
  grid-column: 4/8;
  grid-row: 7;
  /* background-color:lightgreen; */
}

#keywords {
  grid-column: 8/12;
  grid-row: 7;
  /* background-color:lightgreen; */
}

/* ––––––––––––––––––––––––––––––––––––––––– Intro List Style –––––––––––––––––––––––––––––––––––––––––– */

.deliverables ul {
  /* List Styling */
  list-style-position: outside;
  list-style-type: '★';
  margin-top: 0;
  padding-left: 0.7em;
  /* font-size: var(--font-size-20); */
  /* font-family: var(--font-Bold-headings); */
  /* font-family: var(--font-Regular-body); */
  /* opacity: 0.75; */
}

.deliverables li {
  /* List elements */
  padding-inline-start: 0.2em;
  /* padding-inline-end: 6em; */
  /* margin-top: 0.8em !important; */
  /* margin-bottom: 0.8em; */
}

/* ––––––––––––––––––––––––––––––––––––––––– Intro Links –––––––––––––––––––––––––––––––––––––––––– */

.arrow2 {
  font-family: var(--font-Regular-body);
  font-size: var(--font-size-30);
  text-decoration: none;
}

.one_intro_link {
  display: inline-block;
}

.heroLink {
  transition: text-decoration 300ms ease;
}

.heroLink:hover {
  text-decoration: underline transparent;
}


/* ––––––––––––––––––––––––––––––––––––––––– Hero Images & Videos –––––––––––––––––––––––––––––––––––––––––– */

.hero {
  grid-column: 2/12;
  margin-bottom: 0em !important;
}

.hero2 {
  grid-column: 1/13;
  box-shadow: none;
  margin-bottom: 4em !important;
}

.hero_video {
  grid-column: 3/11;
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
  box-shadow: var(--shadow);
}

.hero_video_small {
  grid-column: 4/10;
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
  box-shadow: var(--shadow);
}

.hero_video2 {
  grid-column: 1/13;
  /* background-color: lightblue; */
  position: relative;
  /* overflow: hidden; */
  max-width: 100% !important;
  box-shadow: var(--shadow);
}

.resp_iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* ––––––––––––––––––––––––––––––––––––––––– Articles –––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

/* ––––––––––––––––––––––––––––––––––––––––– Article Style –––––––––––––––––––––––––––––––––––––––––– */

.project p {
  font-size: var(--font-size-20);
  font-family: var(--font-Regular-body);
  margin-top: 0em;
  margin-bottom: 1.5em;
  line-height: 1.5;
}

.paraLink {
  transition: text-decoration 300ms ease;
}

.paraLink:hover {
  text-decoration: underline transparent;
}


/* .bold {
  font-size: 18px;
  font-family: var(--font-Regular-body);
  margin-top: 0em;
  margin-bottom: 1.5em;
} */

article h2 {
  font-weight: normal;
  font-size: var(--font-size-50);
  /* margin-top: 2em; */
  margin-bottom: 0.1em;
  /* font-family: var(--font-Bold-headings); */
  font-family: var(--font-Italic-emphasised);
}

.project h3 {
  font-weight: normal;
  font-size: var(--font-size-34);
  margin-top: 2em;
  margin-bottom: 0.1em;
  grid-column: 4/10;
  font-family: var(--font-Bold-headings);
  /* font-family: var(--font-Italic-emphasised); */
}

.project figcaption {
  /* Image Caption */
  font-size: var(--font-size-18);
  /* color: var(--txt-color-highlight); */
  color: var(--txt-color-dark);
  margin-top: 0.5em;
  margin-bottom: 0.6em;
  opacity: 0.65;
}

.captionsDark {
  /* Image Caption */
  color: var(--txt-color-dark) !important;
}

.captionsBright {
  /* Image Caption */
  color: var(--txt-color-bright) !important;
}

.pNoMargins {
  margin: 0 !important;
}

.zIndex-2 {
  z-index: 0;
}

.zIndex-1 {
  z-index: 1;
}

.zIndex-0 {
  z-index: 0;
}

/* ––––––––––––––––––––––––––––––––––––––––– List Style –––––––––––––––––––––––––––––––––––––––––– */

article ul {
  /* List Styling */
  list-style-position: outside;
  list-style-type: '→';
  margin-top: 0.6;
  padding-left: 0.7em;
  font-size: var(--font-size-20);
  /* font-family: var(--font-Bold-headings); */
  font-family: var(--font-Regular-body);
  /* opacity: 0.65; */
  opacity: 0.80;
}

article li {
  /* List elements */
  padding-inline-start: 0.8em;
  /* padding-inline-end: 4em; */
  margin-top: 0.8em !important;
  margin-bottom: 0.8em;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* ––––––––––––––––––––––––––––––––––––––– Alt Article PLacement –––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

.section_Grid {
  display: grid;
  grid-column-gap: 40px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  margin-top: 8em;
  margin-bottom: 4em;
  padding-top: 8em;
  padding-bottom: 8em;
  grid-column: 1/13;
}

.section_GridLow {
  display: grid;
  grid-column-gap: 40px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  margin-top: 8em;
  margin-bottom: 4em;
  padding-top: 0em;
  padding-bottom: 4em;
  grid-column: 1/13;
}

.figure_Grid {
  display: grid;
  grid-column-gap: 40px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  margin-top: 8em;
  margin-bottom: 4em;
  grid-column: 1/13;
}

.figure_GridLow {
  display: grid;
  grid-column-gap: 40px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  margin-top: 0em;
  margin-bottom: 3em;
  grid-column: 1/13;
}

.figure_Grid_BGCol {
  display: grid;
  grid-column-gap: 40px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  margin-top: 4em;
  margin-bottom: 4em;
  grid-column: 1/13;
  padding-top: 12em;
  padding-bottom: 8em;
}

/* ––––––––––––––––––––––––––––––––––––––––– Left Article –––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */


.artL {
  grid-column: 2/6 !important;
  grid-row: 2/6;
}

.artL h3 {
  margin-top: 0;
}

.figure_Grid figure {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.artL_Fig_Huge {
  grid-column: 7/12;
  grid-row: 1/7;
}

.artL_Fig_Massive {
  grid-column: 6/12;
  grid-row: 1/7;
}

.artL_Fig_YT {
  grid-column: 8/12;
  grid-row: 1/7;
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0;
}

/* –––––––––––––––––––– Left Figure Sizes ––––––––––––––––––––––––––– */

.artL_FigL_Big {
  grid-column: 7/11;
  grid-row: 1/4;
}

.artL_FigL_Med {
  grid-column: 7/10;
  grid-row: 3/6;
}

.artL_FigL_Small {
  grid-column: 7/9;
  grid-row: 3/6;
}

.artL_FigL_Screen {
  grid-column: 7/9;
  grid-row: 2/6;
}

/* –––––––––––––––––––– Right Figure Sizes ––––––––––––––––––––––––– */

.artL_FigR_Big {
  grid-column: 8/12;
  grid-row: 1/4;
}

.artL_FigR_Med {
  grid-column: 9/12;
  grid-row: 3/6;
}

.artL_FigR_Small {
  grid-column: 10/12;
  grid-row: 3/6;
}

.artL_FigR_Screen {
  grid-column: 10/12;
  grid-row: 2/6;
}



/* ––––––––––––––––––––––––––––––––––––––––– Right Article –––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */


.artR {
  grid-column: 8/12 !important;
  grid-row: 2/6;
}

.artR h3 {
  margin-top: 0;
}

.artR_Fig_Huge {
  grid-column: 2/7;
  grid-row: 1/7;
}

.artR_Fig_Massive {
  grid-column: 2/8;
  grid-row: 1/7;
}

.artR_Fig_YT {
  grid-column: 2/6;
  grid-row: 1/4;
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0;
}

/* –––––––––––––––––––– Left Figure Sizes ––––––––––––––––––––––––––– */

.artR_FigL_Big {
  grid-column: 2/6;
  grid-row: 1/4;
}

.artR_FigL_Med {
  grid-column: 2/5;
  grid-row: 3/6;
}

.artR_FigL_Small {
  grid-column: 2/4;
  grid-row: 3/6;
}

.artR_FigL_Screen {
  grid-column: 2/4;
  grid-row: 2/6;
}

/* –––––––––––––––––––– Right Figure Sizes ––––––––––––––––––––––––– */


.artR_FigR_Big {
  grid-column: 3/7;
  grid-row: 1/4;
}

.artR_FigR_Med {
  grid-column: 4/7;
  grid-row: 3/6;
}

.artR_FigR_Small {
  grid-column: 5/7;
  grid-row: 3/6;
}

.artR_FigR_Screen {
  grid-column: 5/7;
  grid-row: 2/6;
}

/* ––––––––––––––––––––––––––––––––––––––––– Photos & Videos –––––––––––––––––––––––––––––––––––––––––– */

.project figure {
  /* grid-column: 3/11; */
  margin: 0em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0em;
  margin-right: 0em;
}

/* ––––––––––––––––– Fancy Stuff –––––––––––––––––  */

.image_tafel {
  /* Tag for big process images -> NO SHADOW */
  display: block;
  margin-left: 50%;
  margin-right: auto;
  width: 140%;
  transform: translateX(-50%);
  border-radius: var(--border-radius);
  margin-top: clamp(2em, 2vw, 12em);
  margin-bottom: clamp(2em, 2vw, 12em);
}

.tafelFigure {
  /* Big Image expanding more than the whole with */
  grid-column: 1/13;
}

/* ––––––––––––––––––––––––––––––––––––––––– Photos & Videos Placements –––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

/* ––––––––––––––––––––––––––––––––––––––––– Pictures –––––––––––––––––––––––––––––––––––––––––– */

.bigPic {
  grid-column: 3/11;
  margin-bottom: 0em !important;
}

.bigPicCaption {
  grid-column: 4/9 !important;
  grid-row: 3;
}

.medPic {
  grid-column: 4/10;
}

.smallPic {
  grid-column: 5/9;
}

.leftPic {
  grid-column: 3/7;
}

.rightPic {
  grid-column: 7/11;
  /* transform: translateY(10em); */
  /* margin-bottom: 6em !important; */
}

.leftPic_Big {
  grid-column: 2/7;
  grid-row: 1/3;
}

.rightPic_Big {
  grid-column: 7/12;
  grid-row: 2/5;
}

.leftPic_Small {
  grid-column: 4/7;
  grid-row: 2/4;
}

.rightPic_Small {
  grid-column: 7/10;
  /* transform: translateY(10em); */
  /* margin-bottom: 6em !important; */
}

.image_process_special {
  grid-column: 2/12;
}


/* –––––––––––––––––––––––––––––––––––––––––––––––– Quotes –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

.quote {
  color: var(--txt-color-highlight);
  font-family: var(--font-Regular-body);
  font-size: var(--font-size-50);
  grid-column: 3/11;
  margin-bottom: 0.5em;
  margin-top: 2em;
  text-align: left;
  /* margin-left: 2em; */
  /* margin-right: 2em; */
}

.quoteMeta {
  color: var(--txt-color-highlight);
  font-family: var(--font-Italic-emphasised);
  font-size: var(--font-size-34);
  /* grid-column: 2/12; */
  margin-bottom: 0.5em;
  margin-top: 0em;
  text-align: left;
}

/* ––––––––––––––––– Question Zero & Problem –––––––––––––––––  */


/* ––––––––––––––––– Big –––––––––––––––––  */
.quoteProblem {
  /* color: var(--txt-color-highlight-2); */
  color: var(--txt-color-dark);
  font-family: var(--font-Regular-body);
  font-size: var(--font-size-50);
  grid-column: 3/11;
  margin-bottom: 0.6em;
  margin-top: 1.2em;
  text-align: left;
  /* margin-left: 2em; */
  /* margin-right: 2em; */
}

.quoteQuestion {
  color: var(--txt-color-dark);
  font-family: var(--font-Regular-body);
  /* font-size: 50px; */
  /* font-size: var(--font-size-60); */
  font-size: var(--font-size-50);
  grid-column: 3/11;
  margin-bottom: 0.6em;
  margin-top: 1.2em;

  text-align: left;
  /* margin-left: 2em; */
  /* margin-right: 2em; */
}

.quoteQuestionBlue {
  color: var(--txt-color-highlight);
  font-family: var(--font-Regular-body);
  font-size: var(--font-size-50);
  grid-column: 3/11;
  margin-bottom: 0.6em;
  margin-top: 1.2em;
  text-align: left;
}


.quoteMetaProblem {
  color: var(--txt-color-highlight-2);
  font-family: var(--font-Italic-emphasised);
  font-size: var(--font-size-30);
  margin-bottom: 0.5em;
  margin-top: 0em;
  text-align: left;
}

.quoteMetaQuestion {
  color: var(--txt-color-highlight);
  font-family: var(--font-Italic-emphasised);
  font-size: var(--font-size-30);
  margin-bottom: 0.5em;
  margin-top: 0em;
  text-align: left;
}

/* ––––––––––––––––– Small –––––––––––––––––  */

.quoteProblem_Small {
  /* color: var(--txt-color-highlight-2); */
  color: var(--txt-color-dark);
  font-family: var(--font-Regular-body);
  font-size: var(--font-size-34);
  grid-column: 3/9;
  margin-bottom: 0.6em;
  margin-top: 0.4em;
  text-align: left;
  /* margin-left: 2em; */
  /* margin-right: 2em; */
}

.quoteQuestion_Small {
  color: var(--txt-color-dark);
  font-family: var(--font-Regular-body);
  /* font-size: 50px; */
  /* font-size: var(--font-size-60); */
  font-size: var(--font-size-34);
  grid-column: 3/9;
  margin-bottom: 0.6em;
  margin-top: 0.4em;
  text-align: left;
  /* margin-left: 2em; */
  /* margin-right: 2em; */
  /* box-shadow:   var(--shadow); */

}

.quoteQuestion_Blue {
  color: var(--txt-color-highlight);
  font-family: var(--font-Regular-body);
  font-size: var(--font-size-20);
  grid-column: 3/9;
  margin-bottom: 0.6em;
  margin-top: 0.4em;
  text-align: left;
}


.quoteMetaProblem_Small {
  color: var(--txt-color-highlight-2);
  font-family: var(--font-Italic-emphasised);
  font-size: var(--font-size-20);
  margin-bottom: 0.5em;
  margin-top: 0em;
  text-align: left;
}

.quoteMetaQuestion_Small {
  color: var(--txt-color-highlight);
  font-family: var(--font-Italic-emphasised);
  font-size: var(--font-size-20);
  margin-bottom: 0.5em;
  margin-top: 0em;
  text-align: left;
}

/* ––––––––––––––––––––––––––––––––––––––––––––– PDF Embedded ––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

.pdf_background {
  display: grid;
  grid-column-gap: 40px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  align-items: center;
  margin-top: 6em;
  margin-bottom: 6em;
  padding-bottom: 8em;
  grid-column: 1/13;
  height: auto;
  /* background-size: cover; */
}

.pdf_background_Low {
  display: grid;
  grid-column-gap: 40px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  align-items: center;
  margin-top: 2em;
  margin-bottom: 2em;
  padding-bottom: 2em;
  grid-column: 1/13;
  height: auto;
  /* background-size: cover; */
}

.pdf_background h2 {
  grid-column: 5/10;
  font-size: var(--font-size-30);
  color: var(--txt-color-highlight);
  margin-top: 4em;
  font-weight: normal;
  /* margin-bottom: 0.6em; */
  font-family: var(--font-Regular-body);
  opacity: 0.75;
}

.pdf_background h4 {
  grid-column: 5/9;
  font-size: var(--font-size-20);
  color: var(--txt-color-highlight);
  margin-top: 1.2em;
  font-weight: normal;
  /* margin-bottom: 0.6em; */
  font-family: var(--font-Regular-body);
  opacity: 0.75;
}

.pdf_background_Low h4 {
  grid-column: 5/9;
  font-size: var(--font-size-20);
  color: var(--txt-color-highlight);
  margin-top: 1.2em;
  font-weight: normal;
  /* margin-bottom: 0.6em; */
  font-family: var(--font-Regular-body);
  opacity: 0.75;
}

._df_book {
  margin-bottom: 2em;
  margin-top: 2em;
  grid-column: 1/13;
}

/* ––––––––––––––––––––––––––––––––––––––––––––– PDF Grid ––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

.publiGrid {
  display: grid;
  grid-row-gap: 0px;
  grid-column-gap: 40px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  /* background-color: var(--c-background-dark); */
  padding-top: 4em;
  padding-bottom: 8em;
  grid-column: 1/13;
}

/* ––––––––––––––––– Publications Styling –––––––––––––––––  */

p.publicType {
  margin: 0px;
}


.publicType {
  font-family: var(--font-Bold-headings) !important;
  font-size: var(--font-size-30) !important;
  align-content: center;
  color: var(--txt-color-dark);
  margin-top: 0.4em !important;
  padding-bottom: 0.2em !important;
  line-height: 1.4;
}

p.publicTitle {
  margin: 0px;
}

.publicTitle {
  font-family: var(--font-Regular-body) !important;
  font-size: var(--font-size-30) !important;
  align-content: center;
  color: var(--txt-color-dark);
  margin-top: 0.4em !important;
  padding-bottom: 0.2em !important;
  line-height: 1.4 !important;
}

.publicMeta {
  font-family: var(--font-Regular-body) !important;
  font-size: var(--font-size-20) !important;
  /* Relates roughly to 16px  */
  color: var(--txt-color-dark);
  align-content: center;
  margin-top: 0.5em;
  margin-bottom: 0em;
  line-height: 1.4 !important;
  opacity: 0.6;
}

.authorName {
  font-family: var(--font-Bold-headings);
}

/* ––––––––––––––––– Publications Placement –––––––––––––––––  */

.publiHead {
  grid-column: 2/6;
  /* grid-row: 5/6; */
}

.publiFlag {
  grid-column: 2/6;
  grid-row: 5/6;
  margin-block-start: 4em;
  padding-block-start: 4em;
  padding-block-end: 0em;
}

.df-popup-thumb {
  width: auto !important;
}

/* ––––––––––––––––– IAI –––––––––––––––––  */

.publiIAI {
  grid-column: 6/11;
  grid-row: 1;
  align-self: center;
  padding-block-start: 0.6em;
  padding-block-end: 2em;
}

#IAI_pdf {
  grid-column: 3/6;
  grid-row: 1;
  align-self: start;
  max-width: 100%;
  padding-block-end: 2em;
  /* padding: 1.2em; */
}

/* –––––––––––– IAI Master Thesis –––––––––––––  */

.publiIAI_Thes {
  grid-column: 6/11;
  grid-row: 2;
  align-self: center;
  color: var(--txt-color-bright);
  font-size: 20px;
  padding-block-start: 0.6em;
  padding-block-end: 2em;
}

#IAI_Thes_pdf {
  grid-column: 3/6;
  grid-row: 2;
  align-self: center;
  padding-block-end: 2em;
}

/* –––––––––––– IAI Pictorial –––––––––––––  */

.publiIAI_PIC {
  grid-column: 6/11;
  grid-row: 3;
  align-self: center;
  color: var(--txt-color-bright);
  font-size: 20px;
  padding-block-start: 0.6em;
  padding-block-end: 2em;
}

#IAI_PIC_pdf {
  grid-column: 3/6;
  grid-row: 3;
  align-self: center;
  padding-block-end: 2em;
}



/* ––––––––––––––––––––––––––––––––––––––––––––– Buttons ––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

.contactButton {
  display: inline-block;
  background: none;
  /* font-family: var(--font-Italic-emphasised); */
  font-family: var(--font-Regular-body);
  font-weight: normal;
  outline: none;
  cursor: pointer;
  font-size: var(--font-size-18);
  line-height: 20px;
  border-radius: 4px;
  padding: 13px 23px;
  margin-top: 14px;
  margin-right: 10px;
  transition: border 0.2s ease-out 0s, color 0.2s ease-out 0s;
  border: 1px solid var(--txt-color-dark);
  color: var(--txt-color-dark);

}

.contactButton:hover {
  border: 1px solid var(--txt-color-dark75);
  color: var(--txt-color-dark75);
}

.artLink {
  font-family: var(--font-Regular-body);
  font-size: var(--font-size-20);
  font-weight: normal;
  line-height: 1.2;
  -webkit-transition: 0.5s;
  transition: text-decoration 300ms ease;
  color: var(--txt-color-highlight);
  text-decoration-color: var(--txt-color-highlight);
}

.artLink:hover {
  text-decoration: underline transparent;
}

.artLinkMargin {
  margin-top: 1.2em;
}



/* ––––––––––––––––––––––––––––––––––––––––––––– Sources ––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

.sources {
  font-size: var(--font-size-18) !important;
  opacity: 0.75;
}

ol {
  padding-inline-start: 1.8em;
  /* list-style-position: outside; */
  list-style-position: outside;
}

ol li {
  padding-inline-start: 1.4em;
}

ol li::marker {
  float: left;
  content: "["counter(list-item, decimal) "]";
}

.opacityCite {
  opacity: 0.5;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––– Section: Credits –––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */


.credits p {
  font-size: var(--font-size-20);
  line-height: 1.6em;
  color: var(--txt-color-dark);
}

.credits a {
  font-size: var(--font-size-20);
  text-decoration: underline;
  display: inline-block;
  line-height: 1;
  cursor: pointer;
  color: var(--txt-color-dark);
  transition: text-decoration 300ms ease;
}


.credits a:hover {
  text-decoration: underline transparent;
}

.bold {
  font-family: var(--font-Bold-headings);
}


/* ––––––––––––––––– Interactive buttons next to the credits –––––––––––––––––  */

.link_down {
  grid-column: 2/12;
  text-decoration: none;
  text-align: left;
  color: var(--txt-color-dark);
  /* font-size: 16px; */
  font-family: var(--font-Regular-body);
  opacity: 0.6;
}

.link_down:hover {
  opacity: 1;
}

.link_down span {
  /* font-size: 24px; */
  vertical-align: sub;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––– Footer –––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

.copyright {
  background-color: transparent;
  display: grid;
  grid-row-gap: 120px;
  grid-column-gap: 40px;
  grid-template-columns: repeat(12, 1fr);
  margin-top: 2em;
  margin-bottom: 2em;
}

.copyright p {
  grid-column: 5/9;
  text-align: center;
  font-size: var(--font-size-18);
}

.copyright a {
  text-decoration: underline;
  display: inline-block;
  line-height: 1;
  cursor: pointer;
  color: var(--txt-color-dark);
  transition: text-decoration 300ms ease;
}

.copyright a:hover {
  text-decoration: underline transparent;
  cursor: pointer;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* ––––––––––––––––––––––––––––––––––––––––– Media Queries –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */


@media (max-width: 768px) {
  /* Section: Top Nav */

  .main-nav {
    display: grid;
    grid-row-gap: 120px;
    grid-column-gap: 2.7vw;
    list-style: none;
    grid-template-columns: repeat(12, 1fr);
    padding: 15px 0px 15px 0px;
  }

  .link1 {
    grid-column: 7/8;
    text-align: right;
    align-self: center;
    opacity: 0.62;

  }

  .link2 {
    grid-column: 9/10;
    text-align: right;
    align-self: center;
    opacity: 0.62;
  }

  .link3 {
    grid-column: 11/12;
    text-align: right;
    align-self: center;
    opacity: 1;

  }

  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* ––––––––––––––––––––––––––––––––––––––––– Section: Top Container ––––––––––––––––––––––––––––––––––––––––– */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */


  .project {
    display: grid;
    grid-row-gap: 0em;
    grid-column-gap: 2.7vw;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    background-color: var(--c-background-bright);
  }

  .project article {
    grid-column: 2/12;
    margin-bottom: 1.2em;
  }

  /* ––––––––––––––––––––––––––––––––––––––––––––– Introduction ––––––––––––––––––––––––––––––––––––––––––––––– */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

  /* ––––––––––––––––––––––––––––––––––––––––––––– New Hero Intro ––––––––––––––––––––––––––––––––––––––––––––––– */

  .heroIntro {
    grid-column: 1/13;
    display: grid;
    grid-column-gap: 2.7vw;
    /* grid-row-gap: 20px; */
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    height: auto;
    /* overflow: hidden; */
    padding-bottom: 2.4em;
    margin-bottom: 2.4em;

  }

  /* ––––––––––––––––––––––––––––––––––– Project Specific ID's ––––––––––––––––––––––––––––––––––––––– */


  #iaiHero {
    grid-column: 1/13;
    grid-row: 2;
    z-index: 0;
    translate: 0px 0px;
    /* background-color: coral; */
  }

  #capraHero {
    grid-column: 1/13;
    /* grid-row: 1; */
    grid-row: 2;
    z-index: 0;
    /* translate: 0px -140px; */
  }

  #coCreativeHero {
    grid-column: 1/13;
    /* grid-row: 1; */
    grid-row: 2;
    z-index: 0;
    /* translate: 0px -80px; */
  }

  #nzzHero {
    grid-column: 1/13;
    /* grid-row: 1; */
    grid-row: 2;
    z-index: 0;
    translate: 0px 0px;
  }

  #dataInterHero {
    grid-column: 1/13;
    grid-row: 2;
    z-index: 0;
    translate: 0px 0px;
  }

  #beamHero {
    grid-column: 2/13;
    /* grid-row: 1; */
    grid-row: 2;
    z-index: 0;
    /* translate: 0px -40px; */
  }

  #journalHero {
    grid-column: 1/13;
    /* grid-row: 1; */
    grid-row: 2;
    z-index: 0;
    /* translate: 0px 100px; */
  }

  #geoCollage {
    grid-column: 2/13;
    /* grid-row: 1; */
    grid-row: 2;
    z-index: 0;
    /* translate: 0px 100px; */
  }

  #faceHero {
    grid-column: 2/13;
    /* grid-row: 1; */
    grid-row: 2;
    z-index: 0;
    /* translate: 0px 0px; */
  }


  /* ––––––––––––––––––––––––––– Style Of Big text ––––––––––––––––––––––––––––––– */

  .heroIntroText {
    grid-column: 2/12 !important;
    /* grid-row: 2; */
    grid-row: 1;
    z-index: 1/2;
  }

  .heroIntroText h1 {
    line-height: 1.1;
    margin-bottom: 0.4em;
    margin-top: 0em;
    z-index: 1;
  }

  .heroIntroText p {
    line-height: 1.3 !important;
    margin-bottom: 0em;
    /* margin-top: 2em; */
    padding-inline-end: 0em;
    z-index: 1;
  }

  /* ––––––––––––––––––––––––––– Style Of Informtaion ––––––––––––––––––––––––––––––– */


  .keyTag {
    font-size: var(--font-size-16);
    /* USED TO BE --> padding: 6px 16px 6px 16px; */
    /* padding: clamp(0.2em, 0.5vw, 0.8em) clamp(0.5em, 1.2vw, 1em) clamp(0.2em, 0.5vw, 0.8em) clamp(0.5em, 1.2vw, 1em); */
    width: fit-content;
    /* border-color: var(--c-background-dark) !important; */
    border: 1px solid;
    border-radius: 4px;
    /* USED TO BE --> margin: 0px 12px 12px 0px; */
    margin: 0px clamp(0.6em, 1.8vw, 1em) clamp(0.6em, 1.8vw, 1em) 0px;
    z-index: 1;
    /* backdrop-filter: blur(4px); */
  }

  .tagBox {
    display: flex;
    flex-wrap: wrap;
  }

  /* ––––––––––––––––––––––––––– Placement Of Informtaion ––––––––––––––––––––––––––––––– */


  /* #team {
  grid-column: 2/4;
  grid-row: 7/9;
} */

  #role {
    grid-column: 2/6;
    grid-row: 3;
    /* background-color:lightgreen; */
  }

  #deliverables {
    grid-column: 6/12;
    grid-row: 3;
    /* background-color:lightgreen; */
  }

  #keywords {
    grid-column: 2/12;
    grid-row: 4;
    /* background-color:lightgreen; */
    margin-top: 1.2em;
  }

  /* ––––––––––––––––––––––––––––––––––––––––– Intro List Style –––––––––––––––––––––––––––––––––––––––––– */

  .deliverables ul {
    /* List Styling */
    list-style-position: outside;
    list-style-type: '★';
    margin-top: 0;
    padding-left: 0.7em;
    /* font-size: var(--font-size-20); */
    /* font-family: var(--font-Bold-headings); */
    /* font-family: var(--font-Regular-body); */
    /* opacity: 0.75; */
  }

  .deliverables li {
    /* List elements */
    padding-inline-start: 0em;
    padding-inline-end: 0em;
    margin-top: 0.2em !important;
    margin-bottom: 0.2em;
  }

  /* ––––––––––––––––––––––––––––––––––––––––– Intro Links –––––––––––––––––––––––––––––––––––––––––– */

  .arrow2 {
    font-family: var(--font-Regular-body);
    font-size: var(--font-size-30);
    text-decoration: none;
  }

  .one_intro_link {
    display: inline-block;
  }

  .heroLink {
    line-height: 1.2;
    -webkit-transition: 0.5s;
    transition: 0.5s;
  }

  .heroLink:hover {
    text-decoration: none;
  }

  /* ––––––––––––––––––––––––––––––––––––––––– Intro Links –––––––––––––––––––––––––––––––––––––––––– */

  /*
.arrow { 
  font-family: var(--font-Regular-body);
  font-size: var(--font-size-18);
  text-decoration: none;
}
 */

  .arrow2 {
    font-family: var(--font-Regular-body);
    font-size: var(--font-size-30);
    text-decoration: none;
  }

  .link_arrow {
    /* Interactive Arrows */
    margin-bottom: 0.6em;
  }


  /* ––––––––––––––––––––––––––––––––––––––––– Hero Images & Videos –––––––––––––––––––––––––––––––––––––––––– */

  .hero2 {
    grid-column: 1/13;
    box-shadow: none;
    margin-bottom: 1em !important;
  }

  .hero {
    grid-column: 2/12;
  }

  .hero_video {
    grid-column: 2/12;
  }

  .hero_video2 {
    grid-column: 1/13;
    box-shadow: none;
  }


  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* ––––––––––––––––––––––––––––––––––––––––– Articles –––––––––––––––––––––––––––––––––––––––––– */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

  /* ––––––––––––––––––––––––––––––––––––––––– Article Style –––––––––––––––––––––––––––––––––––––––––– */

  .project p {
    margin-top: 0em;
    margin-bottom: 0.6em;
  }

  article h2 {
    margin-top: 1.4em;
    margin-bottom: 0.1em;
  }

  .project h3 {
    margin-top: 0.6em;
    margin-bottom: 0.1em;
    line-height: 1.3;
    font-family: var(--font-Bold-headings);
  }

  .project figcaption {
    /* Image Caption */
    margin-top: 0.2em;
    margin-bottom: 0.6em;
  }

  ul {
    margin-top: 0.6;
    padding-left: 0.7em;
  }

  li {
    padding-inline-start: 0.8em;
    padding-inline-end: 2em;
    margin-top: 0.8em !important;
    margin-bottom: 0.8em;
  }

  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* ––––––––––––––––––––––––––––––––––––––– Alt Article PLacement –––––––––––––––––––––––––––––––––––––––– */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

  .section_Grid {
    grid-column-gap: 2.7vw;
    margin-top: 2.4em;
    margin-bottom: 2.4em;
    padding-top: 2.4em;
    padding-bottom: 2.4em;
    grid-column: 1/13;
  }

  .section_GridLow {
    grid-column-gap: 2.7vw;
    margin-top: 1.2em;
    margin-bottom: 1.2em;
    padding-top: 0em;
    padding-bottom: 1.2em;
    grid-column: 1/13;
  }

  .figure_Grid {
    grid-column-gap: 2.7vw;
    margin-top: 0.6em;
    margin-bottom: 1.6em;
    grid-column: 1/13;
  }

  .figure_GridLow {
    grid-column-gap: 2.7vw;
    margin-top: 0.2em;
    margin-bottom: 1.4em;
    grid-column: 1/13;
  }

  .figure_Grid_BGCol {
    grid-column-gap: 2.7vw;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    grid-column: 1/13;
  }

  /* ––––––––––––––––––––––––––––––––––––––––– Left Article –––––––––––––––––––––––––––––––––––––––––– */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */


  .artL {
    grid-column: 2/12 !important;
    grid-row: 1;
    /* margin-top: 4em; */
  }

  .artL_Fig_Huge {
    grid-column: 2/12 !important;
    grid-row: 2;
  }

  .artL_Fig_Massive {
    grid-column: 2/12 !important;
    grid-row: 2;
  }

  .artL_Fig_YT {
    grid-column: 2/12;
    grid-row: 2;
  }

  /* –––––––––––––––––––– Left Figure Sizes ––––––––––––––––––––––––––– */

  .artL_FigL_Big {
    grid-column: 2/10;
    grid-row: 2/6;
  }

  .artL_FigL_Med {
    grid-column: 2/9;
    grid-row: 5/7;
  }

  .artL_FigL_Small {
    grid-column: 2/7;
    grid-row: 5/7;
  }

  .artL_FigL_Screen {
    grid-column: 2/7;
    grid-row: 5/8;
  }

  /* –––––––––––––––––––– Right Figure Sizes ––––––––––––––––––––––––– */

  .artL_FigR_Big {
    grid-column: 3/12;
    grid-row: 2/6;
  }

  .artL_FigR_Med {
    grid-column: 6/12;
    grid-row: 5/7;

  }

  .artL_FigR_Small {
    grid-column: 5/12;
    grid-row: 5/7;
  }

  .artL_FigR_Screen {
    grid-column: 7/12;
    grid-row: 5/8;
  }

  /* ––––––––––––––––––––––––––––––––––––––––– Right Article –––––––––––––––––––––––––––––––––––––––––– */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */


  .artR {
    grid-column: 2/12 !important;
    grid-row: 1;
    /* margin-top: 4em; */
  }

  .artR_Fig_Huge {
    grid-column: 2/12;
    grid-row: 2;
  }

  .artR_Fig_Massive {
    grid-column: 2/12 !important;
    grid-row: 2;
  }

  .artR_Fig_YT {
    grid-column: 2/12;
    grid-row: 2;
  }

  /* –––––––––––––––––––– Left Figure Sizes ––––––––––––––––––––––––––– */

  .artR_FigL_Big {
    grid-column: 2/10;
    grid-row: 2/6;
  }

  .artR_FigL_Med {
    grid-column: 2/8;
    grid-row: 5/7;
  }

  .artR_FigL_Small {
    grid-column: 2/7;
    grid-row: 5/7;
  }

  .artR_FigL_Screen {
    grid-column: 2/7;
    grid-row: 5/8;
  }

  /* –––––––––––––––––––– Right Figure Sizes ––––––––––––––––––––––––– */


  .artR_FigR_Big {
    grid-column: 3/12;
    grid-row: 2/6;
  }

  .artR_FigR_Med {
    grid-column: 6/12;
    grid-row: 5/7;
  }

  .artR_FigR_Small {
    grid-column: 7/12;
    grid-row: 5/7;
  }

  .artR_FigR_Screen {
    grid-column: 7/12;
    grid-row: 5/8;
  }

  /* ––––––––––––––––––––––––––––––––––––––––– Photos & Videos –––––––––––––––––––––––––––––––––––––––––– */

  .project figure {
    /* grid-column: 3/11; */
    margin: 0em;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0em;
    margin-right: 0em;
  }

  /* ––––––––––––––––– Fancy Stuff –––––––––––––––––  */

  .image_tafel {
    /* Tag for big process images -> NO SHADOW */
    margin-left: 50%;
    margin-right: auto;
    margin-top: clamp(2em, 2vw, 12em);
    margin-bottom: clamp(2em, 2vw, 12em);
  }

  .tafelFigure {
    /* Big Image expanding more than the whole with */
    grid-column: 1/13;
  }

  /* ––––––––––––––––––––––––––––––––––––––––– Photos & Videos Placements –––––––––––––––––––––––––––––––––––––––––– */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */


  /* ––––––––––––––––––––––––––––––––––––––––– Pictures –––––––––––––––––––––––––––––––––––––––––– */

  .bigPic {
    grid-column: 2/12;
  }

  .bigPicCaption {
    grid-column: 2/11 !important;
    /* grid-row: 2; */
  }

  .medPic {
    grid-column: 2/12;
  }

  .smallPic {
    grid-column: 2/12;
  }



  .leftPic {
    grid-column: 2/10;
  }

  .rightPic {
    grid-column: 4/12;
  }

  .leftPic_Small {
    grid-column: 2/9;
  }

  .rightPic_Small {
    grid-column: 5/12;
    /* transform: translateY(10em); */
    /* margin-bottom: 6em !important; */
  }

  .image_process_special {
    grid-column: 2/12;
  }


  /* –––––––––––––––––––––––––––––––––––––––––––––––– Quotes –––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

  .quote {
    grid-column: 2/12;
    margin-bottom: 1.4em;
    margin-top: 1.4em;
  }

  .quoteMeta {
    margin-bottom: 0.5em;
    margin-top: 0em;
  }


  /* ––––––––––––––––– Question Zero & Problem –––––––––––––––––  */

  .quoteProblem {
    grid-column: 2/12;
    margin-bottom: 0.6em;
    margin-top: 1em;
  }

  .quoteQuestion {
    grid-column: 2/12;
    margin-bottom: 0.6em;
    margin-top: 1em;
  }

  .quoteQuestionBlue {
    grid-column: 2/12;
    margin-bottom: 0.6em;
    margin-top: 1em;
  }


  .quoteMetaProblem {
    margin-bottom: 0.5em;
    margin-top: 0em;
  }

  .quoteMetaQuestion {
    margin-bottom: 0.5em;
    margin-top: 0em;
  }


  /* ––––––––––––––––– Small –––––––––––––––––  */

  .quoteProblem_Small {
    grid-column: 2/12;
    margin-bottom: 0.6em;
    margin-top: 0.4em;
    /* margin-left: 2em; */
    /* margin-right: 2em; */
  }

  .quoteQuestion_Small {
    grid-column: 2/12;
    margin-bottom: 0.6em;
    margin-top: 0.4em;
    /* margin-left: 2em; */
    /* margin-right: 2em; */
  }

  .quoteQuestion_Blue {
    grid-column: 2/12;
    margin-bottom: 0.6em;
    margin-top: 0.4em;
  }


  .quoteMetaProblem_Small {
    margin-bottom: 0.5em;
    margin-top: 0em;
  }

  .quoteMetaQuestion_Small {
    margin-bottom: 0.5em;
    margin-top: 0em;
  }

  /* ––––––––––––––––––––––––––––––––––––––––––––– PDF Embedded ––––––––––––––––––––––––––––––––––––––––––––––– */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

  .pdf_background {
    grid-row-gap: 0em;
    grid-column-gap: 2.7vw;
    margin-top: 6em;
    margin-bottom: 6em;
    padding-bottom: 4em;
    grid-column: 1/13;
    height: auto;
    /* background-size: cover; */
  }

  .pdf_background h2 {
    grid-column: 3/12;
    font-size: var(--font-size-20);
    color: var(--txt-color-highlight);
    margin-top: 4em;
    font-weight: normal;
    /* margin-bottom: 0.6em; */
    font-family: var(--font-Regular-body);
    opacity: 0.75;
  }

  ._df_book {
    margin-bottom: 2em;
    margin-top: 2em;
    grid-column: 2/12;
  }


  /* ––––––––––––––––––––––––––––––––––––––––––––– PDF Grid ––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

  .publiGrid {
    grid-column-gap: 2.7vw;
    padding-top: 0em;
    padding-bottom: 0em;
    margin-top: 0.6em;
    margin-bottom: 1.6em;
    grid-column: 1/13;
  }

  /* ––––––––––––––––– Publications Placement –––––––––––––––––  */



  .publiHead {
    grid-column: 2/6;
    /* grid-row: 5/6; */
  }

  .publiFlag {
    grid-column: 2/6;
    grid-row: 5/6;
    margin-block-start: 4em;
    padding-block-start: 4em;
    padding-block-end: 0em;
  }

  .df-popup-thumb {
    width: auto !important;
  }

  /* ––––––––––––––––– IAI –––––––––––––––––  */

  #IAI_pdf {
    grid-column: 3/11;
    grid-row: 1;
    align-self: start;
    max-width: 100%;
    padding-block-end: 2em;
    /* padding: 1.2em; */
  }

  .publiIAI {
    grid-column: 2/12;
    grid-row: 2;
    align-self: center;
    padding-block-start: 0.6em;
    padding-block-end: 2em;
  }

  /* –––––––––––– IAI Master Thesis –––––––––––––  */

  #IAI_Thes_pdf {
    grid-column: 3/11;
    grid-row: 3;
    align-self: center;
    padding-block-end: 2em;
  }

  .publiIAI_Thes {
    grid-column: 2/12;
    grid-row: 4;
    align-self: center;
    color: var(--txt-color-bright);
    font-size: 20px;
    padding-block-start: 0.6em;
    padding-block-end: 2em;
  }

  /* –––––––––––– IAI Pictorial –––––––––––––  */

  #IAI_PIC_pdf {
    grid-column: 3/11;
    grid-row: 5;
    align-self: center;
    padding-block-end: 2em;
  }


  .publiIAI_PIC {
    grid-column: 2/12;
    grid-row: 6;
    align-self: center;
    color: var(--txt-color-bright);
    font-size: 20px;
    padding-block-start: 0.6em;
    padding-block-end: 2em;
  }

  /* ––––––––––––––––––––––––––––––––––––––––––––– Sources ––––––––––––––––––––––––––––––––––––––––––––––– */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

  .sources {
    font-size: var(--font-size-18) !important;
    opacity: 0.75;
  }

  ol {
    padding-inline-start: 1.2em;
    /* list-style-position: outside; */
    list-style-position: outside;
  }

  ol li {
    padding-inline-start: 0.6em;
    padding-inline-end: 0em;
  }

  ol li::marker {
    float: left;
    content: "["counter(list-item, decimal) "]";
  }

  .opacityCite {
    opacity: 0.5;
  }

  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* –––––––––––––––––––––––––––––––––––––––––––– Section: Credits –––––––––––––––––––––––––––––––––––––––––––– */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

  .credits {
    margin-bottom: 1.4em;
  }

  .credits p {
    line-height: 1.6em;
  }

  .credits a {
    font-size: var(--font-size-20);
    text-decoration: underline;
    display: inline-block;
    line-height: 1;
    cursor: pointer;
    color: var(--txt-color-dark);
  }

  .credits a:hover {
    text-decoration: none;
    color: var(--txt-color-dark);
  }


  /* ––––––––––––––––– Interactive buttons next to the credits –––––––––––––––––  */

  .link_down {
    grid-column: 2/12;
    opacity: 0.6;

  }

  .link_down:hover {
    opacity: 1;
  }

  .link_down span {
    /* font-size: 24px; */
    vertical-align: sub;
  }

  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––– Footer –––––––––––––––––––––––––––––––––––––––––––– */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

  .copyright {
    grid-column-gap: 2.7vw;
    grid-template-columns: repeat(12, 1fr);
    margin-top: 2em;
    margin-bottom: 2em;
  }

  .copyright p {
    grid-column: 4/10;
    text-align: center;
  }

}