/* 
    Theme Name: floatytheme-1
    Author: floatyweb
    Author URI: http://www.floatyweb.com
    Description: floatyweb first website version theme
    Version: 1.0.0
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
    - Normalize (done as separate CSS file)
    - Variables
    - Box Sizing
## Layouts
    - HTML & Body Defaults
    - Mainframe Structure
# Components
    - Top Bar Widgets
    - Age Display
    - Logo and Slogan
    - Pointer/Cursor
    - Navigation (Vertical & Horizontal)
    - Footer
    - Loading Screen
    - Modal
    - Glitch Button
# Format
    - Logo and Slogan
    - 3D Cube Design
    - Page Layouts
    - Utility Classes
# Theme
    - Light Mode
    - Dark Mode
# Responsive Queries
    - Mobile Adjustments
    - RTL Support
--------------------------------------------------------------*/
/* Importing Normalize.css */
/*! 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.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * 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;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * 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; /* 1 */
  padding: 0; /* 2 */
}

/**
 * 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; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * 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; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

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

/* Importing Fonts */
/* @font-face Rules
--------------------------------------------------------------*/
@font-face {
  font-family: "thasadith";
  src: url("../fonts/Thasadith-Regular.ttf");
  font-weight: normal;
}
@font-face {
  font-family: "thasadith";
  src: url("../fonts/Thasadith-Bold.ttf");
  font-weight: bold;
}
@font-face {
  font-family: "kalameh";
  src: url("../fonts/KALAMEH_REGULAR.TTF");
  font-weight: normal;
}
@font-face {
  font-family: "kalameh";
  src: url("../fonts/KALAMEH_BOLD.TTF");
  font-weight: bold;
}
@font-face {
  font-family: "pp mono";
  src: url("../fonts/Supply-Regular.otf");
  font-weight: normal;
}
@font-face {
  font-family: "pp mono";
  src: url("../fonts/Supply-Bold.otf");
  font-weight: bold;
}
/* Importing Variables */
/* Variables
--------------------------------------------------------------*/
:root {
  --side-width: 0; /* 47px; */
  --orange: #f90;
  --bk:#111;
  --bk-orange:#ff7f00;
  --bk-orange-t-a:#f93a; /* transpatrency: aa*/
  --bk-lightblack:#232323;
  --text-white:#ddd;
  --text-black:#111;
  --text-orange: #f93;
  --fontsize-small: 16px;
  --fontsize-footnote: 1.6vh;
  --footer-height: 47vh;
  --footer-column-padding: 23px;
  --footer-links-fontsize: 1.3em;
}

/* Importing Pointer/Cursor */
/* Pointer/Cursor
--------------------------------------------- */
#cursor {
  position: fixed;
  left: 0;
  top: 0;
  /* transition:  .23s cubic-bezier(0.785, 0.35, 0.15, 0.86); */
  will-change: transform;
  z-index: 999;
  display: none;
}

.pointer {
  position: absolute;
  left: 0;
  top: 0;
  width: 23px;
  height: 23px;
  background: rgba(255, 153, 51, 0.8666666667);
  transition: 0.23s cubic-bezier(-0.1, 1, 0.3, 0);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50% 0px;
  box-shadow: 0 0 3px #000;
  /* 	will-change: transform; */
  pointer-events: none;
  z-index: 999;
  opacity: 0.7;
}

.magnetic {
  position: relative;
}

/* Importing Logo and Slogan */
/* Logo and slogan
--------------------------------------------- */
#logo {
  position: fixed;
  padding: 11px 0;
  top: 12vh;
  left: 0;
  z-index: 999;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
  writing-mode: vertical-lr;
  color: rgba(221, 221, 221, 0.8666666667);
  background-color: rgba(0, 0, 0, 0.0666666667);
  font-family: monospace, "Courier New", Courier;
  /* font-weight: bold; */
  font-size: 16px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  /* border: 1px solid #d73a; */
  /* border-radius: 0 5px 5px 0 / 0 5px 5px 0; */
  text-shadow: 0 0 3px #111;
  transition: top 0.3s, border 0.3s, letter-spacing 0.3s;
}

/* #logo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 1px;
    background-color: #fff;
}
#logo::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 1px;
    background-color: #fff;
} */
#logo .slogan {
  margin-top: 23px;
  font-size: small;
}

