.barlow-thin {
  font-family: "Barlow", serif;
  font-weight: 100;
  font-style: normal;
}

.barlow-extralight {
  font-family: "Barlow", serif;
  font-weight: 200;
  font-style: normal;
}

.barlow-light {
  font-family: "Barlow", serif;
  font-weight: 300;
  font-style: normal;
}

.barlow-regular {
  font-family: "Barlow", serif;
  font-weight: 400;
  font-style: normal;
}

.barlow-medium {
  font-family: "Barlow", serif;
  font-weight: 500;
  font-style: normal;
}

.barlow-semibold {
  font-family: "Barlow", serif;
  font-weight: 600;
  font-style: normal;
}

.barlow-bold {
  font-family: "Barlow", serif;
  font-weight: 700;
  font-style: normal;
}

.barlow-extrabold {
  font-family: "Barlow", serif;
  font-weight: 800;
  font-style: normal;
}

.barlow-black {
  font-family: "Barlow", serif;
  font-weight: 900;
  font-style: normal;
}

body {
line-height: 1.75em;
color: #444859;
font-family: "Barlow", serif;
font-weight: 400;
font-style: normal; }

h2 {
text-transform: uppercase;
font-weight: 700;
color: #1D3380; }

h3 {
font-size: 1.2em; }

/* menu */
.navbar {
position: sticky;
top: 0;
backdrop-filter: blur(10px);
background-color: rgba(255,255,255,0.9);
z-index: 500;
box-shadow: 5px 5px 5px #555; }


#infobox {
color: white;
background: url('../img/infobox-bg.png') no-repeat 50% 50% / cover;
background-size: cover; }

#infobox span {
font-size: 1.8em; }

#infobox h2 {
color: white; }

#infobox p {
font-size: 1.2em; }

#footer {
color: white;
background: url('../img/footer-bg.png') no-repeat 50% 50% / cover;
background-size: cover; }

.footer-contact {
line-height: 1em;
font-weight: 600;
/* color: #00A0E3; */ }

