/*! destyle.css v4.0.0 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after {
  box-sizing: border-box;
}

/* Document */
/* ============================================ */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}

/* Sections */
/* ============================================ */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* Headings */
/* ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Lists (enumeration) */
/* ============================================ */
ul,
ol {
  margin: 0;
  padding: 0;
}

/* Lists (definition) */
/* ============================================ */
dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

/* Grouping content */
/* ============================================ */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

address {
  font-style: inherit;
}

/* Text-level semantics */
/* ============================================ */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Replaced content */
/* ============================================ */
/**
 * Prevent vertical alignment issues.
 */
/*svg,
img,
embed,
object,
iframe {
  vertical-align: bottom;
}*/
/* Forms */
/* ============================================ */
/**
 * Reset form fields to make them styleable.
 * 1. Make form elements stylable across systems iOS especially.
 * 2. Inherit text-transform from parent.
 */
button,
input,
optgroup,
select,
textarea {
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit; /* 2 */
}

/**
 * Correct cursors for clickable elements.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
}

button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled {
  cursor: default;
}

/**
 * Improve outlines for Firefox and unify style with input elements & buttons.
 */
:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

/**
 * Remove padding
 */
option {
  padding: 0;
}

/**
 * Reset to invisible
 */
fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * Correct the outline style in Safari.
 */
[type=search] {
  outline-offset: -2px; /* 1 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Fix font inheritance.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Fix appearance for Firefox
 */
[type=number] {
  -moz-appearance: textfield;
}

/**
 * Clickable labels
 */
label[for] {
  cursor: pointer;
}

/* Interactive */
/* ============================================ */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/*
 * Remove outline for editable content.
 */
[contenteditable]:focus {
  outline: auto;
}

/* Tables */
/* ============================================ */
/**
1. Correct table border color inheritance in all Chrome and Safari.
*/
table {
  border-color: inherit; /* 1 */
  border-collapse: collapse;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}

/* 
Root variables are used to define the content width, 
section padding, primary color, text color, odd section color, and the hue, saturation, and lightness of the primary color. 
The primary color is a mustard yellow, and the text color is black. 
The odd section color is a light gray. 
The hue, saturation, and lightness of the primary color are used to calculate the color of the carousel handles. 
*/
:root {
  --content-width: 1400px;
  --section-padding: 5rem 0;
  --primary-color: var(--background-hex);
  --text-color: var(--text-hex);
  --odd-section-color: #f3f3f3;
}

/* 1rem = 10px */
html {
  font-size: 62.5%;
}

/*
 * The main content area has a maximum width of 1400 pixels,
 * is positioned relative to its parent element,
 * has hidden overflow, and
 * is horizontally centered using auto margins.
 */
/*
General section styles (LAYOUT)
Padding is set to the root --section-padding variable, and the display is set to flex.
The align-items and justify-content properties are set to center to center the content vertically and horizontally.
The position is set to relative, and the scroll-margin-top property is set to 8rem to create space between the sections when using the scroll-snap-type property.
*/
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body img {
  height: auto;
  max-width: 100%;
}

section {
  padding: var(--section-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  scroll-margin-top: 8rem;
}

/*Odd sections have a light gray background color*/
section:nth-child(odd) {
  background: var(--odd-section-color);
}

/*Section content (like cards, teasers, text)*/
.content {
  display: flex;
  flex-flow: row wrap;
  gap: var(--flex-gap);
  max-width: var(--content-width);
  width: 80%;
}

.cards-section .content {
  width: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
}

.container > :nth-child(2) {
  margin-top: 80px;
}

/* Specific for the Search page - try to standardise */
.content-wrapper {
  box-sizing: border-box;
  margin: auto;
  max-width: var(--content-width);
  width: 80%;
}

/*Section content heading*/
.heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: var(--content-width);
  margin-bottom: 2rem;
  width: 80%;
}

.gallery-section .heading {
  margin-bottom: 2.5rem;
}

.cards-section .content h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.teaser-section .content {
  align-items: center;
}

/* Reverse the order of items (image on the left, image on the right, etc.) */
.content.reverse {
  flex-direction: row-reverse;
}

/* Change the flex items and gap variables based on how many items you have in full content width (root --content-width variable) */
.content.two-items {
  --flex-items: 2;
  --flex-gap: 6rem;
}

.content.three-items {
  --flex-items: 3;
  --flex-gap: 4rem;
}

.content.four-items {
  --flex-items: 4;
  --flex-gap: 2rem;
}

.content.five-items {
  --flex-items: 5;
  --flex-gap: 1.5rem;
}

.wrapper {
  max-width: var(--content-width);
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  width: 80%;
}

/* Adds Carousel functionality */
.content.carousel {
  flex-flow: nowrap;
  margin: 0 auto;
  transition: all 1s ease;
  width: 100%;
}

.handle-left {
  position: absolute;
  top: 30%;
  left: 0rem;
  display: none;
}

.handle-left:hover {
  cursor: pointer;
}

.handle-right {
  position: absolute;
  top: 30%;
  right: 0rem;
  display: none;
}

.handle-right:hover {
  cursor: pointer;
}

.handle-left.carousel, .handle-right.carousel {
  display: block;
}

/*
 * CSS class for the carousel handle.
 * 
 * @class .carousel-handle
 * @description Represents the handle of a carousel element.
 * @property {string} cursor - Specifies the type of cursor to be displayed when hovering over the handle.
 * @property {string} color - Specifies the color of the handle.
 * @property {string} height - Specifies the height of the handle.
 */
.carousel-handle {
  cursor: pointer;
  color: aliceblue;
  height: 5rem;
  padding-bottom: 0;
}

/* Center the text and image in the item */
.item.center {
  text-align: center;
}

/* Images and video must stretch 100% of the item width */
.item img {
  padding-bottom: 2rem;
}

.item .video {
  width: 100%;
  aspect-ratio: 16/9;
  padding-bottom: 2rem;
}

.item .map {
  position: relative;
}

.item .map iframe {
  width: 100%;
  height: 400px;
}

/* Circular image */
.item img.circle {
  width: auto;
  border-radius: 50%;
  padding: 2rem;
}

/* When image is centred - display as a block */
.item img.center {
  display: inline-block;
}

/* flex function automatically calculates individual width required based on the number of items and gap */
.item {
  flex: 0 0 calc(100% / var(--flex-items) - (var(--flex-items) - 1) / var(--flex-items) * var(--flex-gap));
  display: inline-block;
}

.button {
  background-color: var(--primary-color);
  color: var(--text-color);
  border: 1px;
  border-radius: 4px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.0784313725);
  cursor: pointer;
  font-size: 1.6rem;
  padding: 8px 29px;
  text-decoration: none;
  display: inline-block;
  font-weight: 500;
  min-width: 15rem;
  min-height: 5rem;
  text-align: center;
}