/* Importing Navigation */
/* Navigation (Vertical & Horizontal)
--------------------------------------------- */
.vertical-nav {
  position: absolute;
  padding: 7px 0;
  top: 12vh;
  right: 11px;
  width: auto;
  z-index: 999;
  color: #fff;
}
.vertical-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.vertical-nav li {
  margin: 5px 0; /* Spacing between items */
}
.vertical-nav a {
  display: block; /* Full width clickable area */
  padding: 7px 11px; /* Rectangular shape with padding */
  text-decoration: none;
  color: #fff; /* White text for contrast on orange */
  font-family: Arial, sans-serif; /* Adjust font as needed */
  background-color: rgba(221, 119, 51, 0.8666666667); /* #d73d00 with 80% opacity */
  transition: background-color 0.3s ease; /* Smooth transition for hover */
}
.vertical-nav a:hover {
  background-color: rgba(221, 119, 51, 0.9333333333); /* Fully opaque #d73d00 (alpha = 1 or 'f') */
}

.nav-bar {
  display: none;
  /* display: flex; */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--side-width);
  background: #000;
  border-left: 1px solid rgba(17, 17, 17, 0.8666666667);
  font-size: 37px;
}

.nav-bar > .nav-item {
  position: relative;
  background: #111;
  margin: 1.5vh 0;
  width: 37px;
  height: 37px;
}

.nav-bar > .nav-item > a {
  position: relative;
  z-index: 2;
}

.nav-bar > .nav-item > i {
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 37px;
  line-height: 37px;
  color: var(--text-white);
  text-align: center;
  vertical-align: text-top;
  z-index: 3;
}

.nav-bar .highlighter {
  display: inline-block;
  position: absolute;
  inset: 0;
  /* 	top: 50%;
  	width: 100%;
  	height: 100%; */
  background: var(--orange);
  transition: 0.23s cubic-bezier(-0.1, 1, 0.3, 0);
  /* 	border-radius: 50%; */
  /* 	transform: translate(-50%,-50%); */
  transform-origin: 50% 50% 0px;
  /* 	box-shadow: 0 0 3px #000; */
  /* 	will-change: transform; */
  pointer-events: none;
  z-index: 1;
}

