/******************* 01. Font Implementation *******************/
/*
@font-face {
  font-family: 'open_sansregular';
  src: url('../../Fonts/OpenSans/OpenSans-Regular-webfont.eot');
  src: url('../../Fonts/OpenSans/OpenSans-Regular-webfont.eot?#iefix') format("embedded-opentype"),
  url('../../Fonts/OpenSans/OpenSans-Regular-webfont.woff') format('woff'),
  url('../../Fonts/OpenSans/OpenSans-Regular-webfont.ttf') format('truetype'),
  url('../../Fonts/OpenSans/OpenSans-Regular-webfont.svg##{$font-name-normal}') format('svg');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'open_sansbold';
  src: url('../../Fonts/OpenSans/OpenSans-Bold-webfont.eot');
  src: url('../../Fonts/OpenSans/OpenSans-Bold-webfont.eot?#iefix') format("embedded-opentype"),
  url('../../Fonts/OpenSans/OpenSans-Bold-webfont.woff') format('woff'),
  url('../../Fonts/OpenSans/OpenSans-Bold-webfont.ttf') format('truetype'),
  url('../../Fonts/OpenSans/OpenSans-Bold-webfont.svg##{$font-name-bold}') format("svg");
  font-style: normal;
  font-display: swap;
}
*/



/* =======================
    Webfont Malinton
   =======================

/* Malinton Thin */
@font-face {
  font-display: swap; 
  font-family: 'Malinton';
  font-style: normal;
  font-weight: 100;
  src: url('../../Fonts/malinton/Malinton-Thin.woff2') format('woff2'); 
}
/* Malinton Extra Light */
@font-face {
  font-display: swap; 
  font-family: 'Malinton';
  font-style: normal;
  font-weight: 200;
  src: url('../../Fonts/malinton/Malinton-ExtraLight.woff2') format('woff2'); 
}
/* Malinton Light */
@font-face {
  font-display: swap; 
  font-family: 'Malinton';
  font-style: normal;
  font-weight: 300;
  src: url('../../Fonts/malinton/Malinton-Light.woff2') format('woff2'); 
}
/* Malinton Regular */
@font-face {
  font-display: swap; 
  font-family: 'Malinton';
  font-style: normal;
  font-weight: 400;
  src: url('../../Fonts/malinton/Malinton-Regular.woff2') format('woff2'); 
}/* Malinton Medium */
@font-face {
  font-display: swap; 
  font-family: 'Malinton';
  font-style: normal;
  font-weight: 500;
  src: url('../../Fonts/malinton/Malinton-Medium.woff2') format('woff2'); 
}
/* Malinton Semi Bold */
@font-face {
  font-display: swap; 
  font-family: 'Malinton';
  font-style: normal;
  font-weight: 600;
  src: url('../../Fonts/malinton/Malinton-SemiBold.woff2') format('woff2'); 
}
/* Malinton Bold */
@font-face {
  font-display: swap; 
  font-family: 'Malinton';
  font-style: normal;
  font-weight: 700;
  src: url('../../Fonts/malinton/Malinton-Bold.woff2') format('woff2'); 
}
/* Malinton Extra Bold */
@font-face {
  font-display: swap; 
  font-family: 'Malinton';
  font-style: normal;
  font-weight: 800;
  src: url('../../Fonts/malinton/Malinton-ExtraBold.woff2') format('woff2'); 
}
/* Malinton Black */
@font-face {
  font-display: swap; 
  font-family: 'Malinton';
  font-style: normal;
  font-weight: 900;
  src: url('../../Fonts/malinton/Malinton-Black.woff2') format('woff2'); 
}



