:root {
  /* Brand Colors */
  --brand-1: #D50C2D;
  --brand-2: #383838;
  --brand-3: #FFFFFF;
  --brand-4: #AE0A25;
  --brand-5: #F5A623;

  /* Functional Colors */
  --function-1: #FF0000;
  --function-2: #FDC400;
  --function-1-dark: --brand-4;
  --function-3: #59A219;
  --function-3-dark: #4D8C16;
  --function-3-bright: #74D421;
  --function-2-dark: #E4B000;
  --function-4: #1979A2;
  --function-4-dark: #16688C;

  /* Neutrals */
  --neutrals-900: #484848;
  --neutrals-800: #525252;
  --neutrals-700: #737373;
  --neutrals-600: #A3A3A3;
  --neutrals-500: #D4D4D4;
  --neutrals-400: #E6E6E6;
  --neutrals-300: #EDEDED;
  --neutrals-200: #F5F5F5;
  --neutrals-100: #FAFAFA;

  /* Custom */
  --dark-grey: #5A5A5A;
}

/* Website Button Concept buttons
*  Buttons extended from bootstrap btn. adding btn class to element is required!
*  Each class extended hover, focus, active, and disabled classes from bootstrap individually.
*  Buttons icon classes need to be used inside icon's(<i>) class attribute, not inside button's class attribute
*  Buttons with animation, animation class need to be defined optionally i.e.btn btn-sm btn-prio-3 sliding-background
*  Animation classes are not reusable in other buttons
*  All button by default on white. Depends on the parent's background, select classes: on-brand, on-dark, and on-light
*/

/*  Brand CTA Prio 1
*   Example usage: btn btn-lg btn-prio-1 on-dark disabled
*   Optional classes: disabled
*   Themes: default(on-white), on-dark, on-brand, on-light
*/
.btn.btn-prio-1 {
  background-color: var(--brand-1);
  box-shadow: none;
  color: var(--brand-3);
  border-radius: 4px;
  align-content: center;
  font-family: "Montserrat", sans-serif;
  line-height: 150%;
  font-size: 0.80375rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.01606rem;
  padding: 5px 10px;
}

.btn.btn-prio-1, .btn.btn-prio-1:hover {
  transition: all .2s;
  -webkit-transition: all .2s
}

.btn.btn-prio-1:hover {
  background-color: var(--brand-4)
}

.btn.btn-prio-1:focus-visible {
  box-shadow: 0 0 0 3px rgba(34, 135, 248, 0.60);
  transition: all .2s;
  -webkit-transition: all .2s
}

.btn.btn-prio-1.disabled {
  box-shadow: none;
  pointer-events: none;
}

.btn-lg.btn-prio-1 {
  font-size: 1.125rem;
  letter-spacing: -0.0225rem;
  padding: 10px 16px;
}

/*  Prio 1 on brand */
.btn.btn-prio-1.on-brand {
  background-color: var(--brand-3);
  color: var(--brand-2);
}

.btn.btn-prio-1.on-brand:hover {
  background-color: var(--neutrals-400);
}

/*  Prio 1 on dark */
.btn.btn-prio-1.on-dark {
  background-color: var(--brand-1);
  color: var(--brand-3);
}

.btn.btn-prio-1.on-dark:hover {
  background-color: var(--brand-4)
}

/*  Prio 1 on light */
.btn.btn-prio-1.on-light {
  background-color: var(--brand-1);
  color: var(--brand-3);
}

.btn.btn-prio-1.on-light:hover {
  background-color: var(--brand-4)
}

/*  Prio 2
*   Example usage: btn btn-lg btn-prio-2 on-dark disabled
*   Optional classes: on-dark, disabled
*/
.btn.btn-prio-2 {
  background-color: var(--brand-2);
  box-shadow: none;
  color: var(--brand-3);
  border-radius: 4px;
  align-content: center;
  font-family: "Montserrat", sans-serif;
  line-height: 150%;
  font-size: 0.80375rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.01606rem;
  padding: 5px 10px;
}

.btn.btn-prio-2, .btn.btn-prio-2:hover {
  transition: all .2s;
  -webkit-transition: all .2s
}

.btn.btn-prio-2:hover {
  background-color: var(--neutrals-800)
}

.btn.btn-prio-2:focus-visible {
  box-shadow: 0 0 0 3px rgba(34, 135, 248, 0.60);
  transition: all .2s;
  -webkit-transition: all .2s
}

.btn.btn-prio-2.disabled {
  box-shadow: none;
  pointer-events: none;
}

