/*!
Theme Name: IFZA Theme
Theme URI: http://underscores.me/
Author: Emanuele Sanfilippo
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: ifza
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

IFZA Theme is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */


/* SCROLLBAR */
/* ===== Chrome, Edge, Safari ===== */
::-webkit-scrollbar {
    width: 14px;
    height: 14px; /* for horizontal scrollbars */
}

::-webkit-scrollbar-track {
    background: var(--black);
}

::-webkit-scrollbar-thumb {
    background-color: var(--grey-dark);
    border-radius: 10px; /* half of width for perfect round ends */
    border: none; /* removes any space between thumb & track */
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--black); /* same color on hover */
}

/* ===== Firefox ===== */
* {
    scrollbar-width: thin; /* only thin/auto allowed */
    scrollbar-color: #686868 var(--black);
}

/* SELECTION */

/* Works in most modern browsers */
::selection {
    color: var(--gold);
    background: transparent;
}

/* For Firefox */
::-moz-selection {
    color: var(--gold);
    background: transparent;
}

/* LAYOUT */

html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections ========================================================================== */

/** Remove the margin in all browsers. */

body {
	margin: 0;
  font-family: var(--site-font);
  font-size: var(--font-normal);
  line-height: 130%;
  font-weight: 300;
  color: var(--black);
  width: 100%;
  overflow-x: hidden;
}
body.unscrollable {
  height: 100vh;
  overflow: hidden;
}

/* Text-level semantics ========================================================================== */

h1, .h1 {
  font-size: var(--font-big);
  margin: 0;
  margin-bottom: calc(var(--font-big) * 0.22);
}

h2, .h2 {
  font-size: calc(var(--font-big) * 0.5897);
  margin: 0;
  margin-bottom: calc(var(--font-big) * 0.1769);
}

h3, .h3 {
  font-size: calc(var(--font-big) * 0.49);
  margin: 0;
  margin-bottom: calc(var(--font-big) * 0.1462);
}

h4, .h4 {
  font-size: calc(var(--font-big) * 0.462);
  margin: 0;
  margin-bottom: calc(var(--font-big) * 0.1192);
}

h5, .h5 {
  font-size: calc(var(--font-big) * 0.372);
  margin: 0;
  margin-bottom: calc(var(--font-big) * 0.1);
}

h6, .h6 {
  font-size: calc(var(--font-big) * 0.298);
  margin: 0;
  margin-bottom: calc(var(--font-big) * 0.0808);
}

h1, .h1 { line-height: 100% }
h2, .h2, h3, .h3 { line-height: 105%; }
h4, .h4, h5, .h5, h6, .h6 { line-height: 112%;}


h1, .h1, h2, .h2 { font-weight: 400; }
h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-weight:300; }

.slim {
  font-weight: 200;
}

b, strong, .strong {
	font-weight: 500;
}

/** Add the correct font size in all browsers. */

small, .small { font-size: var(--font-small); }
.smaller { font-size: var(--font-smaller); }

.upper { text-transform: uppercase;}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

p:last-of-type {
  margin-bottom: 0;
}

@media 
  (width <= 1024px) and (orientation: portrait),
  (width <= 990px) {
    h2, .h2 {
      font-size: calc(var(--font-big) * 0.63); /* ~38px */
      margin-bottom: calc(var(--font-big) * 0.16);
    }

    h3, .h3 {
      font-size: calc(var(--font-big) * 0.55); /* ~33px */
      margin-bottom: calc(var(--font-big) * 0.14);
    }

    h4, .h4 {
      font-size: calc(var(--font-big) * 0.47); /* ~28px */
      margin-bottom: calc(var(--font-big) * 0.12);
    }

    h5, .h5 {
      font-size: calc(var(--font-big) * 0.40); /* ~24px */
      margin-bottom: calc(var(--font-big) * 0.10);
    }

    h6, .h6 {
      font-size: calc(var(--font-big) * 0.38); /* ~23px */
      margin-bottom: calc(var(--font-big) * 0.09);
    }
}


