/* Reset CSS (https://dev.to/hankchizljaw/a-modern-css-reset-6p3) */

/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Remove default padding */
ul[class],
ol[class] {
    padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
    margin: 0;
}

blockquote {
    margin-bottom: var(--space-s);
}

/* Set core body defaults */
body {
    min-height: 100vh;
    scroll-behavior: smooth;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
    list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
    max-width: 100%;
    display: block;
    width: 100%;
    height: auto;
}

.logo img {
    width: unset;
    height: unset;
}

/* Natural flow and rhythm in articles by default */
article>*+* {
    margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
    font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* End Reset CSS */

/* Variables */

/* Fonts */
:root {
    --font-family-serif: 'IBM Plex Serif', serif;
    --font-family-sans-serif: 'Open Sans', sans-serif;
}

/* Colors */
:root {
    --color-light-blue: #8ca2c5;
    --color-light-blue-footer: #f1f5f8;
    --color-light-blue-input: #5978ab;
    --color-blue: #295394;
    --color-dark-blue: #19535f;
    --color-light-green: #8db580;
    --color-dark-purple: #623b5a;
    --color-pink: #d991ba;
    --color-light-grey: #e5eaf2;
    --color-light-grey-2: #f6f6f6;
    --color-dark-grey: #666666;
    --color-dark-grey-2: #d8d8d8;
    --color-light-orange: #f4b266;
    --color-light-yellow: #fdf7ef;
    --color-yellow: #f5cd05;
    --color-black: #000000;
    --color-white: #ffffff;

    /* Courses colors */
    --color-mathematical-demography: hsla(273,26%,66%,1);
    --color-mathematical-demography-50: hsla(273,26%,66%,0.5);
    --color-statistical-demography: hsla(30,91%,56%,1);
    --color-statistical-demography-50: hsla(30,91%,56%,0.5);
    --color-demographic-theories: hsla(186,15%,60%,1);
    --color-demographic-theories-50: hsla(186,15%,60%,0.5);
    --color-population-data-science: hsla(222,44%,47%,1);
    --color-population-data-science-50: hsla(222,44%,47%,0.5);
    --color-current-population-issues: hsla(129,30%,67%,1);
    --color-current-population-issues-50: hsla(129,30%,67%,0.5);
    --color-modelling-simulation-forecasting: hsla(14,77%,54%,1);
    --color-modelling-simulation-forecasting-50: hsla(14,77%,54%,0.5);
    --color-thesis-course: hsla(338,62%,48%,1);
    --color-thesis-course-50: hsla(338,62%,48%,0.5);
}

/* Buttons */
:root {
    --button-border-radius: 21.5px;
}

/* Breakpoints */
:root {
    --breakpoint-small: 320px;
    --breakpoint-medium: 768px;
    --breakpoint-large: 1024px;
    --breakpoint-xlarge: 1430px;
}

/* Font type scale */
/* @link https://utopia.fyi/type/calculator?c=320,21,1.2,1440,24,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */
:root {
    --step--2: clamp(0.91rem, 0.90rem + 0.07vw, 0.96rem);
    --step--1: clamp(1.09rem, 1.06rem + 0.15vw, 1.20rem);
    --step-0: clamp(1.31rem, 1.26rem + 0.27vw, 1.50rem);
    --step-1: clamp(1.58rem, 1.49rem + 0.43vw, 1.88rem);
    --step-2: clamp(1.89rem, 1.76rem + 0.65vw, 2.34rem);
    --step-3: clamp(2.27rem, 2.08rem + 0.95vw, 2.93rem);
    --step-4: clamp(2.72rem, 2.45rem + 1.34vw, 3.66rem);
    --step-5: clamp(3.27rem, 2.89rem + 1.87vw, 4.58rem);
}

/* Spacing scale */
/* @link https://utopia.fyi/space/calculator?c=320,21,1.2,1440,24,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */
:root {
    --fluid-min-width: 320;
    --fluid-max-width: 1440;

    --fluid-screen: 100vw;
    --fluid-bp: calc((var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width)));
}

@media screen and (min-width: 1440px) {
    :root {
        --fluid-screen: calc(var(--fluid-max-width) * 1px);
    }
}

:root {
    --fc-3xs-min: (var(--fc-s-min) * 0.25);
    --fc-3xs-max: (var(--fc-s-max) * 0.25);

    --fc-2xs-min: (var(--fc-s-min) * 0.5);
    --fc-2xs-max: (var(--fc-s-max) * 0.5);

    --fc-xs-min: (var(--fc-s-min) * 0.75);
    --fc-xs-max: (var(--fc-s-max) * 0.75);

    --fc-s-min: (var(--f-0-min, 21));
    --fc-s-max: (var(--f-0-max, 24));

    --fc-m-min: (var(--fc-s-min) * 1.5);
    --fc-m-max: (var(--fc-s-max) * 1.5);

    --fc-l-min: (var(--fc-s-min) * 2);
    --fc-l-max: (var(--fc-s-max) * 2);

    --fc-xl-min: (var(--fc-s-min) * 3);
    --fc-xl-max: (var(--fc-s-max) * 3);

    --fc-2xl-min: (var(--fc-s-min) * 4);
    --fc-2xl-max: (var(--fc-s-max) * 4);

    --fc-3xl-min: (var(--fc-s-min) * 6);
    --fc-3xl-max: (var(--fc-s-max) * 6);

    /* T-shirt sizes */
    --space-3xs: calc(((var(--fc-3xs-min) / 16) * 1rem) + (var(--fc-3xs-max) - var(--fc-3xs-min)) * var(--fluid-bp));
    --space-2xs: calc(((var(--fc-2xs-min) / 16) * 1rem) + (var(--fc-2xs-max) - var(--fc-2xs-min)) * var(--fluid-bp));
    --space-xs: calc(((var(--fc-xs-min) / 16) * 1rem) + (var(--fc-xs-max) - var(--fc-xs-min)) * var(--fluid-bp));
    --space-s: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-s-max) - var(--fc-s-min)) * var(--fluid-bp));
    --space-m: calc(((var(--fc-m-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-m-min)) * var(--fluid-bp));
    --space-l: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-l-min)) * var(--fluid-bp));
    --space-xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-xl-min)) * var(--fluid-bp));
    --space-2xl: calc(((var(--fc-2xl-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-2xl-min)) * var(--fluid-bp));
    --space-3xl: calc(((var(--fc-3xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-3xl-min)) * var(--fluid-bp));

    /* One-up pairs */
    --space-3xs-2xs: calc(((var(--fc-3xs-min) / 16) * 1rem) + (var(--fc-2xs-max) - var(--fc-3xs-min)) * var(--fluid-bp));
    --space-2xs-xs: calc(((var(--fc-2xs-min) / 16) * 1rem) + (var(--fc-xs-max) - var(--fc-2xs-min)) * var(--fluid-bp));
    --space-xs-s: calc(((var(--fc-xs-min) / 16) * 1rem) + (var(--fc-s-max) - var(--fc-xs-min)) * var(--fluid-bp));
    --space-s-m: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-s-min)) * var(--fluid-bp));
    --space-m-l: calc(((var(--fc-m-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-m-min)) * var(--fluid-bp));
    --space-l-xl: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-l-min)) * var(--fluid-bp));
    --space-xl-2xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-xl-min)) * var(--fluid-bp));
    --space-2xl-3xl: calc(((var(--fc-2xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-2xl-min)) * var(--fluid-bp));

    /* Custom pairs */
    --space-s-l: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-s-min)) * var(--fluid-bp));
}