.btn-lg.btn-prio-2 {
  font-size: 1.125rem;
  letter-spacing: -0.0225rem;
  padding: 10px 16px;
}

/*  Prio 2 on brand */
.btn.btn-prio-2.on-brand {
  background-color: var(--brand-2);
  color: var(--brand-3);
}

.btn.btn-prio-2.on-brand:hover {
  background-color: var(--neutrals-800)
}

/* Prio 2 on dark */
.btn.btn-prio-2.on-dark {
  background-color: var(--brand-3);
  color: var(--brand-2);
}

.btn.btn-prio-2.on-dark:hover {
  background-color: var(--neutrals-400)
}

/*  Prio 2 on light */
.btn.btn-prio-2.on-light {
  background-color: var(--brand-2);
  color: var(--brand-3);
}

.btn.btn-prio-2.on-light:hover {
  background-color: var(--neutrals-800)
}

/*  Prio 3
*   Example usage: btn btn-lg btn-prio-3 on-dark disabled sliding-background
*   Optional classes: on-dark, disabled, sliding-background
*   Note color and border values are overridden on sliding-background:hover
*/
.btn.btn-prio-3 {
  background-color: transparent;
  color: var(--brand-2);
  box-shadow: inset 0 0 0 2px var(--brand-2);
  border-radius: 4px;
  transition: border-color 0.3s, color 0.3s;
  align-content: center;
  font-family: "Montserrat", sans-serif;
  line-height: 150%;
  font-size: 0.80375rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.01606rem;
  padding: 5px 10px;
}

.btn.btn-prio-3:hover {
  box-shadow: inset 0 0 0 2px var(--brand-2);
  color: var(--brand-2);
}

.btn.btn-prio-3:focus-visible {
  box-shadow: inset 0 0 0 2px var(--brand-2), 0 0 0 3px rgba(34, 135, 248, 0.60);
  transition: all .2s;
  -webkit-transition: all .2s
}

.btn.btn-prio-3.disabled {
  pointer-events: none;
}

.btn-lg.btn-prio-3 {
  font-size: 1.125rem;
  letter-spacing: -0.0225rem;
  padding: 10px 16px;
}

/*  Prio 3 on brand */
.btn.btn-prio-3.on-brand {
  box-shadow: inset 0 0 0 2px var(--brand-3);
  color: var(--brand-3);
}

.btn.btn-prio-3.on-brand:hover {
  box-shadow: inset 0 0 0 2px var(--brand-3);
  color: var(--brand-3);
}

.btn.btn-prio-3.on-brand:focus-visible {
  box-shadow: inset 0 0 0 2px var(--brand-3), 0 0 0 3px rgba(34, 135, 248, 0.60);
}

@media (pointer: fine) {
  .btn.btn-prio-3.on-brand.sliding-background {
    background: linear-gradient(to right, var(--brand-3) 0%, var(--brand-3) 100%) no-repeat right 100%;
    background-size: 0 100%;
    transition: background-size 500ms ease, color 500ms ease;
  }

  .btn.btn-prio-3.on-brand.sliding-background:hover {
    background-position: left 100%;
    background-size: 100% 100%;
    color: var(--brand-2);
    box-shadow: inset 0 0 0 2px var(--brand-3);
  }
}

/* Prio 3 on dark */
.btn.btn-prio-3.on-dark {
  box-shadow: inset 0 0 0 2px var(--brand-3);
  color: var(--brand-3);
}

.btn.btn-prio-3.on-dark:focus-visible {
  box-shadow: inset 0 0 0 2px var(--brand-3), 0 0 0 3px rgba(34, 135, 248, 0.60);
}

@media (pointer: fine) {
  .btn.btn-prio-3.on-dark:hover {
    box-shadow: inset 0 0 0 2px var(--brand-3);
    color: var(--brand-2);
  }

  .btn.btn-prio-3.on-dark.sliding-background {
    background: linear-gradient(to right, var(--brand-3) 0%, var(--brand-3) 100%) no-repeat right 100%;
    background-size: 0 100%;
    transition: background-size 500ms ease, color 500ms ease;
  }

  .btn.btn-prio-3.on-dark.sliding-background:hover {
    background-position: left 100%;
    background-size: 100% 100%;
    color: var(--brand-2);
    box-shadow: inset 0 0 0 2px var(--brand-3);
  }
}

/*  Prio 3 on light */
.btn.btn-prio-3.on-light {
  box-shadow: inset 0 0 0 2px var(--brand-2);
  color: var(--brand-2);
}