.mainmenu {
  display: flex;
  justify-content: center;
  align-items: center;
  position: sticky;
  top: 0;
  width: 100%;
  height: 3.7vh;
  padding: 0 2vw;
  color: #aaa;
  background: #000;
  box-sizing: border-box;
  z-index: 999;
}
.mainmenu .logo {
  display: flex;
  flex: 0.37;
  gap: 23px;
  font-family: "pp mono";
}
.mainmenu .menu {
  display: flex;
  flex: 2;
  justify-content: start;
  align-items: center;
  gap: 23px;
  border-bottom: 1px solid #555;
}
.mainmenu .menu .menu-item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 3px;
  min-width: 77px;
  font-family: "pp mono";
}
.mainmenu .menu .menu-item.active::after {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: -3.5px;
  left: 50%;
  width: 7px;
  height: 7px;
  background-color: var(--orange);
  transform: translateX(-50%);
}
.mainmenu .menu .menu-item.active a {
  color: #fff;
}
.mainmenu .menu .menu-item:hover::before {
  content: "";
  display: inline-block;
  position: absolute;
  inset: 0;
  padding: 5px;
  transform: skew(11deg, 3deg);
  pointer-events: none;
  z-index: -1;
}
.mainmenu .menu .menu-item > a {
  display: inline-block;
  padding: 0 1vw;
  color: #aaa;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}
.mainmenu .menu .menu-item > a :hover {
  color: #fff;
  text-shadow: 0 0 0.65px #aaa, 0 0 0.65px #aaa;
}
.mainmenu .menu .menu-item > a.active {
  color: var(--orange);
}
.mainmenu .menu .menu-item > a.active:hover {
  color: var(--orange);
}

/* Importing Glitch Button */
/* Glitch Button
  --------------------------------------------- */
/* CSS */
/* CSS */
.button-49,
.button-49:after {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(45deg, transparent 5%, #f70 5%);
  width: 67px;
  height: 37px;
  font-family: "kalameh";
  font-size: 18px;
  font-weight: bold;
  line-height: 37px;
  /* Changed from #FF013C */
  border: 0;
  color: #fff;
  letter-spacing: 1px;
  box-shadow: 3px 0px 0px #ddd;
  outline: transparent;
  position: relative;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-49:after {
  --slice-0: inset(50% 50% 50% 50%);
  --slice-1: inset(80% -3px 0 0);
  --slice-2: inset(50% -3px 30% 0);
  --slice-3: inset(10% -3px 85% 0);
  --slice-4: inset(40% -3px 43% 0);
  --slice-5: inset(80% -3px 5% 0);
  content: "ALT TEXT";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #f70 5%);
  /* Changed from #FF013C */
  text-shadow: -1px -1px 0px #F8F005, 1px 1px 0px #00E6F6;
  clip-path: var(--slice-0);
}

.button-49:hover:after {
  animation: 1s glitch;
  animation-timing-function: steps(2, end);
}

@keyframes glitch {
  0% {
    clip-path: var(--slice-1);
    transform: translate(-10px, -5px);
  }
  10% {
    clip-path: var(--slice-3);
    transform: translate(5px, 5px);
  }
  20% {
    clip-path: var(--slice-1);
    transform: translate(-5px, 5px);
  }
  30% {
    clip-path: var(--slice-3);
    transform: translate(0px, 2px);
  }
  40% {
    clip-path: var(--slice-2);
    transform: translate(-2px, 0px);
  }
  50% {
    clip-path: var(--slice-3);
    transform: translate(2px, 0px);
  }
  60% {
    clip-path: var(--slice-4);
    transform: translate(2px, 5px);
  }
  70% {
    clip-path: var(--slice-2);
    transform: translate(-5px, 5px);
  }
  80% {
    clip-path: var(--slice-5);
    transform: translate(10px, -5px);
  }
  90% {
    clip-path: var(--slice-1);
    transform: translate(-5px, 0px);
  }
  100% {
    clip-path: var(--slice-1);
    transform: translate(0);
  }
}
@media (min-width: 768px) {
  .button-49,
  .button-49:after {
    width: 80px;
    height: 44px;
    line-height: 44px;
  }
}
/* Importing Footer */
/* Footer
--------------------------------------------- */
/* since fixed doesn't count in scrollbar height,
 we need to wrap it inside a wrapper with relative position
 and height of equal or higher than the footer height
*/
.footer {
  position: relative;
  height: var(--footer-height);
  /* background-color: var(--bk-orange); */
}
.footer * {
  box-sizing: border-box;
}
.footer a, .footer a:visited {
  color: inherit;
  text-decoration: none;
}
.footer i {
  margin: 0 7px;
}
.footer .stripe {
  width: 100%;
  height: 77px;
  background: #000;
  z-index: 9;
  background-image: url("../img/stripe.svg");
  box-shadow: 0 0 11px #333, inset 0 0 37px 0px rgba(51, 51, 51, 0.4666666667), 0 0 3px 0 #333, 0 0 3px 0 #777;
}
.footer .content {
  display: flex;
  flex: 1;
}
.footer .content .left {
  flex: 1;
  padding: 23px;
  border-left: 1px solid rgba(51, 51, 51, 0.2);
}
.footer .content .left i {
  margin: 0 7px;
  color: #ddd;
  background: #111;
  padding: 5px;
}
.footer .content .left .title {
  margin: 0;
}
.footer .content .left .contact-links div {
  display: flex;
  align-items: center;
  padding: 0 0 0 7px;
  margin: 0;
}
.footer .content .left .contact-links div:hover {
  background-color: #d73;
}
.footer .content .middle {
  flex: 1;
  padding: 23px;
  border-left: 1px solid rgba(51, 51, 51, 0.2);
}
.footer .content .middle > .links > div {
  padding: 0 11px;
  font-size: var(--footer-links-fontsize);
  box-shadow: inset 0 0 0 0 #333;
  transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.footer .content .middle > .links > div:hover {
  color: #fff;
  /* box-shadow: inset 200px 0 0 0 #333;; */
}
.footer .content .right {
  flex: 1;
  padding: 23px;
  border-left: 1px solid rgba(51, 51, 51, 0.2);
}
.footer .content .right .social {
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: 7px;
  margin-top: 10px; /* Space above social icons */
  font-size: 1.5em;
}
.footer .content .right .social a {
  display: flex;
  justify-content: center;
  align-content: center;
  width: 23px;
  height: 23px;
  color: var(--text-black);
  text-decoration: none;
  transition: transform 0.23s;
}
.footer .content .right .social a:hover {
  /* padding: 3px; */
  color: #ddd;
  background: #111;
  transform: scale(1.3);
}
.footer .bottom {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* padding: 0 11px; */
  width: 100%;
  /* height: 77px; */
  border-top: 1px solid rgba(51, 51, 51, 0.2);
}
.footer .bottom .again-logo {
  /* padding: 23px 0; */
  /* 	background: #cc6600; */
  /* min-height: 37px;; */
  text-align: center;
  font-size: 37px;
  /* border-top: 1px solid #3333; */
}
.footer .bottom .again-logo div {
  font-size: 23px;
}
.footer .bottom .row {
  padding: 7px 23px;
}
.footer .bottom .copyright {
  display: flex;
  align-items: center;
  padding: 23px;
  /* font-family: "pp mono"; */
  font-size: 1.1em;
  border-top: 1px solid rgba(51, 51, 51, 0.2);
}

.footer-frame {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--footer-height);
  color: #111;
  font-size: var(--fontsize-footnote);
  z-index: 0;
}

@keyframes animation_underline_grow {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
/* Importing Cube 3D */
/* 3D Cube
--------------------------------------------- */
.cube-frame {
  position: relative;
  width: 100%;
  height: 100vh;
}
.cube-frame * {
  cursor: default;
}

.aframe {
  position: absolute;
  inset: 23px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #111;
  z-index: 11;
}
.aframe .line {
  width: 100vw;
}
.aframe .left, .aframe .right {
  width: 50vw;
  overflow: hidden;
  display: inline-block;
}
.aframe .left {
  float: left;
  color: var(--text-orange);
  transform: skew(0deg, -15deg);
}
.aframe .right {
  float: right;
  color: #777;
  transform: skew(0deg, 15deg);
}
.aframe .left .content {
  width: 100vw;
  text-align: center;
}
.aframe .right .content {
  width: 100vw;
  text-align: center;
  transform: translate(-50vw);
}
.aframe span {
  display: inline-block;
  /* font-family: monospace, 'Montserrat', sans-serif; */
  font-family: "pp mono";
  font-size: 7vw;
  text-transform: uppercase;
  line-height: 0.8;
  transition: ease-out 0.6s;
}
.aframe .line.b span {
  /* background-color: var(--bk-orange-t-a); */
  /* color: var(--text-black); */
}
.aframe span.small {
  font-size: 7vw;
}

/* Importing Q/A Section */
/* Q/A section
--------------------------------------------- */
div.qa-content {
  padding: 12% 12%;
  max-width: 1280px;
  margin: 0 auto;
  font-size: 1.6em;
  color: var(--text-white);
}
div.qa-content section, div.qa-content div {
  box-sizing: border-box;
}

section.q-row {
  display: flex;
  flex-direction: row;
  /* 	padding: 23px; */
  /* 	opacity:.9; */
  border: 1px solid rgba(255, 255, 255, 0.1333333333);
  transition: 0.23s;
  font-size: 1em;
}
section.q-row:hover {
  /* 	opacity: 1; */
  background: var(--bk-lightblack);
}

.q-row .title {
  /* display: flex;
  justify-content: center;
  align-items: start;
  padding: 23px 23px; */
  border-right: 1px solid rgba(255, 255, 255, 0.1333333333);
  /* font-size: 16px; */
}
.q-row .title .content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 67px;
  height: 67px;
  /* padding: 23px 23px;
  border-right: 1px solid #fff2;
  font-size: 16px; */
}
.q-row .button {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 23px 23px;
  border-left: 1px solid rgba(255, 255, 255, 0.1333333333);
  font-size: 1.3em;
}
.q-row .button i {
  font-size: 18px;
  transition: transform 0.23s;
}
.q-row div.content {
  flex: 1;
  padding: 23px;
}

div.question {
  /* 	padding: 12px; */
  /* 	margin-bottom: 1em; */
  /* font-family: monospace; */
  /* font-size: 16px; */
  font-weight: bold;
}
div.answer {
  position: relative;
  max-height: 0;
  box-sizing: border-box;
  overflow: hidden;
  /* 	background: #333; */
  transition: max-height 0.23s ease-out;
}

section.q-row.open {
  color: #111;
  background: #ff6f00;
}
section.q-row.open .title {
  color: #f93;
  background: #a30;
}
section.q-row.open .button i {
  transform: rotate(-45deg);
}
section.q-row.open .content .answer {
  display: block;
  padding: 12px 0 0 0;
}

/* Importing Loading Screen */
/* Loading
--------------------------------------------- */
#loader {
  display: none;
  position: fixed;
  inset: 0;
  background: #111;
  z-index: 9999;
}

.loading {
  font-family: monospace;
  text-transform: uppercase;
  width: 150px;
  text-align: center;
  line-height: 50px;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin: auto;
  transform: translateY(-50%);
  z-index: 9999;
}

.loading span {
  position: relative;
  z-index: 999;
  color: #fff;
}

.loading:before {
  content: "";
  background: #f90;
  width: 128px;
  height: 36px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  animation: 2s loadingBefore infinite ease-in-out;
}

@keyframes loadingBefore {
  0% {
    transform: translateX(-14px);
  }
  50% {
    transform: translateX(14px);
  }
  100% {
    transform: translateX(-14px);
  }
}
.loading:after {
  content: "";
  background: #f60;
  width: 14px;
  height: 60px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  opacity: 0.5;
  animation: 2s loadingAfter infinite ease-in-out;
}

@keyframes loadingAfter {
  0% {
    transform: translateX(-50px);
  }
  50% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(-50px);
  }
}
/* Importing Modal */
/* The Modal (background)
--------------------------------------------- */
.modal {
  display: none;
  position: fixed;
  /* Stay in place */
  z-index: 999;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
}

/* Modal Content */
.modal-content {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #333;
  margin: auto;
  padding: 20px;
  /* border: 1px solid #888; */
  top: 37%;
  bottom: 37%;
  width: 100%;
  box-sizing: border-box;
  color: var(--text-orange);
  background: linear-gradient(0deg, rgba(51, 51, 51, 0.37) 0%, rgb(51, 51, 51) 100%);
}
.modal-content .dialog {
  /* background-color: var(--bk-orange); */
}
.modal-content .dialog .text {
  font-size: 1.2em;
  margin-bottom: 1.2em;
}

#btnOK,
#btnNo {
  float: left;
  width: 50px;
  padding: 11px;
  background-color: #555;
}