:root {
    accent-color: var(--color-blue);
}

/* Typography */

a {
    font-family: var(--font-family-sans-serif);
}

main a,
main a:visited {
    color: var(--color-black);
    text-decoration-color: var(--color-blue);
    text-decoration-thickness: 2px;
}

main a:hover {
    color: var(--color-blue);
    text-decoration: none;
}

h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-sans-serif);
    color: var(--color-blue);
}

li {
    font-family: var(--font-family-sans-serif);
    font-size: var(--step--1);
}

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

main>h1,
.home-header>h1 {
    font-family: var(--font-family-serif);
    font-weight: 500;
    color: var(--color-blue);
    font-size: var(--step-2);
    margin-bottom: var(--space-m);
}

main .intro p,
.home .intro p {
    font-family: var(--font-family-sans-serif);
    color: var(--color-black);
    font-size: var(--step-0);
    margin-bottom: var(--space-s);
}

main p {
    font-family: var(--font-family-sans-serif);
    color: var(--color-black);
    font-size: var(--step--1);
    margin-bottom: var(--space-xs);
}

main>h2 {
    font-weight: 600;
    font-size: var(--step-0);
}

main>ul {
    list-style-position: outside;
    padding-left: 1rem;
}

table {
    font-family: var(--font-family-sans-serif);
}

/* CSS Grid layout */

body {
    max-width: 1600px;
    margin: 0 auto;
    overflow-x: hidden;
}

body main {
    width: 100%;
}

@media (min-width: 1024px) {
    body {
        display: grid;
        grid-gap: 20px;
        grid-template-columns: repeat(12, 1fr);
        grid-template-areas:
      "header header header header header header header header header header header header"
      "aside  aside  main   main   main   main   main   main   main   main   .      ."
      "footer footer footer footer footer footer footer footer footer footer footer footer";
    }

    body:not(.home) {
        grid-template-rows: 238px auto 294px;
    }
}

body>* {
    padding: 0;
}

body:not(.epc):not(.edsd) aside {
    border-right: 1px solid var(--color-light-grey);
    /*padding-left: 23px;*/
    position: relative;
}

body aside:before {
    content: "";
    width: 15px;
    height: 15px;
    border: 1px solid var(--color-light-grey);
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 0px;
    right: -7.5px;
    background: white;
}

header {
    grid-area: header;
    z-index: 1;
}


aside {
    grid-area: aside;
    /*text-align: center;*/
}

main {
    grid-area: main;
}

body.edsd aside {
    z-index: 1;
}

@media (max-width: 1023px) {
    body>aside {
        display: none;
    }

    body main {
        padding: 0 16px;
    }

    body main aside {
        border-right: unset !important;
        padding-right: unset;
    }

    body main aside ul {
        padding-left: 0;
    }

    body main aside:before {
        content: unset;
    }
}

@media (min-width: 1024px) {
    body main aside {
        display: none;
    }

    body>aside {
        display: block;
    }
}

.spacer {
    margin-bottom: var(--space-xl);
}

/*@media (max-width: 1024px){*/
/*    header,*/
/*    main,*/
/*    aside {*/
/*        padding: 0 16px;*/
/*    }*/
/*}*/

/* Links */
.back-link {
    color: var(--color-blue);
    font-size: var(--step--2);
    text-decoration: none;
    text-align: center;
    display: block;
}

.back-link:before {
    content: "";
    background-image: url("../img/icons/chevron-left.svg");
    background-repeat: no-repeat;
    background-position: center right;
    width: 8px;
    height: 14px;
    display: inline-block;
    margin-right: 10px;
}

.edsd.back-link {
    text-align: left;
    color: var(--color-blue);
    margin-bottom: var(--space-xs);
}

@media (min-width: 768px) {
    .edsd.back-link {
        display: none;
    }
}

/* Top and Main Navigation */
.top-menu {
    margin-right: 25px;
}

.top-menu ul {
    list-style: none;
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
}

.top-menu ul li:nth-child(2) {
    margin: 0 97px 0 61px
}

.top-menu form,
.collapsed-menu form {
    position: relative;
    border-radius: var(--button-border-radius);
    padding: 3px 50px 3px 10px;
    border: 1px solid var(--color-blue);
}


.collapsed-menu form,
.top-menu form {
    width: 200px;
    background-color: var(--color-white);
}

.collapsed-menu form:focus-within,
.top-menu form:focus-within {
    width: 100%;
}

.top-menu input,
.collapsed-menu input {
    background-color: transparent;
    outline: none;
    font-size: var(--step--1);
    color: var(--color-black);
    border: 0;
    width: 100%;
    font-weight: 500;
    padding: 0;
    margin: 0;
}

.top-menu input::placeholder {
    color: var(--color-black);
}

.collapsed-menu input {
    height: unset;
}

.top-menu input::placeholder,
.collapsed-menu input::placeholder {
    font-weight: 500;
}

.top-menu button,
.collapsed-menu button {
    position: absolute;
    right: 12px;
    top: 8px;
    border: 0;
    color: #FFF;
    width: 21px;
    height: 21px;
    outline: 0;
    background-image: url("../img/icons/search.svg");
    background-color: #ffffff;
    padding: 0;
    margin: 0;
    min-width: auto;
}

.collapsed-menu button {
    top: 6px;
}

.top-menu button:hover,
.collapsed-menu button:hover {
    cursor: pointer;
}

.twitter-link {
    font-size: var(--step--2);
    background-image: url("../img/icons/twitter.svg");
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 30px;
    display: inline-block;
    text-decoration: none;
    color: var(--color-black);
}

