* {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    scroll-behavior: smooth;
    outline: none;
}

html,
body {
    font-family: Garamond, Helvetica Neue, Arial, sans-serif;
    font-size: 16px;
    color: black;
    width: 100%;
    height: 100%;
    background-color: transparent;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body {
    overflow: hidden;

}

.size {
    width: 99%;
    margin: 0 auto;

}

.scroll {
    overflow: visible;
}

.content-size {
    width: 80%;
    margin: auto;
    padding: 10px;
}

img {
    padding: 5px;
    max-width: 100%;
    image-rendering: optimizeQuality;
}

a {
    color: #000;
    text-decoration: none;
}

ul,
li {
    list-style: none;
}

.menu {
    position: fixed;
    width: 100%;
    color: #000;
}

.menu ul li:first-child {
    text-align: left;
}

.menu ul li:last-child {
    text-align: right;
}

.menu {
    top: 0%;
    z-index: 1;
}

.menu ul {
    overflow: visible;
}

.menu ul li {
    width: 33.333333%;
    float: left;
    text-align: center;
}

.menu ul li a {
    display: inline-block;
    color: #000;
    font-family: "autopia-regular";
    font-size: 3em;
    -webkit-transition: all ease 1s;
    transition: all ease 1s;
}

.menu ul li a:hover {
    letter-spacing: 0.15em;
}

/* barra menu icone laterali con scrollspy */
nav {
    width: 80%;
    margin: auto;
}

#icon-bar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: fixed;
    z-index: 2;
}

.icon-left {
    top: 10%;
    left: 10%;
    bottom: 15%;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.icon-right {
    align-items: flex-end;
    top: 5%;
    right: 10%;
    bottom: 10%;
}

#icon-bar img:active {
    -webkit-filter: drop-shadow(7px 5px 2px rgba(0, 0, 0, 0.8));
    filter: drop-shadow(7px 5px 2px rgba(0, 0, 0, 0.8));
    /* for IE 8 & 9 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    /* For IE 5.5 - 7 */
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

#active {
    -webkit-filter: drop-shadow(7px 5px 2px rgba(0, 0, 0, 0.9));
    filter: drop-shadow(7px 5px 2px rgba(0, 0, 0, 0.9));
    /* for IE 8 & 9 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    /* For IE 5.5 - 7 */
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

#menu {
    position: relative;
    overflow: hidden;
}

.canvas {
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(38deg, #e3e3e3, #ffffff, #f7f5f4, #f6fff7, #ffffff, #e6e6e6, #ffffff, #949ef5);
    background-size: 1600% 1600%;
    -webkit-animation: gradient 13s ease infinite;
    -moz-animation: gradient 13s ease infinite;
    animation: gradient 13s ease infinite;
}

@-webkit-keyframes gradient {
    0% {
        background-position: 51% 0%
    }

    50% {
        background-position: 50% 100%
    }

    100% {
        background-position: 51% 0%
    }
}

@-moz-keyframes gradient {
    0% {
        background-position: 51% 0%
    }

    50% {
        background-position: 50% 100%
    }

    100% {
        background-position: 51% 0%
    }
}

@-o-keyframes gradient {
    0% {
        background-position: 51% 0%
    }

    50% {
        background-position: 50% 100%
    }

    100% {
        background-position: 51% 0%
    }
}

@keyframes gradient {
    0% {
        background-position: 51% 0%
    }

    50% {
        background-position: 50% 100%
    }

    100% {
        background-position: 51% 0%
    }
}


.flex-container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;

}

.statement {
    font-size: 1.1em;
    letter-spacing: 0.1em;
    width: 400px;
    height: 200px;
    display: absolute;
    top: 50%;
    left: 50%;
    margin: 25px;
}

.statement p {
    font-size: 1em;
    font-family: Trebuchet MS;
}

.cuts_th .sound_th .sinestesie_th .trascrizioni_th .patologiepostmoderne_th .mutant_th .usq_th .ms_th .deliquescente_th .foronly_th {
    z-index: 9;
}

