/* <!------------------------------ FONTS -----------------------------> */

@font-face {
    font-family: GaramongRegular;
    src: url("fonts/EBGaramond08-Regular.otf") format("opentype");
}

@font-face {
    font-family: GaramongItalic;
    src: url("fonts/EBGaramond08-Italic.otf") format("opentype");
}

@font-face {
    font-family: Montreal_Regular;
    src: url("fonts/NeueMontreal-Regular.otf") format("opentype");
}

@font-face {
    font-family: Montreal_italic;
    src: url("fonts/NeueMontreal-Italic.otf") format("opentype");
}

@font-face {
    font-family: Junicode_regular;
    src: url("fonts/Junicode.ttf") format("truetype");
}

@font-face {
    font-family: Junicode_italic;
    src: url("fonts/Junicode-Italic.ttf") format("truetype");
}

@font-face {
    font-family: syne_italic;
    src: url("fonts/Syne-Italic.otf") format("opentype");
}
/* <!------------------------------ BODY -----------------------------> */

figcaption {
    display: none;
}

body {
    height: 100vh;
    width: 100vw;
    margin: 0;
    overflow-x: hidden;
    background-color: #cccccc;
}

b {
    font-size: 30pt;
}

h2{
    font-family: GaramongItalic;
    font-size: 1.8em;
    margin-top:0;
}

p{
    font-family: Montreal_Regular;
    margin: 0;
    margin-left: 0pt;
}

p > b{
    font-size: 1em;
    color: green;
}

p > em{
    font-style: normal;
    color: red;
}

a{
    font-size: 14.8pt;
    text-decoration: none;
    color: blue;
    font-family: GaramongItalic;
}

ul{
    list-style: none;
    padding-inline-start: 0px;
    margin-top:0;
}

li:before {
    content: "⟡";
    padding-right: 5px;
  }

#server a:visited{
    color: blue;
}

.url{
    cursor: pointer;
}
/* <!------------------------------ INTRO -----------------------------> */

.intro {
    position: fixed;
    margin: 0.6vw;
    margin-top: 0;
    font-family: GaramongRegular;
    font-size: 40pt;
    line-height: 40pt;
    z-index: 1;
}

@keyframes fade {
    from {
        text-shadow: 0 0 5px black;
    }
    to {text-shadow: none;}
  }

.intro_link{
    color: black; 
    font-family: GaramongItalic;
    /* text-decoration: underline 5pt  white; */
    font-size: 39pt;
    cursor: pointer;
    /* text-shadow: 0 0 5px black; */
    animation-name: fade;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}

.intro_link:hover{
    color: blue;
}

.mobile{
    display: none;
}


/* <!------------------------------ VERBS -----------------------------> */

#verbs-cnt{
    position: fixed;
    bottom: 2%;
    right: 2%;
    font-family: GaramongRegular;
    font-size: 40pt;
    line-height: 40pt;
    z-index: 1;
    
}

.pub-hidden{
    display: none;
}

/* <!------------------------------ SERVER -----------------------------> */

#server{
    font-size: 13pt;
    z-index: 1;
    margin-bottom: -10px;
    margin-top: -10px;
}

/* <!------------------------------ CV -----------------------------> */


.CV {
    display: none;
    top: 10%;
    left: 10%;
    width: 64vw;
    height: 35vw;
    padding: 1vw;
    padding-top: 0;
    position: absolute;
    font-size: 13pt;
    font-family: Montreal_Regular;
    background-color: white;
    border: black solid 1pt;
    overflow-y: scroll;
    z-index: 2;
}

h1 {
    font-weight: normal;
    font-family: Montreal_Regular;
    font-size: 13pt;
    margin: 0;
    margin-left: 20pt;
    text-decoration: underline solid 1pt;
}

.close-btn{
    position: sticky;
    left: 98%;
    top: 0.8%;
    padding-top: 1vh;
    cursor: pointer;
    z-index: 1000;
}

.close-btn1{
    position: sticky;
    left: 98%;
    top: 0.8%;
    cursor: pointer;
}

.CV::-webkit-scrollbar {
    display: none;
  }
  

.CV {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }


/* <!------------------------------ PROCESS -----------------------------> */

.process{
    display: none;
    position: absolute;
    left: 15%;
    top: 15%;
    flex-direction: column;
    align-items:center;
    justify-content: center;
    z-index: 100;
}

/* <!------------------------------ WEBSITES TABLE -----------------------------> */

.websites{
    display: none;
    width: 85vw;
    height: 65vh;
    margin-top: 23vh;
    margin-left: 8vw;
    margin-right: 20vw;
    position: absolute;
    overflow-y: scroll;
    z-index: 100;
}

.website-img{
    display: inline;
    width: 500px;
    margin-top: 5px;
    border: 1pt solid black ;
}

.websites_link a{
    font-size: 39pt !important;
    color: black;
}

.websites_link a:hover {
    color: blue;
}

a > img:hover {
    box-shadow: 0 0 5px 0px blue;
}


.tech_asp{
    width: 50%;
    color:black;
}

.tech_asp p{
    margin:0;
    width: max-content;
    padding-top: 3pt;
    padding-left: 4pt;
    margin-bottom: 5pt;
    padding-bottom: 3pt;
    padding-right: 3pt;
    color:black;
    background-color: white;
    border: 1pt solid black;
}

.tech_asp p:hover{
    color:blue;
    background-color: black;
}

.tech_asp p:hover a{
    color:blue;
}

