/*Page Header Sticky por defecto*/
/*
html:not(.vincolo-topbar) #page-header.sticky{position:fixed;z-index: 10}
*/
#page-header.sticky{position:fixed;z-index: 10}
#page-header.sticky + .main-wrapper .block.block00 DIV#vsmcontextmenu{margin-top:calc(var(--header-height) + 10px)}
#page-header.sticky + .main-wrapper .block.block00 .hightlightedmedia SPAN#vsmimgbutton{margin-top:calc(var(--header-height) + 10px)}
#page-header.sticky:after{opacity: 0;transition: opacity 0.5s}


#page-header .zone.zfull{position: relative;margin-top:calc(var(--header-height)* -1);z-index:0}

.page-header-collapsed #page-header .zone.zfull{display: none}


/* Uno debajo del otro*/
#page-header.block-vertical {max-height:initial}
#page-header.block-vertical #page-header-container{display:block;align-items: center}
#page-header.block-vertical #page-header-container>*{position:relative;display:block;margin-right:0; white-space:normal}
#page-header.block-vertical #page-header-container .top-header{display: flex;padding: 20px 0 40px 0;border-bottom: 1px solid #ebebeb;align-items: center}
#page-header.block-vertical #page-header-container .header-bottom{display: flex;align-items: center}
#page-header.block-vertical .logo-descrip .logo-wrapper{min-height: 61px;margin-bottom: 10px}
#page-header.block-vertical .site-description{font-family: var(--logo-font);font-size: 2.2em;color: rgba(0,0,0,0.6);font-style: italic;letter-spacing: 0.05em}
#page-header.block-vertical .top-header>#header-follow-us{margin-left: auto}

#page-header.bglight .page-header-container>#header-follow-us{margin: 0} 
#page-header .page-header-container>#header-follow-us a .svg-icon.youtube svg .play{fill: transparent}

/* Page header sticky & collapsed */
.page-header-collapsed #page-header{position:fixed;width:100%;top:0;z-index:100000000;transform:translate3d(0,0,0);opacity:1;height:var(--header-collapsed-height)}
.page-header-collapsed #page-header[data-scroll-direction="down"]:not(.main-menu-panel-opened){animation: fadeOutUp 0.5s linear 2s 1 normal forwards}
.page-header-collapsed #page-header[data-mouse-direction="up"],
.page-header-collapsed #page-header[data-scroll-direction="up"]:not(.main-menu-panel-opened){animation: fadeInUp 0.5s linear 0s 1 normal none}
.page-header-collapsed #page-header #page-header-container.bgtransparent.full-width{
    height:var(--header-collapsed-height);
    border-bottom: 2px solid;
    padding: 1em;
    background-image: linear-gradient(360deg, #00000069, transparent);
}

.vincolo-topbar.page-header-collapsed #page-header{top:50px}
.page-header-collapsed #page #page-header{position:fixed;display:flex;pointer-events:none;left:50%;transform:translate3d(-50%,0,0);max-width:100%}
.page-header-collapsed #page-header .main-menu-button{opacity: 1;width: 30px;padding: 0;display: flex}
.padding-first-piece .block-idx-1>.zone>UL>LI:first-child SPAN#vsmimgbutton,
.padding-first-piece .block-idx-1>.zone>UL>LI:first-child DIV#vsmcontextmenu.absolute{margin-top:var(--header-height)}
.vincolo-topbar.padding-first-piece .block-idx-1>.zone>UL>LI:first-child DIV#vsmcontextmenu.absolute,
.vincolo-topbar.padding-first-piece .block-idx-1>.zone>UL>LI:first-child SPAN#vsmimgbutton{margin-top: calc(var(--header-height) + 50px)}

#page-header .site-info{font-size:15px;font-family:'Poppins';color:#000;white-space:normal;text-align:center;line-height:1.3em;padding-right:22px;width:126px;opacity:1;transition:opacity;transition-delay:150ms;transition-duration:0.3s}
.page-header-collapsed #page-header .site-info{opacity: 0;visibility: hidden;width: 0;padding: 0}

.page-header-collapsed #page-header-datetime{display: none}
.page-header-collapsed #page-header-container .les .sf{display: none}

#page-header.block-vertical #page-header-container {height:100%;box-sizing:border-box}

header + .main-wrapper .piece.pwa DIV#vsmcontextmenu,
header DIV#vsmcontextmenu{opacity: 0;visibility: hidden;transition: opacity 0.5s}
header:hover DIV#vsmcontextmenu,
header:hover + .main-wrapper .piece.pwa DIV#vsmcontextmenu{opacity: 1;visibility: visible}



#page-header-container .les .main-menu{opacity: 1;width: inherit;transition: opacity 0.3s;flex-grow: 2}
.page-header-collapsed #page-header-container .main-menu{opacity:0;width:0;padding:0;margin:0;visibility:hidden}

.page-header-collapsed #page-header.bgdark svg path:not(.play,.circle),
.page-header-collapsed #page-header.bgdark svg rect:not(.play,.circle){fill:#fff}

/* Modos del Header en Scroll */ 
#page-header.bglight.page-width{background-color:#fff} 
#page-header.bglight.extended-width{background-color:#fff} 
#page-header.bglight.full-width{background-color:#fff}
#page-header.bgtransparent.page-width{background-color:transparent} 
#page-header.bgtransparent.extended-width{background-color:transparent} 
#page-header.bgtransparent.full-width{background-color:transparent}
#page-header.bgdark.page-width{background-color:var(--background-second-color)} 
#page-header.bgdark.extended-width{background-color:var(--background-second-color)} 
#page-header.bgdark.full-width{background-color:var(--background-second-color)}

/* Modos del Contenedor del Header en Scroll */ 
#page-header #page-header-container.bglight.page-width{background-color:#fff} 
#page-header #page-header-container.bglight.extended-width{background-color:#fff} 
#page-header #page-header-container.bglight.full-width{background-color:#fff}
#page-header #page-header-container.bgtransparent.page-width{background-color:transparent} 
#page-header #page-header-container.bgtransparent.extended-width{background-color:transparent} 
#page-header #page-header-container.bgtransparent.full-width{background-color:transparent}
#page-header #page-header-container.bgdark.page-width{background-color:var(--background-second-color)} 
#page-header #page-header-container.bgdark.extended-width{background-color:var(--background-second-color)} 
#page-header #page-header-container.bgdark.full-width{background-color:var(--background-second-color)}


@keyframes fadeInUp {
  from {transform: translate3d(-50%,-100%,0);}
  to {transform: translate3d(-50%,0,0);}
}

@keyframes fadeOutUp {
  from {opacity: 1;}
  to {opacity: 0;transform: translate3d(-50%,-100%,0);}
}

@media (max-width:1023px) {
    .piece.grid .piece.banner, .piece.grid .items .item{height:auto}
}

@media(max-width: 1024px){
  #page-header .main-menu{font-size:1.9em}
  #page-header-container>#page-header-search-box{display: none}
  #page-header-container>#header-follow-us{display: none}
  
}

@media(max-width: 900px){
  #page-header .logo-wrapper, 
  #page-header #page-header-search-box{position: relative}
}