@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap");

/*HEADER*/
#header div.navigationist,
#header div.nav-container{
	width:auto;
	display:flex;
	flex-flow:row nowrap;
	align-items:center;
	grid-gap:0 50px;
	overflow:visible!important;
	box-sizing:border-box;
}
#header div.navigationist{clear:both;margin-left:auto}

ul.hdr-menu,
ul.hdr-menu > li{width:auto;box-sizing:border-box}
ul.hdr-menu,
ul.hdr-menu ul{
	font-family:var(--titles-font);
	list-style:none outside;
	overflow:visible
}
ul.hdr-menu li{
	font-size:var(--fnt-bigger-3);
	font-weight:var(--w-semibold);
	line-height:100%;
	text-transform:uppercase;
	cursor:pointer;
	overflow:visible
}
ul.hdr-menu li a{color:var(--c-black)}
ul.hdr-menu > li:hover > a,
ul.hdr-menu > li > a:hover{color:var(--c-blue)!important}
ul.hdr-menu li.main-level{position:relative}
ul.hdr-menu li.main-level > a{
	padding-right:16px;
	background:url(/Layout/img/ico-arrow-bold-dwn-black.png) no-repeat right calc(50% + 1px)!important;
	background-size:10px auto!important
}
ul.hdr-menu li.main-level:hover > a{background-image:url(/Layout/img/ico-arrow-bold-dwn-blue.png)!important}

#layout.homepage #header ul.hdr-menu > li{text-shadow:2px 2px 0 rgba(0,0,0,0.7)}
#layout.homepage #header.no-gradient ul.hdr-menu > li{text-shadow:none}
#layout.homepage #header ul.hdr-menu li a{color:var(--c-white)}
#layout.homepage #header.no-gradient ul.hdr-menu li a{color:var(--c-black)}
#layout.homepage #header ul.hdr-menu li.main-level > a{background-image:url(/Layout/img/ico-arrow-bold-dwn-white.png)!important}
#layout.homepage #header.no-gradient ul.hdr-menu li.main-level > a{background-image:url(/Layout/img/ico-arrow-bold-dwn-black.png)!important}
#layout.homepage #header ul.hdr-menu li.main-level:hover > a{background-image:url(/Layout/img/ico-arrow-bold-dwn-blue.png)!important}

/*sublevels*/
ul.hdr-menu li ul,
ul.hdr-menu li li{box-sizing:border-box}
ul.hdr-menu ul{display:none}
ul.hdr-menu ul.opened{display:block}
ul.hdr-menu li ul{
	width:250px!important;
	position:absolute;
	top:0;
	left:-100%;
	z-index:10000
}
ul.hdr-menu li.main-level > ul{
	top:100%;
	left:unset!important;
	right:0;
	padding-top:var(--cnt-margin-1)
}

ul.hdr-menu li li{
	font-size:0.80em;
	font-weight:var(--w-light);
	line-height:100%;
	text-align:right;
	text-shadow:none!important;
	position:relative;
	margin:0!important;
	padding:12px!important;
	border-bottom:1px solid var(--c-white)!important;
	border-right:none!important
}
ul.hdr-menu.header li li li{font-size:1.00em!important}

#layout.homepage #header ul.hdr-menu li li{background:var(--c-grey-14-rgba-90)!important}
#layout:not(.homepage) #header ul.hdr-menu li li,
#layout.homepage #header.no-gradient ul.hdr-menu li li{background:var(--c-grey-96)!important}

