:root {
	--lightblue: #449170; 
	--blue: #2c3f36; 
}

body {
    font-family: 'Poppins', sans-serif;
	color: #555; 
	background: transparent url(/layout/proctogo/img/sfondo.jpg) center center no-repeat fixed; 
	background-size: cover;
	font-size: 110%;
	margin: 0;
	line-height: 1.6em;
}
/*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/proctogo/img/logo.svg) center center no-repeat; width:300px; height:160px; margin:0 auto;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/proctogo/img/06-facebook.svg) center center no-repeat;background-size: contain;}
#twittericon {	background: url(/layout/proctogo/img/03-twitter.svg) center center no-repeat;background-size: contain;}
#linkedinicon {	background: url(/layout/proctogo/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:#fff; text-shadow: 0 0 2px rgba(255,255,255,0.6); }
#footer-wrapper a{	 color:#fff;  }
#footer-wrapper a:hover{	 color:#fff;  }

#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: 700px) {
	.logo-box {width:400px; height: 260px;}
}
@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}
}