.deliquescente_th img {
    position: absolute;
    animation-name: deliquescentemove;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes deliquescentemove {
    0% {
        right: 50%;
        bottom: -30%;
    }

    50% {
        right: 50%;
        bottom: 50%;
    }

    100% {
        right: 50%;
        bottom: 115%;
    }
}

.foronly_th img {
    position: absolute;
    animation-name: foronlymove;
    animation-duration: 19s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: 2s;
}

@keyframes foronlymove {
    0% {
        right: -5%;
        top: 20%;
    }

    20% {
        right: 20%;
        top: 20%;
    }

    50% {
        right: 45%;
        top: 70%;
    }

    70% {
        right: 55%;
        top: 70%;
    }

    80% {
        right: 85%;
        top: 70%;
    }

    100% {
        right: 85%;
        top: 110%;
    }
}

.cuts_th img {
    position: absolute;
    animation-name: cutsmove;
    animation-duration: 17s;
    animation-iteration-count: infinite;

}

@keyframes cutsmove {
    0% {
        right: -15%;
        top: 50%;
    }

    20% {
        right: 25%;
        top: 50%;
    }

    50% {
        right: 25%;
        top: 110%;
    }

    70% {
        right: -15%;
        top: 110%;
    }

    100% {
        right: -15%;
        top: 50%;
    }
}

.usq_th img {
    position: absolute;
    animation-name: usqmove;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes usqmove {
    0% {
        left: 25%;
        bottom: -15%;
    }

    25% {
        left: 25%;
        bottom: 13%
    }

    50% {
        left: 45%;
        bottom: 13%;
    }

    70% {
        left: 85%;
        bottom: 37%;
    }

    100% {
        left: 85%;
        bottom: 120%;
    }
}

.sound_th img {
    position: absolute;
    animation-name: soundmove;
    animation-duration: 23s;
    animation-iteration-count: infinite;
    animation-direction: alternate;

}

@keyframes soundmove {
    0% {
        right: 36%;
        bottom: -15%;
    }

    25% {
        right: 36%;
        bottom: 40%;
    }

    50% {
        right: 70%;
        bottom: 76%;
    }

    100% {
        right: 80%;
        bottom: 120%;
    }
}

.trascrizioni_th img {
    position: absolute;
    animation-name: trascrizionimove;
    animation-duration: 18s;
    animation-iteration-count: infinite;
    animation-direction: alternate;


}

@keyframes trascrizionimove {
    0% {
        right: 27%;
        top: -15%;
    }

    25% {
        right: 27%;
        top: 20%;

    }

    50% {
        right: 15%;
        top: 51%;

    }

    100% {
        right: -20%;
        top: 51%;

    }

}

.sinestesie_th img {
    position: absolute;
    animation-name: sinestesiemove;
    animation-duration: 30s;
    animation-iteration-count: infinite;



}

@keyframes sinestesiemove {
    0% {
        left: -15%;
        top: 60%;
    }

    15% {
        left: 18%;
        top: 60%;
    }

    30% {
        left: 33%;
        top: -15%;
    }

    45% {
        left: 55%;
        top: -30%;
    }

    60% {
        left: 55%;
        top: 38%
    }

    75% {
        left: 55%;
        top: 90%;
    }

    100% {
        left: 55%;
        top: 110%;
    }
}

.patologiepostmoderne_th img {
    position: absolute;
    animation-name: patologiepostmodernemove;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-direction: alternate;

}

@keyframes patologiepostmodernemove {
    0% {
        left: 39%;
        top: -23%;
    }

    25% {
        left: 39%;
        top: 42%;
    }

    50% {
        left: 16%;
        top: 75%;
    }

    75% {
        left: 16%;
        top: 41%;

    }

    100% {
        left: 16%;
        top: -15%
    }
}

.ms_th img {
    position: absolute;
    animation-name: msmove;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: 5s;
}

@keyframes msmove {
    0% {
        left: 9%;
        top: -12%;
    }

    25% {
        left: 9%;
        top: 42%;
    }

    50% {
        left: 16%;
        top: 75%;
    }


    100% {
        left: -16%;
        top: 15%
    }
}

.mutant_th img {
    position: absolute;
    animation-name: mutantmove;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: 4s;

}

@keyframes mutantmove {
    0% {
        left: -17%;
        top: 20%;
    }

    25% {
        left: 30%;
        top: 20%;
    }

    50% {
        left: 40%;
        top: 47%;
    }

    70% {
        left: 24%;
        top: 47%;
    }

    100% {
        left: 24%;
        top: 100%;
    }
}





/* h1 menu: pagetitle, backtitle */

.page-title {
    position: fixed;
    top: 0;
    left: 0;
    -webkit-transform: rotate(90deg) translateY(-100%) translateZ(0);
    -moz-transform: rotate(90deg) translateY(-100%) translateZ(0);
    -ms-transform: rotate(90deg) translateY(-100%) translateZ(0);
    -o-transform: rotate(90deg) translateY(-100%) translateZ(0);
    transform: rotate(90deg) translateY(-100%) translateZ(0);
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -ms-transform-origin: top left;
    -o-transform-origin: top left;
    transform-origin: top left;
    font-family: 'bertholdr-mainzer-fraktur';
    font-size: 5em;
}

.page-title {
    color: transparent;
    -webkit-text-stroke: 1px #000;
}


.back-title {
    position: fixed;
    bottom: 0;
    right: 0;
    -webkit-transform: rotate(-90deg) translateX(100%) translateZ(0);
    -moz-transform: rotate(-90deg) translateX(100%) translateZ(0);
    -ms-transform: rotate(-90deg) translateX(100%) translateZ(0);
    -o-transform: rotate(-90deg) translateX(100%) translateZ(0);
    transform: rotate(-90deg) translateX(100%) translateZ(0);
    -webkit-transform-origin: bottom right;
    -moz-transform-origin: bottom right;
    -ms-transform-origin: bottom right;
    -o-transform-origin: bottom right;
    transform-origin: bottom right;
    font-family: 'bertholdr-mainzer-fraktur';
    font-size: 5em;

}

.back-title {
    cursor: pointer;
    color: #000;
    -webkit-transition: all ease 1s;
    transition: all ease 1s;

}

.back-title:hover {
    letter-spacing: 0.2em;
}




/* WORK SECTION */

section {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 5em;
}

section img {
    max-width: 100%;
    height: auto;
}


.double {
    display: flex;
    width: 100%;
}

.left {
    flex: 1;
}

.left pre {
    font-family: Times New Roman;
    font-size: 1.9vw;
    line-height: 1;
    margin-top: 40px;
    white-space: pre;
}

.left p {
    font-family: Garamond;
    font-size: 2.2vw;
    width: 100%;
}

.right {
    flex: 1;
    justify-content: flex-end;
    align-self: center;
}

.right p {
    font-family: Garamond;
    font-size: 2.2vw;
}

.right-up {
    font-size: 2.2vw;
    text-align: right;
    margin-right: 5px;
}

.right em {
    font-size: 5.6vw;
    margin-left: 50%;
}

.awesome em {
    -webkit-animation: colorchange 20s infinite alternate;
}

@-webkit-keyframes colorchange {
    0% {
        color: blue;
    }

    10% {
        color: #eaedea;
    }

    20% {
        color: #fcfcfc;
    }

    30% {
        color: blue;
    }

    40% {
        color: #2980b9;
    }

    50% {
        color: #6ff7a7;
    }

    60% {
        color: blue;
    }

    70% {
        color: #2980b9;
    }

    80% {
        color: #fcfc19;
    }

    90% {
        color: #2980b9;
    }

    100% {
        color: #aa3ffc;
    }
}

.center {
    display: flex;
    width: 100%;
    padding: 20px;
    justify-content: center;
}

.center img {
    margin-top: 15px;
    padding: 0;
}

.center p {
    width: 70%;
    font-family: trebuchet MS;
    font-size: 1.5vw;
    word-break: break-word;
}

.text em {
    font-style: normal;
    font-size: 1.5vw;
}

.title {
    display: block;
    font-family: 'Selectric';
    font-size: 1.3em;
    letter-spacing: 0.6em;
    padding: 0 0 0 100px;
    width: 100%;

}

.caption {
    display: block;
    font-family: 'Selectric';
    font-size: 14px;
    padding: 5px 100px 0 100px;
    width: 100%;
}

h2 {
    font-family: sans-serif;
    font-size: 3rem;
}

.text {
    display: block;
    width: 59%;
    font-family: trebuchet MS;
    font-size: 1vw;
    line-height: 1.5em;
    letter-spacing: 0.1vw;
    padding: 30px;
    text-align: justify;
}

#patologiepostmoderne .text {
    margin-left: auto;
    margin-right: auto;
}

.double #text {
    width: 59%;
    margin-top: auto;
    margin-bottom: auto;
    font-size: 2em;
}