@media (width <= 520px) {
  h2, .h2 {
    font-size: calc(var(--font-big) * 0.85); /* ~31px */
    margin-bottom: calc(var(--font-big) * 0.25);
  }

  h3, .h3 {
    font-size: calc(var(--font-big) * 0.73); /* ~27px */
    margin-bottom: calc(var(--font-big) * 0.21);
  }

  h4, .h4 {
    font-size: calc(var(--font-big) * 0.61); /* ~23px */
    margin-bottom: calc(var(--font-big) * 0.18);
  }

  h5, .h5 {
    font-size: calc(var(--font-big) * 0.55); /* ~20px */
    margin-bottom: calc(var(--font-big) * 0.14);
  }

  h6, .h6 {
    font-size: calc(var(--font-big) * 0.51); /* ~19px */
    margin-bottom: calc(var(--font-big) * 0.12);
  }
}

/* Buttons */

main .button {
  display: flex;
  margin-top: calc(var(--the-gap) * 2);
  text-decoration: none;
  width: fit-content;
}

main .button button {
  cursor: pointer;
  font-family: var(--site-font);
  font-size: var(--font-small);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 48px;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 15px 12px;
  padding-inline: calc(12px * 2.25);
  gap: calc(12px * 1.25);
  overflow: hidden;
  border:unset;
}

main .button button i.arrow {
  transition: all 200ms ease-in-out;
}

main .button:hover button i.arrow {
  transform: rotate(45deg);
}

main .button.button--outline button {
  background-color: transparent;
  border:2px solid;
}
main .button.button--white.button--outline button {
  color: var(--white);
}
main .button.button--white.button--outline button svg {
  fill:var(--white);
}
main .button.button--blue.button--outline button {
  color: var(--blue);
}
main .button.button--blue.button--outline button svg {
  fill:var(--gold);
}

main .button.button--white.button--filled button {
  color: var(--blue);
  background-color: var(--white);
}
main .button.button--white.button--filled button svg {
  fill:var(--blue);
}
main .button.button--blue.button--filled button {
  color: var(--white);
  background-color: var(--blue);
}
main .button.button--blue.button--filled button svg {
  fill:var(--gold);
}

@media
(width <= 1440px) {
  main .button{
    margin-top: calc(var(--the-gap) * 1.75);
  }
  main .button button {
    min-height: 52px;
  }
}

@media
(width <= 1280px) {
  main .button{
    margin-top: calc(var(--the-gap) * 1.25);
  }
  main .button button {
    min-height: 48px;
  }
}

@media (width <= 520px) {
  main .button button {
    min-height: 52px;
    padding-block: 10px;
    padding-inline: calc(10px * 2.25);
    gap: calc(10px * 1.35);
  }
}

/* Embedded content ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
picture img,
figure img {
	min-width: 100%;
	max-width: 100%;
	min-height: 100%;
	max-height: 100%;
	object-fit: cover;
}

/* Forms ========================================================================== */

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}


/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}


/** Add the correct display in IE 10. */
[hidden] {
	display: none;
}

/* Box sizing --------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* GRIDS -------------------------------------------------- */

/* Flexbox-based 12-Column Grid System */

/* Container */
.container {
  width: calc(100% - 2 * var(--side-padding));
  margin: 0 auto;
  padding: 0;
}

.container-fluid {
  width: 100%;
  padding: 0 15px;
}

/* Row */
.row {
  display: flex;
  flex-wrap: wrap;
  /* width: calc(100% + (15px * 2));
  margin-left: -15px;
  margin-right: -15px; */
  width: 100%;
}

/* Column base styles */
[class*="col-"] {
  position: relative;
  width: 100%;
  /* padding-left: 15px;
  padding-right: 15px; */
  flex-shrink: 0;
}

.block { display:block; }

/* 12-Column Grid System */
.col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

/* Auto column */
.col-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
.col { flex: 1 0 0%; max-width: 100%; }


@media (max-width: 1440px) {
  .col-xl-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-xl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-xl-3 { flex: 0 0 25%; max-width: 25%; }
  .col-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-xl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-xl-6 { flex: 0 0 50%; max-width: 50%; }
  .col-xl-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-xl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-xl-9 { flex: 0 0 75%; max-width: 75%; }
  .col-xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-xl-12 { flex: 0 0 100%; max-width: 100%; }
  .col-xl-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
  .col-xl { flex: 1 0 0%; max-width: 100%; }
}


