.block{position:relative}
.block0>.separator{width:calc(100% - 3em);max-width:var(--page-width);margin:var(--margin-spacer) auto}

.block.section-list>.separator{display:block;margin:calc(var(--margin-spacer) / 4) 0}
/*.vincolo-topbar .block0>.block.block-idx-1{background-color:rgb(86 215 132 / 10%)}*/

/*.block0>.block.block-idx-1 + .separator{margin:0;padding:0;height:0}*/
/*.block0>.block.block-idx-2{padding-top:var(--margin-spacer)}*/

.blocktitle + .separator{background-color: transparent}
.block-wrapper:first-child.separator{background-color: transparent}

.zone{position: relative}
.block-child{display: flex;flex-direction: row;flex-wrap: wrap}

.z25{width: calc(25% - (var(--margin-spacer) * 3 / 4))}
.z33{width: calc(33.33% - (var(--margin-spacer) * 2 / 3))}
.z35 {width: calc(35% - (var(--margin-spacer) / 2))}
.z50{width: calc(50% - (var(--margin-spacer) / 2))}
.z65{width: calc(65% - (var(--margin-spacer) / 2))}
.block3A .section UL{background: #a9cce7}
.block3A .global UL{background: #d9f3ff}
.block-idx-1 .block2{display: flex;flex-direction: row;flex-flow: row wrap;align-items: flex-start}
.block-wrapper>#vsmcontextmenu{left: 50%;transform: translate(-50%,0)}
.section-list .block2{display: flex}
.section-list .block2 .z75{flex: 1;margin-right: 0}
.section-list .block2 .z25{width: calc(25% - (var(--margin-spacer) / 2));margin-left: var(--margin-spacer)}


.blocktitle.piecetitle{font-weight: bold; font-family:var(--title-font);font-size:5em;line-height:1.1em;width:100%;display:block;position:relative;text-align:center;color:#3d4042;margin:0 auto; padding:  var(--margin-spacer) 0 0.5em 0}
.bgdark .blocktitle.piecetitle{color:#fff}


.block.padding{padding: var(--margin-spacer) 0}
.block.hide-next-sep + .separator{display: none}

.block.block00{margin-bottom:calc(var(--margin-spacer) / 2)}

/* Piezas */
.piece .folder,
.piece .kicker{font-size:1.3em;line-height:1.8em;text-transform:uppercase;max-width:100%;width:fit-content;color:var(--folder-piece-color);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:700;transition: color 0.3s}
.piece .title{position:relative;font-family:var(--title-font);font-size:2.3em;line-height:1.1em;text-align: left;color: var(--title-piece-color);transition: color 0.3s;font-weight:normal}
.piece .title:hover{color: var(--title-piece-hover-color)}
.piece .title a{color:inherit;transition:all 0.4s;position:relative}
.piece .summary{letter-spacing: 0.05em;display: inline;font-size: 1.6em;line-height: 1.3em;color: var(--summary-piece-color)}

.bgdark .piece .folder,
.bgdark .piece .kicker{color:#fff}
.bgdark .piece .title{color:#fff}
/*.bgdark .piece .title a{color:#fff}*/
.bgdark .piece .summary{color:#fff}

.piece article:hover:after{width: 100%}

.piece .withwidget .media .image{position:relative}
.piece .withwidget .media .image:before{content:"";position:absolute;width:50px;height:50px;bottom:4%;right:3%;background: url('/0/lib/svg-icons/videoplay.svg') no-repeat 0 0;z-index:2;background-size:50px;pointer-events:none; transition: all 0.3s}
.piece .withwidget .media .image:after{content:"";position:absolute;width:50px;height:50px;bottom:4%;right:3%;background-color: var(--background-main-color);z-index:1;pointer-events:none;transition: all 0.3s;opacity: 0.5;border-radius: var(--border-radius)}
.piece .withwidget:hover .media .image:before,
.piece .withwidget:hover .media .image:after{transform: scale(1.1); transition: all 0.2s}

.piece .item.padding{padding: 15px 0}
.piece .item.padding .kicker{margin: 0 15px 0.8em 15px}
.piece .item.padding .title{margin: 0 15px 0.8em 15px}

.z100 .piece:not(.grid) .title{font-size:4em}
.z100 .piece:not(.grid,.highlighted) .summary{font-size:1.5em}
.z75 .piece:not(.grid) .title{font-size:2.8em}
.z70 .piece:not(.grid) .title,
.z50 .piece:not(.grid) .title{font-size:2.5em}
.z30 .piece:not(.grid) .title,
.z25 .piece .title{font-size:1.8em}
.z33 .piece .title{font-size:2.6em}

.piece .item.events .link{display:flex}
.piece .item.events .link button{margin:1em auto 0 auto}

/* Seccion */
.sts-b{padding:var(--margin-spacer);background-color:#f2f2f2}
.listsearch-wrapper,
.sts-w{display:block;box-sizing:border-box;opacity:0.9;margin-bottom:3em;text-align:center}
.sts-w .st{font-family:var(--title-font);font-size:4.5em;padding-bottom:0.2em;color: var(--link-hover-color);line-height:1.2em;font-weight:normal}
.sts-w .ss{font-family:var(--summary-font);font-size:2.5em;display:block}


/* Diseño de bloques */
.block-wrapper{position: relative}
.block-wrapper>#vsmcontextmenu{top: 0;left: 50%;transform: translate(-50%,0)}
.block.bkg-b{padding: var(--margin-spacer) 0;box-sizing: border-box}

/* Pwa */
.piece.pwa{position: absolute;top: 25px;left: 0}


.section-list .block2{display: flex;flex-wrap: wrap}
.section-list .zleft{flex: 1;margin: 0 0 var(--margin-spacer) 0}
.section-list .zright{margin-left: var(--margin-spacer);position: relative}
.section-list .zleft.z75:after{display: none;margin: 0}


.bgdark .blocktitle.piecetitle{color: inherit}
.bgdark .block .piecetitle:after{background-color: rgba(255,255,255,0.8)}


.item.staff{display:flex;flex-direction:column;gap:1em;align-items:center}
.item.staff .media img{border-radius:50%}
.item.staff .title{text-align:center;font-size:2.5em;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item.staff UL{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1em}
.item.staff UL LI{width:40px}

/*Breakpoints de zonas*/
@media (max-width: 1024px){
    .z25{width: calc(50% - (var(--margin-spacer) / 2));margin-bottom: calc(var(--margin-spacer) * 2)}
    .z25.zleft{order: 2;margin-bottom: 0}
    .z25.zright{order: 3;margin-bottom: 0}
    .z25.zmiddle{order: 3;margin-bottom: 0;margin-right: 0}
    
    .block3 .z25.zmiddle{float: right}
    
    .block4 .z25.zmiddle{margin-right: var(--margin-spacer)}
    
    .block5 .z25.zmiddleleft{float: right;margin-right: 0}
    .block5 .z25.zmiddleright{margin-bottom: 0}
    
    .block6 .z25.zone{order: unset;margin-bottom: calc(var(--margin-spacer) * 2)}
    .block6 .z25.zmiddleleft{margin-right: 0}
    .block6 .z25.zmiddleright{margin-bottom: 0}
    .block6 .z25.zright{margin-bottom: 0}

    .z50.zmiddle{order: 1;width: 100%;margin: 0 0 calc(var(--margin-spacer) * 2) 0}
    .z50.zright{order: 1;width: 100%;margin: 0 0 calc(var(--margin-spacer) * 2) 0}
    .z50.zleft{order: 1;width: 100%;margin: 0 0 calc(var(--margin-spacer) * 2) 0}

    .block4 .z50.zright{margin: 0}

    .z75.zone{width: calc(50% - (var(--margin-spacer) / 2))}

    .block9 .z25.zleft{order: unset}

    .block10 .z33{width: 100%;margin: 0 0 calc(var(--margin-spacer) * 2) 0}
    .block10 .z33.zright{margin: 0}

    .z25.zleft{order: 2;margin-bottom: 0}
    
}

@media (max-width: 768px){

    .blocktitle.piecetitle{font-size:3em}

    .zone.z75{width: 100%;margin: 0 0 calc(var(--margin-spacer) * 2) 0}
    .zone.z75.zright{margin-bottom: 0}
    
    .zone.z50{width: 100%;margin: 0 0 calc(var(--margin-spacer) * 2) 0}
    
    .zone.z25{width: 100%;margin: 0 0 calc(var(--margin-spacer) * 2) 0}
    .zone.z25.zright{margin-bottom: 0}
    
    .block3 .zone.z25.zmiddle{margin-bottom: 0}
    
    .block5 .z25.zmiddle{margin-bottom: 0}

    .block6 .z25.zmiddleright{margin-bottom: calc(var(--margin-spacer) * 2)}

    .z65,
    .z35{width:100%;margin:0 0 calc(var(--margin-spacer) * 2) 0}
    
    .section-list .block2 .z75{width: 100%;margin: 0}
    .section-list .block2 .z25{width: 100%;margin: 0}
    .section-list .block2{flex-direction: column;gap: calc(var(--margin-spacer) * 2)}
}
/*
@media (prefers-reduced-motion: no-preference){
    .fecha-lineadetiempo {
        scale: 0.8; opacity:0;
        animation: fade-in linear forwards;
        animation-timeline: view();
        animation-range: entry;
    }

    @keyframes fade-in{
        
        to {scale: 1; opacity:1;}
    }
}
    */
/*
.fecha-lineadetiempo {    
    visibility: visible;
    animation-delay: 0.2s;
    animation-name: fadeInUp;
}

@keyframes fadeInUp{
    0% {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
*/

#intro{
background-image: url('http://cascia.falcon/files/image/206/206379/678e5f45af110.png');
    visibility: visible;
    position: relative;
    background-size: cover;
    background-attachment: fixed;
}

#intro:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}

.container{
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    max-width:80%
}
.container-lineadetiempo::before {
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    content: "";
    width: 2px;
    position: absolute;
    top: 0;
    background: rgb(255, 255, 255);
}

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    padding: 140px 0;
}

.fecha-lineadetiempo::before{
    content: "";
    position: absolute;
    width: 35px;
    height: 35px;
    top: 8px;
}
.fecha-lineadetiempo {
    visibility: visible;
    backdrop-filter: blur(30px);
    background: rgba(171, 171, 171, 0.32);
    border-radius: 10px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    color: #fff;
    padding: 2em;
    margin: 3em;
    opacity:1;
    animation: showthis linear forwards;
    animation-timeline: view();
    animation-range-start: entry 0%;
    animation-range-end: entry 300%;
}
.fecha-lineadetiempo::after {
    content: "";
    position: absolute;
    bottom: 0px;
    width: 18px;
    height: 18px;
    top: 0;
    background: inherit;
    border-radius: 50%;
    border-width: 5px;
    border-style: solid;
    border-color: rgb(255, 255, 255);
    border-image: initial;
}
.fecha-lineadetiempo:nth-child(odd) {
    padding: 10px 20px 0px 0px;
    margin: -160px 50px 0px 0;
    flex:0 0 50%;
    max-width: calc(50% - 50px);
    text-align: left;
    box-sizing:border-box;
}


.fecha-lineadetiempo:nth-child(odd):before {
    width: 28px;
    height: 1px;
    background: #fff;
    content: "";
    position: absolute;
    right: -28px;
}
.fecha-lineadetiempo:nth-child(odd):after {
    left: 100%;
    margin-left: 28px;
    transform: skewX(10deg);
}
.fecha-lineadetiempo:nth-child(odd) .date{
    text-align:right;
}
.fecha-lineadetiempo:nth-child(odd):last-child{
    margin: 0px;
}
.fecha-lineadetiempo:nth-child(even){    
    margin: 190px 0 0 50px;
    padding: 10px 0 0 20px;
    flex:0 0 50%;
    max-width: calc(50% - 50px);
    text-align: right;
    box-sizing: border-box;
}
.fecha-lineadetiempo:nth-child(even):before {
    width: 54px;
    height: 1px;
    background: #fff;
    content: "";
    position: absolute;
    left: -54px;
}
.fecha-lineadetiempo:nth-child(even):after{
    right: 100%;
    margin-right: 54px;
    transform: skewX(10deg);
}
.fecha-lineadetiempo:nth-child(even) .date{
    text-align:left;
}




.fecha-lineadetiempo .date{
    color: #fff;
    font-size: 2.5em;
    padding: 0 0 0.5em 0;
    margin: 0;
}
.fecha-lineadetiempo .text{
    padding: 0 2em;
    font-size: 1.3em;
    font-family: var(--title-font);
    margin-bottom: 1.5em;
    color:#fff;
}
.fecha-lineadetiempo .text-wrapper h2{
    font-weight: 300;
    color: #fff;
}