nav {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

nav .logo-wrapper {
    grid-column: 1 / span 2;
}

nav ul.menu {
    grid-column: 3 / span 12;
    margin-left: 3px;
    align-items: center;
}

.menu>.has-submenu {}

li a+ul {
    display: none;
}

.menu-bottom li a+ul {
    display: inline;
}

.menu-bottom li a+ul li {
    margin-top: 1rem;
}

nav .menu>li.has-submenu:hover>a+ul {
    display: block;
    padding: 1rem;
    box-shadow: 0px 4px 9px 0 rgba(166, 164, 164, 0.5);
    border-radius: 0 1rem 1rem;
    position: absolute;
    top: 3rem;
    background-color: white;
    width: max-content;
    margin-top: 0.5rem;
    z-index: 2;
}

nav .menu>li.has-submenu:hover>a+ul:before {
    top: -10px;
    left: 0.7rem;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: rgba(255, 255, 255, 0);
    border-width: 0 11px 12px 11px;
}

.submenu li,
.submenu li a {
    margin-bottom: 1rem;
}

.submenu li a+ul {
    margin-top: 1rem;
}

nav .menu>li.has-submenu:hover>a+ul>li.has-submenu>ul {
    display: block;
    margin-left: var(--space-xs);
}

nav .menu>li.has-submenu:hover>a+ul>li.has-submenu>ul li::before {
    display: inline-block;
    content: "";
    border-top: 3px solid #E5EAF2;
    width: 9px;
    margin: 0 10px 0 0;
}

nav .menu>li.has-submenu:hover>a+ul>li.has-submenu>ul>li.has-submenu>ul {
    display: block;
    margin-left: var(--space-xs);
}

li:hover a+ul li {
    margin-left: 0;
    padding: 0;
}

li:hover a+ul li {
    margin-left: 0;
}

nav ul {
    list-style: none;
    display: flex;
}

nav ul li {
    margin-right: var(--space-m);
    padding: 1rem 1rem 1rem 0;
    position: relative;
}

nav li a {
    color: var(--color-black);
    text-decoration: none;
    margin-bottom: 10px;
    position: relative;
    font-family: var(--font-family-sans-serif);
}

nav li.active a.active {
    color: var(--color-blue);
}

nav li.active a:after {
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    content: '.';
    color: transparent;
    background: var(--color-blue);
    height: 3px;
}

nav ul li a:not(.active),
nav ul li a:not(.active):after,
nav ul li a:not(.active):before {
    transition: all .5s;
}

nav ul li a:hover {
    color: var(--color-blue);
}

nav ul li a:not(.active):after {
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    margin: auto;
    width: 0%;
    content: '.';
    color: transparent;
    background: var(--color-blue);
    height: 3px;
}

nav ul li a:hover:after {
    width: 100%;
}

nav>ul>li a+div {
    background: white;
    border-radius: 8px;
    display: none;
    font-size: 1rem;
    position: absolute;
    width: auto;
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.09), 0 4px 2px rgba(0, 0, 0, 0.09), 0 4px 2px rgba(0, 0, 0, 0.09), 0 16px 8px rgba(0, 0, 0, 0.09), 0 32px 16px rgba(0, 0, 0, 0.09);
    z-index: 1000001;
    padding: var(--step-0);
}

@media (min-width: 1024px) {
    .logo-wrapper {
        margin-left: 20px;
    }
}

@media (min-width: 1430px) {
    .logo-wrapper {
        margin-left: 45px;
    }
}

.mobile-menu {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--color-blue);
    margin-bottom: var(--space-l);
}

.mobile-menu .logo-wrapper {
    padding: 16px;
}

.mobile-menu .collapsed-menu {
    flex: 100% 1 0;
    display: none;
}

.mobile-menu ul {
    list-style: none;
}

.mobile-menu a {
    text-decoration: none;
}

.mobile-menu ul:nth-child(1) {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    background-color: var(--color-blue);
}

.mobile-menu ul:nth-child(1) li {
    padding-left: 16px;
    border-bottom: 1px solid var(--color-white);
    line-height: 3rem;
}

.mobile-menu ul:nth-child(1) li.active {
    background-color: var(--color-dark-blue);
}

.mobile-menu ul:nth-child(1) a {
    color: var(--color-white);
    padding: 16px 0;
}

.mobile-menu ul:nth-child(2) {
    padding-left: 16px;
    padding-right: 16px;
}

.mobile-menu ul:nth-child(2) li {
    margin-bottom: var(--space-s);
}

.desktop-menu {
    display: none;
}

@media (min-width: 1024px) {
    .mobile-menu {
        display: none;
    }

    .desktop-menu {
        display: block;
    }
}

/* End Navigation */

/* Hamburger Menu */
.hamburger {
    padding: 15px 15px;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;
}

.hamburger:hover {
    opacity: 0.7;
}

.hamburger.is-active:hover {
    opacity: 0.7;
}

.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
    background-color: #000;
}

.hamburger-box {
    width: 40px;
    height: 24px;
    display: inline-block;
    position: relative;
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    width: 40px;
    height: 4px;
    background-color: #000;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: "";
    display: block;
}

.hamburger-inner::before {
    top: -10px;
}

.hamburger-inner::after {
    bottom: -10px;
}

.hamburger--slider .hamburger-inner {
    top: 2px;
}

.hamburger--slider .hamburger-inner::before {
    top: 10px;
    transition-property: transform, opacity;
    transition-timing-function: ease;
    transition-duration: 0.15s;
}

.hamburger--slider .hamburger-inner::after {
    top: 20px;
}

.hamburger--slider.is-active .hamburger-inner {
    transform: translate3d(0, 10px, 0) rotate(45deg);
}

.hamburger--slider.is-active .hamburger-inner::before {
    transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
    opacity: 0;
}

.hamburger--slider.is-active .hamburger-inner::after {
    transform: translate3d(0, -20px, 0) rotate(-90deg);
}


/* Aside Navigation */

aside.menu {
    padding-right: 1rem;
}

aside.menu ul {
    list-style: none;
}

@media (min-width: 1024px) {
    aside.menu ul {
        padding-left: 20px;
    }
}

@media (min-width: 1430px) {
    aside.menu ul {
        padding-left: 45px;
    }
}

aside.menu a {
    font-family: var(--font-family-sans-serif);
}

aside.menu a.active {
    color: var(--color-blue);
}

aside.menu .top-level {
    margin-bottom: 1rem;
    margin-left: 0;
}

aside.menu .top-level a {
    color: var(--color-black);
    font-weight: bold;
    text-decoration: none;
    font-size: var(--step--2);
}

aside.menu .top-level a:hover {
    color: var(--color-blue);
}

aside.menu li {
    margin: 0 0 1rem 1rem;
}

aside.menu li a {
    color: var(--color-black);
    text-decoration: none;
    font-size: var(--step--2);
}


aside.menu li a:hover {
    color: var(--color-blue);
}

/* Footer */
footer {
    display: flex;
    justify-content: center;
    opacity: .95;

    padding-left: 1rem;
    padding-right: 1rem;
    background-color: var(--color-blue);
    padding-top: 21px;
    padding-bottom: 18px;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: 100vw;

}

footer span {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding-left: 35px;
}

@media (min-width: 1024px) {
    footer {
        grid-area: footer;
        padding-left: 45px;
        padding-right: 25px;
        padding-top: 21px;
        padding-bottom: 18px;
    }
}

footer p,
footer a {
    font-family: var(--font-family-sans-serif);
    color: var(--color-white);
    font-size: var(--step--2);
    font-style: normal;
}

footer address {
    margin-bottom: var(--space-m);
}

footer .organization {
    margin-bottom: var(--space-xs);
}

footer .details div {
    margin-bottom: var(--space-2xs);
}

footer .hosted-by {
    display: flex;
}

footer .hosted-by p {
    color: var(--color-light-blue-footer);
}

footer .hosted-by:after {
    content: "";
    background-image: url("../img/icons/logo_nidi.svg");
    background-size: 95px 33px;
    width: 95px;
    height: 33px;
    margin-left: var(--space-2xs);
}