#btnNo {
  float: right;
  text-align: right;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover, .close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/* Importing RTL Support */
/*--------------------------------------------------------------
# RTL
--------------------------------------------------------------*/
body.rtl {
  font: 1em "kalameh";
}

/* body.rtl .footer .right , */
body.rtl .footer .right .title,
body.rtl .footer .middle,
body.rtl .q-row div.content,
body.rtl .boxes .frame {
  text-align: right;
  direction: rtl;
}

body.rtl .footer .content .left .contact-links div {
  /* in RTL since numbers are not different than english */
  /* we need to undo the direction rtl, with row-reverse */
  flex-direction: row-reverse;
}

/* RTL Adjustments */
body.rtl .footer .content {
  flex-direction: row-reverse; /* RTL: right to left, swaps .left and .right */
  /* the default is row-reverse, by setting it to row it swaps*/
}

body.rtl .footer .content .left {
  text-align: right; /* Keep right-aligned text in RTL */
}

body.rtl .footer .content .right .social {
  align-items: start;
}

body.rtl .page .content {
  text-align: right;
  direction: rtl;
}

body.rtl .mainmenu .menu-item {
  font-family: "kalameh";
  font-size: 1.4em;
  font-weight: bold;
}

body.rtl .button-49,
body.rtl .button-49:after {
  font-family: "pp mono", monospace;
  font-size: 12px;
}