.grid {
    display: grid;
    margin: 20px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: none;
    grid-template-areas:
        "text text img3"
        "img1 img2 img3"
}

#text {
    width: 100%;
    grid-area: text;

}

#img1 {
    grid-area: img1;
}

#img2 {
    grid-area: img2;
}

#img3 {
    grid-area: img3;
}


.video {
    overflow: hidden;
    position: relative;
    width: 80%;
    margin: 30px auto;
}

.play-btn {
    width: 80px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.video-player {
    width: 80%;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
    z-index: 11;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    cursor: pointer;
}


/*ANIMAZIONI scrolltrigger gsap*/
.ipsType_center {
    text-align: center;
}

.cInnerContent {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

.ipsSpacer_bottom_double {
    margin-bottom: 10px;
}

.ipsGrid {
    display: block;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}

.ipsGrid::before,
.ipsGrid::after {
    display: table;
    content: "";
    line-height: 0;
}

.ipsGrid > [class*="ipsGrid_span"] {
    display: block;
    width: 100%;
    min-height: 30px;
    box-sizing: border-box;
}

.ipsGrid > [class*="ipsGrid_span"] {
    float: left;
    margin-left: 2%;
}

.ipsGrid > [class*="ipsGrid_span"]:first-child {
    margin-left: 0;
}

.feature {
    display: flex;
    align-items: center;
}

.card {
    overflow: hidden;
    transition: 0.5s;
}

.featured-image-container .card {
    height: 0;
    padding-bottom: calc(50% - 10px);
}

img {
    max-width: 100%;
}

.header-section {
    margin: 200px auto;
}


.gs_reveal {
    opacity: 0;
    visibility: hidden;
    transition: transform 0s;
}


audio {
    width: 80%;
    margin-left: 10%;
    padding-bottom: 30px;
}

button {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-items: center;
    padding: 40px 0 10px 0;
    text-align: center;
}

button:hover {
    cursor: pointer;
}

/* Firefox old*/
@-moz-keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* IE */
@-ms-keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        opacity: 1;
    }
}

/* Opera and prob css3 final iteration */
@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        opacity: 1;
    }
}

.blink-image {
    -moz-animation: blink normal 0.2s infinite ease-in-out;
    /* Firefox */
    -webkit-animation: blink normal .2s infinite ease-in-out;
    /* Webkit */
    -ms-animation: blink normal .3s infinite ease-in-out;
    /* IE */
    animation: blink normal .2s infinite ease-in-out;
    /* Opera and prob css3 final iteration */
}

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 70%;
    left: 50%;
    margin-left: -60px;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

.column p {
    column-count: 5;
    padding: 20px;
}

.image img {
    display: block;

}



.zine {
    background: rgb(3, 0, 235);
    background: linear-gradient(0deg, rgba(3, 0, 235, 1) 0%, rgba(171, 181, 173, 1) 100%);
}

.row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

#contact {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 3em;
    padding: 10px;
}

#about {
    font-family: 'Selectric';
    font-size: 1.5vw;
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 0.3fr 1fr;
    grid-template-rows: repeat(16 0.01fr);
    grid-template-areas:
        "box box"
        "name name"
        "info info"
        "yeare1 education1"
        "yeare2 education2"
        "yeare3 education3"
        "year1 things1"
        "year2 things2"
        "year3 things3"
        "year4 things4"
        "year5 things5"
        "year6 things6"
        "year7 things7"
        "year8 things8"
        "year9 things9"
        "year10 things10"
        "year11 things11"
        "year12 things12"
        "year13 things13"
        "year14 things14"
        "year15 things15"
        "year16 things16"


}