@media (max-width: 992px), (max-width:1024px) and (orientation: portrait) {
  .col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  .col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
  .col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
  .col-lg-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
  .col-lg { flex: 1 0 0%; max-width: 100%; }
}


@media (max-width: 768px) {
  .col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-md-3 { flex: 0 0 25%; max-width: 25%; }
  .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-md-9 { flex: 0 0 75%; max-width: 75%; }
  .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-md-12 { flex: 0 0 100%; max-width: 100%; }
  .col-md-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
  .col-md { flex: 1 0 0%; max-width: 100%; }
}


@media (max-width: 520px) {
  .col-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
  .col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
  .col-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-sm-9 { flex: 0 0 75%; max-width: 75%; }
  .col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
  .col-sm-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
  .col-sm { flex: 1 0 0%; max-width: 100%; }
}



/* Gap Control Classes */
.gap-0 { margin-left: 0; margin-right: 0; }
.gap-0 > [class*="col-"] { padding-left: 0; padding-right: 0; }

.gap-1 { margin-left: -2px; margin-right: -2px; min-width: calc(100% + (2 * 2px)); }
.gap-1 > [class*="col-"] { padding-left: 2px; padding-right: 2px; }

.gap-2 { margin-left: -4px; margin-right: -4px; min-width: calc(100% + (2 * 4px)); }
.gap-2 > [class*="col-"] { padding-left: 4px; padding-right: 4px; }

.gap-3 { margin-left: -8px; margin-right: -8px; min-width: calc(100% + (2 * 8px)); }
.gap-3 > [class*="col-"] { padding-left: 8px; padding-right: 8px; }

.gap-4 { margin-left: -12px; margin-right: -12px; min-width: calc(100% + (2 * 12px)); }
.gap-4 > [class*="col-"] { padding-left: 12px; padding-right: 12px; }

.gap-5 { margin-left: -15px; margin-right: -15px; min-width: calc(100% + (2 * 15px)); }
.gap-5 > [class*="col-"] { padding-left: 15px; padding-right: 15px; }

.gap-6 { margin-left: -20px; margin-right: -20px; min-width: calc(100% + (2 * 20px)); }
.gap-6 > [class*="col-"] { padding-left: 20px; padding-right: 20px; }

.gap-7 { margin-left: -24px; margin-right: -24px; min-width: calc(100% + (2 * 24px)); }
.gap-7 > [class*="col-"] { padding-left: 24px; padding-right: 24px; }

.gap-8 { margin-left: -30px; margin-right: -30px; min-width: calc(100% + (2 * 30px)); }
.gap-8 > [class*="col-"] { padding-left: 30px; padding-right: 30px; }

.gap-9 { margin-left: -36px; margin-right: -36px; min-width: calc(100% + (2 * 36px)); }
.gap-9 > [class*="col-"] { padding-left: 36px; padding-right: 36px; }

.gap-10 { margin-left: -40px; margin-right: -40px; min-width: calc(100% + (2 * 40px)); }
.gap-10 > [class*="col-"] { padding-left: 40px; padding-right: 40px; }

.gap-11 { margin-left: -44px; margin-right: -44px; min-width: calc(100% + (2 * 44px)); }
.gap-11 > [class*="col-"] { padding-left: 44px; padding-right: 44px; }

.gap-12 { margin-left: -48px; margin-right: -48px; min-width: calc(100% + (2 * 48px)); }
.gap-12 > [class*="col-"] { padding-left: 48px; padding-right: 48px; }

