:root {
 
	--font-1    : "Inter", sans-serif;
	--font-2    : "Manrope", sans-serif;

	/* monospace
	*/
	--font-mono : Consolas, "Andale Mono", Courier, "Courier New", monospace;
}
/* ------------------------------------------------------------------- 
 * ## colors
 * ------------------------------------------------------------------- */
:root {

	/* color-1(#24A89B)
	 * color-2(#eddea4)
	 */
	--color-1                      : rgb(255, 255, 255);
	--color-2                      : hsla(48, 67%, 79%, 1);

	/* theme color variations*/
	--color-1-lighter              : hsla(174, 65%, 60%, 1);
	--color-1-light                : hsla(174, 65%, 50%, 1);
	--color-1-dark                 : hsla(174, 65%, 35%, 1);
	--color-1-darker               : hsla(174, 65%, 20%, 1);
	--color-2-lighter              : hsla(48, 67%, 99%, 1);
	--color-2-light                : hsla(48, 67%, 89%, 1);
	--color-2-dark                 : hsla(48, 67%, 69%, 1);
	--color-2-darker               : hsla(48, 67%, 59%, 1);

	/* feedback colors
	 * color-error(#ffd1d2), color-success(#c8e675), 
	 * color-info(#d7ecfb), color-notice(#fff099)
	 */
	--color-error                  : hsla(359, 100%, 91%, 1);
	--color-success                : hsla(76, 69%, 68%, 1);
	--color-info                   : hsla(205, 82%, 91%, 1);
	--color-notice                 : hsla(51, 100%, 80%, 1);
	--color-error-content          : hsla(359, 50%, 50%, 1);
	--color-success-content        : hsla(76, 29%, 28%, 1);
	--color-info-content           : hsla(205, 32%, 31%, 1);
	--color-notice-content         : hsla(51, 30%, 30%, 1);

	/* shades 
	 * generated using 
	 * Tint & Shade Generator 
	 * (https                      ://maketintsandshades.com/)
	 */
	--color-black                  : #000000;
	--color-gray-19                : #020202;
	--color-gray-18                : #040404;
	--color-gray-17                : #060607;
	--color-gray-16                : #080809;
	--color-gray-15                : #0a0b0b;
	--color-gray-14                : #0c0d0d;
	--color-gray-13                : #0e0f0f;
	--color-gray-12                : #101112;
	--color-gray-11                : #121314;
	--color-gray-10                : #141516;
	--color-gray-9                 : #2c2c2d;
	--color-gray-8                 : #434445;
	--color-gray-7                 : #5b5b5c;
	--color-gray-6                 : #727373;
	--color-gray-5                 : #8a8a8b;
	--color-gray-4                 : #a1a1a2;
	--color-gray-3                 : #b9b9b9;
	--color-gray-2                 : #d0d0d0;
	--color-gray-1                 : #e8e8e8;
	--color-white                  : #ffffff;
	--yellow					   : #ffd700;
	--gold						   : #FFD700;
	--black-usefull				   :#191c20;
	/* text
	 */
	--color-text                   : var(--color-gray-5);
	--color-text-dark              : var(--color-white);
	--color-text-light             : var(--color-gray-6);
	--color-placeholder            : var(--color-gray-6);

	/* buttons
	 */
	--color-btn                    : var(--color-gray-9);
	--color-btn-text               : var(--color-white);
	--color-btn-hover              : var(--color-white);
	--color-btn-hover-text         : var(--color-black);
	--color-btn-primary            : var(--color-1);
	--color-btn-primary-text       : var(--color-white);
	--color-btn-primary-hover      : var(--color-1-dark);
	--color-btn-primary-hover-text : var(--color-white);
	--color-btn-stroke             : var(--color-white);
	--color-btn-stroke-text        : var(--color-white);
	--color-btn-stroke-hover       : var(--color-white);
	--color-btn-stroke-hover-text  : var(--color-black);

	/* preloader
	 */
	--color-preloader-bg           : var(--color-gray-12);
	--color-loader                 : white;
	--color-loader-light           : rgba(255, 255, 255, 0.1);

	/* others
	 */
	--color-body                   : var(--color-gray-12);
	--color-border                 : rgba(255, 255, 255, .05);
	--border-radius                : 3px;
}

/* ------------------------------------------------------------------- 
 * ## spacing and typescale
 * ------------------------------------------------------------------- */