.name {
    grid-area: name;
}

.info {
    grid-area: info;
}


.education {
    grid-area: education;
}


.things1 {
    grid-area: things1;
}

.things2 {
    grid-area: things2;
}

.things3 {
    grid-area: things3;
}

.things4 {
    grid-area: things4;
}

.things5 {
    grid-area: things5;
}

.things6 {
    grid-area: things6;
}

.things7 {
    grid-area: things7;
}

.things8 {
    grid-area: things8;
}

.things9 {
    grid-area: things9;
}

.things10 {
    grid-area: things10;
}

.things11 {
    grid-area: things11;
}

.things12 {
    grid-area: things12;
}

.things13 {
    grid-area: things13;
}

.things14 {
    grid-area: things14;
}

.things15 {
    grid-area: things15;
}

.things16 {
    grid-area: things16;
}




#about div a.link {
    font-family: 'autopia-regular';
}

.box {
    display: flex;
    justify-content: space-between;
    grid-area: box;
}

.name {
    font-size: 3em;
    font-family: 'arial';

    margin-top: 20px;

}

.info {

    font-size: 2em;
    margin-bottom: 20px;

}

@media screen and (max-width: 1440px) {}

@media screen and (max-width: 1024px) {

    .double {
        display: block;
        width: 100%;
    }

    .left {
        width: 100%;

    }

    .left pre {
        font-size: 1.2em;
    }

    .left img {
        padding: 30 0;
    }


    .right {
        justify-content: flex-end;
        text-align: right;
    }

    .right p {
        font-size: 1.1em;
        text-align: left;
    }

    .right-up {
        font-size: 1.3em;

    }

    .right pre {
        width: 80%;
        font-size: 0.5em;
        margin: 0;
    }

    .center {
        display: flex;
        width: 100%;
    }

    .text {
        width: 100%;
        margin: 0;
        font-size: 1.1em;
    }

    .double #text {
        width: 90%;
    }

    .text p em {
        font-size: 1.3em;
    }

    .column p {
        column-count: 1;
        padding: 20px;
    }

    .grid {
        height: 100%;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none;
        grid-template-areas:
            "img1 img2"
            "img3 text"
    }

    .title {
        padding: 0;
        column-span: all;
    }

    .caption {
        text-align: right;
        padding: 0;

    }



    @media screen and (max-width: 700px) {
        .size {
            width: 100%;
        }

        .icon-right {

            bottom: 25%;
        }

        .sinestesie_th img {
            animation-delay: 20s;
        }

        .trascrizioni_th img {
            animation-delay: 0s;
        }

        .usq_th img {
            animation-delay: 2s;
        }

        .patologiepostmoderne_th img {
            animation-delay: 9s;
        }

        .sound_th img {
            animation-delay: 12s;
        }




        .menu ul li a {
            font-size: 2em;
        }

        .page-title {
            display: none;
        }

        .back-title {
            font-size: 2.5em;
        }

        .content-size {
            width: 95%;
            padding: 0;
        }

        .bar-size {
            width: 100%;
        }

        .icon-left {
            left: 0;
        }

        .icon-right {
            right: 0;
        }

        .caption {
            font-size: 12px;
            padding: 7px;
        }

        .left p {
            font-size: 1.7em;
        }

        .left img {
            padding: 0;
        }

        .right {
            width: 100%;
            float: right;
            text-align: right;
        }

        .right pre {
            width: 100%;
            font-size: 0.5em;
            margin: 0;
        }

        .right-up img {
            width: 100%;
        }

        #viewhidden {
            display: none;
        }

        .grid {
            height: 100%;
            grid-template-columns: 1fr;
            grid-template-rows: none;
            grid-template-areas:
                "img1"
                "img2"
                "img3"
                "text"
                "text"
        }


        #contact {
            font-size: 2.7em;
        }

        #about {
            font-size: 0.7em;
        }


    }
}