@font-face{
    font-family:"Open Sans";
    src:url("fonts/OpenSans-Regular.woff2");
}
@font-face{
    font-family:"Open Sans";
    src:url("fonts/OpenSans-Bold.woff2");
    font-weight:bold;
}
@font-face{
    font-family:"Open Sans";
    src:url("fonts/OpenSans-Italic.woff2");
    font-style:italic;
}
@font-face{
    font-family:"Open Sans";
    src:url("fonts/OpenSans-BoldItalic.woff2");
    font-weight:bold;
    font-style:italic;
}
@font-face{
    font-family:"Xolonium";
    src:url("fonts/Xolonium-Regular.woff2");
}
@font-face{
    font-family:"Xolonium";
    src:url("fonts/Xolonium-Bold.woff2");
    font-weight:bold;
}
*{
    box-sizing:border-box;
}
body{
    background:#000000;
    color:#FFFFFF;
    margin:0;
    font-family:"Open Sans",sans-serif;
    text-align:justify;
    line-height:1.4;
}
h1,h2,h3,h4,h5,h6{
    font-family:"Xolonium";
    text-align:initial;
}
h1{
    font-size:3rem;
}
h2{
    font-size:2rem;
}
.sx{
    float:left;
}
.dx{
    float:right;
}
.floatBarrier{
    clear:both;
}
div.column{
    width:100%;
    max-width:65rem;
    padding:0 1rem;
    margin:0 auto;
}
a.button{
    display:inline-block;
    color:#FFFFFF;
    text-decoration:none;
    border:0.1em solid #FFFFFF;
    border-radius:0.15em;
    padding:0.2em 1em;
    font-size:1.2rem;
    margin:0.5em;
    background:transparent;
    position:relative;
    overflow:hidden;
}
a.button::before{
    content:"";
    position:absolute;
    top:0; left:0; width:100%; height:100%;
    background:linear-gradient(125deg,#FFFFFF20,#FFFFFF80);
    opacity:0;
    transition:opacity 0.5s;
}
a.button:hover::before,a.button:focus::before{
    opacity:1;
}
a.button:active::before{
    opacity:0.25;
}
.appearWhenVisible{
    visibility:hidden;
}
.visible{
    visibility:visible;
}
.permavisible{
    visibility:visible !important;
}
.nooverflow{
    overflow:hidden;
}
.small{
    font-size:0.8em;
}
#incognitaContainer{
    width:100%;
    height:100vh;
    min-height:35rem;
    position:relative;
    overflow:hidden;
}
#incognitaContainer *{
    user-select:none;
    pointer-events: none;
}
#incognita_background{
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    z-index:0;
}
#incognita{
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:0; left:0; width:100%; height:100%;
    animation:incognita_creep 10s linear, incognita_idle 10s linear infinite;
    animation-delay:0s,10s;
    z-index:2;
}
#incognita_foreground,#incognita_vibration{
    height:100vmin;
    min-height:20rem;
    max-height:50rem;
    width:auto;
    position:absolute;
}
#incognita_foreground{
    z-index:2;
    animation:incognita_colorchange 12.375s linear infinite;
}
#incognita_vibration{
    z-index:3;
    animation:vibrate 0.05s infinite;
    mix-blend-mode:multiply;
    opacity:0.7;
}
#incognita_clouds{
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    background:url("images/incognita_q3/incognita_clouds.webp");
    background-size:100vw 100%;
    mix-blend-mode:screen;
    opacity:0.15;
    animation:clouds_move 60s linear infinite;
    z-index:1;
}
@media all and (max-aspect-ratio:1){
    #incognita_clouds{
        transform:scale(2,1);
    }
}
#logo{
    animation:logo_creep 10s;
    z-index:4;
    position:absolute;
    top:3rem;
    width:100%;
    height:12.5vmin;
    min-height:5rem;
    max-height:15rem;
    object-fit:contain;
    filter:drop-shadow(0 0 1rem #000000);
}
@media all and (max-width:40rem){
    #logo{
        padding:0.2rem;
    }
}
#scrollDown{
    z-index:4;
    position:absolute;
    bottom:2rem;
    width:100%;
    height:1.5rem;
    object-fit:contain;
    filter:drop-shadow(0 0 0.5rem #000000);
    animation:scroll_fadeIn 5s, scroll_bounce 1s infinite;
    cursor:pointer;
    pointer-events:auto;
}
@keyframes vibrate{
    0%{
        transform:translate(-0.5rem,-0.3rem);
    }
    25%{
        transform:translate(0.5rem,-0.3rem);
    }
    50%{
        transform:translate(0.5rem,0.3rem);
    }
    75%{
        transform:translate(-0.5rem,0.3rem);
    }
    100%{
        transform:translate(-0.5rem,-0.3rem);
    }
}
@keyframes incognita_creep{
    0%{
        filter:brightness(0.2) contrast(1.3);
        transform:scale(1.4);
    }
    35%{
        filter:brightness(1.3) contrast(1);
    }
    90%{
        filter:brightness(1) contrast(1);
        transform:scale(1.03);
    }
    97%{
        transform:scale(1.01);
    }
    100%{
        transform:scale(1);
    }
}
@keyframes incognita_idle{
    0%{
        transform:scale(1);
    }
    50%{
        transform:scale(0.95);
    }
    100%{
        transform:scale(1);
    }
}
@keyframes incognita_colorchange{
    0%{
        filter:hue-rotate(5deg) saturate(1);
    }
    50%{
        filter:hue-rotate(-15deg) saturate(1.2);
    }
    100%{
        filter:hue-rotate(5deg) saturate(1);
    }
}
@keyframes logo_creep{
    0%{
        opacity:0;
        transform:scale(0.7) translate(0,2rem);
    }
    15%{
        opacity:0;
    }
    50%{
        opacity:1;
    }
    100%{
        transform:scale(1) translate(0,0);
    }
}
@keyframes clouds_move{
    0%{
        background-position:0 50%;
    }
    100%{
        background-position:100vw 50%;
    }
}
@keyframes scroll_bounce{
    0%{
        transform:translate(0,0);
    }
    80%{
        transform:translate(0,0);
    }
    90%{
        transform:translate(0,0.6rem);
    }
    100%{
        transform:translate(0,0);
    }
}
@keyframes scroll_fadeIn{
    0%{
        opacity:0;
    }
    50%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}