body.rtl .page_section__content {
  text-align: right;
  direction: rtl;
  font-size: 1.2em;
}

/* Importing Utility Classes */
/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */ /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */ /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
   supported by Chrome, Edge, Opera and Firefox */
}

.tall {
  min-height: 50vh;
}

.vh11 {
  min-height: 11vh;
}

.vh23 {
  min-height: 23vh;
}

.vh37 {
  min-height: 37vh;
}

.vh100 {
  min-height: 100vh;
}

.normal-fontsize {
  font-size: 1.2em;
}

.title-fontsize {
  font-size: 1.6em;
}

.big-fontsize {
  font-size: 3.1em;
}

.text-xs {
  font-size: 0.77em;
} /* Base size */
.text-s {
  font-size: 0.87em;
} /* Base size */
.text-m {
  font-size: 1em;
} /* Base size */
.text-l {
  font-size: 1.618em;
} /* ~1.618em */
.text-xl {
  font-size: 2.617924em;
} /* ~2.618em */
.text-2xl {
  font-size: 4.235801032em;
} /* ~4.236em */
.text-3xl {
  font-size: 6.8535260698em;
} /* ~6.854em */
.text-4xl {
  font-size: 11.0890051809em;
} /* ~11.090em */
.text-white {
  color: #fff;
}

.text-black {
  color: #000;
}

