/*
	=======================================
	FONTS IMPORT
	=======================================
*/
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@100;400;700&display=swap');

/*
	=======================================
	DEFAULT VARIABLES
	=======================================
*/
:root {
	/* text sizes */
	--content-text-smallest: 1.2em;
	--main-menu-text-size: 1.4em;
	--alert-text: 1.6em;
	--main-content-text-size: 1.6em;

	/* colors */
	--main-color: #ff4300;
	--main-oposite-color: #009c80;
	--main-menu-color: #001b46;
	--main-menu-act-color: #55aa6f;
	--main-link-color: #55aa6f;

	/* main margins and paddings*/
	--main-gap: 30px;
	--main-gap-half: 15px;
}

/*
	=======================================
	RESET VALUES
	=======================================
*/
* { font-weight: inherit; font-family: inherit; font-style: inherit; color: inherit; cursor: 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
	=======================================
*/
body { font: 10px  'IBM Plex Mono', "IBM+Plex+Mono"; color: #6c6c6c; background: url('../img/bg.jpg') center top no-repeat #fff; background-attachment: fixed; }

strong { font-weight: 700; }

h1,h2,h3 { margin-bottom: 0px; color: var(--main-color);  }
h1 { font-size: 4em; margin-bottom: 30px; }
.hp_heading { font-size: 5em; }

h2 { font-size: 3.4em;  margin-bottom: 30px; }
h3 { font-size: 2.6em;  margin-bottom: 15px; }

.in_page_heading { padding: 30px; background: #e2f2ef; }

p { font-size: var(--main-content-text-size); line-height: 1.6em; margin-bottom: 30px; }
ul { font-size: var(--main-content-text-size); line-height: 1.6em; }
a { color: var(-main-link-color); }
a:hover { cursor: pointer; text-decoration: none; }

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

/*
	=======================================
	SMART BUTTON BASE DEFINITION
	=======================================
*/
.smart_button {
	display: inline-block;
	padding: 14px 29px 14px 29px; font-size: var(--main-content-text-size); margin-bottom: 30px; text-decoration: none;
	background: #333;
	color: #fff
}

@media only screen and (min-width: 768px) {
	.smart_button:hover { background-color: var(--main-oposite-color); }
}

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

/*
	=======================================
	MIDDLE DIV
	=======================================
*/
.middle { max-width: 1400px; margin: 0 auto; position: relative; }

/*
	=======================================
	MAIN BODY -
	top padding is sam as header height
	=======================================
*/
body { padding-top: 0px; }

/*
	=======================================
	HEADER
	=======================================
*/
header { padding: 15px 0px 15px 0px; position: absolute; top: 0px; left: 0px; z-index: 100; width: 100%; }

.header_icons {  position: absolute; top: 50%; right: 0px; transform: translateY(-50%); }
.header_icon { float: left; width: 70px; }
.header_icon img { height: 45px; }
.header_icon a { display: block; font-size: 1.4em; text-align: center; text-decoration: none; }
.header_icon span { display: block; }

#img_logo { height: 60px; }

/*
	=======================================
	FOOTER
	=======================================
*/
footer { padding: 90px 0px 90px 0px; background: #e2f2ef; }
footer h3, footer a { color: #009c80; }
footer img { height: 30px; margin-right: 15px; }
/*
	=======================================
	SCROLL UP
	=======================================
*/
#scrollup { position: fixed; bottom: 30px; right: 30px; z-index: 100; }
#scrollup a { display: block; height: 45px; width: 45px; background: url('../img/icon-scrollup.png') center center no-repeat #cecece; text-decoration: none; }

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

@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_seventy{ width: 100%; }
}

.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_bottom_full { margin-bottom: var(--main-gap);}

@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; } }

sup { font-size: 0.5em; margin-top: -50%; }