footer .privacy-statement p,
footer .privacy-statement a {
    color: var(--color-light-blue-footer);
}

footer .privacy-statement a:hover {
    color: var(--color-white);
}

@media (min-width: 768px) {
    footer .details {
        display: flex;
    }

    footer .details div {
        margin-right: var(--space-l);
    }

    footer .hosted-by {
        margin-bottom: var(--space-xs);
        display: flex;
        justify-content: end;
        margin-top: auto;
        margin-left: auto;
    }

    footer .privacy-statement {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        min-width: 100%;
    }
}

/* Buttons */

.btn {
    padding: 10px 16px 9px 19px;
    padding-right: 16px;
    border-radius: var(--button-border-radius);
    font-family: var(--font-family-sans-serif);
    text-decoration: none;
}

.btn-full {
    display: block;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    font-family: var(--font-family-sans-serif);
    font-size: var(--step--2);
}

.btn-blue {
    background-color: var(--color-blue);
    color: var(--color-white);
    font-weight: 600;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}

.btn-yellow {
    background-color: var(--color-yellow);
    color: var(--color-black);
    font-weight: 600;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}

.btn-yellow:hover {
    background-color: var(--color-blue);
    color: var(--color-white);
}

.btn-yellow:focus {
    background-color: var(--color-blue);
    color: var(--color-white);
    outline: 2px solid var(--color-light-orange);
}

.btn-white {
    border: 1px solid var(--color-blue);
    color: var(--color-black);
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}

.btn-white:hover {
    border: 1px solid var(--color-blue);
    color: var(--color-black);
    background-color: var(--color-blue);
}

.btn-white:focus {
    background-color: var(--color-blue);
    color: var(--color-white);
    outline: 2px solid var(--color-light-orange);
}

.btn-login {
    font-size: var(--step--1);
    background-image: url("../img/icons/login.svg");
    background-repeat: no-repeat;
    padding-right: 43px;
    background-position: calc(100% - 10px) center;
    text-decoration: none;
}

/* General pages */
.video {
    margin-bottom: var(--space-2xl);
}

figure {
    position: relative;
    margin-bottom: var(--space-xl);
    margin-left: -16px;
    margin-right: -16px;
}

@media (min-width: 1024px) {
    figure {
        margin-left: 0;
        margin-right: 0;
    }
}

figure:not(.carousel-item) figcaption {
    background: var(--color-light-grey);
    color: var(--color-blue);
    font-weight: 600;
    font-style: italic;
    font-size: var(--step--2);
    font-family: var(--font-family-sans-serif);
    padding: 10px;
    display: inline;
    border-radius: 7px;
    position: absolute;
    right: calc(var(--space-xs));
    top: calc(100% - var(--space-xs));
}

.reports-container {
    display: grid;
    margin-top: var(--space-xl);
    grid-template-columns: 1fr;
    grid-gap: 25px;
    margin-bottom: var(--space-l);
}

.report {
    background-color: var(--color-light-grey);
    padding: var(--space-xs);
    padding-top: 0;
    width: 100%;
    min-width: 214px;
}

@media (min-width: 481px) {
    .reports-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .reports-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1440px) {
    .reports-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

.report p {
    margin-bottom: 0;
}

.report .ribbon {
    width: max-content;
    padding: 25px 8px 10px 8px;
    position: relative;
    top: -15px;
    background-color: var(--color-blue);
}

.report .ribbon p {
    font-family: var(--font-family-sans-serif);
    font-weight: 700;
    color: var(--color-white);
}

.report .ribbon:before {
    content: "";
    position: absolute;
    top: 0;
    right: -11px;
    border-left: 6px solid #7F7E7E;
    border-right: 6px solid transparent;
    border-top: 8px solid transparent;
    border-bottom: 8px solid #7F7E7E;
}

.report .ribbon-yellow {
    background-color: var(--color-yellow);
    width: max-content;
}

.report .ribbon-yellow p {
    color: var(--color-black);
}

.report .textual {
    margin-top: -15px;
    margin-bottom: var(--space-2xs);
}

.report .textual h2 {
    font-family: var(--font-family-sans-serif);
    font-size: var(--step--1);
    font-weight: 700;
    color: var(--color-black);
}

.report .textual p {
    font-size: var(--step--2);
}

/* Utils */
.visually-hidden {
    position: absolute;
    width: 1px; /* Setting this to 0 make it invisible for VoiceOver */
    height: 1px; /* Setting this to 0 make it invisible for VoiceOver */
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
}


/* EPC */

.epc {
    grid-template-areas:
    "header header header header header header header header header header header header"
    "aside  aside  main   main   main   main   main   main   main   .      .      ."
    "footer footer footer footer footer footer footer footer footer footer footer footer";
}

@media (min-width: 1024px) {

    .epc main,
    .edsd main {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-column: 1 / span 12;
        grid-gap: 0 20px;
    }
}

.epc main figure,
.edsd main figure {
    z-index: -1;
}

.epc main>*,
.edsd main>* {
    grid-column: 3 / span 8;
}

.epc main figure,
.edsd main figure {
    grid-column: 1 / span 12;
}

.epc .video,
.edsd .video {
    grid-column: 4 / span 6;
    margin-bottom: var(--space-2xl);
}

.epc .video .textual,
.edsd .video .textual {
    margin-top: 10px;
}

.epc .video p,
.edsd .video p {
    font-size: var(--step--2);
    font-weight: 400;
    color: var(--color-dark-grey);
}

.buttons-wrapper {
    margin-bottom: var(--space-2xl);
    margin-top: var(--space-l);
    display: flex;
    flex-wrap: wrap;
}

.buttons-wrapper .btn {
    font-size: var(--step--1);
    font-weight: 600;
    text-decoration: none;
    margin-right: var(--space-s);
    margin-bottom: var(--space-m);
}

.buttons-wrapper .link {
    width: 100%;
}

.buttons-wrapper .link a {
    padding-left: 19px;
    color: var(--color-black);
    font-weight: 600;
    font-size: var(--step--1);
    text-decoration-color: var(--color-blue);
    text-decoration-thickness: 2px;

}

.btn-chevron:after {
    content: "";
    background-image: url("../img/icons/chevron-right.svg");
    background-repeat: no-repeat;
    background-position: center right;
    width: 8px;
    height: 14px;
    display: inline-block;
    margin-left: 10px;
    transition: 0.2s
}

.btn-chevron:hover:after {
    background-image: url("../img/icons/chevron-right-white.svg");
}

.buttons-wrapper .btn-ext-link.btn-white:after {
    color: var(--color-black);
    content: "";
    background-image: url("../img/icons/external-link.svg");
    background-repeat: no-repeat;
    background-position: center right;
    width: 15px;
    height: 15px;
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
    transition: 0.3s
}

.btn-ext-link.btn-white:hover {
    background-color: var(--color-blue);
    color: var(--color-white);
}

.btn-ext-link:after {
    content: "";
    background-image: url("../img/icons/external-link.svg");
    background-repeat: no-repeat;
    background-position: center right;
    width: 15px;
    height: 15px;
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
}

.buttons-wrapper .btn-white:after {
    content: "";
    background-image: url("../img/icons/chevron-right.svg");
    background-repeat: no-repeat;
    background-position: center right;
    width: 8px;
    height: 14px;
    display: inline-block;
    margin-left: 10px;
}

.blue-blocks-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 27px;
    margin-bottom: var(--space-2xl);
}