/* =======================
    Webfont ibm-plex-sans
   =======================

/* ibm-plex-sans-100 - latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100;
  src: url('../../Fonts/ibm-plex-sans/ibm-plex-sans-v21-latin-ext-100.woff2') format('woff2'); 
}
/* ibm-plex-sans-100italic - latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 100;
  src: url('../../Fonts/ibm-plex-sans/ibm-plex-sans-v21-latin-ext-100italic.woff2') format('woff2'); 
}
/* ibm-plex-sans-200 - latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 200;
  src: url('../../Fonts/ibm-plex-sans/ibm-plex-sans-v21-latin-ext-200.woff2') format('woff2'); 
}
/* ibm-plex-sans-200italic - latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 200;
  src: url('../../Fonts/ibm-plex-sans/ibm-plex-sans-v21-latin-ext-200italic.woff2') format('woff2'); 
}
/* ibm-plex-sans-300 - latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../../Fonts/ibm-plex-sans/ibm-plex-sans-v21-latin-ext-300.woff2') format('woff2'); 
}
/* ibm-plex-sans-300italic - latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 300;
  src: url('../../Fonts/ibm-plex-sans/ibm-plex-sans-v21-latin-ext-300italic.woff2') format('woff2'); 
}
/* ibm-plex-sans-regular - latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../../Fonts/ibm-plex-sans/ibm-plex-sans-v21-latin-ext-regular.woff2') format('woff2'); 
}
/* ibm-plex-sans-italic - latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../../Fonts/ibm-plex-sans/ibm-plex-sans-v21-latin-ext-italic.woff2') format('woff2'); 
}
/* ibm-plex-sans-500 - latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../../Fonts/ibm-plex-sans/ibm-plex-sans-v21-latin-ext-500.woff2') format('woff2'); 
}
/* ibm-plex-sans-500italic - latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 500;
  src: url('../../Fonts/ibm-plex-sans/ibm-plex-sans-v21-latin-ext-500italic.woff2') format('woff2'); 
}
/* ibm-plex-sans-600 - latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../../Fonts/ibm-plex-sans/ibm-plex-sans-v21-latin-ext-600.woff2') format('woff2'); 
}
/* ibm-plex-sans-600italic - latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 600;
  src: url('../../Fonts/ibm-plex-sans/ibm-plex-sans-v21-latin-ext-600italic.woff2') format('woff2'); 
}
/* ibm-plex-sans-700 - latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../../Fonts/ibm-plex-sans/ibm-plex-sans-v21-latin-ext-700.woff2') format('woff2'); 
}
/* ibm-plex-sans-700italic - latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../../Fonts/ibm-plex-sans/ibm-plex-sans-v21-latin-ext-700italic.woff2') format('woff2'); 
}



/* =======================
    Webfont ibm-plex-mono
   =======================

/* ibm-plex-mono-100 - latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 100;
  src: url('../../Fonts/ibm-plex-mono/ibm-plex-mono-v19-latin-ext-100.woff2') format('woff2'); 
}
/* ibm-plex-mono-100italic - latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'IBM Plex Mono';
  font-style: italic;
  font-weight: 100;
  src: url('../../Fonts/ibm-plex-mono/ibm-plex-mono-v19-latin-ext-100italic.woff2') format('woff2'); 
}
/* ibm-plex-mono-200 - latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 200;
  src: url('../../Fonts/ibm-plex-mono/ibm-plex-mono-v19-latin-ext-200.woff2') format('woff2'); 
}
/* ibm-plex-mono-200italic - latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'IBM Plex Mono';
  font-style: italic;
  font-weight: 200;
  src: url('../../Fonts/ibm-plex-mono/ibm-plex-mono-v19-latin-ext-200italic.woff2') format('woff2'); 
}
/* ibm-plex-mono-300 - latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 300;
  src: url('../../Fonts/ibm-plex-mono/ibm-plex-mono-v19-latin-ext-300.woff2') format('woff2'); 
}
/* ibm-plex-mono-300italic - latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'IBM Plex Mono';
  font-style: italic;
  font-weight: 300;
  src: url('../../Fonts/ibm-plex-mono/ibm-plex-mono-v19-latin-ext-300italic.woff2') format('woff2'); 
}
/* ibm-plex-mono-regular - latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  src: url('../../Fonts/ibm-plex-mono/ibm-plex-mono-v19-latin-ext-regular.woff2') format('woff2'); 
}
/* ibm-plex-mono-italic - latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'IBM Plex Mono';
  font-style: italic;
  font-weight: 400;
  src: url('../../Fonts/ibm-plex-mono/ibm-plex-mono-v19-latin-ext-italic.woff2') format('woff2'); 
}
/* ibm-plex-mono-500 - latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  src: url('../../Fonts/ibm-plex-mono/ibm-plex-mono-v19-latin-ext-500.woff2') format('woff2'); 
}
/* ibm-plex-mono-500italic - latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'IBM Plex Mono';
  font-style: italic;
  font-weight: 500;
  src: url('../../Fonts/ibm-plex-mono/ibm-plex-mono-v19-latin-ext-500italic.woff2') format('woff2'); 
}
/* ibm-plex-mono-600 - latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  src: url('../../Fonts/ibm-plex-mono/ibm-plex-mono-v19-latin-ext-600.woff2') format('woff2'); 
}
/* ibm-plex-mono-600italic - latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'IBM Plex Mono';
  font-style: italic;
  font-weight: 600;
  src: url('../../Fonts/ibm-plex-mono/ibm-plex-mono-v19-latin-ext-600italic.woff2') format('woff2'); 
}
/* ibm-plex-mono-700 - latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  src: url('../../Fonts/ibm-plex-mono/ibm-plex-mono-v19-latin-ext-700.woff2') format('woff2'); 
}
/* ibm-plex-mono-700italic - latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'IBM Plex Mono';
  font-style: italic;
  font-weight: 700;
  src: url('../../Fonts/ibm-plex-mono/ibm-plex-mono-v19-latin-ext-700italic.woff2') format('woff2'); 
}





@font-face {
  font-family: 'Roboto Flex Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Roboto Flex Regular'), url('../../Fonts/Roboto/RobotoFlex[GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght].woff') format('woff');
}
/******************* 02. Variable Declarations *******************/
:root {

  /*** Fonts,see also Font Implementation at to top of this file ***/
  --font-family-normal: 'IBM Plex Sans', verdana, arial, helvetica, sans-serif;
  --font-weight-normal: 400;
  --font-variation-settings: 'wdth' 120, 'wght' 400;
  --letter-spacing-normal: 0.02rem;
	
  --font-family-bold: 'IBM Plex Sans', verdana, arial, helvetica, sans-serif;
  --font-weight-bold: 600;
  --font-variation-settings-bold: 'wdth' 120, 'wght' 550;

  --font-family-mono: 'IBM Plex Mono',monospace,monospace;
  --font-weight-mono: 400;
  --font-variation-settings-mono: 'wdth' 120, 'wght' 400;
  --letter-spacing-mono: 0.03rem;
	
  --header-font-family: 'Malinton', verdana, arial, helvetica, sans-serif;
  --header-font-weight: 600;
  --header-font-variation-settings: 'wdth' 120, 'wght' 550;
  --header-letter-spacing: 0.03rem;

  /*** Colors begin ***/

  /* Links/Menus */
  --color1: #f7f42f;
  --color2: #000F42;

  /* Decoration*/
  --color3: #ff9635;
  --color4: #9a031e;

   /* Background*/
  --bg50: #0a3323;
  --bg51: #cfe6c8;
  --bg52: #47665a;
  --bg53: #2f5244;
  --bg54: #f7f42f;
  --bg55: #f3f0e9;
  --bg56: #e6e1d2;
  --bg57: #fff;
  --bg58: #E7F3E3;

  --bg50-color: #fff;
  --bg50-color1: #e6e1d2;
  --bg51-color: #0a3323;
  --bg52-color: #cfe6c8;
  --bg53-color: #cfe6c8;
  --bg54-color: #0a3323;
  --bg55-color: #9b9382;
  --bg56-color: #0a3323;
  --bg57-color: #2c4466;
	
   /* Gray Scale */
  --black: #000;
  --gray1: #222;
  --gray2: #666;
  --gray3: #999;
  --gray4: #ccc;
  --gray5: #eee;
  --white: #fff;
  --white-opacity: rgba(255, 255, 255, 0.9);

  /* Message Colors */
  --error: #ba0202;
  --error-light: #fff2f2;
  --valid: #5abc55;
  --valid-light: #e8f6e7;
  --warning: #ffc800;
  --warning-light: #fffae8;
  --information: #0080ff;
  --information-light: #ecf5fe;

  /*** Colors end ***/

  /*** Basic Sizes ***/

  /* Basic horizontal spaces */
  --base-html-size: 16px;
  --body-font-size: 1rem; /* 16px*/

  --base-size: 1.5rem;
  --base-size-double: 3rem;
  --base-size-triple: 4.5rem;
  --base-size-half: 0.75rem;
  --base-size-quarter: 0.375rem;
  --base-size-eighth: 0.1875rem;

  /* Basic vertical spaces */
  --gutter: 1.5rem;
  --gutter-double: 3rem;
  --gutter-triple: 4.5rem;
  --gutter-half: 0.75rem;
  --gutter-quarter: 0.375rem;
  --gutter-eighth: 0.1875rem;

  /* Borders */
  --border-width: 2px;
  --border-radius: 2px;

  --transition: .3s ease-in-out;


  /******************* 03. Property Declarations, Individual Layout *******************/

  /* Max. Height of Logo in Header (--logo-height) on Website
  Rendered File height is defined in TypoScript Constants on Root Page. Adjust value if necessary
  Example: --logo-height: 150px;
  */
  --logo-height: calc(var(--base-size, 16px) * 3);

  /* Body */
  --font-color: var(--bg50-color);
  --font-color-light: var(--bg50-color);
  --body-bg-color: var(--bg50);

  /* Body links */
  --body-link-color: var(--color1);
  --body-link-hover-color: var(--color1);
  --body-link-invers-color: var(--gray4);
  --body-link-invers-hover-color: var(--white);
  --body-link-text-decoration: underline;
  --body-link-text-decoration-color: var(--color1);
  --body-link-text-decoration-thickness: 1px;
  --body-link-underline-offset: 3px;

  /* Page Header */
  --header-bg-color: var(--bg51-color);
  --header-bg-overlay: var(--white-opacity);
  --header-color: var(--font-color);
  --header-link-color: var(--body-link-color);
  --header-link-hover-color: var(--body-link-hover-color);
  --header-service-height: var(--logo-height, calc(var(--base-size, 16px) * 3));
  --mobile-logo-height: calc(var(--base-size, 16px) * 3);
  --nav-header-height: calc(var(--base-size, 16px) * 2);
  --header-height: calc(var(--header-service-height) + var(--nav-header-height));
  --header-height-fixed: 72px;

  --header-button-color: var(--white);
  --header-button-hover-color: var(--white);
  --header-button-bg: var(--body-link-color);
  --header-button-hover-bg: var(--body-link-hover-color);
  --header-button-border: var(--body-link-color);
  --header-button-hover-border: var(--body-link-hover-color);

  /* Page Footers */
  --footer-bg: var(--bg50);
  --footer-color: var(--bg50-color);
  --footer-link-color: var(--bg50-color);
  --footer-link-hover-color: var(--body-link-invers-hover-color);

  --footer2-bg: var(--bg50);
  --footer2-color: var(--bg50-color);
  --footer2-link-color: var(--body-link-invers-color);
  --footer2-link-hover-color: var(--body-link-invers-hover-color);

  /* Fonts sizes depending on display size */
  --base-html-size-small: var(--base-html-size);
  --base-html-size-medium: calc(var(--base-html-size) * 1.125);
  --base-html-size-large: calc(var(--base-html-size) * 1.1875);

  /* Font sizes - https://type-scale.com/ Perfect Fourth, 1.333 */
  --font-size1: 2.1rem; /* h1 */
  --line-height1: var(--base-size-double);
  --font-size2: 1.6rem; /* h2 */
  --line-height2: calc(var(--base-size) * 1.5);
  --font-size3: 1.333rem; /* h3 */
  --line-height3: calc(var(--base-size) * 1.25);
  --font-size4: 1.125rem; /* h4 */
  --font-size5: var(--body-font-size); /* h5 */
  --font-size-small: calc(var(--body-font-size) * 0.8);
  --line-height-small: calc(var(--body-font-size) * 0.8);

  /* Headers h1-h5 */
  --header-font-color: var(--font-color-light);

  /* Buttons primary */
  --button-color: var(--bg51-color);
  --button-hover-color: var(--bg51-color);
  --button-bg: var(--bg54);
  --button-border: var(--bg54);
  --button-hover-bg: var(--bg51);
  --button-hover-border: var(--bg51);

  /* Buttons secondary */
  --button2-color: var(--bg51-color);
  --button2-hover-color: var(--bg51-color);
  --button2-bg: var(--bg51);
  --button2-border: var(--bg51);
  --button2-hover-bg: var(--bg54);
  --button2-hover-border: var(--bg54);

  /* Tables: border color and cell borders.*/
  --table-border-color: var(--gray3);
  --table-hover-color: var(--font-color);
  --table-hover-bg: var(--bg50);
  --table-header-bg: var(--bg50);
  --table-header-color: var(--font-color);
  --stripedblock-bg: var(--bg50);

  /* Default Border */
  --border-color: var(--gray3);

  /* Image Border Option for Editors*/
  --image-border-color: var(--border-color);
  --image-border-width: var(--border-width);

  /* Layout Option for Editors*/
  --layout-100-bg: var(--bg50);

  /* Toggle Content Header Frame Option */
  --toggle-bg: var(--bg50);

  /* Paddíng for all boxes with background */
  --padding-boxes: var(--base-size) var(--gutter);

  --box-shadow: rgba(0, 0, 0, 0.2);
	
	
   --gap-4boxen: 10px;
   --gap-5boxen: 10px;
	
   --icon-width: 250px;
	

  /***** Content Element: Hero Text over image options *****/
  --hero-text-light: var(--white);
  --hero-text-dark: var(--black);
  --hero-text-bg-light: rgba(255, 255, 255, 0.9);
  --hero-text-bg-dark: rgba(0, 0, 0, 0.9);
  --hero-text-shadow-dark: 1px 1px 1px var(--black);
  --hero-text-shadow-light: 1px 1px 1px var(--white);

  /***** Navigation smartmenu *****/

  /* Navigation background over whole browser width */
  --menu-bg-100vw: var(--bg50, #eee);

  --menu-font-family: var(--font-family-normal);

  /*Mobile Items separators*/
  --collapsible-separators-color: rgba(0, 0, 0, 0.05);
  /*Toggle button (sub menu indicators)*/
  --collapsible-toggle-bg: var(--white-opacity);
  --collapsible-submenu-bg: rgba(var(--gray4), 0.1);

  /* 1.level menu */
  --menu-link-color: var(--bg50-color);
  --menu-link-hover-color: var(--color1);
  --menu-bg: var(--bg50);
  --menu-hover-bg: var(--bg50);
  --menu-current-bg: var(--bg50);
  --menu-arrow-color: var(--bg50-color);

  /* 2.level menu */
  --submenu-link-color: var(--bg50-color);
  --submenu-link-hover-color: var(--color1);
  --submenu-current-color: var(--color1);
  --submenu-current-hover-color: var(--color1);	
  --submenu-bg: var(--bg50);
  --submenu-hover-bg: var(--bg50);
  --submenu-current-bg: var(--bg50);
  --submenu-arrow-color: var(--bg50-color);
  --desktop-submenu-border-color: var(--border-color);

  /* hamburger icon for mobile menu */
  --menu-icon-button: var(--bg50-color);

}
