/* Here we have the various variables of the website. 
We'll find margins, fonts, colors and the rest */

/** FONT **/
@font-face {
  font-family: "dinprobold";
  src: url("../fonts/DINPro-Bold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/DINPro-Bold.otf") format("opentype"),
    url("../fonts/DINPro-Bold.woff") format("woff"),
    url("../fonts/DINPro-Bold.ttf") format("truetype"),
    url("../fonts/DINPro-Bold.svg#DINPro-Bold") format("svg");
}
@font-face {
  font-family: "dinprolight";
  src: url("../fonts/DINPro-Light.eot?#iefix") format("embedded-opentype"),
    url("../fonts/DINPro-Light.otf") format("opentype"),
    url("../fonts/DINPro-Light.woff") format("woff"),
    url("../fonts/DINPro-Light.ttf") format("truetype"),
    url("../fonts/DINPro-Light.svg#DINPro-Light") format("svg");
}
@font-face {
  font-family: "dinpromedium";
  src: url("../fonts/DINPro-Medium.eot?#iefix") format("embedded-opentype"),
    url("../fonts/DINPro-Medium.otf") format("opentype"),
    url("../fonts/DINPro-Medium.woff") format("woff"),
    url("../fonts/DINPro-Medium.ttf") format("truetype"),
    url("../fonts/DINPro-Medium.svg#DINPro-Medium") format("svg");
}
@font-face {
  font-family: "dinproregular";
  src: url("../fonts/DINPro-Regular.eot?#iefix") format("embedded-opentype"),
    url("../fonts/DINPro-Regular.otf") format("opentype"),
    url("../fonts/DINPro-Regular.woff") format("woff"),
    url("../fonts/DINPro-Regular.ttf") format("truetype"),
    url("../fonts/DINPro-Regular.svg#DINPro-Regular") format("svg");
}
@font-face {
  font-family: "futurabold";
  src: url("../fonts/futurabc-webfont.eot") format("embedded-opentype"),
    url("../fonts/futurabc-webfont.ttf") format("truetype"),
    url("../fonts/futurabc-webfont.woff2") format("woff2");
}

:root {
  --mobileBreakpoint: 430px;
  --tabletBreakpoint: 800px;
  --desktopBreakpoint: 1000px;
  --keringGray-FF: #fff;
  --keringGray-EE: #eee;
  --keringGray-F2: #f2f2f2; /*This is the color for the inputs*/
  --keringGray-E1: #e1e1e1;
  --keringGray-D9: #d9d9d9;
  --keringGray-A9: #a9a9a9;
  --keringGray-B3: #b3b3b3;
  --keringGray-99: #999;
  --keringGray-95: #959595;
  --keringGray-66: #666;
  --keringGray-33: #333;
  --keringGray-00: #000;
  --keringGray-00-075: rgba(0, 0, 0, 0.075);

  --keringFontMain: 12px;
  --keringFontP1: 8px;
  --keringFontP2: 14px;
  --keringFontP3: 10px;
  --keringFontP5: 20px;
  --keringFontP4: 16px;
  --keringFontP6: 18px;
  --keringFontP7: 13px;
  --keringFontP8: 15px;
  --keringFontF1: "dinproregular";
  --keringFontF2: "italic";
  --keringFontF3: "dinpromedium";
}

p,
span {
  font-size: 13px;
  line-height: 16px;
  font-family: "dinproregular";
}

.modal-error {
  font-size: 14px;
  line-height: 16px;
  color: var(--keringGray-66);
  font-family: "system-ui";
}

/* colors */
.text-Gray-FF{
  color: var(--keringGray-FF) !important;
}

.text-Gray-EE{
  color: var(--keringGray-EE) !important;
}

.text-Gray-F2{
  color: var(--keringGray-F2) !important;
}

.text-Gray-E1{
  color: var(--keringGray-E1) !important;
}

.text-Gray-D9{
  color: var(--keringGray-D9) !important;
}

.text-Gray-A9{
  color: var(--keringGray-A9) !important;
}

.text-Gray-B3{
  color: var(--keringGray-B3) !important;
}

.text-Gray-99{
  color: var(--keringGray-99) !important;
}

.text-Gray-95{
  color: var(--keringGray-95) !important;
}

.text-Gray-66{
  color: var(--keringGray-66) !important;
}

.text-Gray-33{
  color: var(--keringGray-33) !important;
}

.text-Gray-00{
  color: var(--keringGray-00) !important;
}


/* typography */
.fnt-sz-P0 {
  font-size: var(--keringFontMain) !important;
}

.fnt-sz-P1 {
  font-size: var(--keringFontP1) !important;
}

.fnt-sz-P2 {
  font-size: var(--keringFontP2) !important;
}

.fnt-sz-P3 {
  font-size: var(--keringFontP3) !important;
}

.fnt-sz-P4 {
  font-size: var(--keringFontP4) !important;
}

.fnt-sz-P5 {
  font-size: var(--keringFontP5) !important;
}

.fnt-sz-P6 {
  font-size: var(--keringFontP6) !important;
}

.fnt-sz-P7 {
  font-size: var(--keringFontP7) !important;
}

.fnt-sz-P8 {
  font-size: var(--keringFontP8) !important;
}


/* these are some general styles in a bootstrappy kind of way */

.pd-0{
  padding: 0px;
}

.pd-v-0p5{
  padding-top:0.5rem;
  padding-bottom: 0.5rem;
}

.pd-v-2 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pd-v-1p5 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.pd-h-1p5{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.pd-h-3{
  padding-left: 3rem;
  padding-right: 3rem;
}

.d-none {
  display: none !important;
}

/* Just add one class to a container and the corrispective class to a button, and when you press the button
  the container will toggle */

.collapsible-container-n1,
.collapsible-container-n2,
.collapsible-container-n3,
.collapsible-container-n4,
.collapsible-container-n5 {
  display: none;
}
.collapsible-button-n1,
.collapsible-button-n2,
.collapsible-button-n3,
.collapsible-button-n4,
.collapsible-button-n5 {
  display: block;
}

/* to have a long line under */

.line-under {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--keringGray-A9);
}

.line-under-two {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--keringGray-D9);
}

.hidden-on-desktop {
  display: none;
}

@media screen and (max-width: 430px) {
  .body{
    overflow-x: clip;
  }

  .collapsible-container-n6,
  .collapsible-container-n7,
  .collapsible-container-n8,
  .collapsible-container-n9,
  .collapsible-container-n10 {
    display: none;
  }
  .collapsible-button-n6,
  .collapsible-button-n7,
  .collapsible-button-n8,
  .collapsible-button-n9,
  .collapsible-button-n10 {
    display: block;
  }
}