/**************************
***** GLOBAL
************************** */
:root {
  --color-text: #414141;
  --color-dark: #313131;
  --color-white: #ffffff;
  --color-light: #f2f2f2;
  --color-accent: #30b4ed;
  --color-mineral: #084261;
  --color-menu: #fbab12;
  --color-menu-transparent: #fba912da;
  --color-menu-hover: #fbb900;
  --color-menu-hover-transparent: #fbb800ef;
}

body {
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  color: var(--color-text);
}

h1 {
  border-top: 5px solid var(--color-menu);
  color: var(--color-menu);
}

a {
  color: var(--color-menu);
}

a:hover {
  color: var(--color-menu-hover);
}

/**************************
***** COOKIE BAR
************************** */
#cookie-bar {
  background: var(--color-dark);
  color: var(--color-white);
  padding: 10px 0;
}
#cookie-bar a {
  color: var(--color-white);
  border: 1px solid var(--color-white);
  font-size: 12px;
  padding: 0 5px;
  margin-left: 20px;
  display: inline-block;
}

@media only screen and (max-width: 800px) {
  #cookie-bar {
    padding: 10px;
  }
}

/**************************
***** TOOLBAR
************************** */
#toolbar {
  text-align: right;
  position: absolute;
  width: 100%;
  z-index: 3;
}
#toolbar #user {
  display: inline-block;
  font-size: 12px;
  padding: 5px 40px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0 0 24px 24px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
#toolbar #user span {
  color: var(--color-accent);
  margin-left: 2px;
  font-weight: bold;
}
#toolbar #user a {
  background: var(--color-accent);
  color: var(--color-white);
  border-radius: 32px;
  width: 16px;
  height: 16px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  font-size: 12px;
  margin-left: 5px;
  text-align: center;
  line-height: 16px;
}

/**************************
***** HEADER
************************** */
#banner {
  position: relative;
}

#logo {
  position: absolute;
  background: var(--color-white);
  margin: 0;
  z-index: 3;
}

#logo a{
  display: block;
  padding: 20px 20px 10px 20px;
}

#paralax {
  height: 420px;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: left top;
  position: relative;
  overflow: hidden;
}

#paralax #pageTitle {
  position: absolute;
  top: -2000px;
}

@media only screen and (max-width: 800px) {
  #logo {
    top: 100px;
    left: 50%;
    translate: -50% -50%;
  }


  #paralax {
    height: 210px;
  }
}

/**************************
***** MAIN MENU
************************** */
#main-menu {
  background: var(--color-menu);
}

#main-menu a.toggler {
  align-self: center;
}

#main-menu > ul {
  justify-content: center;
}

#main-menu a {
  color: var(--color-white);
}

#main-menu > ul > li > a {
  font-size: 16px;
}

#main-menu ul ul a {
  font-size: 14px;
  font-weight: 400;
}

#main-menu > ul > li:hover > a,
#main-menu > ul > li > a.active {
  background: var(--color-menu-hover);
  color: var(--color-text);
}

#main-menu.open li:hover > ul li {
  background: var(--color-menu-hover);
}

#main-menu ul ul a:hover,
#main-menu ul ul a.active {
  border-left: 5px solid var(--color-text);
  color: var(--color-text);
}

@media only screen and (min-width: 961px) {
  #main-menu{
    position: absolute;
    width: 100%;
    bottom: 0;
    background: var(--color-menu-transparent);
  }

  #main-menu > ul > li:hover > a,
  #main-menu li:hover > ul {
    background: var(--color-menu-hover-transparent);
  }

}

/****************************
***** BREADCRUMB
**************************** */
#breadcrumb {
  background: var(--color-light);
}

#breadcrumb ul li a {
  color: var(--color-text);
  text-decoration: none;
}

#breadcrumb ul li a:hover {
  color: var(--color-menu);
}

/****************************
***** SECTION MENU
**************************** */
#section-menu ul li a {
  color: var(--color-menu);
  border: 2px solid var(--color-menu);
  background-color: var(--color-white);
  font-weight: bold;
}

#section-menu ul li a.active {
  background-color: var(--color-menu);
  color: var(--color-white);
}

#section-menu ul li a:hover {
  background-color: var(--color-menu-hover);
  border: 2px solid var(--color-menu-hover);
  color: var(--color-white);
}


/**************************
***** PAGE
************************** */
#page {
  padding: 30px 0;
}

/**************************
***** FOOTER
************************** */
#footer {
  padding: 30px 0;
  background: var(--color-dark);
  color: var(--color-white);
}

#footer a {
  text-decoration: none;
  color: var(--color-white);
}

#footer .contact .name {
  font-size: 20px;
}