@charset 'UTF-8';
/*
Theme Name: Hexaly
Theme URI: https://wwww.hexaly.com/
Author: Hexaly
Author URI: https://www.hexaly.com/
Description: Main theme for the Hexaly website.
Requires at least: 5.3
Tested up to: 5.7
Requires PHP: 7.1
Version: 1.0.78
License: Proprietary. Copyright Hexaly all rights reserved
Text Domain: hexaly
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready

Hexaly WordPress Theme, (C) 2024 Hexaly
All rights reserved
*/

:root {
	/* Colors */
	--color-white: #fff;
	--color-dark-white: #eee;
	--color-white--20: #ffffff33;
	--color-white--30: #ffffff4d;
	--color-black--20: #00000033;
	--color-black--30: #0000004d;
	--color-black--40: #00000066;
	--color-grey: #f4f4f4;
	--color-dark-grey: #ddd;
	--color-orange: #ec691e;
	--color-orange--20: #ec691e33;
	--color-light-orange: #ff8a00;
	--color-dark-orange: #e35a2e;
	--color-darker-orange: #e03f0c;
	--color-dark-blue: #183656;
	--color-blue: #344e6b;
	--color-light-blue: #d9e2ec;
	--color-very-light-blue: #f2f6f8;
	--color-blue--20: #01010233;
	--color-blue--90: #344e6be6;
	--color-green: #447821;
	--color-light-green: #d9ffbf;
	--color-red: #ff2a2a;
	--color-light-red: #ffdede;

	/* Color theme */
	--vibrant-background-color: var(--color-darker-orange);
	--vibrant-background-accent-color: var(--color-dark-orange);
	--vibrant-color: var(--color-orange);
	--vibrant-accent-color: var(--color-light-orange);
	--base-color: var(--color-dark-blue);
	--base-accent-color: var(--color-blue);
	--success-color: var(--color-green);
	--success-accent-color: var(--color-light-green);
	--error-color: var(--color-red);
	--error-accent-color: var(--color-light-red);

	/* Base font size */
	--main-font-size: 16px;
	--quiet-font-size: 14px;

	/* Page sizes */
	--base-page-size: 1180px;
	--tab-page-size: 1023px;
	--mob-page-size: 599px;
	--post-size: 48rem;

	/* Menu properties */
	--primary-menu-font-size: 15px;
	--primary-menu-color: var(--color-white);
	--primary-sub-menu-color: var(--base-accent-color);
	--primary-sub-menu-header-font-size: 14px;
	--primary-sub-menu-font-size: 14px;
	--primary-menu-elevation: 0 0 30px 0 rgb(0 0 0 / 20%);
	--primary-menu-line-height: 2.2;
	--primary-menu-font-family: 'Rubik', sans-serif;
	--footer-menu-font-size: 16px;
	--footer-menu-font-family: 'Rubik', sans-serif;

	/* Account menu properties */
	--account-menu-line-height: 2.2;
	--account-highlight-background-color: var(--color-darker-orange);
	--account-menu-font-size: 15px;
	--acount-menu-font-family: 'Rubik', sans-serif;
	--account-menu-color: var(--base-accent-color);
	--account-dashes-gap: 2.5rem;
	--account-dashes-width: 2px;

	/* Title properties */
	--title-font-size: 2em;
	--small-title-font-size: 1.4em;
	--title-font-family: 'Rubik', sans-serif;
	--title-color: var(--base-accent-color);
	--alternate-title-color: var(--vibrant-color);
	--title-margin-top: 1em;
	--title-margin-bottom: .5em;


	/* Text and paragraph properties */
	--text-font-size: var(--main-font-size);
	--text-font-family: 'Manrope', sans-serif;
	--text-color: var(--base-color);
	--text-line-height: 1.6;
	--text-margin: 1.2em;
	--subheadline-color: var(--vibrant-color);

	/* Link properties */
	--link-color: var(--color-darker-orange);
	--link-hover-color: var(--color-light-orange);

	/* Form properties */
	--form-background-color: #f8f8f8;
	--form-border-color: #ddd;
	--form-text-color: #444;
	--form-disabled-text-color: #999;

	/* Block properties */
	--block-slope-vertical-padding: 4rem;
	--block-vertical-padding: 5rem;
	--block-slope: 4deg;
	--block-margin: auto;
	--block-dashes-gap: 2rem;
	--block-dashes-width: 2px;

	/* Buton properties */
	--button-border-width: 2px;
	--button-icon-font-size: 1rem;
	--button-background-color: var(--vibrant-color);
	--button-background-color-hover: var(--vibrant-accent-color);
	--button-border-color: var(--button-background-color);
	--button-border-color-hover: var(--button-background-color-hover);
	--button-text-color: var(--color-white);
	--button-text-color-hover: var(--color-white);
	--button-transition: all 100ms ease-in-out;
	--button-icon-color: var(--button-text-color);
	--button-icon-color-hover: var(--button-text-color-hover);

	/* Icon properties */
	--icon-font-family: 'FontAwesome';

	/* Other (should be reorganized) */
	--spread-elevation: 0 0 30px rgb(0 0 0 / 5%);
	--light-elevation: 0 0 20px 0 rgb(0 0 0 / 10%);
	--global-elevation: 0 0 10px 0 rgb(0 0 0 / 30%);
	--accordion-margin: 1.5rem;
	--accordion-border-color: #ddd;
}