ul.hdr-menu li li:last-of-type{border-bottom:none!important}
/*ul.sf-menu li li > a{color:var(--c-white)!important}*/
ul.hdr-menu li li:hover > a,
ul.hdr-menu li li > a:hover{color:var(--c-blue)!important}
ul.hdr-menu li li > a.submenu-opening{
	width:30px;
	height:100%;
	display:block;
	cursor:pointer;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	margin:auto 0!important;
	background:url(/Layout/img/ico-arrow-bold-lft-black.png) no-repeat center center;
	background-size:auto 10px
}
#layout.homepage #header ul.hdr-menu li li > a.submenu-opening{background-image:url(/Layout/img/ico-arrow-bold-lft-white.png)}
#layout:not(.homepage) #header ul.hdr-menu li li > a.submenu-opening,
#layout.homepage #header.no-gradient ul.hdr-menu li li > a.submenu-opening{background-image:url(/Layout/img/ico-arrow-bold-lft-black.png)}
ul.hdr-menu li li:hover > a.submenu-opening{background-image:url(/Layout/img/ico-arrow-bold-lft-blue.png)!important}
ul.hdr-menu li.main-level > a.submenu-opening{display:none!important}

/*MOBILE NAVIGATION*/
#mobilepanel div.nav-container{
    width:100%;
    clear:both;
	overflow:hidden;
    box-sizing:border-box
}
ul.mobile-menu,
ul.mobile-menu ul,
ul.mobile-menu li,
ul.tools-mobile,
ul.tools-mobile li{
    width:100%!important;
    clear:both;
    overflow:hidden;
    box-sizing:border-box
}
ul.mobile-menu,
ul.mobile-menu ul,
ul.tools-mobile{list-style:none outside}
#mobilepanel div.nav-container ul.mobile-menu:first-of-type{border-top:1px solid var(--c-white-rgba-60)}
/*#mobilepanel ul.mobile-menu.products{border-top:1px solid var(--c-white-rgba-60)}*/

ul.mobile-menu li,
ul.tools-mobile li{
	font-size:var(--fnt-smaller-1);
	color:var(--c-white);
    line-height:100%;
    text-transform:uppercase;
    text-align:left;
    display:block;
    white-space:normal;
    padding:12px 0;
    border-bottom:1px solid var(--c-white-rgba-60);
    background:none
}
ul.mobile-menu li a,
ul.tools-mobile li a{
    color:var(--c-white);
    padding:0!important;
    box-sizing:border-box;
    border:none;
    background:none!important
}
ul.mobile-menu li img,
ul.tools-mobile li img{
	width:auto;
	height:12px;
	float:left;
	margin-right:8px
}
ul.mobile-menu li a,
ul.mobile-menu li a span.submenu-opening,
ul.tools-mobile li a,
ul.tools-mobile li span.edit-button{
	height:12px;
	line-height:12px;
	float:left;
	display:inline;
	overflow:hidden
}

ul.mobile-menu li.sub-mobile{padding-bottom:0}
ul.mobile-menu li a.single-link{display:block;float:none}
ul.mobile-menu li > a.double-link,
ul.mobile-menu li > a.submenu-opening{margin-bottom:10px}
ul.mobile-menu li a.double-link{width:calc(100% - 20px);height:auto}
ul.mobile-menu li a.submenu-opening,
ul.mobile-menu li a span.submenu-opening{
	width:1px;
	height:7px;
	clear:right;
	overflow:visible;
	position:relative;
	margin:3px 8px 0 4px!important;
	transition:transform 0.2s;
	background:var(--c-white)!important
}
ul.mobile-menu li a.submenu-opening:after,
ul.mobile-menu li a span.submenu-opening:after{
	content:"";
	width:7px;
	height:1px;
	position:absolute;
	top:3px;
	left:-3px;
	background:var(--c-white)
}

ul.mobile-menu li ul{
	clear:both;
	display:none;
	margin-top:10px!important;
	border-top:1px solid var(--c-white-rgba-60)
}
ul.mobile-menu li li{font-size:0.90em}
ul.mobile-menu li li:last-child{padding-bottom:0!important;border:none!important}
ul.mobile-menu li li a{color:var(--c-grey-96)}
ul.mobile-menu li.sub-mobile li:last-child a{margin-bottom:0!important}
ul.mobile-menu li.mobile-2-levels > a.submenu-opening{display:none!important}
ul.mobile-menu li > ul{padding-left:13px}