@media 
(width<=520px) {
  .gap-1 { margin-left: -1px; margin-right: -1px; min-width: calc(100% + (2 * 1px)); }
  .gap-1 > [class*="col-"] { padding-left: 1px; padding-right: 1px; }

  .gap-2 { margin-left: -2px; margin-right: -2px; min-width: calc(100% + (2 * 2px)); }
  .gap-2 > [class*="col-"] { padding-left: 2px; padding-right: 2px; }

  .gap-3 { margin-left: -4px; margin-right: -4px; min-width: calc(100% + (2 * 4px)); }
  .gap-3 > [class*="col-"] { padding-left: 4px; padding-right: 4px; }

  .gap-4 { margin-left: -6px; margin-right: -6px; min-width: calc(100% + (2 * 6px)); }
  .gap-4 > [class*="col-"] { padding-left: 6px; padding-right: 6px; }

  .gap-5 { margin-left: -8px; margin-right: -8px; min-width: calc(100% + (2 * 8px)); }
  .gap-5 > [class*="col-"] { padding-left: 8px; padding-right: 8px; }

  .gap-6 { margin-left: -10px; margin-right: -10px; min-width: calc(100% + (2 * 10px)); }
  .gap-6 > [class*="col-"] { padding-left: 10px; padding-right: 10px; }

  .gap-7 { margin-left: -12px; margin-right: -12px; min-width: calc(100% + (2 * 12px)); }
  .gap-7 > [class*="col-"] { padding-left: 12px; padding-right: 12px; }

  .gap-8 { margin-left: -15px; margin-right: -15px; min-width: calc(100% + (2 * 15px)); }
  .gap-8 > [class*="col-"] { padding-left: 15px; padding-right: 15px; }

  .gap-9 { margin-left: -18px; margin-right: -18px; min-width: calc(100% + (2 * 18px)); }
  .gap-9 > [class*="col-"] { padding-left: 18px; padding-right: 18px; }

  .gap-10 { margin-left: -20px; margin-right: -20px; min-width: calc(100% + (2 * 20px)); }
  .gap-10 > [class*="col-"] { padding-left: 20px; padding-right: 20px; }

  .gap-11 { margin-left: -22px; margin-right: -22px; min-width: calc(100% + (2 * 22px)); }
  .gap-11 > [class*="col-"] { padding-left: 22px; padding-right: 22px; }

  .gap-12 { margin-left: -24px; margin-right: -24px; min-width: calc(100% + (2 * 24px)); }
  .gap-12 > [class*="col-"] { padding-left: 24px; padding-right: 24px; }
}



/* Padding Top Control Classes */
.pt-x0  { padding-top: 0; }
.pt-x1  { padding-top: calc(var(--section-padding) * 0.1364); }
.pt-x2  { padding-top: calc(var(--section-padding) * 0.2727); }
.pt-x3  { padding-top: calc(var(--section-padding) * 0.4091); }
.pt-x4  { padding-top: calc(var(--section-padding) * 0.5455); }
.pt-x5  { padding-top: calc(var(--section-padding) * 0.6818); }
.pt-x6  { padding-top: calc(var(--section-padding) * 0.8182); }
.pt-x7  { padding-top: calc(var(--section-padding) * 0.9545); }
.pt-x8  { padding-top: calc(var(--section-padding) * 1.0909); }
.pt-x9  { padding-top: calc(var(--section-padding) * 1.2273); }
.pt-x10 { padding-top: calc(var(--section-padding) * 1.3636); }
.pt-x11 { padding-top: calc(var(--section-padding) * 1.5); }
.pt-x12 { padding-top: calc(var(--section-padding) * 1.6364); }
.pt-x13 { padding-top: calc(var(--section-padding) * 1.7727); }
.pt-x14 { padding-top: calc(var(--section-padding) * 1.9091); }
.pt-x15 { padding-top: calc(var(--section-padding) * 2); }
.pt-x16 { padding-top: calc(var(--section-padding) * 2.1364); }
.pt-x17 { padding-top: calc(var(--section-padding) * 2.2727); }
.pt-x18 { padding-top: calc(var(--section-padding) * 2.4091); }
.pt-x19 { padding-top: calc(var(--section-padding) * 2.5455); }
.pt-x20 { padding-top: calc(var(--section-padding) * 2.6818); }
.pt-x21 { padding-top: calc(var(--section-padding) * 2.8182); }