@media (min-width: 430px) {
    .blue-blocks-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

.blue-blocks-container .block {
    background-color: var(--color-light-grey);
    padding: var(--space-2xs) var(--space-l) var(--space-s) var(--space-xs);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.blue-blocks-container .block h2 {
    font-family: var(--font-family-sans-serif);
    font-weight: 700;
    font-size: var(--step-0);
    color: var(--color-blue);
}

.blue-blocks-container .block p {
    color: var(--color-blue);
}

.blue-blocks-container .block .btn {
    font-size: var(--step--1);
    font-weight: 600;
    width: max-content;
}

.blue-blocks-container .block .textual {
    margin-bottom: var(--space-s);
}

.epc-footer {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 27px;
    margin-bottom: var(--space-xl);
}

@media (min-width: 768px) {
    .epc-footer {
        grid-template-columns: repeat(2, 1fr);
    }
}

.epc-footer h2 {
    color: var(--color-blue);
    font-size: var(--step-0);
    font-weight: 600;
    border-bottom: 1px solid var(--color-light-blue);
    padding-bottom: 10px;
    margin-bottom: var(--space-s);
}

.epc-footer .read-link {
    font-size: var(--step--1);
    color: var(--color-black);
    text-decoration-thickness: 2px;
    text-decoration-color: var(--color-blue);
}

.epc-footer .read-link:after {
    content: "";
    background-image: url("../img/icons/chevron-right.svg");
    background-repeat: no-repeat;
    background-position: center right;
    width: 7px;
    height: 12px;
    display: inline-block;
    margin-left: 5px;
}

@media (max-width: 767px) {
    .epc-footer .logos-wrapper {
        display: flex;
        flex-wrap: wrap;
    }
}

.participants .logos-wrapper img {
    margin-bottom: var(--space-l);
    margin-right: var(--space-l);
    max-width: 230px;
    height: auto;
}

@media (min-width: 1024px) {
    html.lines {
        background-image: url("../img/lines.svg");
        background-repeat: no-repeat;
        background-position: -28px -50px;
        background-size: 100% 200px;
    }

    .epc-landing,
    .epc {
        background-image: url("../img/people-4.png");
        background-repeat: no-repeat;
        background-position: right 100%;
        background-size: 227px 293px;
    }

    .people {
        background-image: url("../img/people.jpg");
        background-repeat: no-repeat;
        background-position: right 100%;
        background-size: 203px 487px;
    }

    .people-2 {
        background-image: url("../img/people-2.jpg");
        background-repeat: no-repeat;
        background-position: right 100%;
    }

    .people-home {
        background-image: url("../img/mensen-2.png");
        background-repeat: no-repeat;
        background-position: right 100%;
    }
}

.epc-landing h2 {
    font-family: var(--font-family-sans-serif);
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--color-blue);
}

.epc-landing .reports-container {
    margin-top: var(--space-l);
}

.epc-landing .report h2 {
    color: var(--color-black);
}

.epc-next {
    padding: var(--space-xs) var(--space-s) var(--space-s) var(--space-s);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-bottom: var(--space-xl);
}

.epc-next .textual {
    margin-bottom: var(--space-s);
}

.epc-next h2 {
    font-size: var(--step-0);
    color: var(--color-blue);
    font-family: var(--font-family-sans-serif);
    font-weight: 700;
    margin-bottom: var(--space-s);
}

.epc-next .btn {
    font-size: var(--step--1);
    font-weight: 700;
}

/* Courses */
.courses-wrapper {
    margin-bottom: var(--space-l);
}

.courses-wrapper summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--space-2xs) var(--space-2xs) var(--space-xs) var(--space-2xs);
    flex-direction: column;
}

.courses-wrapper summary .textual {
    margin-bottom: var(--space-xs);
}

.courses-wrapper summary .textual h2 {
    font-family: var(--font-family-sans-serif);
    font-weight: 700;
    font-size: var(--step--1);
}

.courses-wrapper summary .textual p {
    font-family: var(--font-family-sans-serif);
    font-weight: 400;
    font-size: var(--step--2);
    margin-bottom: 0;
}

.courses-wrapper summary .btn {
    font-family: var(--font-family-sans-serif);
    font-weight: 700;
    font-size: var(--step--1);
    align-self: flex-end;
    max-width: max-content;
    pointer-events: none;
}

@media (min-width: 768px) {
    .courses-wrapper summary {
        flex-direction: row;
    }

    .courses-wrapper summary .btn {
        align-self: center;
    }

    .courses-wrapper summary .textual {
        width: 75%;
        margin-right: var(--space-xs);
        margin-bottom: 0;
    }
}

.courses-wrapper summary .btn:hover {
    cursor: pointer;
}

.courses-wrapper details {
    margin-bottom: 2px;
}

.courses-wrapper .content {
    background: var(--color-white);
    padding: var(--space-s) var(--space-2xs) var(--space-xs) var(--space-xs);
}

.courses-wrapper .content p,
.courses-wrapper .content li,
.courses-wrapper .content a {
    font-size: var(--step--2);
}

.courses-wrapper .content li {
    font-family: var(--font-family-sans-serif);
}

.courses-wrapper .content li ol li {
    list-style-type: disc;
}

.courses-wrapper .content li ol li::marker {
    color: var(--color-blue);
}

.courses-wrapper .content li::marker {
    font-weight: 700;
}

details.mathematical-demography {
    background-color: var(--color-mathematical-demography-50);
    border-left: 3px solid var(--color-mathematical-demography);
}

details.statistical-demography {
    background-color: var(--color-statistical-demography-50);
    border-left: 3px solid var(--color-statistical-demography);
}

details.demographic-theories {
    background-color: var(--color-demographic-theories-50);
    border-left: 3px solid var(--color-demographic-theories);
}

details.population-data-science {
    background-color: var(--color-population-data-science-50);
    border-left: 3px solid var(--color-population-data-science);
}

details.current-population-issues {
    background-color: var(--color-current-population-issues-50);
    border-left: 3px solid var(--color-current-population-issues);
}

details.modelling-simulation-forecasting {
    background-color: var(--color-modelling-simulation-forecasting-50);
    border-left: 3px solid var(--color-modelling-simulation-forecasting);
}

details.thesis-course {
    background-color: var(--color-thesis-course-50);
    border-left: 3px solid var(--color-thesis-course);
}

/* Schedule */
.filter {
    margin-bottom: var(--space-m);

}

.filter p {
    display: inline;
    font-size: var(--step--2);
}

.filter .links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}

.filter .links>* {
    margin-bottom: var(--space-2xs);
    margin-right: var(--space-2xs);
}