pre{
    font-family: monospace;
    color: blue;
}

pre:hover{
    color: white;
}


/* .link {
    position: absolute;
    top: 50px;
    left: 50px;     
} */

summary > a{
    font-size: 19pt;
}

.links p{
    font-family: GaramongItalic;
    color:black;
}

table{
    display: flex;
    border-collapse: collapse;
    border: 1pt solid black;
    color:black;
    margin-top: 60px;
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 3%;
    background-color: white;
    font-family: Montreal_Regular;
}

tr:hover tr{
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
}


th{
    text-align: left;   
    padding-top: 5pt;
    padding-bottom: 5pt;
    padding-left: 3%;
    border-top: 1pt solid black;
    border-bottom: 1pt solid black;
    color: white;
    background-color: black;
}


td{
    vertical-align: top;
    padding-top: 14pt; 
    padding-bottom: 22pt;
    padding-left: 3%; 
    padding-right: 3%;
    border-bottom: 1pt solid black;
}

.main_page{
    color:white;
    padding-right: 20px;
}

.main_page:hover{
    color:blue;
}


/* <!------------------------------ FLOWERS -----------------------------> */

.footnote{
    font-family: GaramongRegular;
    font-size: 16pt;
}

.bogota {
    display: none;
    margin-top: 1.8%;
    margin-left: 64%;
    position: absolute;
    width: 20vw;
    height: auto;
    z-index: 3;
}

.rotterdam {
    display: none;
    margin-top: 5%;
    margin-left: 5%;
    position: absolute;
    width: 20vw;
    height: auto;
    z-index: 3;
}



/* <!------------------------------ SYSTEMS -----------------------------> */

figure.systems{
    margin: 0;
}

.systems {
    display: none;
    /* position: absolute; */
    /* display: inline-block; */
    /* margin-top: 13%;
    margin-left: 1.5%; */
    margin-top:0;
    width: fit-content;
    height: fit-content;
    z-index: 100;
}

.zinecamp {
    margin-top: 13%;
    width: 100vw;
    height: 130vw;
    z-index: 4;
}

.earthrise {
    margin-top: 19%;
    width: 100vw;
    height: 130vw;
    z-index: 4;
}

.mfs{
    margin-top: 13%;
    width: 100vw;
    height: 130vw;
    z-index: 4;
}

.passiflora {
    margin-top: 9%;
    width: 100vw;
    height: 114vw;
    z-index: 4;
}

.attempt {
    margin-top: 0;
    width: 100vw;
    height: 27vw;
    z-index: 4;
}

.image { 
    width: 100%;
    z-index: 4;
}

/* <!------------------------------ SCENT OF TIME -----------------------------> */

a > figure > img:hover {
    box-shadow: 0 0 10px 0px blue;
}


.scentoftime-des {
    width: 20vw;
    position: absolute;
    margin-top: 58%;
    margin-left: 39%;
    background-color: #cccccc;
    padding: 3pt;
}

.scentoftime-title {
    margin-top: 55.5%;
}

.scentoftime-photo {
    width: 45vw;
    z-index: 4;
    /* box-shadow: 0 0 10px 0 white; */
    border-radius: 20px;
}

.scentoftime-symbol {
    width: 20vw;
    z-index: 4;
}

.scentoftime-image {
    width: 14vw;
    z-index: 4;
}

#scentoftime-texture-1 {
    position: absolute;
    width: 85vw;
    margin-top: 27%;
    z-index: 4;
    margin-left: 14%;
}

#scentoftime-texture-2 {
    position: absolute;
    z-index: 7;
    width: 55vw;
    margin-top:60%;
    margin-left: 25%;
}

#scentoftime-photo-1 {
    position: absolute;
    z-index: 6;
    margin-top: 78%;
    margin-left: 46%;
}

#scentoftime-photo-2 {
    position: absolute;
    margin-top: 89%;
    margin-left: 10%;

}

#scentoftime-symbol-1 {
    position: absolute;
    width: 40vw;
    margin-top: 12%;
    margin-left: 29%;
}

#scentoftime-symbol-2 {
    position: absolute;
    width: 22vw;
    margin-top: 47%;
    margin-left: 63%;
}

#scentoftime-symbol-3 {
    position: absolute;
    margin-top: 48%;
    margin-left: 15%;
}

#scentoftime-process {
    width: 50vw;
    z-index: 7;
    position: absolute;
    margin-top: 113%;
    margin-left: 25%;
}


/* <!------------------------------ ETHERAXIS -----------------------------> */

.etheraxis-des {
    width: 20vw;
    position: absolute;
    margin-top: 162%;
    margin-left: 53%;
    background-color: #cccccc;
    padding: 3pt;
}

.etheraxis-title {
    margin-top: 159.5%;
}

.etheraxis-symbol {
    width: 14vw;
    z-index: 5;
}

#etheraxis-symbol-1 {
    position: absolute;
    margin-top: 200%;
    margin-left: 12%;
}

#etheraxis-symbol-2 {
    position: absolute;
    margin-top: 200%;
    margin-left: 72%;
}

#etheraxis-symbol-3 {
    position: absolute;
    margin-top: 200%;
    margin-left: 52%;
}

#etheraxis-symbol-4 {
    position: absolute;
    margin-top: 200%;
    margin-left: 32%;
}

#etheraxis-cards-1{
    margin-top: 165%;
    margin-left: 15%;
    z-index: 100;
}

#etheraxis-cards-2{
    margin-top: 169%;
    margin-left: 34%;
    z-index: 100;
}

#etheraxis-cards-3{
    margin-top: 172%;
    margin-left: 47%;
    z-index: 100;
}

#etheraxis-cards-4{
    margin-top: 170%;
    margin-left: 66%;
    z-index: 100;
}

#etheraxis-gif {
    width: 27vw;
    z-index: 6;
    position: absolute;
    margin-top: 163%;
    margin-left: 26%;
    border-radius: 25px;
    box-shadow: 0 0 15px 0 rgb(255, 136, 0);
}

#etheraxis-publication {
    width: 30vw;
    position: absolute;
    margin-top: 215%;
    margin-left: 28%;
    z-index: 5;
    transform: rotate(45deg);
}

#etheraxis-photo {
    width: 20vw;
    position: absolute;
    margin-top: 235%;
    margin-left: 55%;
    z-index: 5;
}

/* <!------------------------------ ZINECAMP 2022-----------------------------> */

.zinecamp2022-des {
    width: 20vw;
    position: absolute;
    margin-top: 295%;
    margin-left: 10%;
    background-color: #cccccc;
    padding: 3pt;
}

.zinecamp2022-title{
    margin-top: 292.5%;
}

.zinecamp2022-sticker {
    width: 20vw;
    z-index: 5;
}

.zinecamp2022-square {
    width: 25vw;
    z-index: 4;
}

#zinecamp2022-logo {
    position: absolute;
    margin-top: 265%;
    margin-left: 25%;
}

#zinecamp2022-sticker {
    position: absolute;
    margin-top: 275%;
    margin-left: 41%;
}

#zinecamp2022-program-1{
    position: absolute;
    width: 35vw;
    margin-top: 344%;
    margin-left: 15%;
    box-shadow: 0 0 10px 0 black;
}

#zinecamp2022-program-2{
    position: absolute;
    width: 35vw;
    margin-top: 349%;
    margin-left: 25%;
    box-shadow: 0 0 10px 0 black;
}

#zinecamp2022-banner{
    position: absolute;
    width: 35vw;
    margin-top: 364%;
    margin-left: 50%;
    box-shadow: 0 0 10px 0px black;
}

#zinecamp2022-phone{
    position: absolute;
    margin-top: 282%;
    margin-left: 59%;
    z-index: 3;
    box-shadow: 0 0 10px 0px  black;
}

#zinecamp2022-talk-1{
    position: absolute;
    margin-top: 304%;
    margin-left: 10%;
    box-shadow: 0 0 10px 0px black;
}

#zinecamp2022-talk-2{
    position: absolute;
    margin-top: 323%;
    margin-left: 66%;
    z-index: 5;
    box-shadow: 0 0 10px 0px black;
}

#zinecamp2022-workshop{
    position: absolute;
    margin-top: 304%;
    margin-left: 51%;
    z-index: 4;
    box-shadow: 0 0 10px 0px black;

}

#zinecamp2022-event{
    position: absolute;
    margin-top: 309%;
    margin-left: 27%;
    box-shadow: 0 0 10px 0px black;
}

/* <!------------------------------ ZINECAMP -----------------------------> */

    .zinecamp-des {
        width: 20vw;
        position: absolute;
        margin-top: 398%;
        margin-left: 13%;
        background-color: #cccccc;
        padding: 3pt;
    }

    .zinecamp-title {
        margin-top: 395.5%;
    }


    .zinecamp_flyer {
        width: 14vw;
        z-index: 4;
    }

    .circle {
        width: 15vw;
        z-index: 4;
    }


    #circle {
        position: absolute;
        margin-top: 396.9%;
        margin-left: 46%;
    }

    #Z {
        position: absolute;
        margin-top: 408%;
        margin-left: 12%;
    }

    #I {
        position: absolute;
        margin-top: 412.5%;
        margin-left: 30%;
    }

    #N {
        position: absolute;
        margin-top: 409.5%;
        margin-left: 55%;
    }

    #E {
        position: absolute;
        margin-top: 407.7%;
        margin-left: 70%;
    }

    #C {
        position: absolute;
        margin-top: 432.5%;
        margin-left: 9%;
    }

    #A {
        position: absolute;
        margin-top: 436%;
        margin-left: 26%;
    }

    #M {
        position: absolute;
        margin-top: 429%;
        margin-left: 47%;
    }

    #P {
        position: absolute;
        margin-top: 432%;
        margin-left: 68%;
    }

    #Z_texture {
        position: absolute;
        margin-top: 419%;
        margin-left: 48%;
    }

    #flag {
        position: absolute;
        margin-top: 452%;
        margin-left: 36%;
        width: 50vw;
    }

    #flyer {
        position: absolute;
        width: 20vw;
        margin-top: 475%;
        margin-left: 14%;
    }

    #stories {
        position: absolute;
        width: 25vw;
        margin-top: 489%;
        margin-left: 26%;
    }

    #stalls {
        position: absolute;
        width: 29vw;
        margin-top: 499%;
        margin-left: 55%;
    }

/* <!------------------------------ EARTHRISE -----------------------------> */

    .earthrise_photo {
        width: 20vw;
        border-radius: 10%;
        z-index: 4;
    }

    .earthrise_screen {
        width: 60vw;
        z-index: 4;
    }

    .earthrise_map {
        width: 35vw;
        z-index: 4;
    }

    .earthrise_gif {
        width: 23vw;
        z-index: 4;
    }

    .earthrise-des {
        width: 20vw;
        position: absolute;
        margin-top: 544%;
        margin-left: 28%;
        background-color: #cccccc;
        padding: 3pt;
    }

    .earthrise-title{
        margin-top: 541.5%;
    }


    #dark {
        position: absolute;
        margin-top: 552%;
        margin-left: 4%;
    }

    #dolphinwaves {
        position: absolute;
        margin-top: 599%;
        margin-left: 13%;
    }

    #earthrise_3_5 {
        position: absolute;
        margin-top: 581%;
        margin-left: 56%;
        z-index: 4;
    }

    #dragonfly {
        position: absolute;
        margin-top: 630%;
        margin-left: 63%;
    }

    #map {
        position: absolute;
        margin-top: 623%;
        margin-left: 17%;
    }

    #projectgecko {
        position: absolute;
        margin-top: 550%;
        margin-left: 66%;
    }
    
/* <!------------------------------ MFS -----------------------------> */

    .mfs_square {
        width: 25vw;
        z-index: 4;
    }

    .mfs_cassette {
        width: 30vw;
        z-index: 4;
    }

    .mfs_poster {
        width: 30vw;
        z-index: 4;
    }

    .mfs-des {
        width: 20vw;
        position: absolute;
        margin-top: 680%;
        margin-left: 50%;
        background-color: #cccccc;
        padding: 3pt;
    }

    .mfs-title{
        margin-top: 677.5%;
    }

    #square{
        position: absolute;
        margin-top: 680%;
        margin-left: 20%;
    }

    #cassette{
        position: absolute;
        margin-top: 694%;
        margin-left: 50%;
    }

    #cover{
        position: absolute;
        margin-top: 710%;
        margin-left: 10%;
    }

    #backcover{
        position: absolute;
        margin-top: 737%;
        margin-left: 44%;
    }

/* <!------------------------------ PASSIFLORA -----------------------------> */

    .passiflora_flyer {
        width: 30vw;
        z-index: 4;
    }

    .passiflora_logo {
        width: 20vw;
        z-index: 4;
    }

    .passiflora-des {
        width: 20vw;
        position: absolute;
        margin-top: 815%;
        margin-left: 25%;
        background-color: #cccccc;
        padding: 3pt;
    }

    .passiflora-title{
        margin-top: 812.5%;
    }

    #Logos-01 {
        position: absolute;
        margin-top: 802%;
        margin-left: 51%;
    }

    #Logos-02 {
        position: absolute;
        margin-top: 819%;
        margin-left: 64%;
    }

    #Logos-03 {
        position: absolute;
        margin-top: 814%;
        margin-left: 2%;
    }

    #Flyer_2 {
        position: absolute;
        margin-top: 824%;
        margin-left: 8%;
    }

    #flyer_1 {
        position: absolute;
        margin-top: 834%;
        margin-left: 36%;
    }

    #tarjetas {
        position: absolute;
        margin-top: 865%;
        margin-left: 53%;
    }

    /* <!------------------------------ ATTEMPT -----------------------------> */

    .attempt_logo {
        width: 20vw;
        z-index: 4;
    }

    .attempt_booklet {
        width: 40vw;
        z-index: 4;
    }

    .attempt_books {
        width: 40vw;
        z-index: 4;
    }

    .attempt-des {
        width: 20vw;
        position: absolute;
        margin-top: 940%;
        margin-left: 10%;
        background-color: #cccccc;
        padding: 3pt;
    }

    .attempt-title{
        margin-top: 937.5%;
    }


    #puentes {
        position: absolute;
        margin-top: 900%;
        margin-left: 53%;
    }

    #card {
        position: absolute;
        margin-top: 900%;
        margin-left: 23%;
        z-index: 5;
    }

    #rounded {
        position: absolute;
        margin-top: 910%;
        margin-left: 12%;
    }

    #booklet {
        position: absolute;
        margin-top: 925%;
        margin-left: 43%;
    }

    #books_1 {
        position: absolute;
        margin-top: 950%;
        margin-left: 44%;
        padding-bottom: 10%;
    }    

    #books_2 {
        position: absolute;
        margin-top: 950%;
        margin-left: 7%;
    }

 /* <!------------------------------ BOOKS -----------------------------> */


.books {
    display: none;
    /* position: absolute; */
    /* display: inline-block; */
    /* margin-top: 25%;
    margin-left: 0; */
    /* width: 100vw;
    height: 150vw; */
    cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='62' height='74' viewport='0 0 100 100' style='fill:black;font-size:37px;'><text y='50%'>👀</text></svg>") 16 0,auto; /*!emojicursor.app*/;
    z-index: 4;
}

.book-des-right{
    width: 20vw;
    position: absolute;
    margin-top: 270%;
    margin-left: 530%;
    background-color: #cccccc;
    padding: 3pt;
    cursor: default;
}


.book-des-left{
    width: 20vw;
    position: absolute;
    margin-top: 260%;
    margin-left: -450%;
    background-color: #cccccc;
    padding: 3pt;
    cursor: default;
}

.book-details{
    margin-top: 0.5em;
    font-family: Montreal_Regular;
    cursor: pointer;
}


.book-title{
    margin-bottom: 3%;
}

.books pre {
    font-family: GaramongItalic;
    color: black;
}

.cure{
    position: absolute;
    margin-top: 10%;
    margin-left: 20%;
    width: fit-content;
    height: fit-content;
    z-index: 4;
}

.diffraction{
    position: absolute;
    margin-top: 45%;
    margin-left: 30%;
    width: fit-content;
    height: fit-content;
    z-index: 4;
}

.morph{
    position: absolute;
    margin-top: 80%;
    margin-left: 40%;
    width: fit-content;
    height: fit-content;
    z-index: 4;
}

.book_500{
    position: absolute;
    margin-top: 115%;
    margin-left: 14%;
    width: fit-content;
    height: fit-content;
    z-index: 4;
}

.particulas{
    position: absolute;
    margin-top: 150%;
    margin-left: 43%;
    width: fit-content;
    height: fit-content;
    z-index: 4;
}

.encuentro{
    position: absolute;
    margin-top: 190%;
    margin-left: 35%;
    width: fit-content;
    height: fit-content;
    z-index: 4;
}

.staring{
    position: absolute;
    margin-top: 230%;
    margin-left: 18%;
    width: fit-content;
    height: fit-content;
    z-index: 4;
}

.from{
    position: absolute;
    margin-top: 260%;
    margin-left: 40%;
    width: fit-content;
    height: fit-content;
    z-index: 4;
}


.libroforma{
    position: absolute;
    margin-top: 300%;
    margin-left: 18%;
    padding-bottom: 100px;
    width: fit-content;
    height: 500px;
    z-index: 4;
}

/* <!------------------------------ Morph -----------------------------> */

#morph-pre{
    background-color: rgba(1, 1, 1,0);
    margin-top: 160%;
    margin-left: 500%;
}

.image_morph{
    position: absolute;
    width: 18vw;
}

.image_morph_cover{
    position: absolute;
    width: 18vw;
}

#morph_cover{
    position: absolute;
    margin-top: 20%;
    margin-left: 7%;
}

#morph_1{
    position: absolute;
    margin-top: 40%;
    margin-left: 30%;
    display: none;
}

#morph_2{
    position: absolute;
    margin-top: 50%;
    margin-left: 60%;
    display: none;
}

#morph_3{
    position: absolute;
    margin-top: 45%;
    margin-left: 80%;
    display: none;
}

#morph_4{
    position: absolute;
    margin-top: 25%;
    margin-left: 60%;
    display: none;
}

#morph_5{
    position: absolute;
    margin-top: 15%;
    margin-left: 50%;
    display: none;
}

#morph_6{
    position: absolute;
    margin-top: 50%;
    margin-left: 70%;
    display: none;
}

#morph_7{
    position: absolute;
    margin-top: 25%;
    margin-left: 70%;
    display: none;
}

#morph_8{
    position: absolute;
    margin-top: 45%;
    margin-left: 80%;
    display: none;
}

#morph_9{
    position: absolute;
    margin-top: 25%;
    margin-left: 60%;
    display: none;
}

#morph_10{
    position: absolute;
    margin-top: 15%;
    margin-left: 50%;
    display: none;
}

#morph_11{
    position: absolute;
    margin-top: 50%;
    margin-left: 70%;
    display: none;
}

#morph_12{
    position: absolute;
    margin-top: 25%;
    margin-left: 70%;
    display: none;
}

#morph_13{
    position: absolute;
    margin-top: 15%;
    margin-left: 50%;
    display: none;
}

#morph_14{
    position: absolute;
    margin-top: 50%;
    margin-left: 70%;
    display: none;
}

#morph_15{
    position: absolute;
    margin-top: 25%;
    margin-left: 70%;
    display: none;
}

#morph_16{
    position: absolute;
    margin-top: 15%;
    margin-left: 50%;
    display: none;
}

#morph_17{
    position: absolute;
    margin-top: 50%;
    margin-left: 70%;
    display: none;
}

#morph_18{
    position: absolute;
    margin-top: 25%;
    margin-left: 70%;
    display: none;
}

#morph_19{
    position: absolute;
    margin-top: 25%;
    margin-left: 70%;
    display: none;
}

#morph_20{
    position: absolute;
    margin-top: 15%;
    margin-left: 50%;
    display: none;
}

#morph_21{
    position: absolute;
    margin-top: 50%;
    margin-left: 70%;
    display: none;
}

#morph_22{
    position: absolute;
    margin-top: 25%;
    margin-left: 70%;
    display: none;
}

#morph_23{
    position: absolute;
    margin-top: 15%;
    margin-left: 50%;
    display: none;
}

#morph_24{
    position: absolute;
    margin-top: 50%;
    margin-left: 70%;
    display: none;
}

#morph_25{
    position: absolute;
    margin-top: 25%;
    margin-left: 70%;
    display: none;
}

#morph_26{
    position: absolute;
    margin-top: 15%;
    margin-left: 50%;
    display: none;
}

#morph_27{
    position: absolute;
    margin-top: 50%;
    margin-left: 70%;
    display: none;
}

#morph_28{
    position: absolute;
    margin-top: 25%;
    margin-left: 70%;
    display: none;
}

#morph_29{
    position: absolute;
    margin-top: 25%;
    margin-left: 70%;
    display: none;
}

#morph_30{
    position: absolute;
    margin-top: 30%;
    margin-left: 70%;
    display: none;
}

#morph_back{
    position: absolute;
    margin-top: 50%;
    margin-left: 150%;
    display: none;
}

/* <!------------------------------ Writing Cure -----------------------------> */



.image_cure{
    position: absolute;
    width: 45vw;
    box-shadow: 0px 0px 8px 1px rgb(141, 141, 141);
}

.image_cure_cover{
    position: absolute;
    width: 20vw;
    box-shadow: 0px 0px 8px 1px rgb(141, 141, 141);
}

