@layer reset {

/* ---------------------------------------------------------------------------
CSS RESET
Objective: Reduce browser inconsistencies across the entire website
Version: v2023.09.23
Based on https://piccalil.li/blog/a-more-modern-css-reset/
--------------------------------------------------------------------------- */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-block-size: 100vh;
  line-height: 1.6;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-inline-size: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}
}

@layer root {

/* ---------------------------------------------------------------------------
CSS ROOT VARIABLES
Objective: Variables declared here are reusable throughout the entire website
Version: v20260119
Made by i-media
--------------------------------------------------------------------------- */

:root {

/* Grayscale Colors */

--color-black: #000000;
--color-gray-900: rgb(33, 37, 41);
--color-gray-800: rgb(52, 58, 64);
--color-gray-700: rgb(102, 102, 102);
--color-gray-300: rgb(233, 234, 236);
--color-gray-200: rgb(248, 249, 250);
--color-gray-100: rgb(248, 249, 250);
--color-white: #ffffff;

/* Primary Colors */

--color-blue: rgb(15, 73, 154);       /* Base color #0f499a */
--color-blue-900: rgb(23, 45, 84);
--color-blue-800: rgb(0, 52, 89);
--color-blue-700: rgb(11, 60, 128);
--color-blue-400: rgb(0, 102, 204);
--color-blue-300: rgb(0, 166, 252);
--color-blue-200: rgb(204,237,255);
--color-blue-100: rgb(233,239,251);

/* Secondary Colors */

--color-accent: rgb(238, 185, 153);

/* Overlay Colors */

--color-darken: rgba(0, 0, 0, .1);
--color-lighten: rgba(255, 255, 255, .2);

/* Typography  */

--font-primary: 'Roboto Condensed', Helvetica, Arial, sans-serif;
--font-secondary: 'Barlow Condensed', Helvetica, Arial, sans-serif; /* Used for headings and buttons */
--font-signature: "Mr Dafoe", cursive;

/* Font Sizes  */

--font-size-900: 3.125rem;      /* 50px */
--font-size-800: 2.625rem;      /* 42px */
--font-size-700: 2.250rem;      /* 36px */
--font-size-600: 1.875rem;      /* 30px */
--font-size-500: 1.500rem;      /* 24px */
--font-size-400: 1.250rem;      /* 20px */
--font-size-300: 1.125rem;      /* 18px */
--font-size-200: 1.000rem;      /* 16px */
--font-size-100: 0.875rem;      /* 14px */

  @media (width > 1024px) {
    --font-size-900: 4.375rem;  /* 70px */  
    --font-size-800: 3.125rem;  /* 50px */
    --font-size-700: 2.625rem;  /* 42px */
    --font-size-600: 2.250rem;  /* 36px */
    --font-size-500: 1.875rem;  /* 30px */
    --font-size-400: 1.625rem;  /* 26px */
    --font-size-300: 1.250rem;  /* 20px */
  }

/* Border Radius */

--border-radius-500: 5rem;
--border-radius-400: 2rem;
--border-radius-300: 0.75rem;
--border-radius-200: 0.50rem;
--border-radius-100: 0.25rem;

}
}

@layer base {

/* ---------------------------------------------------------------------------
CSS BASE for adbverzekeringen.be
Objective: Basic styling elements throughout the entire website
Version: v20260119 
Made by i-media 
--------------------------------------------------------------------------- */

html {
  font-family: var(--font-primary);
  scroll-behavior: smooth; /* For smooth scrolling */
  }

body {
  font-size: var(--font-size-300);
  font-weight: 300;
  color: var(--color-gray-900);
  background-color: var(--color-white);
  }

.flow > * + * { /* Creates a space above every element, except the first element */ 
  margin-top: 1em;
  }

.button + .hyperlink {
  margin-left: 1em;
  }

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

h1, h2, h3, h4 {
  font-family: var(--font-secondary);
  font-weight: 400;
  }

}