ul.mobile-menu.opened > li > ul,
ul.mobile-menu li.opened > ul{display:block}
ul.mobile-menu.opened > li > a.submenu-opening,
ul.mobile-menu.opened > li > a span.submenu-opening,
ul.mobile-menu li.opened > a.submenu-opening,
ul.mobile-menu li.opened > a span.submenu-opening{transform:rotate(-45deg)}

ul.mobile-menu.products.opened > li,
ul.mobile-menu.products li li{padding-bottom:0!important}
ul.mobile-menu.products > li li a.submenu-opening,
ul.mobile-menu.products > li li a span.submenu-opening{float:right;margin:3px 3px 0 0!important}

/*SPOTLIGHTS*/
div.spotlights div.nav-container{
	width:100%!important;
	clear:both;
	display:flex;
	flex-flow:row wrap;
	align-items:flex-start;
	overflow:hidden
}
ul.spotlights,
ul.spotlights ul,
ul.spotlights li{overflow:hidden;box-sizing:border-box}
ul.spotlights,
ul.spotlights ul{list-style:none outside}
ul.spotlights{
	width:25%;
	float:left;
	display:inline
}
ul.spotlights li,
ul.spotlights li a{color:var(--c-white)}
ul.spotlights li a:hover{color:var(--c-blue)}

ul.spotlights > li{
	font-size:var(--fnt-bigger-1);
	font-weight:var(--w-bold);
	line-height:160%!important;
	text-transform:uppercase;
	cursor:pointer
}
ul.spotlights ul{margin-top:2px}
ul.spotlights li{text-align:right}
ul.spotlights li li{
	font-size:0.85em;
	font-weight:var(--w-light);
	text-transform:none
}

/*BACKOFFICE*/
body.cke_editable > ul.hdr-menu{
	height:var(--head-height);
	display:flex;
	flex-flow:row nowrap;
	align-items:center;
	padding:var(--head-spacing) var(--main-spacing);
	background:var(--c-grey-96)
}
body.cke_editable > ul.hdr-menu li{margin-left:auto!important}

body.cke_editable > ul.mobile-menu{
	width:270px!important;
	margin:10px!important;
	padding:15px!important;
	background:var(--c-black-rgba-70)!important;
	border:none!important
}
body.cke_editable > ul.mobile-menu li{padding:10px 0}
body.cke_editable > ul.mobile-menu > li{font-size:var(--fnt-smaller-1);border-top:1px solid var(--c-white-rgba-60)}
body.cke_editable > ul.mobile-menu li ul{display:block!important}
body.cke_editable > ul.mobile-menu > li a{color:var(--c-grey-96)!important}
body.cke_editable > ul.mobile-menu > li li{font-size:0.90em}
body.cke_editable > ul.mobile-menu > li li a{color:var(--c-grey-96)!important}
body.cke_editable > ul.mobile-menu li a,
body.cke_editable > ul.tools-mobile li a{height:auto}
body.cke_editable > ul.mobile-menu li a.submenu-opening,
body.cke_editable > ul.mobile-menu li a span.submenu-opening{transform:rotate(-45deg)}

body.cke_editable > ul.spotlights,
body.cke_editable > ul.spotlights ul{list-style:none outside!important}
body.cke_editable > ul.spotlights{
	width:auto;
	margin:10px!important;
	padding:40px!important;
	background:var(--c-grey-14)
}
body.cke_editable > ul.spotlights li{text-align:right!important}
body.cke_editable > ul.spotlights > li{font-size:var(--fnt-bigger-1)!important}