:root {
	font-size: var(--main-font-size);
	font-family: var(--text-font-family);
}

@font-face {
	font-family: 'Rubik';
	src: url('assets/fonts/Rubik-Regular.ttf') format('truetype');
	font-display: swap;
}

@font-face {
	font-family: 'Rubik';
	font-weight: 300;
	src: url('assets/fonts/Rubik-Light.ttf') format('truetype');
	font-display: swap;
}

@font-face {
	font-family: 'Rubik';
	font-weight: 500;
	src: url('assets/fonts/Rubik-Medium.ttf') format('truetype');
	font-display: swap;
}

@font-face {
	font-family: 'Rubik';
	font-weight: 700;
	src: url('assets/fonts/Rubik-Bold.ttf') format('truetype');
	font-display: swap;
}

@font-face {
	font-family: 'Manrope';
	src: url('assets/fonts/Manrope-Regular.ttf') format('truetype');
	font-display: swap;
}

@font-face {
	font-family: 'FontAwesome';
	font-weight: 900;
	/*
	Generated with the following command line:
	pyftsubset fa-solid-900.ttf --unicodes=f002,f00c,f058,f060,f061,f177,f178,f00d,f30b,f007,f0eb,f107,f054,f08e,f2bd,f104,f105,f111 --output-file=fa-light-900.ttf
	*/
	src: url('assets/fonts/fontawesome/webfonts/fa-light-900.ttf?v=1.0');
}

* {
	box-sizing: border-box;
}

body {
	padding: 0;
	margin: 0;
}

.screen-reader-text {
	display: none;
}

.has-orange-color {
	color: var(--color-orange);
}

.has-dark-orange-color {
	color: var(--color-darker-orange);
}

.has-light-orange-color {
	color: var(--color-light-orange);
}

.has-lighter-orange-color {
	color: var(--color-orange--20);
}

.has-blue-color {
	color: var(--color-blue);
}

.has-dark-blue-color {
	color: var(--color-dark-blue);
}

.has-light-blue-color {
	color: var(--color-light-blue);
}

p {
	font-family: var(--text-font-family);
	font-size: var(--text-font-size);
	line-height: var(--text-line-height);
	color: var(--text-color);
	padding: 0;
	margin: var(--text-margin) 0;
}

p.no-margin,
h1.no-margin,
h2.no-margin,
h3.no-margin,
h4.no-margin,
h5.no-margin,
h6.no-margin {
	margin: 0;
}

mark {
	background: transparent;
}