@layer layout {

/* ---------------------------------------------------------------------------
CSS LAYOUT for adbverzekeringen.be
Objective: Reusable, recurring building blocks for the basic layout of the site
Version: v20260119 
Made by i-media 
--------------------------------------------------------------------------- */ 

/* WRAPPERS */

.wrapper {
  max-width: calc(1168px + 4rem);
  margin-inline: auto; /* same as margin: 0 auto; */
  padding-inline: 2rem; /* same as padding: 0 2rem; */
  }

.wrapper--full {
  max-width: 100vw;
  }

.wrapper--wide {
  max-width: calc(1260 + 4rem);
  }

.wrapper--narrow {
  max-width: calc(950px + 4rem);
  }

/* SECTIONS */

.section {
  padding-block: 3rem;      /* this controls the vertical spacing between different sections */

  @media (width > 1024px) {
    padding-block: 4rem;
  }

}

.section--centered {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem;
  background-color: var(--color-gray-100);
  border-radius: var(--border-radius-300);
  text-align: center;
}

/* GRIDS */
  
.grid--hero {
  display: grid;
  background-color: var(--color-blue-800);
  place-items: center;
  text-align: center;
  
  .hero-image {
    place-self: stretch;
    max-height: 425px;
  }
  
  .hero-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  }

.grid--equal {
  display: grid;
  grid-auto-flow: row;
  grid-auto-columns: 1fr;
  gap: 3rem;

  @media (width > 1024px) {
    grid-auto-flow: column;
  }
  }

.grid--sidebar {
  display: grid;
  gap: 2rem;

  @media (width > 1024px) {
    grid-template-columns: minmax(auto, 60vw) 325px;
    gap: 4rem;
  }
  }

.grid--featured {
  display: grid;
  background-color: var(--color-blue-400);
  place-items: center;
  text-align: center;

  @media (width > 1024px) {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
  
  .featured-image {
    place-self: stretch;
  }
  
  .featured-image img,
  .featured-image iframe {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  
  .featured-content {
    color: var(--color-white);
    padding: 4rem 2rem;
    
    @media (width > 1024px) {
    padding: 8rem 4rem;
  } 
  }
  
  .featured-title {
    font-size: var(--font-size-800);
    color: var(--color-white);
    font-weight: 300;
  }
  
  p {
    padding-block: 3rem;
  }
  
  .signature-guy {
    font-family: var(--font-signature);
    font-size: var(--font-size-600);
    color: var(--color-blue-100);
    margin-top: 0;
    padding: 0;
  }
  
  .signature-guy::first-letter {
    font-size: var(--font-size-800);
  }
  
}


/* TYPOGRAPHY */

h1 {
  font-size: var(--font-size-800);
  color: var(--color-blue-700);
  text-align: center;
  }

h2 {
  font-size: var(--font-size-700);
  }

h3 {
  font-size: var(--font-size-600);
  }

h4 {
  font-size: var(--font-size-400);
  color: var(--color-gray-800);
  margin-bottom: -10px;
  }

p {
  font-size: var(--font-size-300);
  }

a { 
  outline: none;
  }

p a,
.hyperlink {
  color: var(--color-black);
  text-decoration: none;
  background-color: var(--color-blue-100);
  border-bottom: 2px solid var(--color-blue);
  padding: 1px;
}

/* LISTS */

ul {
  list-style-type: none;
}

.bulletlist {
  padding-left: 0;
  hyphens: manual;

  li {
    list-style-type: disc;
    margin-left: 1rem;
    padding-left: 1rem;
  }

  li::marker {
    color: var(--color-blue-700);
  }
  
  li a {
    text-decoration: none;
    background-color: var(--color-blue-100);
    border-bottom: 2px solid var(--color-blue);
    padding: 1px;
  }
}

/* IMAGES */

img, svg {
  max-width: 100%;
  height: auto;
}

figcaption {
  font-size: var(--font-size-100);
  color: var(--color-gray-400);
  margin-block: 1rem;
}

hr {
  border: none;
  height: 5px; 
  width: 10%;
  margin-block: 3rem;
  background: var(--color-accent);
}

/* BUTTONS */

.button {
  display: inline-flex;
  padding: 1rem;
  background-color: var(--color-blue-800);
  border-radius: var(--border-radius-200);
  color: var(--color-white);
  transition: all 500ms ease;
  font-family: var(--font-secondary);
  font-size: var(--font-size-300);
  font-weight: 300;
  letter-spacing: .02rem;
  text-decoration: none;
  cursor: pointer;
}

.button:hover,
.button:focus-visible {
  background-color: var(--color-blue);
}

.button:focus {
  outline: 1px dashed var(--color-accent);
  outline-offset: 2px;
}
}

@layer components {

/* ---------------------------------------------------------------------------
CSS COMPONENTS
Objective: Styling of individual, non-recurring components throughout the site
Version: v20260119
Made by i-media
--------------------------------------------------------------------------- */

/* SITE HEADER */

.header {
  background: var(--color-white);
  padding-block: 2rem;
}

.header-inner {
  background: var(--color-white);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem 1rem;

  @media (width > 900px) {
    justify-content: space-between;
  }
}

.client-logo {
  background: var(--color-white);
  width: 220px;
  max-width: 50vw;
  }

.primary-navigation {
  background-color: var(--color-white);

  ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 0;
    margin: 0;
  }

  a {
    font-family: var(--font-secondary);
    font-weight: 300;
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--color-white);
    transition: all 300ms ease-in-out;
  }
  
  a:hover {
    border-bottom: 1px solid var(--color-blue);
  }
}

.button__phone {
  display: inline-flex;
  padding: 1rem 0.85rem;
  margin: 0;
  background-color: var(--color-blue-800);
  border-radius: var(--border-radius-200);
  color: var(--color-white);
  transition: all 500ms ease;
  font-family: var(--font-secondary);
  font-size: var(--font-size-300);
  font-weight: 300;
  letter-spacing: 1px;
  cursor: pointer;
  
  a, a:hover {
    border: none;
  }
}

.button__phone:hover,
.button__phone:focus-visible {
  background-color: var(--color-blue);
}

.button__phone:focus {
  outline: 1px dashed var(--color-accent);
  outline-offset: 2px;
}

.button__phone a::before { /* phone icon */
  font-family: 'FontAwesome';
  content: "\f095";
  color: var(--color-blue-300);
  font-size: var(--font-size-300);
  font-weight: 900;
  display: inline-block;
  margin-right: 10px;
  }

/* PARTNERMAATSCHAPPIJEN */

.partnerlogos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 1rem;
  grid-auto-flow: dense;
  margin: 0;
  padding: 0;
  
  @media (width > 1024px) {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  li {
    display: grid;
    align-items: center;
    justify-content: center;
    padding: 15px;
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--border-radius-200);
    transition: all 300ms ease-in-out;
  }

  li:hover {
    cursor: pointer;
    border-color: var(--color-gray-400);
  }

  img {
    display: block;
    width: 100%;
  }
}