:root {

	/* spacing
	 * base font size: 18px 
	 * vertical space unit : 32px
	 */
	--base-size        : 62.5%;
	--multiplier       : 1;
	--base-font-size   : calc(1.8rem * var(--multiplier));
	--space            : calc(3.2rem * var(--multiplier));

	/* vertical spacing 
	 */
	--vspace-0_125     : calc(0.125 * var(--space));
	--vspace-0_25      : calc(0.25 * var(--space));
	--vspace-0_375     : calc(0.375 * var(--space));
	--vspace-0_5       : calc(0.5 * var(--space));
	--vspace-0_625     : calc(0.625 * var(--space));
	--vspace-0_75      : calc(0.75 * var(--space));
	--vspace-0_875     : calc(0.875 * var(--space));
	--vspace-1         : calc(var(--space));
	--vspace-1_25      : calc(1.25 * var(--space));
	--vspace-1_5       : calc(1.5 * var(--space));
	--vspace-1_75      : calc(1.75 * var(--space));
	--vspace-2         : calc(2 * var(--space));
	--vspace-2_5       : calc(2.5 * var(--space));
	--vspace-3         : calc(3 * var(--space));
	--vspace-3_5       : calc(3.5 * var(--space));
	--vspace-4         : calc(4 * var(--space));
	--vspace-4_5       : calc(4.5 * var(--space));
	--vspace-5         : calc(5 * var(--space));

	/* type scale
	 * ratio 1         :2 | base: 18px
	 * -------------------------------------------------------
	 *
	 * --text-display-3 = (77.40px)
	 * --text-display-2 = (64.50px)
	 * --text-display-1 = (53.75px)
	 * --text-xxxl      = (44.79px)
	 * --text-xxl       = (37.32px)
	 * --text-xl        = (31.10px)
	 * --text-lg        = (25.92px)
	 * --text-md        = (21.60px)
	 * --text-size      = (18.00px) BASE
	 * --text-sm        = (15.00px)
	 * --text-xs        = (12.50px)
	 *
	 * ---------------------------------------------------------
	 */
	--text-scale-ratio : 1.2;
	--text-size        : var(--base-font-size);
	--text-xs          : calc((var(--text-size) / var(--text-scale-ratio)) / var(--text-scale-ratio));
	--text-sm          : calc(var(--text-xs) * var(--text-scale-ratio));
	--text-md          : calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
	--text-lg          : calc(var(--text-md) * var(--text-scale-ratio));
	--text-xl          : calc(var(--text-lg) * var(--text-scale-ratio));
	--text-xxl         : calc(var(--text-xl) * var(--text-scale-ratio));
	--text-xxxl        : calc(var(--text-xxl) * var(--text-scale-ratio));
	--text-display-1   : calc(var(--text-xxxl) * var(--text-scale-ratio));
	--text-display-2   : calc(var(--text-display-1) * var(--text-scale-ratio));
	--text-display-3   : calc(var(--text-display-2) * var(--text-scale-ratio));

	/* default button height
	 */
	--vspace-btn       : var(--vspace-2);
}

/* on mobile devices below 600px, change the value of '--multiplier' 
 * to adjust the values of base font size and vertical space unit.
 */
@media screen and (max-width: 600px) {
	:root {
		--multiplier : .875;
	}
}

/* ------------------------------------------------------------------- 
 * ## grid variables
 * ------------------------------------------------------------------- */
:root {

	/* widths for rows and containers
	 */
	--width-full     : 100%;
	--width-max      : 1200px;
	--width-wide     : 1400px;
	--width-wider    : 1600px;
	--width-widest   : 1800px;
	--width-narrow   : 1000px;
	--width-narrower : 800px;
	--width-grid-max : var(--width-max);

	/* gutter
	 */
	--gutter         : 2rem;
}

/* on medium screen devices
 */
@media screen and (max-width: 1200px) {
	:root {
		--gutter : 1.8rem;
	}
}

/* on mobile devices
 */
@media screen and (max-width: 600px) {
	:root {
		--gutter : 1rem;
	}
}


 /* ------------------------------------------------------------------- 
  * responsive:
  * project-wide shared styles
  * ------------------------------------------------------------------- */
  @media screen and (max-width: 1000px) {
	.text-display-title {
		--text-multiplier : .9286;
	}
}