.filter .links a {
    text-decoration: none;
    border-radius: 14px;
    padding: 5px 10px;
    color: var(--color-black);
    text-transform: lowercase;
}

.filter .links .active {
    font-weight: 700;
}

.filter .links a.all {
    border: 1px solid var(--color-light-grey);
}

.filter .links a.all:hover,
.filter .links a.all.active {
    background: var(--color-light-grey);
}

.links a.mathematical-demography {
    border: 1px solid var(--color-mathematical-demography);
}

.links a.mathematical-demography:hover,
.links a.mathematical-demography.active {
    color: var(--color-black);
    background-color: var(--color-mathematical-demography-50);
}

.links a.statistical-demography {
    border: 1px solid var(--color-statistical-demography);
}

.links a.statistical-demography:hover,
.links a.statistical-demography.active {
    color: var(--color-black);
    background-color: var(--color-statistical-demography-50);
}

.links a.demographic-theories {
    border: 1px solid var(--color-demographic-theories);
}

.links a.demographic-theories:hover,
.links a.demographic-theories.active {
    color: var(--color-black);
    background-color: var(--color-demographic-theories-50);
}

.links a.population-data-science {
    border: 1px solid var(--color-population-data-science);
}

.links a.population-data-science:hover,
.links a.population-data-science.active {
    color: var(--color-black);
    background-color: var(--color-population-data-science-50);
}

.links a.current-population-issues {
    border: 1px solid var(--color-current-population-issues);
}

.links a.current-population-issues:hover,
.links a.current-population-issues.active {
    color: var(--color-black);
    background-color: var(--color-current-population-issues-50);
}

.links a.modelling-simulation-forecasting {
    border: 1px solid var(--color-modelling-simulation-forecasting);
}

.links a.modelling-simulation-forecasting:hover,
.links a.modelling-simulation-forecasting.active {
    color: var(--color-black);
    background-color: var(--color-modelling-simulation-forecasting-50);
}

.links a.thesis-course {
    border: 1px solid var(--color-thesis-course);
}

.links a.thesis-course:hover,
.links a.thesis-course.active {
    color: var(--color-black);
    background-color: var(--color-thesis-course-50);
}

table {
    border-collapse: collapse;
}

table td,
table th {
    padding: 8px 10px;
    text-align: left;
}

.schedule-table {
    border-collapse: collapse;
    margin-bottom: 10px;
    width: 100%;
}

.schedule-table-wrapper {
    overflow-x: auto;
    margin-bottom: var(--space-l);
}

.schedule-table thead {
    border-left: 3px solid var(--color-light-grey);
}

.schedule-table td,
.schedule-table th {
    padding: 15px 10px;
}

.schedule-table th {
    color: var(--color-blue);
}

.schedule-table tr.mathematical-demography {
    border-left: 3px solid var(--color-mathematical-demography);
    border-bottom: 1px solid var(--color-mathematical-demography);
}

.schedule-table tr.mathematical-demography:hover {
    background-color: var(--color-mathematical-demography-50);
}

.schedule-table tr.statistical-demography:hover {
    background-color: var(--color-statistical-demography-50);
}

.schedule-table tr.statistical-demography {
    border-left: 3px solid var(--color-statistical-demography);
    border-bottom: 1px solid var(--color-statistical-demography);
}

.schedule-table tr.demographic-theories {
    border-left: 3px solid var(--color-demographic-theories);
    border-bottom: 1px solid var(--color-demographic-theories);
}

.schedule-table tr.demographic-theories:hover {
    background-color: var(--color-demographic-theories-50);
}

.schedule-table tr.population-data-science {
    border-left: 3px solid var(--color-population-data-science);
    border-bottom: 1px solid var(--color-population-data-science);
}

.schedule-table tr.population-data-science:hover {
    background-color: var(--color-population-data-science-50);
}

.schedule-table tr.current-population-issues {
    border-left: 3px solid var(--color-current-population-issues);
    border-bottom: 1px solid var(--color-current-population-issues);
}

.schedule-table tr.current-population-issues:hover {
    background-color: var(--color-current-population-issues-50);
}

.schedule-table tr.modelling-simulation-forecasting {
    border-left: 3px solid var(--color-modelling-simulation-forecasting);
    border-bottom: 1px solid var(--color-modelling-simulation-forecasting);
}

.schedule-table tr.modelling-simulation-forecasting:hover {
    background-color: var(--color-modelling-simulation-forecasting-50);
}

.schedule-table tr.thesis-course {
    border-left: 3px solid var(--color-thesis-course);
    border-bottom: 1px solid var(--color-thesis-course);
}

.schedule-table tr.thesis-course:hover {
    background-color: var(--color-thesis-course-50);
}

.schedule-table tr td {
    font-size: var(--step--2);
}

.schedule-table tr td:first-child {
    font-size: var(--step--1);
    font-weight: 400;
}

.schedule-table thead {
    background-color: var(--color-light-grey);
}

/* EDSD */
@media (min-width: 320px) {
    .quote-container {
        display: flex;
        justify-content: space-around;
        margin-bottom: var(--space-xl);
        flex-direction: column;
    }

    .quote-container .quote {
        display: flex;
        flex-direction: column;
        max-width: 100%;
        padding: 0 25px;
        justify-content: space-between;
        position: relative;
    }
}

@media (min-width: 768px) {
    .quote-container {
        flex-direction: row;
    }

    .quote-container .quote {
        max-width: 50%;
    }
}

.quote-container .quote:before {
    content: "";
    background-image: url("../img/icons/quotes.svg");
    background-repeat: no-repeat;
    background-size: 35px 35px;
    width: 35px;
    height: 35px;
    position: absolute;
    top: -15px;
    left: 0;

}

.quote .textual p {
    font-size: var(--step--1);
    color: rgb(102, 102, 102);
    font-weight: 400;
    margin-bottom: 0;
}

.quote .visual {
    display: flex;
    align-items: center;
}

.quote .visual p {
    margin-bottom: 0;
    font-weight: 400;
    font-style: italic;
}

.quote .visual img {
    width: 65px;
    margin-right: var(--space-s);
    border-radius: 50%;
    height: auto;
}

.edsd-footer {
    margin-bottom: var(--space-3xl);
}

.edsd-footer h2 {
    color: var(--color-blue);
    font-size: var(--step-0);
    font-weight: 600;
    border-bottom: 1px solid var(--color-light-blue);
    padding-bottom: 10px;
    margin-bottom: var(--space-s);
}

.edsd-footer .logos-wrapper {
    display: flex;
    flex-direction: column;
}

.edsd-footer .logos-wrapper .logo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: max-content;
    margin-bottom: var(--space-s);
}

@media (max-width: 1023px) {
    .edsd-footer .logos-wrapper .logo:first-child p {
        order: 0;
    }

    .edsd-footer .logos-wrapper .logo:first-child img {
        order: 1;
    }

    .edsd-footer .logos-wrapper .logo:nth-child(2) p {
        order: 0;
    }

    .edsd-footer .logos-wrapper .logo:nth-child(2) img {
        order: 1;
    }
}