/* CARDS */

.card-cta {
  max-width: 100%;
  justify-self: center;
  padding: 3rem;
  background-color: var(--color-white);
  box-shadow: 0 0 2px rgba(0,0,0,.05),0 0 4px rgba(0,0,0,.05),0 0 8px rgba(0,0,0,.05),0 0 16px rgba(0,0,0,.05);
  border-radius: var(--border-radius-300);

  @media (width > 1024px) {
    justify-self: right;
  }
}

/* INSURANCE CARDS */

.insurancecard--grid {
  display: grid;
  grid-gap: 4rem;

  @media (width > 600px) {
    grid-template-columns: repeat(2, 1fr);
    margin-top: -3rem;
  }
}

.insurancecards--title {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--border-radius-300);
}

.insurancecard {
  position: relative;
  display: flex;
  overflow: hidden;
  padding: 0;
  text-align: center;
  background-color: var(--color-white);
  border-radius: var(--border-radius-300);
  box-shadow: 0 0 2px rgba(0,0,0,.05),0 0 4px rgba(0,0,0,.05),0 0 8px rgba(0,0,0,.05),0 0 16px rgba(0,0,0,.05);
  
  ul {
  width: 100%;
  margin: 0;
  padding: 0;
  }
  
  li {
  width: 100%;
  padding: 1rem 0;
  margin: 0 auto;
  border-bottom: 1px solid var(--color-gray-300);
  }
  
  li:first-child { /* Title of card */
  width: 100%;
  font-family: var(--font-secondary);
  font-size: 1.8rem;
  font-weight: 300;
  padding: 2rem 0;
  margin-bottom: 0.1rem;
  border-bottom: none;
  color: var(--color-white);
  background-color: var(--color-blue-400);
  border-top-left-radius: var(--border-radius-200);
  border-top-right-radius: var(--border-radius-200);
  }

li:last-child {
  margin-bottom: 0.1rem;
  border-bottom: none;
  }
}

