/* Main file for scss imports and css builds */
/* Index file for base styles */
/* Root base styles */
/* Colors named after https://colors.artyclick.com/color-name-finder/ used in the webshop */
/* Fonts used in the webshop */
/* Functions used in the webshop */
@font-face {
  font-family: "Encode";
  font-style: normal;
  font-weight: 900;
  src: url(fonts/encode/EncodeSans-Black.ttf) format("truetype");
}
@font-face {
  font-family: "Encode";
  font-style: normal;
  font-weight: 800;
  src: url(fonts/encode/EncodeSans-ExtraBold.ttf) format("truetype");
}
@font-face {
  font-family: "Encode";
  font-style: normal;
  font-weight: 700;
  src: url(fonts/encode/EncodeSans-Bold.ttf) format("truetype");
}
@font-face {
  font-family: "Encode";
  font-style: normal;
  font-weight: 600;
  src: url(fonts/encode/EncodeSans-SemiBold.ttf) format("truetype");
}
@font-face {
  font-family: "Encode";
  font-style: normal;
  font-weight: 500;
  src: url(fonts/encode/EncodeSans-Medium.ttf) format("truetype");
}
@font-face {
  font-family: "Encode";
  font-style: normal;
  font-weight: 400;
  src: url(fonts/encode/EncodeSans-Regular.ttf) format("truetype");
}
@font-face {
  font-family: "Encode";
  font-style: normal;
  font-weight: 300;
  src: url(fonts/encode/EncodeSans-Light.ttf) format("truetype");
}
@font-face {
  font-family: "Encode";
  font-style: normal;
  font-weight: 200;
  src: url(fonts/encode/EncodeSans-ExtraLight.ttf) format("truetype");
}
@font-face {
  font-family: "Encode";
  font-style: normal;
  font-weight: 100;
  src: url(fonts/encode/EncodeSans-Thin.ttf) format("truetype");
}
@font-face {
  font-family: "Saira";
  font-style: normal;
  font-weight: 900;
  src: url(fonts/saira/regular/Saira-Black.ttf) format("truetype");
}
@font-face {
  font-family: "Saira";
  font-style: italic;
  font-weight: 900;
  src: url(fonts/saira/regular/Saira-BlackItalic.ttf) format("truetype");
}
@font-face {
  font-family: "Saira";
  font-style: normal;
  font-weight: 800;
  src: url(fonts/saira/regular/Saira-ExtraBold.ttf) format("truetype");
}
@font-face {
  font-family: "Saira";
  font-style: italic;
  font-weight: 800;
  src: url(fonts/saira/regular/Saira-ExtraBoldItalic.ttf) format("truetype");
}
@font-face {
  font-family: "Saira";
  font-style: normal;
  font-weight: 700;
  src: url(fonts/saira/regular/Saira-Bold.ttf) format("truetype");
}
@font-face {
  font-family: "Saira";
  font-style: italic;
  font-weight: 700;
  src: url(fonts/saira/regular/Saira-BoldItalic.ttf) format("truetype");
}
@font-face {
  font-family: "Saira";
  font-style: normal;
  font-weight: 600;
  src: url(fonts/saira/regular/Saira-SemiBold.ttf) format("truetype");
}
@font-face {
  font-family: "Saira";
  font-style: italic;
  font-weight: 600;
  src: url(fonts/saira/regular/Saira-SemiBoldItalic.ttf) format("truetype");
}
@font-face {
  font-family: "Saira";
  font-style: normal;
  font-weight: 500;
  src: url(fonts/saira/regular/Saira-Medium.ttf) format("truetype");
}
@font-face {
  font-family: "Saira";
  font-style: italic;
  font-weight: 500;
  src: url(fonts/saira/regular/Saira-MediumItalic.ttf) format("truetype");
}
@font-face {
  font-family: "Saira";
  font-style: normal;
  font-weight: 400;
  src: url(fonts/saira/regular/Saira-Regular.ttf) format("truetype");
}
@font-face {
  font-family: "Saira";
  font-style: italic;
  font-weight: 400;
  src: url(fonts/saira/regular/Saira-Italic.ttf) format("truetype");
}
@font-face {
  font-family: "Saira";
  font-style: normal;
  font-weight: 300;
  src: url(fonts/saira/regular/Saira-Light.ttf) format("truetype");
}
@font-face {
  font-family: "Saira";
  font-style: italic;
  font-weight: 300;
  src: url(fonts/saira/regular/Saira-LightItalic.ttf) format("truetype");
}
@font-face {
  font-family: "Saira";
  font-style: normal;
  font-weight: 200;
  src: url(fonts/saira/regular/Saira-ExtraLight.ttf) format("truetype");
}
@font-face {
  font-family: "Saira";
  font-style: italic;
  font-weight: 200;
  src: url(fonts/saira/regular/Saira-ExtraLightItalic.ttf) format("truetype");
}
@font-face {
  font-family: "Saira";
  font-style: normal;
  font-weight: 100;
  src: url(fonts/saira/regular/Saira-Thin.ttf) format("truetype");
}
@font-face {
  font-family: "Saira";
  font-style: italic;
  font-weight: 100;
  src: url(fonts/saira/regular/Saira-ThinItalic.ttf) format("truetype");
}
@font-face {
  font-family: "Faro-Icons";
  font-style: normal;
  font-weight: normal;
  font-display: block;
  src: url("fonts/faro-icons/faro-icons.eot?jhhpa8");
  src: url("fonts/faro-icons/faro-icons.eot?jhhpa8#iefix") format("embedded-opentype"), url("fonts/faro-icons/faro-icons.ttf?jhhpa8") format("truetype"), url("fonts/faro-icons/faro-icons.woff?jhhpa8") format("woff"), url("fonts/faro-icons/faro-icons.svg?jhhpa8#Faro-Icons") format("svg");
}
body {
  overflow: scroll;
  background: url("../images/background.png") no-repeat #FFFFFF fixed right top;
  font-family: "Encode", sans-serif;
  color: #364751;
}