/* Padding Bottom Control Classes */
.pb-x0  { padding-bottom: 0; }
.pb-x1  { padding-bottom: calc(var(--section-padding) * 0.1364); }
.pb-x2  { padding-bottom: calc(var(--section-padding) * 0.2727); }
.pb-x3  { padding-bottom: calc(var(--section-padding) * 0.4091); }
.pb-x4  { padding-bottom: calc(var(--section-padding) * 0.5455); }
.pb-x5  { padding-bottom: calc(var(--section-padding) * 0.6818); }
.pb-x6  { padding-bottom: calc(var(--section-padding) * 0.8182); }
.pb-x7  { padding-bottom: calc(var(--section-padding) * 0.9545); }
.pb-x8  { padding-bottom: calc(var(--section-padding) * 1.0909); }
.pb-x9  { padding-bottom: calc(var(--section-padding) * 1.2273); }
.pb-x10 { padding-bottom: calc(var(--section-padding) * 1.3636); }
.pb-x11 { padding-bottom: calc(var(--section-padding) * 1.5); }
.pb-x12 { padding-bottom: calc(var(--section-padding) * 1.6364); }
.pb-x13 { padding-bottom: calc(var(--section-padding) * 1.7727); }
.pb-x14 { padding-bottom: calc(var(--section-padding) * 1.9091); }
.pb-x15 { padding-bottom: calc(var(--section-padding) * 2); }
.pb-x16 { padding-bottom: calc(var(--section-padding) * 2.1364); }
.pb-x17 { padding-bottom: calc(var(--section-padding) * 2.2727); }
.pb-x18 { padding-bottom: calc(var(--section-padding) * 2.4091); }
.pb-x19 { padding-bottom: calc(var(--section-padding) * 2.5455); }
.pb-x20 { padding-bottom: calc(var(--section-padding) * 2.6818); }
.pb-x21 { padding-bottom: calc(var(--section-padding) * 2.8182); }



/* Offset Classes */
.offset-1 { margin-left: 8.333333%; }
.offset-2 { margin-left: 16.666667%; }
.offset-3 { margin-left: 25%; }
.offset-4 { margin-left: 33.333333%; }
.offset-5 { margin-left: 41.666667%; }
.offset-6 { margin-left: 50%; }
.offset-7 { margin-left: 58.333333%; }
.offset-8 { margin-left: 66.666667%; }
.offset-9 { margin-left: 75%; }
.offset-10 { margin-left: 83.333333%; }
.offset-11 { margin-left: 91.666667%; }

