:root{
/*******************/
/* Layout **********/
/*******************/
--container-fluid: 4096px; /* 2048px; */
--container: calc(12 * var(--container-grid-column-gap) - var(--container-grid-gap)); /* 1540px */
--container-grid-column: 110px; /* 110px */
--container-grid-gap: 20px;
--container-grid-column-gap: calc(var(--container-grid-column, 110px) + var(--container-grid-gap, 20px));
--col-12: calc(12 * var(--container-grid-column-gap) - var(--container-grid-gap)); /* 1540px */
--col-11: calc(11 * var(--container-grid-column-gap) - var(--container-grid-gap)); /* 1410px */
--col-10: calc(10 * var(--container-grid-column-gap) - var(--container-grid-gap)); /* 1280px */
--col-9: calc( 9 * var(--container-grid-column-gap) - var(--container-grid-gap)); /* 1150px */
--col-8: calc( 8 * var(--container-grid-column-gap) - var(--container-grid-gap)); /* 1020px */
--col-7: calc( 7 * var(--container-grid-column-gap) - var(--container-grid-gap)); /* 890px */
--col-6: calc( 6 * var(--container-grid-column-gap) - var(--container-grid-gap)); /* 760px */
--col-5: calc( 5 * var(--container-grid-column-gap) - var(--container-grid-gap)); /* 630px */
--col-4: calc( 4 * var(--container-grid-column-gap) - var(--container-grid-gap)); /* 500px */
--col-3: calc( 3 * var(--container-grid-column-gap) - var(--container-grid-gap)); /* 370px */
--col-2: calc( 2 * var(--container-grid-column-gap) - var(--container-grid-gap)); /* 240px */
--col-1: calc( 1 * var(--container-grid-column-gap) - var(--container-grid-gap)); /* 110px */
/* Paddings */
--padding: 1.25rem; /* Scale: 20px */
--padding-container-block: calc(var(--padding) * 4.00); /* 80px */
--padding-container-inline: calc(var(--padding) * 2.50); /* 50px */
--padding-container-block-05x: calc(var(--padding-container-block) * 0.50); /* 30px */
--padding-container-block-2x: calc(var(--padding-container-block) * 2.00); /* 160px */
--padding-button: var(--gap-400) var(--gap-500);
--padding-input: var(--gap-400) var(--gap-600);
/* --padding-button-small: var(--gap-200) var(--gap-500); */
/* --padding-pill: var(--gap-100) var(--gap-400); */
/* Gap */
--gap: 1rem; /* Scale: 16px */
--gap-1000: calc(var(--gap) * 6.00); /* 96px */
--gap-900: calc(var(--gap) * 5.00); /* 80px */
--gap-800: calc(var(--gap) * 4.00); /* 64px */
--gap-700: calc(var(--gap) * 3.00); /* 48px */
--gap-600: calc(var(--gap) * 2.00); /* 32px */
--gap-500: calc(var(--gap) * 1.50); /* 24px */
--gap-400: calc(var(--gap) * 1.00); /* 16px */
--gap-300: calc(var(--gap) * 0.75); /* 12px */
--gap-200: calc(var(--gap) * 0.50); /* 8px */
--gap-100: calc(var(--gap) * 0.25); /* 4px */
--gap-global: calc(var(--gutter) * 6.00); /* 120px */
--gap-flow: calc(var(--gap-400) * 1.00); /* 16px */
--gap-form: calc(var(--gap-600) * 1.00); /* 20px */
--gap-header: calc(var(--gutter) * 2.00); /* 40px */
/* Gutter */
--gutter: 20px;
--gutter-900: calc(var(--gutter) * 3.50); /* 70px */
--gutter-800: calc(var(--gutter) * 3.00); /* 60px */
--gutter-700: calc(var(--gutter) * 2.50); /* 50px */
--gutter-600: calc(var(--gutter) * 2.00); /* 40px */
--gutter-500: calc(var(--gutter) * 1.50); /* 30px */
--gutter-400: calc(var(--gutter) * 1.00); /* 20px */
--gutter-300: calc(var(--gutter) * 0.75); /* 15px */
--gutter-200: calc(var(--gutter) * 0.50); /* 10px */
--gutter-100: calc(var(--gutter) * 0.25); /* 5px */
/* Border Radius */
--br: 8px;
--br-900: calc(var(--br) * 5.00); /* 40px */
--br-800: calc(var(--br) * 4.00); /* 32px */
--br-700: calc(var(--br) * 3.00); /* 24px */
--br-600: calc(var(--br) * 2.00); /* 16px */
--br-500: calc(var(--br) * 1.50); /* 12px */
--br-400: calc(var(--br) * 1.00); /* 8px */
--br-300: calc(var(--br) * 0.75); /* 6px */
--br-200: calc(var(--br) * 0.50); /* 4px */
--br-100: calc(var(--br) * 0.25); /* 2px */
--br-global: var(--br-400);
--br-elements: var(--br-800);
/* zIndex */
--z-top: 9010;
--z-header-front: 5011;
--z-header: 5010;
--z-header-behind: 5009;
--z-header-behind-behind: 5008;
--z-aside-front: 2511;
--z-aside: 2510;
--z-aside-behind: 2509;
--z-select: 2000;
/* Height */
--height-header: 104px;
--height-header--sticky: 104px;
--height-logo: 82px;
--height-logo--sticky: 82px;
--height-hero-default: 200px;
/* --height-hero-normal: 650px; */
--height-hero-jumbo: min(100svh, 991px);
--height-form-items: 60px;
--height-sticky-top: calc(var(--height-header--sticky));
--height-sticky-top-gap: calc(var(--height-header--sticky) + var(--gutter));
/* Width */
/* Sizes */
--size-200: 64px;
--size-100: 32px;
/*******************/
/* Misc ************/
/*******************/
/* Images */
--image-aspect-ratio-lp: 3/2; /* 1.500 */
--image-aspect-ratio-sq: 3/3; /* 1.000 */
--image-aspect-ratio-pr: 3/4; /* 0.667 */
--image-overlay: var(--color-black-20);
/* Border */
--border: 1px solid var(--color-border);
/* Box Shadow */
--box-shadow: 0px 12px 32px 0px var(--color-black-05);
/* Transitions */
--trans-duration: 250ms;
--trans-duration-600: calc(2.00 * var(--trans-duration));
--trans-duration-500: calc(1.50 * var(--trans-duration));
--trans-duration-400: calc(1.00 * var(--trans-duration));
--trans-duration-300: calc(0.75 * var(--trans-duration));
--trans: all var(--trans-duration) ease-in-out;
--trans-600: all var(--trans-duration-600) ease-in-out;
--trans-500: all var(--trans-duration-500) ease-in-out;
--trans-300: all var(--trans-duration-300) ease-in-out;
--trans-image: all var(--trans-duration-500) cubic-bezier(0,0,.50,1);
--transform-image: scale(1.05);
--transform-image-alt: scale(0.90);
--transform-select-arrow: rotate(180deg);
/* Animations */
--animation-spinner: spinner 1.5s forwards linear infinite;
/* Global Icons */
--icon-checkbox: url('data:image/svg+xml,');
--icon-checkbox--white: url('data:image/svg+xml,');
--icon-select: url('data:image/svg+xml,');
--icon-select--white: url('data:image/svg+xml,');
/*******************/
/* Color ***********/
/*******************/
--color-white: #FFFFFFFF; /* 100% Opacity */
--color-white-90: #FFFFFFE6; /* 90% Opacity */
--color-white-80: #FFFFFFCC; /* 80% Opacity */
--color-white-70: #FFFFFFB3; /* 70% Opacity */
--color-white-60: #FFFFFF99; /* 60% Opacity */
--color-white-50: #FFFFFF80; /* 50% Opacity */
--color-white-40: #FFFFFF66; /* 40% Opacity */
--color-white-30: #FFFFFF4D; /* 30% Opacity */
--color-white-20: #FFFFFF33; /* 20% Opacity */
--color-white-10: #FFFFFF1A; /* 10% Opacity */
--color-white-05: #FFFFFF0D; /* 5% Opacity */
--color-black: #000000FF; /* 100% Opacity */
--color-black-90: #000000E6; /* 90% Opacity */
--color-black-80: #000000CC; /* 80% Opacity */
--color-black-70: #000000B3; /* 70% Opacity */
--color-black-60: #00000099; /* 60% Opacity */
--color-black-50: #00000080; /* 50% Opacity */
--color-black-40: #00000066; /* 40% Opacity */
--color-black-30: #0000004D; /* 30% Opacity */
--color-black-20: #00000033; /* 20% Opacity */
--color-black-10: #0000001A; /* 10% Opacity */
--color-black-05: #0000000D; /* 5% Opacity */
/* Init Colors */
--init-primary-400: #333333;
--init-primary-400-hsl: 0, 0%, 20%; /* #333333 */
--init-secondary-400: #4096DA;
--init-secondary-400-hsl: 206, 68%, 55%; /* #4096DA */
--init-secondary-410-hsl: 206, 68%, 50%; /* #69AEE2 */
--init-accent-400: #231F58;
--init-accent-400-hsl: 244, 48%, 23%; /* #231F58 */
--init-accent-410-hsl: 244, 48%, 33%; /* #312C7D */
--init-text-400: #454545;
--init-text-400-hsl: 0, 0%, 27%; /* #454545 */
--init-grey-500: #7C7C7C;
--init-grey-400: #A9A9A9;
--init-grey-300: #CCCCCC;
--init-grey-200: #EDEFF7;
--init-grey-100: #F6F7FB;
--init-background: #F6F7FB;
--init-background-alt: var(--init-grey-200, #EDE9E4);
/* Asigned Colors */
--color-primary: var(--init-primary-400);
--color-secondary: var(--init-secondary-400);
--color-heading: var(--init-primary-400);
--color-text: var(--init-text-400);
--color-btn: var(--color-white);
--color-accent: hsla(var(--init-accent-400-hsl), 1.0);
--hover-accent: hsla(var(--init-accent-410-hsl), 1.0);
--color-heading-white: var(--color-white);
--color-text-white: var(--color-white);
--color-text-grey: var(--init-grey-400, #A9A9A9);
--color-text-grey-500: var(--init-grey-500, #7C7C7C);
--color-text-grey-200: var(--init-grey-200, #EDEFF7);
--color-background: var(--init-background);
--color-header: var(--color-heading);
--color-label: var(--color-heading);
--color-input: var(--color-text);
--color-placeholder: var(--color-text-grey);
--color-border: var(--init-grey-300);
/*******************/
/* Typography ******/
/*******************/
--ff-700: "Ubuntu-Bold", sans-serif;
--ff-400: "Ubuntu-Regular", sans-serif;
--lh-900: 1.90;
--lh-800: 1.80;
--lh-700: 1.70;
--lh-600: 1.60;
--lh-500: 1.50;
--lh-400: 1.40;
--lh-300: 1.30;
--lh-200: 1.20;
--lh-100: 1.10;
--ls-300: 0.30em;
--ls-200: 0.20em;
--ls-100: 0.10em;
--fs-h-900: min(6.0vw, 3.000rem); /* Heading 48px */
--fs-h-800: min(5.5vw, 2.500rem); /* Heading 40px */
--fs-h-700: min(4.5vw, 1.500rem); /* Heading 24px */
--fs-h-600: min(4.0vw, 1.250rem); /* Heading 20px */
/* --fs-h-500: 1.0000rem;
--fs-h-400: 0.8125rem; */
/* --fs-900: 24px; */
/*--fs-800: min(6.0vw, 4.500rem); *//* 72px */
/*--fs-700: min(5.5vw, 2.750rem); *//* 44px */
/*--fs-600: 1.2500rem; *//* 20px */
--fs-500: 1.0000rem; /* 16px */
--fs-400: 0.9375rem; /* 15px */
--fs-300: 0.8750rem; /* 14px */
--fs-200: 0.8125rem; /* 13px */
/*--fs-100: 0.8125rem; *//* 13px */
--fs-h1: var(--fs-h-900);
--fs-h2: var(--fs-h-800);
--fs-h3: var(--fs-h-700);
--fs-h4: var(--fs-h-600);
/* --fs-h5: var(--fs-h-500); */
/* --fs-h6: var(--fs-h-400); */
--fs-text: var(--fs-400); /* Text 15px */
--fs-btn: var(--fs-400); /* Button 15px */
--fs-header: var(--fs-300); /* Header 14px */
--fs-footer: var(--fs-400); /* Footer 14px */
--fs-label: var(--fs-200); /* Label 13px */
--ff-heading: var(--ff-700);
--ff-label: var(--ff-700);
--ff-btn: var(--ff-400);
--ff-text: var(--ff-400);
--lh-heading: var(--lh-200);
--lh-text: var(--lh-600);
--lh-btn: var(--lh-100);
--lh-label: var(--lh-heading, var(--lh-100));
/* --ls-heading: var(--ls-100); */
}
@media(max-width: 1024px){
:root{
/*******************/
/* Layout **********/
/*******************/
/* Paddings */
--padding-container-block: calc(var(--padding) * 3.00); /* 60px */
--padding-container-inline: calc(var(--padding) * 1.50); /* 30px */
--padding-container-block-05x: calc(var(--padding-container-block) * 0.50); /* 30px */
--padding-container-block-2x: calc(var(--padding-container-block) * 1.50); /* 90px */
/* --padding-button: var(--gap-300) var(--gap-500); */
--gap-global: calc(var(--gutter) * 4.00); /* 80px */
/* Height */
--height-header: 80px;
--height-logo: 60px;
--height-header--sticky: var(--height-header);
--height-logo--sticky: var(--height-logo);
--height-hero-default: auto;
/* --height-hero-normal: 300px; */
/* --height-hero-jumbo: min(100svh, 800px); */
/*******************/
/* Typography ~80% */
/*******************/
--fs-h-900: 1.5625rem; /* Heading 25px */
--fs-h-800: 1.3750rem; /* Heading 22px */
--fs-h-700: 1.2500rem; /* Heading 20px */
--fs-h-600: 1.1250rem; /* Heading 18px */
}
}
@media(max-width: 767px){
:root{
/*******************/
/* Layout **********/
/*******************/
/* Paddings */
--padding-container-block: calc(var(--padding) * 4.50); /* 90px */
--padding-container-inline: calc(var(--padding) * 1.00); /* 20px */
--padding-container-block-05x: calc(var(--padding-container-block) * 0.50); /* 25px */
--padding-container-block-2x: calc(var(--padding-container-block) * 1.50); /* 75px */
/*******************/
/* Typography ~60% */
/*******************/
}
}
/*************************************************************************************************************
***** TYPOGRAPHY *********************************************************************************************
***** https://web.dev/articles/font-best-practices ***********************************************************
**************************************************************************************************************/
/* Serif 700 [Heading] */
@font-face {
font-family: 'Ubuntu-Bold';
src: url('../fonts/Ubuntu-Bold.woff2') format('woff2'),
url('../fonts/Ubuntu-Bold.ttf') format('truetype');
}
/* Sans Serif 400 [Text] */
@font-face {
font-family: 'Ubuntu-Regular';
src: url('../fonts/Ubuntu-Regular.woff2') format('woff2'),
url('../fonts/Ubuntu-Regular.ttf') format('truetype');
}
/* :root[lang="el"]{}
@media(max-width: 1024px){:root[lang="el"]{}} */
/* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques */