@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");

/*LAYOUT*/
#layout,
#layout div{overflow:hidden;box-sizing:border-box}
#layout,
#toolbar,
#header,
#container,
#slide-hp,
#slideshow,
#engine,
#istcontents,
#highlights,
#form,
#error,
#footer{width:100%;clear:both}
#layout{position:relative;padding-top:calc(var(--toolbar-height) + var(--head-height))}
#layout.homepage{padding-top:0!important}
#layout.errorpage{height:100%;overflow:auto}
#layout.errorpage #container{height:calc(100% - 271px)}
#layout.errorpage #istcontents{height:100%}

#toolbar,
#header{
	position:fixed;
	left:0;
    z-index:100001;
	opacity:1;
	transition-property:background;
	transition-duration:1s
}
#toolbar{
	height:var(--toolbar-height);
	top:0;
	padding:0 var(--main-spacing); 
	background:var(--c-grey-14)
}
#header{
	height:var(--head-height);
	text-align:center;
	overflow:visible!important;
	top:var(--toolbar-height);
	padding:var(--head-spacing) var(--main-spacing); 
	background:var(--c-grey-96)
}
#layout.homepage #toolbar,
#layout.homepage #header{background:none}
#layout.homepage #toolbar.scrolling,
#layout.homepage #header.scrolling{opacity:0}
#layout.homepage #toolbar.no-gradient{background:var(--c-grey-14)}
#layout.homepage #header.no-gradient{background:var(--c-grey-96)}
#container,
#slide-hp,
#slideshow,
#highlights{position:relative}
#slide-hp,
#slideshow{height:100%}
#slideshow.mobile{display:none}
#engine{
	position:relative;
	padding:0!important;
	border-radius:0!important;
	border:none!important;
	background:var(--c-grey-90)
}
#footer{
	position:relative;
	padding:var(--foot-spacing);
	background:var(--c-grey-14)
}

/*HEADER ELEMENTS*/
#header *{box-sizing:border-box}
#header > div{
	width:100%;
	height:100%;
	clear:both;
	display:flex;
	flex-flow:row nowrap;
	align-items:center;
	overflow:visible;
	opacity:1;
	transition-property:opacity;
	transition-duration:1s;
}

/*logo*/
#header a.hpback,
#header a.hpback img{width:auto}
#header a.hpback{
	height:100%;
	overflow:hidden;
	transition-property:display;
	transition-duration:1s
}
#header a.hpback img{height:100%;float:left}
#header a.hpback.white{display:none}
#layout.homepage #header a.hpback.white{display:unset}
#layout.homepage #header a.hpback.color{display:none}
#layout.homepage #header a.hpback.white.no-gradient{display:none}
#layout.homepage #header a.hpback.color.no-gradient{display:unset}

/*TOOLBAR ELEMENTS*/
#toolbar *{box-sizing:border-box}
#toolbar > div,
#toolbar div.tlb-icons,
#toolbar div.tlb-icons.lft a{
	display:flex;
	flex-flow:row nowrap;
	align-items:center
}
#toolbar > div{
	width:100%;
	height:100%;
	clear:both;
	overflow:visible;
	position:relative;
	transition-property:border-bottom;
	transition-duration:1s;
	border-bottom:none
}
#layout.homepage #toolbar > div{border-bottom:1px solid var(--c-white-rgba-40)}
#layout.homepage #toolbar > div.no-gradient{border-bottom:none}
#toolbar > div{}
#toolbar > div{}
#toolbar div.tlb-icons{
	width:auto;
	grid-gap:0 30px;
	overflow:visible!important
}
#toolbar div.tlb-icons.lft{height:var(--ico-size-2)}
#toolbar div.tlb-icons.rgt{
	height:var(--ico-size-1);
	position:relative;
	margin-left:auto
}

#toolbar div.tlb-icons > a,
#toolbar div.tlb-icons > span,
#toolbar div.tlb-icons img{height:100%;overflow:hidden}
#toolbar div.tlb-icons > a{color:var(--c-white)}
#toolbar div.tlb-icons > a:hover{color:var(--c-blue)}
#toolbar div.tlb-icons > span{cursor:pointer}
#toolbar div.tlb-icons img{width:auto;float:left}
#toolbar div.tlb-icons a.mail-button img{width:var(--ico-size-2);height:auto}

#toolbar div.tlb-icons a.cart-button{
	color:var(--c-grey-14);
	overflow:visible!important;
	position:relative
}
#toolbar div.tlb-icons a.cart-button span{
	width:auto;
	font-size:var(--fnt-smaller-6);
	font-weight:var(--w-regular);
	line-height:100%;
	text-align:center;
	justify-content:center;
	overflow:hidden;
	position:absolute;
	top:-3px;
	left:60%;
	padding:2px 4px;
	box-sizing:border-box;
	border-radius:var(--chk-radius);
	background:var(--c-white)
}
#toolbar div.tlb-icons a.cart-button:hover span{background:var(--c-blue)}

#toolbar div.tlb-icons a.logged-button{grid-gap:0 7px;overflow:visible!important}
#toolbar div.tlb-icons a.logged-button,
#toolbar div.tlb-icons a.logged-button span.name{width:auto!important}
#toolbar div.tlb-icons a.logged-button span{
	height:100%!important;
	font-weight:var(--w-regular);
	text-transform:uppercase
}
#toolbar div.tlb-icons a.logged-button span.init{
	width:var(--ico-size-1);
	font-size:var(--fnt-smaller-1);
	color:var(--c-grey-14);
	line-height:var(--ico-size-1);
	text-align:center;
	letter-spacing:-0.02em;
	border-radius:50%;
	background:var(--c-white)
}
#toolbar div.tlb-icons a.logged-button span.name{
	font-size:var(--fnt-smaller-4);
	color:var(--c-white);
	line-height:110%
}

#toolbar div.tlb-icons.lft a{grid-gap:0 7px}
#toolbar div.tlb-icons.lft a span{font-size:var(--fnt-smaller-1);line-height:100%}

#toolbar div.tlb-icons > a:hover,
#toolbar div.tlb-icons a.search-button.opened,
#toolbar div.tlb-icons > span:hover{background-repeat:no-repeat;background-size:auto 100%}
#toolbar div.tlb-icons.lft > a:hover{background-position:center left}
#toolbar div.tlb-icons.rgt > span:hover{background-position:center center}
#toolbar div.tlb-icons a.phone-button:hover{background-image:url(/Layout/img/ico-phone-blue.png)}
#toolbar div.tlb-icons a.mail-button:hover{background-image:url(/Layout/img/ico-mail-blue.png);background-size:var(--icon-size-2) auto}
#toolbar div.tlb-icons a.search-button.opened,
#toolbar div.tlb-icons a.search-button:hover{background-image:url(/Layout/img/ico-search-blue.png)}
#toolbar div.tlb-icons a.cart-button:hover{background-image:url(/Layout/img/ico-cart-blue.png)}
#toolbar div.tlb-icons a.cart-button:hover img{visibility:hidden}
#toolbar div.tlb-icons a.backoffice-button:hover{background-image:url(/Layout/img/ico-backoffice-blue.png)}
#toolbar div.tlb-icons a.login-button:hover{background-image:url(/Layout/img/ico-login-blue.png)}
#toolbar div.tlb-icons span.edit-button:hover{background-image:url(/Layout/img/ico-edit-blue.png)}
#toolbar div.tlb-icons a:hover img,
#toolbar div.tlb-icons a.search-button.opened img,
#toolbar div.tlb-icons > span:hover img{visibility:hidden}
#toolbar div.tlb-icons a.logged-button:hover span.init,
#toolbar div.tlb-icons a.logged-button.opened span.init{color:var(--c-grey-14)}
#toolbar div.tlb-icons a.logged-button:hover span.name,
#toolbar div.tlb-icons a.logged-button.opened span.name{color:var(--c-blue)}

#toolbar div.tlb-icons.lft a,
#toolbar div.tlb-icons a.logged-button{
	display:flex;
	flex-flow:row nowrap;
	align-items:center
}

/*PANELS*/
div.management-panels,
div.management-panels div{overflow:hidden;box-sizing:border-box}
div.management-panels{
	clear:both;
	display:none;
	position:fixed;
	top:calc(var(--toolbar-height) + var(--main-spacing));
    right:var(--main-spacing);
    z-index:100002!important;
	border-radius:var(--panels-radius);
    box-shadow:2px 2px 8px 0 rgba(0,0,0,0.2), -2px -2px 8px 0 rgba(0,0,0,0.2);
	background:var(--c-white)
}
#loginbox.management-panels,
#userpanel.management-panels{
	width:250px
}
div.management-panels h3{
	width:100%;
	height:var(--fld-height-3);
	font-size:var(--fnt-base);
	font-weight:var(--w-light);
	color:var(--c-white);
	line-height:var(--fld-height-3);
	text-align:center;
	text-transform:uppercase;
	overflow:hidden;
	margin-bottom:var(--cnt-margin-2);
	box-sizing:border-box;
	background:var(--c-grey-14)
}

/*close panels*/
div.management-panels a.close-button{
	width:8px;
	height:8px;
	display:block;
	position:absolute;
	top:10px;
	right:10px;
	z-index:10
}
div.management-panels a.close-button img{
	width:auto;
	height:100%;
	float:right
}

/*LOGIN PANEL*/
#loginbox div.field{
	width:100%;
	clear:both;
	padding:0 var(--cnt-margin-2);
	margin-bottom:10px
}
#loginbox div.button,
#loginbox div.utils{
	width:auto;
	display:inline;
	padding-bottom:var(--cnt-margin-2)
}
#loginbox div.button{float:left;padding-left:var(--cnt-margin-2)}
#loginbox div.utils{float:right;padding-right:var(--cnt-margin-2)}

#loginbox div input{
	float:left;
	display:inline;
	overflow:hidden;
	box-sizing:border-box
}
#loginbox div.field input,
#loginbox div.button input{
	height:var(--fld-height-3);
	line-height:var(--fld-height-3);
	-webkit-appearance:none!important
}
#loginbox div.field input{
	width:100%;
	font-size:var(--fnt-smaller-3);
	color:var(--c-grey-50);
	padding:0 var(--fld-padding-2);
	border-radius:var(--fld-radius);
	border:1px solid var(--c-grey-85);
	background:var(--c-grey-96)
}
#loginbox div.field input::-webkit-input-placeholder{color:var(--c-grey-50);opacity:1!important}
#loginbox div.field input:-moz-placeholder{color:var(--c-grey-50);opacity:1!important}
#loginbox div.field input::-moz-placeholder{color:var(--c-grey-50);opacity:1!important}
#loginbox div.field input:-ms-input-placeholder{color:var(--c-grey-50);opacity:1!important}
#loginbox div.field input:focus::-webkit-input-placeholder{color:transparent}
#loginbox div.field input:focus:-moz-placeholder{color:transparent}
#loginbox div.field input:focus::-moz-placeholder{color:transparent}
#loginbox div.field input:focus:-ms-input-placeholder{color:transparent}

#loginbox div.fld-pwdlogin{position:relative}
#loginbox div.fld-pwdlogin i{
	width:var(--ico-pwd-2);
	height:var(--ico-pwd-2);
	font-size:var(--ico-pwd-2);
	color:var(--c-grey-28);
	display:flex;
	flex-flow:column wrap;
	justify-content:center;
	position:absolute;
	top:calc((var(--fld-height-3) - var(--ico-pwd-2)) / 2);
	right:calc(var(--cnt-margin-2) + var(--fld-padding-2));
	cursor:pointer
}

#loginbox div.button input{
	font-size:var(--fnt-smaller-3);
	color:var(--c-white);
	text-align:center;
	text-transform:uppercase;
	cursor:pointer;
	padding:0 var(--btn-padding-2);
	border:none;
	border-radius:var(--fld-radius);
	background:var(--c-blue)
}
#loginbox div.button input:hover{color:var(--c-grey-14)}

#loginbox div.utils a{
	font-size:var(--fnt-smaller-4);
	color:var(--c-grey-28);
	text-transform:uppercase;
	line-height:calc(var(--fld-height-3) / 2);
	clear:both;
	display:block;
	position:relative;
	padding-left:7px
}
#loginbox div.utils a:before{
	content:"";
	width:0;
	height:0;
	position:absolute;
	top:4px;
	left:0;
	border-top:3px solid transparent;
	border-left:3px solid var(--c-blue);
	border-bottom:3px solid transparent
}
#loginbox div.utils a:hover{color:var(--c-blue)}

/*USER PANEL*/
#userpanel a{cursor:pointer}
#userpanel a img{
	width:100%;
	height:auto;
	float:left
}

#userpanel > div{
	width:100%;
	clear:both;
	padding:0 var(--cnt-margin-2) var(--cnt-margin-2) var(--cnt-margin-2)
}
#userpanel > div p,
#userpanel > div ul{font-size:var(--fnt-smaller-3);line-height:140%}
#userpanel > div p,
#userpanel > div li{padding:8px 0;border-bottom:1px solid var(--c-grey-85)}
#userpanel > div p{
	display:flex;
	flex-flow:column wrap;
	align-items:center;
	grid-gap:2px 0;
	position:relative
}
#userpanel > div p:nth-of-type(1){border-top:1px solid var(--c-grey-85)}
#userpanel > div p label{font-weight:var(--w-bold);text-align:center}
#userpanel > div p span{text-align:center}
#userpanel > div p a{
	font-size:0.90em;
	color:var(--c-blue);
	text-transform:uppercase;
	text-decoration:underline
}
#userpanel > div p a:hover{color:var(--c-grey-30)}
#userpanel > div p.user img{
	width:auto;
	height:var(--ico-size-3);
	margin-bottom:8px
}
#userpanel > div p.user label{font-size:1.15em}
#userpanel > div p.tools{
	flex-flow:row nowrap;
	justify-content:center;
	grid-gap:0 5px
}
#userpanel > div p.tools span{font-weight:var(--w-bold)}

#userpanel > div ul,
#userpanel > div li{width:100%}
#userpanel > div ul{list-style:none outside}
#userpanel > div li{text-align:center;text-transform:uppercase}
#userpanel > div li a{color:var(--c-black)}
#userpanel > div li a:hover{color:var(--c-blue)}

/*SEARCH PANEL*/
#searchpanel{width:320px}
#searchpanel div.search-box,
#searchpanel div.search-box div.fields-container,
#searchpanel div.search-box div.fields-container div.field{width:100%;clear:both}
#searchpanel div.search-box div.fields-container,
#searchpanel div.search-box div.fields-container div.field,
#searchpanel div.search-box div.fields-container div.button{display:flex;flex-flow:row wrap}
#searchpanel div.search-box div.fields-container{grid-gap:16px;padding:0 var(--cnt-margin-2) var(--cnt-margin-2) var(--cnt-margin-2)}
#searchpanel div.search-box div.fields-container div.field.code,
#searchpanel div.search-box div.fields-container div.field.free-text,
#searchpanel div.search-box div.fields-container div.field.checkbox{width:calc(50% - 8px)}

#searchpanel div.search-box div.fields-container div input,
#searchpanel div.search-box div.fields-container div select,
#searchpanel div.search-box div.fields-container div a{
	height:var(--fld-height-3);
	font-size:var(--fnt-smaller-3);
	line-height:var(--fld-height-3);
	float:left;
	display:inline;
	overflow:hidden;
	-webkit-appearance:none!important;
	border-radius:var(--fld-radius);
	box-sizing:border-box
}

#searchpanel div.search-box div.fields-container div.field:not(.button){}
#searchpanel div.search-box div.fields-container div.field:not(.button) input,
#searchpanel div.search-box div.fields-container div.field:not(.button) select{
	width:100%;
	color:var(--c-grey-50);
	border:1px solid var(--c-grey-85);
	background-color:var(--c-grey-96)!important
}
#searchpanel div.search-box div.fields-container div.field:not(.button) input{padding:0 var(--fld-padding-2)}
#searchpanel div.search-box div.fields-container div.field:not(.button) input::-webkit-input-placeholder{color:var(--c-grey-50);opacity:1!important}
#searchpanel div.search-box div.fields-container div.field:not(.button) input:-moz-placeholder{color:var(--c-grey-50);opacity:1!important}
#searchpanel div.search-box div.fields-container div.field:not(.button) input::-moz-placeholder{color:var(--c-grey-50);opacity:1!important}
#searchpanel div.search-box div.fields-container div.field:not(.button) input:-ms-input-placeholder{color:var(--c-grey-50);opacity:1!important}
#searchpanel div.search-box div.fields-container div.field:not(.button) input:focus::-webkit-input-placeholder{color:transparent}
#searchpanel div.search-box div.fields-container div.field:not(.button) input:focus:-moz-placeholder{color:transparent}
#searchpanel div.search-box div.fields-container div.field:not(.button) input:focus::-moz-placeholder{color:transparent}
#searchpanel div.search-box div.fields-container div.field:not(.button) input:focus:-ms-input-placeholder{color:transparent}
#searchpanel div.search-box div.fields-container div.field:not(.button) select{
	padding:0 calc(var(--fld-padding-2) * 3) 0 var(--fld-padding-2);
	background:url(/Layout/img/ico-arrow-dwn-grey.png) no-repeat calc(100% - var(--fld-padding-2)) center;
	background-size:var(--sel-arrow-2)
}
#searchpanel div.search-box div.fields-container div.field.option input,
#searchpanel div.search-box div.fields-container div.field.checkbox input{padding:0;margin:0}

#searchpanel div.search-box div.fields-container div.field.checkbox{grid-gap:0 var(--chk-gap)}
#searchpanel div.search-box div.fields-container div.field.checkbox label{
	font-size:var(--fnt-smaller-2);
	color:var(--c-grey-50);
	line-height:100%;
	text-transform:uppercase
}
#searchpanel div.search-box div.fields-container div.field.checkbox label br{display:none}
#searchpanel div.search-box div.fields-container div.field.checkbox input{
	width:var(--chk-size-2);
	height:var(--chk-size-2);
	border-radius:var(--chk-radius);
	border:1px solid var(--c-grey-85)
}
#searchpanel div.search-box div.fields-container div.field.checkbox input:checked{border:none;background-color:var(--c-blue)!important}

#searchpanel div.search-box div.fields-container div.button{justify-content:space-between}
#searchpanel div.search-box div.fields-container div.button a,
#searchpanel div.search-box div.fields-container div.button input{
	width:auto;
	color:var(--c-white);
	text-align:center;
	text-transform:uppercase;
	cursor:pointer;
	padding:0 var(--btn-padding-2);
	border:none;
	background:var(--c-blue)
}
#searchpanel div.search-box div.fields-container div.button a:hover,
#searchpanel div.search-box div.fields-container div.button input:hover{color:var(--c-grey-14)}

/*MOBILE PANEL*/
.transparent-layer{opacity:0!important}
.panel-button,
.panel-button > div{
	position:absolute!important;
	top:0!important;
	bottom:0!important;
	left:0!important;
	margin:auto 0!important
}
.panel-button{
	width:16px!important;
	height:9px!important;
	display:none!important;
	border:none!important; 
	background:none!important
}
.panel-button:before, 
.panel-button:after{display:none!important}
.panel-button > div,
.panel-button > div:before,
.panel-button > div:after{width:16px!important;height:1px!important}
.panel-button > div{overflow:visible!important;background-color:var(--c-white)!important}
.panel-button > div:before,
.panel-button > div:after{
	content:"";
	position:absolute;
	left:0;
	background-color:var(--c-white)!important
}
.panel-button > div:before{top:-4px!important}
.panel-button > div:after{top:4px!important}
.panel-button.active > div{background-color:transparent!important}
.panel-button.active > div:before{transform:rotate(45deg);top:0!important}
.panel-button.active > div:after{transform:rotate(-45deg);top:0!important}

#panel1{
	height:calc(100% - var(--toolbar-height))!important;
	overflow:auto!important;
	top:var(--toolbar-height)!important;
	left:0!important;
	z-index:100003!important;
	padding:20px!important;
	box-shadow:none!important;
	background:var(--c-black-rgba-70)!important
}
/*#layout:not(.homepage) #panel1,
#layout.homepage #panel1.no-gradient{padding-top:0!important;border-top-right-radius:0!important}*/
#panel1 #mobilepanel,
#mobilepanel #navmobile{
    width:100%;
    clear:both;
	overflow:hidden;
    box-sizing:border-box
}
#panel1 #mobilepanel{height:100%;overflow:auto}

/*ENGINE*/
#engine div.search-box,
#engine div.fields-container{width:100%;clear:both}
#engine div.search-box{padding:var(--main-spacing)/*;padding-bottom:0!important*/}
#engine div.search-box h3{display:none}
#engine div.fields-container,
#engine div.fields-container div.field.option,
#engine div.fields-container div.field.option div,
#engine div.fields-container div.field.checkbox,
#engine div.fields-container div.field.button{
	display:flex;
	flex-flow:row nowrap;
	align-items:center;
	overflow:visible
}
#engine div.fields-container{justify-content:center;grid-gap:0 var(--cnt-margin-1)}
#engine div.fields-container div.field.free-text{width:200px}
#engine div.fields-container div.field.code{width:150px}
#engine div.fields-container div.field.brand{width:200px}
#engine div.fields-container div.field.category{width:250px}
#engine div.fields-container div.field *{overflow:hidden;box-sizing:border-box}

#engine div.fields-container div.field input,
#engine div.fields-container div.field select,
#engine div.fields-container div.field a{outline:none!important}
#engine div.fields-container div.field input,
#engine div.fields-container div.field select{-webkit-appearance:none!important}
#engine div.fields-container div.field.input input,
#engine div.fields-container div.field.select select,
#engine div.fields-container div.field.button input,
#engine div.fields-container div.field.button a{
	height:var(--fld-height-2);
	line-height:var(--fld-height-2);
	float:left
}
#engine div.fields-container div.field.input input,
#engine div.fields-container div.field.select select{
	width:100%;
	font-size:var(--fnt-smaller-1);
	color:var(--c-grey-50);
	border-radius:var(--fld-radius);
	border:1px solid var(--c-grey-90);
	background-color:var(--c-white)!important
}
#engine div.fields-container div.field.input input{padding:0 var(--fld-padding-1)}
#engine div.fields-container div.field.input input::-webkit-input-placeholder{color:var(--c-grey-50);opacity:1!important}
#engine div.fields-container div.field.input input:-moz-placeholder{color:var(--c-grey-50);opacity:1!important}
#engine div.fields-container div.field.input input::-moz-placeholder{color:var(--c-grey-50);opacity:1!important}
#engine div.fields-container div.field.input input:-ms-input-placeholder{color:var(--c-grey-50);opacity:1!important}
#engine div.fields-container div.field.input input:focus::-webkit-input-placeholder{color:transparent}
#engine div.fields-container div.field.input input:focus:-moz-placeholder{color:transparent} 
#engine div.fields-container div.field.input input:focus::-moz-placeholder{color:transparent}
#engine div.fields-container div.field.input input:focus:-ms-input-placeholder{color:transparent}
#engine div.fields-container div.field.select select{
	padding:0 calc(var(--fld-padding-1) * 3) 0 var(--fld-padding-1);
	background:url(/Layout/img/ico-arrow-dwn-grey.png) no-repeat calc(100% - var(--fld-padding-1)) center;
	background-size:var(--sel-arrow-1)
}
#engine div.fields-container div.field.option input,
#engine div.fields-container div.field.checkbox input{padding:0;margin:0}

#engine div.fields-container div.field.checkbox{grid-gap:0 var(--chk-gap)}
#engine div.fields-container div.field.checkbox label{
	font-size:var(--fnt-smaller-1);
	color:var(--c-grey-50);
	line-height:100%;
	text-transform:uppercase
}
#engine div.fields-container div.field.checkbox label br{display:none}
#engine div.fields-container div.field.checkbox input{
	width:var(--chk-size-1);
	height:var(--chk-size-1);
	border-radius:var(--chk-radius);
	border:1px solid var(--c-grey-90);
	background-color:var(--c-white)!important
}
#engine div.fields-container div.field.checkbox input:checked{border:none;background-color:var(--c-blue)!important}

#engine div.fields-container div.field.button{grid-gap:0 var(--cnt-margin-1)}
#engine div.fields-container div.field.button input,
#engine div.fields-container div.field.button a{
	width:auto;
	font-size:var(--fnt-smaller-1);
	color:var(--c-white);
	text-transform:uppercase;
	text-align:center;
	cursor:pointer;
	padding:0 var(--btn-padding-1);
	border-radius:var(--fld-radius);
	border:none;
	background:var(--c-blue)
}
#engine div.fields-container div.field.button input:hover,
#engine div.fields-container div.field.button a:hover{color:var(--c-grey-14)}

/*ERROR PAGES*/
#error,
#error div.error-cnt{
	text-align:center;
	clear:both;
	display:flex;
	flex-flow:row wrap
}
#error{
	width:100%;
	height:100%;
	justify-content:center;
	overflow:hidden
}
#error div.title{display:none!important}
#error div{overflow:hidden;box-sizing:border-box}
#error div.error-cnt{
	width:auto;
	height:100%;
	align-items:center;
	margin:auto
}
#error img,
#error div.error-txt{width:auto}
#error img{height:160px;margin-right:15px}
#error h3,
#error h4{
	font-family:var(--titles-font);
	font-weight:var(--w-black);
	line-height:100%;
	text-transform:uppercase;
	letter-spacing:0.02em;
	margin-bottom:7px
}
#error h3{font-size:var(--fnt-bigger-12);color:var(--c-red)}
#error h4{font-size:var(--fnt-bigger-10);color:var(--c-grey-50)}
#error p{font-size:var(--fnt-smaller-1);line-height:150%}
#error p a{color:var(--c-red);text-decoration:underline}
#error p a:hover{color:var(--c-black)}
#error p strong{display:block}