@media screen and (max-width: 900px) {
	.text-display-title {
		--text-multiplier : .8214;
	}
}

@media screen and (max-width: 800px) {
	.section-header {
		max-width : 600px;
	}

	.text-display-title br {
		display : none;
	}
}

@media screen and (max-width: 600px) {
	.section-header.has-bottom-sep::before {
		width : 300px;
	}

	.text-display-title {
		--text-multiplier : .75;
	}
}

@media screen and (max-width: 500px) {
	.text-display-title {
		--text-multiplier : .6786;
	}
}

@media screen and (max-width: 400px) {
	.section-header.has-bottom-sep::before {
		width : 240px;
	}

	.text-pretitle {
		font-size : var(--text-xs);
	}

	.text-display-title {
		--text-multiplier : .6071;
	}
}


/* ===================================================================
 * # PAGE WRAP
 *
 *
 * ------------------------------------------------------------------- */
.s-pagewrap {
	--header-height : 5.2rem;
	display         : flex;
	flex-direction  : column;
	min-height      : 1%;
	overflow        : hidden;
	position        : relative; 
	transition: transform 0.2s;
}


/* ===================================================================
 * # SITE HEADER
 *
 *
 * ------------------------------------------------------------------- */
.s-header {
	--logo-width : 87px;
	--box-shadow : 0 1px 1px rgba(0, 0, 0, 0.06),
		0 2px 2px rgba(0, 0, 0, 0.06),
		0 4px 4px rgba(0, 0, 0, 0.06),
		0 8px 8px rgba(0, 0, 0, 0.06);
	padding          : 0px 0px 0px 0px;
	margin           : 0px 0px 0px 0px;
	z-index          : 100;
	display          : flex;
	height           : var(--header-height);
	background-color : var(--color-body);
	border-bottom    : 1px solid var(--color-border);
	width            : 100%;
	position         : fixed;
	top              : 0;
	left             : 0;
}

.s-header__block {
	z-index : 101;
}

/* --------------------------------------------------------------------
 * ## logo
 * -------------------------------------------------------------------- */
.s-header__logo {
	z-index  : 3;
	position : absolute;
	top      : 0;
	left     : 0;
}

.s-header__logo a {
	display : block;
	margin  : 0;
	padding : 0;
	outline : 0;
	border  : none;
}

.s-header__logo img {
	width          : var(--logo-width);
	margin         : 0;
	vertical-align : bottom;
}

/* --------------------------------------------------------------------
 * ## main navigation
 * -------------------------------------------------------------------- */
.s-header__nav-wrap {
	justify-content : center;
	align-items     : flex-start;
}

.s-header__nav a {
	display             : block;
	font-size           : 10px;
	font-weight         : 400;
	line-height         : calc(var(--header-height) - 1px);
	text-transform      : uppercase;
	letter-spacing      : .4em;
	color               : rgba(255, 255, 255, 0.5);
	padding             : 0 2.8rem;
	transition-property : color, background-color;
}

.s-header__nav a:focus,
.s-header__nav a:hover {
	color : white;
}

.s-header__nav .current a {
	background-color : var(--color-gray-9);
	color            : var(--color-white);
}

.s-header__nav ul {
	list-style  : none;
	display     : flex;
	flex-flow   : row nowrap;
	margin      : 0;
	padding     : 0;
	border-left : 1px solid var(--color-border);
}

.s-header__nav li {
	padding-left : 0;
	border-right : 1px solid var(--color-border);
}


/* --------------------------------------------------------------------
 * ## header social
 * -------------------------------------------------------------------- */
.s-header__social {
	list-style : none;
	display    : flex;
	margin     : 0;
	transform  : translate(0, -50%);
	position   : absolute;
	top        : calc(50% - .2rem);
	right      : 2rem;
}

.s-header__social li {
	padding-left : 0;
	margin-right : 1rem;
	line-height  : 1;
}

.s-header__social li:last-child {
	margin-right : 0;
}

.s-header__social svg {
	height : 2.4rem;
	width  : 2.4rem;
}

.s-header__social svg path {
	fill : white;
}

/* --------------------------------------------------------------------
 * ## mobile menu toggle
 * -------------------------------------------------------------------- */
.s-header__menu-toggle {
	display  : none;
	width    : 6.8rem;
	height   : var(--header-height);
	position : absolute;
	top      : 0;
	right    : .8rem;
}