#cure_cover{
    position: absolute;
    margin-top: 20%;
    margin-left: 7%;
}

#cure_1{
    position: absolute;
    margin-top: 40%;
    margin-left: 30%;
    display: none;
}

#cure_2{
    position: absolute;
    margin-top: 50%;
    margin-left: 60%;
    display: none;
}

#cure_3{
    position: absolute;
    margin-top: 45%;
    margin-left: 80%;
    display: none;
}

#cure_4{
    position: absolute;
    margin-top: 25%;
    margin-left: 60%;
    display: none;
}

#cure_5{
    position: absolute;
    margin-top: 15%;
    margin-left: 50%;
    display: none;
}

#cure_6{
    position: absolute;
    margin-top: 50%;
    margin-left: 70%;
    display: none;
}

#cure_7{
    position: absolute;
    margin-top: 25%;
    margin-left: 70%;
    display: none;
}

#cure_8{
    position: absolute;
    margin-top: 45%;
    margin-left: 80%;
    display: none;
}

#cure_9{
    position: absolute;
    margin-top: 25%;
    margin-left: 60%;
    display: none;
}

#cure_10{
    position: absolute;
    margin-top: 15%;
    margin-left: 50%;
    display: none;
}

#cure_11{
    position: absolute;
    margin-top: 50%;
    margin-left: 70%;
    display: none;
}

#cure_12{
    position: absolute;
    margin-top: 25%;
    margin-left: 70%;
    display: none;
}

#cure_13{
    position: absolute;
    margin-top: 15%;
    margin-left: 50%;
    display: none;
}

#cure_14{
    position: absolute;
    margin-top: 50%;
    margin-left: 70%;
    display: none;
}

#cure_15{
    position: absolute;
    margin-top: 25%;
    margin-left: 70%;
    display: none;
}

#cure_16{
    position: absolute;
    margin-top: 15%;
    margin-left: 50%;
    display: none;
}

#cure_17{
    position: absolute;
    margin-top: 50%;
    margin-left: 70%;
    display: none;
}

#cure_18{
    position: absolute;
    margin-top: 25%;
    margin-left: 70%;
    display: none;
}

#cure_19{
    position: absolute;
    margin-top: 25%;
    margin-left: 70%;
    display: none;
}

#cure_back{
    position: absolute;
    margin-top: 50%;
    margin-left: 150%;
    display: none;
}

/* <!------------------------------Diffraction -----------------------------> */

.image_diff{
    position: absolute;
    width: 45vw;
    box-shadow: 0px 0px 8px 1px rgb(141, 141, 141);
}

.image_diff_cover{
    position: absolute;
    width: 20vw;
    box-shadow: 0px 0px 8px 1px rgb(141, 141, 141);
}

#diff_cover{
    position: absolute;
    margin-top: 20%;
    margin-left: 7%;
}

#diff_1{
    position: absolute;
    margin-top: 40%;
    margin-left: 30%;
    display: none;
}

#diff_2{
    position: absolute;
    margin-top: 50%;
    margin-left: 60%;
    display: none;
}

#diff_3{
    position: absolute;
    margin-top: 45%;
    margin-left: 80%;
    display: none;
}

#diff_4{
    position: absolute;
    margin-top: 25%;
    margin-left: 60%;
    display: none;
}

#diff_5{
    position: absolute;
    margin-top: 15%;
    margin-left: 50%;
    display: none;
}

#diff_6{
    position: absolute;
    margin-top: 50%;
    margin-left: 70%;
    display: none;
}

#diff_7{
    position: absolute;
    margin-top: 25%;
    margin-left: 70%;
    display: none;
}

#diff_back{
    position: absolute;
    margin-top: 50%;
    margin-left: 150%;
    display: none;
}


    /* <!------------------------------ 500 -----------------------------> */

    .image_500{
        position: absolute;
        width: 32vw;
    }

    .image_500_anexo{
        position: absolute;
        width: 35vw;
    }

    .image_500_cover{
        position: absolute;
        width: 17vw;
    }

    #cover_500{
        position: absolute;
        margin-top: 20%;
        margin-left: 7%;
    }

    #uno_500{
        position: absolute;
        margin-top: 40%;
        margin-left: 30%;
        display: none;
    }

    #dos_500{
        position: absolute;
        margin-top: 50%;
        margin-left: 60%;
        display: none;
    }

    #tres_500{
        position: absolute;
        margin-top: 45%;
        margin-left: 80%;
        display: none;
    }

    #cuatro_500{
        position: absolute;
        margin-top: 25%;
        margin-left: 60%;
        display: none;
    }

    #cinco_500{
        position: absolute;
        margin-top: 15%;
        margin-left: 50%;
        display: none;
    }

    #backcover_500{
        position: absolute;
        margin-top: 50%;
        margin-left: 150%;
        display: none;
    }

    /* <!------------------------------Particulas -----------------------------> */

.image_particulas{
    position: absolute;
    width: 45vw;
    box-shadow: 0px 0px 8px 1px rgb(141, 141, 141);
}

.image_particulas_cover{
    position: absolute;
    width: 22vw;
    box-shadow: 0px 0px 8px 1px rgb(141, 141, 141);
}

#particulas_cover{
    position: absolute;
    margin-top: 20%;
    margin-left: 7%;
}

#particulas_1{
    position: absolute;
    margin-top: 40%;
    margin-left: 30%;
    display: none;
}