.edsd-footer .logos-wrapper .logo p {
    font-weight: 400;
    font-size: var(--step--2);
    color: var(--color-dark-grey);
}

.edsd-footer .logos-wrapper img {
    margin-bottom: var(--space-2xs);
}

@media (min-width: 1024px) {
    .edsd-footer .logos-wrapper {
        flex-direction: row;
    }

    .edsd-footer .logos-wrapper .logo:first-child img {
        padding-right: 50px;
        border-right: 1px solid var(--color-light-blue);
        margin-right: 50px;
    }
}

.edsd-footer .logos-wrapper .logo:nth-child(1n+2) img {
    margin-right: 50px;
}

/* Homepage */
.home {
    grid-template-areas:
    "header header header header header header header header header header header header"
    "main  main  main   main   main   main   main   main   main   main   main   main"
    "footer footer footer footer footer footer footer footer footer footer footer footer";
}

.home main>* {
    grid-column: 3 / span 9;
}

.home .grid .left {
    grid-column: 1 /span 1;
    margin-bottom: var(--space-l);
}

.home .grid .right {
    grid-column: 2 /span 1;
}

.home .news-container,
.home .groups-container,
.home .awards-container,
.generic .news-container {
    position: relative;
}

/*
.home .news-container {
  width: 60ch;
}
*/

.home .news-container:before {
    content: "";
    background-image: url("../img/icons/icon-news.svg");
    background-repeat: no-repeat;
    width: 36px;
    height: 36px;
    display: inline-block;
    position: absolute;
    background-size: contain;
}

.home .news-container img,
.generic .news-container img {
    margin-bottom: var(--space-xs);
}

.home .news-container>a,
.home .groups-container>a,
.home .awards-container>a,
.generic .news-container .news-item>a {
    color: var(--color-blue);
    font-size: var(--step--2);
    display: block;
    text-align: left;
}

.home .news-container>a:after,
.home .groups-container>a:after,
.home .awards-container>a:after,
.generic .news-container .news-item>a:after {
    content: "";
    background-image: url("../img/icons/chevron-right-blue.svg");
    background-repeat: no-repeat;
    background-position: center right;
    width: 8px;
    height: 10px;
    display: inline-block;
    margin-left: 5px;
}

.home .news-container h2 a,
.generic .news-container h2 {
    color: var(--color-blue);
    font-family: var(--font-family-serif);
    font-size: var(--step--1);
    margin-bottom: var(--space-2xs);
    text-decoration: none;
}

.home .news-container h2 a:hover,
.generic .news-container h2 a:hover {
    color: var(--color-light-blue);
}

.home .news-container>h2,
.home .groups-container>h2,
.home .awards-container>h2,
.generic .news-container>h2 {
    color: var(--color-blue);
    font-family: var(--font-family-serif);
    font-size: var(--step-0);
    font-weight: 500;
    margin-bottom: var(--space-xs);
    margin-left: 46px;
}

.home .news-container .news-item,
.generic .news-container .news-item {
    margin-bottom: var(--space-m);
}

.home .news-container .news-item p,
.generic .news-container .news-item p {
    margin-bottom: 0;
}

.home .news-container .news-item .date,
.generic .news-container .news-item .date {
    margin-bottom: 0;
    font-size: var(--step--2);
    color: var(--color-dark-grey);
    font-weight: 400;
}

.home .groups-container {
    margin-bottom: var(--space-l);
}

.home .groups-container:before {
    content: "";
    background-image: url("../img/icons/icon-groups.svg");
    background-repeat: no-repeat;
    background-position: center right;
    width: 36px;
    height: 36px;
    display: inline-block;
    position: absolute;
    background-size: contain;
}

.home .awards-container:before {
    content: "";
    background-image: url("../img/icons/icon-awards.svg");
    background-repeat: no-repeat;
    background-position: center right;
    width: 36px;
    height: 36px;
    display: inline-block;
    position: absolute;
    background-size: contain;
}

.home .reports-container {
    grid-template-columns: repeat(1, 1fr);
    display: block;
}

.home .reports-container .textual {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.home .reports-container .textual a {
    flex: 25%;
    margin-top: var(--space-m);
}

.home .reports-container .ribbon {
    margin-bottom: var(--space-m);
}

.home .reports-container .btn-chevron:after {
    width: 6px;
    height: 10px;
}

.home .epc-banner-container {
    /*background: rgb(249,252,255);
      mix-blend-mode: multiply;*/
    opacity: .95;
    background-color: var(--color-blue);
    padding: var(--space-m);
    margin-left: -16px;
    margin-right: -16px;
}

.home .epc-banner-container .epc-banner-wrapper {
    grid-column: 3 / span 8;
}


.home .epc-banner-container .epc-banner-wrapper h2 {
    font-size: var(--step-0);
    color: var(--color-white);
    margin-bottom: var(--space-xs);
    font-family: var(--font-family-sans-serif);
}

.home .epc-banner-container .epc-banner-wrapper p {
    font-family: var(--font-family-sans-serif);
    font-size: var(--step--1);
    color: var(--color-white);
    margin-bottom: var(--space-m);
}

.home header {
    background-image: url("../img/mensen.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: var(--space-l);
}

.home-header {
    padding-left: 16px;
    padding-right: 16px;
}

.home-header h1,
.home-header .intro {
    grid-column: 3 / span 8;
}

.home-header h1 {
    text-transform: uppercase;
}

@media (min-width: 1024px) {
    .home main {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 20px;
    }

    .home-header {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
    }

    .home .grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 20px;
    }

    .home .news-container:before {
        background-position: center right;
        width: 66px;
        height: 66px;
        left: -86px;
    }

    .home .reports-container .textual {
        flex-direction: row;
    }

    .home .reports-container .textual a {
        flex: 45%;
        margin-left: 25px;
        max-width: 195px;
    }

    .home .epc-banner-container {
        display: grid;
        grid-column: 1 / span 12;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 20px;
        width: 96%;
        justify-self: center;
        margin-block-start: 4rem;
        margin-block-end: -20px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        -ms-border-radius: 20px;
        -o-border-radius: 20px;
        border-radius: 20px;

        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11),
        0 2px 2px rgba(0, 0, 0, 0.11),
        0 4px 4px rgba(0, 0, 0, 0.11),
        0 6px 8px rgba(0, 0, 0, 0.11),
        0 8px 16px rgba(0, 0, 0, 0.11);

    }

    .home .groups-container,
    .home .awards-container {
        padding-left: 66px;
    }

    .home .news-container .news-item {
        margin-right: var(--space-s);
    }

    .home .news-container>h2,
    .home .groups-container>h2,
    .home .awards-container>h2 {
        margin-left: 0;
    }

    .home .awards-container:before {
        background-position: center right;
        width: 66px;
        height: 66px;
        left: -20px;
    }

    .home .groups-container::before {
        background-position: center right;
        width: 66px;
        height: 66px;
        left: -20px;
    }
}

/* Slick Image carousel */
.carousel-wrapper {
    margin-bottom: var(--space-2xl);
}

