@charset "UTF-8";
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *=* require select2
 *= require_self
 */
/*!
 * Toastify js 1.12.0
 * https://github.com/apvarun/toastify-js
 * @license MIT licensed
 *
 * Copyright (C) 2018 Varun A P
 */
.toastify {
  padding: 12px 20px;
  color: #ffffff;
  display: inline-block;
  box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3);
  background: -webkit-linear-gradient(315deg, #73a5ff, #5477f5);
  background: linear-gradient(135deg, #73a5ff, #5477f5);
  position: fixed;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  max-width: calc(50% - 20px);
  z-index: 2147483647;
}

.toastify.on {
  opacity: 1;
}

.toast-close {
  background: transparent;
  border: 0;
  color: white;
  cursor: pointer;
  font-family: inherit;
  font-size: 1em;
  opacity: 0.4;
  padding: 0 5px;
}

.toastify-right {
  right: 15px;
}

.toastify-left {
  left: 15px;
}

.toastify-top {
  top: -150px;
}

.toastify-bottom {
  bottom: -150px;
}

.toastify-rounded {
  border-radius: 25px;
}

.toastify-avatar {
  width: 1.5em;
  height: 1.5em;
  margin: -7px 5px;
  border-radius: 2px;
}

.toastify-center {
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  max-width: fit-content;
  max-width: -moz-fit-content;
}

@media only screen and (max-width: 360px) {
  .toastify-right, .toastify-left {
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    max-width: fit-content;
  }
}
/**
 * tom-select.css (v2.1.0)
 * Copyright (c) contributors
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
 * file except in compliance with the License. You may obtain a copy of the License at:
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
 * ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 *
 */
.ts-wrapper.single .ts-control, .ts-wrapper.single .ts-control input {
  cursor: pointer;
}

.ts-wrapper.plugin-drag_drop.multi > .ts-control > div.ui-sortable-placeholder {
  visibility: visible !important;
  background: #f2f2f2 !important;
  background: rgba(0, 0, 0, 0.06) !important;
  border: 0 none !important;
  box-shadow: inset 0 0 12px 4px #fff;
}

.ts-wrapper.plugin-drag_drop .ui-sortable-placeholder::after {
  content: "!";
  visibility: hidden;
}

.ts-wrapper.plugin-drag_drop .ui-sortable-helper {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.plugin-checkbox_options .option input {
  margin-right: 0.5rem;
}

.plugin-clear_button .ts-control {
  padding-right: calc(1em + 18px) !important;
}

.plugin-clear_button .clear-button {
  opacity: 0;
  position: absolute;
  top: 8px;
  right: 2px;
  margin-right: 0 !important;
  background: transparent !important;
  transition: opacity 0.5s;
  cursor: pointer;
}

.plugin-clear_button.single .clear-button {
  right: calc(2px + 2rem);
}

.plugin-clear_button.focus.has-items .clear-button, .plugin-clear_button:not(.disabled):hover.has-items .clear-button {
  opacity: 1;
}

.ts-wrapper .dropdown-header {
  position: relative;
  padding: 10px 8px;
  border-bottom: 1px solid #d0d0d0;
  background: #f8f8f8;
  border-radius: 3px 3px 0 0;
}

.ts-wrapper .dropdown-header-close {
  position: absolute;
  right: 8px;
  top: 50%;
  color: #303030;
  opacity: 0.4;
  margin-top: -12px;
  line-height: 20px;
  font-size: 20px !important;
}

.ts-wrapper .dropdown-header-close:hover {
  color: black;
}

.plugin-dropdown_input.focus.dropdown-active .ts-control {
  box-shadow: none;
  border: 1px solid #d0d0d0;
}

.plugin-dropdown_input .dropdown-input {
  border: 1px solid #d0d0d0;
  border-width: 0 0 1px 0;
  display: block;
  padding: 8px 8px;
  box-shadow: none;
  width: 100%;
  background: transparent;
}

.plugin-dropdown_input .items-placeholder {
  border: 0 none !important;
  box-shadow: none !important;
  width: 100%;
}

.plugin-dropdown_input.has-items .items-placeholder, .plugin-dropdown_input.dropdown-active .items-placeholder {
  display: none !important;
}

.ts-wrapper.plugin-input_autogrow.has-items .ts-control > input {
  min-width: 0;
}

.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input {
  flex: none;
  min-width: 4px;
}

.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-webkit-input-placeholder {
  color: transparent;
}

.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-ms-input-placeholder {
  color: transparent;
}

.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::placeholder {
  color: transparent;
}

.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {
  display: flex;
}

.ts-dropdown.plugin-optgroup_columns .optgroup {
  border-right: 1px solid #f2f2f2;
  border-top: 0 none;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}

.ts-dropdown.plugin-optgroup_columns .optgroup:last-child {
  border-right: 0 none;
}

.ts-dropdown.plugin-optgroup_columns .optgroup:before {
  display: none;
}

.ts-dropdown.plugin-optgroup_columns .optgroup-header {
  border-top: 0 none;
}

.ts-wrapper.plugin-remove_button .item {
  display: inline-flex;
  align-items: center;
  padding-right: 0 !important;
}

.ts-wrapper.plugin-remove_button .item .remove {
  color: inherit;
  text-decoration: none;
  vertical-align: middle;
  display: inline-block;
  padding: 0 6px;
  border-left: 1px solid #d0d0d0;
  border-radius: 0 2px 2px 0;
  box-sizing: border-box;
  margin-left: 6px;
}

.ts-wrapper.plugin-remove_button .item .remove:hover {
  background: rgba(0, 0, 0, 0.05);
}

.ts-wrapper.plugin-remove_button .item.active .remove {
  border-left-color: #cacaca;
}

.ts-wrapper.plugin-remove_button.disabled .item .remove:hover {
  background: none;
}

.ts-wrapper.plugin-remove_button.disabled .item .remove {
  border-left-color: white;
}

.ts-wrapper.plugin-remove_button .remove-single {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 23px;
}

.ts-wrapper {
  position: relative;
}

.ts-dropdown,
.ts-control,
.ts-control input {
  color: #303030;
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
  font-smoothing: inherit;
}

.ts-control,
.ts-wrapper.single.input-active .ts-control {
  background: #fff;
  cursor: text;
}

.ts-control {
  border: 1px solid #d0d0d0;
  padding: 8px 8px;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  box-shadow: none;
  border-radius: 3px;
  display: flex;
  flex-wrap: wrap;
}

.ts-wrapper.multi.has-items .ts-control {
  padding: 6px 8px 3px;
}

.full .ts-control {
  background-color: #fff;
}

.disabled .ts-control, .disabled .ts-control * {
  cursor: default !important;
}

.focus .ts-control {
  box-shadow: none;
}

.ts-control > * {
  vertical-align: baseline;
  display: inline-block;
}

.ts-wrapper.multi .ts-control > div {
  cursor: pointer;
  margin: 0 3px 3px 0;
  padding: 2px 6px;
  background: #f2f2f2;
  color: #303030;
  border: 0px solid #d0d0d0;
}

.ts-wrapper.multi .ts-control > div.active {
  background: #e8e8e8;
  color: #303030;
  border: 0px solid #cacaca;
}

.ts-wrapper.multi.disabled .ts-control > div, .ts-wrapper.multi.disabled .ts-control > div.active {
  color: #7d7d7d;
  background: white;
  border: 0px solid white;
}

.ts-control > input {
  flex: 1 1 auto;
  min-width: 7rem;
  display: inline-block !important;
  padding: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-indent: 0 !important;
  border: 0 none !important;
  background: none !important;
  line-height: inherit !important;
  -webkit-user-select: auto !important;
  -moz-user-select: auto !important;
  -ms-user-select: auto !important;
  user-select: auto !important;
  box-shadow: none !important;
}

.ts-control > input::-ms-clear {
  display: none;
}

.ts-control > input:focus {
  outline: none !important;
}

.has-items .ts-control > input {
  margin: 0px 4px !important;
}

.ts-control.rtl {
  text-align: right;
}

.ts-control.rtl.single .ts-control:after {
  left: 15px;
  right: auto;
}

.ts-control.rtl .ts-control > input {
  margin: 0px 4px 0px -2px !important;
}

.disabled .ts-control {
  opacity: 0.5;
  background-color: #fafafa;
}

.input-hidden .ts-control > input {
  opacity: 0;
  position: absolute;
  left: -10000px;
}

.ts-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 10;
  border: 1px solid #d0d0d0;
  background: #fff;
  margin: 0.25rem 0 0 0;
  border-top: 0 none;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 3px 3px;
}

.ts-dropdown [data-selectable] {
  cursor: pointer;
  overflow: hidden;
}

.ts-dropdown [data-selectable] .highlight {
  background: rgba(125, 168, 208, 0.2);
  border-radius: 1px;
}

.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results,
.ts-dropdown .create {
  padding: 5px 8px;
}

.ts-dropdown .option, .ts-dropdown [data-disabled], .ts-dropdown [data-disabled] [data-selectable].option {
  cursor: inherit;
  opacity: 0.5;
}

.ts-dropdown [data-selectable].option {
  opacity: 1;
  cursor: pointer;
}

.ts-dropdown .optgroup:first-child .optgroup-header {
  border-top: 0 none;
}

.ts-dropdown .optgroup-header {
  color: #303030;
  background: #fff;
  cursor: default;
}

.ts-dropdown .active {
  background-color: #f5fafd;
  color: #495c68;
}

.ts-dropdown .active.create {
  color: #495c68;
}

.ts-dropdown .create {
  color: rgba(48, 48, 48, 0.5);
}

.ts-dropdown .spinner {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 5px 8px;
}

.ts-dropdown .spinner:after {
  content: " ";
  display: block;
  width: 24px;
  height: 24px;
  margin: 3px;
  border-radius: 50%;
  border: 5px solid #d0d0d0;
  border-color: #d0d0d0 transparent #d0d0d0 transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.ts-dropdown-content {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 200px;
  overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.ts-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}


/**
 * Adapted from: https://codepen.io/chriscoyier/pen/uwJjr
 *
 * HTML example:
   <html>
     <head>
       Stuff
     </head>

     <div class="page_wrap">
       <nav>
         Olá
       </nav>

       <body>
         Stuff
       </body>
     </div>

     <footer>
       Adeus
     </footer>
   </html>
 *
 * Usage if you're using the default elements (previous example):
 * @include sticky-footer(30px);
 *
 * Usage if you want to define the elements:
 * @include sticky-footer(30px, '.page', '.footer');
 *
 */
/**
 * Adapted from: https://css-tricks.com/centering-css-complete-guide/, https://stackoverflow.com/questions/38221573/flexbox-vertical-centering-plus-a-sticky-footer
 *
 * HTML example:
   <div class="centered_div">
     <div class="child_centerer">
       Olá.
     </div>
   </div>
 *
 * CSS example:
   .centered_div{
    background-color: $x_primary-main;
    height: 500px;

    @include centerer-flexbox;

    .child_centerer
    {
       background-color: $x_warning-main;
    }

   }
 *
 * Usage if you're using the default elements (previous example):
 * @include centerer;
 *
 * Usage if you want to define the elements:
 * @include centerer(true, false);
 *
 */
/**
 * Adapted from: https://codepen.io/kristyjy/pen/rewVjX
 *
 * HTML example:
   <div class="hamburger hamburger-default"><span></span></div>
 *
 * Usage if you're using the default elements (previous example):
 * @include burger-icon;
 *
 * Usage if you want to define the elements:
 * @include burger-icon(25px,20px,$s_border);
 *
 */
/**
 * This stylesheet has 5 sections:
 *
 * 1.Neutral Colors - Where are defined the neutral colors
 * This colors could be or not in the project palette
 * Usually this colors are shades of white, gray and black but it could also be
 * shades of beige for example
 *
 * 2.Theme Colors - Where are defined the project palette
 *
 * 3.Other Colors - Where are defined other colors you need.
 * - Project-specific & general colors  -
 *
 * 4.Social Networks Colors - Where are defined the colors of social networks
 *
 * 5.Functions - Where are defined other color functions
 *   - Adaptative Color:
 *     Given a certain color, returns black* or white*, depending on the
 * contrast. You can also define the dark and light color that it should return.
 *     eg.:
 *       adaptative-color( theme-color() ) // returns black or white
 *
 *       adaptative-color( theme-color(), neutral-color($key: "600"), neutral-color($key: "200") ) // returns #4F4F4F or #ECECEC
 *
 *
 * HOW TO USE:
 * 1. Add a color to a section:
 *    - Choose a section and a name to the color, then add it to the map.merge
 * of the chosen section. Don't forget to add a comma on the end of the
 * previous line.
 *    eg.: $theme-colors: map.merge(
 *           (
 *             ... ,
 *             "name of the color": #COLORHEX / colorname
 *           ),
 *           $theme-colors
 *         );
 *
 * 2. Call the right color
 *    - function-name()
 *      to use the default color of the section
 *    eg.: theme-color() // = theme-color("blue") = #007bff
 *
 *    - function-name("color name")
 *      to use a specific color of the section
 *    eg.: theme-color("secondary") // = #828282
 *
 * 3. Request a Theme Color Shade
 *    You can call for shades of theme color
 *
 *    - Lighter shade (positive percentage)
 *    eg.: theme-color-shade("primary", 30%)
 *
 *    - Darker shade (negative percentage)
 *    eg.: theme-color-shade("primary", -30%)
 *
 *
 * TIP:
 * If it gets easier, you can use comments next to the colors as notes so you
 * can check more easily where you are using this color on the website.
 *
 * eg.: "white": white, //background -- sidebar, container...
 *
 */
/* NEUTRAL COLORS */
/* THEME COLORS */
/* OTHER COLORS */
/* SOCIAL NETWORKS COLORS */
/* FUNCTIONS */
/* Adaptative Color */
/**
 * This stylesheet has 4 sections:
 *
 * 1.Breakpoints
 *
 * 2.Sizes
 *
 * 3.Spacing
 *
 * 4.Animation
 *
 *
 * How to declare variables:
 *   $a_name
 *
 *   a_: Should be the initial of the variable type
 *     b_  –— border
 *     c_  –— color
 *     d_  –— duration
 *     f_  –— font
 *     fw_ –— font-weight
 *     fs_ –— font-size
 *     h_  –— height
 *     w_  –— width
 *     s_  –— size
 *
 *   name: Should be the name of the variable.
 *         For more info on naming variables check the README file
 */
/* BREAKPOINTS */
/* SIZES */
/* SPACING */
/*
 * if you change this values and don't want to change your styles, don't forget
 * to change all the spacer(key_you_have_changed) to spacer(new_key_of_the_old_value)
 *
 * eg.:
 * ---- before changing values
 *   5: 64px                        .class { margin-right: spacer(6); // 152px }
 *   6: 152px
 *
 * ---- after changing values
 *   5: 64px                        .class { margin-right: spacer(6); //  72px }
 *   6: 72px                        -- you need to change the 6 to a 7 if you
 *   7: 152px                          want to keep the 152px margin-right    --
 *                                  .class { margin-right: spacer(7); // 152px }
 */
/* ANIMATION */
/* RADIUS */
/*
 * if you change this values and don't want to change your styles, don't forget
 * to change all the radius(key_you_have_changed) to radius(new_key_of_the_old_value)
 *
 * eg.:
 * ---- before changing values
 *   3: 10px                        .class { border-radius: radius(4); // 20px }
 *   4: 20px
 *
 * ---- after changing values
 *   3: 10px                        .class { border-radius: radius(4); // 16px }
 *   4: 16px                        -- you need to change the 4 to a 5 if you
 *   5: 20px                           want to keep the 20px border-radius    --
 *                                  .class { border-radius: radius(5); // 20px }
 */
/* MARGIN */
.m-0 {
  margin: 0 !important;
}

.m-x-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.m-y-0 {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

.m-t-0 {
  margin-top: 0 !important;
}

.m-b-0 {
  margin-bottom: 0 !important;
}

.m-l-0 {
  margin-left: 0 !important;
}

.m-r-0 {
  margin-right: 0 !important;
}

/* PADDING */
.p-0 {
  padding: 0 !important;
}

.p-x-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.p-y-0 {
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}

.p-t-0 {
  padding-top: 0 !important;
}

.p-b-0 {
  padding-bottom: 0 !important;
}

.p-l-0 {
  padding-left: 0 !important;
}

.p-r-0 {
  padding-right: 0 !important;
}

/* GAP */
.gap-0 {
  gap: 0 !important;
}

.gap-y-0 {
  gap: 0 0 !important;
}

.gap-x-0 {
  gap: 0 0 !important;
}

.gap-0-0 {
  gap: 0 0 !important;
}

.gap-0-1 {
  gap: 0 8px !important;
}

.gap-0-2 {
  gap: 0 16px !important;
}

.gap-0-3 {
  gap: 0 24px !important;
}

.gap-0-4 {
  gap: 0 32px !important;
}

.gap-0-5 {
  gap: 0 40px !important;
}

.gap-0-6 {
  gap: 0 48px !important;
}

.gap-0-7 {
  gap: 0 56px !important;
}

.gap-0-8 {
  gap: 0 64px !important;
}

.gap-0-9 {
  gap: 0 72px !important;
}

.gap-0-10 {
  gap: 0 80px !important;
}

.gap-0-11 {
  gap: 0 88px !important;
}

.gap-0-12 {
  gap: 0 96px !important;
}

.gap-0-13 {
  gap: 0 104px !important;
}

.gap-0-auto {
  gap: 0 auto !important;
}

/* LETTER SPACING */
.letter-spacing-0 {
  letter-spacing: 0 !important;
}

/* MARGIN */
.m-1 {
  margin: 8px !important;
}

.m-x-1 {
  margin-left: 8px !important;
  margin-right: 8px !important;
}

.m-y-1 {
  margin-bottom: 8px !important;
  margin-top: 8px !important;
}

.m-t-1 {
  margin-top: 8px !important;
}

.m-b-1 {
  margin-bottom: 8px !important;
}

.m-l-1 {
  margin-left: 8px !important;
}

.m-r-1 {
  margin-right: 8px !important;
}

/* PADDING */
.p-1 {
  padding: 8px !important;
}

.p-x-1 {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.p-y-1 {
  padding-bottom: 8px !important;
  padding-top: 8px !important;
}

.p-t-1 {
  padding-top: 8px !important;
}

.p-b-1 {
  padding-bottom: 8px !important;
}

.p-l-1 {
  padding-left: 8px !important;
}

.p-r-1 {
  padding-right: 8px !important;
}

/* GAP */
.gap-1 {
  gap: 8px !important;
}

.gap-y-1 {
  gap: 8px 0 !important;
}

.gap-x-1 {
  gap: 0 8px !important;
}

.gap-1-0 {
  gap: 8px 0 !important;
}

.gap-1-1 {
  gap: 8px 8px !important;
}

.gap-1-2 {
  gap: 8px 16px !important;
}

.gap-1-3 {
  gap: 8px 24px !important;
}

.gap-1-4 {
  gap: 8px 32px !important;
}

.gap-1-5 {
  gap: 8px 40px !important;
}

.gap-1-6 {
  gap: 8px 48px !important;
}

.gap-1-7 {
  gap: 8px 56px !important;
}

.gap-1-8 {
  gap: 8px 64px !important;
}

.gap-1-9 {
  gap: 8px 72px !important;
}

.gap-1-10 {
  gap: 8px 80px !important;
}

.gap-1-11 {
  gap: 8px 88px !important;
}

.gap-1-12 {
  gap: 8px 96px !important;
}

.gap-1-13 {
  gap: 8px 104px !important;
}

.gap-1-auto {
  gap: 8px auto !important;
}

/* LETTER SPACING */
.letter-spacing-1 {
  letter-spacing: 0.4px !important;
}

/* MARGIN */
.m-2 {
  margin: 16px !important;
}

.m-x-2 {
  margin-left: 16px !important;
  margin-right: 16px !important;
}

.m-y-2 {
  margin-bottom: 16px !important;
  margin-top: 16px !important;
}

.m-t-2 {
  margin-top: 16px !important;
}

.m-b-2 {
  margin-bottom: 16px !important;
}

.m-l-2 {
  margin-left: 16px !important;
}

.m-r-2 {
  margin-right: 16px !important;
}

/* PADDING */
.p-2 {
  padding: 16px !important;
}

.p-x-2 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.p-y-2 {
  padding-bottom: 16px !important;
  padding-top: 16px !important;
}

.p-t-2 {
  padding-top: 16px !important;
}

.p-b-2 {
  padding-bottom: 16px !important;
}

.p-l-2 {
  padding-left: 16px !important;
}

.p-r-2 {
  padding-right: 16px !important;
}

/* GAP */
.gap-2 {
  gap: 16px !important;
}

.gap-y-2 {
  gap: 16px 0 !important;
}

.gap-x-2 {
  gap: 0 16px !important;
}

.gap-2-0 {
  gap: 16px 0 !important;
}

.gap-2-1 {
  gap: 16px 8px !important;
}

.gap-2-2 {
  gap: 16px 16px !important;
}

.gap-2-3 {
  gap: 16px 24px !important;
}

.gap-2-4 {
  gap: 16px 32px !important;
}

.gap-2-5 {
  gap: 16px 40px !important;
}

.gap-2-6 {
  gap: 16px 48px !important;
}

.gap-2-7 {
  gap: 16px 56px !important;
}

.gap-2-8 {
  gap: 16px 64px !important;
}

.gap-2-9 {
  gap: 16px 72px !important;
}

.gap-2-10 {
  gap: 16px 80px !important;
}

.gap-2-11 {
  gap: 16px 88px !important;
}

.gap-2-12 {
  gap: 16px 96px !important;
}

.gap-2-13 {
  gap: 16px 104px !important;
}

.gap-2-auto {
  gap: 16px auto !important;
}

/* LETTER SPACING */
.letter-spacing-2 {
  letter-spacing: 0.8px !important;
}

/* MARGIN */
.m-3 {
  margin: 24px !important;
}

.m-x-3 {
  margin-left: 24px !important;
  margin-right: 24px !important;
}

.m-y-3 {
  margin-bottom: 24px !important;
  margin-top: 24px !important;
}

.m-t-3 {
  margin-top: 24px !important;
}

.m-b-3 {
  margin-bottom: 24px !important;
}

.m-l-3 {
  margin-left: 24px !important;
}

.m-r-3 {
  margin-right: 24px !important;
}

/* PADDING */
.p-3 {
  padding: 24px !important;
}

.p-x-3 {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.p-y-3 {
  padding-bottom: 24px !important;
  padding-top: 24px !important;
}

.p-t-3 {
  padding-top: 24px !important;
}

.p-b-3 {
  padding-bottom: 24px !important;
}

.p-l-3 {
  padding-left: 24px !important;
}

.p-r-3 {
  padding-right: 24px !important;
}

/* GAP */
.gap-3 {
  gap: 24px !important;
}

.gap-y-3 {
  gap: 24px 0 !important;
}

.gap-x-3 {
  gap: 0 24px !important;
}

.gap-3-0 {
  gap: 24px 0 !important;
}

.gap-3-1 {
  gap: 24px 8px !important;
}

.gap-3-2 {
  gap: 24px 16px !important;
}

.gap-3-3 {
  gap: 24px 24px !important;
}

.gap-3-4 {
  gap: 24px 32px !important;
}

.gap-3-5 {
  gap: 24px 40px !important;
}

.gap-3-6 {
  gap: 24px 48px !important;
}

.gap-3-7 {
  gap: 24px 56px !important;
}

.gap-3-8 {
  gap: 24px 64px !important;
}

.gap-3-9 {
  gap: 24px 72px !important;
}

.gap-3-10 {
  gap: 24px 80px !important;
}

.gap-3-11 {
  gap: 24px 88px !important;
}

.gap-3-12 {
  gap: 24px 96px !important;
}

.gap-3-13 {
  gap: 24px 104px !important;
}

.gap-3-auto {
  gap: 24px auto !important;
}

/* LETTER SPACING */
.letter-spacing-3 {
  letter-spacing: 1.2px !important;
}

/* MARGIN */
.m-4 {
  margin: 32px !important;
}

.m-x-4 {
  margin-left: 32px !important;
  margin-right: 32px !important;
}

.m-y-4 {
  margin-bottom: 32px !important;
  margin-top: 32px !important;
}

.m-t-4 {
  margin-top: 32px !important;
}

.m-b-4 {
  margin-bottom: 32px !important;
}

.m-l-4 {
  margin-left: 32px !important;
}

.m-r-4 {
  margin-right: 32px !important;
}

/* PADDING */
.p-4 {
  padding: 32px !important;
}

.p-x-4 {
  padding-left: 32px !important;
  padding-right: 32px !important;
}

.p-y-4 {
  padding-bottom: 32px !important;
  padding-top: 32px !important;
}

.p-t-4 {
  padding-top: 32px !important;
}

.p-b-4 {
  padding-bottom: 32px !important;
}

.p-l-4 {
  padding-left: 32px !important;
}

.p-r-4 {
  padding-right: 32px !important;
}

/* GAP */
.gap-4 {
  gap: 32px !important;
}

.gap-y-4 {
  gap: 32px 0 !important;
}

.gap-x-4 {
  gap: 0 32px !important;
}

.gap-4-0 {
  gap: 32px 0 !important;
}

.gap-4-1 {
  gap: 32px 8px !important;
}

.gap-4-2 {
  gap: 32px 16px !important;
}

.gap-4-3 {
  gap: 32px 24px !important;
}

.gap-4-4 {
  gap: 32px 32px !important;
}

.gap-4-5 {
  gap: 32px 40px !important;
}

.gap-4-6 {
  gap: 32px 48px !important;
}

.gap-4-7 {
  gap: 32px 56px !important;
}

.gap-4-8 {
  gap: 32px 64px !important;
}

.gap-4-9 {
  gap: 32px 72px !important;
}

.gap-4-10 {
  gap: 32px 80px !important;
}

.gap-4-11 {
  gap: 32px 88px !important;
}

.gap-4-12 {
  gap: 32px 96px !important;
}

.gap-4-13 {
  gap: 32px 104px !important;
}

.gap-4-auto {
  gap: 32px auto !important;
}

/* LETTER SPACING */
.letter-spacing-4 {
  letter-spacing: 1.6px !important;
}

/* MARGIN */
.m-5 {
  margin: 40px !important;
}

.m-x-5 {
  margin-left: 40px !important;
  margin-right: 40px !important;
}

.m-y-5 {
  margin-bottom: 40px !important;
  margin-top: 40px !important;
}

.m-t-5 {
  margin-top: 40px !important;
}

.m-b-5 {
  margin-bottom: 40px !important;
}

.m-l-5 {
  margin-left: 40px !important;
}

.m-r-5 {
  margin-right: 40px !important;
}

/* PADDING */
.p-5 {
  padding: 40px !important;
}

.p-x-5 {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

.p-y-5 {
  padding-bottom: 40px !important;
  padding-top: 40px !important;
}

.p-t-5 {
  padding-top: 40px !important;
}

.p-b-5 {
  padding-bottom: 40px !important;
}

.p-l-5 {
  padding-left: 40px !important;
}

.p-r-5 {
  padding-right: 40px !important;
}

/* GAP */
.gap-5 {
  gap: 40px !important;
}

.gap-y-5 {
  gap: 40px 0 !important;
}

.gap-x-5 {
  gap: 0 40px !important;
}

.gap-5-0 {
  gap: 40px 0 !important;
}

.gap-5-1 {
  gap: 40px 8px !important;
}

.gap-5-2 {
  gap: 40px 16px !important;
}

.gap-5-3 {
  gap: 40px 24px !important;
}

.gap-5-4 {
  gap: 40px 32px !important;
}

.gap-5-5 {
  gap: 40px 40px !important;
}

.gap-5-6 {
  gap: 40px 48px !important;
}

.gap-5-7 {
  gap: 40px 56px !important;
}

.gap-5-8 {
  gap: 40px 64px !important;
}

.gap-5-9 {
  gap: 40px 72px !important;
}

.gap-5-10 {
  gap: 40px 80px !important;
}

.gap-5-11 {
  gap: 40px 88px !important;
}

.gap-5-12 {
  gap: 40px 96px !important;
}

.gap-5-13 {
  gap: 40px 104px !important;
}

.gap-5-auto {
  gap: 40px auto !important;
}

/* LETTER SPACING */
.letter-spacing-5 {
  letter-spacing: 2px !important;
}

/* MARGIN */
.m-6 {
  margin: 48px !important;
}

.m-x-6 {
  margin-left: 48px !important;
  margin-right: 48px !important;
}

.m-y-6 {
  margin-bottom: 48px !important;
  margin-top: 48px !important;
}

.m-t-6 {
  margin-top: 48px !important;
}

.m-b-6 {
  margin-bottom: 48px !important;
}

.m-l-6 {
  margin-left: 48px !important;
}

.m-r-6 {
  margin-right: 48px !important;
}

/* PADDING */
.p-6 {
  padding: 48px !important;
}

.p-x-6 {
  padding-left: 48px !important;
  padding-right: 48px !important;
}

.p-y-6 {
  padding-bottom: 48px !important;
  padding-top: 48px !important;
}

.p-t-6 {
  padding-top: 48px !important;
}

.p-b-6 {
  padding-bottom: 48px !important;
}

.p-l-6 {
  padding-left: 48px !important;
}

.p-r-6 {
  padding-right: 48px !important;
}

/* GAP */
.gap-6 {
  gap: 48px !important;
}

.gap-y-6 {
  gap: 48px 0 !important;
}

.gap-x-6 {
  gap: 0 48px !important;
}

.gap-6-0 {
  gap: 48px 0 !important;
}

.gap-6-1 {
  gap: 48px 8px !important;
}

.gap-6-2 {
  gap: 48px 16px !important;
}

.gap-6-3 {
  gap: 48px 24px !important;
}

.gap-6-4 {
  gap: 48px 32px !important;
}

.gap-6-5 {
  gap: 48px 40px !important;
}

.gap-6-6 {
  gap: 48px 48px !important;
}

.gap-6-7 {
  gap: 48px 56px !important;
}

.gap-6-8 {
  gap: 48px 64px !important;
}

.gap-6-9 {
  gap: 48px 72px !important;
}

.gap-6-10 {
  gap: 48px 80px !important;
}

.gap-6-11 {
  gap: 48px 88px !important;
}

.gap-6-12 {
  gap: 48px 96px !important;
}

.gap-6-13 {
  gap: 48px 104px !important;
}

.gap-6-auto {
  gap: 48px auto !important;
}

/* LETTER SPACING */
.letter-spacing-6 {
  letter-spacing: 2.4px !important;
}

/* MARGIN */
.m-7 {
  margin: 56px !important;
}

.m-x-7 {
  margin-left: 56px !important;
  margin-right: 56px !important;
}

.m-y-7 {
  margin-bottom: 56px !important;
  margin-top: 56px !important;
}

.m-t-7 {
  margin-top: 56px !important;
}

.m-b-7 {
  margin-bottom: 56px !important;
}

.m-l-7 {
  margin-left: 56px !important;
}

.m-r-7 {
  margin-right: 56px !important;
}

/* PADDING */
.p-7 {
  padding: 56px !important;
}

.p-x-7 {
  padding-left: 56px !important;
  padding-right: 56px !important;
}

.p-y-7 {
  padding-bottom: 56px !important;
  padding-top: 56px !important;
}

.p-t-7 {
  padding-top: 56px !important;
}

.p-b-7 {
  padding-bottom: 56px !important;
}

.p-l-7 {
  padding-left: 56px !important;
}

.p-r-7 {
  padding-right: 56px !important;
}

/* GAP */
.gap-7 {
  gap: 56px !important;
}

.gap-y-7 {
  gap: 56px 0 !important;
}

.gap-x-7 {
  gap: 0 56px !important;
}

.gap-7-0 {
  gap: 56px 0 !important;
}

.gap-7-1 {
  gap: 56px 8px !important;
}

.gap-7-2 {
  gap: 56px 16px !important;
}

.gap-7-3 {
  gap: 56px 24px !important;
}

.gap-7-4 {
  gap: 56px 32px !important;
}

.gap-7-5 {
  gap: 56px 40px !important;
}

.gap-7-6 {
  gap: 56px 48px !important;
}

.gap-7-7 {
  gap: 56px 56px !important;
}

.gap-7-8 {
  gap: 56px 64px !important;
}

.gap-7-9 {
  gap: 56px 72px !important;
}

.gap-7-10 {
  gap: 56px 80px !important;
}

.gap-7-11 {
  gap: 56px 88px !important;
}

.gap-7-12 {
  gap: 56px 96px !important;
}

.gap-7-13 {
  gap: 56px 104px !important;
}

.gap-7-auto {
  gap: 56px auto !important;
}

/* LETTER SPACING */
.letter-spacing-7 {
  letter-spacing: 2.8px !important;
}

/* MARGIN */
.m-8 {
  margin: 64px !important;
}

.m-x-8 {
  margin-left: 64px !important;
  margin-right: 64px !important;
}

.m-y-8 {
  margin-bottom: 64px !important;
  margin-top: 64px !important;
}

.m-t-8 {
  margin-top: 64px !important;
}

.m-b-8 {
  margin-bottom: 64px !important;
}

.m-l-8 {
  margin-left: 64px !important;
}

.m-r-8 {
  margin-right: 64px !important;
}

/* PADDING */
.p-8 {
  padding: 64px !important;
}

.p-x-8 {
  padding-left: 64px !important;
  padding-right: 64px !important;
}

.p-y-8 {
  padding-bottom: 64px !important;
  padding-top: 64px !important;
}

.p-t-8 {
  padding-top: 64px !important;
}

.p-b-8 {
  padding-bottom: 64px !important;
}

.p-l-8 {
  padding-left: 64px !important;
}

.p-r-8 {
  padding-right: 64px !important;
}

/* GAP */
.gap-8 {
  gap: 64px !important;
}

.gap-y-8 {
  gap: 64px 0 !important;
}

.gap-x-8 {
  gap: 0 64px !important;
}

.gap-8-0 {
  gap: 64px 0 !important;
}

.gap-8-1 {
  gap: 64px 8px !important;
}

.gap-8-2 {
  gap: 64px 16px !important;
}

.gap-8-3 {
  gap: 64px 24px !important;
}

.gap-8-4 {
  gap: 64px 32px !important;
}

.gap-8-5 {
  gap: 64px 40px !important;
}

.gap-8-6 {
  gap: 64px 48px !important;
}

.gap-8-7 {
  gap: 64px 56px !important;
}

.gap-8-8 {
  gap: 64px 64px !important;
}

.gap-8-9 {
  gap: 64px 72px !important;
}

.gap-8-10 {
  gap: 64px 80px !important;
}

.gap-8-11 {
  gap: 64px 88px !important;
}

.gap-8-12 {
  gap: 64px 96px !important;
}

.gap-8-13 {
  gap: 64px 104px !important;
}

.gap-8-auto {
  gap: 64px auto !important;
}

/* LETTER SPACING */
.letter-spacing-8 {
  letter-spacing: 3.2px !important;
}

/* MARGIN */
.m-9 {
  margin: 72px !important;
}

.m-x-9 {
  margin-left: 72px !important;
  margin-right: 72px !important;
}

.m-y-9 {
  margin-bottom: 72px !important;
  margin-top: 72px !important;
}

.m-t-9 {
  margin-top: 72px !important;
}

.m-b-9 {
  margin-bottom: 72px !important;
}

.m-l-9 {
  margin-left: 72px !important;
}

.m-r-9 {
  margin-right: 72px !important;
}

/* PADDING */
.p-9 {
  padding: 72px !important;
}

.p-x-9 {
  padding-left: 72px !important;
  padding-right: 72px !important;
}

.p-y-9 {
  padding-bottom: 72px !important;
  padding-top: 72px !important;
}

.p-t-9 {
  padding-top: 72px !important;
}

.p-b-9 {
  padding-bottom: 72px !important;
}

.p-l-9 {
  padding-left: 72px !important;
}

.p-r-9 {
  padding-right: 72px !important;
}

/* GAP */
.gap-9 {
  gap: 72px !important;
}

.gap-y-9 {
  gap: 72px 0 !important;
}

.gap-x-9 {
  gap: 0 72px !important;
}

.gap-9-0 {
  gap: 72px 0 !important;
}

.gap-9-1 {
  gap: 72px 8px !important;
}

.gap-9-2 {
  gap: 72px 16px !important;
}

.gap-9-3 {
  gap: 72px 24px !important;
}

.gap-9-4 {
  gap: 72px 32px !important;
}

.gap-9-5 {
  gap: 72px 40px !important;
}

.gap-9-6 {
  gap: 72px 48px !important;
}

.gap-9-7 {
  gap: 72px 56px !important;
}

.gap-9-8 {
  gap: 72px 64px !important;
}

.gap-9-9 {
  gap: 72px 72px !important;
}

.gap-9-10 {
  gap: 72px 80px !important;
}

.gap-9-11 {
  gap: 72px 88px !important;
}

.gap-9-12 {
  gap: 72px 96px !important;
}

.gap-9-13 {
  gap: 72px 104px !important;
}

.gap-9-auto {
  gap: 72px auto !important;
}

/* LETTER SPACING */
.letter-spacing-9 {
  letter-spacing: 3.6px !important;
}

/* MARGIN */
.m-10 {
  margin: 80px !important;
}

.m-x-10 {
  margin-left: 80px !important;
  margin-right: 80px !important;
}

.m-y-10 {
  margin-bottom: 80px !important;
  margin-top: 80px !important;
}

.m-t-10 {
  margin-top: 80px !important;
}

.m-b-10 {
  margin-bottom: 80px !important;
}

.m-l-10 {
  margin-left: 80px !important;
}

.m-r-10 {
  margin-right: 80px !important;
}

/* PADDING */
.p-10 {
  padding: 80px !important;
}

.p-x-10 {
  padding-left: 80px !important;
  padding-right: 80px !important;
}

.p-y-10 {
  padding-bottom: 80px !important;
  padding-top: 80px !important;
}

.p-t-10 {
  padding-top: 80px !important;
}

.p-b-10 {
  padding-bottom: 80px !important;
}

.p-l-10 {
  padding-left: 80px !important;
}

.p-r-10 {
  padding-right: 80px !important;
}

/* GAP */
.gap-10 {
  gap: 80px !important;
}

.gap-y-10 {
  gap: 80px 0 !important;
}

.gap-x-10 {
  gap: 0 80px !important;
}

.gap-10-0 {
  gap: 80px 0 !important;
}

.gap-10-1 {
  gap: 80px 8px !important;
}

.gap-10-2 {
  gap: 80px 16px !important;
}

.gap-10-3 {
  gap: 80px 24px !important;
}

.gap-10-4 {
  gap: 80px 32px !important;
}

.gap-10-5 {
  gap: 80px 40px !important;
}

.gap-10-6 {
  gap: 80px 48px !important;
}

.gap-10-7 {
  gap: 80px 56px !important;
}

.gap-10-8 {
  gap: 80px 64px !important;
}

.gap-10-9 {
  gap: 80px 72px !important;
}

.gap-10-10 {
  gap: 80px 80px !important;
}

.gap-10-11 {
  gap: 80px 88px !important;
}

.gap-10-12 {
  gap: 80px 96px !important;
}

.gap-10-13 {
  gap: 80px 104px !important;
}

.gap-10-auto {
  gap: 80px auto !important;
}

/* LETTER SPACING */
.letter-spacing-10 {
  letter-spacing: 4px !important;
}

/* MARGIN */
.m-11 {
  margin: 88px !important;
}

.m-x-11 {
  margin-left: 88px !important;
  margin-right: 88px !important;
}

.m-y-11 {
  margin-bottom: 88px !important;
  margin-top: 88px !important;
}

.m-t-11 {
  margin-top: 88px !important;
}

.m-b-11 {
  margin-bottom: 88px !important;
}

.m-l-11 {
  margin-left: 88px !important;
}

.m-r-11 {
  margin-right: 88px !important;
}

/* PADDING */
.p-11 {
  padding: 88px !important;
}

.p-x-11 {
  padding-left: 88px !important;
  padding-right: 88px !important;
}

.p-y-11 {
  padding-bottom: 88px !important;
  padding-top: 88px !important;
}

.p-t-11 {
  padding-top: 88px !important;
}

.p-b-11 {
  padding-bottom: 88px !important;
}

.p-l-11 {
  padding-left: 88px !important;
}

.p-r-11 {
  padding-right: 88px !important;
}

/* GAP */
.gap-11 {
  gap: 88px !important;
}

.gap-y-11 {
  gap: 88px 0 !important;
}

.gap-x-11 {
  gap: 0 88px !important;
}

.gap-11-0 {
  gap: 88px 0 !important;
}

.gap-11-1 {
  gap: 88px 8px !important;
}

.gap-11-2 {
  gap: 88px 16px !important;
}

.gap-11-3 {
  gap: 88px 24px !important;
}

.gap-11-4 {
  gap: 88px 32px !important;
}

.gap-11-5 {
  gap: 88px 40px !important;
}

.gap-11-6 {
  gap: 88px 48px !important;
}

.gap-11-7 {
  gap: 88px 56px !important;
}

.gap-11-8 {
  gap: 88px 64px !important;
}

.gap-11-9 {
  gap: 88px 72px !important;
}

.gap-11-10 {
  gap: 88px 80px !important;
}

.gap-11-11 {
  gap: 88px 88px !important;
}

.gap-11-12 {
  gap: 88px 96px !important;
}

.gap-11-13 {
  gap: 88px 104px !important;
}

.gap-11-auto {
  gap: 88px auto !important;
}

/* LETTER SPACING */
.letter-spacing-11 {
  letter-spacing: 4.4px !important;
}

/* MARGIN */
.m-12 {
  margin: 96px !important;
}

.m-x-12 {
  margin-left: 96px !important;
  margin-right: 96px !important;
}

.m-y-12 {
  margin-bottom: 96px !important;
  margin-top: 96px !important;
}

.m-t-12 {
  margin-top: 96px !important;
}

.m-b-12 {
  margin-bottom: 96px !important;
}

.m-l-12 {
  margin-left: 96px !important;
}

.m-r-12 {
  margin-right: 96px !important;
}

/* PADDING */
.p-12 {
  padding: 96px !important;
}

.p-x-12 {
  padding-left: 96px !important;
  padding-right: 96px !important;
}

.p-y-12 {
  padding-bottom: 96px !important;
  padding-top: 96px !important;
}

.p-t-12 {
  padding-top: 96px !important;
}

.p-b-12 {
  padding-bottom: 96px !important;
}

.p-l-12 {
  padding-left: 96px !important;
}

.p-r-12 {
  padding-right: 96px !important;
}

/* GAP */
.gap-12 {
  gap: 96px !important;
}

.gap-y-12 {
  gap: 96px 0 !important;
}

.gap-x-12 {
  gap: 0 96px !important;
}

.gap-12-0 {
  gap: 96px 0 !important;
}

.gap-12-1 {
  gap: 96px 8px !important;
}

.gap-12-2 {
  gap: 96px 16px !important;
}

.gap-12-3 {
  gap: 96px 24px !important;
}

.gap-12-4 {
  gap: 96px 32px !important;
}

.gap-12-5 {
  gap: 96px 40px !important;
}

.gap-12-6 {
  gap: 96px 48px !important;
}

.gap-12-7 {
  gap: 96px 56px !important;
}

.gap-12-8 {
  gap: 96px 64px !important;
}

.gap-12-9 {
  gap: 96px 72px !important;
}

.gap-12-10 {
  gap: 96px 80px !important;
}

.gap-12-11 {
  gap: 96px 88px !important;
}

.gap-12-12 {
  gap: 96px 96px !important;
}

.gap-12-13 {
  gap: 96px 104px !important;
}

.gap-12-auto {
  gap: 96px auto !important;
}

/* LETTER SPACING */
.letter-spacing-12 {
  letter-spacing: 4.8px !important;
}

/* MARGIN */
.m-13 {
  margin: 104px !important;
}

.m-x-13 {
  margin-left: 104px !important;
  margin-right: 104px !important;
}

.m-y-13 {
  margin-bottom: 104px !important;
  margin-top: 104px !important;
}

.m-t-13 {
  margin-top: 104px !important;
}

.m-b-13 {
  margin-bottom: 104px !important;
}

.m-l-13 {
  margin-left: 104px !important;
}

.m-r-13 {
  margin-right: 104px !important;
}

/* PADDING */
.p-13 {
  padding: 104px !important;
}

.p-x-13 {
  padding-left: 104px !important;
  padding-right: 104px !important;
}

.p-y-13 {
  padding-bottom: 104px !important;
  padding-top: 104px !important;
}

.p-t-13 {
  padding-top: 104px !important;
}

.p-b-13 {
  padding-bottom: 104px !important;
}

.p-l-13 {
  padding-left: 104px !important;
}

.p-r-13 {
  padding-right: 104px !important;
}

/* GAP */
.gap-13 {
  gap: 104px !important;
}

.gap-y-13 {
  gap: 104px 0 !important;
}

.gap-x-13 {
  gap: 0 104px !important;
}

.gap-13-0 {
  gap: 104px 0 !important;
}

.gap-13-1 {
  gap: 104px 8px !important;
}

.gap-13-2 {
  gap: 104px 16px !important;
}

.gap-13-3 {
  gap: 104px 24px !important;
}

.gap-13-4 {
  gap: 104px 32px !important;
}

.gap-13-5 {
  gap: 104px 40px !important;
}

.gap-13-6 {
  gap: 104px 48px !important;
}

.gap-13-7 {
  gap: 104px 56px !important;
}

.gap-13-8 {
  gap: 104px 64px !important;
}

.gap-13-9 {
  gap: 104px 72px !important;
}

.gap-13-10 {
  gap: 104px 80px !important;
}

.gap-13-11 {
  gap: 104px 88px !important;
}

.gap-13-12 {
  gap: 104px 96px !important;
}

.gap-13-13 {
  gap: 104px 104px !important;
}

.gap-13-auto {
  gap: 104px auto !important;
}

/* LETTER SPACING */
.letter-spacing-13 {
  letter-spacing: 5.2px !important;
}

/* MARGIN */
.m-auto {
  margin: auto !important;
}

.m-x-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.m-y-auto {
  margin-bottom: auto !important;
  margin-top: auto !important;
}

.m-t-auto {
  margin-top: auto !important;
}

.m-b-auto {
  margin-bottom: auto !important;
}

.m-l-auto {
  margin-left: auto !important;
}

.m-r-auto {
  margin-right: auto !important;
}

/* PADDING */
.p-auto {
  padding: auto !important;
}

.p-x-auto {
  padding-left: auto !important;
  padding-right: auto !important;
}

.p-y-auto {
  padding-bottom: auto !important;
  padding-top: auto !important;
}

.p-t-auto {
  padding-top: auto !important;
}

.p-b-auto {
  padding-bottom: auto !important;
}

.p-l-auto {
  padding-left: auto !important;
}

.p-r-auto {
  padding-right: auto !important;
}

/* GAP */
.gap-auto {
  gap: auto !important;
}

.gap-y-auto {
  gap: auto 0 !important;
}

.gap-x-auto {
  gap: 0 auto !important;
}

.gap-auto-0 {
  gap: auto 0 !important;
}

.gap-auto-1 {
  gap: auto 8px !important;
}

.gap-auto-2 {
  gap: auto 16px !important;
}

.gap-auto-3 {
  gap: auto 24px !important;
}

.gap-auto-4 {
  gap: auto 32px !important;
}

.gap-auto-5 {
  gap: auto 40px !important;
}

.gap-auto-6 {
  gap: auto 48px !important;
}

.gap-auto-7 {
  gap: auto 56px !important;
}

.gap-auto-8 {
  gap: auto 64px !important;
}

.gap-auto-9 {
  gap: auto 72px !important;
}

.gap-auto-10 {
  gap: auto 80px !important;
}

.gap-auto-11 {
  gap: auto 88px !important;
}

.gap-auto-12 {
  gap: auto 96px !important;
}

.gap-auto-13 {
  gap: auto 104px !important;
}

.gap-auto-auto {
  gap: auto auto !important;
}

/* LETTER SPACING */
.letter-spacing-auto {
  letter-spacing: calc(auto * 0.05) !important;
}

.d-grid {
  display: grid;
  gap: 16px;
}

/*  - USAGE -
    Use .d-grid.grid--2 on divs that always have 2 columns
    Add .grid--md-4 to some div that have 4 columns from breakpoints bigger than md (inclusive)

    You can use numbers present in $grid-n-columns, or add custom ones to the list.
*/
.grid--1 {
  grid-template-columns: repeat(1, 1fr);
}

.grid--span-1 {
  grid-column-end: span 1;
}

.grid--start-1 {
  grid-column-start: 1;
}

/* Use .grid--start-right-4 if element has a .grid--span-4
/  and it will appear on the right side of the grid.
/  — $n-col should be its span size on the grid
/  */
.grid--start-right-1 {
  grid-column-start: -2;
}

@media (min-width: 0) {
  .grid--initial-1 {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (min-width: 0) {
  .grid--span-initial-1 {
    grid-column-end: span 1 !important;
  }
}

@media (min-width: 0) {
  .grid--start-initial-1 {
    grid-column-start: 1;
  }
}

@media (min-width: 0) {
  .grid--start-right-initial-1 {
    grid-column-start: -2;
  }
}

@media (min-width: 400px) {
  .grid--xs-1 {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (min-width: 400px) {
  .grid--span-xs-1 {
    grid-column-end: span 1 !important;
  }
}

@media (min-width: 400px) {
  .grid--start-xs-1 {
    grid-column-start: 1;
  }
}

@media (min-width: 400px) {
  .grid--start-right-xs-1 {
    grid-column-start: -2;
  }
}

@media (min-width: 600px) {
  .grid--s-1 {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (min-width: 600px) {
  .grid--span-s-1 {
    grid-column-end: span 1 !important;
  }
}

@media (min-width: 600px) {
  .grid--start-s-1 {
    grid-column-start: 1;
  }
}

@media (min-width: 600px) {
  .grid--start-right-s-1 {
    grid-column-start: -2;
  }
}

@media (min-width: 900px) {
  .grid--m-1 {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (min-width: 900px) {
  .grid--span-m-1 {
    grid-column-end: span 1 !important;
  }
}

@media (min-width: 900px) {
  .grid--start-m-1 {
    grid-column-start: 1;
  }
}

@media (min-width: 900px) {
  .grid--start-right-m-1 {
    grid-column-start: -2;
  }
}

@media (min-width: 1200px) {
  .grid--l-1 {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (min-width: 1200px) {
  .grid--span-l-1 {
    grid-column-end: span 1 !important;
  }
}

@media (min-width: 1200px) {
  .grid--start-l-1 {
    grid-column-start: 1;
  }
}

@media (min-width: 1200px) {
  .grid--start-right-l-1 {
    grid-column-start: -2;
  }
}

@media (min-width: 1500px) {
  .grid--xl-1 {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (min-width: 1500px) {
  .grid--span-xl-1 {
    grid-column-end: span 1 !important;
  }
}

@media (min-width: 1500px) {
  .grid--start-xl-1 {
    grid-column-start: 1;
  }
}

@media (min-width: 1500px) {
  .grid--start-right-xl-1 {
    grid-column-start: -2;
  }
}

@media (min-width: 1800px) {
  .grid--xxl-1 {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (min-width: 1800px) {
  .grid--span-xxl-1 {
    grid-column-end: span 1 !important;
  }
}

@media (min-width: 1800px) {
  .grid--start-xxl-1 {
    grid-column-start: 1;
  }
}

@media (min-width: 1800px) {
  .grid--start-right-xxl-1 {
    grid-column-start: -2;
  }
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid--span-2 {
  grid-column-end: span 2;
}

.grid--start-2 {
  grid-column-start: 2;
}

/* Use .grid--start-right-4 if element has a .grid--span-4
/  and it will appear on the right side of the grid.
/  — $n-col should be its span size on the grid
/  */
.grid--start-right-2 {
  grid-column-start: -3;
}

@media (min-width: 0) {
  .grid--initial-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 0) {
  .grid--span-initial-2 {
    grid-column-end: span 2 !important;
  }
}

@media (min-width: 0) {
  .grid--start-initial-2 {
    grid-column-start: 2;
  }
}

@media (min-width: 0) {
  .grid--start-right-initial-2 {
    grid-column-start: -3;
  }
}

@media (min-width: 400px) {
  .grid--xs-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 400px) {
  .grid--span-xs-2 {
    grid-column-end: span 2 !important;
  }
}

@media (min-width: 400px) {
  .grid--start-xs-2 {
    grid-column-start: 2;
  }
}

@media (min-width: 400px) {
  .grid--start-right-xs-2 {
    grid-column-start: -3;
  }
}

@media (min-width: 600px) {
  .grid--s-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 600px) {
  .grid--span-s-2 {
    grid-column-end: span 2 !important;
  }
}

@media (min-width: 600px) {
  .grid--start-s-2 {
    grid-column-start: 2;
  }
}

@media (min-width: 600px) {
  .grid--start-right-s-2 {
    grid-column-start: -3;
  }
}

@media (min-width: 900px) {
  .grid--m-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .grid--span-m-2 {
    grid-column-end: span 2 !important;
  }
}

@media (min-width: 900px) {
  .grid--start-m-2 {
    grid-column-start: 2;
  }
}

@media (min-width: 900px) {
  .grid--start-right-m-2 {
    grid-column-start: -3;
  }
}

@media (min-width: 1200px) {
  .grid--l-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .grid--span-l-2 {
    grid-column-end: span 2 !important;
  }
}

@media (min-width: 1200px) {
  .grid--start-l-2 {
    grid-column-start: 2;
  }
}

@media (min-width: 1200px) {
  .grid--start-right-l-2 {
    grid-column-start: -3;
  }
}

@media (min-width: 1500px) {
  .grid--xl-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1500px) {
  .grid--span-xl-2 {
    grid-column-end: span 2 !important;
  }
}

@media (min-width: 1500px) {
  .grid--start-xl-2 {
    grid-column-start: 2;
  }
}

@media (min-width: 1500px) {
  .grid--start-right-xl-2 {
    grid-column-start: -3;
  }
}

@media (min-width: 1800px) {
  .grid--xxl-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1800px) {
  .grid--span-xxl-2 {
    grid-column-end: span 2 !important;
  }
}

@media (min-width: 1800px) {
  .grid--start-xxl-2 {
    grid-column-start: 2;
  }
}

@media (min-width: 1800px) {
  .grid--start-right-xxl-2 {
    grid-column-start: -3;
  }
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--span-3 {
  grid-column-end: span 3;
}

.grid--start-3 {
  grid-column-start: 3;
}

/* Use .grid--start-right-4 if element has a .grid--span-4
/  and it will appear on the right side of the grid.
/  — $n-col should be its span size on the grid
/  */
.grid--start-right-3 {
  grid-column-start: -4;
}

@media (min-width: 0) {
  .grid--initial-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 0) {
  .grid--span-initial-3 {
    grid-column-end: span 3 !important;
  }
}

@media (min-width: 0) {
  .grid--start-initial-3 {
    grid-column-start: 3;
  }
}

@media (min-width: 0) {
  .grid--start-right-initial-3 {
    grid-column-start: -4;
  }
}

@media (min-width: 400px) {
  .grid--xs-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 400px) {
  .grid--span-xs-3 {
    grid-column-end: span 3 !important;
  }
}

@media (min-width: 400px) {
  .grid--start-xs-3 {
    grid-column-start: 3;
  }
}

@media (min-width: 400px) {
  .grid--start-right-xs-3 {
    grid-column-start: -4;
  }
}

@media (min-width: 600px) {
  .grid--s-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 600px) {
  .grid--span-s-3 {
    grid-column-end: span 3 !important;
  }
}

@media (min-width: 600px) {
  .grid--start-s-3 {
    grid-column-start: 3;
  }
}

@media (min-width: 600px) {
  .grid--start-right-s-3 {
    grid-column-start: -4;
  }
}

@media (min-width: 900px) {
  .grid--m-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .grid--span-m-3 {
    grid-column-end: span 3 !important;
  }
}

@media (min-width: 900px) {
  .grid--start-m-3 {
    grid-column-start: 3;
  }
}

@media (min-width: 900px) {
  .grid--start-right-m-3 {
    grid-column-start: -4;
  }
}

@media (min-width: 1200px) {
  .grid--l-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .grid--span-l-3 {
    grid-column-end: span 3 !important;
  }
}

@media (min-width: 1200px) {
  .grid--start-l-3 {
    grid-column-start: 3;
  }
}

@media (min-width: 1200px) {
  .grid--start-right-l-3 {
    grid-column-start: -4;
  }
}

@media (min-width: 1500px) {
  .grid--xl-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1500px) {
  .grid--span-xl-3 {
    grid-column-end: span 3 !important;
  }
}

@media (min-width: 1500px) {
  .grid--start-xl-3 {
    grid-column-start: 3;
  }
}

@media (min-width: 1500px) {
  .grid--start-right-xl-3 {
    grid-column-start: -4;
  }
}

@media (min-width: 1800px) {
  .grid--xxl-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1800px) {
  .grid--span-xxl-3 {
    grid-column-end: span 3 !important;
  }
}

@media (min-width: 1800px) {
  .grid--start-xxl-3 {
    grid-column-start: 3;
  }
}

@media (min-width: 1800px) {
  .grid--start-right-xxl-3 {
    grid-column-start: -4;
  }
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid--span-4 {
  grid-column-end: span 4;
}

.grid--start-4 {
  grid-column-start: 4;
}

/* Use .grid--start-right-4 if element has a .grid--span-4
/  and it will appear on the right side of the grid.
/  — $n-col should be its span size on the grid
/  */
.grid--start-right-4 {
  grid-column-start: -5;
}

@media (min-width: 0) {
  .grid--initial-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 0) {
  .grid--span-initial-4 {
    grid-column-end: span 4 !important;
  }
}

@media (min-width: 0) {
  .grid--start-initial-4 {
    grid-column-start: 4;
  }
}

@media (min-width: 0) {
  .grid--start-right-initial-4 {
    grid-column-start: -5;
  }
}

@media (min-width: 400px) {
  .grid--xs-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 400px) {
  .grid--span-xs-4 {
    grid-column-end: span 4 !important;
  }
}

@media (min-width: 400px) {
  .grid--start-xs-4 {
    grid-column-start: 4;
  }
}

@media (min-width: 400px) {
  .grid--start-right-xs-4 {
    grid-column-start: -5;
  }
}

@media (min-width: 600px) {
  .grid--s-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 600px) {
  .grid--span-s-4 {
    grid-column-end: span 4 !important;
  }
}

@media (min-width: 600px) {
  .grid--start-s-4 {
    grid-column-start: 4;
  }
}

@media (min-width: 600px) {
  .grid--start-right-s-4 {
    grid-column-start: -5;
  }
}

@media (min-width: 900px) {
  .grid--m-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 900px) {
  .grid--span-m-4 {
    grid-column-end: span 4 !important;
  }
}

@media (min-width: 900px) {
  .grid--start-m-4 {
    grid-column-start: 4;
  }
}

@media (min-width: 900px) {
  .grid--start-right-m-4 {
    grid-column-start: -5;
  }
}

@media (min-width: 1200px) {
  .grid--l-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1200px) {
  .grid--span-l-4 {
    grid-column-end: span 4 !important;
  }
}

@media (min-width: 1200px) {
  .grid--start-l-4 {
    grid-column-start: 4;
  }
}

@media (min-width: 1200px) {
  .grid--start-right-l-4 {
    grid-column-start: -5;
  }
}

@media (min-width: 1500px) {
  .grid--xl-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1500px) {
  .grid--span-xl-4 {
    grid-column-end: span 4 !important;
  }
}

@media (min-width: 1500px) {
  .grid--start-xl-4 {
    grid-column-start: 4;
  }
}

@media (min-width: 1500px) {
  .grid--start-right-xl-4 {
    grid-column-start: -5;
  }
}

@media (min-width: 1800px) {
  .grid--xxl-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1800px) {
  .grid--span-xxl-4 {
    grid-column-end: span 4 !important;
  }
}

@media (min-width: 1800px) {
  .grid--start-xxl-4 {
    grid-column-start: 4;
  }
}

@media (min-width: 1800px) {
  .grid--start-right-xxl-4 {
    grid-column-start: -5;
  }
}

.grid--5 {
  grid-template-columns: repeat(5, 1fr);
}

.grid--span-5 {
  grid-column-end: span 5;
}

.grid--start-5 {
  grid-column-start: 5;
}

/* Use .grid--start-right-4 if element has a .grid--span-4
/  and it will appear on the right side of the grid.
/  — $n-col should be its span size on the grid
/  */
.grid--start-right-5 {
  grid-column-start: -6;
}

@media (min-width: 0) {
  .grid--initial-5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 0) {
  .grid--span-initial-5 {
    grid-column-end: span 5 !important;
  }
}

@media (min-width: 0) {
  .grid--start-initial-5 {
    grid-column-start: 5;
  }
}

@media (min-width: 0) {
  .grid--start-right-initial-5 {
    grid-column-start: -6;
  }
}

@media (min-width: 400px) {
  .grid--xs-5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 400px) {
  .grid--span-xs-5 {
    grid-column-end: span 5 !important;
  }
}

@media (min-width: 400px) {
  .grid--start-xs-5 {
    grid-column-start: 5;
  }
}

@media (min-width: 400px) {
  .grid--start-right-xs-5 {
    grid-column-start: -6;
  }
}

@media (min-width: 600px) {
  .grid--s-5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 600px) {
  .grid--span-s-5 {
    grid-column-end: span 5 !important;
  }
}

@media (min-width: 600px) {
  .grid--start-s-5 {
    grid-column-start: 5;
  }
}

@media (min-width: 600px) {
  .grid--start-right-s-5 {
    grid-column-start: -6;
  }
}

@media (min-width: 900px) {
  .grid--m-5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 900px) {
  .grid--span-m-5 {
    grid-column-end: span 5 !important;
  }
}

@media (min-width: 900px) {
  .grid--start-m-5 {
    grid-column-start: 5;
  }
}

@media (min-width: 900px) {
  .grid--start-right-m-5 {
    grid-column-start: -6;
  }
}

@media (min-width: 1200px) {
  .grid--l-5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 1200px) {
  .grid--span-l-5 {
    grid-column-end: span 5 !important;
  }
}

@media (min-width: 1200px) {
  .grid--start-l-5 {
    grid-column-start: 5;
  }
}

@media (min-width: 1200px) {
  .grid--start-right-l-5 {
    grid-column-start: -6;
  }
}

@media (min-width: 1500px) {
  .grid--xl-5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 1500px) {
  .grid--span-xl-5 {
    grid-column-end: span 5 !important;
  }
}

@media (min-width: 1500px) {
  .grid--start-xl-5 {
    grid-column-start: 5;
  }
}

@media (min-width: 1500px) {
  .grid--start-right-xl-5 {
    grid-column-start: -6;
  }
}

@media (min-width: 1800px) {
  .grid--xxl-5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 1800px) {
  .grid--span-xxl-5 {
    grid-column-end: span 5 !important;
  }
}

@media (min-width: 1800px) {
  .grid--start-xxl-5 {
    grid-column-start: 5;
  }
}

@media (min-width: 1800px) {
  .grid--start-right-xxl-5 {
    grid-column-start: -6;
  }
}

.grid--6 {
  grid-template-columns: repeat(6, 1fr);
}

.grid--span-6 {
  grid-column-end: span 6;
}

.grid--start-6 {
  grid-column-start: 6;
}

/* Use .grid--start-right-4 if element has a .grid--span-4
/  and it will appear on the right side of the grid.
/  — $n-col should be its span size on the grid
/  */
.grid--start-right-6 {
  grid-column-start: -7;
}

@media (min-width: 0) {
  .grid--initial-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (min-width: 0) {
  .grid--span-initial-6 {
    grid-column-end: span 6 !important;
  }
}

@media (min-width: 0) {
  .grid--start-initial-6 {
    grid-column-start: 6;
  }
}

@media (min-width: 0) {
  .grid--start-right-initial-6 {
    grid-column-start: -7;
  }
}

@media (min-width: 400px) {
  .grid--xs-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (min-width: 400px) {
  .grid--span-xs-6 {
    grid-column-end: span 6 !important;
  }
}

@media (min-width: 400px) {
  .grid--start-xs-6 {
    grid-column-start: 6;
  }
}

@media (min-width: 400px) {
  .grid--start-right-xs-6 {
    grid-column-start: -7;
  }
}

@media (min-width: 600px) {
  .grid--s-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (min-width: 600px) {
  .grid--span-s-6 {
    grid-column-end: span 6 !important;
  }
}

@media (min-width: 600px) {
  .grid--start-s-6 {
    grid-column-start: 6;
  }
}

@media (min-width: 600px) {
  .grid--start-right-s-6 {
    grid-column-start: -7;
  }
}

@media (min-width: 900px) {
  .grid--m-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (min-width: 900px) {
  .grid--span-m-6 {
    grid-column-end: span 6 !important;
  }
}

@media (min-width: 900px) {
  .grid--start-m-6 {
    grid-column-start: 6;
  }
}

@media (min-width: 900px) {
  .grid--start-right-m-6 {
    grid-column-start: -7;
  }
}

@media (min-width: 1200px) {
  .grid--l-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (min-width: 1200px) {
  .grid--span-l-6 {
    grid-column-end: span 6 !important;
  }
}

@media (min-width: 1200px) {
  .grid--start-l-6 {
    grid-column-start: 6;
  }
}

@media (min-width: 1200px) {
  .grid--start-right-l-6 {
    grid-column-start: -7;
  }
}

@media (min-width: 1500px) {
  .grid--xl-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (min-width: 1500px) {
  .grid--span-xl-6 {
    grid-column-end: span 6 !important;
  }
}

@media (min-width: 1500px) {
  .grid--start-xl-6 {
    grid-column-start: 6;
  }
}

@media (min-width: 1500px) {
  .grid--start-right-xl-6 {
    grid-column-start: -7;
  }
}

@media (min-width: 1800px) {
  .grid--xxl-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (min-width: 1800px) {
  .grid--span-xxl-6 {
    grid-column-end: span 6 !important;
  }
}

@media (min-width: 1800px) {
  .grid--start-xxl-6 {
    grid-column-start: 6;
  }
}

@media (min-width: 1800px) {
  .grid--start-right-xxl-6 {
    grid-column-start: -7;
  }
}

.grid--7 {
  grid-template-columns: repeat(7, 1fr);
}

.grid--span-7 {
  grid-column-end: span 7;
}

.grid--start-7 {
  grid-column-start: 7;
}

/* Use .grid--start-right-4 if element has a .grid--span-4
/  and it will appear on the right side of the grid.
/  — $n-col should be its span size on the grid
/  */
.grid--start-right-7 {
  grid-column-start: -8;
}

@media (min-width: 0) {
  .grid--initial-7 {
    grid-template-columns: repeat(7, 1fr);
  }
}

@media (min-width: 0) {
  .grid--span-initial-7 {
    grid-column-end: span 7 !important;
  }
}

@media (min-width: 0) {
  .grid--start-initial-7 {
    grid-column-start: 7;
  }
}

@media (min-width: 0) {
  .grid--start-right-initial-7 {
    grid-column-start: -8;
  }
}

@media (min-width: 400px) {
  .grid--xs-7 {
    grid-template-columns: repeat(7, 1fr);
  }
}

@media (min-width: 400px) {
  .grid--span-xs-7 {
    grid-column-end: span 7 !important;
  }
}

@media (min-width: 400px) {
  .grid--start-xs-7 {
    grid-column-start: 7;
  }
}

@media (min-width: 400px) {
  .grid--start-right-xs-7 {
    grid-column-start: -8;
  }
}

@media (min-width: 600px) {
  .grid--s-7 {
    grid-template-columns: repeat(7, 1fr);
  }
}

@media (min-width: 600px) {
  .grid--span-s-7 {
    grid-column-end: span 7 !important;
  }
}

@media (min-width: 600px) {
  .grid--start-s-7 {
    grid-column-start: 7;
  }
}

@media (min-width: 600px) {
  .grid--start-right-s-7 {
    grid-column-start: -8;
  }
}

@media (min-width: 900px) {
  .grid--m-7 {
    grid-template-columns: repeat(7, 1fr);
  }
}

@media (min-width: 900px) {
  .grid--span-m-7 {
    grid-column-end: span 7 !important;
  }
}

@media (min-width: 900px) {
  .grid--start-m-7 {
    grid-column-start: 7;
  }
}

@media (min-width: 900px) {
  .grid--start-right-m-7 {
    grid-column-start: -8;
  }
}

@media (min-width: 1200px) {
  .grid--l-7 {
    grid-template-columns: repeat(7, 1fr);
  }
}

@media (min-width: 1200px) {
  .grid--span-l-7 {
    grid-column-end: span 7 !important;
  }
}

@media (min-width: 1200px) {
  .grid--start-l-7 {
    grid-column-start: 7;
  }
}

@media (min-width: 1200px) {
  .grid--start-right-l-7 {
    grid-column-start: -8;
  }
}

@media (min-width: 1500px) {
  .grid--xl-7 {
    grid-template-columns: repeat(7, 1fr);
  }
}

@media (min-width: 1500px) {
  .grid--span-xl-7 {
    grid-column-end: span 7 !important;
  }
}

@media (min-width: 1500px) {
  .grid--start-xl-7 {
    grid-column-start: 7;
  }
}

@media (min-width: 1500px) {
  .grid--start-right-xl-7 {
    grid-column-start: -8;
  }
}

@media (min-width: 1800px) {
  .grid--xxl-7 {
    grid-template-columns: repeat(7, 1fr);
  }
}

@media (min-width: 1800px) {
  .grid--span-xxl-7 {
    grid-column-end: span 7 !important;
  }
}

@media (min-width: 1800px) {
  .grid--start-xxl-7 {
    grid-column-start: 7;
  }
}

@media (min-width: 1800px) {
  .grid--start-right-xxl-7 {
    grid-column-start: -8;
  }
}

.grid--8 {
  grid-template-columns: repeat(8, 1fr);
}

.grid--span-8 {
  grid-column-end: span 8;
}

.grid--start-8 {
  grid-column-start: 8;
}

/* Use .grid--start-right-4 if element has a .grid--span-4
/  and it will appear on the right side of the grid.
/  — $n-col should be its span size on the grid
/  */
.grid--start-right-8 {
  grid-column-start: -9;
}

@media (min-width: 0) {
  .grid--initial-8 {
    grid-template-columns: repeat(8, 1fr);
  }
}

@media (min-width: 0) {
  .grid--span-initial-8 {
    grid-column-end: span 8 !important;
  }
}

@media (min-width: 0) {
  .grid--start-initial-8 {
    grid-column-start: 8;
  }
}

@media (min-width: 0) {
  .grid--start-right-initial-8 {
    grid-column-start: -9;
  }
}

@media (min-width: 400px) {
  .grid--xs-8 {
    grid-template-columns: repeat(8, 1fr);
  }
}

@media (min-width: 400px) {
  .grid--span-xs-8 {
    grid-column-end: span 8 !important;
  }
}

@media (min-width: 400px) {
  .grid--start-xs-8 {
    grid-column-start: 8;
  }
}

@media (min-width: 400px) {
  .grid--start-right-xs-8 {
    grid-column-start: -9;
  }
}

@media (min-width: 600px) {
  .grid--s-8 {
    grid-template-columns: repeat(8, 1fr);
  }
}

@media (min-width: 600px) {
  .grid--span-s-8 {
    grid-column-end: span 8 !important;
  }
}

@media (min-width: 600px) {
  .grid--start-s-8 {
    grid-column-start: 8;
  }
}

@media (min-width: 600px) {
  .grid--start-right-s-8 {
    grid-column-start: -9;
  }
}

@media (min-width: 900px) {
  .grid--m-8 {
    grid-template-columns: repeat(8, 1fr);
  }
}

@media (min-width: 900px) {
  .grid--span-m-8 {
    grid-column-end: span 8 !important;
  }
}

@media (min-width: 900px) {
  .grid--start-m-8 {
    grid-column-start: 8;
  }
}

@media (min-width: 900px) {
  .grid--start-right-m-8 {
    grid-column-start: -9;
  }
}

@media (min-width: 1200px) {
  .grid--l-8 {
    grid-template-columns: repeat(8, 1fr);
  }
}

@media (min-width: 1200px) {
  .grid--span-l-8 {
    grid-column-end: span 8 !important;
  }
}

@media (min-width: 1200px) {
  .grid--start-l-8 {
    grid-column-start: 8;
  }
}

@media (min-width: 1200px) {
  .grid--start-right-l-8 {
    grid-column-start: -9;
  }
}

@media (min-width: 1500px) {
  .grid--xl-8 {
    grid-template-columns: repeat(8, 1fr);
  }
}

@media (min-width: 1500px) {
  .grid--span-xl-8 {
    grid-column-end: span 8 !important;
  }
}

@media (min-width: 1500px) {
  .grid--start-xl-8 {
    grid-column-start: 8;
  }
}

@media (min-width: 1500px) {
  .grid--start-right-xl-8 {
    grid-column-start: -9;
  }
}

@media (min-width: 1800px) {
  .grid--xxl-8 {
    grid-template-columns: repeat(8, 1fr);
  }
}

@media (min-width: 1800px) {
  .grid--span-xxl-8 {
    grid-column-end: span 8 !important;
  }
}

@media (min-width: 1800px) {
  .grid--start-xxl-8 {
    grid-column-start: 8;
  }
}

@media (min-width: 1800px) {
  .grid--start-right-xxl-8 {
    grid-column-start: -9;
  }
}

.grid--9 {
  grid-template-columns: repeat(9, 1fr);
}

.grid--span-9 {
  grid-column-end: span 9;
}

.grid--start-9 {
  grid-column-start: 9;
}

/* Use .grid--start-right-4 if element has a .grid--span-4
/  and it will appear on the right side of the grid.
/  — $n-col should be its span size on the grid
/  */
.grid--start-right-9 {
  grid-column-start: -10;
}

@media (min-width: 0) {
  .grid--initial-9 {
    grid-template-columns: repeat(9, 1fr);
  }
}

@media (min-width: 0) {
  .grid--span-initial-9 {
    grid-column-end: span 9 !important;
  }
}

@media (min-width: 0) {
  .grid--start-initial-9 {
    grid-column-start: 9;
  }
}

@media (min-width: 0) {
  .grid--start-right-initial-9 {
    grid-column-start: -10;
  }
}

@media (min-width: 400px) {
  .grid--xs-9 {
    grid-template-columns: repeat(9, 1fr);
  }
}

@media (min-width: 400px) {
  .grid--span-xs-9 {
    grid-column-end: span 9 !important;
  }
}

@media (min-width: 400px) {
  .grid--start-xs-9 {
    grid-column-start: 9;
  }
}

@media (min-width: 400px) {
  .grid--start-right-xs-9 {
    grid-column-start: -10;
  }
}

@media (min-width: 600px) {
  .grid--s-9 {
    grid-template-columns: repeat(9, 1fr);
  }
}

@media (min-width: 600px) {
  .grid--span-s-9 {
    grid-column-end: span 9 !important;
  }
}

@media (min-width: 600px) {
  .grid--start-s-9 {
    grid-column-start: 9;
  }
}

@media (min-width: 600px) {
  .grid--start-right-s-9 {
    grid-column-start: -10;
  }
}

@media (min-width: 900px) {
  .grid--m-9 {
    grid-template-columns: repeat(9, 1fr);
  }
}

@media (min-width: 900px) {
  .grid--span-m-9 {
    grid-column-end: span 9 !important;
  }
}

@media (min-width: 900px) {
  .grid--start-m-9 {
    grid-column-start: 9;
  }
}

@media (min-width: 900px) {
  .grid--start-right-m-9 {
    grid-column-start: -10;
  }
}

@media (min-width: 1200px) {
  .grid--l-9 {
    grid-template-columns: repeat(9, 1fr);
  }
}

@media (min-width: 1200px) {
  .grid--span-l-9 {
    grid-column-end: span 9 !important;
  }
}

@media (min-width: 1200px) {
  .grid--start-l-9 {
    grid-column-start: 9;
  }
}

@media (min-width: 1200px) {
  .grid--start-right-l-9 {
    grid-column-start: -10;
  }
}

@media (min-width: 1500px) {
  .grid--xl-9 {
    grid-template-columns: repeat(9, 1fr);
  }
}

@media (min-width: 1500px) {
  .grid--span-xl-9 {
    grid-column-end: span 9 !important;
  }
}

@media (min-width: 1500px) {
  .grid--start-xl-9 {
    grid-column-start: 9;
  }
}

@media (min-width: 1500px) {
  .grid--start-right-xl-9 {
    grid-column-start: -10;
  }
}

@media (min-width: 1800px) {
  .grid--xxl-9 {
    grid-template-columns: repeat(9, 1fr);
  }
}

@media (min-width: 1800px) {
  .grid--span-xxl-9 {
    grid-column-end: span 9 !important;
  }
}

@media (min-width: 1800px) {
  .grid--start-xxl-9 {
    grid-column-start: 9;
  }
}

@media (min-width: 1800px) {
  .grid--start-right-xxl-9 {
    grid-column-start: -10;
  }
}

.grid--10 {
  grid-template-columns: repeat(10, 1fr);
}

.grid--span-10 {
  grid-column-end: span 10;
}

.grid--start-10 {
  grid-column-start: 10;
}

/* Use .grid--start-right-4 if element has a .grid--span-4
/  and it will appear on the right side of the grid.
/  — $n-col should be its span size on the grid
/  */
.grid--start-right-10 {
  grid-column-start: -11;
}

@media (min-width: 0) {
  .grid--initial-10 {
    grid-template-columns: repeat(10, 1fr);
  }
}

@media (min-width: 0) {
  .grid--span-initial-10 {
    grid-column-end: span 10 !important;
  }
}

@media (min-width: 0) {
  .grid--start-initial-10 {
    grid-column-start: 10;
  }
}

@media (min-width: 0) {
  .grid--start-right-initial-10 {
    grid-column-start: -11;
  }
}

@media (min-width: 400px) {
  .grid--xs-10 {
    grid-template-columns: repeat(10, 1fr);
  }
}

@media (min-width: 400px) {
  .grid--span-xs-10 {
    grid-column-end: span 10 !important;
  }
}

@media (min-width: 400px) {
  .grid--start-xs-10 {
    grid-column-start: 10;
  }
}

@media (min-width: 400px) {
  .grid--start-right-xs-10 {
    grid-column-start: -11;
  }
}

@media (min-width: 600px) {
  .grid--s-10 {
    grid-template-columns: repeat(10, 1fr);
  }
}

@media (min-width: 600px) {
  .grid--span-s-10 {
    grid-column-end: span 10 !important;
  }
}

@media (min-width: 600px) {
  .grid--start-s-10 {
    grid-column-start: 10;
  }
}

@media (min-width: 600px) {
  .grid--start-right-s-10 {
    grid-column-start: -11;
  }
}

@media (min-width: 900px) {
  .grid--m-10 {
    grid-template-columns: repeat(10, 1fr);
  }
}

@media (min-width: 900px) {
  .grid--span-m-10 {
    grid-column-end: span 10 !important;
  }
}

@media (min-width: 900px) {
  .grid--start-m-10 {
    grid-column-start: 10;
  }
}

@media (min-width: 900px) {
  .grid--start-right-m-10 {
    grid-column-start: -11;
  }
}

@media (min-width: 1200px) {
  .grid--l-10 {
    grid-template-columns: repeat(10, 1fr);
  }
}

@media (min-width: 1200px) {
  .grid--span-l-10 {
    grid-column-end: span 10 !important;
  }
}

@media (min-width: 1200px) {
  .grid--start-l-10 {
    grid-column-start: 10;
  }
}

@media (min-width: 1200px) {
  .grid--start-right-l-10 {
    grid-column-start: -11;
  }
}

@media (min-width: 1500px) {
  .grid--xl-10 {
    grid-template-columns: repeat(10, 1fr);
  }
}

@media (min-width: 1500px) {
  .grid--span-xl-10 {
    grid-column-end: span 10 !important;
  }
}

@media (min-width: 1500px) {
  .grid--start-xl-10 {
    grid-column-start: 10;
  }
}

@media (min-width: 1500px) {
  .grid--start-right-xl-10 {
    grid-column-start: -11;
  }
}

@media (min-width: 1800px) {
  .grid--xxl-10 {
    grid-template-columns: repeat(10, 1fr);
  }
}

@media (min-width: 1800px) {
  .grid--span-xxl-10 {
    grid-column-end: span 10 !important;
  }
}

@media (min-width: 1800px) {
  .grid--start-xxl-10 {
    grid-column-start: 10;
  }
}

@media (min-width: 1800px) {
  .grid--start-right-xxl-10 {
    grid-column-start: -11;
  }
}

.grid--11 {
  grid-template-columns: repeat(11, 1fr);
}

.grid--span-11 {
  grid-column-end: span 11;
}

.grid--start-11 {
  grid-column-start: 11;
}

/* Use .grid--start-right-4 if element has a .grid--span-4
/  and it will appear on the right side of the grid.
/  — $n-col should be its span size on the grid
/  */
.grid--start-right-11 {
  grid-column-start: -12;
}

@media (min-width: 0) {
  .grid--initial-11 {
    grid-template-columns: repeat(11, 1fr);
  }
}

@media (min-width: 0) {
  .grid--span-initial-11 {
    grid-column-end: span 11 !important;
  }
}

@media (min-width: 0) {
  .grid--start-initial-11 {
    grid-column-start: 11;
  }
}

@media (min-width: 0) {
  .grid--start-right-initial-11 {
    grid-column-start: -12;
  }
}

@media (min-width: 400px) {
  .grid--xs-11 {
    grid-template-columns: repeat(11, 1fr);
  }
}

@media (min-width: 400px) {
  .grid--span-xs-11 {
    grid-column-end: span 11 !important;
  }
}

@media (min-width: 400px) {
  .grid--start-xs-11 {
    grid-column-start: 11;
  }
}

@media (min-width: 400px) {
  .grid--start-right-xs-11 {
    grid-column-start: -12;
  }
}

@media (min-width: 600px) {
  .grid--s-11 {
    grid-template-columns: repeat(11, 1fr);
  }
}

@media (min-width: 600px) {
  .grid--span-s-11 {
    grid-column-end: span 11 !important;
  }
}

@media (min-width: 600px) {
  .grid--start-s-11 {
    grid-column-start: 11;
  }
}

@media (min-width: 600px) {
  .grid--start-right-s-11 {
    grid-column-start: -12;
  }
}

@media (min-width: 900px) {
  .grid--m-11 {
    grid-template-columns: repeat(11, 1fr);
  }
}

@media (min-width: 900px) {
  .grid--span-m-11 {
    grid-column-end: span 11 !important;
  }
}

@media (min-width: 900px) {
  .grid--start-m-11 {
    grid-column-start: 11;
  }
}

@media (min-width: 900px) {
  .grid--start-right-m-11 {
    grid-column-start: -12;
  }
}

@media (min-width: 1200px) {
  .grid--l-11 {
    grid-template-columns: repeat(11, 1fr);
  }
}

@media (min-width: 1200px) {
  .grid--span-l-11 {
    grid-column-end: span 11 !important;
  }
}

@media (min-width: 1200px) {
  .grid--start-l-11 {
    grid-column-start: 11;
  }
}

@media (min-width: 1200px) {
  .grid--start-right-l-11 {
    grid-column-start: -12;
  }
}

@media (min-width: 1500px) {
  .grid--xl-11 {
    grid-template-columns: repeat(11, 1fr);
  }
}

@media (min-width: 1500px) {
  .grid--span-xl-11 {
    grid-column-end: span 11 !important;
  }
}

@media (min-width: 1500px) {
  .grid--start-xl-11 {
    grid-column-start: 11;
  }
}

@media (min-width: 1500px) {
  .grid--start-right-xl-11 {
    grid-column-start: -12;
  }
}

@media (min-width: 1800px) {
  .grid--xxl-11 {
    grid-template-columns: repeat(11, 1fr);
  }
}

@media (min-width: 1800px) {
  .grid--span-xxl-11 {
    grid-column-end: span 11 !important;
  }
}

@media (min-width: 1800px) {
  .grid--start-xxl-11 {
    grid-column-start: 11;
  }
}

@media (min-width: 1800px) {
  .grid--start-right-xxl-11 {
    grid-column-start: -12;
  }
}

.grid--12 {
  grid-template-columns: repeat(12, 1fr);
}

.grid--span-12 {
  grid-column-end: span 12;
}

.grid--start-12 {
  grid-column-start: 12;
}

/* Use .grid--start-right-4 if element has a .grid--span-4
/  and it will appear on the right side of the grid.
/  — $n-col should be its span size on the grid
/  */
.grid--start-right-12 {
  grid-column-start: -13;
}

@media (min-width: 0) {
  .grid--initial-12 {
    grid-template-columns: repeat(12, 1fr);
  }
}

@media (min-width: 0) {
  .grid--span-initial-12 {
    grid-column-end: span 12 !important;
  }
}

@media (min-width: 0) {
  .grid--start-initial-12 {
    grid-column-start: 12;
  }
}

@media (min-width: 0) {
  .grid--start-right-initial-12 {
    grid-column-start: -13;
  }
}

@media (min-width: 400px) {
  .grid--xs-12 {
    grid-template-columns: repeat(12, 1fr);
  }
}

@media (min-width: 400px) {
  .grid--span-xs-12 {
    grid-column-end: span 12 !important;
  }
}

@media (min-width: 400px) {
  .grid--start-xs-12 {
    grid-column-start: 12;
  }
}

@media (min-width: 400px) {
  .grid--start-right-xs-12 {
    grid-column-start: -13;
  }
}

@media (min-width: 600px) {
  .grid--s-12 {
    grid-template-columns: repeat(12, 1fr);
  }
}

@media (min-width: 600px) {
  .grid--span-s-12 {
    grid-column-end: span 12 !important;
  }
}

@media (min-width: 600px) {
  .grid--start-s-12 {
    grid-column-start: 12;
  }
}

@media (min-width: 600px) {
  .grid--start-right-s-12 {
    grid-column-start: -13;
  }
}

@media (min-width: 900px) {
  .grid--m-12 {
    grid-template-columns: repeat(12, 1fr);
  }
}

@media (min-width: 900px) {
  .grid--span-m-12 {
    grid-column-end: span 12 !important;
  }
}

@media (min-width: 900px) {
  .grid--start-m-12 {
    grid-column-start: 12;
  }
}

@media (min-width: 900px) {
  .grid--start-right-m-12 {
    grid-column-start: -13;
  }
}

@media (min-width: 1200px) {
  .grid--l-12 {
    grid-template-columns: repeat(12, 1fr);
  }
}

@media (min-width: 1200px) {
  .grid--span-l-12 {
    grid-column-end: span 12 !important;
  }
}

@media (min-width: 1200px) {
  .grid--start-l-12 {
    grid-column-start: 12;
  }
}

@media (min-width: 1200px) {
  .grid--start-right-l-12 {
    grid-column-start: -13;
  }
}

@media (min-width: 1500px) {
  .grid--xl-12 {
    grid-template-columns: repeat(12, 1fr);
  }
}

@media (min-width: 1500px) {
  .grid--span-xl-12 {
    grid-column-end: span 12 !important;
  }
}

@media (min-width: 1500px) {
  .grid--start-xl-12 {
    grid-column-start: 12;
  }
}

@media (min-width: 1500px) {
  .grid--start-right-xl-12 {
    grid-column-start: -13;
  }
}

@media (min-width: 1800px) {
  .grid--xxl-12 {
    grid-template-columns: repeat(12, 1fr);
  }
}

@media (min-width: 1800px) {
  .grid--span-xxl-12 {
    grid-column-end: span 12 !important;
  }
}

@media (min-width: 1800px) {
  .grid--start-xxl-12 {
    grid-column-start: 12;
  }
}

@media (min-width: 1800px) {
  .grid--start-right-xxl-12 {
    grid-column-start: -13;
  }
}

/**
 * This stylesheet has 4 sections:
 *
 * 1.Ratios - Where are defined several default ratios
 *   You can use those with this functon:
 *     - ratio-by-name()
 *       to use the default ratio (1.125)
 *       eg.: ratio-by-name(minor-third) // = 1.2
 *
 * 2.Default Settings - Where are defined the default base, breakpoints
 * and ratios for each breakpoint
 *
 * 3.Functions - Where are defined functions that we need to calculate
 * the size taking into account the base and the breakpoint ratio
 *
 * 4.Mixin - Where are defined the mixin
 *   This mixin allows you to set a step and it automatically calculates
 * the sizes for all the defined breakpoints taking into account the ratio
 * of each breakpoint
 *
 *
 * HOW TO USE:
 * 1. Set your own settings ON YOUR FONTS FILE
 *    or just use the defaults (in this case, you can skip this step)
 *    eg.: $scale: (
 *           base: 16px,
 *           breakpoints: (
 *             $b_initial: ratio-by-name(),
 *             $b_very-small: 1.025,
 *             $b_small: ratio-by-name()
 *           )
 *         );
 *
 * 2. Include the mixin in your class
 *    eg.: h1 {
 *           @include font-scale(6);
 *         }
 */
/* stylelint-disable number-max-precision */
/* RATIOS */
/* DEFAULT SETTINGS */
/* FUNCTIONS */
/* Calculate pow -- this is needed in the font-scale-get-size function */
/* Calculate font-size for a specific step and breakpoint */
/* MIXIN
 * - This will define the font-size for every breakpoint you set in $scale
 */
/**
 * This variables are only assigned to FONT classes.
 *
 * The accent colors of the project are already assigned to internal variables
 * in the colors stylesheet of the styleguide
 * (e.g.: theme-color("primary"), neutral-color("lightest"),...).
 *
 *
 * The name of this variables should follow this rule:
 * $c_nav-text
 *
 *
 * The variable begins with the initial of the variable type c (color),
 * followed by the element, and the section of the element where will be applied
 * the color.
 *
 * $c_nav
 *
 * In this case this variable represents the background color of the element.
 */
/* TEXT COLORS */
/* stylelint-disable selector-no-vendor-prefix */
/**
* Sheet to import fonts to be used and to define text styles.
*/
/* FONTS */
/* Fonts imported on views/layouts/application

@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200;0,6..12,300;0,6..12,400;0,6..12,500;0,6..12,600;0,6..12,700;0,6..12,800;0,6..12,900;0,6..12,1000;1,6..12,200;1,6..12,300;1,6..12,400;1,6..12,500;1,6..12,600;1,6..12,700;1,6..12,800;1,6..12,900;1,6..12,1000&family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap");

*/
.ff-primary {
  font-family: "Urbanist", sans-serif;
}

.ff-secondary {
  font-family: "Urbanist", sans-serif;
}

/* STYLES */
/* FONT SCALE */
/* TEXT STYLES */
body {
  font-family: "Urbanist", sans-serif;
  -moz-osx-font-smoothing: grayscale; /* (For Firefox) */
  -webkit-font-smoothing: antialiased; /* (For Chrome and Safari) */
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1.2;
  transition: all 2s ease-in-out;
  color: #313131;
}
@media (min-width: 0) {
  body {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 600px) {
  body {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 1200px) {
  body {
    font-size: 20px;
    letter-spacing: 0.4px;
  }
}

p {
  line-height: 1.5;
}

/* TEXT STYLES */
/*
  p = 21px Regular
  h6 = 21px Regular
  h5 = 28px Regular
  h4 = 38px Regular
  h3 = 51px Regular
  h2 = 67px Regular
  h1 = 90px Regular
*/
p {
  transition: font-size 0.2s ease-in-out;
}
@media (min-width: 0) {
  p {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 600px) {
  p {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 1200px) {
  p {
    font-size: 20px;
    letter-spacing: 0.4px;
  }
}

/*
  .fs-p = 21
  .fs-h6 = 21
  .fs-h5 = 28
  .fs-h4 = 38
  ...
*/
@media (min-width: 0) {
  .fs-p {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 600px) {
  .fs-p {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 1200px) {
  .fs-p {
    font-size: 20px;
    letter-spacing: 0.4px;
  }
}

/*
  p = 21px Regular
  h6 = 21px Regular
  h5 = 28px Regular
  h4 = 38px Regular
  h3 = 51px Regular
  h2 = 67px Regular
  h1 = 90px Regular
*/
h6, .menu-sidenav .sidenav .nav-list a {
  transition: font-size 0.2s ease-in-out;
}
@media (min-width: 0) {
  h6, .menu-sidenav .sidenav .nav-list a {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 600px) {
  h6, .menu-sidenav .sidenav .nav-list a {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 1200px) {
  h6, .menu-sidenav .sidenav .nav-list a {
    font-size: 20px;
    letter-spacing: 0.4px;
  }
}

/*
  .fs-p = 21
  .fs-h6 = 21
  .fs-h5 = 28
  .fs-h4 = 38
  ...
*/
@media (min-width: 0) {
  .fs-h6 {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 600px) {
  .fs-h6 {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 1200px) {
  .fs-h6 {
    font-size: 20px;
    letter-spacing: 0.4px;
  }
}

/*
  p = 21px Regular
  h6 = 21px Regular
  h5 = 28px Regular
  h4 = 38px Regular
  h3 = 51px Regular
  h2 = 67px Regular
  h1 = 90px Regular
*/
h5 {
  transition: font-size 0.2s ease-in-out;
}
@media (min-width: 0) {
  h5 {
    font-size: 23.04px;
    letter-spacing: 0.4608px;
  }
}
@media (min-width: 600px) {
  h5 {
    font-size: 23.04px;
    letter-spacing: 0.4608px;
  }
}
@media (min-width: 1200px) {
  h5 {
    font-size: 25px;
    letter-spacing: 0.5px;
  }
}

/*
  .fs-p = 21
  .fs-h6 = 21
  .fs-h5 = 28
  .fs-h4 = 38
  ...
*/
@media (min-width: 0) {
  .fs-h5 {
    font-size: 23.04px;
    letter-spacing: 0.4608px;
  }
}
@media (min-width: 600px) {
  .fs-h5 {
    font-size: 23.04px;
    letter-spacing: 0.4608px;
  }
}
@media (min-width: 1200px) {
  .fs-h5 {
    font-size: 25px;
    letter-spacing: 0.5px;
  }
}

/*
  p = 21px Regular
  h6 = 21px Regular
  h5 = 28px Regular
  h4 = 38px Regular
  h3 = 51px Regular
  h2 = 67px Regular
  h1 = 90px Regular
*/
h4 {
  transition: font-size 0.2s ease-in-out;
}
@media (min-width: 0) {
  h4 {
    font-size: 27.648px;
    letter-spacing: 0.55296px;
  }
}
@media (min-width: 600px) {
  h4 {
    font-size: 27.648px;
    letter-spacing: 0.55296px;
  }
}
@media (min-width: 1200px) {
  h4 {
    font-size: 31.25px;
    letter-spacing: 0.625px;
  }
}

/*
  .fs-p = 21
  .fs-h6 = 21
  .fs-h5 = 28
  .fs-h4 = 38
  ...
*/
@media (min-width: 0) {
  .fs-h4 {
    font-size: 27.648px;
    letter-spacing: 0.55296px;
  }
}
@media (min-width: 600px) {
  .fs-h4 {
    font-size: 27.648px;
    letter-spacing: 0.55296px;
  }
}
@media (min-width: 1200px) {
  .fs-h4 {
    font-size: 31.25px;
    letter-spacing: 0.625px;
  }
}

/*
  p = 21px Regular
  h6 = 21px Regular
  h5 = 28px Regular
  h4 = 38px Regular
  h3 = 51px Regular
  h2 = 67px Regular
  h1 = 90px Regular
*/
h3 {
  transition: font-size 0.2s ease-in-out;
}
@media (min-width: 0) {
  h3 {
    font-size: 33.1776px;
    letter-spacing: 0.663552px;
  }
}
@media (min-width: 600px) {
  h3 {
    font-size: 33.1776px;
    letter-spacing: 0.663552px;
  }
}
@media (min-width: 1200px) {
  h3 {
    font-size: 39.0625px;
    letter-spacing: 0.78125px;
  }
}

/*
  .fs-p = 21
  .fs-h6 = 21
  .fs-h5 = 28
  .fs-h4 = 38
  ...
*/
@media (min-width: 0) {
  .fs-h3 {
    font-size: 33.1776px;
    letter-spacing: 0.663552px;
  }
}
@media (min-width: 600px) {
  .fs-h3 {
    font-size: 33.1776px;
    letter-spacing: 0.663552px;
  }
}
@media (min-width: 1200px) {
  .fs-h3 {
    font-size: 39.0625px;
    letter-spacing: 0.78125px;
  }
}

/*
  p = 21px Regular
  h6 = 21px Regular
  h5 = 28px Regular
  h4 = 38px Regular
  h3 = 51px Regular
  h2 = 67px Regular
  h1 = 90px Regular
*/
h2 {
  transition: font-size 0.2s ease-in-out;
}
@media (min-width: 0) {
  h2 {
    font-size: 39.81312px;
    letter-spacing: 0.7962624px;
  }
}
@media (min-width: 600px) {
  h2 {
    font-size: 39.81312px;
    letter-spacing: 0.7962624px;
  }
}
@media (min-width: 1200px) {
  h2 {
    font-size: 48.828125px;
    letter-spacing: 0.9765625px;
  }
}

/*
  .fs-p = 21
  .fs-h6 = 21
  .fs-h5 = 28
  .fs-h4 = 38
  ...
*/
@media (min-width: 0) {
  .fs-h2 {
    font-size: 39.81312px;
    letter-spacing: 0.7962624px;
  }
}
@media (min-width: 600px) {
  .fs-h2 {
    font-size: 39.81312px;
    letter-spacing: 0.7962624px;
  }
}
@media (min-width: 1200px) {
  .fs-h2 {
    font-size: 48.828125px;
    letter-spacing: 0.9765625px;
  }
}

/*
  p = 21px Regular
  h6 = 21px Regular
  h5 = 28px Regular
  h4 = 38px Regular
  h3 = 51px Regular
  h2 = 67px Regular
  h1 = 90px Regular
*/
h1 {
  transition: font-size 0.2s ease-in-out;
}
@media (min-width: 0) {
  h1 {
    font-size: 39.81312px;
    letter-spacing: 0.7962624px;
  }
}
@media (min-width: 600px) {
  h1 {
    font-size: 39.81312px;
    letter-spacing: 0.7962624px;
  }
}
@media (min-width: 1200px) {
  h1 {
    font-size: 48.828125px;
    letter-spacing: 0.9765625px;
  }
}

/*
  .fs-p = 21
  .fs-h6 = 21
  .fs-h5 = 28
  .fs-h4 = 38
  ...
*/
@media (min-width: 0) {
  .fs-h1 {
    font-size: 39.81312px;
    letter-spacing: 0.7962624px;
  }
}
@media (min-width: 600px) {
  .fs-h1 {
    font-size: 39.81312px;
    letter-spacing: 0.7962624px;
  }
}
@media (min-width: 1200px) {
  .fs-h1 {
    font-size: 48.828125px;
    letter-spacing: 0.9765625px;
  }
}

/*
  .fs-step-3 = 7
  .fs-step-2 = 9
  .fs-step-1 = 12
  .fs-step0 = 16
  .fs-step1 = 21 --- p
  .fs-step2 = 28 --- h6
  .fs-step3 = 38 --- h5
  .fs-step4 = 51 --- h4
  ...
*/
@media (min-width: 0) {
  .fs-step-4 {
    font-size: 7.7160493827px;
    letter-spacing: 0.1543209877px;
  }
}
@media (min-width: 600px) {
  .fs-step-4 {
    font-size: 7.7160493827px;
    letter-spacing: 0.1543209877px;
  }
}
@media (min-width: 1200px) {
  .fs-step-4 {
    font-size: 6.5536px;
    letter-spacing: 0.131072px;
  }
}

@media (min-width: 0) {
  .fs-step-3 {
    font-size: 9.2592592593px;
    letter-spacing: 0.1851851852px;
  }
}
@media (min-width: 600px) {
  .fs-step-3 {
    font-size: 9.2592592593px;
    letter-spacing: 0.1851851852px;
  }
}
@media (min-width: 1200px) {
  .fs-step-3 {
    font-size: 8.192px;
    letter-spacing: 0.16384px;
  }
}

@media (min-width: 0) {
  .fs-step-2, .bottom-nav:not(.bottom-nav--desktop) .bottom-nav__items .bottom-nav__link {
    font-size: 11.1111111111px;
    letter-spacing: 0.2222222222px;
  }
}
@media (min-width: 600px) {
  .fs-step-2, .bottom-nav:not(.bottom-nav--desktop) .bottom-nav__items .bottom-nav__link {
    font-size: 11.1111111111px;
    letter-spacing: 0.2222222222px;
  }
}
@media (min-width: 1200px) {
  .fs-step-2, .bottom-nav:not(.bottom-nav--desktop) .bottom-nav__items .bottom-nav__link {
    font-size: 10.24px;
    letter-spacing: 0.2048px;
  }
}

@media (min-width: 0) {
  .fs-step-1 {
    font-size: 13.3333333333px;
    letter-spacing: 0.2666666667px;
  }
}
@media (min-width: 600px) {
  .fs-step-1 {
    font-size: 13.3333333333px;
    letter-spacing: 0.2666666667px;
  }
}
@media (min-width: 1200px) {
  .fs-step-1 {
    font-size: 12.8px;
    letter-spacing: 0.256px;
  }
}

@media (min-width: 0) {
  .fs-step0 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .fs-step0 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .fs-step0 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

@media (min-width: 0) {
  .fs-step1 {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 600px) {
  .fs-step1 {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 1200px) {
  .fs-step1 {
    font-size: 20px;
    letter-spacing: 0.4px;
  }
}

@media (min-width: 0) {
  .fs-step2 {
    font-size: 23.04px;
    letter-spacing: 0.4608px;
  }
}
@media (min-width: 600px) {
  .fs-step2 {
    font-size: 23.04px;
    letter-spacing: 0.4608px;
  }
}
@media (min-width: 1200px) {
  .fs-step2 {
    font-size: 25px;
    letter-spacing: 0.5px;
  }
}

@media (min-width: 0) {
  .fs-step3 {
    font-size: 27.648px;
    letter-spacing: 0.55296px;
  }
}
@media (min-width: 600px) {
  .fs-step3 {
    font-size: 27.648px;
    letter-spacing: 0.55296px;
  }
}
@media (min-width: 1200px) {
  .fs-step3 {
    font-size: 31.25px;
    letter-spacing: 0.625px;
  }
}

@media (min-width: 0) {
  .fs-step4 {
    font-size: 33.1776px;
    letter-spacing: 0.663552px;
  }
}
@media (min-width: 600px) {
  .fs-step4 {
    font-size: 33.1776px;
    letter-spacing: 0.663552px;
  }
}
@media (min-width: 1200px) {
  .fs-step4 {
    font-size: 39.0625px;
    letter-spacing: 0.78125px;
  }
}

@media (min-width: 0) {
  .fs-step5 {
    font-size: 39.81312px;
    letter-spacing: 0.7962624px;
  }
}
@media (min-width: 600px) {
  .fs-step5 {
    font-size: 39.81312px;
    letter-spacing: 0.7962624px;
  }
}
@media (min-width: 1200px) {
  .fs-step5 {
    font-size: 48.828125px;
    letter-spacing: 0.9765625px;
  }
}

@media (min-width: 0) {
  .fs-step6 {
    font-size: 47.775744px;
    letter-spacing: 0.95551488px;
  }
}
@media (min-width: 600px) {
  .fs-step6 {
    font-size: 47.775744px;
    letter-spacing: 0.95551488px;
  }
}
@media (min-width: 1200px) {
  .fs-step6 {
    font-size: 61.03515625px;
    letter-spacing: 1.220703125px;
  }
}

label,
.label-text {
  font-family: "Urbanist", sans-serif;
  font-weight: 600;
}
@media (min-width: 0) {
  label,
  .label-text {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  label,
  .label-text {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  label,
  .label-text {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.notes-text, .breadcrumb li a, .breadcrumb li {
  color: #313131;
  font-weight: 300;
  text-transform: uppercase;
}
@media (min-width: 0) {
  .notes-text, .breadcrumb li a, .breadcrumb li {
    font-size: 13.3333333333px;
    letter-spacing: 0.2666666667px;
  }
}
@media (min-width: 600px) {
  .notes-text, .breadcrumb li a, .breadcrumb li {
    font-size: 13.3333333333px;
    letter-spacing: 0.2666666667px;
  }
}
@media (min-width: 1200px) {
  .notes-text, .breadcrumb li a, .breadcrumb li {
    font-size: 12.8px;
    letter-spacing: 0.256px;
  }
}

input,
.input-text,
.select2-container--flat .select2-selection--single .select2-selection__rendered,
.select2-container--flat span.select2-search input {
  font-family: "Urbanist", sans-serif;
  font-weight: 500;
}
@media (min-width: 0) {
  input,
  .input-text,
  .select2-container--flat .select2-selection--single .select2-selection__rendered,
  .select2-container--flat span.select2-search input {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  input,
  .input-text,
  .select2-container--flat .select2-selection--single .select2-selection__rendered,
  .select2-container--flat span.select2-search input {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  input,
  .input-text,
  .select2-container--flat .select2-selection--single .select2-selection__rendered,
  .select2-container--flat span.select2-search input {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

/* LINKS */
a {
  color: inherit;
  font-weight: 500;
}
a * {
  pointer-events: none;
}

a,
a:hover,
a:visited,
a:link,
a:active {
  color: !important;
  text-decoration: none;
}

a:hover {
  color: #30A4DD;
  cursor: pointer;
}

/* WEIGHT CLASSES */
.text--light {
  font-weight: 300;
}

.text--regular {
  font-weight: 400;
}

.text--medium {
  font-weight: 500;
}

.text--semi-bold {
  font-weight: 600;
}

.text--bold {
  font-weight: 700;
}

/* COLOR CLASSES */
.text--white {
  color: white;
}

.text--black {
  color: black;
}

.text--lightest {
  color: white;
}

.text--darkest {
  color: #313131;
}

.text--primary {
  color: #034881;
}

.text--secondary {
  color: #B5E4FF;
}

.text--accent {
  color: #30A4DD;
}

.text--success {
  color: #77ea8e;
}

.text--info {
  color: #869AFB;
}

.text--warning {
  color: #f4da7e;
}

.text--danger {
  color: #FB8686;
}

.text--light {
  color: #E9EDF3;
}

.text--dark {
  color: #313131;
}

.text--disabled {
  color: #D9D9D9;
}

.text--bg-container {
  color: #E9EDF3;
}

.text--blue {
  color: #007BFF;
}

.text--indigo {
  color: #6610F2;
}

.text--purple {
  color: #6F42C1;
}

.text--pink {
  color: #E83E8C;
}

.text--red {
  color: #DC3545;
}

.text--orange {
  color: #FD7E14;
}

.text--yellow {
  color: #FFC107;
}

.text--green {
  color: #28A745;
}

.text--teal {
  color: #20C997;
}

.text--cyan {
  color: #17A2B8;
}

.text--white {
  color: white;
}

.text--gray {
  color: #5D697A;
}

.text--gray-dark {
  color: #636363;
}

/* TEXT TRANSFORMATION */
.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

.line-through {
  text-decoration: line-through;
}

/* LISTS */
ul, ol {
  display: flex;
  flex-direction: column;
  gap: 16px;
  line-height: 1.5;
}
@media (min-width: 0) {
  ul, ol {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 600px) {
  ul, ol {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 1200px) {
  ul, ol {
    font-size: 20px;
    letter-spacing: 0.4px;
  }
}
ul ::marker, ol ::marker {
  color: #30A4DD;
}

/* Mixins Buttons */
/**
 * This variables are only assigned to BUTTONS.
 *
 * The accent colors of the project are already assigned to internal variables
 * in the colors stylesheet of the styleguide
 * (e.g.: theme-color("primary"), neutral-color("lightest"),...).
 *
 *
 * The name of this variables should follow this rule:
 * $c_nav-text
 *
 *
 * The variable begins with the initial of the variable type c (color),
 * followed by the element, and the section of the element where will be applied
 * the color.
 *
 * $c_nav
 *
 * In this case this variable represents the background color of the element.
 */
/* BUTTON COLORS */
/*
  Choose the base font size of the btns
  -3 => .fs-step-3 = 7
  -2 => .fs-step-2 = 9
  -1 => .fs-step-1 = 12
   0 => .fs-step0 = 16
   1 => .fs-step1 = 21
   2 => .fs-step2 = 28
   3 => .fs-step3 = 38
   4 => .fs-step4 = 51
  ...
*/
/* Fix for Firefox */
@-moz-document url-prefix() { /* stylelint-disable-line */
  .btn {
    letter-spacing: 1px;
  }
}
/* Buttons */
.btn-primary, .btn, button {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  background-color: #034881;
  border: 2px solid #034881;
  border-radius: 48px;
  box-sizing: border-box;
  color: white;
  cursor: pointer;
  display: inherit;
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  padding: 12px 20px;
  text-align: center;
}
.btn-primary:hover, .btn:hover, button:hover, .btn-primary:active, .btn:active, button:active {
  background-color: #30A4DD;
  border-color: #30A4DD;
  color: white;
}
@media (min-width: 0) {
  .btn-primary, .btn, button {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 600px) {
  .btn-primary, .btn, button {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 1200px) {
  .btn-primary, .btn, button {
    font-size: 20px;
    letter-spacing: 0.4px;
  }
}
.btn-primary:focus, .btn:focus, button:focus {
  outline: none;
}
@media (min-width: 0) {
  .btn-primary, .btn, button {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-primary, .btn, button {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-primary, .btn, button {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-primary i, .btn i, button i {
  margin-bottom: -0.2em;
}
.btn-primary i:before, .btn i:before, button i:before {
  font-weight: 700;
  font-size: 1.244em;
}

.btn-outline-primary, .bottom-nav__link, .btn-outline, .bottom-nav--desktop .bottom-nav__open:before, .bottom-nav--desktop .bottom-nav__active-page {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  background-color: transparent;
  border: 2px solid #034881;
  border-radius: 48px;
  box-sizing: border-box;
  color: #034881;
  cursor: pointer;
  display: inherit;
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  padding: 12px 20px;
  text-align: center;
  backdrop-filter: blur(10px);
}
.btn-outline-primary:hover, .bottom-nav__link:hover, .btn-outline:hover, .bottom-nav--desktop .bottom-nav__open:hover:before, .bottom-nav--desktop .bottom-nav__active-page:hover, .btn-outline-primary:active, .bottom-nav__link:active, .btn-outline:active, .bottom-nav--desktop .bottom-nav__open:active:before, .bottom-nav--desktop .bottom-nav__active-page:active {
  background-color: rgb(186.5284090909, 208.1282467532, 225.9715909091);
  border-color: #034881;
  color: #034881;
}
@media (min-width: 0) {
  .btn-outline-primary, .bottom-nav__link, .btn-outline, .bottom-nav--desktop .bottom-nav__open:before, .bottom-nav--desktop .bottom-nav__active-page {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 600px) {
  .btn-outline-primary, .bottom-nav__link, .btn-outline, .bottom-nav--desktop .bottom-nav__open:before, .bottom-nav--desktop .bottom-nav__active-page {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 1200px) {
  .btn-outline-primary, .bottom-nav__link, .btn-outline, .bottom-nav--desktop .bottom-nav__open:before, .bottom-nav--desktop .bottom-nav__active-page {
    font-size: 20px;
    letter-spacing: 0.4px;
  }
}
.btn-outline-primary:focus, .bottom-nav__link:focus, .btn-outline:focus, .bottom-nav--desktop .bottom-nav__open:focus:before, .bottom-nav--desktop .bottom-nav__active-page:focus {
  outline: none;
}
@media (min-width: 0) {
  .btn-outline-primary, .bottom-nav__link, .btn-outline, .bottom-nav--desktop .bottom-nav__open:before, .bottom-nav--desktop .bottom-nav__active-page {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-outline-primary, .bottom-nav__link, .btn-outline, .bottom-nav--desktop .bottom-nav__open:before, .bottom-nav--desktop .bottom-nav__active-page {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-outline-primary, .bottom-nav__link, .btn-outline, .bottom-nav--desktop .bottom-nav__open:before, .bottom-nav--desktop .bottom-nav__active-page {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-outline-primary i, .bottom-nav__link i, .btn-outline i, .bottom-nav--desktop .bottom-nav__open:before i, .bottom-nav--desktop .bottom-nav__active-page i {
  margin-bottom: -0.2em;
}
.btn-outline-primary i:before, .bottom-nav__link i:before, .btn-outline i:before, .bottom-nav--desktop .bottom-nav__open:before i:before, .bottom-nav--desktop .bottom-nav__active-page i:before {
  font-weight: 700;
  font-size: 1.244em;
}

.btn-secondary {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  background-color: #B5E4FF;
  border: 2px solid #B5E4FF;
  border-radius: 48px;
  box-sizing: border-box;
  color: #313131;
  cursor: pointer;
  display: inherit;
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  padding: 12px 20px;
  text-align: center;
}
.btn-secondary:hover, .btn-secondary:active {
  background-color: #30A4DD;
  border-color: #30A4DD;
  color: #313131;
}
@media (min-width: 0) {
  .btn-secondary {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 600px) {
  .btn-secondary {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 1200px) {
  .btn-secondary {
    font-size: 20px;
    letter-spacing: 0.4px;
  }
}
.btn-secondary:focus {
  outline: none;
}
@media (min-width: 0) {
  .btn-secondary {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-secondary {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-secondary {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-secondary i {
  margin-bottom: -0.2em;
}
.btn-secondary i:before {
  font-weight: 700;
  font-size: 1.244em;
}

.btn-outline-secondary {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  background-color: transparent;
  border: 2px solid #B5E4FF;
  border-radius: 48px;
  box-sizing: border-box;
  color: #B5E4FF;
  cursor: pointer;
  display: inherit;
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  padding: 12px 20px;
  text-align: center;
  backdrop-filter: blur(10px);
}
.btn-outline-secondary:hover, .btn-outline-secondary:active {
  background-color: rgb(222.3443181818, 232.6457792208, 241.1556818182);
  border-color: #034881;
  color: #034881;
}
@media (min-width: 0) {
  .btn-outline-secondary {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 600px) {
  .btn-outline-secondary {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 1200px) {
  .btn-outline-secondary {
    font-size: 20px;
    letter-spacing: 0.4px;
  }
}
.btn-outline-secondary:focus {
  outline: none;
}
@media (min-width: 0) {
  .btn-outline-secondary {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-outline-secondary {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-outline-secondary {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-outline-secondary i {
  margin-bottom: -0.2em;
}
.btn-outline-secondary i:before {
  font-weight: 700;
  font-size: 1.244em;
}

.btn-accent {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  background-color: #30A4DD;
  border: 2px solid #30A4DD;
  border-radius: 48px;
  box-sizing: border-box;
  color: white;
  cursor: pointer;
  display: inherit;
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  padding: 12px 20px;
  text-align: center;
}
.btn-accent:hover, .btn-accent:active {
  background-color: rgb(113.7074688797, 192.8858921162, 231.7925311203);
  border-color: rgb(113.7074688797, 192.8858921162, 231.7925311203);
  color: white;
}
@media (min-width: 0) {
  .btn-accent {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 600px) {
  .btn-accent {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 1200px) {
  .btn-accent {
    font-size: 20px;
    letter-spacing: 0.4px;
  }
}
.btn-accent:focus {
  outline: none;
}
@media (min-width: 0) {
  .btn-accent {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-accent {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-accent {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-accent i {
  margin-bottom: -0.2em;
}
.btn-accent i:before {
  font-weight: 700;
  font-size: 1.244em;
}

.btn-outline-accent {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  background-color: transparent;
  border: 2px solid #30A4DD;
  border-radius: 48px;
  box-sizing: border-box;
  color: #30A4DD;
  cursor: pointer;
  display: inherit;
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  padding: 12px 20px;
  text-align: center;
  backdrop-filter: blur(10px);
}
.btn-outline-accent:hover, .btn-outline-accent:active {
  background-color: rgb(186.5284090909, 208.1282467532, 225.9715909091);
  border-color: #30A4DD;
  color: #30A4DD;
}
@media (min-width: 0) {
  .btn-outline-accent {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 600px) {
  .btn-outline-accent {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 1200px) {
  .btn-outline-accent {
    font-size: 20px;
    letter-spacing: 0.4px;
  }
}
.btn-outline-accent:focus {
  outline: none;
}
@media (min-width: 0) {
  .btn-outline-accent {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-outline-accent {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-outline-accent {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-outline-accent i {
  margin-bottom: -0.2em;
}
.btn-outline-accent i:before {
  font-weight: 700;
  font-size: 1.244em;
}

.btn-success {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  background-color: #77ea8e;
  border: 2px solid #77ea8e;
  border-radius: 48px;
  box-sizing: border-box;
  color: white;
  cursor: pointer;
  display: inherit;
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  padding: 12px 20px;
  text-align: center;
}
.btn-success:hover, .btn-success:active {
  background-color: rgb(193.3175159236, 236.1824840764, 201.8905095541);
  border-color: rgb(193.3175159236, 236.1824840764, 201.8905095541);
  color: white;
}
@media (min-width: 0) {
  .btn-success {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 600px) {
  .btn-success {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 1200px) {
  .btn-success {
    font-size: 20px;
    letter-spacing: 0.4px;
  }
}
.btn-success:focus {
  outline: none;
}
@media (min-width: 0) {
  .btn-success {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-success {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-success {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-success i {
  margin-bottom: -0.2em;
}
.btn-success i:before {
  font-weight: 700;
  font-size: 1.244em;
}

.btn-outline-success {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  background-color: transparent;
  border: 2px solid #77ea8e;
  border-radius: 48px;
  box-sizing: border-box;
  color: #77ea8e;
  cursor: pointer;
  display: inherit;
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  padding: 12px 20px;
  text-align: center;
  backdrop-filter: blur(10px);
}
.btn-outline-success:hover, .btn-outline-success:active {
  background-color: rgb(214.2316878981, 240.7683121019, 219.5390127389);
  border-color: rgb(52.7324840764, 223.7675159236, 86.9394904459);
  color: rgb(52.7324840764, 223.7675159236, 86.9394904459);
}
@media (min-width: 0) {
  .btn-outline-success {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 600px) {
  .btn-outline-success {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 1200px) {
  .btn-outline-success {
    font-size: 20px;
    letter-spacing: 0.4px;
  }
}
.btn-outline-success:focus {
  outline: none;
}
@media (min-width: 0) {
  .btn-outline-success {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-outline-success {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-outline-success {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-outline-success i {
  margin-bottom: -0.2em;
}
.btn-outline-success i:before {
  font-weight: 700;
  font-size: 1.244em;
}

.btn-info {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  background-color: #869AFB;
  border: 2px solid #869AFB;
  border-radius: 48px;
  box-sizing: border-box;
  color: white;
  cursor: pointer;
  display: inherit;
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  padding: 12px 20px;
  text-align: center;
}
.btn-info:hover, .btn-info:active {
  background-color: rgb(210.477, 217.4079401709, 251.023);
  border-color: rgb(210.477, 217.4079401709, 251.023);
  color: white;
}
@media (min-width: 0) {
  .btn-info {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 600px) {
  .btn-info {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 1200px) {
  .btn-info {
    font-size: 20px;
    letter-spacing: 0.4px;
  }
}
.btn-info:focus {
  outline: none;
}
@media (min-width: 0) {
  .btn-info {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-info {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-info {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-info i {
  margin-bottom: -0.2em;
}
.btn-info i:before {
  font-weight: 700;
  font-size: 1.244em;
}

.btn-outline-info {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  background-color: transparent;
  border: 2px solid #869AFB;
  border-radius: 48px;
  box-sizing: border-box;
  color: #869AFB;
  cursor: pointer;
  display: inherit;
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  padding: 12px 20px;
  text-align: center;
  backdrop-filter: blur(10px);
}
.btn-outline-info:hover, .btn-outline-info:active {
  background-color: rgb(210.477, 217.4079401709, 251.023);
  border-color: rgb(102.232, 124.3749059829, 231.768);
  color: rgb(102.232, 124.3749059829, 231.768);
}
@media (min-width: 0) {
  .btn-outline-info {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 600px) {
  .btn-outline-info {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 1200px) {
  .btn-outline-info {
    font-size: 20px;
    letter-spacing: 0.4px;
  }
}
.btn-outline-info:focus {
  outline: none;
}
@media (min-width: 0) {
  .btn-outline-info {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-outline-info {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-outline-info {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-outline-info i {
  margin-bottom: -0.2em;
}
.btn-outline-info i:before {
  font-weight: 700;
  font-size: 1.244em;
}

.btn-warning {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  background-color: #f4da7e;
  border: 2px solid #f4da7e;
  border-radius: 48px;
  box-sizing: border-box;
  color: #313131;
  cursor: pointer;
  display: inherit;
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  padding: 12px 20px;
  text-align: center;
}
.btn-warning:hover, .btn-warning:active {
  background-color: rgb(243.6607142857, 234.6661622276, 202.8392857143);
  border-color: rgb(243.6607142857, 234.6661622276, 202.8392857143);
  color: #313131;
}
@media (min-width: 0) {
  .btn-warning {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 600px) {
  .btn-warning {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 1200px) {
  .btn-warning {
    font-size: 20px;
    letter-spacing: 0.4px;
  }
}
.btn-warning:focus {
  outline: none;
}
@media (min-width: 0) {
  .btn-warning {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-warning {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-warning {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-warning i {
  margin-bottom: -0.2em;
}
.btn-warning i:before {
  font-weight: 700;
  font-size: 1.244em;
}

.btn-outline-warning {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  background-color: transparent;
  border: 2px solid #f4da7e;
  border-radius: 48px;
  box-sizing: border-box;
  color: #f4da7e;
  cursor: pointer;
  display: inherit;
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  padding: 12px 20px;
  text-align: center;
  backdrop-filter: blur(10px);
}
.btn-outline-warning:hover, .btn-outline-warning:active {
  background-color: rgb(247.2642857143, 242.3003631961, 224.7357142857);
  border-color: rgb(237.9892857143, 197.7821428571, 55.5107142857);
  color: rgb(237.9892857143, 197.7821428571, 55.5107142857);
}
@media (min-width: 0) {
  .btn-outline-warning {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 600px) {
  .btn-outline-warning {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 1200px) {
  .btn-outline-warning {
    font-size: 20px;
    letter-spacing: 0.4px;
  }
}
.btn-outline-warning:focus {
  outline: none;
}
@media (min-width: 0) {
  .btn-outline-warning {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-outline-warning {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-outline-warning {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-outline-warning i {
  margin-bottom: -0.2em;
}
.btn-outline-warning i:before {
  font-weight: 700;
  font-size: 1.244em;
}

.btn-danger {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  background-color: #FB8686;
  border: 2px solid #FB8686;
  border-radius: 48px;
  box-sizing: border-box;
  color: white;
  cursor: pointer;
  display: inherit;
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  padding: 12px 20px;
  text-align: center;
}
.btn-danger:hover, .btn-danger:active {
  background-color: rgb(251.023, 210.477, 210.477);
  border-color: rgb(251.023, 210.477, 210.477);
  color: white;
}
@media (min-width: 0) {
  .btn-danger {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 600px) {
  .btn-danger {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 1200px) {
  .btn-danger {
    font-size: 20px;
    letter-spacing: 0.4px;
  }
}
.btn-danger:focus {
  outline: none;
}
@media (min-width: 0) {
  .btn-danger {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-danger {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-danger {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-danger i {
  margin-bottom: -0.2em;
}
.btn-danger i:before {
  font-weight: 700;
  font-size: 1.244em;
}

.btn-outline-danger {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  background-color: transparent;
  border: 2px solid #FB8686;
  border-radius: 48px;
  box-sizing: border-box;
  color: #FB8686;
  cursor: pointer;
  display: inherit;
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  padding: 12px 20px;
  text-align: center;
  backdrop-filter: blur(10px);
}
.btn-outline-danger:hover, .btn-outline-danger:active {
  background-color: rgb(251.023, 210.477, 210.477);
  border-color: rgb(231.768, 102.232, 102.232);
  color: rgb(231.768, 102.232, 102.232);
}
@media (min-width: 0) {
  .btn-outline-danger {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 600px) {
  .btn-outline-danger {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 1200px) {
  .btn-outline-danger {
    font-size: 20px;
    letter-spacing: 0.4px;
  }
}
.btn-outline-danger:focus {
  outline: none;
}
@media (min-width: 0) {
  .btn-outline-danger {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-outline-danger {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-outline-danger {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-outline-danger i {
  margin-bottom: -0.2em;
}
.btn-outline-danger i:before {
  font-weight: 700;
  font-size: 1.244em;
}

.btn-light {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  background-color: #E9EDF3;
  border: 2px solid #E9EDF3;
  border-radius: 48px;
  box-sizing: border-box;
  color: #313131;
  cursor: pointer;
  display: inherit;
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  padding: 12px 20px;
  text-align: center;
}
.btn-light:hover, .btn-light:active {
  background-color: hsl(216, 19.4117647059%, 108.3333333333%);
  border-color: hsl(216, 19.4117647059%, 108.3333333333%);
  color: #313131;
}
@media (min-width: 0) {
  .btn-light {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 600px) {
  .btn-light {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 1200px) {
  .btn-light {
    font-size: 20px;
    letter-spacing: 0.4px;
  }
}
.btn-light:focus {
  outline: none;
}
@media (min-width: 0) {
  .btn-light {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-light {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-light {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-light i {
  margin-bottom: -0.2em;
}
.btn-light i:before {
  font-weight: 700;
  font-size: 1.244em;
}

.btn-outline-light {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  background-color: transparent;
  border: 2px solid #E9EDF3;
  border-radius: 48px;
  box-sizing: border-box;
  color: #E9EDF3;
  cursor: pointer;
  display: inherit;
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  padding: 12px 20px;
  text-align: center;
  backdrop-filter: blur(10px);
}
.btn-outline-light:hover, .btn-outline-light:active {
  background-color: rgb(198.7159090909, 206.9675324675, 213.7840909091);
  border-color: #E9EDF3;
  color: #E9EDF3;
}
@media (min-width: 0) {
  .btn-outline-light {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 600px) {
  .btn-outline-light {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 1200px) {
  .btn-outline-light {
    font-size: 20px;
    letter-spacing: 0.4px;
  }
}
.btn-outline-light:focus {
  outline: none;
}
@media (min-width: 0) {
  .btn-outline-light {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-outline-light {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-outline-light {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-outline-light i {
  margin-bottom: -0.2em;
}
.btn-outline-light i:before {
  font-weight: 700;
  font-size: 1.244em;
}

.btn-dark {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  background-color: #313131;
  border: 2px solid #313131;
  border-radius: 48px;
  box-sizing: border-box;
  color: white;
  cursor: pointer;
  display: inherit;
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  padding: 12px 20px;
  text-align: center;
}
.btn-dark:hover, .btn-dark:active {
  background-color: rgb(87.25, 87.25, 87.25);
  border-color: rgb(87.25, 87.25, 87.25);
  color: white;
}
@media (min-width: 0) {
  .btn-dark {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 600px) {
  .btn-dark {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 1200px) {
  .btn-dark {
    font-size: 20px;
    letter-spacing: 0.4px;
  }
}
.btn-dark:focus {
  outline: none;
}
@media (min-width: 0) {
  .btn-dark {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-dark {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-dark {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-dark i {
  margin-bottom: -0.2em;
}
.btn-dark i:before {
  font-weight: 700;
  font-size: 1.244em;
}

.btn-outline-dark {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  background-color: transparent;
  border: 2px solid #313131;
  border-radius: 48px;
  box-sizing: border-box;
  color: #313131;
  cursor: pointer;
  display: inherit;
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  padding: 12px 20px;
  text-align: center;
  backdrop-filter: blur(10px);
}
.btn-outline-dark:hover, .btn-outline-dark:active {
  background-color: rgb(189.25, 189.25, 189.25);
  border-color: #313131;
  color: #313131;
}
@media (min-width: 0) {
  .btn-outline-dark {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 600px) {
  .btn-outline-dark {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 1200px) {
  .btn-outline-dark {
    font-size: 20px;
    letter-spacing: 0.4px;
  }
}
.btn-outline-dark:focus {
  outline: none;
}
@media (min-width: 0) {
  .btn-outline-dark {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-outline-dark {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-outline-dark {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-outline-dark i {
  margin-bottom: -0.2em;
}
.btn-outline-dark i:before {
  font-weight: 700;
  font-size: 1.244em;
}

.btn-disabled, button:disabled,
.btn:disabled {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  background-color: #D9D9D9;
  border: 2px solid #D9D9D9;
  border-radius: 48px;
  box-sizing: border-box;
  color: #313131;
  cursor: pointer;
  display: inherit;
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  padding: 12px 20px;
  text-align: center;
  color: rgb(242.5, 242.5, 242.5);
  pointer-events: none;
}
.btn-disabled:hover, button:hover:disabled,
.btn:hover:disabled, .btn-disabled:active, button:active:disabled,
.btn:active:disabled {
  background-color: hsl(0, 0%, 100.0980392157%);
  border-color: hsl(0, 0%, 100.0980392157%);
  color: #313131;
}
@media (min-width: 0) {
  .btn-disabled, button:disabled,
  .btn:disabled {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 600px) {
  .btn-disabled, button:disabled,
  .btn:disabled {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 1200px) {
  .btn-disabled, button:disabled,
  .btn:disabled {
    font-size: 20px;
    letter-spacing: 0.4px;
  }
}
.btn-disabled:focus, button:focus:disabled,
.btn:focus:disabled {
  outline: none;
}
@media (min-width: 0) {
  .btn-disabled, button:disabled,
  .btn:disabled {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-disabled, button:disabled,
  .btn:disabled {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-disabled, button:disabled,
  .btn:disabled {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-disabled i, button:disabled i,
.btn:disabled i {
  margin-bottom: -0.2em;
}
.btn-disabled i:before, button:disabled i:before,
.btn:disabled i:before {
  font-weight: 700;
  font-size: 1.244em;
}

.btn-outline-disabled, .btn-outline:disabled, .bottom-nav--desktop .bottom-nav__open:disabled:before, .bottom-nav--desktop .bottom-nav__active-page:disabled {
  overflow: hidden;
  transition-duration: 0.3s;
  transition-property: "background";
  background-color: transparent;
  border: 2px solid #D9D9D9;
  border-radius: 48px;
  box-sizing: border-box;
  color: #D9D9D9;
  cursor: pointer;
  display: inherit;
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  padding: 12px 20px;
  text-align: center;
  backdrop-filter: blur(10px);
  background-color: rgb(242.5, 242.5, 242.5);
  pointer-events: none;
}
.btn-outline-disabled:hover, .btn-outline:hover:disabled, .bottom-nav--desktop .bottom-nav__open:hover:disabled:before, .bottom-nav--desktop .bottom-nav__active-page:hover:disabled, .btn-outline-disabled:active, .btn-outline:active:disabled, .bottom-nav--desktop .bottom-nav__open:active:disabled:before, .bottom-nav--desktop .bottom-nav__active-page:active:disabled {
  background-color: hsl(0, 0%, 100.0980392157%);
  border-color: #D9D9D9;
  color: #D9D9D9;
}
@media (min-width: 0) {
  .btn-outline-disabled, .btn-outline:disabled, .bottom-nav--desktop .bottom-nav__open:disabled:before, .bottom-nav--desktop .bottom-nav__active-page:disabled {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 600px) {
  .btn-outline-disabled, .btn-outline:disabled, .bottom-nav--desktop .bottom-nav__open:disabled:before, .bottom-nav--desktop .bottom-nav__active-page:disabled {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 1200px) {
  .btn-outline-disabled, .btn-outline:disabled, .bottom-nav--desktop .bottom-nav__open:disabled:before, .bottom-nav--desktop .bottom-nav__active-page:disabled {
    font-size: 20px;
    letter-spacing: 0.4px;
  }
}
.btn-outline-disabled:focus, .btn-outline:focus:disabled, .bottom-nav--desktop .bottom-nav__open:focus:disabled:before, .bottom-nav--desktop .bottom-nav__active-page:focus:disabled {
  outline: none;
}
@media (min-width: 0) {
  .btn-outline-disabled, .btn-outline:disabled, .bottom-nav--desktop .bottom-nav__open:disabled:before, .bottom-nav--desktop .bottom-nav__active-page:disabled {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .btn-outline-disabled, .btn-outline:disabled, .bottom-nav--desktop .bottom-nav__open:disabled:before, .bottom-nav--desktop .bottom-nav__active-page:disabled {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .btn-outline-disabled, .btn-outline:disabled, .bottom-nav--desktop .bottom-nav__open:disabled:before, .bottom-nav--desktop .bottom-nav__active-page:disabled {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.btn-outline-disabled i, .btn-outline:disabled i, .bottom-nav--desktop .bottom-nav__open:disabled:before i, .bottom-nav--desktop .bottom-nav__active-page:disabled i {
  margin-bottom: -0.2em;
}
.btn-outline-disabled i:before, .btn-outline:disabled i:before, .bottom-nav--desktop .bottom-nav__open:disabled:before i:before, .bottom-nav--desktop .bottom-nav__active-page:disabled i:before {
  font-weight: 700;
  font-size: 1.244em;
}

.btn--overlap, .bottom-nav--desktop .bottom-nav__open:before {
  box-shadow: 0 0 9px 3px #636363;
  z-index: 2;
}

.btn--no-border {
  border: none;
}

.btn-icon {
  display: inline-flex !important;
  gap: 8px;
  padding: 8px 9px;
}
.btn-icon i {
  margin-bottom: -0.2em;
}
.btn-icon i:before {
  font-weight: 700;
  font-size: 1.244em;
}

.btn--small {
  padding: 8px 12px;
}
@media (min-width: 0) {
  .btn--small {
    font-size: 13.3333333333px;
    letter-spacing: 0.2666666667px;
  }
}
@media (min-width: 600px) {
  .btn--small {
    font-size: 13.3333333333px;
    letter-spacing: 0.2666666667px;
  }
}
@media (min-width: 1200px) {
  .btn--small {
    font-size: 12.8px;
    letter-spacing: 0.256px;
  }
}
.btn--small.btn-icon {
  padding: 4px 5px;
}

.btn--large {
  padding: 16px 24px;
}
@media (min-width: 0) {
  .btn--large {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 600px) {
  .btn--large {
    font-size: 19.2px;
    letter-spacing: 0.384px;
  }
}
@media (min-width: 1200px) {
  .btn--large {
    font-size: 20px;
    letter-spacing: 0.4px;
  }
}
.btn--large.btn-icon {
  padding: 10px 11px;
}

.btn--extra-large {
  padding: 18px 28px;
}
@media (min-width: 0) {
  .btn--extra-large {
    font-size: 23.04px;
    letter-spacing: 0.4608px;
  }
}
@media (min-width: 600px) {
  .btn--extra-large {
    font-size: 23.04px;
    letter-spacing: 0.4608px;
  }
}
@media (min-width: 1200px) {
  .btn--extra-large {
    font-size: 25px;
    letter-spacing: 0.5px;
  }
}
.btn--extra-large.btn-icon {
  padding: 13px 14px;
}

.btn--full-width {
  width: 100%;
}

/* Fixed classes */
.uppercase {
  text-transform: uppercase;
}

.center {
  text-align: center;
}

.min-width-full {
  min-width: 100%;
}

.left {
  float: left;
  text-align: left;
}

.right {
  float: right;
  text-align: right;
}

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

.d-flex {
  display: flex;
  flex-wrap: wrap;
}

.no-wrap {
  flex-wrap: nowrap;
}

.d-flex--column {
  flex-direction: column;
}

.grow--1 {
  flex-grow: 1;
}

.justify-right {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.align-center {
  align-items: center !important;
}

.align-baseline {
  align-items: baseline;
}

.align-end {
  align-items: end;
}

.align-self-end {
  align-self: end;
}

.place-self-end {
  place-self: end;
}

.relative {
  position: relative;
}

.border {
  border: solid 0.5px #B5E4FF;
}

.border-top {
  border-top: solid 0.5px #B5E4FF;
}

.border-left {
  border-left: solid 0.5px #B5E4FF;
}

.border-right {
  border-right: solid 0.5px #B5E4FF;
}

.border-bottom {
  border-bottom: solid 0.5px #B5E4FF;
}

.border-radius--0 {
  border-radius: 0;
}

.border-radius--1 {
  border-radius: 3px;
}

.border-radius--2 {
  border-radius: 8px;
}

.border-radius--3 {
  border-radius: 10px;
}

.border-radius--4 {
  border-radius: 20px;
}

.border-radius--5 {
  border-radius: 40px;
}

.border-radius-tl--0 {
  border-top-left-radius: 0;
}

.border-radius-tl--1 {
  border-top-left-radius: 3px;
}

.border-radius-tl--2 {
  border-top-left-radius: 8px;
}

.border-radius-tl--3 {
  border-top-left-radius: 10px;
}

.border-radius-tl--4 {
  border-top-left-radius: 20px;
}

.border-radius-tl--5 {
  border-top-left-radius: 40px;
}

.border-radius-tl {
  border-top-left-radius: 40px;
}

.border-radius-tr--0 {
  border-top-right-radius: 0;
}

.border-radius-tr--1 {
  border-top-right-radius: 3px;
}

.border-radius-tr--2 {
  border-top-right-radius: 8px;
}

.border-radius-tr--3 {
  border-top-right-radius: 10px;
}

.border-radius-tr--4 {
  border-top-right-radius: 20px;
}

.border-radius-tr--5 {
  border-top-right-radius: 40px;
}

.border-radius-tr {
  border-top-right-radius: 40px;
}

.border-radius-br--0 {
  border-bottom-right-radius: 0;
}

.border-radius-br--1 {
  border-bottom-right-radius: 3px;
}

.border-radius-br--2 {
  border-bottom-right-radius: 8px;
}

.border-radius-br--3 {
  border-bottom-right-radius: 10px;
}

.border-radius-br--4 {
  border-bottom-right-radius: 20px;
}

.border-radius-br--5 {
  border-bottom-right-radius: 40px;
}

.border-radius-br {
  border-bottom-right-radius: 40px;
}

.border-radius-bl--0 {
  border-bottom-left-radius: 0;
}

.border-radius-bl--1 {
  border-bottom-left-radius: 3px;
}

.border-radius-bl--2 {
  border-bottom-left-radius: 8px;
}

.border-radius-bl--3 {
  border-bottom-left-radius: 10px;
}

.border-radius-bl--4 {
  border-bottom-left-radius: 20px;
}

.border-radius-bl--5 {
  border-bottom-left-radius: 40px;
}

.border-radius-bl {
  border-bottom-left-radius: 40px;
}

/* Containers */
.container-small {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  max-width: 658px;
  padding: 0 32px;
  width: 100%;
}

.container-medium, .nav-list-container .nav-list, .navbar, .navbar-content {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  max-width: 1224px;
  padding: 0 32px;
  width: 100%;
}

.container-large {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  max-width: 1464px;
  padding: 0 32px;
  width: 100%;
}

.container--full-page {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin-bottom: 32px;
}

.box {
  background-color: #E9EDF3;
  border-radius: 40px 0;
  padding: 16px;
}

/* Title */
.box-title {
  align-items: center;
  color: #034881;
  display: flex;
  gap: 16px;
  position: absolute;
  right: 24px;
  top: -24px;
}

/* container btns footer */
.container__btns-footer {
  display: flex;
  flex-flow: row-reverse wrap;
  justify-content: space-between;
}

.container__btns-footer--center {
  gap: 8px;
  justify-content: center !important;
}

/* Background */
.bg--primary {
  background-color: #034881;
}

.bg--secondary {
  background-color: #B5E4FF;
}

.bg--accent {
  background-color: #30A4DD;
}

.bg--success {
  background-color: #77ea8e;
}

.bg--info {
  background-color: #869AFB;
}

.bg--warning {
  background-color: #f4da7e;
}

.bg--danger {
  background-color: #FB8686;
}

.bg--light {
  background-color: #E9EDF3;
}

.bg--dark {
  background-color: #313131;
}

.bg--disabled {
  background-color: #D9D9D9;
}

.bg--lightest {
  background-color: white;
}

.bg--000 {
  background-color: white;
}

.bg--100 {
  background-color: #E9EDF3;
}

.bg--200 {
  background-color: #D9D9D9;
}

.bg--300 {
  background-color: #5D697A;
}

.bg--400 {
  background-color: #636363;
}

.bg--500 {
  background-color: #313131;
}

.bg--darkest {
  background-color: #313131;
}

/* Badges */
.badge--primary {
  background-color: #034881;
  padding: 8px 24px;
  border-radius: 40px;
  color: white;
}
@media (min-width: 0) {
  .badge--primary {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--primary {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--primary {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--secondary {
  background-color: #B5E4FF;
  padding: 8px 24px;
  border-radius: 40px;
  color: #313131;
}
@media (min-width: 0) {
  .badge--secondary {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--secondary {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--secondary {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--accent {
  background-color: #30A4DD;
  padding: 8px 24px;
  border-radius: 40px;
  color: white;
}
@media (min-width: 0) {
  .badge--accent {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--accent {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--accent {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--success {
  background-color: #77ea8e;
  padding: 8px 24px;
  border-radius: 40px;
  color: white;
}
@media (min-width: 0) {
  .badge--success {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--success {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--success {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--info {
  background-color: #869AFB;
  padding: 8px 24px;
  border-radius: 40px;
  color: white;
}
@media (min-width: 0) {
  .badge--info {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--info {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--info {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--warning {
  background-color: #f4da7e;
  padding: 8px 24px;
  border-radius: 40px;
  color: #313131;
}
@media (min-width: 0) {
  .badge--warning {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--warning {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--warning {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--danger {
  background-color: #FB8686;
  padding: 8px 24px;
  border-radius: 40px;
  color: white;
}
@media (min-width: 0) {
  .badge--danger {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--danger {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--danger {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--light {
  background-color: #E9EDF3;
  padding: 8px 24px;
  border-radius: 40px;
  color: #313131;
}
@media (min-width: 0) {
  .badge--light {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--light {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--light {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--dark {
  background-color: #313131;
  padding: 8px 24px;
  border-radius: 40px;
  color: white;
}
@media (min-width: 0) {
  .badge--dark {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--dark {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--dark {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--disabled {
  background-color: #D9D9D9;
  padding: 8px 24px;
  border-radius: 40px;
  color: #313131;
}
@media (min-width: 0) {
  .badge--disabled {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--disabled {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--disabled {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--lightest {
  background-color: white;
  padding: 8px 24px;
  border-radius: 40px;
  color: #313131;
}
@media (min-width: 0) {
  .badge--lightest {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--lightest {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--lightest {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--000 {
  background-color: white;
  padding: 8px 24px;
  border-radius: 40px;
  color: #313131;
}
@media (min-width: 0) {
  .badge--000 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--000 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--000 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--100 {
  background-color: #E9EDF3;
  padding: 8px 24px;
  border-radius: 40px;
  color: #313131;
}
@media (min-width: 0) {
  .badge--100 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--100 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--100 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--200 {
  background-color: #D9D9D9;
  padding: 8px 24px;
  border-radius: 40px;
  color: #313131;
}
@media (min-width: 0) {
  .badge--200 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--200 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--200 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--300 {
  background-color: #5D697A;
  padding: 8px 24px;
  border-radius: 40px;
  color: white;
}
@media (min-width: 0) {
  .badge--300 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--300 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--300 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--400 {
  background-color: #636363;
  padding: 8px 24px;
  border-radius: 40px;
  color: white;
}
@media (min-width: 0) {
  .badge--400 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--400 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--400 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--500 {
  background-color: #313131;
  padding: 8px 24px;
  border-radius: 40px;
  color: white;
}
@media (min-width: 0) {
  .badge--500 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--500 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--500 {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

.badge--darkest {
  background-color: #313131;
  padding: 8px 24px;
  border-radius: 40px;
  color: white;
}
@media (min-width: 0) {
  .badge--darkest {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .badge--darkest {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .badge--darkest {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

@media (min-width: 600px) {
  .box-title {
    right: 32px;
    top: -40px;
  }
}
/**
 * This variables are only assigned to FORM elements.
 *
 * The accent colors of the project are already assigned to internal variables
 * in the colors stylesheet of the styleguide
 * (e.g.: theme-color("primary"), neutral-color("lightest"),...).
 *
 *
 * The name of this variables should follow this rule:
 * $c_nav-text
 *
 *
 * The variable begins with the initial of the variable type c (color),
 * followed by the element, and the section of the element where will be applied
 * the color.
 *
 * $c_nav
 *
 * In this case this variable represents the background color of the element.
 */
/* INPUT COLORS */
/* SELECT2 COLORS */
/* DATEPICKER COLORS */
/**
 * This variables are only assigned to FORM elements.
 */
/** Radio and Checkbox Buttons
 * Adapted from: https://kyusuf.com/post/completely-css-custom-checkbox-radio-buttons-and-select-boxes
 *
 * HTML example:
  <div class="control_group checkbox_group">
    <label class="control control-checkbox label-text">First checkbox
      <input type="checkbox" checked="checked"/>
      <div class="control-indicator"></div>
    </label>
  </div>

  <div class="control_group radio_group">
  	<label class="control control-radio label-text">First radio
  		<input type="radio" name="radio" checked="checked"/>
  		<div class="control-indicator"></div>
  	</label>
  </div>
 *
 * To update the colors of the inputs, the variables should changed on colors.scss
 *
 */
.control {
  cursor: pointer;
  display: block;
  margin-bottom: 15px;
  padding-left: calc(20px + 10px);
  position: relative;
}
.control input {
  opacity: 0;
  position: absolute;
  z-index: -1;
}
.control input:checked ~ .control-indicator:after {
  display: block;
}
.control input:disabled ~ .control-indicator {
  border: 1px solid #313131;
  opacity: 0.6;
  pointer-events: none;
}
.control:hover input:not([disabled]) ~ .control-indicator {
  background: rgb(41.655186722, 131.9673062624, 176.344813278);
}

/* stylelint-disable-next-line no-descending-specificity */
.control-indicator {
  background: transparent;
  border: 1px solid #313131;
  border-radius: 4px;
  height: 20px;
  left: 0;
  position: absolute;
  top: -2px;
  width: 20px;
  /* stylelint-disable-next-line no-descending-specificity */
}
.control-indicator:after {
  content: "";
  display: none;
  position: absolute;
}

.control-radio {
  /* stylelint-disable-next-line no-descending-specificity */
}
.control-radio .control-indicator {
  border-radius: 50%;
  border-color: #30A4DD;
  /* stylelint-disable-next-line no-descending-specificity */
}
.control-radio .control-indicator:after {
  background: #30A4DD;
  border-radius: 50%;
  box-sizing: border-box;
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.control-radio input:disabled ~ .control-indicator:after {
  background: #636363;
}

.control-radio--primary .control-indicator {
  border-color: #034881;
}
.control-radio--primary .control-indicator:after {
  background: #034881;
}
.control-radio--primary:hover input:not([disabled]) ~ .control-indicator {
  background: rgb(17.8840909091, 98.511038961, 165.1159090909);
}

.control-radio--secondary .control-indicator {
  border-color: #B5E4FF;
}
.control-radio--secondary .control-indicator:after {
  background: #B5E4FF;
}
.control-radio--secondary:hover input:not([disabled]) ~ .control-indicator {
  background: rgb(233.725, 246.1418918919, 253.275);
}

.control-radio--accent .control-indicator {
  border-color: #30A4DD;
}
.control-radio--accent .control-indicator:after {
  background: #30A4DD;
}
.control-radio--accent:hover input:not([disabled]) ~ .control-indicator {
  background: rgb(106.0549792531, 178.3974348212, 213.9450207469);
}

.control-radio--success .control-indicator {
  border-color: #77ea8e;
}
.control-radio--success .control-indicator:after {
  background: #77ea8e;
}
.control-radio--success:hover input:not([disabled]) ~ .control-indicator {
  background: rgb(171.128343949, 232.871656051, 183.4770063694);
}

.control-radio--info .control-indicator {
  border-color: #869AFB;
}
.control-radio--info .control-indicator:after {
  background: #869AFB;
}
.control-radio--info:hover input:not([disabled]) ~ .control-indicator {
  background: rgb(188.918, 198.8605641026, 247.082);
}

.control-radio--warning .control-indicator {
  border-color: #f4da7e;
}
.control-radio--warning .control-indicator:after {
  background: #f4da7e;
}
.control-radio--warning:hover input:not([disabled]) ~ .control-indicator {
  background: rgb(241.3321428571, 227.7450968523, 179.6678571429);
}

.control-radio--danger .control-indicator {
  border-color: #FB8686;
}
.control-radio--danger .control-indicator:after {
  background: #FB8686;
}
.control-radio--danger:hover input:not([disabled]) ~ .control-indicator {
  background: rgb(247.082, 188.918, 188.918);
}

.control-radio--light .control-indicator {
  border-color: #E9EDF3;
}
.control-radio--light .control-indicator:after {
  background: #E9EDF3;
}
.control-radio--light:hover input:not([disabled]) ~ .control-indicator {
  background: hsl(216, 14.4117647059%, 103.3333333333%);
}

.control-radio--dark .control-indicator {
  border-color: #313131;
}
.control-radio--dark .control-indicator:after {
  background: #313131;
}
.control-radio--dark:hover input:not([disabled]) ~ .control-indicator {
  background: rgb(74.5, 74.5, 74.5);
}

.control-radio--disabled .control-indicator {
  border-color: #D9D9D9;
}
.control-radio--disabled .control-indicator:after {
  background: #D9D9D9;
}
.control-radio--disabled:hover input:not([disabled]) ~ .control-indicator {
  background: rgb(242.5, 242.5, 242.5);
}

.control-checkbox {
  /* stylelint-disable-next-line no-descending-specificity */
  /* stylelint-disable-next-line no-descending-specificity */
}
.control-checkbox .control-indicator {
  border-color: #30A4DD;
  /* stylelint-disable-next-line no-descending-specificity */
}
.control-checkbox .control-indicator:after {
  border: solid white;
  border-width: 0 1px 1px 0;
  height: 9px;
  left: 6px;
  top: 3px;
  transform: rotate(45deg);
  width: 6px;
}
.control-checkbox input:checked ~ .control-indicator {
  background-color: #30A4DD;
}
.control-checkbox input:disabled ~ .control-indicator:after {
  border-color: #636363;
}

.control-checkbox--no-text {
  margin-top: 8px;
  min-height: 26px;
}

.control-checkbox--primary {
  /* stylelint-disable-next-line no-descending-specificity */
}
.control-checkbox--primary .control-indicator {
  border-color: #034881;
}
.control-checkbox--primary .control-indicator:after {
  border-color: white;
}
.control-checkbox--primary input:checked ~ .control-indicator {
  background-color: #034881;
}
.control-checkbox--primary:hover input:not([disabled]) ~ .control-indicator {
  background: rgb(36.0136363636, 110.7487012987, 172.4863636364);
}

.control-checkbox--secondary {
  /* stylelint-disable-next-line no-descending-specificity */
}
.control-checkbox--secondary .control-indicator {
  border-color: #B5E4FF;
}
.control-checkbox--secondary .control-indicator:after {
  border-color: #313131;
}
.control-checkbox--secondary input:checked ~ .control-indicator {
  background-color: #B5E4FF;
}
.control-checkbox--secondary:hover input:not([disabled]) ~ .control-indicator {
  background: hsl(201.8918918919, 70%, 100.4901960784%);
}

.control-checkbox--accent {
  /* stylelint-disable-next-line no-descending-specificity */
}
.control-checkbox--accent .control-indicator {
  border-color: #30A4DD;
}
.control-checkbox--accent .control-indicator:after {
  border-color: white;
}
.control-checkbox--accent input:checked ~ .control-indicator {
  background-color: #30A4DD;
}
.control-checkbox--accent:hover input:not([disabled]) ~ .control-indicator {
  background: rgb(138.3824688797, 184.4707187058, 207.1175311203);
}

.control-checkbox--success {
  /* stylelint-disable-next-line no-descending-specificity */
}
.control-checkbox--success .control-indicator {
  border-color: #77ea8e;
}
.control-checkbox--success .control-indicator:after {
  border-color: white;
}
.control-checkbox--success input:checked ~ .control-indicator {
  background-color: #77ea8e;
}
.control-checkbox--success:hover input:not([disabled]) ~ .control-indicator {
  background: rgb(197.3425159236, 232.1574840764, 204.3055095541);
}

.control-checkbox--info {
  /* stylelint-disable-next-line no-descending-specificity */
}
.control-checkbox--info .control-indicator {
  border-color: #869AFB;
}
.control-checkbox--info .control-indicator:after {
  border-color: white;
}
.control-checkbox--info input:checked ~ .control-indicator {
  background-color: #869AFB;
}
.control-checkbox--info:hover input:not([disabled]) ~ .control-indicator {
  background: rgb(215.327, 220.5998205128, 246.173);
}

.control-checkbox--warning {
  /* stylelint-disable-next-line no-descending-specificity */
}
.control-checkbox--warning .control-indicator {
  border-color: #f4da7e;
}
.control-checkbox--warning .control-indicator:after {
  border-color: #313131;
}
.control-checkbox--warning input:checked ~ .control-indicator {
  background-color: #f4da7e;
}
.control-checkbox--warning:hover input:not([disabled]) ~ .control-indicator {
  background: rgb(240.4857142857, 232.89031477, 206.0142857143);
}

.control-checkbox--danger {
  /* stylelint-disable-next-line no-descending-specificity */
}
.control-checkbox--danger .control-indicator {
  border-color: #FB8686;
}
.control-checkbox--danger .control-indicator:after {
  border-color: white;
}
.control-checkbox--danger input:checked ~ .control-indicator {
  background-color: #FB8686;
}
.control-checkbox--danger:hover input:not([disabled]) ~ .control-indicator {
  background: rgb(246.173, 215.327, 215.327);
}

.control-checkbox--light {
  /* stylelint-disable-next-line no-descending-specificity */
}
.control-checkbox--light .control-indicator {
  border-color: #E9EDF3;
}
.control-checkbox--light .control-indicator:after {
  border-color: #313131;
}
.control-checkbox--light input:checked ~ .control-indicator {
  background-color: #E9EDF3;
}
.control-checkbox--light:hover input:not([disabled]) ~ .control-indicator {
  background: hsl(0, 0%, 108.3333333333%);
}

.control-checkbox--dark {
  /* stylelint-disable-next-line no-descending-specificity */
}
.control-checkbox--dark .control-indicator {
  border-color: #313131;
}
.control-checkbox--dark .control-indicator:after {
  border-color: white;
}
.control-checkbox--dark input:checked ~ .control-indicator {
  background-color: #313131;
}
.control-checkbox--dark:hover input:not([disabled]) ~ .control-indicator {
  background: rgb(87.25, 87.25, 87.25);
}

.control-checkbox--disabled {
  /* stylelint-disable-next-line no-descending-specificity */
}
.control-checkbox--disabled .control-indicator {
  border-color: #D9D9D9;
}
.control-checkbox--disabled .control-indicator:after {
  border-color: #313131;
}
.control-checkbox--disabled input:checked ~ .control-indicator {
  background-color: #D9D9D9;
}
.control-checkbox--disabled:hover input:not([disabled]) ~ .control-indicator {
  background: hsl(0, 0%, 100.0980392157%);
}

/* stylelint-disable no-descending-specificity */
/**  Buttons
 *
 * HTML example:

  <label class="control control-toggle label-text">Toggle Text
    <input type="checkbox" checked="checked"/>
    <div class="control-indicator"></div>
  </label>

 *
 * To update the colors of the inputs, the variables should changed on colors.scss
 *
 */
.control-toggle {
  font-family: "Urbanist", sans-serif;
  font-weight: 600;
  padding-left: 54px;
}
@media (min-width: 0) {
  .control-toggle {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .control-toggle {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .control-toggle {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.control-toggle .control-indicator {
  background: none;
  border-radius: 12px;
  border-color: #30A4DD;
  box-sizing: border-box;
  height: 24px;
  width: 44px;
  padding: 2px;
  top: 1px;
  transition: all 0.2s ease-in-out;
}
.control-toggle .control-indicator:after {
  background: #30A4DD;
  border-radius: 50%;
  box-sizing: border-box;
  height: 16px;
  left: 3px;
  top: 3px;
  width: 16px;
  transition: all 0.2s ease-in-out;
}
.control-toggle input ~ .control-indicator:after {
  display: block;
}
.control-toggle input:checked ~ .control-indicator {
  background: #30A4DD;
}
.control-toggle input:checked ~ .control-indicator:after {
  background: white;
  left: calc(100% - 20px);
}
.control-toggle input:disabled ~ .control-indicator:after {
  background: #636363;
}

.control-toggle:hover input:not([disabled]) ~ .control-indicator,
.control-toggle:hover input:checked ~ .control-indicator:after {
  background: rgb(41.655186722, 131.9673062624, 176.344813278);
}

.control-toggle:hover input ~ .control-indicator,
.control-toggle:hover input:checked ~ .control-indicator,
.control-toggle:hover input ~ .control-indicator:after {
  background: #30A4DD;
}

.control-toggle--primary .control-indicator {
  border: 1px solid #034881;
}
.control-toggle--primary .control-indicator:after {
  background: #034881;
}
.control-toggle--primary input:checked ~ .control-indicator {
  background: #034881;
}
.control-toggle--primary input:checked ~ .control-indicator:after {
  background: white;
}
.control-toggle--primary:hover input:not([disabled]) ~ .control-indicator, .control-toggle--primary:hover input:checked ~ .control-indicator:after {
  background: rgb(17.0181818182, 126.5220779221, 216.9818181818);
}
.control-toggle--primary:hover input ~ .control-indicator, .control-toggle--primary:hover input:checked ~ .control-indicator, .control-toggle--primary:hover input ~ .control-indicator:after {
  background: #034881;
}

.control-toggle--secondary .control-indicator {
  border: 1px solid #B5E4FF;
}
.control-toggle--secondary .control-indicator:after {
  background: #B5E4FF;
}
.control-toggle--secondary input:checked ~ .control-indicator {
  background: #B5E4FF;
}
.control-toggle--secondary input:checked ~ .control-indicator:after {
  background: #313131;
}
.control-toggle--secondary:hover input:not([disabled]) ~ .control-indicator, .control-toggle--secondary:hover input:checked ~ .control-indicator:after {
  background: hsl(201.8918918919, 90%, 105.4901960784%);
}
.control-toggle--secondary:hover input ~ .control-indicator, .control-toggle--secondary:hover input:checked ~ .control-indicator, .control-toggle--secondary:hover input ~ .control-indicator:after {
  background: #B5E4FF;
}

.control-toggle--accent .control-indicator {
  border: 1px solid #30A4DD;
}
.control-toggle--accent .control-indicator:after {
  background: #30A4DD;
}
.control-toggle--accent input:checked ~ .control-indicator {
  background: #30A4DD;
}
.control-toggle--accent input:checked ~ .control-indicator:after {
  background: white;
}
.control-toggle--accent:hover input:not([disabled]) ~ .control-indicator, .control-toggle--accent:hover input:checked ~ .control-indicator:after {
  background: rgb(142.5599585062, 200.1442916077, 228.4400414938);
}
.control-toggle--accent:hover input ~ .control-indicator, .control-toggle--accent:hover input:checked ~ .control-indicator, .control-toggle--accent:hover input ~ .control-indicator:after {
  background: #30A4DD;
}

.control-toggle--success .control-indicator {
  border: 1px solid #77ea8e;
}
.control-toggle--success .control-indicator:after {
  background: #77ea8e;
}
.control-toggle--success input:checked ~ .control-indicator {
  background: #77ea8e;
}
.control-toggle--success input:checked ~ .control-indicator:after {
  background: white;
}
.control-toggle--success:hover input:not([disabled]) ~ .control-indicator, .control-toggle--success:hover input:checked ~ .control-indicator:after {
  background: rgb(210.1066878981, 244.8933121019, 217.0640127389);
}
.control-toggle--success:hover input ~ .control-indicator, .control-toggle--success:hover input:checked ~ .control-indicator, .control-toggle--success:hover input ~ .control-indicator:after {
  background: #77ea8e;
}

.control-toggle--info .control-indicator {
  border: 1px solid #869AFB;
}
.control-toggle--info .control-indicator:after {
  background: #869AFB;
}
.control-toggle--info input:checked ~ .control-indicator {
  background: #869AFB;
}
.control-toggle--info input:checked ~ .control-indicator:after {
  background: white;
}
.control-toggle--info:hover input:not([disabled]) ~ .control-indicator, .control-toggle--info:hover input:checked ~ .control-indicator:after {
  background: rgb(233.886, 237.1728376068, 253.114);
}
.control-toggle--info:hover input ~ .control-indicator, .control-toggle--info:hover input:checked ~ .control-indicator, .control-toggle--info:hover input ~ .control-indicator:after {
  background: #869AFB;
}

.control-toggle--warning .control-indicator {
  border: 1px solid #f4da7e;
}
.control-toggle--warning .control-indicator:after {
  background: #f4da7e;
}
.control-toggle--warning input:checked ~ .control-indicator {
  background: #f4da7e;
}
.control-toggle--warning input:checked ~ .control-indicator:after {
  background: #313131;
}
.control-toggle--warning:hover input:not([disabled]) ~ .control-indicator, .control-toggle--warning:hover input:checked ~ .control-indicator:after {
  background: rgb(250.1142857143, 243.8944309927, 221.8857142857);
}
.control-toggle--warning:hover input ~ .control-indicator, .control-toggle--warning:hover input:checked ~ .control-indicator, .control-toggle--warning:hover input ~ .control-indicator:after {
  background: #f4da7e;
}

.control-toggle--danger .control-indicator {
  border: 1px solid #FB8686;
}
.control-toggle--danger .control-indicator:after {
  background: #FB8686;
}
.control-toggle--danger input:checked ~ .control-indicator {
  background: #FB8686;
}
.control-toggle--danger input:checked ~ .control-indicator:after {
  background: white;
}
.control-toggle--danger:hover input:not([disabled]) ~ .control-indicator, .control-toggle--danger:hover input:checked ~ .control-indicator:after {
  background: rgb(253.114, 233.886, 233.886);
}
.control-toggle--danger:hover input ~ .control-indicator, .control-toggle--danger:hover input:checked ~ .control-indicator, .control-toggle--danger:hover input ~ .control-indicator:after {
  background: #FB8686;
}

.control-toggle--light .control-indicator {
  border: 1px solid #E9EDF3;
}
.control-toggle--light .control-indicator:after {
  background: #E9EDF3;
}
.control-toggle--light input:checked ~ .control-indicator {
  background: #E9EDF3;
}
.control-toggle--light input:checked ~ .control-indicator:after {
  background: #313131;
}
.control-toggle--light:hover input:not([disabled]) ~ .control-indicator, .control-toggle--light:hover input:checked ~ .control-indicator:after {
  background: hsl(216, 19.4117647059%, 113.3333333333%);
}
.control-toggle--light:hover input ~ .control-indicator, .control-toggle--light:hover input:checked ~ .control-indicator, .control-toggle--light:hover input ~ .control-indicator:after {
  background: #E9EDF3;
}

.control-toggle--dark .control-indicator {
  border: 1px solid #313131;
}
.control-toggle--dark .control-indicator:after {
  background: #313131;
}
.control-toggle--dark input:checked ~ .control-indicator {
  background: #313131;
}
.control-toggle--dark input:checked ~ .control-indicator:after {
  background: white;
}
.control-toggle--dark:hover input:not([disabled]) ~ .control-indicator, .control-toggle--dark:hover input:checked ~ .control-indicator:after {
  background: #646464;
}
.control-toggle--dark:hover input ~ .control-indicator, .control-toggle--dark:hover input:checked ~ .control-indicator, .control-toggle--dark:hover input ~ .control-indicator:after {
  background: #313131;
}

.control-toggle--disabled .control-indicator {
  border: 1px solid #D9D9D9;
}
.control-toggle--disabled .control-indicator:after {
  background: #D9D9D9;
}
.control-toggle--disabled input:checked ~ .control-indicator {
  background: #D9D9D9;
}
.control-toggle--disabled input:checked ~ .control-indicator:after {
  background: #313131;
}
.control-toggle--disabled:hover input:not([disabled]) ~ .control-indicator, .control-toggle--disabled:hover input:checked ~ .control-indicator:after {
  background: hsl(0, 0%, 105.0980392157%);
}
.control-toggle--disabled:hover input ~ .control-indicator, .control-toggle--disabled:hover input:checked ~ .control-indicator, .control-toggle--disabled:hover input ~ .control-indicator:after {
  background: #D9D9D9;
}

/*!
 * Datetimepicker for Bootstrap 3
 * version : 4.17.47
 * https://github.com/Eonasdan/bootstrap-datetimepicker/
 */
[data-action=togglePicker],
[data-action=incrementHours],
[data-action=decrementHours],
[data-action=incrementMinutes],
[data-action=decrementMinutes] {
  display: inline-block;
  min-width: 100%;
}

[data-action=togglePicker]:hover,
[data-action=incrementHours]:hover,
[data-action=decrementHours]:hover,
[data-action=incrementMinutes]:hover,
[data-action=decrementMinutes]:hover {
  background: #F8F9FA;
  cursor: pointer;
}

@media (min-width: 0) {
  input:not([type=checkbox], [type=radio], [type=submit], [type=color], [type=range], [type=file]) {
    background-color: transparent;
    border: 1px solid #313131;
    border-radius: 10px;
    box-sizing: border-box;
    height: auto;
    margin-top: 10px;
    padding: 0.75em 20px;
    width: 100%;
  }
  input:not([type=checkbox], [type=radio], [type=submit], [type=color], [type=range], [type=file])::placeholder {
    color: #30A4DD;
    opacity: 0.75;
  }
  input:not([type=checkbox], [type=radio], [type=submit], [type=color], [type=range], [type=file]):focus, input:not([type=checkbox], [type=radio], [type=submit], [type=color], [type=range], [type=file]):active {
    border-color: #30A4DD;
    outline: none;
  }
  input:not([type=checkbox], [type=radio], [type=submit], [type=color], [type=range], [type=file]):disabled {
    border-color: #313131;
    pointer-events: none;
  }
  textarea {
    background-color: transparent;
    border: 1px solid #313131;
    border-radius: 10px;
    box-sizing: border-box;
    height: 6em;
    margin-top: 10px;
    padding: 0.75em 20px;
    width: 100%;
    font-family: "Urbanist", sans-serif;
    font-weight: 500;
  }
  textarea::placeholder {
    color: #30A4DD;
    opacity: 0.75;
  }
  textarea:focus, textarea:active {
    border-color: #30A4DD;
    outline: none;
  }
  textarea:disabled {
    border-color: #313131;
    pointer-events: none;
  }
}
@media (min-width: 0) and (min-width: 0) {
  textarea {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 0) and (min-width: 600px) {
  textarea {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 0) and (min-width: 1200px) {
  textarea {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 0) {
  input[type=color] {
    background-color: transparent;
    border: 1px solid #313131;
    border-radius: 10px;
    box-sizing: border-box;
    height: 2.5em;
    margin-top: 10px;
    padding: 0;
    width: 100%;
    appearance: none;
  }
  input[type=color]::placeholder {
    color: #30A4DD;
    opacity: 0.75;
  }
  input[type=color]:focus, input[type=color]:active {
    border-color: #30A4DD;
    outline: none;
  }
  input[type=color]:disabled {
    border-color: #313131;
    pointer-events: none;
  }
  input[type=color]::-webkit-color-swatch-wrapper {
    padding: 0.5em 15px;
  }
  input[type=color]::-webkit-color-swatch {
    border: 0;
  }
}
/**
 * Adapted from: https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/
 *
 * HTML example:
   <div class="box_input_file">
    <input type="file" name="file-2[]" id="file-2" class="inputfile" data-multiple-caption="{count} files selected" multiple />
    <label for="file-2" class="secondary-button large-button">
      <!-- <i class="fa fa-upload"></i> -->
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg>
      <span>Choose a file&hellip;</span>
     </label>
  </div>
 *
 *
 */
.inputfile {
  display: none;
}
.inputfile + label {
  display: block;
}
.inputfile + label i {
  padding-right: 10px;
}
.inputfile.has-focus + label {
  outline: none;
}

/** Input Range
 * Adapted from: http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html
 */
@media (min-width: 0) {
  input[type=range] {
    /* removes default webkit styles */
    appearance: none;
    margin-top: 10px;
    /* fix for FF unable to apply focus style bug */
    /* required for proper track sizing in FF */
    width: 100%;
  }
  input[type=range]:focus {
    outline: none;
  }
  input[type=range]:focus::-webkit-slider-runnable-track {
    background: #D9D9D9;
  }
  input[type=range]::-webkit-slider-runnable-track {
    background-color: transparent;
    border: 1px solid #313131;
    border-radius: 10px;
    height: 10px;
  }
  input[type=range]::-webkit-slider-thumb {
    appearance: none;
    background: #30A4DD;
    border: 0;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    margin-top: -7px;
  }
  input[type=range]::-moz-range-track {
    background-color: transparent;
    border: 1px solid #313131;
    border-radius: 10px;
    height: 10px;
  }
  input[type=range]::-moz-range-thumb {
    appearance: none;
    background: #30A4DD;
    border: 0;
    border-radius: 50%;
    height: 20px;
    width: 20px;
  }
}
/** Select Box
 * Adapted from: https://kyusuf.com/post/completely-css-custom-checkbox-radio-buttons-and-select-boxes
 *
 * HTML example:
 <div class="control-group">
   <div class="select">
     <select class="input-text">
       <option>First select</option>
       <option>Option</option>
       <option>Option</option>
     </select>
     <div class="select__arrow"></div>
   </div>
  </div>
 *
 *
 * To update the colors of the inputs, the variables should be changed on colors.scss
 *
 */
.select {
  display: inline-block;
  position: relative;
  width: 100%;
}
.select select {
  background-color: transparent;
  border: 1px solid #313131;
  border-radius: 10px;
  box-sizing: border-box;
  height: auto;
  margin-top: 10px;
  padding: 0.75em 20px;
  width: 100%;
  appearance: none;
  cursor: pointer;
  outline: 0;
}
.select select::placeholder {
  color: #30A4DD;
  opacity: 0.75;
}
.select select:focus, .select select:active {
  border-color: #30A4DD;
  outline: none;
}
.select select:disabled {
  border-color: #313131;
  pointer-events: none;
}
.select .select__arrow {
  border-color: #30A4DD transparent transparent transparent;
  border-style: solid;
  border-width: 8px 5px 0;
  height: 0;
  pointer-events: none;
  position: absolute;
  right: 20px;
  top: 30px;
  width: 0;
}
.select select::-ms-expand {
  display: none;
}
.select select:hover {
  background: rgb(41.655186722, 131.9673062624, 176.344813278);
}
.select select:disabled {
  color: #636363;
}
.select select:disabled ~ .select__arrow {
  border-top-color: #636363;
}

/**
 * Author : Techhysahil
 * Link : http://techhysahil.com
 * Select2 Override style
 */
/* Assign min-width to container */
.select2-container {
  min-width: 100%;
}

.select2-container--open .select2-dropdown--below,
.select2-container--open .select2-dropdown--above {
  background: transparent;
  border: 1px solid #636363;
  border-radius: 10px;
  border-top: 0;
}

.select2-container--flat .select2-results__option--highlighted[aria-selected] {
  background: #034881 !important;
  color: white;
}
.select2-container--flat .select2-results__option[aria-selected=true] {
  background: rgb(2.0727272727, 49.7454545455, 89.1272727273);
  color: white;
}
.select2-container--flat.select2-container--open .select2-selection__arrow b {
  transform: rotate(180deg);
}
.select2-container--flat span.select2-search input {
  height: 2.25em !important;
  padding: 0.5em 10px;
}
.select2-container--flat .select2-selection--single {
  background-color: transparent;
  border: 1px solid #313131;
  border-radius: 10px;
  box-sizing: border-box;
  height: auto;
  margin-top: 10px;
  padding: 0.75em 20px;
  width: 100%;
}
.select2-container--flat .select2-selection--single::placeholder {
  color: #30A4DD;
  opacity: 0.75;
}
.select2-container--flat .select2-selection--single:focus, .select2-container--flat .select2-selection--single:active {
  border-color: #30A4DD;
  outline: none;
}
.select2-container--flat .select2-selection--single:disabled {
  border-color: #313131;
  pointer-events: none;
}
.select2-container--flat .select2-selection--single .select2-selection__rendered {
  padding: 0;
}
.select2-container--flat .select2-selection--single .select2-selection__placeholder {
  color: #30A4DD;
}
.select2-container--flat .select2-selection--single .select2-selection__arrow {
  position: absolute;
  right: calc(20px + 10px);
  top: 30px;
}
.select2-container--flat .select2-selection--single .select2-selection__arrow b {
  border-color: #30A4DD transparent transparent transparent;
  border-style: solid;
  border-width: 8px 5px 0;
  height: 0;
  position: absolute;
  width: 0;
}
.select2-container--flat .select2-selection--single .select2-selection__clear {
  cursor: pointer;
  float: right;
  margin-right: 20px;
}

.select2-search {
  margin-top: 0;
  /* stylelint-disable-next-line no-descending-specificity */
}
.select2-search input {
  border: 1px solid #636363;
  border-radius: 10px;
  /* stylelint-disable-next-line no-descending-specificity */
}
.select2-search input:active {
  border-color: #30A4DD;
  outline: none;
  outline-width: 0;
}

/**
 * This variables are only assigned to NAVIGATION elements.
 *
 * The accent colors of the project are already assigned to internal variables
 * in the colors stylesheet of the styleguide
 * (e.g.: theme-color("primary"), neutral-color("lightest"),...).
 *
 *
 * The name of this variables should follow this rule:
 * $c_nav-text
 *
 *
 * The variable begins with the initial of the variable type c (color),
 * followed by the element, and the section of the element where will be applied
 * the color.
 *
 * $c_nav
 *
 * In this case this variable represents the background color of the element.
 */
/* FOOTER COLORS */
/* NAV COLORS */
/* PAGINATION COLORS */
/* BREADCRUMB COLORS */
/* SIDENAV COLORS */
/* Footer */
footer {
  background-color: #E9EDF3;
  color: #5D697A;
  padding: 80px 0;
}
footer a {
  color: #5D697A;
}
footer .container-medium, footer .nav-list-container .nav-list, .nav-list-container footer .nav-list, footer .navbar, footer .navbar-content {
  justify-content: space-between;
}
footer .footer-logo div {
  min-height: 62.61px;
  max-width: 200px;
}
footer .footer-links {
  align-content: center;
  gap: 48px;
}

.navbar-container {
  background-color: white;
  width: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.6s ease;
  min-height: 0;
}

.navbar-content {
  padding-top: 40px;
  padding-bottom: 40px;
  display: contents;
}

.navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 48px;
  padding-top: 40px;
  padding-bottom: 40px;
}

.nav-logo {
  display: FLEX;
  order: 1;
}
.nav-logo .nav-logo--logo {
  max-height: 60px;
  height: 100%;
}

.burger-menu {
  cursor: pointer;
  height: 20px;
  overflow: hidden;
  position: relative;
  width: 25px;
  order: 2;
  display: inline-block;
}
.burger-menu span {
  background-color: #30A4DD;
  height: 2px;
  left: 0;
  position: absolute;
  transition: 0.2s all;
  width: 100%;
  top: 9px;
}
.burger-menu span:before {
  background-color: #30A4DD;
  height: 2px;
  left: 0;
  position: absolute;
  transition: 0.2s all;
  width: 100%;
  content: "";
  top: -9px;
}
.burger-menu span:after {
  background-color: #30A4DD;
  height: 2px;
  left: 0;
  position: absolute;
  transition: 0.2s all;
  width: 100%;
  bottom: -9px;
  content: "";
}
.burger-menu.open span {
  left: -25px;
}
.burger-menu.open span:before {
  left: 100%;
  top: 0;
  transform: rotate(45deg);
}
.burger-menu.open span:after {
  bottom: 0;
  left: 100%;
  transform: rotate(-45deg);
}
.burger-menu:hover span,
.burger-menu:hover span:before,
.burger-menu:hover span:after {
  background-color: rgb(3.9272727273, 94.2545454545, 168.8727272727);
}

.nav-divider {
  order: 2;
  height: 1px;
  background-color: #E9EDF3;
}

.nav-list-container {
  order: 3;
  background-color: white;
  height: 0;
  overflow: auto;
  flex-grow: initial;
  transition: all 0.6s ease;
}
.nav-list-container .nav-list {
  padding-top: 24px;
  padding-bottom: 24px;
  display: flex;
  align-items: start;
  flex-direction: column;
  gap: 24px 48px;
}
.nav-list-container .nav-list li {
  list-style: none;
}
.nav-list-container .nav-list li .nav-link {
  color: #313131;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
}
@media (min-width: 0) {
  .nav-list-container .nav-list li .nav-link {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .nav-list-container .nav-list li .nav-link {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .nav-list-container .nav-list li .nav-link {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.nav-list-container .nav-list li .nav-link:not(.dropdown-button):before,
.nav-list-container .nav-list li .nav-link .nav-link--active:before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-radius: 100%;
  background-color: #30A4DD;
  position: relative;
  left: -8px;
  transition: all 0.2s ease;
}
.nav-list-container .nav-list li .nav-link:hover {
  color: #30A4DD;
}
.nav-list-container .nav-list li:not(.nav-dropdown) .nav-link:not(.dropdown-button):hover,
.nav-list-container .nav-list li .nav-link--active:hover,
.nav-list-container .nav-list li .nav-link--active {
  padding-left: 8px;
}
.nav-list-container .nav-list li:not(.nav-dropdown) .nav-link:not(.dropdown-button):hover:before,
.nav-list-container .nav-list li .nav-link--active:hover:before,
.nav-list-container .nav-list li .nav-link--active:before {
  width: 4px !important;
  height: 4px !important;
}
.nav-list-container .nav-list li .dropdown-content {
  flex-direction: column;
  gap: 16px;
  max-height: 0dvh;
  height: auto !important;
  overflow: hidden;
  padding: 0;
  transition: all 0.6s ease;
  /* stylelint-disable-next-line no-descending-specificity */
}
.nav-list-container .nav-list li .dropdown-content li {
  padding: 12px 0 0 24px;
}
.nav-list-container .nav-list li .dropdown-button {
  align-items: start;
  display: flex;
  gap: 8px;
}
.nav-list-container .nav-list li .dropdown-button i {
  transform: rotate(90deg);
  transition: all 0.2s ease-in-out;
}
.nav-list-container .nav-list li .dropdown-button i:before {
  font-weight: 900;
}
@media (min-width: 0) {
  .nav-list-container .nav-list li .dropdown-button i:before {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .nav-list-container .nav-list li .dropdown-button i:before {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .nav-list-container .nav-list li .dropdown-button i:before {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
.nav-list-container .nav-list li .dropdown-button.active-dropdown i {
  transform: rotate(270deg);
  transition: all 0.2s ease-in-out;
}
.nav-list-container .nav-list li .dropdown-content-active {
  height: auto !important;
  max-height: 100dvh !important;
}

.nav--open.navbar-container {
  min-height: 100dvh;
}
.nav--open.navbar-container .nav-list-container {
  flex-grow: 1;
}

@media (min-width: 900px) {
  .navbar-container {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .navbar-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .burger-menu {
    display: none !important;
  }
  .navbar,
  .nav-list-container {
    order: 1;
    width: auto;
    flex: 0 0 auto; /* width based on content */
    margin: 0;
    padding: 0;
    height: auto;
    display: flex;
    overflow: visible;
  }
  .nav-divider {
    flex: 1 1 100%; /* width based on content */
  }
  .nav-list-container {
    height: auto;
    display: flex;
    height: auto !important;
    overflow: visible !important;
    flex-grow: 0 !important;
    display: flex !important;
  }
  .nav-list-container .nav-list {
    align-items: center;
    flex-direction: row;
    padding: 0;
  }
  .nav-list-container .nav-list > li {
    position: relative;
    padding: 0;
  }
  .nav-list-container .nav-list > li:not(.nav-dropdown) > .nav-link:not(.dropdown-button):before, .nav-list-container .nav-list > li:not(.nav-dropdown) > .nav-link--active:before {
    position: absolute;
    left: calc(50% - 2px);
    top: 100%;
  }
  .nav-list-container .nav-list > li:not(.nav-dropdown) > .nav-link:not(.dropdown-button):hover, .nav-list-container .nav-list > li:not(.nav-dropdown) > .nav-link--active:hover,
  .nav-list-container .nav-list > li .nav-link--active {
    padding-left: 0;
  }
  .nav-list-container .dropdown-content {
    background-color: white;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    gap: 0;
    height: 0;
    min-width: 220px;
    border-radius: 0 20px 0 20px;
    top: calc(100% + 8px);
    position: absolute;
    z-index: 1;
  }
  .nav-list-container .dropdown-content .nav-link:hover {
    padding-left: 0;
  }
  .nav-list-container .dropdown-content .nav-link:before {
    display: none;
  }
  .nav-list-container .dropdown-content li:first-child {
    padding: 16px 16px 12px !important;
  }
  .nav-list-container .dropdown-content li {
    padding: 0 16px 12px !important;
  }
  .nav-list-container .dropdown-content li:last-child {
    padding: 0 16px 16px !important;
  }
  .nav--open.navbar-container {
    min-height: auto;
  }
  .nav--open.navbar-container .nav-list-container {
    flex-grow: 0;
  }
}
.pagination {
  text-align: center;
}
.pagination .pagination__list {
  display: inline-block;
}
.pagination .pagination__list a {
  border-radius: 1px;
  color: #313131;
  float: left;
  margin: 0 4px;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color 0.3s;
}
.pagination .pagination__list a.active-page {
  background-color: #034881;
  color: white;
}
.pagination .pagination__list a:hover:not(.active-page) {
  background-color: #636363;
}

.breadcrumb {
  list-style: none;
  padding: 0;
}
.breadcrumb li {
  display: inline;
  /* stylelint-disable-next-line no-descending-specificity */
}
.breadcrumb li a:hover {
  color: rgb(2.0727272727, 49.7454545455, 89.1272727273);
}
.breadcrumb li + li:before {
  color: #313131;
  content: ">";
  padding: 8px;
}

/* Side Navigation */
.menu-sidenav {
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: 2;
}
.menu-sidenav .burger-box {
  background-color: white;
  cursor: pointer;
  display: inline-block;
  left: 0;
  padding: 20px 20px 18px;
  position: absolute;
  transition: 0.6s all;
}
.menu-sidenav .burger-box .burger-sidenav {
  cursor: pointer;
  height: 20px;
  overflow: hidden;
  position: relative;
  width: 25px;
  display: inline-block;
}
.menu-sidenav .burger-box .burger-sidenav span {
  background-color: #30A4DD;
  height: 1px;
  left: 0;
  position: absolute;
  transition: 0.2s all;
  width: 100%;
  top: 9.5px;
}
.menu-sidenav .burger-box .burger-sidenav span:before {
  background-color: #30A4DD;
  height: 1px;
  left: 0;
  position: absolute;
  transition: 0.2s all;
  width: 100%;
  content: "";
  top: -9.5px;
}
.menu-sidenav .burger-box .burger-sidenav span:after {
  background-color: #30A4DD;
  height: 1px;
  left: 0;
  position: absolute;
  transition: 0.2s all;
  width: 100%;
  bottom: -9.5px;
  content: "";
}
.menu-sidenav .burger-box .burger-sidenav.open span {
  left: -25px;
}
.menu-sidenav .burger-box .burger-sidenav.open span:before {
  left: 100%;
  top: 0;
  transform: rotate(45deg);
}
.menu-sidenav .burger-box .burger-sidenav.open span:after {
  bottom: 0;
  left: 100%;
  transform: rotate(-45deg);
}
.menu-sidenav .burger-box .burger-sidenav:hover span,
.menu-sidenav .burger-box .burger-sidenav:hover span:before,
.menu-sidenav .burger-box .burger-sidenav:hover span:after {
  background-color: rgb(3.9272727273, 94.2545454545, 168.8727272727);
}
.menu-sidenav .logo {
  margin-top: 20px;
  vertical-align: top;
  width: 40px;
}
.menu-sidenav .sidenav {
  background-color: rgb(2.0727272727, 49.7454545455, 89.1272727273);
  height: 100%;
  left: 0;
  overflow-x: hidden;
  padding-top: 30px;
  position: fixed;
  top: 0;
  transition: 0.6s all;
  width: 0;
  z-index: 1;
}
.menu-sidenav .sidenav .nav-list {
  padding: 0 50px;
}
.menu-sidenav .sidenav .nav-list li {
  list-style: none;
}
.menu-sidenav .sidenav .nav-list a {
  border-bottom: 1px solid transparent;
  color: #313131;
  display: block;
  margin: 10px 0;
  padding: 10px 0;
  text-align: left;
  transition: 0.2s all;
}
.menu-sidenav .sidenav .nav-list a:hover {
  border-bottom: 1px solid #E9EDF3;
}

.bottom-navigation-container {
  align-items: baseline;
  bottom: 0;
  box-sizing: border-box;
  display: grid;
  gap: 16px;
  grid-template: "left right" "menu menu"/auto auto;
  left: 0;
  margin-top: 48px;
  padding: 0;
  position: sticky;
  width: 100dvw;
  z-index: 1000;
}

.overlap-page-buttons {
  align-items: baseline;
  display: flex;
  flex-flow: row wrap;
  gap: 8px;
}
.overlap-page-buttons.left-buttons {
  grid-area: left;
  margin-left: 24px;
}
.overlap-page-buttons.right-buttons {
  flex-direction: row-reverse;
  grid-area: right;
  margin-right: 24px;
}
.overlap-page-buttons span {
  margin-top: 0.1em;
  vertical-align: 0.1em;
}

.bottom-nav {
  cursor: auto;
  max-width: 100dvw;
  transform: none;
  grid-area: menu;
}

.bottom-nav__closed {
  display: none;
}

.bottom-nav[data-bottom-nav-status=open]:hover .bottom-nav__open:hover:before {
  background-color: white;
}

.bottom-nav__open .bottom-nav__items {
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: space-between;
  list-style: none;
  padding: 6px;
}

.bottom-nav__item {
  min-width: 0;
  max-width: 100%;
  padding: 6px 18px;
}

.bottom-nav__link {
  align-items: center;
  backdrop-filter: none;
  background-color: transparent;
  border: none;
  color: #313131;
  display: flex;
  flex-direction: column;
  line-height: normal;
  padding: 0;
}
.bottom-nav__link:hover {
  background-color: white;
}

.bottom-nav__item--active .bottom-nav__link {
  color: #B5E4FF;
  pointer-events: none;
}

.bottom-nav:not(.bottom-nav--desktop) .bottom-nav__items {
  background-color: white;
  border-radius: 24px 24px 0 0;
  border-top: 1px solid #B5E4FF;
  box-shadow: 0 0 9px 3px #636363;
  box-sizing: border-box;
}
.bottom-nav:not(.bottom-nav--desktop) .bottom-nav__items .bottom-nav__item {
  padding: 6px;
}
.bottom-nav:not(.bottom-nav--desktop) .bottom-nav__items .bottom-nav__link {
  border-radius: 0;
}

/* Desktop version */
.bottom-nav.bottom-nav--desktop {
  cursor: pointer;
  min-width: 0;
  max-width: 100% !important;
  position: relative;
}

.bottom-nav--desktop .bottom-nav__closed {
  align-items: center;
  border-radius: 32px;
  display: flex;
  justify-content: center;
  opacity: 1;
  overflow: hidden;
  pointer-events: none;
  transition: all 0.3s ease-in-out;
}

.bottom-nav--desktop .bottom-nav__active-page {
  align-items: center;
  backdrop-filter: none;
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: #313131;
  display: flex;
  flex-direction: row;
  gap: 8px;
  line-height: normal;
  margin: 0 24px;
  text-align: left;
  padding: 14px 0;
}
.bottom-nav--desktop .bottom-nav__active-page i {
  margin-bottom: -0.2em;
}
.bottom-nav--desktop .bottom-nav__active-page i:before {
  font-weight: 700;
  font-size: 1.244em;
}

.bottom-nav--desktop .bottom-nav__open {
  height: 0;
  max-height: 80dvh;
  overflow: auto;
  transition: all 0.3s ease-in-out;
}

/* stylelint-disable-next-line no-descending-specificity */
.bottom-nav--desktop .bottom-nav__open:before {
  border: 1px solid #B5E4FF;
  border-radius: 24px;
  box-sizing: border-box;
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.bottom-nav--desktop .bottom-nav__open .bottom-nav__items {
  flex-direction: column;
  opacity: 0;
  padding: 9px 6px 8px;
  transform: translate(0%, 100%);
  transition: all 0.3s ease-in-out;
}

/* stylelint-disable-next-line no-descending-specificity */
.bottom-nav--desktop .bottom-nav__link {
  border-radius: 0;
  flex-direction: row;
  gap: 8px;
  text-align: left;
}

@media (min-width: 600px) {
  .bottom-navigation-container {
    padding-bottom: 24px;
    grid-template: "left menu right"/1fr auto 1fr;
  }
  .overlap-page-buttons {
    flex-wrap: nowrap;
  }
}
/* Page */
* {
  margin: 0;
}

html,
body {
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  background-color: white;
}

body {
  display: flex;
  flex-direction: column;
}

.logo--lightest {
  width: 100%;
  height: 100%;
  min-height: 62.61px;
  max-width: 200px;
  aspect-ratio: 178/75;
  /* the color you want your logo to appear */
  background-color: white;
  /* apply the logo image as a mask */
  -webkit-mask: url("/assets/logo_white-fb8ec475.svg") no-repeat center/contain;
  mask: url("/assets/logo_white-fb8ec475.svg") no-repeat center/contain;
  display: inline-block;
}

.page-wrap {
  padding: 112px 0;
}

.logo--000 {
  width: 100%;
  height: 100%;
  min-height: 62.61px;
  max-width: 200px;
  aspect-ratio: 178/75;
  /* the color you want your logo to appear */
  background-color: white;
  /* apply the logo image as a mask */
  -webkit-mask: url("/assets/logo_white-fb8ec475.svg") no-repeat center/contain;
  mask: url("/assets/logo_white-fb8ec475.svg") no-repeat center/contain;
  display: inline-block;
}

.page-wrap {
  padding: 112px 0;
}

.logo--100 {
  width: 100%;
  height: 100%;
  min-height: 62.61px;
  max-width: 200px;
  aspect-ratio: 178/75;
  /* the color you want your logo to appear */
  background-color: #E9EDF3;
  /* apply the logo image as a mask */
  -webkit-mask: url("/assets/logo_white-fb8ec475.svg") no-repeat center/contain;
  mask: url("/assets/logo_white-fb8ec475.svg") no-repeat center/contain;
  display: inline-block;
}

.page-wrap {
  padding: 112px 0;
}

.logo--200 {
  width: 100%;
  height: 100%;
  min-height: 62.61px;
  max-width: 200px;
  aspect-ratio: 178/75;
  /* the color you want your logo to appear */
  background-color: #D9D9D9;
  /* apply the logo image as a mask */
  -webkit-mask: url("/assets/logo_white-fb8ec475.svg") no-repeat center/contain;
  mask: url("/assets/logo_white-fb8ec475.svg") no-repeat center/contain;
  display: inline-block;
}

.page-wrap {
  padding: 112px 0;
}

.logo--300 {
  width: 100%;
  height: 100%;
  min-height: 62.61px;
  max-width: 200px;
  aspect-ratio: 178/75;
  /* the color you want your logo to appear */
  background-color: #5D697A;
  /* apply the logo image as a mask */
  -webkit-mask: url("/assets/logo_white-fb8ec475.svg") no-repeat center/contain;
  mask: url("/assets/logo_white-fb8ec475.svg") no-repeat center/contain;
  display: inline-block;
}

.page-wrap {
  padding: 112px 0;
}

.logo--400 {
  width: 100%;
  height: 100%;
  min-height: 62.61px;
  max-width: 200px;
  aspect-ratio: 178/75;
  /* the color you want your logo to appear */
  background-color: #636363;
  /* apply the logo image as a mask */
  -webkit-mask: url("/assets/logo_white-fb8ec475.svg") no-repeat center/contain;
  mask: url("/assets/logo_white-fb8ec475.svg") no-repeat center/contain;
  display: inline-block;
}

.page-wrap {
  padding: 112px 0;
}

.logo--500 {
  width: 100%;
  height: 100%;
  min-height: 62.61px;
  max-width: 200px;
  aspect-ratio: 178/75;
  /* the color you want your logo to appear */
  background-color: #313131;
  /* apply the logo image as a mask */
  -webkit-mask: url("/assets/logo_white-fb8ec475.svg") no-repeat center/contain;
  mask: url("/assets/logo_white-fb8ec475.svg") no-repeat center/contain;
  display: inline-block;
}

.page-wrap {
  padding: 112px 0;
}

.logo--darkest {
  width: 100%;
  height: 100%;
  min-height: 62.61px;
  max-width: 200px;
  aspect-ratio: 178/75;
  /* the color you want your logo to appear */
  background-color: #313131;
  /* apply the logo image as a mask */
  -webkit-mask: url("/assets/logo_white-fb8ec475.svg") no-repeat center/contain;
  mask: url("/assets/logo_white-fb8ec475.svg") no-repeat center/contain;
  display: inline-block;
}

.page-wrap {
  padding: 112px 0;
}

.logo--primary {
  width: 100%;
  height: 100%;
  min-height: 62.61px;
  max-width: 200px;
  aspect-ratio: 178/75;
  /* the color you want your logo to appear */
  background-color: #034881;
  /* apply the logo image as a mask */
  -webkit-mask: url("/assets/logo_white-fb8ec475.svg") no-repeat center/contain;
  mask: url("/assets/logo_white-fb8ec475.svg") no-repeat center/contain;
  display: inline-block;
}

.page-wrap {
  padding: 112px 0;
}

.logo--secondary {
  width: 100%;
  height: 100%;
  min-height: 62.61px;
  max-width: 200px;
  aspect-ratio: 178/75;
  /* the color you want your logo to appear */
  background-color: #B5E4FF;
  /* apply the logo image as a mask */
  -webkit-mask: url("/assets/logo_white-fb8ec475.svg") no-repeat center/contain;
  mask: url("/assets/logo_white-fb8ec475.svg") no-repeat center/contain;
  display: inline-block;
}

.page-wrap {
  padding: 112px 0;
}

.logo--accent {
  width: 100%;
  height: 100%;
  min-height: 62.61px;
  max-width: 200px;
  aspect-ratio: 178/75;
  /* the color you want your logo to appear */
  background-color: #30A4DD;
  /* apply the logo image as a mask */
  -webkit-mask: url("/assets/logo_white-fb8ec475.svg") no-repeat center/contain;
  mask: url("/assets/logo_white-fb8ec475.svg") no-repeat center/contain;
  display: inline-block;
}

.page-wrap {
  padding: 112px 0;
}

.logo--success {
  width: 100%;
  height: 100%;
  min-height: 62.61px;
  max-width: 200px;
  aspect-ratio: 178/75;
  /* the color you want your logo to appear */
  background-color: #77ea8e;
  /* apply the logo image as a mask */
  -webkit-mask: url("/assets/logo_white-fb8ec475.svg") no-repeat center/contain;
  mask: url("/assets/logo_white-fb8ec475.svg") no-repeat center/contain;
  display: inline-block;
}

.page-wrap {
  padding: 112px 0;
}

.logo--info {
  width: 100%;
  height: 100%;
  min-height: 62.61px;
  max-width: 200px;
  aspect-ratio: 178/75;
  /* the color you want your logo to appear */
  background-color: #869AFB;
  /* apply the logo image as a mask */
  -webkit-mask: url("/assets/logo_white-fb8ec475.svg") no-repeat center/contain;
  mask: url("/assets/logo_white-fb8ec475.svg") no-repeat center/contain;
  display: inline-block;
}

.page-wrap {
  padding: 112px 0;
}

.logo--warning {
  width: 100%;
  height: 100%;
  min-height: 62.61px;
  max-width: 200px;
  aspect-ratio: 178/75;
  /* the color you want your logo to appear */
  background-color: #f4da7e;
  /* apply the logo image as a mask */
  -webkit-mask: url("/assets/logo_white-fb8ec475.svg") no-repeat center/contain;
  mask: url("/assets/logo_white-fb8ec475.svg") no-repeat center/contain;
  display: inline-block;
}

.page-wrap {
  padding: 112px 0;
}

.logo--danger {
  width: 100%;
  height: 100%;
  min-height: 62.61px;
  max-width: 200px;
  aspect-ratio: 178/75;
  /* the color you want your logo to appear */
  background-color: #FB8686;
  /* apply the logo image as a mask */
  -webkit-mask: url("/assets/logo_white-fb8ec475.svg") no-repeat center/contain;
  mask: url("/assets/logo_white-fb8ec475.svg") no-repeat center/contain;
  display: inline-block;
}

.page-wrap {
  padding: 112px 0;
}

.logo--light {
  width: 100%;
  height: 100%;
  min-height: 62.61px;
  max-width: 200px;
  aspect-ratio: 178/75;
  /* the color you want your logo to appear */
  background-color: #E9EDF3;
  /* apply the logo image as a mask */
  -webkit-mask: url("/assets/logo_white-fb8ec475.svg") no-repeat center/contain;
  mask: url("/assets/logo_white-fb8ec475.svg") no-repeat center/contain;
  display: inline-block;
}

.page-wrap {
  padding: 112px 0;
}

.logo--dark {
  width: 100%;
  height: 100%;
  min-height: 62.61px;
  max-width: 200px;
  aspect-ratio: 178/75;
  /* the color you want your logo to appear */
  background-color: #313131;
  /* apply the logo image as a mask */
  -webkit-mask: url("/assets/logo_white-fb8ec475.svg") no-repeat center/contain;
  mask: url("/assets/logo_white-fb8ec475.svg") no-repeat center/contain;
  display: inline-block;
}

.page-wrap {
  padding: 112px 0;
}

.logo--disabled {
  width: 100%;
  height: 100%;
  min-height: 62.61px;
  max-width: 200px;
  aspect-ratio: 178/75;
  /* the color you want your logo to appear */
  background-color: #D9D9D9;
  /* apply the logo image as a mask */
  -webkit-mask: url("/assets/logo_white-fb8ec475.svg") no-repeat center/contain;
  mask: url("/assets/logo_white-fb8ec475.svg") no-repeat center/contain;
  display: inline-block;
}

.page-wrap {
  padding: 112px 0;
}

p .swallow-divider {
  height: 20.2px;
  max-width: 100%;
}

h6 .swallow-divider, .menu-sidenav .sidenav .nav-list a .swallow-divider {
  height: 20.2px;
  max-width: 100%;
}

h5 .swallow-divider {
  height: 24.04px;
  max-width: 100%;
}

h4 .swallow-divider {
  height: 28.648px;
  max-width: 100%;
}

h3 .swallow-divider {
  height: 34.1776px;
  max-width: 100%;
}

h2 .swallow-divider {
  height: 40.81312px;
  max-width: 100%;
}

h1 .swallow-divider {
  height: 40.81312px;
  max-width: 100%;
}

.mirrored {
  transform: scaleX(-1);
}

.page-wrap {
  padding: 112px 0;
}

.arrow--right,
.arrow--left {
  border-radius: 40px;
  width: 28px;
  height: 26px;
  display: inline-flex;
  place-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}
.arrow--right:before,
.arrow--left:before {
  content: "";
  position: absolute;
  width: calc(100% - 16px);
  height: 2px;
  background-color: white;
  transition: all 0.3s ease-in-out;
}
.arrow--right:after,
.arrow--left:after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 8px;
  height: 8px;
  border-top: solid 2px white;
  border-right: solid 2px white;
  transform: rotate(45deg);
  right: 9px;
  border-top-right-radius: 1px;
  transition: all 0.3s ease-in-out;
}

.arrow--left:after {
  left: 9px;
  right: auto;
  transform: rotate(-135deg);
}

a:hover .arrow--right:before,
a:hover .arrow--left:before,
.arrow--right:hover:before,
.arrow--left:hover:before {
  background-color: #30A4DD;
}
a:hover .arrow--right:after,
a:hover .arrow--left:after,
.arrow--right:hover:after,
.arrow--left:hover:after {
  border-color: #30A4DD;
}

.big-arrow--right,
.big-arrow--left {
  border-radius: 40px;
  width: 56px;
  height: 26px;
  display: inline-flex;
  place-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}
.big-arrow--right:before,
.big-arrow--left:before {
  content: "";
  position: absolute;
  width: calc(100% - 16px);
  height: 2px;
  background-color: white;
  transition: all 0.3s ease-in-out;
}
.big-arrow--right:after,
.big-arrow--left:after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 8px;
  height: 8px;
  border-top: solid 2px white;
  border-right: solid 2px white;
  transform: rotate(45deg);
  right: 9px;
  border-top-right-radius: 1px;
  transition: all 0.3s ease-in-out;
}

.big-arrow--left:after {
  left: 9px;
  right: auto;
  transform: rotate(-135deg);
}

a:hover .big-arrow--right:before,
a:hover .big-arrow--left:before,
.big-arrow--right:hover:before,
.big-arrow--left:hover:before {
  background-color: #30A4DD;
}
a:hover .big-arrow--right:after,
a:hover .big-arrow--left:after,
.big-arrow--right:hover:after,
.big-arrow--left:hover:after {
  border-color: #30A4DD;
}

.arrow--primary:before {
  background-color: #034881;
}
.arrow--primary:after {
  border-color: #034881;
}

.arrow--secondary:before {
  background-color: #B5E4FF;
}
.arrow--secondary:after {
  border-color: #B5E4FF;
}

.arrow--accent:before {
  background-color: #30A4DD;
}
.arrow--accent:after {
  border-color: #30A4DD;
}
.arrow--accent:hover:before {
  background-color: rgb(113.7074688797, 192.8858921162, 231.7925311203);
}
.arrow--accent:hover:after {
  border-color: rgb(113.7074688797, 192.8858921162, 231.7925311203);
}

.arrow--success:before {
  background-color: #77ea8e;
}
.arrow--success:after {
  border-color: #77ea8e;
}

.arrow--info:before {
  background-color: #869AFB;
}
.arrow--info:after {
  border-color: #869AFB;
}

.arrow--warning:before {
  background-color: #f4da7e;
}
.arrow--warning:after {
  border-color: #f4da7e;
}

.arrow--danger:before {
  background-color: #FB8686;
}
.arrow--danger:after {
  border-color: #FB8686;
}

.arrow--light:before {
  background-color: #E9EDF3;
}
.arrow--light:after {
  border-color: #E9EDF3;
}

.arrow--dark:before {
  background-color: #313131;
}
.arrow--dark:after {
  border-color: #313131;
}

.arrow--disabled:before {
  background-color: #D9D9D9;
}
.arrow--disabled:after {
  border-color: #D9D9D9;
}

.swallow-divider {
  height: 50px;
}

.intro-section-image {
  width: 100%;
  border-radius: 40px 0 40px 40px;
}

.about-section {
  margin: 40px 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.about-box {
  background-color: #B5E4FF;
  color: #034881;
  border-radius: 0 40px 40px 40px;
  padding: 24px;
}

.research-section-info {
  order: 1;
}

.research-section-image {
  width: 100%;
  border-radius: 0 40px 40px 40px;
  order: 2;
}

.contact-form {
  background-color: #E9EDF3;
  padding: 24px;
  border-radius: 24px 0 24px 0;
}

@media (min-width: 900px) {
  .research-section-info {
    order: 2;
  }
  .research-section-image {
    order: 1;
  }
}
.about-image {
  width: 100%;
}

.about-image-1 {
  border-radius: 40px 0 40px 0;
}

.about-image-2 {
  border-radius: 0 40px 40px 40px;
}

.about-image-3 {
  border-radius: 40px 40px 0 40px;
}

.house-image {
  width: 100%;
}

@media (min-width: 600px) {
  .house-image {
    width: 50%;
  }
}
.team-member-image {
  width: 100%;
  object-fit: cover;
  max-height: 700px;
  border-radius: 40px 0 40px 40px;
}

.team-member-description p {
  margin-bottom: 16px;
}

.cookies-disclaimer {
  position: fixed;
  bottom: 0;
  background-color: #034881;
  color: white;
  width: 100%;
}

.cookies_disclaimer_text {
  margin-bottom: 16px;
}
@media (min-width: 0) {
  .cookies_disclaimer_text {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 600px) {
  .cookies_disclaimer_text {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}
@media (min-width: 1200px) {
  .cookies_disclaimer_text {
    font-size: 16px;
    letter-spacing: 0.32px;
  }
}

/* ===== modal container fade ===== */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.6);
  /* Animation */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

.modal.show {
  opacity: 1;
  pointer-events: auto;
}

/* ===== modal content slide animation ===== */
.modal-content {
  background: white;
  padding: 40px;
  width: 80%;
  max-height: 80%;
  overflow-y: auto;
  position: relative;
  /* Start slightly down + transparent */
  transform: translateY(20px);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.modal.show .modal-content {
  transform: translateY(0);
  opacity: 1;
}

/* Close button */
.modal-close {
  cursor: pointer;
  position: absolute;
  right: 16px;
  top: 0;
}
@media (min-width: 0) {
  .modal-close {
    font-size: 39.81312px;
    letter-spacing: 0.7962624px;
  }
}
@media (min-width: 600px) {
  .modal-close {
    font-size: 39.81312px;
    letter-spacing: 0.7962624px;
  }
}
@media (min-width: 1200px) {
  .modal-close {
    font-size: 48.828125px;
    letter-spacing: 0.9765625px;
  }
}

/**
 * Shame stylesheet is reserved just for hacky code.
 * The code written to get the release out on time,
 * but the code that makes you ashamed.
 *
 * This is a temporary stylesheet to be clean as soon as possible.
 *
 * Comment every code added here, by answering these questions:
 * 1. What part of the codebase does it relate to?
 * 2. Why was this needed?
 * 3. How does this fix it?
 * 4. How might you fix it properly, given more time?
 *
 */