/* ======= RESET & BASE ======= */

@font-face {
	font-family: 'Roboto';
	font-variation-settings: 'wght' 400;
	src: url('https://ttmsystem.sk/fonts/Roboto.ttf') format('truetype');
	font-display: swap;
}

* {padding: 0; margin: 0; box-sizing: border-box;}

a {text-decoration: none; color: inherit;}

h1 {font-weight: 900; font-size: 25px;}
h2 {font-weight: 700; font-size: 18px;}
h3 {font-weight: 700; font-size: 15px;}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #f5f5f5;
    font-family: 'Roboto', sans-serif;
	color: #0e3b5a;
	font-size: 14px;
}

main {
	flex: 1;
	float: left;
	width: 100%;
}

header {
	float: left;
    width: 100%;
	color: #fff;
	background: #10828f;
    background: radial-gradient(circle, #1d7bbd 0%, #071338 100%);
}
footer {
	width: 100%;
	padding: 75px 0;
	color: #879499;
	text-align: center;
}

.copyright {
	font-size: 13px;
	font-weight: 400;
}

.container {
	margin: auto;
	max-width: 1366px;
	padding: 0 15px;
}

.flex {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	align-content: center;
}

/* ======= TYPOGRAPHY ======= */

.page-title {display: block; text-align: center; margin: auto; padding: 50px 0; color: #0e3b5a;}
.page-title span {display: block; font-size: 13px; color: #2f5875; font-weight: 500;}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ======= LOGO and MENU ======= */

.header-flex {max-width: max-content; margin: auto; padding: 75px 0; align-items: center;}

.logo 		{display: block; max-width: max-content;}
.logo a 	{display: inline-block;}
.logo img 	{display: block; width: 132px; height: 100px; margin: auto;}
.logo p 	{display: block; padding: 0 25px; font-size: 13px;}

.logo-title {
	display: block;
	max-width: 420px;
	text-align: left;
	padding: 25px 0;
	border-left: solid 1px #62afec70;
}

.logo-title h1 {display: block; padding: 0 25px;}
.logo-title span {display: block; padding: 15px 0; font-size: 14px; font-weight: 400;}


.menu * {display: block; text-align: center;}
.menu 	{max-width: max-content; margin: auto; padding-bottom: 75px;}
.menu nav 	{
	border: solid 1px #62afec70;
	padding: 7px;
}
	
.menu ul	{display: flex; flex-direction: row; justify-content: center;}
.menu li 	{margin: 5px;}
.menu a 	{width: 130px; padding: 10px; font-weight: 700; color: #fff; text-decoration: none;}
	
#selector a	{background: #0713386e;}
.menu a:hover {background: #0713386e;}
	
/***** BENEFITS SECTION *****/

.benefits {
	display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
	gap: 20px;
}

.benefits div {
	background: #fff;
	/*border: solid 1px #47718f3d;*/
	padding: 20px;
	margin: 0 10px;
}

.benefits h3 {padding: 0 0 10px 0;}
.benefits p {color: #2f5875; padding: 0 10px;}

@media screen and (max-width: 682px) {
	.menu ul {flex-direction: column;}
}

@media screen and (max-width: 480px) {
	h1 {font-size: 20px;}
	h2 {font-size: 16px;}
	h3 {font-size: 15px;}
	
	.header-flex {flex-direction: column; gap: 20px; padding: 75px 0 25px 0;}
	.logo-title {
		border-left: 0;
		max-width: 300px; 
		border-top: solid 1px #62afec70;
		text-align: center;
	}
	.logo-title h1 	 {padding: 0;}
	.logo-title span {font-size: 13px;}

}