/* PROFILE CARDS */

.profilecard--grid {
  display: grid;
  grid-gap: 3rem;
  margin: 0 auto;

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

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

.profilecard {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 1rem;
  width: 100%;
  text-align: center;
  color: white;
  background-color: white;
  border-radius: var(--border-radius-300);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1);

  @media (width > 600px) {
  height: 325px;
  }
}

.profilecard:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 110%;
  background-size: cover;
  background-position: 0 0;
  transition: transform calc(700ms * 1.5) cubic-bezier(0.19, 1, 0.22, 1);
  pointer-events: none;
}

.profilecard:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  pointer-events: none;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.009) 11.7%, rgba(0, 0, 0, 0.034) 22.1%, rgba(0, 0, 0, 0.072) 31.2%, rgba(0, 0, 0, 0.123) 39.4%, rgba(0, 0, 0, 0.182) 46.6%, rgba(0, 0, 0, 0.249) 53.1%, rgba(0, 0, 0, 0.32) 58.9%, rgba(0, 0, 0, 0.394) 64.3%, rgba(0, 0, 0, 0.468) 69.3%, rgba(0, 0, 0, 0.54) 74.1%, rgba(0, 0, 0, 0.607) 78.8%, rgba(0, 0, 0, 0.668) 83.6%, rgba(0, 0, 0, 0.721) 88.7%, rgba(0, 0, 0, 0.762) 94.1%, rgba(0, 0, 0, 0.79) 100%);
  transform: translateY(-50%);
  transition: transform calc(700ms * 2) cubic-bezier(0.19, 1, 0.22, 1);
}