ul,
ol,
li {
	margin: 0;
	padding: 0;
	font-family: var(--title-font-family);
	color: var(--text-color);
}

article li,
.is-root-container li {
	margin: 0;
	padding: 0;
	font-family: var(--text-font-family);
	line-height: var(--text-line-height);
	color: var(--text-color);
	font-size: var(--text-font-size);
}

article ul,
.is-root-container ul,
article ol,
.is-root-container ol {
	margin: var(--text-margin) 0;
	padding-left: 1.5em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	padding: 0;
	font-family: var(--title-font-family);
	color: var(--title-color);
	line-height: 1.1;
	margin-top: var(--title-margin-top);
	margin-bottom: var(--title-margin-bottom);
}

h1+h1,
h1+h2,
h1+h3,
h1+h4,
h1+h5,
h1+h6,
h2+h1,
h2+h2,
h2+h3,
h2+h4,
h2+h5,
h2+h6,
h3+h1,
h3+h2,
h3+h3,
h3+h4,
h3+h5,
h3+h6,
h4+h1,
h4+h2,
h4+h3,
h4+h4,
h4+h5,
h4+h6,
h5+h1,
h5+h2,
h5+h3,
h5+h4,
h5+h5,
h5+h6,
h6+h1,
h6+h2,
h6+h3,
h6+h4,
h6+h5,
h6+h6 {
	margin-top: 1em;
}

h1 {
	font-size: calc(var(--title-font-size) * 1.4);
	font-weight: 300;
	margin-top: 0;
}

h2 {
	font-size: var(--title-font-size);
	font-weight: 300;
}

h3 {
	font-size: calc(var(--title-font-size) * 0.7);
	font-weight: 300;
}

h4 {
	color: var(--alternate-title-color);
	font-weight: 500;
	font-size: calc(var(--title-font-size) * 0.6);
}

h5 {
	color: var(--alternate-title-color);
	font-weight: 500;
	font-size: calc(var(--title-font-size) * 0.5);
}

h1.is-style-small-caps,
h2.is-style-small-caps,
h3.is-style-small-caps,
h4.is-style-small-caps,
h5.is-style-small-caps,
h6.is-style-small-caps {
	font-variant: all-small-caps;
	font-weight: 500;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
	margin-top: 0;
}

p.is-style-headline {
	font-size: 1.6rem;
}

@media (max-width: 960px) {
	p.is-style-headline br {
		display: none;
	}
}

p.is-style-subheadline {
	color: var(--subheadline-color);
	margin: 0;
	font-weight: 500;
	text-transform: uppercase;
	font-family: var(--title-font-family);
	font-size: var(--text-font-size);
}

p.is-style-subheadline+h1,
p.is-style-subheadline+h2,
p.is-style-subheadline+h3,
p.is-style-subheadline+h4,
p.is-style-subheadline+h5,
p.is-style-subheadline+h6 {
	margin-top: 0;
	padding: 0;
}

p.has-extra-small-font-size {
	font-size: 0.5rem;
}

p.has-small-font-size {
	font-size: 0.875rem;
}

p.has-normal-font-size {
	font-size: 1rem;
}

p.has-large-font-size {
	font-size: 1.8rem;
}

p.has-extra-large-font-size {
	font-size: 2.5rem;
}

p.has-huge-font-size {
	font-size: 6rem;
}

p.has-gigantic-font-size {
	font-size: 12rem;
}

a,
a:visited {
	color: var(--link-color);
	text-decoration: none;
}

a:hover {
	color: var(--link-hover-color);
	text-decoration: none;
}

