@font-face {
  font-family: 'Commodore 64 Rounded';
  src: url('../../fonts/commodore/Commodore64Rounded.eot');
  src: url('../../fonts/commodore/Commodore64Rounded.eot?#iefix') format('embedded-opentype'),
      url('../../fonts/commodore/Commodore64Rounded.woff2') format('woff2'),
      url('../../fonts/commodore/Commodore64Rounded.woff') format('woff'),
      url('../../fonts/commodore/Commodore64Rounded.ttf') format('truetype'),
      url('../../fonts/commodore/Commodore64Rounded.svg#Commodore64Rounded') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Commodore 64';
  src: url('../../fonts/commodore/Commodore64.eot');
  src: url('../../fonts/commodore/Commodore64.eot?#iefix') format('embedded-opentype'),
      url('../../fonts/commodore/Commodore64.woff2') format('woff2'),
      url('../../fonts/commodore/Commodore64.woff') format('woff'),
      url('../../fonts/commodore/Commodore64.ttf') format('truetype'),
      url('../../fonts/commodore/Commodore64.svg#Commodore64') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Commodore 64 Pixelized';
  src: url('../../fonts/commodore/Commodore64Pixelized.eot');
  src: url('../../fonts/commodore/Commodore64Pixelized.eot?#iefix') format('embedded-opentype'),
      url('../../fonts/commodore/Commodore64Pixelized.woff2') format('woff2'),
      url('../../fonts/commodore/Commodore64Pixelized.woff') format('woff'),
      url('../../fonts/commodore/Commodore64Pixelized.ttf') format('truetype'),
      url('../../fonts/commodore/Commodore64Pixelized.svg#Commodore64Pixelized') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Commodore 64 Angled';
  src: url('../../fonts/commodore/Commodore64Angled.eot');
  src: url('../../fonts/commodore/Commodore64Angled.eot?#iefix') format('embedded-opentype'),
      url('../../fonts/commodore/Commodore64Angled.woff2') format('woff2'),
      url('../../fonts/commodore/Commodore64Angled.woff') format('woff'),
      url('../../fonts/commodore/Commodore64Angled.ttf') format('truetype'),
      url('../../fonts/commodore/Commodore64Angled.svg#Commodore64Angled') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CommodoreServer';
  src: url('../../fonts/commodore/CommodoreServer.eot');
  src: url('../../fonts/commodore/CommodoreServer.eot?#iefix') format('embedded-opentype'),
      url('../../fonts/commodore/CommodoreServer.woff2') format('woff2'),
      url('../../fonts/commodore/CommodoreServer.woff') format('woff'),
      url('../../fonts/commodore/CommodoreServer.ttf') format('truetype'),
      url('../../fonts/commodore/CommodoreServer.svg#CommodoreServer') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bw Modelica';
  src: url('../../fonts/commodore/BwModelica-Hairline.eot');
  src: url('../../fonts/commodore/BwModelica-Hairline.eot?#iefix') format('embedded-opentype'),
      url('../../fonts/commodore/BwModelica-Hairline.woff2') format('woff2'),
      url('../../fonts/commodore/BwModelica-Hairline.woff') format('woff'),
      url('../../fonts/commodore/BwModelica-Hairline.ttf') format('truetype'),
      url('../../fonts/commodore/BwModelica-Hairline.svg#BwModelica-Hairline') format('svg');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bw Modelica';
  src: url('../../fonts/commodore/BwModelica-HairlineItalic.eot');
  src: url('../../fonts/commodore/BwModelica-HairlineItalic.eot?#iefix') format('embedded-opentype'),
      url('../../fonts/commodore/BwModelica-HairlineItalic.woff2') format('woff2'),
      url('../../fonts/commodore/BwModelica-HairlineItalic.woff') format('woff'),
      url('../../fonts/commodore/BwModelica-HairlineItalic.ttf') format('truetype'),
      url('../../fonts/commodore/BwModelica-HairlineItalic.svg#BwModelica-HairlineItalic') format('svg');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Bw Modelica';
  src: url('../../fonts/commodore/BwModelica-Thin.eot');
  src: url('../../fonts/commodore/BwModelica-Thin.eot?#iefix') format('embedded-opentype'),
      url('../../fonts/commodore/BwModelica-Thin.woff2') format('woff2'),
      url('../../fonts/commodore/BwModelica-Thin.woff') format('woff'),
      url('../../fonts/commodore/BwModelica-Thin.ttf') format('truetype'),
      url('../../fonts/commodore/BwModelica-Thin.svg#BwModelica-Thin') format('svg');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bw Modelica';
  src: url('../../fonts/commodore/BwModelica-ThinItalic.eot');
  src: url('../../fonts/commodore/BwModelica-ThinItalic.eot?#iefix') format('embedded-opentype'),
      url('../../fonts/commodore/BwModelica-ThinItalic.woff2') format('woff2'),
      url('../../fonts/commodore/BwModelica-ThinItalic.woff') format('woff'),
      url('../../fonts/commodore/BwModelica-ThinItalic.ttf') format('truetype'),
      url('../../fonts/commodore/BwModelica-ThinItalic.svg#BwModelica-ThinItalic') format('svg');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Bw Modelica';
  src: url('../../fonts/commodore/BwModelica-Light.eot');
  src: url('../../fonts/commodore/BwModelica-Light.eot?#iefix') format('embedded-opentype'),
      url('../../fonts/commodore/BwModelica-Light.woff2') format('woff2'),
      url('../../fonts/commodore/BwModelica-Light.woff') format('woff'),
      url('../../fonts/commodore/BwModelica-Light.ttf') format('truetype'),
      url('../../fonts/commodore/BwModelica-Light.svg#BwModelica-Light') format('svg');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bw Modelica';
  src: url('../../fonts/commodore/BwModelica-LightItalic.eot');
  src: url('../../fonts/commodore/BwModelica-LightItalic.eot?#iefix') format('embedded-opentype'),
      url('../../fonts/commodore/BwModelica-LightItalic.woff2') format('woff2'),
      url('../../fonts/commodore/BwModelica-LightItalic.woff') format('woff'),
      url('../../fonts/commodore/BwModelica-LightItalic.ttf') format('truetype'),
      url('../../fonts/commodore/BwModelica-LightItalic.svg#BwModelica-LightItalic') format('svg');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Bw Modelica';
  src: url('../../fonts/commodore/BwModelica-Regular.eot');
  src: url('../../fonts/commodore/BwModelica-Regular.eot?#iefix') format('embedded-opentype'),
      url('../../fonts/commodore/BwModelica-Regular.woff2') format('woff2'),
      url('../../fonts/commodore/BwModelica-Regular.woff') format('woff'),
      url('../../fonts/commodore/BwModelica-Regular.ttf') format('truetype'),
      url('../../fonts/commodore/BwModelica-Regular.svg#BwModelica-Regular') format('svg');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bw Modelica';
  src: url('../../fonts/commodore/BwModelica-RegularItalic.eot');
  src: url('../../fonts/commodore/BwModelica-RegularItalic.eot?#iefix') format('embedded-opentype'),
      url('../../fonts/commodore/BwModelica-RegularItalic.woff2') format('woff2'),
      url('../../fonts/commodore/BwModelica-RegularItalic.woff') format('woff'),
      url('../../fonts/commodore/BwModelica-RegularItalic.ttf') format('truetype'),
      url('../../fonts/commodore/BwModelica-RegularItalic.svg#BwModelica-RegularItalic') format('svg');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Bw Modelica';
  src: url('../../fonts/commodore/BwModelica-Medium.eot');
  src: url('../../fonts/commodore/BwModelica-Medium.eot?#iefix') format('embedded-opentype'),
      url('../../fonts/commodore/BwModelica-Medium.woff2') format('woff2'),
      url('../../fonts/commodore/BwModelica-Medium.woff') format('woff'),
      url('../../fonts/commodore/BwModelica-Medium.ttf') format('truetype'),
      url('../../fonts/commodore/BwModelica-Medium.svg#BwModelica-Medium') format('svg');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bw Modelica';
  src: url('../../fonts/commodore/BwModelica-MediumItalic.eot');
  src: url('../../fonts/commodore/BwModelica-MediumItalic.eot?#iefix') format('embedded-opentype'),
      url('../../fonts/commodore/BwModelica-MediumItalic.woff2') format('woff2'),
      url('../../fonts/commodore/BwModelica-MediumItalic.woff') format('woff'),
      url('../../fonts/commodore/BwModelica-MediumItalic.ttf') format('truetype'),
      url('../../fonts/commodore/BwModelica-MediumItalic.svg#BwModelica-MediumItalic') format('svg');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}