/* Font base styles */
/* Icons used in the webshop */
.headline-font {
  display: inline-flex;
  align-items: center;
  font-family: "Encode", sans-serif;
  font-weight: 600;
}
.headline-font--h1 {
  height: 1.875rem;
  font-size: 1.875rem;
}
.headline-font--h2 {
  height: 1.75rem;
  font-size: 1.75rem;
}
.headline-font--h3 {
  height: 1.625rem;
  font-size: 1.625rem;
}
.headline-font--h4 {
  height: 1.5rem;
  font-size: 1.5rem;
}
.headline-font--h5 {
  height: 1.375rem;
  font-size: 1.375rem;
}
.headline-font--h6 {
  height: 1.25rem;
  font-size: 1.25rem;
}

.text-font {
  display: inline-flex;
  align-items: center;
  font-family: "Encode", sans-serif;
  font-weight: 400;
}
.text-font--t1 {
  height: 1rem;
  font-size: 1rem;
}
.text-font--t2 {
  height: 0.875rem;
  font-size: 0.875rem;
}
.text-font--t3 {
  height: 0.8125rem;
  font-size: 0.8125rem;
}
.text-font--t4 {
  height: 0.75rem;
  font-size: 0.75rem;
}

[class^=icon-], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "Faro-Icons" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-arrow-down:before {
  content: "\e900";
}

.icon-arrow-left:before {
  content: "\e901";
}

.icon-arrow-right:before {
  content: "\e902";
}

.icon-arrow-up:before {
  content: "\e903";
}

.icon-avatar:before {
  content: "\e904";
}

.icon-calendar:before {
  content: "\e905";
}

.icon-calendar-date:before {
  content: "\e906";
}

.icon-cart:before {
  content: "\e907";
}

.icon-cart-order:before {
  content: "\e908";
}

.icon-cart-save:before {
  content: "\e909";
}

.icon-chevron-backward:before {
  content: "\e90a";
}

.icon-chevron-down:before {
  content: "\e90b";
}

.icon-chevron-forward:before {
  content: "\e90c";
}

.icon-chevron-left:before {
  content: "\e90d";
}

.icon-chevron-right:before {
  content: "\e90e";
}

.icon-chevron-up:before {
  content: "\e90f";
}

.icon-cross:before {
  content: "\e910";
}

.icon-crown:before {
  content: "\e911";
}

.icon-edit:before {
  content: "\e912";
}

.icon-envelope:before {
  content: "\e913";
}

.icon-external:before {
  content: "\e914";
}

.icon-house:before {
  content: "\e915";
}

.icon-login:before {
  content: "\e916";
}

.icon-logout:before {
  content: "\e917";
}

.icon-menu:before {
  content: "\e918";
}

.icon-order:before {
  content: "\e919";
}

.icon-people:before {
  content: "\e91a";
}

.icon-refresh:before {
  content: "\e91b";
}

.icon-search:before {
  content: "\e91c";
}

.icon-search-battery:before {
  content: "\e91d";
}

.icon-search-car:before {
  content: "\e91e";
}

.icon-search-cases:before {
  content: "\e91f";
}

.icon-search-charging:before {
  content: "\e920";
}

.icon-search-cut-use:before {
  content: "\e921";
}

.icon-search-earphone:before {
  content: "\e922";
}

.icon-search-it:before {
  content: "\e923";
}

.icon-search-jewelry:before {
  content: "\e924";
}

.icon-search-materials:before {
  content: "\e925";
}

.icon-search-multimedia:before {
  content: "\e926";
}

.icon-search-sales:before {
  content: "\e927";
}

.icon-search-screen:before {
  content: "\e928";
}

.icon-search-sparepart:before {
  content: "\e929";
}

.icon-search-storage:before {
  content: "\e92a";
}

.icon-search-stylus:before {
  content: "\e92b";
}

.icon-search-tags:before {
  content: "\e92c";
}

.icon-search-workshop:before {
  content: "\e92d";
}

.icon-social-facebook:before {
  content: "\e92e";
}

.icon-social-instagram:before {
  content: "\e92f";
}

.icon-social-linkedin:before {
  content: "\e930";
}

.icon-social-xing:before {
  content: "\e931";
}

.icon-trash:before {
  content: "\e932";
}

/* https://piccalil.li/blog/a-modern-css-reset/ */
html {
  font-size: 16px;
  height: 100%;
}

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

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
h6,
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 root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  text-rendering: optimizeSpeed;
  line-height: 1;
  height: 100%;
}

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

a {
  text-decoration: none;
}

/* Make images easier to work with */
img,
picture {
  display: block;
}

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

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Helper base styles */
.container {
  width: 100%;
  max-width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  margin-right: auto;
  margin-left: auto;
}

@media only screen and (min-width: 576px) {
  .container {
    max-width: 540px;
    padding-left: 0;
    padding-right: 0;
  }
}
@media only screen and (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
@media only screen and (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
@media only screen and (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
@media only screen and (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}
/* Index file for components */
/* Index file for layouts */
/* Index file for pages */
/* Index file for utils */

/*# sourceMappingURL=faro.css.map */