.profilecard:nth-child(1):before {
  background-image: url(https://images.unsplash.com/photo-1697811599461-38124b3decc9?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NzR8fGJ1c2luZXNzJTIwbWFuJTIwY2xhc3NpY3xlbnwwfHwwfHx8MA%3D%3D);
}

.profilecard:nth-child(2):before {
  background-image: url(https://plus.unsplash.com/premium_photo-1661634968494-1db5fe25f64b?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE0OHx8fGVufDB8fHx8fA%3D%3D);
}

.profilecard:nth-child(3):before {
  background-image: url(https://plus.unsplash.com/premium_photo-1664475907673-2b81c430fd8b?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
}

.profilecard:nth-child(4):before {
  background-image: url(https://plus.unsplash.com/premium_photo-1661349616326-ceadb3e13a43?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE3N3x8fGVufDB8fHx8fA%3D%3D);
}

.profilecard:nth-child(5):before {
  background-image: url(https://images.unsplash.com/photo-1586461967528-9bcd33ec2afc?q=80&w=1335&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
}

.profilecard:nth-child(6):before {
  background-image: url(https://images.unsplash.com/photo-1687425960995-ce33b7ea2272?q=80&w=1287&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
}

.profilecard--content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 1rem;
  transition: transform 700ms cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 1;
}

.profilecard--content > * + * {
  margin-top: 1rem;
}

.profilecard--title {
  font-size: 2.35rem;
  color: var(--color-white);
  font-weight: 400;
}

.profilecard--text {
  font-size: var(--font-size-300);
}

.btn {
  cursor: pointer;
  margin-top: 1.5rem;
  padding: 1rem 1.5rem;
  font-size: 0.9rem;
  letter-spacing: 0.07rem;
  text-transform: uppercase;
  color: white;
  background-color: black;
  border: none;
  border-radius: var(--border-radius-200);
}

.btn:hover {
  background-color: #1f1f1f;
}

.btn:focus {
  outline: 1px dashed white;
  outline-offset: 2px;
}

@media (hover: hover) and (min-width: 600px) {

  .profilecard:after {
    transform: translateY(0);
  }

  .profilecard--content {
    transform: translateY(calc(100% - 4.5rem));
  }

  .profilecard--content > *:not(.profilecard--title) {
    opacity: 0;
    transform: translateY(1rem);
    transition: transform 700ms cubic-bezier(0.19, 1, 0.22, 1), opacity 700ms cubic-bezier(0.19, 1, 0.22, 1);
  }

  .profilecard:hover,
  .profilecard:focus-within {
    align-items: center;
  }
  
  .profilecard:hover:before,
  .profilecard:focus-within:before {
    transform: translateY(-4%);
  }
  
  .profilecard:hover:after,
  .profilecard:focus-within:after {
    transform: translateY(-50%);
  }

  .profilecard:hover .profilecard--content,
  .profilecard:focus-within .profilecard--content {
    transform: translateY(0);
  }

  .profilecard:hover .profilecard--content > *:not(.profilecard--title),
  .profilecard:focus-within .profilecard--content > *:not(.profilecard--title) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(700ms / 8);
  }

  .profilecard:focus-within:before, .profilecard:focus-within:after,
  .profilecard:focus-within .profilecard--content,
  .profilecard:focus-within .profilecard--content > *:not(.profilecard--title) {
    transition-duration: 0s;
  }
}


/* CONTACT */

.googlemap {
  width: 100%;
  min-height: 500px;
  border: 0;
}

.table-openingsuren {
  font-size: var(--font-size-200);
  color: var(--color-white);
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}
  
.table-openingsuren td { 
  text-align: center;
  padding: 1rem;
  background-color: var(--color-darken);
} 
    
.table-openingsuren tr.alt {
  background-color: var(--color-darken);
}

/* FOOTER */

.site-footer {
  background-color: var(--color-blue-800);
}

.footer-navigation {
  background-color: var(--color-blue-800);
  border: 2px solid var(--color-lighten);
  border-radius: var(--border-radius-300);
  max-width: 500px;
  width: 100%;
  font-size: var(--font-size-200);
  color: var(--color-gray-300);
  padding: 3rem;
  margin: 0 auto;
  text-align: center;
  
  @media (width > 1024px) {
    text-align: left;
  }

  li {
    line-height: 2rem;
  }

  .title {
    font-family: var(--font-secondary);
    font-size: var(--font-size-400);
    color: var(--color-white);
    border-bottom: 2px solid var(--color-lighten);
    letter-spacing: 0.05rem;
    font-weight: 400;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
  }

  a {
    text-decoration: none;
    padding-bottom: 1px;
    border-bottom: 1px solid var(--color-lighten);
    transition: all 300ms ease-in-out;
  }
  
  a:hover {
    border-bottom: 1px solid var(--color-white);
  }

}

/* COPYRIGHT FOOTER */

.copyrightfooter {
  background-color: var(--color-white);
  padding-block: 3rem;
}

.copyrightfooter__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  font-size: var(--font-size-100);

  @media (width > 1024px) {
    justify-content: space-between;
  }

}

.brocom-logo {
  width: 220px;
  max-width: 50vw;
}

.copyright-navigation {
  align-items: center;
  justify-content: center;
  color: var(--color-black);
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 0;

  a {
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--color-white);
    transition: all 300ms ease-in-out;
  }
  
  a:hover {
    border-bottom: 1px solid var(--color-blue);
  }
}

}

@layer utilities {

/* ---------------------------------------------------------------------------
CSS UTILITIES
Objective: Helpful style elements, necessary for usability and readability
Version: v2025.09.23
Made by i-media
--------------------------------------------------------------------------- */

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

::selection, ::-moz-selection {
  background-color: rgba(0, 114, 173, .6);
  color: var(--color-white);
}

}