/*RESPONSIVITY*/
@media only screen and (min-width:320px) and (max-width:1024px) {
	/*header*/
	#header div.navigationist,
	#header div.nav-container{grid-gap:0 38px}
	ul.hdr-menu li.main-level > a{padding-right:13px;background-size:8px auto!important}
	ul.hdr-menu li ul{width:220px!important}
	ul.hdr-menu li li{padding:9px!important}
	ul.hdr-menu li li > a.submenu-opening{width:24px;background-size:auto 8px}

	/*spotlights*/
	div.spotlights ul.spotlights:nth-of-type(1){width:18%}
	div.spotlights ul.spotlights:nth-of-type(2){width:25%}
	div.spotlights ul.spotlights:nth-of-type(3){width:32%}
	div.spotlights ul.spotlights:nth-of-type(4){width:25%}
}

@media only screen and (min-width:1025px) and (max-width:1280px) {
	/*header*/
	#header div.navigationist,
	#header div.nav-container{grid-gap:0 38px}
	ul.hdr-menu li.main-level > a{padding-right:13px;background-size:8px auto!important}
	ul.hdr-menu li ul{width:220px!important}
	ul.hdr-menu li li{padding:9px!important}
	ul.hdr-menu li li > a.submenu-opening{width:24px;background-size:auto 8px}

	/*spotlights*/
	div.spotlights ul.spotlights:nth-of-type(1){width:18%}
	div.spotlights ul.spotlights:nth-of-type(2){width:25%}
	div.spotlights ul.spotlights:nth-of-type(3){width:32%}
	div.spotlights ul.spotlights:nth-of-type(4){width:25%}
}

@media only screen and (min-width:1281px) and (max-width:1500px) {
	/*header*/
	#header div.navigationist,
	#header div.nav-container{grid-gap:0 42px}
	ul.hdr-menu li.main-level > a{padding-right:14px;background-size:9px auto!important}
	ul.hdr-menu li ul{width:230px!important}
	ul.hdr-menu li li{padding:10px!important}
	ul.hdr-menu li li > a.submenu-opening{width:26px;background-size:auto 9px}
}

@media only screen and (min-width:1501px) and (max-width:1950px) {
	/*header*/
	#header div.navigationist,
	#header div.nav-container{grid-gap:0 45px}
	ul.hdr-menu li.main-level > a{padding-right:14px;background-size:9px auto!important}
	ul.hdr-menu li ul{width:240px!important}
	ul.hdr-menu li li{padding:11px!important}
	ul.hdr-menu li li > a.submenu-opening{width:28px;background-size:auto 9px}
}

/*TABLET*/
@media only screen and (min-device-width:744px) and (max-device-width:1024px) {
	/*header*/
	#header div.navigationist{display:none}

	/*backoffice*/
	body.cke_editable > ul.spotlights{padding:25px!important}
}

@media only screen and (min-device-width:744px) and (max-device-width:1024px) and (orientation:portrait) {
	/*spotlights*/
	div.spotlights ul.spotlights{width:25%!important;margin-bottom:15px}
	div.spotlights ul.spotlights li{text-align:center}
}

@media only screen and (min-device-width:744px) and (max-device-width:1024px) and (orientation:landscape) {
	
}

/*SMARTPHONE*/
@media only screen and (min-device-width:320px) and (max-device-width:743px) {
	/*header*/
	#header div.navigationist{display:none}
	
	/*spotlights*/
	div.spotlights ul.spotlights{margin-bottom:10px}

	/*backoffice*/
	body.cke_editable > ul.spotlights{padding:20px!important}
}

@media only screen and (min-device-width:320px) and (max-device-width:743px) and (max-aspect-ratio:13/9) {
	/*spotlights*/
	div.spotlights ul.spotlights{width:50%!important}
	div.spotlights ul.spotlights:nth-of-type(1) li,
	div.spotlights ul.spotlights:nth-of-type(3) li{text-align:left}
	div.spotlights ul.spotlights:nth-of-type(2) li,
	div.spotlights ul.spotlights:nth-of-type(4) li{text-align:right}
}

@media only screen and (min-device-width:320px) and (max-device-width:743px) and (min-aspect-ratio:13/9) {
	/*spotlights*/
	div.spotlights ul.spotlights{width:25%!important}
	div.spotlights ul.spotlights li{text-align:center}
}