/* CSS Document */
/* 

##     ##    ###    #### ##    ##    ##     ## ######## ##    ## ##     ## 
###   ###   ## ##    ##  ###   ##    ###   ### ##       ###   ## ##     ## 
#### ####  ##   ##   ##  ####  ##    #### #### ##       ####  ## ##     ## 
## ### ## ##     ##  ##  ## ## ##    ## ### ## ######   ## ## ## ##     ## 
##     ## #########  ##  ##  ####    ##     ## ##       ##  #### ##     ## 
##     ## ##     ##  ##  ##   ###    ##     ## ##       ##   ### ##     ## 
##     ## ##     ## #### ##    ##    ##     ## ######## ##    ##  #######  

*/

.mainmenu-wrapper { opacity: 0; position: fixed; top: 0; left: 0; width: 100vw; padding: 20px 0; display: flex; align-items: center; z-index: 9; transition:padding .5s ease, background-color 1s ease, opacity .6s linear; }
.mainmenu-wrapper.mmb-show {opacity: 1;}
body.page-scrolled .mainmenu-wrapper { background-color: rgba(41,171,226,1); padding: 15px 0 10px 0;}
body.page-no-header .mainmenu-wrapper { background-color: rgba(41,171,226,1);  }



/* TOGGLER */ 
.mainmenu-toggler{opacity:0; position:fixed;top:15px;left:135px; transform: translateY(-100%);width:40px; height:40px; background-color: rgba(41,171,226,1); border-radius: 5px; cursor:pointer;overflow:hidden;-webkit-appearance:none;border-color:transparent; transition:top .3s ease 0s, transform .3s ease 0s, opacity .3s ease 0s; z-index: 2; }
/*body.page-scrolled .mainmenu-toggler {opacity: 1; transition: opacity .5s ease .1s;}*/
 