@font-face {
  font-family: 'Bw Modelica';
  src: url('../../fonts/commodore/BwModelica-Bold.eot');
  src: url('../../fonts/commodore/BwModelica-Bold.eot?#iefix') format('embedded-opentype'),
      url('../../fonts/commodore/BwModelica-Bold.woff2') format('woff2'),
      url('../../fonts/commodore/BwModelica-Bold.woff') format('woff'),
      url('../../fonts/commodore/BwModelica-Bold.ttf') format('truetype'),
      url('../../fonts/commodore/BwModelica-Bold.svg#BwModelica-Bold') format('svg');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bw Modelica';
  src: url('../../fonts/commodore/BwModelica-BoldItalic.eot');
  src: url('../../fonts/commodore/BwModelica-BoldItalic.eot?#iefix') format('embedded-opentype'),
      url('../../fonts/commodore/BwModelica-BoldItalic.woff2') format('woff2'),
      url('../../fonts/commodore/BwModelica-BoldItalic.woff') format('woff'),
      url('../../fonts/commodore/BwModelica-BoldItalic.ttf') format('truetype'),
      url('../../fonts/commodore/BwModelica-BoldItalic.svg#BwModelica-BoldItalic') format('svg');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Bw Modelica';
  src: url('../../fonts/commodore/BwModelica-ExtraBold.eot');
  src: url('../../fonts/commodore/BwModelica-ExtraBold.eot?#iefix') format('embedded-opentype'),
      url('../../fonts/commodore/BwModelica-ExtraBold.woff2') format('woff2'),
      url('../../fonts/commodore/BwModelica-ExtraBold.woff') format('woff'),
      url('../../fonts/commodore/BwModelica-ExtraBold.ttf') format('truetype'),
      url('../../fonts/commodore/BwModelica-ExtraBold.svg#BwModelica-ExtraBold') format('svg');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bw Modelica';
  src: url('../../fonts/commodore/BwModelica-ExtraBoldItalic.eot');
  src: url('../../fonts/commodore/BwModelica-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
      url('../../fonts/commodore/BwModelica-ExtraBoldItalic.woff2') format('woff2'),
      url('../../fonts/commodore/BwModelica-ExtraBoldItalic.woff') format('woff'),
      url('../../fonts/commodore/BwModelica-ExtraBoldItalic.ttf') format('truetype'),
      url('../../fonts/commodore/BwModelica-ExtraBoldItalic.svg#BwModelica-ExtraBoldItalic') format('svg');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Bw Modelica';
  src: url('../../fonts/commodore/BwModelica-Black.eot');
  src: url('../../fonts/commodore/BwModelica-Black.eot?#iefix') format('embedded-opentype'),
      url('../../fonts/commodore/BwModelica-Black.woff2') format('woff2'),
      url('../../fonts/commodore/BwModelica-Black.woff') format('woff'),
      url('../../fonts/commodore/BwModelica-Black.ttf') format('truetype'),
      url('../../fonts/commodore/BwModelica-Black.svg#BwModelica-Black') format('svg');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bw Modelica';
  src: url('../../fonts/commodore/BwModelica-BlackItalic.eot');
  src: url('../../fonts/commodore/BwModelica-BlackItalic.eot?#iefix') format('embedded-opentype'),
      url('../../fonts/commodore/BwModelica-BlackItalic.woff2') format('woff2'),
      url('../../fonts/commodore/BwModelica-BlackItalic.woff') format('woff'),
      url('../../fonts/commodore/BwModelica-BlackItalic.ttf') format('truetype'),
      url('../../fonts/commodore/BwModelica-BlackItalic.svg#BwModelica-BlackItalic') format('svg');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}






:root {
  --Commodore64Rounced: 'Commodore 64 Rounded';
  --Commodore64: 'Commodore 64';
  --Commodore64Pixelized: 'Commodore 64 Pixelized';
  --Commodore64Angled: 'Commodore 64 Angled';
  --CommodoreServer: 'CommodoreServer';
  --BwModelica: 'Bw Modelica';
  --BwModelicaBoldItalic: 'Bw Modelica BoldItalic';
  --BwModelicaExtraBoldItalic: 'Bw Modelica ExtraBoldItalic';
  --BwModelicaThinItalic: 'Bw Modelica ThinItalic';
  --BwModelicaBlack: 'Bw Modelica Black';
  --BwModelicaLightItalic: 'Bw Modelica LightItalic';
  --BwModelicaRegular: 'Bw Modelica Regular';
  --BwModelicaHairline: 'Bw Modelica Hairline';
  --BwModelicaLight: 'Bw Modelica Light';
  --BwModelicaMedium: 'Bw Modelica Medium';
  --BwModelicaMediumItalic: 'Bw Modelica MediumItalic';
  --BwModelicaBlackItalic: 'Bw Modelica BlackItalic';
  --BwModelicaBold: 'Bw Modelica Bold';
  --BwModelicaThin: 'Bw Modelica Thin';
  --BwModelicaExtraBold: 'Bw Modelica ExtraBold';
  --BwModelicaHairlineItalic: 'Bw Modelica HairlineItalic';
  --bs-box-shadow-sm: 0px 0px 3px 0px rgba(0, 0, 0, 0.2);
}

:root {

  /* COLORS */
--blue:  #002255;
--blueLight: #004ba6;
--white: #fff;
--red: #ff0000;
--Orange: #fd7801;
--yellow: #f2f540;
--Green: #48cc31;
--Cyan: #14a3fd;
--Lilac: #a0a0ff;
--Grey: #ced0de;
--Grey80: #d8d9e5;
--Grey60: #e2e3eb;
--Grey40: #f3f4f7;
--Grey20: #f5f6f8;
--darkGrey: #333333;

  --PrimaryBlue: var(--blue);
  --PrimaryRed: var(--red);
  --secondaryColor: var(--white);
  --SecondaryLilac: var(--Lilac);
  --SecondaryGrey: var(--Grey);
  --SecondaryGrey80: var(--Grey80);
  --SecondaryGrey60: var(--Grey60);
  --SecondaryGrey40: var(--Grey40);
  --SecondaryGrey20: var(--Grey20);
  --arcadeColorDisplay: #4040e9;
  --arcadeColorTesto: #a0a0ff;
  --rainbowRed: #ff1e1e;
  --rainbowOrange: var(--Orange);
  --rainbowYellow: var(--yellow);
  --rainbowGreen: var(--Green);
  --rainbowCyan: var(--Cyan);
  --numberColor1: var(--blueLight);
  --pColor: var(--darkGrey);

  /* SIZES
  --sizeA: 0.8dvw;
  --sizeP: 1dvw;
  --sizeH1: 14vw;
  --sizeH2: 7.5dvw;
  --sizeH3: 2dvw;
  --sizeH3-big: 2.2dvw;
  --sizeH3-small: 1.5dvw;
  --sizeH4: 1dvw;
  --sizeH4s: 1dvw;
  --sizeChips: 0.6dvw;
  --sizeIcon: 3dvw;
 */
  --sizeA: 0.8dvw;
  --sizeApx: 20px;
  --sizeP: 1dvw;
  --sizePpx: 20px;
  --sizeH1: 7.5vw;
  --sizeH2: 50px;
  --sizeH3: 2dvw;
  --sizeH3-big: 2.2dvw;
  --sizeH3-small: 1.5dvw;
  --sizeH4: 1dvw;
  --sizeH4s: 1dvw;
  --sizeChips: 0.6dvw;
  --sizeIcon: 3dvw;

  --size1: 260px;
  --sizeH2Big: 72px;
  --size2-s: 18px;
  --size3: 36px;
  --size4: 20px;
  --sizeP1: 56px;
  --sizeP2: 48px;
  --sizeP3: 24px;
  --sizeP4: 16px;

  /* SPACE */

  --gap1: 15px;
  --gapP: 80px;
  --mr100: 100px;

  /* PADDING */
  --padding15: 15px;
  --padding40: 40px;
  --padding180: 180px;
  --paddingB100: 100px;
  --paddingB150: 150px;
  --paddingT100: 100px;
  --paddingT150: 150px;


  /* MARGIN */

  --marginB80: 80px;
  --marginT60: 60px;
  --marginT120: 120px;
  --marginT150: 150px;
  --marginL60: 60px;
  --marginL20: 20%;
  --marginB30: 30px;
  --marginB40: 40px;
  --marginB45: 45px;
  --marginB60: 60px;
  --marginB150: 150px;



  /* CONTAINER */
  --cont60: 60%;
  --cont50: 50%;

  /* FONT */
  --primaryFont: 'Bw Modelica', sans-serif;


  /* LINE-HEIGHT */
  --lineHeightH2: 74px;
  --lineHeightP3: 36px;
}



@media (max-width: 768px){

:root {



  /* SIZES */
  --sizeA: 2.8dvw;
  --sizeP: 4dvw;
  --sizeH1: 13vw;
  --sizeH2: 10dvw;
  --sizeH3: 8dvw;
  --sizeH3-small: 10dvw;
  --sizeH3-big: 8.4dvw;
  --sizeH4: 5dvw;
  --sizeH4s: 3.5dvw;
  --sizeChips: 1.8dvw;
  --sizeIcon: 20dvw;
  --sizeTitle3: 2.5dvw;

  --size1: 235px;
  --size2: 72px;
  --size2-s: 18px;
  --size3: 36px;
  --size4: 20px;
  --sizeP1: 56px;
  --sizeP2: 48px;
  --sizeP3: 24px;
  --sizeP4: 16px;

  /* SPACE */

  --gap1: 15px;

  /* FONT */
    --primaryFont: 'Bw Modelica', sans-serif;

}

}

@media (min-width: 769px) and (max-width: 1080px) and (orientation: portrait){

:root {

  /* SIZES */
  --sizeA: 2.8dvw;
  --sizeP: 3dvw;
  --sizeH1: 8dvw;
  --sizeH2: 10dvw;
  --sizeH3: 8dvw;
  --sizeH3-big: 5.2dvw;
  --sizeH3-small: 1.5dvw;
  --sizeH4: 5dvw;
  --sizeH4s: 3.5dvw;
  --sizeChips: 1.8dvw;
  --sizeIcon: 20dvw;

  /* SPACE */

  --gap1: 15px;

  /* FONT */
    --primaryFont: 'Bw Modelica', sans-serif;

}

}


@media (max-width: 400px) and (orientation: portrait){

  :root {
  --sizeApx: 16px;
  }
}