/* Flex Utilities */
.flex { display:flex; flex-wrap:wrap; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.align-center { align-items: center; }
.align-baseline { align-items: baseline; }
.align-stretch { align-items: stretch; }

.align-self-start { align-self: flex-start; }
.align-self-end { align-self: flex-end; }
.align-self-center { align-self: center; }
.align-self-baseline { align-self: baseline; }
.align-self-stretch { align-self: stretch; }

/* Order Classes */
.order-first { order: -1; }
.order-last { order: 13; }
.order-0 { order: 0; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.order-6 { order: 6; }
.order-7 { order: 7; }
.order-8 { order: 8; }
.order-9 { order: 9; }
.order-10 { order: 10; }
.order-11 { order: 11; }
.order-12 { order: 12; }

/* Position Classes */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed {position: fixed; }

/* COLORS ALL RULES */

/* LIGHT AND DARK SECTION THEMES INIT */

section.theme-light {
  color: var(--black);
}

section.theme-dark {
  color: var(--white);
}

/* COLOR DECLARATION */

.white       { color: var(--white); }
.black       { color: var(--black); }
.blue        { color: var(--blue); }
.gold        { color: var(--gold); }
.grey-light  { color: var(--grey-light); }
.grey-medium { color: var(--grey-medium); }
.grey-dark   { color: var(--grey-dark); }

.bg-white       { background-color: var(--white); }
.bg-black       { background-color: var(--black); }
.bg-blue        { background-color: var(--blue); }
.bg-gold        { background-color: var(--gold); }
.bg-grey-light  { background-color: var(--grey-light); }
.bg-grey-medium { background-color: var(--grey-medium); }
.bg-grey-dark   { background-color: var(--grey-dark); }

/* ========================= Hide and show devices ========================= */

.dsk { display: none ;}
.tbl { display: none ;}
.mbl { display: none ;}

@media screen and (min-width:1024px) and (orientation: landscape) {
  .dsk { display: initial ;}
}
@media screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait), screen and (min-width:768px) and (max-width:990px) {
  .tbl { display: initial ;}
}
@media screen and (max-width:520px) and (orientation:portrait), screen and (max-width:890px) and (max-height:520px) {
  .mbl { display: initial ;}
}

/* Main Height */

main {
  min-height: 70dvh;
}

/* SECTION RULES */

main section {
  width: 100%;
  position: relative;
}
main section.full-viewport { min-height: 100dvh; }

main section.frame-top { border-top:var(--frame-width) solid var(--white); }
main section.frame-bottom { border-bottom:var(--frame-width) solid var(--white); }
main section.frame-left { border-left:var(--frame-width) solid var(--white); }
main section.frame-right { border-right:var(--frame-width) solid var(--white); }

/* HERO & OVERLAY */

.overlay { position: absolute; }
.hero, .overlay { top:0; left:0; width:100%; height:100%; overflow: hidden; }
.overlay--blue { background: #00263E; background: linear-gradient(233deg, rgba(0, 38, 62, 0) 0%, rgba(0, 38, 62, 1) 100%); }
.overlay--black { background: #000000; background: linear-gradient(233deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); }


/* CONTACT BOX */

/* #contactBox {
  position: fixed;
  bottom: calc(var(--frame-width) - 5px);
  right: calc(var(--frame-width) - 5px);
  z-index: 999;
  transition: all 0.3s ease;
  width: auto;
  gap:8px;
}

#contactBox.stuck {
  position: absolute;
  bottom: auto;
}

div#contactBox .the-box {
  transition: all 200ms ease-in-out;
  background-color: var(--white);
  border-radius: 60px;
  overflow: hidden;
  max-width: calc((100% / 3) - ((8px * 2) / 3));
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);

}
@media
(width >= 1024px) and (orientation:landscape){
  div#contactBox .the-box:hover {
    background-color: var(--blue);
    scale: 1.2;
    border: 1px solid var(--grey-dark);
  }
}

div#contactBox .the-box a {
  display: flex;
  aspect-ratio: 1 / 1;
  width: 48px;
  align-items: center;
  justify-content: center;
  transition: all 200ms ease-in-out;
}

div#contactBox .the-box a i {
  display: flex;
  align-items: center;
  justify-content: center;
}

div#contactBox .the-box a i svg path {
  fill: var(--blue);
}
div#contactBox .the-box:hover a i svg path {
  fill: var(--white);
}
div#contactBox #whatsAppBox.the-box a i svg path {
  fill: #4FD67C;;
}
div#contactBox .the-box a i svg {
  max-width: 19px;
  max-height: 20px;
}

@media
(width <= 1024px) and (orientation: portrait),
(width <= 990px) {
  footer#sitefooter {
    padding-bottom: 62px;
  }
  #contactBox {
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    padding-inline: 108px;
    padding-bottom: 18px;
  }
  div#contactBox .the-box a {
    width: 100%;
  }
  
}

@media
(width <= 520px) {

  #contactBox {
    bottom: 0;
    padding-block: var(--the-gap);
    background: white;
    padding-inline: 126px;
  }
  div#contactBox .the-box {
    box-shadow: unset;
    -webkit-box-shadow: unset;
    -moz-box-shadow: unset;
  }
  div#contactBox .the-box a {
      width: 100%;
      background: var(--blue);
  }
  div#contactBox .the-box a i svg {
    max-width: 15px;
    max-height: 17px;
  }
  div#contactBox .the-box a i svg path {
    fill: var(--white);
  }
  
  
} */

div#contactBox {
    position: fixed;
    bottom: 16px;
    right: 16px;
    height: 60px;
    width: 60px;
    z-index: 20;
}

div#contactBox a#whatsApp {
    display: flex;
    width: 60px;
    height: 60px;
    border-radius: 50px;
    background: #25D366;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

div#contactBox a#whatsApp i {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

div#contactBox a#whatsApp svg path {
  fill:var(--white);
}

/* TEMPORARY */

@media
(min-width:1024px) and (orientation: landscape){
  /* .header-right.sitelang { display: none; } */
}

.header-left {
  order: 1;
}
.header-right {
  order: 3;
}
.header-center {
  order: 2;
}