.image-carousel figure {
    margin-bottom: var(--space-xs);
}

.image-carousel figcaption {
    font-family: var(--font-family-sans-serif);
    font-size: var(--step--2);
    color: var(--color-dark-grey);
    font-weight: 400;
}

.slick-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}

.slick-dots li:hover button:before {
    color: var(--color-yellow);
}

.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}

.slick-dots li button:before {
    content: '•';
    font-size: 50px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    text-align: center;
    color: var(--color-blue);
    overflow: hidden;
}

.slide-m-prev {
    background-image: url("../img/icons/chevron-left-blue.svg");
    background-repeat: no-repeat;
    background-size: 10px 20px;
    width: 10px;
    height: 20px;
    cursor: pointer;
}

.slide-m-prev:hover {
    background-image: url("../img/icons/chevron-left-yellow.svg");
}

.slide-m-next {
    background-image: url("../img/icons/chevron-right-blue.svg");
    background-repeat: no-repeat;
    background-size: 10px 20px;
    width: 10px;
    height: 20px;
    cursor: pointer;
}

.slide-m-next:hover {
    background-image: url("../img/icons/chevron-right-yellow.svg");
}

.slider-controls {
    display: flex;
    justify-content: center;
}

.slider-controls .slick-dots {
    display: flex;
    height: 20px;
    align-items: center;
}

.slick-dots .slick-active button:before {
    color: var(--color-yellow);
}

.downloads-container {
    margin-bottom: var(--space-2xl);
    background-color: var(--color-light-grey);
    padding: var(--space-s) var(--space-xl) var(--space-s) var(--space-xl);
}

.download-head-icon {
    position: relative;
    margin-bottom: var(--space-m);
}

.download-head-icon:before {
    content: "";
    background-image: url("../img/icons/download-light.svg");
    background-repeat: no-repeat;
    width: 38px;
    height: 38px;
    background-size: contain;
    display: block;
    position: absolute;
    left: -46px;
}

.download-item .download-link {
    margin-bottom: var(--space-xs);
    display: flex;
    border-bottom: 1px solid var(--color-yellow);
    align-items: center;
    text-decoration: none;
    font-size: var(--step--1);
    font-weight: 400;
    font-family: var(--font-family-sans-serif);
    color: var(--color-black);
    position: relative;
    width: max-content;
}

.download-item .download-link:before {
    content: "";
    background-image: url("../img/icons/download.svg");
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
    display: inline-block;
    background-color: var(--color-yellow);
    padding: var(--space-s);
    background-position: center;
    margin-right: var(--space-2xs);
}

.download-item .download-link:hover {
    border-bottom: 1px solid var(--color-blue);
}

.download-item .download-link:hover:before {
    background-image: url("../img/icons/download-white.svg");
    background-color: var(--color-blue);
}

.memoriam-container {
    margin-bottom: var(--space-l);
}

.memoriam-container>h2 {
    font-family: var(--font-family-serif);
    color: var(--color-dark-grey);
    font-size: var(--step-1);
    font-weight: 400;
}

.memoriam-wrapper {
    border-left: 3px solid var(--color-black);
    background-color: var(--color-light-grey-2);
    padding: var(--space-m);
    display: flex;
    justify-content: space-between;
}

.memoriam-wrapper .textual {
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.memoriam-wrapper .visual {
    width: 23%;
}

.memoriam-wrapper .textual h2 {
    font-family: var(--font-family-sans-serif);
    font-weight: 700;
    font-size: var(--step-0);
    color: var(--color-dark-grey);
}

.memoriam-wrapper .textual .date {
    font-family: var(--font-family-sans-serif);
    font-weight: 700;
    font-size: var(--step--1);
    color: var(--color-dark-grey);
}

.memoriam-wrapper .textual p {

    color: var(--color-dark-grey);
}

.memoriam-wrapper .textual .more-link {
    width: max-content;
    color: var(--color-dark-grey);
    text-decoration: none;
    border-bottom: 2px solid var(--color-black);
    font-size: var(--step--1);
    font-family: var(--font-family-sans-serif);
}

/* Listings */
body.listing .results-message>h2 {
    color: var(--color-black);
}

body.listing .results-message {
    margin-bottom: var(--space-l);
}

/* List of images with name and affiliation text */
.images-heading {
    margin-bottom: var(--space-s);
}

.round-image {
    margin-bottom: var(--space-l);
}

@media (min-width: 1024px) {
    .round-images-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .round-image {
        width: 47%;
    }
}

.round-image h2 {
    font-weight: 600;
    font-size: var(--step-0);
    margin-bottom: var(--space-s);
}

.round-image .visual img {
    border-radius: 50%;
    width: 100px;
    height: 100px;
}

.round-image .textual .name {
    color: var(--color-blue);
    font-size: var(--step--1);
    text-transform: uppercase;
    font-weight: 400;
    margin-bottom: 0;
}

.round-image .textual .affiliation {
    color: var(--color-dark-grey);
    font-size: var(--step--2);
    font-style: italic;
    font-weight: 400;
    margin-bottom: 0;
}

.round-image .visual {
    margin-right: var(--space-xs);
    min-width: 100px;
}

.round-image .body {
    display: flex;
    align-items: center;
}


/* Extra styling for Forms */


/* Form elements */
div.boltforms div {
    margin-bottom: 1rem;
}

#epc-form_phd, #epc-form_event {
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}

fieldset{
    border: 1px solid var(--text);
    border-radius: var(--border-radius);
}

label {
    font-family: var(--font-family-sans-serif);
    color: var(--color-black);
    font-size: var(--step--1);
    min-width: 240px;
    display: inline-block;
}

.boltforms-feedback {
    font-family: var(--font-family-sans-serif);
    color: var(--color-black);
    font-size: var(--step--2);
}

#epc-form_phd label, #epc-form_event label {
    min-width: 120px;
    margin-right: 3rem;
}

select {
    -webkit-appearance: none;
    -moz-appearance : none;
    appearance : none;
    background: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M00h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: 50%;
}

button,
input,
select,
textarea,
a[role="button"] {
    font-family: var(--font-family-sans-serif);
    color: var(--color-black);
    font-size: var(--step--1);
    margin-bottom: var(--space-xs);
    line-height: 1.5;
    padding: 0.33em;
    border: 1px solid #999;
    border-radius: 3px;
    box-sizing: border-box;
    min-width: 300px;
}
input[type="checkbox"],
input[type="radio"]{
    border:none;
    border:0;
    min-width: auto;
}

button,
input[type="button"],
input[type="submit"],
a[role="button"] {
    padding: 0.5rem 2rem;
    cursor: pointer;
    background-color: var(--color-yellow);
    color: var(--color-black);
    text-decoration: none;
    font-weight: bold;
    border-radius: var(--button-border-radius);
}
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
a[role="button"]:hover {
    background-color: var(--color-blue);
    color: var(--color-white);
}
a[role="button"]{
    padding:0.5em 0.66em;
}
button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
a[role="button"]:disabled {
    background-color: var(--color-light-blue-input);
    color: var(--text-light);
    cursor: not-allowed;
}