.text-gray-1 {
  color: #111;
}

.text-gray-3 {
  color: #333;
}

.text-gray-5 {
  color: #555;
}

.text-gray-7 {
  color: #777;
}

.text-red {
  color: red;
}

.text-green {
  color: green;
}

.text-blue {
  color: blue;
}

.text-orange {
  color: var(--bk-orange);
}

.bk-black {
  background-color: #000;
}

.bk-gray-1 {
  background-color: #111;
}

.bk-gray-3 {
  background-color: #333;
}

.bk-gray-5 {
  background-color: #555;
}

.bk-gray-7 {
  background-color: #777;
}

.bk-black-aa {
  background-color: rgba(0, 0, 0, 0.6666666667);
}

.bk-black-ab {
  background-color: rgba(0, 0, 0, 0.7333333333);
}

.bk-black-ac {
  background-color: rgba(0, 0, 0, 0.8);
}

.bk-black-ad {
  background-color: rgba(0, 0, 0, 0.8666666667);
}

.bk-black-ae {
  background-color: rgba(0, 0, 0, 0.9333333333);
}

.bk-red {
  background-color: red;
}

.bk-green {
  background-color: green;
}

.bk-blue {
  background-color: blue;
}

.bk-orange {
  background-color: var(--bk-orange);
}

.bk-construction-tape {
  background: repeating-linear-gradient(45deg, #f90, #f90 10px, #111 10px, #111 20px);
  opacity: 0.7;
}

.p11px {
  padding: 11px;
}

.p23px {
  padding: 23px;
}

.p37px {
  padding: 37px;
}

.p1hw {
  padding: 1vh 1vw;
}

.p2hw {
  padding: 2vh 1vw;
}

.p3hw {
  padding: 3vh 3vw;
}

.pt-1vh {
  padding-top: 1vh;
}

.pt-2vh {
  padding-top: 2vh;
}

.pt-3vh {
  padding-top: 3vh;
}

.pt-5vh {
  padding-top: 5vh;
}

.pt-7vh {
  padding-top: 7vh;
}

.pt-11vh {
  padding-top: 11vh;
}

.pb-1vh {
  padding-bottom: 1vh;
}

.pb-2vh {
  padding-bottom: 2vh;
}

.pb-3vh {
  padding-bottom: 3vh;
}

.pb-5vh {
  padding-bottom: 5vh;
}

.pb-7vh {
  padding-bottom: 7vh;
}

.pb-11vh {
  padding-bottom: 11vh;
}

.pl-1vw {
  padding-left: 1vw;
}

.pl-2vw {
  padding-left: 2vw;
}

.pl-3vw {
  padding-left: 3vw;
}

.pl-5vw {
  padding-left: 5vw;
}

.pl-7vw {
  padding-left: 7vw;
}

.pl-11vw {
  padding-left: 11vw;
}

.pr-1vw {
  padding-right: 1vw;
}

.pr-2vw {
  padding-right: 2vw;
}

.pr-3vw {
  padding-right: 3vw;
}

.pr-5vw {
  padding-right: 5vw;
}

.pr-7vw {
  padding-right: 7vw;
}

.pr-11vw {
  padding-right: 11vw;
}

.fullscreen {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-size: 11vh;
  background: #333;
  border-bottom: 3vh solid #111;
  box-sizing: border-box;
}

.orange {
  color: var(--orange);
  font-weight: bold;
  text-shadow: 0 0 1px #000;
  font-family: Monaco;
}

/* Importing Articles page setyles */
.articles-index a,
.articles-index a:visited {
  color: #fafcfd;
}
.articles-index a:hover {
  color: #c70;
}

.article-frame {
  padding: 3vh 3vw;
  margin: 0 0;
  min-height: 100vh;
  background: #111;
  box-sizing: border-box;
  transition: 0.23s;
  border: 1px solid #333;
  display: flex;
  justify-content: center;
  opacity: 0.7;
}
.article-frame_content {
  color: #fff;
  max-width: 1024px;
}

.article-title {
  display: inline-block;
  background: #c70;
}

.articles-link {
  margin: 7vh 0;
  text-align: center;
}
.articles-link > a {
  padding: 7px;
  color: #fff;
  background-color: #c70;
}

/* Importing responsive styles */
/*--------------------------------------------------------------
# Responsive queries
--------------------------------------------------------------*/
@media only screen and (max-width: 800px) {
  #age {
    /* display: none; */
    font-size: 2.5vw;
  }
  #logo {
    font-size: 11px;
  }
  #logo .slogan {
    font-size: 9px;
  }
  .row {
    flex-direction: column;
  }
  .col.l, .col.r {
    /* flex: 100%; */
    height: 50%;
  }
  .column {
    height: 50vh;
  }
  .icon-frame .slide i {
    font-size: 7em;
  }
  .boxes > div.box {
    padding: 123px 0;
  }
  .boxes .frame {
    width: 73vw;
  }
  div.qa-content {
    padding: 0;
  }
  section.q-row {
    font-size: 1.2em;
  }
  div.qa-content {
    font-size: 1em;
  }
  .q-row .title {
    display: none;
  }
  .q-row .content {
    padding-left: 37px !important;
  }
  .q-row .button {
    border-left: none;
  }
  .big-fontsize {
    font-size: 2em;
  }
  .text-xs {
    font-size: 0.77em;
  } /* Base size */
  .text-s {
    font-size: 0.87em;
  } /* Base size */
  .text-m {
    font-size: 1em;
  } /* Base size */
  .text-l {
    font-size: 0.809em;
  } /* ~1.618em */
  .text-xl {
    font-size: 1.308962em;
  } /* ~2.618em */
  .text-2xl {
    font-size: 2.117900516em;
  } /* ~4.236em */
  .text-3xl {
    font-size: 3.4267630349em;
  } /* ~6.854em */
  .text-4xl {
    font-size: 5.5445025904em;
  } /* ~11.090em */
}
@media (max-width: 800px) {
  :root {
    --side-width: 0;
  }
}
/* Box Sizing
--------------------------------------------------------------*/
.mainframe {
  box-sizing: border-box;
}

