.page .logo-wrapper{padding:0;transition:height 100ms,width 100ms,background 100ms;margin:0}

/*
.page-header-collapsed #page-header-logo-wrapper{width:200px;position:absolute;justify-content:center;left:50%;transform:translate(-50%,0);text-align:center;pointer-events:all}
*/
.page-header-collapsed #page-header-logo-wrapper{text-align:center;pointer-events:all}
.page-header-collapsed #page-header-logo-wrapper a{display:block;width:100%;height:100%;text-align:left}

.page .logo-wrapper{z-index:2}
/*.page .logo-wrapper A.logo{color:inherit;display:block;width:100%;height:100%}*/
.page .logo-wrapper A.logo:hover{cursor:pointer}
.page .logo-wrapper A.logo a{display:inline-block;line-height:100%;font-size:2rem;max-width:100%;position:absolute;top:50%;transform:translateY(-50%);transition:opacity 500ms}
.page .logo-wrapper A.logo img{width: auto;height: auto;max-width: 100%;max-height: 100%}

/* La pieza no está configurada */
.page .logo-wrapper.empty-piece {min-width:50px;min-height:50px;}
.page .logo-wrapper.empty-piece A.logo{display: block;width: 100%;height: 100%}
.page .logo-wrapper.empty-piece A.logo span {text-align:center;width:100%}

/* Muestra o esconde el logo light or dark según el color de fondo. Si el logo sirve para los dos fondos debe tener las 3 clases "logo light dark" */
A.logo .dark  {opacity:0;visibility:hidden;transition:opacity 500ms}
A.logo .light {opacity:1;visibility:visible;transition:opacity 500ms}

.bgdark A.logo .light {opacity:0;visibility:hidden;transition:opacity 500ms}
.bgdark A.logo .dark  {opacity:1;visibility:visible;transition:opacity 500ms}

@media (max-width: 1366px){
	.page .logo-wrapper{width: 200px}
}

@media (max-width: 1000px){
	#page-header-container .logo-wrapper{width: 180px}
}