.s-header__menu-toggle span {
	display          : block;
	background-color : white;
	width            : 22px;
	height           : 1px;
	margin-top       : -1px;
	font             : 0/0 a;
	text-shadow      : none;
	color            : transparent;
	transition       : background-color 0.2s ease-in-out;
	position         : absolute;
	right            : 23px;
	top              : 50%;
	bottom           : auto;
	left             : auto;
}

.s-header__menu-toggle span::before,
.s-header__menu-toggle span::after {
	content             : "";
	width               : 100%;
	height              : 100%;
	background-color    : inherit;
	transition-duration : 0.2s, 0.2s;
	transition-delay    : 0.2s, 0s;
	position            : absolute;
	left                : 0;
}

.s-header__menu-toggle span::before {
	top                 : -8px;
	transition-property : top, transform;
}

.s-header__menu-toggle span::after {
	bottom              : -8px;
	transition-property : bottom, transform;
}

/* is clicked 
 */
.s-header__menu-toggle.is-clicked span {
	background-color : rgba(255, 255, 255, 0);
}

.s-header__menu-toggle.is-clicked span::before,
.s-header__menu-toggle.is-clicked span::after {
	background-color : white;
	transition-delay : 0s, 0.2s;
}

.s-header__menu-toggle.is-clicked span::before {
	top       : 0;
	transform : rotate(45deg);
}

.s-header__menu-toggle.is-clicked span::after {
	bottom    : 0;
	transform : rotate(-45deg);
}

/* ------------------------------------------------------------------- 
 * responsive:
 * site-header
 * ------------------------------------------------------------------- */
@media screen and (max-width: 1100px) {
	.s-header__nav a {
		font-size : 9px;
		padding   : 0 2rem;
	}
}

@media screen and (max-width: 1500px) {
	.s-header {
		display          : block;
		border           : none;
		background-color : transparent;
		padding			 : 0px 0px 0px 0px;
	}

	.s-header__block {
		width            : 100%;
		height           : var(--header-height);
		background-color : var(--color-body);
		border-bottom    : 1px solid var(--color-border);
		box-shadow       : var(--box-shadow);
		padding			 : 0px 0px 0px 0px;
	}

	.s-header__logo {
		left : 0rem;
	}

	.s-header__nav-wrap {
		display          : block;
		width            : 100%;
		max-width        : none;
		transform        : scaleY(0);
		transform-origin : center top;
		padding          : var(--vspace-2) 3.2rem var(--vspace-2);
		background-color : var(--color-body);
		border-bottom    : 1px solid var(--color-border);
		box-shadow       : var(--box-shadow);
	}

	.s-header__nav,
	.s-header__social {
		transform  : translateY(-2rem);
		opacity    : 0;
		visibility : hidden;
	}

	.s-header__nav {
		padding : 0 0 var(--vspace-1_5);
	}

	.s-header__nav a {
		font-family    : var(--font-2);
		font-size      : var(--text-lg);
		font-weight    : 300;
		line-height    : var(--vspace-1);
		text-transform : none;
		letter-spacing : 0;
		padding        : var(--vspace-0_375) 0;
		color          : white;
	}

	.s-header__nav a:focus,
	.s-header__nav a:hover {
		color : rgba(255, 255, 255, 0.6);
	}

	.s-header__nav .current a {
		background-color : transparent;
		color            : var(--color-1);
	}

	.s-header__nav ul {
		display          : block;
		background-color : transparent;
		text-align       : left;
		margin           : 0;
		border           : none;
	}

	.s-header__nav ul li {
		display : block;
		border  : none;
	}

	.s-header__social {
		position : static;
	}

	.s-header__menu-toggle {
		display : block;
		right   : .8rem;
	}

	.menu-is-open .s-header {
		height : auto;
	}

	.menu-is-open .s-header__block {
		box-shadow : none;
	}

	.menu-is-open .s-header__nav-wrap {
		transform        : scaleY(1);
		transition       : transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
		transition-delay : 0s;
	}

	.menu-is-open .s-header__nav,
	.menu-is-open .s-header__social {
		transform        : translateY(0);
		opacity          : 1;
		visibility       : visible;
		transition       : all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
		transition-delay : .4s;
	}
}

div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
p,
blockquote,
th,
td {
	margin  : 0;
	padding : 0;
}
*,
*::before,
*::after {
	box-sizing : inherit;
}

