/* Page header */
#page-header{width:100%;position:relative;height:var(--header-height);heights:inherit;min-height:60px;max-height:19vh;max-height:80vh;margin:0 auto;box-sizing:border-box;z-index:100000}

/* Por defecto el header pone todos los elementos flotando uno al lado de otro*/
#page-header-container{display:flex;align-items:center;flex-flow:row;gap:var(--margin-spacer);margin:0 auto;padding:0 calc(var(--margin-spacer) / 2);height:100%;max-height:var(--header-height);transition:background 0.2s, height 200ms}
#page-header-container>*{position:relative;display:flex;align-items:center}
#page-header-container .logo-wrapper{max-width:20%;max-height:80%;width:100%;height:100%}
#page-header-container .logo-wrapper a{display:block;width:100%;height:100%}
#page-header-container .les{justify-content: space-between;flex:2;width:100%}
#page-header-container .les .sf,
#page-header-container .les .sl{display: flex;align-items: center;gap: calc(var(--margin-spacer) / 2);font-size: 1.5em}
#page-header-container .btn{color:inherit;padding:0 var(--margin-spacer);position:relative;line-height:40px;transition:color 0.3s;z-index:0}
#page-header-container .btn:after{content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;background: transparent;z-index: -1;border: 1px solid #fff;transition: border 0.3s, background 0.3s}
#page-header-container .btn:hover{color: #000}
#page-header-container .btn:hover:after{border: 1px solid var(--button-background-color);background-color: var(--button-background-color)}


/* Modos del Header */ 
#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 */ 
#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.bgtransparent.full-width{background-image:linear-gradient(360deg, transparent, #00000069)}
#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)}




/*Centrado total del menu*/
#page-header .main-menu{margin-right: 0}

/* Main Menu button */
#page-header .main-menu-button{
    transition: opacity 0.1s, width 0.2s 0.2s;
    margin: 0;
    pointer-events: all;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    width: 0;
}
#page-header .main-menu-button>a{display: flex;color: #999;font-weight: 800;line-height: 40px;font-size: 1.8em;align-items: center;position: relative}
#page-header .main-menu-button>a .text{display: none}
.bgdark #page-header-container .main-menu-button>a{color: inherit}
#page-header .main-menu-button a:active .svg-icon{opacity: 0.90;transition: transform 200ms}
#page-header .main-menu-button .follow-us .svg-icon{width: 46px;height: 46px;background-color: transparent}
#page-header .main-menu-button .follow-us .svg-icon:before{display:none}

#page-header .main-menu-wrapper{overflow: hidden;position: relative;top: 50%;transform:translateY(-50%);transition: transform linear .2ms;background:transparent}

#page-header-container.full-width{width: 100%;pointer-events: all}

#page-header-datetime{font-size: 1.1em;text-transform: uppercase;margin:0;color: var(--background-main-color);flex:1 100%; text-align: center;margin-top:5px;order:3;align-self:flex-start}

#page-header.bgtransparent svg path:not(.play,.circle),
#page-header.bgtransparent svg rect:not(.play,.circle),
#page-header.bgdark svg path:not(.play,.circle),
#page-header.bgdark svg rect:not(.play,.circle){fill:#fff}



@media (max-width: 1366px){
  #page-header-container .les{width: calc(100% - 200px);justify-content:right}
  #page-header-container .les .btn{padding: 0 calc(var(--margin-spacer) / 2)} 
  #page-header .sl .login .text{display: none}
}

@media (max-width: 1262px){
  #page-header #page-header-container{padding:0 2em}
}

@media (max-width: 1000px){
  #page-header-container .les .main-menu{display: none}
  #page-header .main-menu-button{opacity: 1;display: flex;width: 30px}
}

@media(max-width: 768px){
  #page-header .main-menu-button{width: 30px;padding: 0}
  #page-header #page-header-container>.logo-wrapper{position:absolute;left:2em;top:50%;transform:translate(0, -50%);max-width:100%;width:auto}

  html #page #page-header{background-color:var(--background-second-color);border-bottom: 1px solid #fff;transform:unset !important;opacity:1 !important;left:0 !important;top:0}

  .main-wrapper{margin-top:var(--header-height)}
  
}