/*FOOTER*/
#footer div{display:flex;flex-flow:row wrap}
#footer > div,
#footer div.company-data,
#footer div.company-data div,
#footer div.company-data p{width:100%;clear:both}
#footer > div{	
	justify-content:flex-start;
	grid-gap:var(--cnt-margin-1) var(--main-spacing);
	align-items:flex-start
}
#footer p,
#footer p a{color:var(--c-white)}
#footer p{font-size:var(--fnt-smaller-2);line-height:100%}
#footer p strong{font-weight:var(--w-bold)}
#footer p a{cursor:pointer}
#footer p a:hover{color:var(--c-blue)}

#footer div.company-data{width:700px;grid-gap:var(--cnt-margin-1)}
#footer div.company-data div.logos{align-items:center;grid-gap:0 4vw}
#footer div.company-data div.logos img{width:auto}
#footer div.company-data div.logos img.logo-doppler{height:40px}
#footer div.company-data div.logos img.logo-anie{height:32px}
#footer div.company-data p{line-height:150%}
#footer div.company-data p span.company{font-weight:var(--w-bold);text-transform:uppercase}

#footer div.company-data div.sep{
	width:100%;
	height:1px;
	background:var(--c-white-rgba-70);
	background:linear-gradient(90deg, var(--c-white-rgba-70) 0%, var(--c-white-rgba-70) 30%, var(--c-white-rgba-0) 100%)
}

#footer div.spotlights{width:calc(100% - (700px + var(--main-spacing)));position:relative}

#footer div.social-network{
	width:auto;
	justify-content:flex-end;
	grid-gap:0 var(--cnt-margin-1);
	position:absolute;
	bottom:0;
	right:0;
	margin-left:auto
}
#footer div.social-network a{width:var(--ico-size-7);height:var(--ico-size-7)}
#footer div.social-network a img{
	width:100%;
	height:auto;
	float:left
}

/*LOADER*/
#layout.prdlist-page ~ div.loadingoverlay div.loadingoverlay_element,
#layout.prd-page ~ div.loadingoverlay div.loadingoverlay_element{width:var(--cnt-margin-1)!important;height:var(--cnt-margin-1)!important}
/*#layout ~ div.loadingoverlay{z-index:100002!important}*/

/*RESPONSIVITY*/
@media only screen and (min-width:320px) and (max-width:1024px) {
	/*layout*/
	#layout.errorpage #container{height:calc(100% - 215px)}

	/*header*/
	#toolbar div.tlb-icons{grid-gap:0 20px}
	#toolbar div.tlb-icons a.cart-button span{padding:1px 3px}
	#toolbar div.tlb-icons a.logged-button{grid-gap:0 6px}
	#toolbar div.tlb-icons.lft a{grid-gap:0 6px}

	/*panels*/
	#loginbox.management-panels,
	#userpanel.management-panels{width:200px}
	div.management-panels a.close-button{
		width:6px;
		height:6px;
		top:9px;
		right:8px
	}
	#loginbox div.utils a:before{top:3px}
	#userpanel > div p,
	#userpanel > div li{padding:6px 0}
	#userpanel > div p.user img{margin-bottom:5px}
	#searchpanel{width:280px}
	#searchpanel div.search-box div.fields-container{grid-gap:12px}
	#searchpanel div.search-box div.fields-container div.field.code,
	#searchpanel div.search-box div.fields-container div.field.free-text,
	#searchpanel div.search-box div.fields-container div.field.checkbox{width:calc(50% - 6px)}
	
	/*engine*/
	#engine div.fields-container div.field.free-text{width:160px}
	#engine div.fields-container div.field.code{width:120px}
	#engine div.fields-container div.field.pre-code{width:75px}
	#engine div.fields-container div.field.brand{width:150px}
	#engine div.fields-container div.field.category{width:200px}

	/*footer*/
	#footer div.company-data{width:450px}
	#footer div.company-data div.logos img.logo-doppler{height:34px}
	#footer div.company-data div.logos img.logo-anie{height:26px}
	#footer div.spotlights{width:calc(100% - (450px + var(--main-spacing)))}
}

@media only screen and (min-width:1025px) and (max-width:1280px) {
	/*layout*/
	#layout.errorpage #container{height:calc(100% - 215px)}

	/*header*/
	#toolbar div.tlb-icons{grid-gap:0 20px}
	#toolbar div.tlb-icons a.cart-button span{padding:1px 3px}
	#toolbar div.tlb-icons a.logged-button{grid-gap:0 6px}
	#toolbar div.tlb-icons.lft a{grid-gap:0 6px}

	/*panels*/
	#loginbox.management-panels,
	#userpanel.management-panels{width:200px}
	div.management-panels a.close-button{
		width:6px;
		height:6px;
		top:9px;
		right:8px
	}
	#loginbox div.utils a:before{top:3px}
	#userpanel > div p,
	#userpanel > div li{padding:6px 0}
	#userpanel > div p.user img{margin-bottom:5px}
	#searchpanel{width:280px}
	#searchpanel div.search-box div.fields-container{grid-gap:12px}
	#searchpanel div.search-box div.fields-container div.field.code,
	#searchpanel div.search-box div.fields-container div.field.free-text,
	#searchpanel div.search-box div.fields-container div.field.checkbox{width:calc(50% - 6px)}
	
	/*engine*/
	#engine div.fields-container div.field.free-text{width:160px}
	#engine div.fields-container div.field.code{width:120px}
	#engine div.fields-container div.field.pre-code{width:75px}
	#engine div.fields-container div.field.brand{width:150px}
	#engine div.fields-container div.field.category{width:200px}
	
	/*error pages*/
	#error img{height:140px;margin-right:12px}

	/*footer*/
	#footer div.company-data{width:450px}
	#footer div.company-data div.logos img.logo-doppler{height:34px}
	#footer div.company-data div.logos img.logo-anie{height:26px}
	#footer div.spotlights{width:calc(100% - (450px + var(--main-spacing)))}
}