/* first design For mobile phones: */
/*--------------------------------------------------------------
## Layouts
--------------------------------------------------------------*/
/* HTML & Body Defaults
--------------------------------------------------------------*/
html {
  scroll-behavior: smooth;
  /* Custom cubic-bezier easing */
  scroll-behavior: cubic-bezier(0.42, 0, 0.58, 1);
}

body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font: 1em "thasadith";
}

html, body {
  background-color: #111;
}

/* Mainframe Structure
--------------------------------------------------------------*/
.mainframe {
  padding-right: var(--side-width);
}

.maincontent {
  position: relative;
  background-color: var(--bk);
  z-index: 2;
}

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/
canvas {
  position: fixed;
  top: 0;
  left: 0;
  border: 0;
  pointer-events: none;
}

/* Languages Bar
--------------------------------------------- */
.languages-bar {
  position: absolute;
  top: 11px;
  right: 11px;
  box-sizing: border-box;
  z-index: 999;
}

/* .languages-bar div {
    padding: 7px;
    background: #f70;
    color: #111;
    box-sizing: border-box;
    box-shadow: inset 0 0 11px #333;
    text-shadow: 0 0 1px #fff;
}
.languages-bar div a ,
.languages-bar div a:visited {
    color: #111;
    text-decoration: none;
} */
/* Age Display
--------------------------------------------- */
#age {
  position: absolute;
  left: 11px;
  top: 11px;
  color: var(--orange);
  letter-spacing: 1vw;
  font-size: 1vw;
  z-index: 9999;
}

#jibrish-data {
  position: absolute;
  left: 3vw;
  top: 86vh;
  color: #f93;
  z-index: 999;
  letter-spacing: 2px;
  opacity: 0.7;
}

/* Widggets
--------------------------------------------- */
/*--------------------------------------------------------------
# Format
--------------------------------------------------------------*/
/* Code for Firefox */
::-moz-selection {
  color: #333;
  background: #f93;
}
::-moz-selection,
::selection {
  color: #333;
  background: #f93;
}

/* Page Layouts
--------------------------------------------- */
.first-page {
  padding: 3vh 3vw;
  margin: 0 0;
  min-height: 100vh;
  background: #111;
  box-sizing: border-box;
  transition: 0.23s;
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
}

.first-page .content {
  position: relative;
  color: #f93;
  /* font-size: 3.7em; */
  text-align: center;
  text-transform: uppercase;
  /* 	text-shadow: -1px 2px 1px #000,
  							 2px 2px 1px #ddd; */
}