/* FONT SIZES - Change font properties depending on how large cards are (how many cards) */
p.strong {
  font-weight: 700;
}

/*The default setting is for the four-cards layout*/
.content .headline {
  font-size: 2rem;
  line-height: 3rem;
  font-weight: 700;
  padding-bottom: 2rem;
}

.content {
  font-size: 1.8rem;
  line-height: 3rem;
  margin-bottom: 2rem;
}

.content.two-items p {
  font-size: 1.8rem;
  line-height: 3rem;
}

.content.three-items p {
  font-size: 1.6rem;
  line-height: 2.8rem;
}

/* TEXT FORMATTING */
/* Multiple columns of text and the gap */
.one-columns {
  column-count: 1;
}

.two-columns {
  column-count: 2;
  gap: 6em;
}

.three-columns {
  column-count: 3;
  gap: 2em;
}

.four-columns {
  column-count: 4;
  gap: 1em;
}

/* TESTIMONIALS */
.testimonials-section .content .text {
  margin-bottom: 0;
  text-align: center;
  padding: 0 3rem;
}
.testimonials-section .content .headline {
  font-size: 1.4rem;
  margin-bottom: 0;
  text-align: center;
}
.testimonials-section .content .image-wrapper {
  text-align: center;
}

/* Correction to the main styles for smaller screens */
@media only screen and (max-width: 768px) {
  section {
    --padding: 3rem 3rem;
  }
  .content.two-items {
    --flex-gap: 3rem;
  }
  .content.three-items {
    --flex-gap: 3rem;
  }
  .content.four-items {
    --flex-gap: 3rem;
  }
  .content .item .headline {
    font-size: 2rem;
    line-height: 3rem;
    font-weight: 700;
    padding-bottom: 2rem;
  }
  .content.reverse {
    flex-direction: column-reverse;
  }
  .two-columns {
    column-count: 1;
  }
  .three-columns {
    column-count: 1;
  }
  .four-columns {
    column-count: 1;
  }
  .item {
    flex-basis: 100%;
    width: 100%;
  }
  .multiple-columns.two {
    column-count: 1;
    gap: 0rem;
  }
  .multiple-columns.three {
    column-count: 1;
    gap: 0rem;
  }
  .multiple-columns.four {
    column-count: 1;
    gap: 0rem;
  }
  .button {
    font-size: 1.4rem;
    margin-bottom: 1rem;
  }
}
/*
This block is applied to the teaser element only if it is configured
1/3 - 2/3 (small/large) on larger screens.
It does not apply to the teaser element if it is configured 1/2 - 1/2.
It does not apply to smaller screens as elements are stacked in a single column.
*/
@media only screen and (min-width: 768px) {
  .item.small {
    flex-basis: calc(33% - var(--flex-gap) / 2);
  }
  .item.large {
    flex-basis: calc(67% - var(--flex-gap) / 2);
  }
}
/* YOU TUBE EMBEDDED VIDEO */
.video-teaser-section .item.youtube {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.video-teaser-section .item.youtube::after {
  content: "";
  display: block;
  padding-top: 56.25%; /* 16:9 aspect ratio */
}

.video-teaser-section .item.item.youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 8rem;
  border-bottom: black 1px solid;
  background-color: var(--primary-color);
  position: fixed;
  width: 100%;
  z-index: 99;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-color);
  width: 80%;
  max-width: var(--content-width);
}