#particulas_2{
    position: absolute;
    margin-top: 50%;
    margin-left: 60%;
    display: none;
}

#particulas_3{
    position: absolute;
    margin-top: 45%;
    margin-left: 80%;
    display: none;
}

#particulas_4{
    position: absolute;
    margin-top: 25%;
    margin-left: 60%;
    display: none;
}

#particulas_5{
    position: absolute;
    margin-top: 15%;
    margin-left: 50%;
    display: none;
}

#particulas_6{
    position: absolute;
    margin-top: 50%;
    margin-left: 70%;
    display: none;
}

#particulas_7{
    position: absolute;
    margin-top: 25%;
    margin-left: 70%;
    display: none;
}

#particulas_8{
    position: absolute;
    margin-top: 80%;
    margin-left: 70%;
    display: none;
}

#particulas_9{
    position: absolute;
    margin-top: 15%;
    margin-left: 60%;
    display: none;
}

#particulas_back{
    position: absolute;
    margin-top: 50%;
    margin-left: 150%;
    display: none;
}

    /* <!------------------------------ Encuentro -----------------------------> */

    .image_encuentro{
        position: absolute;
        width: 45vw;
    }

    .image_encuentro_cover{
        position: absolute;
        width: 25vw;
    }


    #cover_encuentro{
        position: absolute;
        margin-top: 6%;
        margin-left: 3%;
    }

    #uno_encuentro{
        position: absolute;
        margin-top: 20%;
        margin-left: 20%;
        display: none;
    }

    #dos_encuentro{
        position: absolute;
        margin-top: 30%;
        margin-left: 35%;
        display: none;
    }

    #tres_encuentro{
        position: absolute;
        margin-top: 50%;
        margin-left: 30.5%;
        display: none;
    }

    #cuatro_encuentro{
        position: absolute;
        margin-top: 40%;
        margin-left: 25%;
        display: none;
    }

    #cinco_encuentro{
        position: absolute;
        margin-top: 45%;
        margin-left: 70%;
        display: none;
    }

    #seis_encuentro{
        position: absolute;
        margin-top: 60%;
        margin-left: 90%;
        display: none;
    }

    #siete_encuentro{
        position: absolute;
        margin-top: 50%;
        margin-left: 50%;
        display: none;
    }

    #ocho_encuentro{
        position: absolute;
        margin-top: 40.5%;
        margin-left: 25%;
        display: none;
    }

    #nueve_encuentro{
        position: absolute;
        margin-top: 40.5%;
        margin-left: 5%;
        display: none;
    }

    #diez_encuentro{
        position: absolute;
        margin-top: 20%;
        margin-left: 45%;
        display: none;
    }

    #backcover_encuentro{
        position: absolute;
        margin-top: 90%;
        margin-left: 220%;
        display: none;
    }

/* <!------------------------------ Staring -----------------------------> */

.image_staring{
    position: absolute;
    width: 55vw;
}

.image_staring_cover{
    position: absolute;
    width: 30vw;
}

#cover_staring{
    position: absolute;
    margin-top: 6%;
    margin-left: 10%;
}

#uno_staring{
    position: absolute;
    margin-top: 20%;
    margin-left: 35%;
    display: none;
}

#dos_staring{
    position: absolute;
    margin-top: 80%;
    margin-left: 20%;
    display: none;
}


#backcover_staring{
    position: absolute;
    margin-top: 55%;
    margin-left: 20%;
    display: none;
}


/* <!------------------------------ Libro/forma -----------------------------> */

.image_libro{
    position: absolute;
    width: 40vw;
}

.image_libro_cover{
    position: absolute;
    width: 20vw;
}

#cover_libro{
    position: absolute;
    margin-top: 6%;
    margin-left: 10%;
}

#uno_libro{
    position: absolute;
    margin-top: 9%;
    margin-left: 6%;
    display: none;
}

#dos_libro{
    position: absolute;
    margin-top: 10%;
    margin-left: 7%;
    display: none;
}

#tres_libro{
    position: absolute;
    margin-top: 11%;
    margin-left: 7.5%;
    display: none;
}

#cuatro_libro{
    position: absolute;
    margin-top: 12%;
    margin-left: 11%;
    display: none;
}

#cinco_libro{
    position: absolute;
    margin-top: 7.5%;
    margin-left: 9%;
    display: none;
}

#backcover_libro{
    position: absolute;
    margin-top: 10%;
    margin-left: 14%;
    display: none;
}

/* <!------------------------------ from -----------------------------> */

.image_from{
    position: absolute;
    width: 40vw;
}

.image_from_cover{
    position: absolute;
    width: 20vw;
    box-shadow: 0 0 5px gray;
}

#cover_from{
    position: absolute;
    margin-top: 30%;
    margin-left: 70%;
}

#from_1{
    position: absolute;
    margin-top: 20%;
    margin-left: 35%;
    width: 43vw;
    display: none;
}

#from_2{
    position: absolute;
    margin-top: 80%;
    margin-left: 20%;
    display: none;
    box-shadow: 0 0 5px gray;
}

#from_3{
    position: absolute;
    margin-top: 30%;
    margin-left: 10%;
    display: none;
    box-shadow: 0 0 5px gray;
}

#from_4{
    position: absolute;
    margin-top: 80%;
    margin-left: 20%;
    display: none;
    box-shadow: 0 0 5px gray;
}

#from_5{
    position: absolute;
    margin-top: 80%;
    margin-left: 20%;
    width: 46.5vw;
    display: none;
}