.page_section {
  padding: 3vh 3vw;
  margin: 0 0;
  min-height: 100vh;
  box-sizing: border-box;
  transition: 0.23s;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.page_section__content {
  position: relative;
  text-align: left;
  padding: 12vh 12vw;
  box-sizing: border-box;
}

.page {
  padding: 3vh 3vw;
  margin: 0 0;
  min-height: 100vh;
  background: #111;
  box-sizing: border-box;
  transition: 0.23s;
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page .content {
  position: relative;
  text-align: left;
  padding: 23vh 12vw;
  /* 	text-shadow: -1px 2px 1px #000,
  							 2px 2px 1px #ddd; */
}

.col.r .link-wrapper {
  display: block;
  margin: 7px;
}

.col.r .link-wrapper a,
.col.r .link-wrapper a:visited {
  position: relative;
  color: var(--text-orange);
  text-decoration: none;
  font-size: var(--fontsize-small);
  font-style: normal;
  font-weight: bold;
  padding: 3px;
  cursor: default;
  transition: 0.33s;
}

.col.r .link-wrapper a:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background: var(--text-orange);
  transition: 0.23s;
}

.col.r .link-wrapper a:hover:after {
  /* 	width: 3em; */
  animation: 0.37s linear 0.1s slide-underline forwards;
}

@keyframes slide-underline {
  0% {
    left: 0;
    width: 0;
  }
  50% {
    left: 0;
    width: 100%;
  }
  100% {
    left: 100%;
    width: 0;
  }
}
div.bk {
  position: fixed;
  inset: 0;
  opacity: 0.03;
  pointer-events: none;
  z-index: 999;
  background: url("../img/noise.jpg");
  /* 	background:url('https://i.gifer.com/RpdC.gif'); */
}

div.bk-2 {
  position: fixed;
  inset: 0;
  opacity: 0.07;
  pointer-events: none;
  z-index: 999;
  /* 	background:url('https://i.gifer.com/RpdC.gif'); */
  /* 	background:url('https://i.gifer.com/2Bap.gif'); */
  background: url("../img/noise-1.gif");
}

/* Second Page Layout
    Side by side columns with parallel effect
--------------------------------------------- */
.parallel-content {
  top: 0;
  left: 0;
  width: 100%;
  /* 	pointer-events: none; */
}

.row {
  display: flex;
  position: relative;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.col {
  flex: 50%;
}

.col.l {
  flex: 1 0 0px;
}

.col.r {
  flex: 1 0 0px;
  /* 	gap: 23px; */
}

.sticky {
  position: sticky;
  top: 37px;
  /* 	height: 100vh; */
}

.column {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: calc(100vh - 37px);
  background: #FF6F00;
}

.column .title {
  position: absolute;
  left: 0;
  top: 3em;
  width: 100%;
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
}

.column .footer {
  position: absolute;
  left: 0;
  bottom: 3em;
  width: 100%;
  height: 1em;
  font-size: 1.2em;
  text-align: center;
}

.column .corners {
  position: absolute;
  flex: none;
  inset: 23px;
  pointer-events: none;
  z-index: 1;
}

.column .corners .box {
  position: absolute;
  width: 11px;
  height: 11px;
  border: 1px solid #000;
}

.column .corners .box.tl {
  top: 0;
  background: #000;
}

.column .corners .box.tr {
  right: 0;
}

.column .corners .box.bl {
  left: 0;
  bottom: 0;
}

.column .corners .box.br {
  right: 0;
  bottom: 0;
  background: #000;
}

.icon-frame {
  position: relative;
  width: 13em;
  height: 13em;
  /* 	border: 11px solid #333; */
  /* 	background: #1357; */
  padding: 0;
  overflow: hidden;
}

.viewport {
  position: relative;
  transition: transform 0.7s;
  /* 	width: 12em; */
  /* 	height: 12em; */
  /* 	display: flex;
  	justify-content: center;
  	align-items: center; */
  /* 	overflow: hidden; */
}

.icon-frame .slide {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13em;
  height: 13em;
  /* 	background: #00f7; */
}

.icon-frame .slide i {
  font-size: 12em;
}

.boxes > div.box {
  padding: 123px 123px;
  height: 25vh;
  z-index: 11;
  color: #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
}

.boxes .frame {
  width: 32vw;
  /* background: #333; */
  /* text-align: right; */
}

.boxes .frame h1 {
  margin: 0;
  font-size: 5vw;
  line-height: 5vh;
  margin-bottom: 3vh;
}

.boxes .frame h5 {
  margin: 0;
  font-size: 1.3vh;
}

.boxes .frame p {
  margin: 0;
  font-size: 2.3vh;
}
/*# sourceMappingURL=../maps/index.css.map */