:root {
  /*--main-font: Roboto, sans-serif;*/
  --main-font: sans-serif;
  --black: #313131;
  --main-color: #0077A0;
  --accent-color: #FCC24F;
}

html {
  scroll-behavior: smooth;
}

.container {
  flex-wrap: wrap;
}
.container:not(.is-fluid) {
  margin: 0 auto;
}
@media only screen and (min-width: 600px) {
  .container:not(.is-fluid) {
    width: 100%;
    max-width: 570px;
  }
}
@media only screen and (min-width: 900px) {
  .container:not(.is-fluid) {
    width: 100%;
    max-width: 860px;
  }
}
@media only screen and (min-width: 1200px) {
  .container:not(.is-fluid) {
    width: 100%;
    max-width: 1150px;
  }
}
@media only screen and (min-width: 1800px) {
  .container:not(.is-fluid) {
    width: 100%;
    max-width: 1400px;
  }
}

.container-sm {
  margin: 0 auto;
  width: 100%;
}
@media only screen and (min-width: 600px) {
  .container-sm {
    max-width: 570px;
  }
}
@media only screen and (min-width: 900px) {
  .container-sm {
    max-width: 860px;
  }
}
@media only screen and (min-width: 1200px) {
  .container-sm {
    max-width: 1150px;
  }
}
@media only screen and (min-width: 1800px) {
  .container-sm {
    max-width: 1400px;
  }
}

.container-md {
  margin: 0 auto;
  width: 100%;
}
@media only screen and (min-width: 900px) {
  .container-md {
    max-width: 860px;
  }
}
@media only screen and (min-width: 1200px) {
  .container-md {
    max-width: 1150px;
  }
}
@media only screen and (min-width: 1800px) {
  .container-md {
    max-width: 1400px;
  }
}

.container-lg {
  margin: 0 auto;
  width: 100%;
}
@media only screen and (min-width: 1200px) {
  .container-lg {
    max-width: 1150px;
  }
}
@media only screen and (min-width: 1800px) {
  .container-lg {
    max-width: 1400px;
  }
}

.container-xl {
  margin: 0 auto;
  width: 100%;
}
@media only screen and (min-width: 1800px) {
  .container-xl {
    max-width: 1400px;
  }
}

@media only screen and (min-width: 768px) {
  .flex-container {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}
body {
  font-family: var(--main-font);
  margin: 0;
  padding: 0;
  color: var(--black) !important;
}

.flex-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

[class*=container] {
  display: flex;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
  /*width: 350px;*/
  height: 95px;
}
.intro-content .logo {
  width: 300px;
  margin-left: 20px;
}

/* background */
body {
  background: url("../images/body-bg-top-right.svg") right top no-repeat fixed, url("../images/body-bg-left.svg") left 50vh no-repeat fixed;
  padding-top: 150px;
}

h1, h2, h3 {
  text-align: center;
  font-weight: normal;
  flex: 1 0 100%;
}

h1 {
  font-size: 46px;
  margin-bottom: 0;
  flex: 1 0 auto;
}

h2 {
  font-size: 38px;
}

h3 {
  font-size: 28px;
}

.text-small {
  font-size: 12px;
  flex: 1;
}

.text-center {
  text-align: center;
}

.mt-25 {
  margin-top: 25px;
}

.mt-50 {
  margin-top: 50px;
}

#progress-bar {
  position: fixed;
  display: inline-block;
  height: 5px;
  background: var(--accent-color);
  z-index: 100;
  top: 0;
  left: 0;
  transition: 0.4s ease;
}

#scrollToTopButton {
  transition: all 0.4s ease;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  bottom: 0px;
  left: calc(100vw - 100px);
  transform: translateX(100%) rotate(20deg);
  transition: all 0.4s ease;
}
#scrollToTopButton.isVisible {
  z-index: 20;
  opacity: 1;
  pointer-events: unset;
  transform: translateX(0) rotate(0deg);
}
#scrollToTopButton img {
  width: 100px;
  height: auto;
  cursor: pointer;
}
#scrollToTopButton img:hover {
  transform: scale(1.05);
  transform-origin: right bottom;
}

/* header */
header {
  display: flex;
  align-items: center;
  flex: 1 0 100%;
  justify-content: center;
}

/* menu */
nav.menu {
  position: fixed;
  z-index: 30;
  top: 0;
  display: flex;
  justify-content: center;
  flex: 0 1 auto;
  gap: 25px;
  align-items: center;
  background: white;
  padding: 0 50px;
  height: 100px;
  border-radius: 0 0 100% 100%;
}
nav.menu.shadow {
  box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.03), 0px 16px 16px 0px rgba(0, 0, 0, 0.03), 0px 35px 21px 0px rgba(0, 0, 0, 0.02), 0px 63px 25px 0px rgba(0, 0, 0, 0.01), 0px 98px 27px 0px rgba(0, 0, 0, 0);
}
nav.menu .menu-item {
  display: inline-block;
  cursor: pointer;
  color: var(--black);
  text-decoration: none;
}
nav.menu .menu-item:hover {
  color: var(--main-color);
}
nav.menu .menu-item.home {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FAF9F9;
  width: 56px;
  height: 56px;
  border-radius: 70px;
}
nav.menu .menu-item.home:hover {
  transform: scale(1.05);
}

/* separator */
.separator {
  display: flex;
  justify-content: center;
  flex: 1 0 100%;
}
.separator-big {
  margin-top: 50px;
}

/* intro */
.intro {
  margin-bottom: 25px !important;
}
.intro-content {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.shareholders-items {
  display: flex;
  justify-content: center;
  gap: 50px;
}
.shareholders-items .shareholders-item {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  flex: 1 calc(50% - 25px);
  gap: 50px;
  padding: 25px;
  background: #FFF;
  border-radius: 12px;
  box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.03), 0px 16px 16px 0px rgba(0, 0, 0, 0.03), 0px 35px 21px 0px rgba(0, 0, 0, 0.02), 0px 63px 25px 0px rgba(0, 0, 0, 0.01), 0px 98px 27px 0px rgba(0, 0, 0, 0);
}
.shareholders-item-text {
	width: 100%;
    text-align: center;
}

.shareholders-item-text a {
  color: #0077A0;
  text-decoration: none;
  vertical-align: super;
}
.shareholders-item-text a:hover {
  text-decoration: underline;
}

@media (max-width: 992px) {
  html {
    padding-bottom: 100px;
    overflow: auto;
  }

  body {
    padding-top: 25px;
    background: url("../images/body-bg-top-right.svg") right top no-repeat fixed;
    width: 100vw;
    overflow-x: hidden;
  }

  .flex-container {
    padding: 0 15px;
  }

  .container {
    width: 100%;
  }
  .container > * {
    flex: 1 0 100%;
  }

  h1 {
    font-size: 30px;
  }

  img {
    max-width: 100%;
  }

  nav.menu {
    top: unset;
    bottom: 5px;
    border-radius: 100px;
    padding: 0 25px;
    height: 75px;
    box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.03), 0px 16px 16px 0px rgba(0, 0, 0, 0.03), 0px 35px 21px 0px rgba(0, 0, 0, 0.02), 0px 63px 25px 0px rgba(0, 0, 0, 0.01), 0px 98px 27px 0px rgba(0, 0, 0, 0);
  }

  .intro-content {
    flex-direction: column;
    justify-content: center;
  }

  .shareholders-items {
    flex-direction: column;
  }
}