body {
	font-family : var(--font-1);
	font-size   : var(--base-font-size);
	font-weight : 400;
	/* line-height : var(--vspace-1); */
	color       : var(--color-text);
}

.header{
    height: 72px;
 }
 @media screen and (min-width: 1500px) {
    .header{
        display: flex;
        width: 100%;
        justify-content: space-between;
        height: auto;
     }

    
 }
.header--hidden {
    transform: translateY(calc(-1* var(--header-height)));
    box-shadow: none;
}

li {
	display : list-item;
}









































/* ------------------------ */
*
{
	margin: 0;
	padding: 0;
}
.navbarScroll.navbarDark {
    padding: 0.005%;
    background-color: rgb(0, 0, 0);
    
}

html
{
	scroll-behavior: smooth;
	overflow-x: hidden;
	background-color: black;
}

body
{
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	position: relative;
	width: 100%;
	background-color: rgb(255, 255, 255);
}

ol
{
	list-style: none;
}

#loading_screen
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #0b1b2e;
	z-index: 10002;
}

#safari_warning
{
	position: fixed;
	bottom: 0;
	left: 0;
	width: calc(100% - 100px);
	background-color: #e72e2e;
	z-index: 10001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px 50px 18px 50px;
}

#safari_warning p
{
	font-family: proxima_nova_semi_bold;
	font-size: 16px;
	color: white;
	text-align: center;
	line-height: 22px;
}

#lcp
{
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 10000;
	display: flex;
}

#lcp p
{
	font-family: proxima_nova_semi_bold;
	font-size: 16px;
	color: black;
	opacity: 0.01;
}

#main
{
	display: flex;
	flex-direction: column;
}

.section
{
	display: flex;
	justify-content: center;
	align-items: center;
}

.content
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	z-index: 10;
	flex-direction: column;
	padding: 0px 200px;
	max-width: 1200px;
	margin-right: auto;
	margin-left: auto;
}

.content.leaning
{
	margin-top: calc(clamp(100px, 7vw, 140px) + 3.3vw);
	margin-bottom: calc(clamp(100px, 7vw, 140px) - 3.3vw);
}

@media screen and (max-width: 1400px) { .content { padding: 0px 150px; } }
@media screen and (max-width: 1150px) { .content { padding: 0px 100px; } }
@media screen and (max-width: 1020px) { .content { padding: 0px 50px; } }
@media screen and (max-width: 500px) { .content { padding: 0px 25px; } }

.section_end
{
	height: 8vw;
	width: 100%;
	margin: -4vw 0px -4vw 0px;
	transform: rotate(-4deg) scale(1.2, 1);
}

.link
{
	display: inline-block;
	position: relative;
	color: var(--light_blue);
	text-decoration: none;
}

.link:hover
{
	color: var(--light_blue);
}

.link::before
{
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 1px;
	top: 75%;
	left: 0;
	background-color: var(--light_blue);
	transform: scaleX(0);
	transition: transform 0.3s ease;
}

.link:hover::before
{
	transform: scaleX(0.999);
}

.button
{
	display: flex;
	justify-content: center;
	align-items: center;
	pointer-events: all;
	border: 2px solid var(--gold);
	padding: 15px 35px 15px 40px;
	border-radius: 7px;
	font-family: raleway_semi_bold;
	font-size: 16px;
	color: var(--gold);
	text-decoration: none;
	background-color: none;
	transition: background-color 0.3s ease;
}

.button:hover
{
	background-color: var(--white);
}

.button .button_arrow
{
	height: 13px;
	margin-left: 15px;
	fill: none;
	stroke: var(--gold);
	stroke-width: 3px;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.button .button_arrow .path_1, .button .button_arrow .path_2
{
	transition: all 0.3s ease;
}

.button:hover .button_arrow .path_1
{
	d: path("M8.85 1.5 L8.85 15.89");
	d: "M8.85 1.5 L8.85 15.89";
}

.button:hover .button_arrow .path_2
{
	d: path("M16.19 8.54 8.85 15.89 1.5 8.54");
	d: "M16.19 8.54 8.85 15.89 1.5 8.54";
}

.in_animation
{
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.section_title
{
	font-family: proxima_nova_bold;
	font-size: 40px;
	margin-bottom: 70px;
	text-align: center;
}

.safari_fix
{
	filter: none !important;
}

.safari_fix:hover
{
	filter: none !important;
}