/*open menu after click*/
.mainmenu-wrapper.mmb-open { }
.mainmenu-wrapper.mmb-open .mainmenu {opacity: 1!important; background-color: rgba(41,171,226,1); transition: opacity .5s ease .1s;}
.mainmenu-wrapper.mmb-open .mainmenu a { color: #fff;}
.mainmenu-wrapper.mmb-open .mainmenu-toggler{ opacity: 1;  background-color:  rgba(41,171,226,1);}

.mainmenu-wrapper.mmb-close {  }
.mainmenu-wrapper.mmb-close .mainmenu {opacity: 0!important;background-color: transparent; transition: background-color .5s ease 1s,opacity .5s ease .1s;}
.mainmenu-wrapper.mmb-close .mainmenu-toggler {opacity: 1;}
   

@media all and (max-width: 736px) {
	.mainmenu-toggler {opacity: 1!important;}
    body.page-scrolled .mainmenu-toggler {top: 5px;}
	.mainmenu-wrapper {top: 0; right: 0; overflow: inherit!important; height: auto!important;}
	.mainmenu {position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin-right: 0; padding: 40px 20px; overflow-y: scroll; }
	.mainmenu-wrapper.mmb-open { background-color: rgba(0,42,63,1)!important;  }
    .mainmenu-wrapper.mmb-open .mainmenu {transform:translateX(0); padding-top: 85px;}
	.mainmenu-wrapper.mmb-close .mainmenu {transform:translateX(-100%);}
}
  

.mainmenu-wrapper.mmb-open .mainmenu-toggler span{background-color:transparent}
.mainmenu-wrapper.mmb-open .mainmenu-toggler span:after, .mainmenu-wrapper.mmb-open .mainmenu-toggler span:before{top:0}
.mainmenu-wrapper.mmb-open .mainmenu-toggler span:before{transform: translateX(-50%) rotate(45deg)}
.mainmenu-wrapper.mmb-open .mainmenu-toggler span:after{transform: translateX(-50%) rotate(-45deg)}

.mainmenu-toggler:focus{outline:0}
.mainmenu-toggler span, .mainmenu-toggler span:after, .mainmenu-toggler span:before{content:'';position:absolute;top:48%;left: 50%; transform: translateX(-50%); height:1px; width:80%; background:#fff; cursor:pointer;transition:all .3s ease-in-out}
.mainmenu-toggler span:before{top:-6px;right:0%; }
.mainmenu-toggler span:after{top:6px;right:0%; }
.mainmenu-toggler.left{transform:rotate(180deg) !important}
 	
@media all and (max-width: 736px) { 	
	.mainmenu-toggler{ top: 17px; left: 50%; transform: translateY(0%) translateX(-50%); width: 40px; height: 40px; }	
	.mainmenu-toggler span, .mainmenu-toggler span:after, .mainmenu-toggler span:before{ right: 30%; }
	.mainmenu-toggler span:before{right:0%;}
	.mainmenu-toggler span:after{right:0%;} 	 
}



/* MAIN MENU LOGO*/

.mainmenu-wrapper .mainmenu-logo {opacity: 1; border:0px solid #f90;/* position: absolute; top: 25px; left: 20px;*/ width: 200px; transform: translateY(-8px); display: flex; align-items: center; justify-content: center; overflow: hidden;  z-index: 1; transition:width .5s ease, filter .5s ease, opacity .4s .5s, top .4s 0s;}
.mainmenu-wrapper .mainmenu-logo .l-wrapper { display: inline-block; width: auto; padding: 0 20px; height: 100%; text-align: center;transition: all .6s;}
.mainmenu-wrapper .mainmenu-logo .l-image { position: relative; width: 100%; margin: 0 auto 0 auto; overflow: hidden; transition: all .6s;}
.mainmenu-wrapper .mainmenu-logo .l-image img { object-fit: contain; object-position: center;}
 body.page-scrolled .mainmenu-wrapper .mainmenu-logo { width: 170px; filter: brightness(0) invert(1);}

@media all and (max-width: 736px) { 	
	
	.mainmenu-wrapper .mainmenu-logo {top: 100px; width: 180px;transform: translateY(-2px); filter: brightness(0) invert(1);  }
	.mainmenu-wrapper .mainmenu-logo .l-image { height: auto; }		    
    
    body.page-no-header .mainmenu-wrapper .mainmenu-logo {top: 100px; filter:none; transform: translateY(-4px);  }     	
    body.page-scrolled .mainmenu-wrapper .mainmenu-logo { transform: translateY(-4px); }
    body.page-no-header.page-scrolled .mainmenu-wrapper .mainmenu-logo { transform: translateY(-10px); }
}


/* MAIN MENU LINK*/

.wrapper-mm { }

@media all and (max-width: 736px) {
    .wrapper-mm { position: fixed; top: 70px; left: 0; right: 0; bottom: 0; transform: translateX(-100%); padding: 20px 0 20px 0;background-color: rgba(41,171,226,1); overflow-y: scroll; transition: transform .5s ease;}
    body.page-scrolled .wrapper-mm { top: 50px;} 
    .mainmenu-wrapper.mmb-open .wrapper-mm {transform: translateX(0);}
}

.mainmenu {opacity: 1;  transition: opacity .9s; margin-right: 55px;}
  

.mainmenu-link {  }
.mainmenu-link a, .mainmenu-link a:hover, .mainmenu-link a:focus, .mainmenu-link a:active { padding: 10px 20px 10px 20px!important;  font-size: 14px; font-weight: 400; color: #ffffff;  text-decoration: none; }
.mainmenu-link a > i { font-weight:300;}
.mainmenu-link a:hover, .mainmenu-link a:focus, .mainmenu-link a:active, .mainmenu-link a.active, .mainmenu-link a.highlighted {color: #fff !important; }
.mainmenu-link a:hover > i.fa { transform: rotate(180deg); }
.mainmenu-link a.current { }
.mainmenu-link a.disabled { }
.mainmenu-link li.lingua:before {content: ''; position: absolute; top: 50%; transform: translateY(-50%);left: 0; width: 1px; height: 20%; background-color: #fff; z-index: 9999}
.mainmenu-link li.logo {display: none;}
.mainmenu-link li.logo img{  width: 50%;}

/* Tablet in modalità orizzontale */
@media all and (min-width: 769px) and (max-width: 1024px) { 
	.mainmenu-link a, .mainmenu-link a:hover, .mainmenu-link a:focus, .mainmenu-link a:active { padding: 21px 10px 22px 10px!important;}
}
	
/* Tablet in modalità verticale */
@media all and (min-width: 481px) and (max-width: 768px) { 
	.mainmenu-link li { float: none;}
	.mainmenu-link li.logo img { width: 30%;}
}


/*SOTTOMENU*/
@media (min-width: 481px) {
    .mainmenu-link li ul { border-radius: 0 !important; -webkit-animation: fadeIn 0.7s; background-color: rgba(255,255,255,1); margin-top: 10px!important; padding: 10px 0!important;  }
    .mainmenu-link ul a:hover, .mainmenu-link ul a:focus, .mainmenu-link ul a:active, .mainmenu-link ul a.highlighted { background-color: rgba(122,129,140,1);}

    .mainmenu-link li ul li a { text-transform:none;color:#333; padding: 5px 20px!important; border-bottom:none!important;}
    .mainmenu-link li ul li a:hover { padding: 5px 20px!important; color: rgba(41,171,226,1)!important; background:none!important; background-color:transparent!important;  border-bottom:none!important;}
}

.mainmenu-link li ul li a.has-submenu { color:#fff !important;  }
.mainmenu-link li ul li a.has-submenu.highlighted i { transform: rotate(-90deg); transition: transform ease .3s;  }

@media (min-width: 768px) {
.mainmenu-link a span.sub-arrow { display: none !important; }
.mainmenu-link a >i { display: inline-block !important; transition: all 500ms ease-in-out;}
}

@media (max-width: 768px) {

.mainmenu-link a span.sub-arrow { right:10px; background-color: transparent; border-color: transparent !important; color: #fff!important; margin-top: -17px; margin-right: 0 !important; width: 100%; text-align: right}
.mainmenu-link a span.sub-arrow:before { font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands";    content: '\f067';    font-size: 14px;	font-weight:300;    }
.mainmenu-link a span.sub-arrow {border-radius: 0; width: 30px;text-align: center;}
	
.mainmenu-link a.highlighted span.sub-arrow:before { content: '\f068'; }
.mainmenu-link a, .mainmenu-link a:hover, .mainmenu-link a:focus, .mainmenu-link a:active { padding: 21px 40px 22px 20px!important; font-size: 20px;}
 
	
.mainmenu-link li {text-align: center}
.mainmenu-link li.lingua:before { display: none;}
.mainmenu-link li.logo { display: block;}
.mainmenu-link li.logo img {filter: brightness(0) invert(1);}
	
/*SOTTOMENU*/
.mainmenu-link ul { padding: 0; border-radius: 0 !important; background-color: rgba(122,129,140,1); border-color: transparent; box-shadow: 0 5px 9px rgba(0, 0, 0, 0.1); }
.mainmenu-link > li > ul::before, .mainmenu-link > li > ul::after { display: none; }
.mainmenu-link > li > ul { margin-left: 0 !important; }
.mainmenu-link ul a span.sub-arrow { right:0;}
.mainmenu-link ul a, .mainmenu-link ul a:hover, .mainmenu-link ul a:focus, .mainmenu-link ul a:active, .mainmenu-link ul a.highlighted { background-color: transparent !important;   font-size: 18px; font-weight: 300; }
.mainmenu-link ul a:hover, .mainmenu-link ul a.highlighted { background-color: rgba(255,255,255,0.1) !important; color: #fff !important; }
.mainmenu-link ul a.active { background-color: rgba(255,255,255,0.1) !important; color: #fff !important; }
.mainmenu-link ul ul { top: -1px !important; left: -2px !important; margin-top: 0 !important; }
.mainmenu-link ul li a { padding-left: 10px !important; }
.mainmenu-link ul li a i { position: absolute; right: 13px; }
.mainmenu-link ul ul li:last-child a { border-bottom: 1px solid rgba(210,210,210,0) !important; }
}
/* RESPONSIVE MOBILE iphone 6+ */

@media screen and (max-width: 736px) {
.mainmenu-link ul { border-color: transparent !important; }

.mainmenu-link a, .mainmenu-link a:hover, .mainmenu-link a:focus, .mainmenu-link a:active, .mainmenu-link a.highlighted { }
.navbar-nav.sm-collapsible .dropdown-menu .dropdown-menu { margin: 0; }
}