:root {
	--lightblue: #449170; 
	--blue: #2c3f36; 
}

body {
    font-family: 'Poppins', sans-serif;
	color: #555; 
	font-size: 110%;
	margin: 0;
	line-height: 1.6em;
}

body::before {
  content: "";
  position: fixed;
	top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;  background: transparent url(/layout/atlas/img/sfondo.png) center center repeat; 
  background-size: 20%;
  transform: rotate(15deg); /* Ruota lo sfondo */
  transform-origin: center;
  z-index: -1; /* Dietro al contenuto */
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.5); /* 0.4 = schiarisce del 40% */
  pointer-events: none;
   z-index: -1;
}
/*100% height*/
html, body { min-height: 100%; width: 100%; }
#body-wrapper {display:flex; flex-direction:column; height: 100%;  min-height:100vh}
#content-wrapper { display:flex; flex-direction: column; flex: 1 0 0; }
.maincontainer {flex:1 0 0; width: 100%;}
/**/

#menu-header { display:none; }
#header-wrapper {margin-bottom: 12px; }
#mobile { display: block }
.bussola {padding: 0 12px;}
/*100% height*/
html, body { height: 100%}

a { text-decoration: none; color:var(--blue) }
a[href]:hover { color:var(--lightblue) }

.titolopagina { max-width:1140px ; margin: 0 auto; padding: 0 12px;}

h1,h2,h3 { font-family: 'Nanum Gothic', sans-serif; color: #222 }

#menu-header {margin: 12px 0 0 0;  }
.menu-btn span {background: #fff !important;}
.menu-btn a {color: var(--purple);}
.hamburgher-menu .menu-title { background: var(--blue); height:44px }
.menu-mf span {color:var(--blue)}
.menu-mf .active {color:var(--purple); box-shadow: -3px 0 3px -3px rgba(150,150,150,0.3), 3px 0 3px -3px rgba(150,150,150,0.3)}
#menu-header .menu-mf-wrapper {background: rgba(255,255,255,0.95)}
#header-container a {margin: 0 auto}
.logo-box { background: transparent url(/layout/atlas/img/logo.svg) center center no-repeat; width:300px; height:160px; margin:0;transition: all .15s ease-in; }

/* .is-page .logo-box {height: 200px;} */

.maincontainer {max-width: 1440px; margin: 0 auto; background: rgba(255,255,255,0.85);  box-sizing: border-box;}
#payoff { margin:30px 0 0 0;text-shadow: 0px 0px 8px rgba(255, 255, 255, 1); text-align: center;font-size: 10vw; font-weight: bold; }
#payoff a{ color:var(--purple)}

.socialbox {display:flex; justify-content: center; margin: 0 0 16px 0}

.social { width: 48px; height:48px; background: red; display: block; margin: 1px}

.socialicon {height: 40px;width: 40px;display: inline-block;background-color: rgba(0,0,0,0.1);margin: 10px 5px; transition: all .15s ease-in; }
.socialicon:hover {transform: rotate(-5deg) ;}
.socialicon span {display:none}
#facebookicon {	background: url(/layout/atlas/img/06-facebook.svg) center center no-repeat;background-size: contain;}
#twittericon {	background: url(/layout/atlas/img/03-twitter.svg) center center no-repeat;background-size: contain;}
#linkedinicon {	background: url(/layout/atlas/img/11-linkedin.svg) center center no-repeat;background-size: contain;}
#instagramicon {	background: url(/layout/common/Social/color/instagram.svg) center center no-repeat;background-size: contain;}
#enicon {	background: url(/layout/common/Social/color/eng.svg) center center no-repeat;background-size: contain;}

#footer-wrapper {	padding: 36px 0; text-align: center; color:#666; text-shadow: 0 0 2px rgba(255,255,255,0.6); }
#footer-wrapper a{	 color:#00587f;  }
#footer-wrapper a:hover{	 color:#01354b;  }

#subfooter-wrapper {color: #555; min-height: 160px; padding: 20px;text-shadow: 1px 0px 4px rgba(255, 255, 255, 1);}
#subfooter-wrapper .lights {color: #999;}
@media (min-width: 500px) {
	.logo-box {width:400px; height: 260px; margin: 0 auto;}
}
@media (min-width: 920px) {
	#menu-header { display: block; }
	#menu-header .menu-mf .flexwrapliv1 .itemliv1 > a,#menu-header .flexwrapliv1 .itemliv1 > span   {padding: 12px 22px;  text-shadow:    -1px -1px 0 #fff,    1px -1px 0 #fff,   -1px 1px 0 #fff,    1px 1px 0 #fff,0px 0px 8px rgba(255, 255, 255, 1);  box-shadow: 0px 0px 6px 0px rgba(255, 255, 255, 0.6); min-width: 90px; display: block; text-align: center;}
	#menu-header .menu-mf-wrapper .flexwrapliv1 .itemliv1:hover a { color:var(--purple);box-shadow: -3px 0 3px -3px rgba(130,130,130,0.4), 3px 0 3px -3px rgba(130,130,130,0.4)}	
	
	#menu-header .menu-mf-wrapper .flexwrapliv1 .itemliv1:hover a span {color:var(--purple);; }
	
	#menu-header .menu-mf-wrapper .flexwrapliv1 .itemliv1:hover > span {color:var(--purple); box-shadow: -3px 0 3px -3px rgba(130,130,130,0.4), 3px 0 3px -3px rgba(130,130,130,0.4);}

	#menu-header .menu-mf-wrapper .flexwrapliv1 span, #menu-header .menu-mf-wrapper .flexwrapliv1 a {transition: all .15s ease-in;}
	#mobile { display: none}
	
	#header-container {display:flex; max-width: 1140px; margin: 0 auto; align-items:center;}
	#payoff {flex:1 0 250px; order:2; font-size: 4.5em; line-height:2.5em; margin: 0}
	#logo {flex:0 0 250px; order:1; background-size: contain;}
	
.responsive-menu li { text-align: center; padding: 10px 0; line-height: 1.1em}
}