.navbar ul {
  list-style-type: none;
}

#nav-links li {
  padding: 0rem 2rem 0 2rem;
  border-bottom: 1px solid #666666;
}

#nav-links li a {
  color: var(--text-color);
  text-decoration: none;
}

.submenu {
  display: none;
  flex-direction: column;
}

.menu-lang {
  display: flex;
}

#hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
}

#hamburger div {
  width: 2rem;
  height: 0.25rem;
  background: #fff;
}

#nav-links {
  display: none;
  flex-direction: column;
  min-width: 30rem;
  position: fixed;
  top: 80px;
  padding-top: 0.5rem;
  background-color: var(--primary-color);
  z-index: 1; /* Ensure the navigation links appear on top */
}

#nav-links li ul li {
  white-space: nowrap;
  border: 0;
}

#nav-links span {
  font-size: 1.4rem;
}

#nav-links.open {
  display: flex;
}

.parent {
  position: relative;
}

#nav-links .parent:hover ul {
  display: block;
}

#lang-flags ul {
  display: flex;
  justify-content: space-around;
}

#lang-flags ul li {
  padding-right: 1rem;
}

header .navbar ul a.active img {
  vertical-align: middle;
  opacity: 1;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  padding: 1px;
}

header .navbar ul a img {
  vertical-align: middle;
  margin-top: 0rem;
  opacity: 0.5;
  width: 2rem;
}

.logo {
  display: flex;
  align-items: center;
}

.logo a {
  line-height: 0;
}

.logo img {
  max-height: 50px;
}

/* Other styles remain the same */
@media (max-width: 768px) {
  .navbar {
    padding: 30px;
  }
  #nav-links {
    width: 100vh;
    height: 100vh;
    position: absolute;
    top: 8rem; /* Adjust this value based on the height of your navbar */
    left: 0;
    padding-top: 1rem;
    background-color: var(--primary-color);
    z-index: 1; /* Ensure the navigation links appear on top */
  }
  .navbar .parent {
    padding: 1rem 9rem;
  }
}
section.article-section {
  background: white;
  margin-top: 60px;
}

.article-section header {
  margin-bottom: 3rem;
}

