/* Desplazamiento elástico y eliminado del */
* {-webkit-overflow-scrolling: touch;-webkit-tap-highlight-color:transparent}

/* Box-sizing border-box */
html {box-sizing: border-box}
*, *:before, *:after {box-sizing: inherit}

html{font-size:10px;position:relative;height:100%;box-sizing:border-box}
body{margin:0;height:100%;box-sizing:border-box}
h1,h2,h3{padding:0;margin:0}    

.page {height:100%;box-sizing:border-box}
html.dropdown-modal {overflow:hidden}

a {text-decoration:none;transition:color ease-out 200ms, background-color ease-out 200ms, opacity ease-out 200ms, transform ease-out 200ms}
a:hover {opacity:1}

main a {color:var(--link-color)}
main a:hover {color:var(--link-hover-color)}

a {color:var(--link-color)}
a:hover {color:var(--link-hover-color)}

.main-article h1 {font-size:250%;margin-top:0}
.main-article h1 img {max-width:100%;height:auto}


/* Colores sobre fondo claro */
body {color:black}
path, rect {fill:black}

/* Colores sobre fondo oscuro */
.bgdark  {background-color:black;color:rgba(255,255,255,0.85)}
.bgdark path, .bgdark rect {fill:white}

/* Texto atenuado */
.dimmed,.gray {opacity:0.5}

/* Redondeados */
.square  {}
.rounded {}
.circled {}

/* Titulos ocultos (para cumplir reglas semánticas y document outline) */
.hidden-title {display:none}

/* Estilos de links tipo botones (listas, menúes y botones */
.btn {user-select:none;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle; display:inline-block}

/* Estilo translucido (btn-glass) */
.btn-glass {color:inherit}

/* Estilo selected (btn.selected) */
.btn.selected{color:inherit;background-color:rgba(0,0,0,0.015)} 
.bgdark .btn.selected{background-color:rgba(255,255,255,0.2);color:white}

/* Estilo Boton primario (btn-primary) */
.btn-primary {border:none;font-size:1rem;line-height:54px;padding:0 40px;background-color:var(--button-background-color);letter-spacing:1px;display:inline-block;color:rgba(255,255,255,.8) !important;text-transform:uppercase}
.btn-primary:hover{background-color:var(--button-hover-background-color)} 
.btn-primary:active {background-color:var(--button-active-background-color)}
.btn-primary img {vertical-align:middle;height:26px;opacity:.8}
.btn-primary img+span {margin-left:6px}

/* Estilo Boton sólido (btn-solid) */
.btn-solid {border:1px solid rgba(0,0,0,0.5);font-size:1rem;line-height:54px;padding:0 40px;letter-spacing:1px;display:inline-block;color:rgba(0,0,0,0.8) !important;text-transform:uppercase}
.btn-solid:hover{} 
.btn-solid:active {}
.btn-solid img {vertical-align:middle;height:26px;opacity:.8}
.btn-solid img+span {margin-left:6px}

/* Busy Spinner */
button.busy .busyicon,
div.vplpreloader,div.busy{border-color:rgba(255,255,255,0.5);white-space:nowrap;overflow:hidden;border-style:solid;border-top-color:transparent;animation:vcpspinneranimation 850ms infinite linear;display:inline-block;pointer-events:none}
@keyframes vcpspinneranimation {from {transform:rotate(0deg);} to {transform:rotate(360deg)}}
div.vplpreloader,div.busy.size64 {width:64px;height:64px;border-radius:36px;border-width:3px}
button.busy .busyicon,
div.busy.size32 {width:32px;height:32px;border-radius:20px;border-width:4px}
div.busy.size19 {width:19px;height:19px;border-radius:18px;border-width:4px}
div.busy.size16 {width:16px;height:16px;border-radius:10px;border-width:1px}
div.vplpreloader,div.busy.absolute {top:50%;left:50%;position:absolute}
div.busy.absolute.size16 {margin:-8px 0 0 -8px}
button.busy .busyicon,
div.busy.absolute.size32 {margin:-16px 0 0 -16px}
div.vplpreloader,div.busy.absolute.size64 {margin:-32px 0 0 -32px}
                              
.clear{clear:both;font-size:0;height:0}

ul {margin:0;padding:0;list-style-type: none}

.vsmhidden {display:none !important}

main {padding-bottom:5em;box-sizing:border-box;margin-left:auto;margin-right:auto}

/* Media queries */
@media (max-height:800px) {
    main {padding-bottom:3em}
}

@media (max-height:600px) {
    main {padding-bottom:1em}
}

.layout-columns {display:flex;align-items:stretch;justify-content:space-between}
.layout-columns>*+* {margin-left:3em}

@media(max-width:1024px) {
    .layout-columns{flex-flow:row wrap;justify-content:center}
    .layout-columns>*+* {margin-left:0;margin-top:1em}
    
    /* Los niveles interiores de columnas se mantiene sin caer hasta el proximo breakpoint */
    .layout-columns .layout-columns {flex-flow:row;justify-content:space-between}
    .layout-columns .layout-columns>*+* {margin-left:3em;margin-top:0}   
}

/* Caen el resto de los niveles */
@media(max-width:600px) {
    .layout-columns .layout-columns{flex-flow:row wrap;justify-content:center}
    .layout-columns .layout-columns>*+* {margin-left:0;margin-top:1em}
}

/* Elementos comunes a todas las piezas */
.piece, .piece>.item  {position:relative;box-sizing:border-box}
.piece .item .image img{vertical-align:middle;width:100%;height: auto}
.piece .items .item.hidden{opacity:0.3}

article.main-article {margin-bottom:2em;width:100%}
article.main-article header {margin-bottom:2em}

/* ASIDE */
div.asides {margin-top:6em}
div.asides aside.box {max-width:400px;min-width:270px;margin-left:auto;margin-right:auto;margin-bottom:2em;border-radius:5px;text-align:center}

/* ASide call-out boxes */
aside.box h1 {font-size:1.5rem;margin-top:0}
aside.box .illustration {margin-top:1em}
aside.box .btn {margin:0.5em 0.5em}

.box{border:1px solid #e0e0e0;padding:1.5em 1em;box-shadow:rgba(0,0,0,.03) 4px 4px}

/*box-shadonw*/
.noboxshadow{box-shadow: none}