/*
	=======================================
	FONTS IMPORT
	=======================================
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


/*
	=======================================
	DEFAULT VARIABLES
	=======================================
*/
:root {
	/* text sizes */
	--content-text-smallest: 1.2em;
	--main-menu-text-size: 1.8em;
	--alert-text: 1.6em;
	--main-content-text-size: 2em;
		
	--color-01: #f9f6f3;

	/* main margins and paddings*/
	--main-gap-half: 12px;
	--main-gap: 24px;
	--main-gap-double: 48px;
	--main-gap-tripple: 72px;
	--main-gap-section: 164px;
	--main-gap-section-bottom: 140px;

	/* granit */
	--color-mystic-50: #f6f9f9;
	--color-mystic-100: #e1ebec;
	--color-mystic-200: #d3e3e4;
	--color-mystic-300: #adcccc;
	--color-mystic-400: #81afaf;
	--color-mystic-500: #619596;
	--color-mystic-600: #4d7b7c;
	--color-mystic-700: #3f6465;
	--color-mystic-800: #375455;
	--color-mystic-900: #314749;
	--color-mystic-950: #212f30;

	/* mech */
	--color-siam-50: #f3f4f1;
	--color-siam-100: #e4e7e0;
	--color-siam-200: #ccd2c4;
	--color-siam-300: #acb5a1;
	--color-siam-400: #8f9a81;
	--color-siam-500: #727e64;
	--color-siam-600: #616d55;
	--color-siam-700: #464d3e;
	--color-siam-800: #3a4034;
	--color-siam-900: #33382f;
	--color-siam-950: #1a1c17;

	/* jantar */
	--color-pipi-50: #fdfaed;
	--color-pipi-100: #f8f0c9;
	--color-pipi-200: #f1e296;
	--color-pipi-300: #eace5f;
	--color-pipi-400: #e5ba3a;
	--color-pipi-500: #dd9e23;
	--color-pipi-600: #c47a1b;
	--color-pipi-700: #a3591a;
	--color-pipi-800: #85461b;
	--color-pipi-900: #6d3a1a;
	--color-pipi-950: #3e1e0a;
}

/*
	=======================================
	RESET VALUES
	=======================================
*/
* { font-weight: inherit; font-family: inherit; font-style: inherit; color: inherit; font-size: 100%; border: 0 none; outline: 0; padding: 0; margin: 0; vertical-align: top; box-sizing: inherit; }
* { transition: background 0.4s; }

/*
	=======================================
	BASE ELEMENTS DEFINITIONS
	=======================================
*/
html { scroll-behavior: smooth;  }
body { font: 10px  'Inter', "Inter"; color: #666; background: #fff;  }

strong { font-weight: 700; }
h1 { color: #888; }
h2,h3 {  font-weight: 400; color: #999; }

h1 { font-size: 5.8em; margin-bottom: var(--main-gap);  }
h2 { font-size: 3.2em;  margin-bottom: var(--main-gap);  }
h3 { font-size: 2.6em; margin-bottom: var(--main-gap-half);  }

p { font-size: 2em; line-height: 1.8em; margin-bottom: var(--main-gap); }

@media only screen and (max-width: 960px) {
	h1 { font-size: 3.2em; }
	h2 { font-size: 2.4em; }
	h3 { font-size: 2em; }
	p { font-size: 1.6em; }
}

.heading_overline { display: block; font-size: 20px; color: #ccc;  margin-bottom: var(--main-gap-half);  }

a { color: var(--color-gold-sand-400); }
a:hover { cursor: pointer; text-decoration: none; }

input, textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

/*
	=======================================
	CLEARING ELEMENT
	=======================================
*/
div.clear, div.util, div.cleaner{ display: block; clear: both; font-size: 0px; line-height: 0px; z-index: 2000; }

/*
	=======================================
	MIDDLE DIV
	=======================================
*/
.middle_w { max-width: 2200px; margin: 0 auto; position: relative; }
.middle { max-width: 1680px; margin: 0 auto; position: relative;; }
.middle_t { max-width: 1000px; margin: 0 auto; position: relative; }
.middle_st { max-width: 960px; margin: 0 auto; position: relative; }

/*
	=======================================
	SCROLL UP
	=======================================
*/
#scrollup { position: fixed; bottom: var(--main-gap); right: var(--main-gap); z-index: 9999; }
#scrollup a { display: block;  width: 45px; padding-top: 15px; padding-bottom: 15px; text-align: center; background: #f1f1f1; text-decoration: none; border-radius: 50%; }
#scrollup svg { fill: #666; transform: rotate(315deg); height: 15px; }

/*
	=======================================
	HELPERS
	=======================================
*/
.width_full { width: 100%; box-sizing: border-box; }
.width_fourty{ width: 40%; box-sizing: border-box; }
.width_half{ width: 50%; box-sizing: border-box; }
.width_eighty{ width: 80%; box-sizing: border-box; }
.width_seventy{ width: 70%; box-sizing: border-box; }
.width_sixty{ width: 60%; box-sizing: border-box; }
.width_thirty{ width: 30%; box-sizing: border-box; }
.width_quad{ width: 25%; box-sizing: border-box; }
.width_twenty{ width: 20%; box-sizing: border-box; }
.width_ten { width: 10%; box-sizing: border-box; }
.width_third{ width: 33.333%; box-sizing: border-box; }
.width_threequad{ width: 75%; box-sizing: border-box; }
.width_sixth { width: 16.6666666667%; box-sizing: border-box; }

@media only screen and (max-width: 960px) {
	.width_fourty, .width_half, .width_sixty, .width_thirty,
	.width_third, .width_quad, .width_twenty, .width_threequad, .width_ten, .width_eighty,
	.width_seventy{ width: 100%; }
	.width_sixth { width: 33.333%; }
}

.hide { display: none; }
.align_center { text-align: center; }
.align_left { text-align: left; }
.align_right { text-align: right; }
.float_right { float: right; }
.float_left { float: left; }

.margin_b { margin-bottom: var(--main-gap); }
.margin_bd { margin-bottom: var(--main-gap-double); }
.margin_bh { margin-bottom: var(--main-gap-half); }

@media only screen and (max-width: 960px) { .no_tablet { display: none; } }
@media only screen and (min-width: 960px) { .is_tablet { display: none; } }
@media only screen and (max-width: 768px) { .no_mobile { display: none; } }
@media only screen and (min-width: 768px) { .is_mobile { display: none; } }
@media only screen and (min-width: 960px) { .simulate_line { display: block; } }
@media only screen and (max-width: 1200px) {  .no_1200 { display: none; } }

sup { font-size: 0.5em; margin-top: -50%; }
.img_border_radius { border-radius: 8px; }