.article-content {
  display: flex;
  flex-direction: column;
  max-width: 1400px;
  width: 80%;
  justify-content: center;
  align-items: center;
}

article {
  font-size: 1.8rem;
  line-height: 3rem;
}

.article-content header img {
  max-width: 100%;
  height: auto;
}

.article-content h1 {
  text-align: center;
}

.author {
  margin: 20px 0;
  display: flex;
  justify-content: center;
}

.author img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.author p {
  font-size: 16px;
  margin-bottom: 0;
}

.author-info {
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
}

.publish-date span {
  font-weight: bold;
}

/* Main Styles */
.article-content main {
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  align-items: flex-start;
  margin: 20px;
  max-width: 100rem;
}

article {
  width: 100%;
  background-color: #fff;
  margin-bottom: 20px;
}

article .lead {
  font-weight: bold;
  margin-bottom: 1rem;
}

aside {
  width: 100%;
}

.article-content .social-links {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.article-content .social-links h2 {
  display: block;
  font-size: 1.8rem;
  font-weight: bold;
  margin: auto;
  margin-bottom: 2rem;
  text-align: center;
  text-transform: uppercase;
  line-height: 2.5rem;
}

.article-content .social-links ul {
  list-style: none;
  padding: 0;
}

.article-content .social-links a {
  display: flex;
  position: absolute;
  height: 100%;
  width: 100%;
}

.article-content .social-links li {
  border-radius: 50%;
  position: relative;
  height: 5rem;
  width: 5rem;
  width: 5rem;
  height: 5rem;
  margin-bottom: 2rem;
}

.article-content .social-links a {
  text-decoration: none;
}

.article-content .social-links li img {
  margin: auto;
  width: 50%;
}

blockquote {
  font-weight: bold;
  background-color: #F5F5F5;
  align-items: stretch;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  margin: 2rem 0;
  padding: 2rem;
}

.fb-link {
  background: #23589a;
}

.tw-link {
  background: #00aff2;
}

.li-link {
  background: #0e76a8;
}

.rd-link {
  background: #ff4500;
}

.pt-link {
  background: #bd081c;
}

.tt-link {
  background: #EE1D52;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .article-content main {
    flex-direction: column;
    align-items: center;
  }
  aside .social-links ul {
    display: flex;
    gap: 2rem;
  }
  article,
  aside {
    width: 100%;
  }
}
@media (max-width: 480px) {
  h1 {
    font-size: 24px;
  }
  .author img {
    width: 80px;
    height: 80px;
  }
  .author p {
    font-size: 14px;
  }
  .publish-date {
    font-size: 12px;
  }
  article,
  aside {
    padding: 10px;
  }
}
/* Additional Styles */
@media (min-width: 769px) {
  main {
    flex-direction: row;
  }
  article {
    width: 90%;
  }
  aside {
    width: 10%;
  }
}
/* THIS IS A CSS FILE FOR THE ARTICLE TEASERS COMPONENT */
footer {
  display: flex;
  background-color: var(--primary-color);
  justify-content: center;
  align-items: center;
  border-top: black 1px solid;
  margin-top: auto;
  position: relative;
  min-height: 8rem;
}

#footer-content {
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  align-items: center;
  color: var(--text-color);
  width: 80%;
  max-width: var(--content-width);
  padding: 2rem 0;
  font-size: 14px;
}

#footer-content ul {
  list-style-type: none;
}

#footer-text {
  width: 80%;
  justify-self: flex-start;
}

#footer-text div p {
  font-size: 1.3rem;
  line-height: 1.8rem;
  margin-bottom: 0;
}

#footer-social {
  display: flex;
  gap: 1rem;
  justify-content: space-around;
  align-items: flex-end;
  line-height: 0;
  justify-self: flex-end;
}

#footer-social img {
  width: 2.2rem;
  height: 2.2rem;
}

@media all and (max-width: 760px) {
  #footer-content {
    flex-direction: column;
    padding: 3rem 0;
  }
  #footer-text {
    width: 100%;
  }
  #footer-social {
    width: 35%;
  }
}

/*# sourceMappingURL=main-739.css.map */