/* .we-talk */
header .we-talk { display: none;} 



/* .btn-advisor */
.btn-advisor { position: fixed; right: 0; top:16%; z-index: 1000; display: block; color: #fff; font-size: 14px; text-align: center; text-transform: uppercase; background: #efcd34; padding: 10px 20px; transition: background-color .5s ease;}
.btn-advisor span { display: block; color: #fff; font-family: 'apercubold', sans-serif, sans-serif; font-size:14px; line-height: 16px;}
.btn-advisor svg { color: #fff; width: 25px; height: 25px; margin-bottom: .5rem;}
.btn-advisor:hover { background: #3182a4}

@media(min-width:1251px){ 
    .btn-advisor { z-index: 10000;}
}
@media (max-width:700px){
    .btn-advisor { width:60px;}
    .btn-advisor span:not(.ico) { display:none;}
    .btn-advisor svg { margin-bottom: 0;}
}
@media (max-width: 650px){
    .btn-advisor { top: 95px; z-index: 999;}
}



/* a.text-ocre */
p a.text-ocre { font-family: 'apercubold', sans-serif; background-image: linear-gradient(to bottom, white 90%, transparent 90%), linear-gradient(to right, #ddbc6c 50%, #fff 50%); background-size: 300% 100%; background-position: 100% 0; transition: 1s background-position;}

@media (hover:hover) {
    p a.text-ocre:hover { background-position: 0%;}
}



.configurator { margin-top: 3rem;}




/* .image-content */
.configurator .image-content { position: relative;}
.configurator .image-content img { position: relative; width: 100%;}
.configurator .image-content img:not(.init) { position: absolute; top: 0; left: 0;}

.configurator .image-content img.headboard       { z-index: 40;}
.configurator .image-content img.downspout       { z-index: 35;}
.configurator .image-content img.columns         { z-index: 30;}
.configurator .image-content img.service-sistems { z-index: 25;}
.configurator .image-content img.worktop         { z-index: 20;}
.configurator .image-content img.modules         { z-index: 15;}
.configurator .image-content img.tables          { z-index: 10;}
.configurator .image-content img.fume-cupboards  { z-index: 5;}
.configurator .image-content img.init            { z-index: 0;}



/* .configurator-options */
.configurator-options > .flex { justify-content: center; flex-wrap: wrap;}
.configurator-options > .flex li { position: relative; margin: .25rem;}
.configurator-options > .flex li span:not(.inline-block) { cursor: pointer; display: inline-block; color: #28628a; font-size: .8rem; line-height: .8rem; letter-spacing: 1px; text-transform: uppercase; background: #fafafa; padding: .5rem 1rem; transition: color .5s ease , background-color .5s ease ;}

@media (min-width: 1024px){
    .configurator-options > .flex { align-items: stretch; flex-wrap: nowrap;}
    .configurator-options > .flex li span:not(.inline-block) { display: flex; flex-direction: row; justify-content: center; align-items: center; height: 100%; font-size: .75rem; text-align: center;}
}

    /* .sub-nav */
.configurator-options .sub-nav { position: absolute; top: 15px; left: calc(50% - (225px / 2)); z-index: 0; width: 225px; background: rgba(255, 255, 255, .9); border-top: 3px solid #fff; opacity: 0; margin-bottom: 0; padding: 1rem; pointer-events: none; transition: top .5s ease , opacity .3s ease;}
.configurator-options .headboard .sub-nav { left: calc(50% - (350px / 2)); width: 350px;}
.configurator-options .service-sistems .sub-nav { left: calc(50% - (375px / 2)); width: 375px;}
.configurator-options .sub-nav li { margin: 1rem 0 0;}
.configurator-options .sub-nav li:first-child { margin: 0;}
.configurator-options .sub-nav li ul { margin: 1rem 0 2rem 1rem;}
.configurator-options .sub-nav .btn01 { max-width: 100%; font-size: .8rem; line-height: .8rem; margin: 1.5rem 0 0;}
.configurator-options .sub-nav .button { position: relative; cursor: pointer; color: #333; font-size: .9rem; line-height: .9rem; text-align: left; background: transparent; transition: color .5s ease;}
.configurator-options .sub-nav .button:after { content: ""; position: absolute; bottom: -3px; left: 0; width: 5px; height: 2px; background: #efcd34; transition: width .5s ease;}
.configurator-options .sub-nav .button:not(.disable).active ,
.configurator-options .sub-nav .button:not(.disable):hover { color: #28628a; font-weight: 600;}
.configurator-options .sub-nav .button:not(.disable).active:after ,
.configurator-options .sub-nav .button:not(.disable):hover:after { width: 100%;}
.configurator-options .sub-nav .inline-block { margin: 0 .5rem;}
.configurator-options .sub-nav span.inline-block { font-size: .9rem; line-height: .9rem; margin-left: 0; margin-right: auto;}

.configurator-options .sub-nav .button.disable { pointer-events: none; opacity: .5;}
.configurator-options .sub-nav .button.no-click { pointer-events: none;}

.configurator-options > .flex li:hover span:not(.inline-block) { color: #fff; background: #3182a4;}
.configurator-options > .flex li:hover .sub-nav { top: 27px; z-index: 900; opacity: 1; pointer-events: all;}


@media (max-width: 1023px){
    .configurator .image-content.content { width: 100%;}
}
@media (max-width: 767px){
    .configurator-options > .flex li ,
    .configurator-options > .flex li span:not(.inline-block) { width: 100%;}
    .configurator-options .sub-nav { position: relative; top: 0; left: 0 !important; width: 100% !important; height: 0; margin: 0; padding: 0;}
    .configurator-options > .flex li.active .sub-nav { position: relative; top: 0; height: auto; padding: 1rem;}
    .configurator-options .sub-nav li { display: inline-block; width: auto; margin-right: 1.5rem !important;}
    .configurator-options .sub-nav li:last-child { width: 100%; margin-right: 0 !important;}
    .configurator-options .sub-nav li ul { margin: 0;}
    .configurator-options .sub-nav li ul li.flex { width: 100%; margin-right: 0 !important;}
    .configurator-options .sub-nav .btn01 { display: inline-block; width: auto; max-width: inherit; margin-top: 0;}
}