.btn.btn-prio-3.on-light:hover {
  box-shadow: inset 0 0 0 2px var(--brand-2);
  color: var(--brand-2);
}

.btn.btn-prio-3.on-light:focus-visible {
  box-shadow: inset 0 0 0 2px var(--brand-2), 0 0 0 3px rgba(34, 135, 248, 0.60);
}

/* Prio 3 sliding-background animation default(on-white) and on-light */
@media (pointer: fine) {
  .btn.btn-prio-3.sliding-background {
    background: linear-gradient(to right, var(--brand-2) 0%, var(--brand-2) 100%) no-repeat right 100%;
    background-size: 0 100%;
    transition: background-size 500ms ease, color 500ms ease;
  }

  .btn.btn-prio-3.sliding-background:hover {
    background-position: left 100%;
    background-size: 100% 100%;
    color: var(--brand-3);
  }
}

/*  Prio 4
*   example usage: btn btn-lg btn-prio-4 on-dark disabled
*   optional classes: on-dark, disabled
*/
.btn.btn-prio-4 {
  background-color: var(--neutrals-400);
  box-shadow: none;
  color: var(--brand-2);
  border-radius: 4px;
  align-content: center;
  font-family: "Montserrat", sans-serif;
  line-height: 150%;
  font-size: 0.80375rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.01606rem;
  padding: 5px 10px;
}

.btn.btn-prio-4, .btn.btn-prio-4:hover {
  transition: all .2s;
  -webkit-transition: all .2s
}

.btn.btn-prio-4:hover {
  background-color: var(--neutrals-500);
  color: var(--neutrals-800)
}

.btn.btn-prio-4:focus-visible {
  box-shadow: 0 0 0 3px rgba(34, 135, 248, 0.60);
  transition: all .2s;
  -webkit-transition: all .2s
}

.btn.btn-prio-4.disabled {
  box-shadow: none;
  pointer-events: none;
}

.btn-lg.btn-prio-4 {
  font-size: 1.125rem;
  letter-spacing: -0.0225rem;
  padding: 10px 16px;
}

/*  Prio 4 on brand */
.btn.btn-prio-4.on-brand {
  background-color: var(--neutrals-500);
  color: var(--brand-2);
}

.btn.btn-prio-4.on-brand:hover {
  background-color: var(--neutrals-400);
}

/* Prio 4 on dark */
.btn.btn-prio-4.on-dark {
  background-color: var(--neutrals-700);
  color: var(--brand-3);
}

.btn.btn-prio-4.on-dark:hover {
  background-color: #9A9A9A
}

/*  Prio 4 on light */
.btn.btn-prio-4.on-light {
  background-color: var(--neutrals-500);
  color: var(--brand-2);
}

.btn.btn-prio-4.on-light:hover {
  background-color: var(--neutrals-400);
}

/*  CTA Text Link Button
*   example usage: btn btn-lg btn-text-link sliding-bottom-border on-dark disabled
*   optional classes: on-dark, disabled, sliding-bottom-border
*/
.btn.btn-text-link {
  position: relative;
  color: var(--brand-2);
  box-shadow: none;
  border-radius: 0;
  padding-right: 0;
  padding-left: 0;
  align-content: center;
  font-family: "Montserrat", sans-serif;
  line-height: 150%;
  font-size: 0.80375rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.01606rem;
}

.btn.btn-text-link, .btn.btn-text-link:hover {
  transition: all .2s;
  -webkit-transition: all .2s
}

.btn.btn-text-link:hover {
  color: var(--brand-1);
}

.btn.btn-text-link:active {
  box-shadow: none;
  transition: all .2s;
  -webkit-transition: all .2s;
  color: var(--brand-1);
}

.btn.btn-text-link:focus-visible {
  box-shadow: 0 0 0 3px rgba(34, 135, 248, 0.60);
  border-radius: 4px;
  transition: all .2s;
  -webkit-transition: all .2s
}

.btn.btn-text-link.disabled {
  box-shadow: none;
  background: none;
  pointer-events: none;
}

.btn.btn-text-link.disabled:active {
  box-shadow: none;
  background: none;
}

.btn-md.btn-text-link {
  font-size: 1rem;
  letter-spacing: -0.02rem;
}

.btn-lg.btn-text-link {
  font-size: 1.125rem;
  letter-spacing: -0.0225rem;
}

/* CTA Text Link Button sliding-bottom-border animation */
@media (pointer: fine) {
  .btn.btn-text-link.sliding-bottom-border {
    background: linear-gradient(to right, var(--brand-1) 0%, var(--brand-1) 100%) no-repeat right 100%;
    background-size: 0 2px;
    transition: background-size 390ms ease
  }

  .btn.btn-text-link.sliding-bottom-border:hover {
    background-position: left 100%;
    background-size: 100% 2px
  }
}

