@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400..800&display=swap');

*,
*::after,
*::before {
	box-sizing: border-box;
}
/* Page Loader */
.js .loading::before,
.js .loading::after {
	content: '';
	position: fixed;
	z-index: 1000;
}
.js .loading::before {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-bg);
}
.js .loading::after {
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	border-radius: 50%;
	opacity: 0.4;
	background: var(--color-link);
	animation: loaderAnim 0.7s linear infinite alternate forwards;

}

@keyframes loaderAnim {
	to {
		opacity: 1;
		transform: scale3d(0.5,0.5,1);
	}
}
body {
	background-color:#3FA9F5;
	margin: 0;
 	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	height: 100%;
	overflow: hidden;
	font-family: "Syne", serif;
}
main {margin: 0;padding:0;display: block;}
main .slider {width:100%;height: 100%;margin: 0;padding: 0; display: block; position: absolute; z-index: 0;}
main .main_frame {display: block;position: fixed; width: 100%; height: 100%; z-index: 1;}
main .main_frame .header {position: fixed; z-index: 1;  top:0; left: 0; right: 0;display: flex; width: 100%; max-height: 90px; margin: 0; }
main .main_frame .header h1.text_logo {display: block;   width: 33%; margin:0 auto; padding: 1em 0 0 0;text-align: center;}
main .main_frame .header h1.text_logo svg {max-height: 41px;}
main .main_frame .footer {position: fixed; z-index: 1; bottom:0; left:0; right:0; display: flex; width: 100%; margin: 0; }
main .main_frame .footer h2.logo {display: block; width: 50%; margin: 0; padding: 0 1em 1em 0; float: right;  text-align: right;}
main .main_frame .footer h2.logo svg {max-height: 128px; border:solid 3.33px #fff;}
main .main_frame .footer .menu {display: inline-flex; float: left;width: 50%;  margin: 0; padding:0 0 1em 3em;   text-align: left;}
main .main_frame .footer .menu ul {display: block; margin: 0; padding: 5em 0 0 0;}
main .main_frame .footer .menu ul li {display: inline-block; margin: 0 10px 0 0; padding: 0; text-align: center; list-style: none;}
main .main_frame .footer .menu ul li a {  font-weight: 300;  font-style: normal;color:#fff; text-decoration: none; letter-spacing: 2px;font-size: clamp(0.6rem,1vw,0.8rem);}
main .main_frame .footer .menu ul li a:hover {color:#333;}
@media screen and (max-width: 55em) {
	main .main_frame .footer .menu { padding:0 0 1em 2em;  }
	main .main_frame .footer .menu ul { padding:2.5em 0 0 0;}
	main .main_frame .footer .menu ul li {display: block; text-align: left;}

 }