input:not([type=range]):not([type=checkbox])::not([type=radio]) {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.grayscale {
	filter: grayscale(1);
}

/* For editor */
.block-lab-control {
	--text-color: var(--base-color);
}



/* Featured post */
.wp-block-post-featured {
	padding: 1rem;
	border-radius: 0.5rem;
	background: var(--color-white);
	box-shadow: var(--spread-elevation);
}

*+.wp-block-post-featured {
	margin-top: 2rem;
}

.wp-block-post-featured .col-lg-6 {
	padding: 1em;
}

.wp-block-post-featured img {
	max-width: 100%;
	border-radius: 0.5rem;
}

.wp-block-post-featured h2 {
	margin-top: 0;
}

/* Last posts */
.wp-block-latest-posts {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 0 -1rem;
}

.wp-block-latest-posts li {
	min-width: 18rem;
	margin: 1rem;
	box-shadow: rgba(0, 0, 0, 0.05) 0px 5px 15px;
	border-radius: 10px;
	flex: 1 1 0px;
	background: var(--color-white);
	padding-bottom: 5rem;
	position: relative;
}

.wp-block-latest-posts__featured-image a {
	display: block;
}

.wp-block-latest-posts__featured-image img {
	height: 15rem;
	object-fit: cover;
	width: 100%;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.wp-block-latest-posts li>a {
	text-transform: uppercase;
	font-size: var(--quiet-font-size);
	font-family: var(--title-font-family);
	font-weight: bold;
	text-decoration: none;
	color: var(--base-color);
	text-align: center;
	display: block;
	margin: 2.5rem 2rem 0 2rem;
}

.wp-block-latest-posts .wp-block-latest-posts__post-excerpt {
	font-family: var(--title-font-family);
	line-height: var(--text-line-height);
	margin: 1.5rem 2rem;
	color: var(--base-color);
	font-size: var(--quiet-font-size);
}


/* Custom pages */
.inner-page {
	--title-margin-top: 1.8em;
	--title-margin-bottom: .5em;
	--title-font-size: 1.8em;
}

article.post .wp-block-image {
	margin: calc(2 * var(--text-margin)) 0;
}

.wp-block-image img {
	height: auto;
}

/* To change */
.entry-footer .edit-link {
	display: none;
}

/** Tables (benchmarks) */

.benchmark {
	border-collapse: separate;
	border-spacing: 3px;
	table-layout: fixed;
	width: 100%;
	margin: calc(2 * var(--text-margin)) 0;
	font-size: var(--quiet-font-size);
	--text-size: var(--quiet-font-size);
}

.benchmark caption {
	caption-side: bottom;
	margin: 0.5em 0 1em 0;
}

.benchmark td {
	border: none;
	padding: 0.5em;
	text-align: right;
}

.benchmark th {
	border: none;
	padding: 0.5em;
	text-align: center;
}

.benchmark .tg-super-green {
	background: #086c08;
	color: white;
}

.benchmark .tg-green {
	background-color: #92d050;
}

.benchmark .tg-yellow {
	background-color: #ffd966;
}

.benchmark .tg-orange {
	background-color: #ff9f5b;
}

.benchmark .tg-red {
	background-color: #ff5050;
}

.benchmark .tg-gray {
	background-color: #eeeeee;
}

.benchmark .tg-gray-light {
	background-color: #eeeeee7d;
}

.benchmark .tg-gray-dark {
	background-color: #d1d1d1;
}

.benchmark .tg-center {
	text-align: center;
	vertical-align: middle;
}

.benchmark .tg-left {
	text-align: left;
	vertical-align: middle;
}

.benchmark .tg-right {
	text-align: right;
	vertical-align: middle;
}

.benchmark .tg-round-top-left {
	border-top-left-radius: .5rem;
}

.benchmark .tg-round-top-right {
	border-top-right-radius: .5rem;
}

.benchmark .tg-round-bottom-left {
	border-bottom-left-radius: .5rem;
}

.benchmark .tg-round-bottom-right {
	border-bottom-right-radius: .5rem;
}

.table-middle {
	line-height: 1;
	vertical-align: middle;
}

@media (max-width: 1280px) {
	:root {
		--block-dashes-gap: 0px;
		--block-dashes-width: 0px;
		--block-margin: 2rem;
		--base-page-size: auto;
	}
}

@media (max-width: 1024px) {
	:root {
		--block-margin: 1rem;
	}

	.wp-block-columns.stack-tab {
		flex-wrap: wrap;
	}

	.wp-block-columns.stack-tab>.wp-block-column {
		flex-basis: 100% !important;
		margin-top: calc(var(--block-vertical-padding)/2);
	}

	.wp-block-columns.stack-tab>.wp-block-column:not(:first-child) {
		margin-left: 0;
	}

	.wp-block-columns.stack-tab>.wp-block-column figure.alignright,
	.wp-block-columns.stack-tab>.wp-block-column figure.aligncenter,
	.wp-block-columns.stack-tab>.wp-block-column figure.alignleft {
		float: none;
		margin: auto;
	}
}

@media (max-width: 600px) {
	.wp-block-columns.stack-mob {
		flex-wrap: wrap;
		margin-top: calc(var(--block-vertical-padding)/3);
	}

	.wp-block-columns.stack-mob .wp-block-column {
		flex-basis: 100% !important;
	}

	.wp-block-columns.stack-mob .wp-block-column:not(:first-child) {
		margin-left: 0;
	}

	.wp-block-columns.stack-mob figure.alignright,
	.wp-block-columns.stack-mob figure.aligncenter,
	.wp-block-columns.stack-mob figure.alignleft {
		float: none;
		margin: auto;
	}

	.wp-block-latest-posts__featured-image img {
		display: none;
	}
}

@media (min-width: 600px) and (max-width: 1024px) {
	.hide-tab {
		display: none;
	}
}

@media (max-width: 600px) {
	.hide-mob {
		display: none;
	}
}


/* Grid system */
.row {
	--row-gap: 0;
	--col-gap: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-top: calc(-1 * var(--row-gap));
	margin-bottom: calc(-1 * var(--row-gap));
	margin-left: calc(-1 * var(--col-gap));
	margin-right: calc(-1 * var(--col-gap));
}

.row>* {
	margin-top: var(--row-gap);
	margin-bottom: var(--row-gap);
	padding-right: var(--col-gap);
	padding-left: var(--col-gap);
}

.row .col-sd-auto,
.row .col-md-auto,
.row .col-lg-auto {
	flex: 0 0 auto;
	width: auto;
}

.row .col,
.row .col-sd,
.row .col-md,
.row .col-lg {
	flex: 1 0 0%;
}

.row .col-sd-1,
.row .col-md-1,
.row .col-lg-1 {
	flex: 0 0 auto;
	width: 8.333333%;
}

.row .col-sd-2,
.row .col-md-2,
.row .col-lg-2 {
	flex: 0 0 auto;
	width: 16.666667%;
}

.row .col-sd-3,
.row .col-md-3,
.row .col-lg-3 {
	flex: 0 0 auto;
	width: 25%;
}

.row .col-sd-4,
.row .col-md-4,
.row .col-lg-4 {
	flex: 0 0 auto;
	width: 33.333333%;
}

.row .col-sd-5,
.row .col-md-5,
.row .col-lg-5 {
	flex: 0 0 auto;
	width: 41.666667%;
}

.row .col-sd-6,
.row .col-md-6,
.row .col-lg-6 {
	flex: 0 0 auto;
	width: 50%;
}

.row .col-sd-7,
.row .col-md-7,
.row .col-lg-7 {
	flex: 0 0 auto;
	width: 58.333333%;
}

.row .col-sd-8,
.row .col-md-8,
.row .col-lg-8 {
	flex: 0 0 auto;
	width: 66.666667%;
}

.row .col-sd-9,
.row .col-md-9,
.row .col-lg-9 {
	flex: 0 0 auto;
	width: 75%;
}

.row .col-sd-10,
.row .col-md-10,
.row .col-lg-10 {
	flex: 0 0 auto;
	width: 83.333333%;
}

.row .col-sd-11,
.row .col-md-11,
.row .col-lg-11 {
	flex: 0 0 auto;
	width: 91.666667%;
}

.row .col-sd-12,
.row .col-md-12,
.row .col-lg-12 {
	flex: 0 0 auto;
	width: 100%;
}

.row .col-sd-offset-0,
.row .col-md-offset-0,
.row .col-lg-offset-0 {
	margin-left: 0;
}

.row .col-sd-offset-1,
.row .col-md-offset-1,
.row .col-lg-offset-1 {
	margin-left: 8.33333333%;
}

.row .col-sd-offset-2,
.row .col-md-offset-2,
.row .col-lg-offset-2 {
	margin-left: 16.66666667%;
}

.row .col-sd-offset-3,
.row .col-md-offset-3,
.row .col-lg-offset-3 {
	margin-left: 25%;
}

.row .col-sd-offset-4,
.row .col-md-offset-4,
.row .col-lg-offset-4 {
	margin-left: 33.33333333%;
}

.row .col-sd-offset-5,
.row .col-md-offset-5,
.row .col-lg-offset-5 {
	margin-left: 41.66666667%;
}

.row .col-sd-offset-6,
.row .col-md-offset-6,
.row .col-lg-offset-6 {
	margin-left: 50%;
}

.row .col-sd-offset-7,
.row .col-md-offset-7,
.row .col-lg-offset-7 {
	margin-left: 58.33333333%;
}

.row .col-sd-offset-8,
.row .col-md-offset-8,
.row .col-lg-offset-8 {
	margin-left: 66.66666667%;
}

.row .col-sd-offset-9,
.row .col-md-offset-9,
.row .col-lg-offset-9 {
	margin-left: 75%;
}

.row .col-sd-offset-10,
.row .col-md-offset-10,
.row .col-lg-offset-10 {
	margin-left: 83.33333333%;
}

.row .col-sd-offset-11,
.row .col-md-offset-11,
.row .col-lg-offset-11 {
	margin-left: 91.66666667%;
}

.row .col-sd-offset-12,
.row .col-md-offset-12,
.row .col-lg-offset-12 {
	margin-left: 100%;
}


@media (max-width: 1024px) {

	.row .col-lg-1,
	.row .col-lg-2,
	.row .col-lg-3,
	.row .col-lg-4,
	.row .col-lg-5,
	.row .col-lg-6,
	.row .col-lg-7,
	.row .col-lg-8,
	.row .col-lg-9,
	.row .col-lg-10,
	.row .col-lg-11,
	.row .col-lg-12 {
		flex-basis: 100%;
		max-width: 100%;
		width: 100%;
	}

	.row .col-lg-offset-offset-1,
	.row .col-lg-offset-2,
	.row .col-lg-offset-3,
	.row .col-lg-offset-4,
	.row .col-lg-offset-5,
	.row .col-lg-offset-6,
	.row .col-lg-offset-offset-7,
	.row .col-lg-offset-8,
	.row .col-lg-offset-9,
	.row .col-lg-offset-10,
	.row .col-lg-offset-11,
	.row .col-lg-offset-12 {
		margin-left: 0;
	}
}

@media (max-width: 600px) {

	.row .col-md-1,
	.row .col-md-2,
	.row .col-md-3,
	.row .col-md-4,
	.row .col-md-5,
	.row .col-md-6,
	.row .col-md-7,
	.row .col-md-8,
	.row .col-md-9,
	.row .col-md-10,
	.row .col-md-11,
	.row .col-md-12 {
		flex-basis: 100%;
		max-width: 100%;
		width: 100%;
	}

	.row .col-md-offset-offset-1,
	.row .col-md-offset-2,
	.row .col-md-offset-3,
	.row .col-md-offset-4,
	.row .col-md-offset-5,
	.row .col-md-offset-6,
	.row .col-md-offset-offset-7,
	.row .col-md-offset-8,
	.row .col-md-offset-9,
	.row .col-md-offset-10,
	.row .col-md-offset-11,
	.row .col-md-offset-12 {
		margin-left: 0;
	}
}

.center-block-columns {
	justify-content: center;
}