h1.parallaxTitle{
    text-align:center;
    border-radius:1rem;
    background:url("images/glass.webp");
    backdrop-filter:blur(0.75rem) brightness(1.2) saturate(0.7);
    box-shadow:0 0.75rem 2rem rgba(0,0,0,0.7);
    position:relative;
    border:1px solid #FFFFFF20;
    outline:1px solid #00000050;
    transform:translate(0,12rem);
    max-width:50rem;
    margin:0 auto;
    padding:0 1rem;
    color:#000000;
    text-shadow:0 0 0.25em #E0E8FF;
    z-index:9;
}
div.parallaxBackground{
    position:relative;
    background-attachment:fixed;
    background-size:cover;
    background-position:50% 50%;
    padding:5rem 0.75rem;
    margin-top:9rem;
    overflow:hidden;
    will-change:background-position;
}
div.parallaxBackground::before,div.parallaxBackground::after{
    content:"";
    position:absolute;
    width:100%; height:3rem;
}
div.parallaxBackground::before{
    top:0; left:0;
    background:linear-gradient(0deg,#00000000,#000000FF);
}
div.parallaxBackground::after{
    bottom:0; left:0;
    background:linear-gradient(0deg,#000000FF,#00000000);
    clear:both;
}
#nebulosa{
    background-image:url("images/nebulosa_q2/nebula_layer4.webp"), url("images/nebulosa_q2/nebula_layer3.webp"), url("images/nebulosa_q2/nebula_layer2.webp"), url("images/nebulosa_q2/nebula_layer1.webp"), url("images/nebulosa_q2/stars.webp");
    text-shadow:0.05em 0.05em 0.1em #00000080;
}
@media all and (max-width:1000px){
    #nebulosa{
        background-image:url("images/nebulosa_q1/nebula_layer4.webp"), url("images/nebulosa_q1/nebula_layer3.webp"), url("images/nebulosa_q1/nebula_layer2.webp"), url("images/nebulosa_q1/nebula_layer1.webp"), url("images/nebulosa_q1/stars.webp");
    }
}
@media all and (max-aspect-ratio:2/3) {
    #nebulosa{
        background-image:url("images/nebulosa_tall_q2/nebula_layer4.webp"), url("images/nebulosa_tall_q2/nebula_layer3.webp"), url("images/nebulosa_tall_q2/nebula_layer2.webp"), url("images/nebulosa_tall_q2/nebula_layer1.webp"), url("images/nebulosa_tall_q2/stars.webp");
    }
}
@media all and (max-aspect-ratio:2/3) and (max-width:1000px){
    #nebulosa{
        background-image:url("images/nebulosa_tall_q1/nebula_layer4.webp"), url("images/nebulosa_tall_q1/nebula_layer3.webp"), url("images/nebulosa_tall_q1/nebula_layer2.webp"), url("images/nebulosa_tall_q1/nebula_layer1.webp"), url("images/nebulosa_tall_q1/stars.webp");
    }
}
#libro_container{
    display:grid;
    margin-top:1rem;
    column-gap:2rem;
    max-width:90rem;
}
#libro_col1{
    grid-column:1;
    grid-row-start:1;
    grid-row-end:3;
    background-image:url("images/libro_primoimpero_q2/libro_primoimpero.webp");
    background-size:100% auto;
    background-repeat:no-repeat;
    background-position:50% 50%;
    transition:background-position 2s ease-out;
    width:26rem;
}
#libro_col1.visible{
    animation:libro_synopsis_fadeIn 1s;
}
#libro_col2{
    grid-column:2;
    grid-row:1;
}
#libro_col3{
    grid-column:2;
    grid-row:2;
}
#libro_logo{
    width:100%;
    max-width:32rem;
    height:auto;
    display:block;
    margin:0 auto;
    filter:drop-shadow(0 0 1rem #000000);
}
#libro_logo.visible{
    animation:libro_logo_creep 3s;
}
#libro_buy{
    text-align:center;
    font-weight:bold;
    margin:5rem auto;
}
#libro_buy.visible{
    animation:libro_logo_creep 3s;
}
#libro_buy a.button{
    padding:0.6em 1em;
    border-color:#FFFFFFA0;
    border-radius:999rem;
    box-shadow:0 0 0.15em #E0E8FF, 0 0 0em #FFFFFF, 0 0 3em #00000060 inset;
    transition:box-shadow 0.7s;
}
#libro_buy a.button:hover{
    border-color:#FFFFFF;
    box-shadow:0 0 0.15em #E0E8FF, 0 0 0.8em #FFFFFF, 0 0 0em #00000060 inset;
}
#libro_synopsis.visible{
    animation:libro_synopsis_fadeIn 1s;
}
#libro_synopsis > p{
    margin:0 0 2rem 0;
}
@media all and (max-width:60rem){
    #libro_col1{
        grid-column-start:1;
        grid-column-end:3;
        grid-row:2;
        width:auto;
        height:24rem;
        margin-bottom:1rem;
        background-image:url("images/libro_primoimpero_q1/libro_primoimpero.webp");
        background-size:auto 100%;
        background-position:50% 50% !important;
    }
    #libro_col2{
        grid-column-start:1;
        grid-column-end:3;
        grid-row:1;
    }
    #libro_col3{
        grid-column-start:1;
        grid-column-end:3;
        grid-row:3;
    }
    #libro_logo{
        max-width:35rem;
    }
}
@media all and (min-width:80rem){
    #libro_container{
        column-gap:3rem;
    }
}
@keyframes libro_logo_creep{
    0%{
        opacity:0;
        transform:scale(1.2);
    }
    70%{
        opacity:1;
    }
    100%{
        transform:scale(1);
    }
}
@keyframes libro_synopsis_fadeIn{
    0%{
        opacity:0;
        transform:translate(0,2rem);
    }
    100%{
        opacity:1;
        transform:translate(0,0);
    }
}
#stagno{
    background-image:url("images/stagno_q3/stagno_4.webp"), url("images/stagno_q3/stagno_3.webp"), url("images/stagno_q3/stagno_2.webp"), url("images/stagno_q3/stagno_1.webp");
}
@media all and (max-width:1000px){
    #stagno{
        background-image:url("images/stagno_q1/stagno_4.webp"), url("images/stagno_q1/stagno_3.webp"), url("images/stagno_q1/stagno_2.webp"), url("images/stagno_q1/stagno_1.webp");
    }
}
@media all and (max-width:2000px){
    #stagno{
        background-image:url("images/stagno_q2/stagno_4.webp"), url("images/stagno_q2/stagno_3.webp"), url("images/stagno_q2/stagno_2.webp"), url("images/stagno_q2/stagno_1.webp");
    }
}
div.glassPanel{
    background:url("images/glass.webp");
    margin:7rem 2rem;
    padding:1rem;
    backdrop-filter:blur(0.75rem) brightness(0.6) saturate(0.7);
    border-radius:0.5rem;
    box-shadow:0 0.75rem 2rem rgba(0,0,0,0.7);
    position:relative;
    border:1px solid #FFFFFF20;
    outline:1px solid #00000050;
    text-shadow:0.05em 0.05em 0.1em #00000080;
    clear:both;
}
div.glassPanel::after{
    content:"";
    clear:both;
}
div.glassPanel.visible{
    animation:glassPanel_glideIn 1s;
}
div.glassPanel.sx,div.glassPanel.dx,div.glassPanel.cx{
    width:80%;
    max-width:60rem;
}
div.glassPanel.cx{
    margin-left:auto;
    margin-right:auto;
    width:100%;
    max-width:75rem;
}
div.glassPanel.captionPanel{
    max-width:25rem;
    margin:2rem;
}
div.glassPanel.captionPanel > img{
    width:100%;
    height:auto;
    display:block;
}
@media all and (max-width:55rem){
    div.glassPanel.sx,div.glassPanel.dx,div.glassPanel.cx{
        width:100%;
        float:none;
        margin:9rem 0;
    }
    div.glassPanel.captionPanel{
        width:22rem;
        margin:3rem auto;
    }
    div.glassPanel.visible{
        animation:glassPanel_glideIn_lowspec 1s;
    }
}
@keyframes glassPanel_glideIn{
    0%{
        transform:matrix3d(1,0,0,0, 0,1,0,0.00025, 0,0,1,0, 0,0,50,1.15);
        transform-origin: 50% 50% 50rem;
        opacity:0;
        filter:brightness(2) contrast(0.8);
    }
    60%{
        opacity:1;
    }
    100%{
        transform:matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,50,1);
        filter:brightness(1) contrast(1);
    }
}
@keyframes glassPanel_glideIn_lowspec{
    0%{
        opacity:0;
        transform:scale(0.85) translateY(3rem);
    }
    60%{
        opacity:1;
    }
    100%{
        transform:scale(1) translateY(0);
    }
}
img.face{
    width:18rem;
    height:18rem;
    object-fit:cover;
    object-position:50% 50%;
    border-radius:999rem;
    margin-top:1.5rem;
    margin-bottom:1.5rem;
    border:0.15rem solid #FFFFFFA0;
    box-shadow:0 0 2rem #E0E8FF80;
}
.dx > img.face{
    float:left;
    margin-right:1.5rem;
}
.sx > img.face{
    float:right;
    margin-left:1.5rem;
}
h2.name{
    color:#FFFFFF;
    text-shadow:0 0 0.5em #E0E8FF;
}
span.role{
    display:block;
    font-size:0.75em;
    text-shadow:0 0 0.5em #FF0060;
    font-weight:normal;
}
@media all and (max-width:45rem){
    img.face{
        float:none !important;
        display:block;
        margin:0.75rem auto !important;
    }
    h2.name{
        text-align:center;
    }
}
p.quote{
    margin:2rem 0;
    font-size:1.1em;
}
span.quoteText{
    font-style:italic;
}
span.quoteAuthor{
    display:inline-block;
}
img.extrapic{
    width:100%;
    max-width:40rem;
    height:auto;
    display:block;
    margin:0.75rem auto;
}
div.buttonBar{
    text-align:center;
    clear:both;
}
#spazio{
    background-image:url("images/nebulosa_q2/stars.webp");
    min-height:100vh;
}
@media all and (max-width:1000px){
    #spazio{
        background-image:url("images/nebulosa_q1/stars.webp");
    }
}
@media all and (max-aspect-ratio:2/3) {
    #spazio{
        background-image:url("images/nebulosa_tall_q2/stars.webp");
    }
}
@media all and (max-aspect-ratio:2/3) and (max-width:1000px){
    #spazio{
        background-image:url("images/nebulosa_tall_q1/stars.webp");
    }
}
#manuale{
    width:15rem;
    height:auto;
    float:left;
    padding-right:2rem;
}
#manuale_intro{
    max-width:75rem;
}
#manuale_intro::after{
    content:"";
    clear:both;
}
#manuale_intro.visible{
    animation:libro_synopsis_fadeIn 1s;
}
#manuale_buy{
    text-align:center;
    max-width:40rem;
}
#manuale_buy>*{
    text-align:center;
}
@media all and (max-width:55rem){
    #manuale_buy{
        margin:3rem auto;
    }
}
div.gallery{
    height:21rem;
    overflow-x:auto;
    overflow-y:hidden;
    text-align:center;
    white-space:nowrap;
}
div.gallery > img{
    height:100%;
    width:auto;
}
div.glassPanel.near{
    margin-top:3rem;
    margin-bottom:3rem;
}
#manuale_resources > div.buttonBar{
    text-align:left;
}
#lpg{
    width:100%;
    max-width:30rem;
    height:auto;
    display:block;
    margin:6rem auto;
}
#footer{
    background:#404040;
    padding:1rem;
    font-size:0.85rem;
}
#footer a{
    color:#D0D0D0;
}
#footer a:hover{
    color:#FFFFFF;
}
@media print{
    body{
        background:#FFFFFF;
        color:#000000;
        font-size:0.8em;
    }
    *{
        animation:none !important;
    }
    #loadOverlay{
        display:none !important;
    }
    #mainContainer{
        display:block !important;
    }
    a.button{
        color:#000000;
        border-color:#000000;
    }
    .appearWhenVisible{
        visibility:visible !important;
    }
    div.parallaxBackground{
        background:none !important;
        margin-top:0 !important;
        padding:2rem 0.75rem !important;
    }
    div.parallaxBackground::before,div.parallaxBackground::after{
        display:none;
    }
    #incognitaContainer{
        display:none;
    }
    div.glassPanel{
        background:none !important;
        backdrop-filter: none !important;
        text-shadow:none !important;
        box-shadow:none !important;
        margin-top:1rem !important;
        margin-bottom:1rem !important;
        border:none !important;
        outline:none !important;
    }
    h2.name,span.role{
        color:#000000;
        text-shadow:none;
    }
    h1.parallaxTitle{
        transform:none;
        border:none;
        box-shadow:none;
        backdrop-filter:none;
        outline:none;
    }
    #nebulosa{
        text-shadow:none;
    }
    #libro_logo{
        filter:drop-shadow(0 0 0.35rem #000000);
    }
    #lpg{
        filter:invert(1);
    }
    #footer{
        color:#000000;
        background:transparent;
    }
    #footer a{
        color:#000000;
    }
}