#from_back{
    position: absolute;
    margin-top: 55%;
    margin-left: 20%;
    display: none;
}



 /* <!------------------------------ OBJECTS -----------------------------> */

 .objects {
    display: none;
    position: absolute;
    margin-top: 20%;
    margin-left: 0;
    width: 100vw;
    height: 150vw;
    z-index: 4;
}

.image_objects{
    position: absolute;
    width: 35vw;
}

.image_cardz{
    position: absolute;
    width: 15vw;
}

.image_card{
    position: absolute;
    width: 10vw;
    box-shadow: 0 0 5px gray;
}

.image_glossary{
    position: absolute;
    width: 20vw;
    box-shadow: 0 0 5px gray;
}

#cardz-1{
    margin-top: 0%;
    margin-left: 13%;
    z-index: 100;
}

#cardz-2{
    margin-top: -5%;
    margin-left: 32%;
}

#cardz-3{
    margin-top: 2%;
    margin-left: 45%;
}

#cardz-4{
    margin-top: 5%;
    margin-left: 62%;
}

#glossary-1{
    margin-top: 35%;
    margin-left: 23%;
    z-index: 100;
}

#glossary-2{
    margin-top: 30%;
    margin-left: 32%;
}

#glossary-3{
    margin-top: 37%;
    margin-left: 45%;
}

#glossary-4{
    margin-top: 40%;
    margin-left: 55%;
}

#glossary-5{
    margin-top: 42%;
    margin-left: 15%;
}

#glossary-6{
    margin-top: 32%;
    margin-left: 65%;
}

#glossary-7{
    margin-top: 32%;
    margin-left: 6%;
}

#cards-1{
    margin-top: 70%;
    margin-left: 20%;
}

#cards-2{
    margin-top: 65%;
    margin-left: 32%;
}

#cards-3{
    margin-top: 67%;
    margin-left: 40%;
}

#cards-4{
    margin-top: 70%;
    margin-left: 55%;
}

#cards-5{
    margin-top: 75%;
    margin-left: 15%;
}

#cards-6{
    margin-top: 75%;
    margin-left: 79%;
}

#cards-7{
    margin-top: 62%;
    margin-left: 6%;
}

#cards-8{
    margin-top: 80%;
    margin-left: 35%;
}

#cards-9{
    margin-top: 60%;
    margin-left: 52%;
}

#cards-10{
    margin-top: 68%;
    margin-left: 67%;
}

#cards-front{
    position: absolute;
    margin-top: 118%;
    margin-left: 50%;
    box-shadow: 0 0 5px gray;
}

#cards-back{
    position: absolute;
    margin-top: 118%;
    margin-left: 12%;
    box-shadow: 0 0 5px gray;
}

#PB_DOTS{
    position: absolute;
    margin-top: 150%;
    margin-left: 40%;
    box-shadow: 0 0 5px gray;
}

#noventau{
    width: 20vw;
    margin-top: 160%;
    margin-left: 25%;
}

#camibuso{
    position: absolute;
    width: 50vw;
    margin-top: 188%;
    margin-left: 10%;
}

#camibuso_2{
    position: absolute;
    width: 50vw;
    margin-top: 195%;
    margin-left: 40%;
}

#ikebana{
    position: absolute;
    margin-top: 233%;
    margin-left: 9%;
    box-shadow: 0 0 5px gray;
}

#instructions{
    position: absolute;
    margin-top: 260%;
    margin-left: 50%;
}

#libroyforma{
    position: absolute;
    margin-top: 285%;
    margin-left: 22%;
}

#mentallandscape{
    position: absolute;
    margin-top: 340%;
    margin-left: 50%;
    box-shadow: 0 0 5px gray;
}

#paramo{
    position: absolute;
    width: 50%;
    margin-top: 380%;
    margin-left: 7%;
    box-shadow: 0 0 5px gray;
}

#plants{
    position: absolute;
    margin-top: 415%;
    margin-left: 50%;
    box-shadow: 0 0 5px gray;
}

#preguntese{
    position: absolute;
    margin-top: 438%;
    margin-left: 27%;
    box-shadow: 0 0 5px gray;
}



@media screen and (max-width: 800px) {
    .intro{
        display: none;
        /* position: absolute;
        margin-top: 13.8vw;
        font-size: 30pt;
        line-height: 32pt;
        padding: 0%;
        margin-left: 2.5vw;
        margin-right: 4vw;
        overflow: hidden; */
    }

    .mobile{
        display: block;
        margin: 3vw;
        margin-top: 4vw;
        font-size: 11vw;
        line-height: 6.4vh;
    }

    #verbs-cnt{
        font-size: 11vw;
        margin-right: 3vw;
    }

    .intro_link{
        font-size: 11vw;
    }

    /*
    #server{
        position: absolute;
        margin-top: 1vw;
        margin-left: 2.5vw;
        margin-right: 4vw;
    }

    #verbs-cnt {
        display: none;
    }

    .CV{
        margin-top: 1vh;
        margin-left: 1.2vh;
        width: 84vw;
        height: 163vw;
        padding: 4vw;
    }

    .bogota{
        margin-top: 48.8%;
        margin-left: 62%;
        width: 30vw;
    }

    .rotterdam{
        margin-top: 43%;
        margin-left: 22%;
        width: 30vw;
    }

    .zinecamp_flyer {
        width: 36vw;
    }

    .circle {
        width: 31vw;
        z-index: 4;
    }

    .zinecamp-des {
        width: 40vw;
    } */


}