@media only screen and (min-width:1281px) and (max-width:1500px) {
	/*layout*/
	#layout.errorpage #container{height:calc(100% - 232px)}

	/*header*/
	#toolbar div.tlb-icons{grid-gap:0 25px}
	#toolbar div.tlb-icons a.cart-button span{padding:1px 3px}
	#toolbar div.tlb-icons a.logged-button{grid-gap:0 6px}
	#toolbar div.tlb-icons.lft a{grid-gap:0 6px}

	/*panels*/
	#loginbox.management-panels,
	#userpanel.management-panels{width:210px}
	div.management-panels a.close-button{
		width:7px;
		height:7px;
		top:9px;
		right:8px
	}
	#loginbox div.utils a:before{top:3px}
	#userpanel > div p,
	#userpanel > div li{padding:7px 0}
	#userpanel > div p.user img{margin-bottom:6px}
	#searchpanel{width:300px}
	#searchpanel div.search-box div.fields-container{grid-gap:14px}
	#searchpanel div.search-box div.fields-container div.field.code,
	#searchpanel div.search-box div.fields-container div.field.free-text,
	#searchpanel div.search-box div.fields-container div.field.checkbox{width:calc(50% - 7px)}
	
	/*engine*/
	#engine div.fields-container div.field.free-text{width:175px}
	#engine div.fields-container div.field.code{width:135px}
	#engine div.fields-container div.field.brand{width:175px}
	#engine div.fields-container div.field.category{width:225px}
	
	/*error pages*/
	#error img{height:150px}

	/*footer*/
	#footer div.company-data{width:470px}
	#footer div.company-data div.logos img.logo-doppler{height:36px}
	#footer div.company-data div.logos img.logo-anie{height:28px}
	#footer div.spotlights{width:calc(100% - (470px + var(--main-spacing)))}
}

@media only screen and (min-width:1501px) and (max-width:1950px) {
	/*layout*/
	#layout.errorpage #container{height:calc(100% - 247px)}

	/*header*/
	#toolbar div.tlb-icons{grid-gap:0 25px}

	/*panels*/
	#loginbox.management-panels,
	#userpanel.management-panels{width:230px}
	div.management-panels a.close-button{top:9px}
	#loginbox div.utils a:before{top:3px}
	#userpanel > div p,
	#userpanel > div li{padding:7px 0}
	#userpanel > div p.user img{margin-bottom:7px}
	#searchpanel div.search-box div.fields-container{grid-gap:14px}
	#searchpanel div.search-box div.fields-container div.field.code,
	#searchpanel div.search-box div.fields-container div.field.free-text,
	#searchpanel div.search-box div.fields-container div.field.checkbox{width:calc(50% - 7px)}
	
	/*engine*/
	#engine div.fields-container div.field.free-text{width:180px}
	#engine div.fields-container div.field.code{width:140px}
	#engine div.fields-container div.field.brand{width:180px}
	#engine div.fields-container div.field.category{width:230px}

	/*error pages*/
	#error img{height:150px}
	
	/*footer*/
	#footer div.company-data{width:600px}
	#footer div.company-data div.logos img.logo-doppler{height:38px}
	#footer div.company-data div.logos img.logo-anie{height:30px}
	#footer div.spotlights{width:calc(100% - (600px + var(--main-spacing)))}
}

/*TABLET*/
@media only screen and (min-device-width:744px) and (max-device-width:1024px) {
	/*header*/
	#header > div{justify-content:center}
	#toolbar div.tlb-icons.lft{margin-left:31px}

	/*panels*/
	#loginbox.management-panels,
	#userpanel.management-panels{width:190px}
	#loginbox div.utils a:before{top:3px}

	/*mobile panel*/
	.panel-button{display:initial!important}
	
	/*engine*/
	#engine div.fields-container div.field.button input,
	#engine div.fields-container div.field.button a{padding:0}
	
	/*error pages*/
	#error img{height:130px;margin-right:10px}
}

@media only screen and (min-device-width:744px) and (max-device-width:1024px) and (orientation:portrait) {
	/*layout*/
	#layout.errorpage #container{height:calc(100% - 398px)}
	#slideshow.desktop{display:none}
	#slideshow.mobile{display:block}

	/*header*/
	#toolbar div.tlb-icons.rgt a.logged-button span.name{display:none}

	/*mobile panel*/
	#panel1{width:35%!important}

	/*engine*/
	#engine div.fields-container{
		flex-flow:row wrap;
		justify-content:flex-start;
		grid-gap:var(--main-spacing);
		position:relative
	}
	#engine div.fields-container div.field.code{width:100px}
	#engine div.fields-container div.field.free-text,
	#engine div.fields-container div.field.brand,
	#engine div.fields-container div.field.category{width:calc(33.33% - 95px)}
	#engine div.fields-container div.field.button{margin-left:auto}
	#engine div.fields-container div.field.button input,
	#engine div.fields-container div.field.button a{width:55px}

	/*footer*/
	#footer div.company-data{width:100%}
	#footer div.company-data div.logos{justify-content:center}
	#footer div.company-data div.logos img.logo-doppler{height:30px}
	#footer div.company-data div.logos img.logo-anie{height:20px}
	#footer div.company-data p{text-align:center}
	#footer div.company-data div.sep{background:linear-gradient(90deg, var(--c-white-rgba-0) 0%, var(--c-white-rgba-70) 20%, var(--c-white-rgba-70) 80%, var(--c-white-rgba-0) 100%)}
	#footer div.spotlights{width:100%}
	#footer div.social-network{
		width:100%;
		justify-content:center;
		position:static
	}
}