/* CTA Text Link Button icon animations */
.btn-text-link .btn-text-link-icon-left {
  margin-right: 1px;
  transform: translateX(0);
  will-change: transform;
  transition: transform 0.1s linear;
}

.btn-text-link .btn-text-link-icon-right {
  margin-left: 1px;
  transform: translateX(0);
  will-change: transform;
  transition: transform 0.1s linear;
}

@media (pointer: fine) {
  .btn-text-link:hover .btn-text-link-icon-left {
    transition: transform 0.3s ease;
    transform: translateX(-0.2rem);
  }

  .btn-text-link:hover .btn-text-link-icon-right {
    transition: transform 0.3s ease;
    transform: translateX(0.2rem);
  }
}

/* CTA Text Link Button on brand */
.btn.btn-text-link.on-brand {
  color: var(--brand-3);
}

.btn.btn-text-link.on-brand:hover {
  color: var(--brand-3);
}

@media (pointer: fine) {
  .btn.btn-text-link.on-brand.sliding-bottom-border {
    background: linear-gradient(to right, var(--brand-3) 0%, var(--brand-3) 100%) no-repeat right 100%;
    background-size: 0 2px;
    transition: background-size 390ms ease
  }

  .btn.btn-text-link.on-brand.sliding-bottom-border:hover {
    background-position: left 100%;
    background-size: 100% 2px
  }
}

/* CTA Text Link Button on dark */
.btn.btn-text-link.on-dark {
  color: var(--brand-3);
}

.btn.btn-text-link.on-dark:hover {
  color: #DD3D57;
}

@media (pointer: fine) {
  .btn.btn-text-link.on-dark.sliding-bottom-border {
    background: linear-gradient(to right, #DD3D57 0%, #DD3D57 100%) no-repeat right 100%;
    background-size: 0 2px;
    transition: background-size 390ms ease
  }

  .btn.btn-text-link.on-dark.sliding-bottom-border:hover {
    background-position: left 100%;
    background-size: 100% 2px
  }
}

/* CTA Text Link Button on light */
.btn.btn-text-link.on-light {
  color: var(--brand-2);
}

.btn.btn-text-link.on-light:hover {
  color: var(--brand-1);
}

/*  Button Icons
*   btn-icon-l: icon on the left-side, btn-icon-r: icon on the right-side
*   btn-icon-sm: icon for small buttons, btn-icon-lg: icon for large buttons,
*   example usage: <i class="btn-icon btn-icon-l btn-icon-sm fa-solid fa-circle-plus">
*/
.btn-icon {
  font-size: 0.6875rem;;
}

.btn-icon-lg {
  font-size: 1rem;
}

.btn-icon-r {
  margin-left: 5px;
}

.btn-icon-l {
  margin-right: 5px;
}

/*  Text Link
*   example usage: text-link text-link-left on-dark disabled
*   optional classes: on-dark, disabled, text-link-left, text-link-right
*/
.text-link {
  position: relative;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.13rem;
  color: var(--brand-2);
  transition: color 0.3s;
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
}

.text-link:hover {
  color: var(--brand-1);
}

/*  Text Link on brand */
.text-link.on-brand {
  color: var(--brand-3);
}

.text-link.on-brand:hover {
  opacity: 0.75;
}

/*  Text Link on dark */
.text-link.on-dark {
  color: var(--brand-3);
}

.text-link.on-dark:hover {
  color: var(--brand-1);
}

/*  Text Link on light */
.text-link.on-light {
  color: var(--brand-2);
}

.text-link.on-light:hover {
  color: var(--brand-1);
}

.text-link:focus-visible {
  box-shadow: 0 0 0 3px rgba(34, 135, 248, 0.60);
  border-radius: 4px;
  transition: all .2s;
  -webkit-transition: all .2s
}

.text-link::before,
.text-link::after {
  font-family: FontAwesome, sans-serif;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  font-size: 0.842rem;
  height: 16px;
  width: 16px;
}

.text-link.text-link-left::before {
  content: '\2039';
}

.text-link.text-link-right::after {
  content: '\203A';
}

.text-link.text-link-external::after {
  content: "\f08e";
}

.text-link.disabled {
  opacity: 0.65;
  pointer-events: none;
}

.text-link.disabled::before,
.text-link.disabled::after {
  opacity: 0.65;
}