/*SMOOTH SCROLLING*/
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html{
    scroll-behavior: auto;
  }
}
*[id] {
    scroll-margin-top: 10px
} 
/*END SMOOTH SCROLLING*/

@font-face {
    font-family: 'AvenirNext';
    src: url('../fonts/avenir-next/avenirnext-ultralight-webfont.woff2') format('woff2'),
         url('../fonts/avenir-next(avenirnext-ultralight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.avenir {
	font-family: AvenirNext !important;
}

.header .logo img {
  max-height: 60px;
  margin-right: 8px;
}

.btn-themed,
.btn-themed:focus {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 14px;
  padding: 8px 26px;
  margin: 0;
  border-radius: 4px;
  transition: 0.3s;
}

.btn-themed:hover,
.btn-themed:focus:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

.btn-outline-themed,
.btn-outline-themed:focus {
  color: var(--contrast-color);
  background: transparent;
  border-color: var(--contrast-color);
  font-size: 14px;
  padding: 8px 26px;
  margin: 0;
  border-radius: 4px;
  transition: 0.3s;
}

.btn-outline-themed:hover,
.btn-outline-themed:focus:hover {
  color: black;
  background: color-mix(in srgb, var(--contrast-color), transparent 15%);
}


.hero .btn-getstarted,
.hero .btn-getstarted:focus {
  color: var(--contrast-color);
  background: transparent;
  border-color: var(--contrast-color);
  font-size: 22px;
  padding: 8px 26px;
  margin: 0;
  border-radius: 4px;
  transition: 0.3s;
}

.hero .btn-getstarted:hover,
.hero .btn-getstarted:focus:hover {
  color: black;
  background: color-mix(in srgb, var(--contrast-color), transparent 15%);
}

/* 2click privacy solution for embeds */
div.privacy-msg p {
    width:80%;
    color: black;
    padding: 20px;
    text-align:center;
    position: relative;
    top: 50%;
    left: 50%;
    background: color-mix(in srgb, var(--default-color), transparent 96%);
    transform: translate(-50%, -50%);
}

.modal {
  --bs-modal-bg: var(--background-color);
}