@media only screen and (min-device-width:744px) and (max-device-width:1024px) and (orientation:landscape) {
	/*layout*/
	#layout.errorpage #container{height:calc(100% - 200px)}

	/*mobile panel*/
	#panel1{width:27%!important}

	/*engine*/
	#engine div.fields-container div.field.code{width:110px}
	#engine div.fields-container div.field.free-text,
	#engine div.fields-container div.field.brand,
	#engine div.fields-container div.field.category{width:calc(33.33% - 135px)}
	#engine div.fields-container div.field.button input,
	#engine div.fields-container div.field.button a{width:70px}
}

/*SMARTPHONE*/
@media only screen and (min-device-width:320px) and (max-device-width:743px) {
	/*header*/
	#header > div{justify-content:center}
	#toolbar div.tlb-icons{grid-gap:0 15px}
	#toolbar div.tlb-icons.lft{margin-left:26px}
	#toolbar div.tlb-icons.lft a span,
	#toolbar div.tlb-icons.rgt a.logged-button span.name{display:none}

	/*panels*/
	#loginbox.management-panels,
	#userpanel.management-panels{width:200px}
	#loginbox div.utils a:before{top:3px}
	#searchpanel div.search-box div.fields-container{grid-gap:10px}
	#searchpanel div.search-box div.fields-container div.field.code,
	#searchpanel div.search-box div.fields-container div.field.free-text,
	#searchpanel div.search-box div.fields-container div.field.checkbox{width:calc(50% - 5px)}

	/*mobile panel*/
	.panel-button{display:initial!important}
	
	/*engine*/
	#engine div.fields-container{
		flex-flow:row wrap;
		justify-content:flex-start;
		grid-gap:var(--main-spacing);
		position:relative
	}
	#engine div.fields-container div.field.button{margin-left:auto}
	#engine div.fields-container div.field.button input,
	#engine div.fields-container div.field.button a{padding:0}
	
	/*error pages*/
	#error img{height:100px}

	/*footer*/
	#footer div.company-data{width:100%}
	#footer div.company-data div.logos{justify-content:center}
	#footer div.company-data div.logos img.logo-doppler{height:30px}
	#footer div.company-data div.logos img.logo-anie{height:20px}
	#footer div.company-data p{text-align:center}
	#footer div.company-data div.sep{background:linear-gradient(90deg, var(--c-white-rgba-0) 0%, var(--c-white-rgba-70) 20%, var(--c-white-rgba-70) 80%, var(--c-white-rgba-0) 100%)}
	#footer div.spotlights{width:100%}
	#footer div.social-network{
		width:100%;
		justify-content:center;
		position:static
	}
}

@media only screen and (min-device-width:320px) and (max-device-width:743px) and (max-aspect-ratio:13/9) {
	/*layout*/
	#layout.errorpage #container{height:calc(100% - 177px)}
	#slideshow.desktop{display:none}
	#slideshow.mobile{display:block}

	/*panels*/
	#searchpanel{width:calc(100% - (var(--main-spacing) * 2))}

	/*mobile panel*/
	#panel1{width:60%!important}
	
	/*engine*/
	#engine div.fields-container div.field.free-text{width:calc(60% - 5px)}
	#engine div.fields-container div.field.code{width:calc(40% - 5px)}
	#engine div.fields-container div.field.brand,
	#engine div.fields-container div.field.category{width:calc(50% - 5px)}
	#engine div.fields-container div.field.button input,
	#engine div.fields-container div.field.button a{width:62px}

	/*error pages*/
	#error div.error-cnt{justify-content:center;align-content:center}
	#error div.error-cnt h3,
	#error div.error-cnt h4,
	#error div.error-cnt p{text-align:center}
	#error div.error-cnt img{margin-bottom:0 0 var(--cnt-margin-1) 0}

	/*footer*/
	#footer div.spotlights div.nav-container{display:none}
}

@media only screen and (min-device-width:320px) and (max-device-width:743px) and (min-aspect-ratio:13/9) {
	/*layout*/
	#layout.errorpage #container{height:100%}

	/*panels*/
	#searchpanel{width:260px}

	/*mobile panel*/
	#panel1{width:35%!important}
	
	/*engine*/
	#engine div.fields-container div.field.code{width:95px}
	#engine div.fields-container div.field.free-text,
	#engine div.fields-container div.field.brand,
	#engine div.fields-container div.field.category{width:calc(33.33% - 85px)}
	#engine div.fields-container div.field.button{margin-left:auto}
	#engine div.fields-container div.field.button input,
	#engine div.fields-container div.field.button a{width:55px}
}