.footer-contact a {
color: #fff; }

.footer-link {
color: white;
text-decoration: none;
background: url('../img/footer-arrow.png') no-repeat 0% 50%;
padding-left: 15px; }

.footer-link:hover {
color: #00A0E3; }

#copyright {
color: #3f3f3f; }

.color-line {
display: inherit;
width: 100%;
height: 2px; }

.button {
color: white;
border-radius: 40px;
padding: 1em 2em;
/* font-size: 1.1em; */
font-weight: bold;
display: inline-block;
text-transform: uppercase;
text-decoration: none; }

.button-dark {
background-color: #1D3380; }

.button-blue {
background-color: #0069c3; }

/* graphic main page */
#graphic {
color: white;
background-image: url('../img/graphic-bg.png');
background-repeat: no-repeat;
background-position: 50% 0% ;
background-size: 100% 360px; }

.tt {
margin-top: -40px; }

#graphic h1 {
font-weight: bold;
font-family: "Barlow";
text-transform: uppercase;
color: #00A0E3; }

#bullets {
background-color: white;
margin-top: -80px;
padding-bottom: 50px; }

#bullets a {
text-decoration: none; }

.bullet {
color: white;
border-radius: 8px; }

.bullet p {
font-family: "Barlow";
font-weight: 600;
font-size: 1.4em; }

.bullet b {
margin-left: 15px;
width: 17px;
height: 17px;
line-height: 13px;
text-align: center;
color: white;
display: inline-block;
border-radius: 50%;
font-weight: normal;
background-color: rgba(0,0,0,0.2);
font-size: 1.2em;
padding: 0;
box-sizing: border-box; }

.bullet .link {
color: white;
text-decoration: none; }

.bullet-1 {
background-color: #c28903; }

.bullet-2 {
background-color: #599e2c; }

.bullet-3 {
background-color: #a23e7d; }

.graphic-link {
color: #1d3380;
display: inline-block;
padding-left: 25px;
padding-right: 25px;
height: 3em;
line-height: 3em;
border-radius: 24px;
text-decoration: none;
background-color: white; }

/* HERO */
#hero {
color: #00a0e3;
background: url('../img/hero-bg.png') no-repeat 50% 50% / cover;
background-size: cover; }

#hero b {
color: white; }

#hero h1 {
font-weight: 700;
text-transform: uppercase;
color: #00A0E3; }

#hero a {
text-decoration: none; 
color: white; }

#hero span {
color: #aeb6d1; }

.content a {
text-decoration: none; }

.content a:hover {
text-decoration: underline; }

/* second menu */
.nav-secondary {
display: flex;
padding-bottom: 5px;
border-bottom: 1px solid #E8EBF2; }

.nav-secondary a {
text-decoration: none;
position: relative; }

.nav-secondary a.nav-active {
color: #444859; }

.nav-secondary a::after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 1px;
background-color: #E8EBF2; }

.nav-secondary a.nav-active::after {
height: 2px;
background-color: #00A0E3; }

/* ARTICLES */
#articles-archive {
display: none; }

.article {
border: 1px solid #e6ebf1; }

.article-important {
background-color: #efefef; }

.article-date {
font-weight: 600;
font-size: 0.8em; }

.article p {
color: #444859; }

.article-name {
display: block;
height: 3em;
color: #4a37a0;
font-weight: bold;
text-decoration: none;
font-size: 1.2em; }

.article-name:hover {
text-decoration: underline ; }

.article-img {
max-width: 100%;
height: 200px; }

.article-img img {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
max-width: 100%;
max-height: 100%;
min-width: 100%;
min-height: 100%;
object-fit: cover;
object-position: center top; }

.pin {
font-size: 0.8em;
font-weight: 600;
padding: 5px; }

.pin-green {
background-color: rgba(140,198,63,0.1);
color: #6ABA34; }

.pin-yellow {
background-color: rgba(254,188,46,0.1);
color: #FBB517; }

.pin-blue {
background-color: rgba(0,173,239,0.1);
color: #00A0E3; }

.pin-purple {
background-color: rgba(165,70,134,0.1);
color: #A33E7D; }

/* news */
.news,
.news-detail {
border-radius: 8px;
background-color: #efefef; }

.news p {
margin: 10px 0;
min-height: 9em; }

.news big,
.news-detail big  {
font-weight: bold; }

.news a {
font-weight: bold;
color: #333;
text-decoration: none; }

.news b {
margin-left: 10px;
width: 17px;
height: 17px;
line-height: 13px;
text-align: center;
color: white;
display: inline-block;
border-radius: 50%;
font-weight: normal;
background-color: rgba(0,0,0,0.6);
font-size: 1.2em;
padding: 0;
box-sizing: border-box; }

/* GALLERY */
.gallery {
border: 1px solid #e6ebf1; }

.gallery-date {
font-weight: 600;
font-size: 0.8em; }

.gallery p {
color: #444859; }

.gallery-name {
display: block;
height: 4em;
font-size: 1.2em; }

.gallery-img {
max-width: 100%;
height: 200px; }

.gallery-img img {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
max-width: 100%;
max-height: 100%;
min-width: 100%;
min-height: 100%;
object-fit: cover;
object-position: center; }

.photos {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
gap: 10px; }

.photo {
border-radius: 8px;
overflow: hidden;
box-sizing: border-box;
flex-grow: 1;
transition-duration: 0.5s;
aspect-ratio: 1/1; }

.photo:hover {
filter: brightness(1.2); }

.photo img {
max-width: 100%;
max-height: 100%;
min-width: 100%;
min-height: 100%;
object-position: center;
object-fit: cover; }

/* tabs */
.tab-switch {
top: -4px;
padding-bottom: 8px;
padding-left: 30px;
padding-right: 30px;
position: relative;
text-decoration: none;
border-bottom: 1px solid #e8ebf2; }

.tab-switch-active {
border-bottom: 2px solid #00a0e3; }

/* FAQ */
.question {
color: #444859;
font-weight: 600; }

.accordion-button:not(.collapsed) {
border: none;
background-color: white; }

accordion-header:focus {
  outline: 0 !important;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
}

/* common */
.bg-grey {
background-color: #efefef; }

.my-table th {
background-color: #1d3380;
color: white;
font-weight: normal;
text-decoration: none; }

.my-table tr th:first-child {
border-top-left-radius: 8px; }

.my-table tr th:last-child {
border-top-right-radius: 8px; }

.my-table tr td {
border-bottom: 1px solid #E8EBF2; }

.my-table a {
color: #1d3380; }

.studium-table td {
background-color: #efefef;
}

.link-icon {
font-size: 1.1em;
font-weight: 600;
color: #1d3380;
background: url('../img/link-icon.png') no-repeat 100% 50%;
padding-right: 30px; }

.map {
width: 100%;
aspect-ratio: 1/1; }

hr {
border-top: 1px solid #e6ebf1; }

table:not([class]) { /* every section without class - but won't select Section C */
width: 100%;
border-collapse: collapse; }

table:not([class]) td {
border: 1px solid white;
padding: 5px;
background-color: #efefef; }

table:not([class]) th {
border: 1px solid white;
padding: 5px;
background-color: #dddddd; }

.button-link {
text-decoration: none;
padding: 6px 12px;
margin-right: 10px;
background-color: #1d3380;
color: #fff; }

.virtual {
width: 100%;
aspect-ratio: 2/1; }

.no-bullets {
list-style-type: none;
}

td a[target="_blank"] {
padding: 0 20px 0 0;
background-position: 100% 50%;
background-repeat: no-repeat;
background-image: url("../img/new-window.svg");
background-size: 1em 1em; }


@media (min-width:992px) {
    .article p {
    min-height: 9em; }

    .virtual {
    max-width: 70%; }
}