/* ----------------------------------------IMAGE-1----------------------------------- */

#psi1 {
    position: relative;
    width: 27.5vmax;
    height: 17.3vmax;
    top: 7%;
    left: 15%;
    z-index: 3;
}

#pi1 {
    position: absolute;
    color: #988e9f;
    display: inline-block;
    font-family: 'Roboto Mono', monospace;
    text-shadow: 20px 10px 20px #1a1527, 0 0 0.10em #1a1527, 0 0 0.1em #1a1527;
    font-size: 1.5vw;
    margin-top: 6%;
    right: 105%;
}

#hi1 {
    position: relative;
    color: white;
    display: inline-block;
    text-shadow: 20px 10px 20px #1a1527, 0 0 0.10em #1a1527, 0 0 0.1em #1a1527;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 2.2vw;
    font-weight: 500;
    margin-top: 15%;
    right: 20%;
    text-underline-offset: 0.35em;
}

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

    #psi1 {
        top: 10%;
    }
}

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

    #psi1 {
        top: 12%;
    }
}

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

    #psi1 {
        left: 20vmin;
        top: 10%;
    }

    #hi1 {
        font-size: 14px;
    }

    #pi1 {
        font-size: 13px;
    }

}

/* ----------------------------------------IMAGE-2----------------------------------- */

#psi2 {
    position: relative;
    width: 26.8vmax;
    height: 16.3vmax;
    top: 2.5%;
    margin-left: 55%;
    z-index: 3;
}

#pi2 {
    position: relative;
    color: #988e9f;
    display: inline-block;
    font-family: 'Roboto Mono', monospace;
    text-shadow: 20px 10px 20px #1a1527, 0 0 0.10em #1a1527, 0 0 0.1em #1a1527;
    font-size: 1.5vw;
    margin-top: 50%;
    left: -13%;
}

#hi2 {
    position: relative;
    color: white;
    display: inline-block;
    text-shadow: 20px 10px 20px #1a1527, 0 0 0.10em #1a1527, 0 0 0.1em #1a1527;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 28px;
    font-weight: 500;
    top: 8%;
    left: -110px;
    text-underline-offset: 0.35em;
}

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

    #psi2 {
        top: 4%;
    }
}

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

    #psi2 {
        top: 11%;
        margin-left: 38vmin;
    }

    #hi2 {
        font-size: 14px;
    }

    #pi2 {
        font-size: 13px;
        left: -17%;
    }
}

/* ----------------------------------------IMAGE-3----------------------------------- */

#psi3 {
    position: relative;
    width: 29.8vmax;
    height: 15.8vmax;
    top: 6%;
    margin-left: 65%;
    z-index: 3;
}

#pi3 {
    position: absolute;
    color: #988e9f;
    display: inline-block;
    font-family: 'Roboto Mono', monospace;
    text-shadow: 20px 10px 20px #1a1527, 0 0 0.10em #1a1527, 0 0 0.1em #1a1527;
    font-size: 1.5vw;
    margin-top: 4%;
    right: 105%;
}

#hi3 {
    position: relative;
    color: white;
    display: inline-block;
    text-shadow: 20px 10px 20px #1a1527, 0 0 0.10em #1a1527, 0 0 0.1em #1a1527;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 2.2vw;
    font-weight: 500;
    margin-top: 15%;
    right: 20%;
    text-underline-offset: 0.35em;
}


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

    #psi3 {
        top: 12%;
        margin-left: 20vmin;
    }

    #hi3 {
        font-size: 14px;
    }

    #pi3 {
        font-size: 13px;
    }
}

/* ----------------------------------------IMAGE-4----------------------------------- */

#psi4 {
    position: relative;
    width: 18.75vmax;
    height: 14.4vmax;
    top: -6%;
    left: 60px;
    z-index: 3;
}

#pi4 {
    position: relative;
    color: #988e9f;
    display: inline-block;
    font-family: 'Roboto Mono', monospace;
    text-shadow: 20px 10px 20px #1a1527, 0 0 0.10em #1a1527, 0 0 0.1em #1a1527;
    font-size: 1.5vw;
    margin-top: 60%;
    left: -17%;
}

#hi4 {
    position: relative;
    color: white;
    display: inline-block;
    text-shadow: 20px 10px 20px #1a1527, 0 0 0.10em #1a1527, 0 0 0.1em #1a1527;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 28px;
    font-weight: 500;
    top: 8%;
    left: -110px;
    text-underline-offset: 0.35em;
}


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

    #psi4 {
        top: 2%;
    }
}

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

    #psi4 {
        top: 13%;
        margin-left: 20vmin;
    }

    #hi4 {
        font-size: 14px;
    }

    #pi4 {
        font-size: 13px;
        left: -30%;
    }
}



/* ----------------------------------------IMAGE-5----------------------------------- */

#psi5 {
    position: relative;
    width: 25.9vmax;
    height: 15.9vmax;
    top: -9%;
    left: 28%;
    z-index: 3;
}

#pi5 {
    position: relative;
    color: #988e9f;
    display: inline-block;
    font-family: 'Roboto Mono', monospace;
    text-shadow: 20px 10px 20px #1a1527, 0 0 0.10em #1a1527, 0 0 0.1em #1a1527;
    font-size: 1.5vw;
    margin-top: 50%;
    left: -13%;
}

#hi5 {
    position: relative;
    color: white;
    display: inline-block;
    text-shadow: 20px 10px 20px #1a1527, 0 0 0.10em #1a1527, 0 0 0.1em #1a1527;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 28px;
    font-weight: 500;
    top: 8%;
    left: -110px;
    text-underline-offset: 0.35em;
}

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

    #psi5 {
        top: -2%;
        left: 32%;
    }
}

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

    #psi5 {
        top: 14%;
        margin-left: -12vmin;
    }

    #hi5 {
        font-size: 14px;
    }

    #pi5 {
        font-size: 13px;
        left: -20%;
    }
}

/* ----------------------------------------IMAGE-6----------------------------------- */

#psi6 {
    position: relative;
    width: 30vmax;
    height: 13.4vmax;
    top: -5%;
    left: 4%;
    z-index: 3;
}

#pi6 {
    position: absolute;
    color: #988e9f;
    display: inline-block;
    font-family: 'Roboto Mono', monospace;
    text-shadow: 20px 10px 20px #1a1527, 0 0 0.10em #1a1527, 0 0 0.1em #1a1527;
    font-size: 1.5vw;
    margin-top: 4%;
    left: 105%;
}

#hi6 {
    position: relative;
    color: white;
    display: inline-block;
    text-shadow: 20px 10px 20px #1a1527, 0 0 0.10em #1a1527, 0 0 0.1em #1a1527;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 2.2vw;
    font-weight: 500;
    margin-top: 15%;
    left: 70%;
    text-underline-offset: 0.35em;
}

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

    #psi6 {
        top: -1%;
        /* left: 32%; */
    }
}


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

    #psi6 {
        top: 15%;
        margin-left: 1vmin;
    }

    #hi6 {
        font-size: 14px;
    }

    #pi6 {
        font-size: 13px;
        left: 105%;
    }
}

/* ----------------------------------------IMAGE-7----------------------------------- */

#psi7 {
    position: relative;
    width: 29.6vmax;
    height: 15.2vmax;
    top: -12%;
    left: 52%;
    z-index: 3;
}

#pi7 {
    position: absolute;
    color: #988e9f;
    display: inline-block;
    font-family: 'Roboto Mono', monospace;
    text-shadow: 20px 10px 20px #1a1527, 0 0 0.10em #1a1527, 0 0 0.1em #1a1527;
    font-size: 1.5vw;
    margin-top: 4%;
    left: 105%;
}

#hi7 {
    position: relative;
    color: white;
    display: inline-block;
    text-shadow: 20px 10px 20px #1a1527, 0 0 0.10em #1a1527, 0 0 0.1em #1a1527;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 2.2vw;
    font-weight: 500;
    margin-top: 15%;
    left: 70%;
    text-underline-offset: 0.35em;
}

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

    #psi7 {
        top: -4%;
        /* left: 32%; */
    }
}

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

    #psi7 {
        top: -2.5%;
    }
}

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

    #psi7 {
        top: 16%;
        left: 8vmin;
    }

    #hi7 {
        font-size: 14px;
    }

    #pi7 {
        font-size: 13px;
        left: 105%;
    }
}

/* ************************************** WEB ******************************************* */

/* ----------------------------------------IMAGE-8----------------------------------- */

#psi8 {
    position: relative;
    width: 34.7vmax;
    height: 16.5vmax;
    top: -4.5%;
    right: -50%;
    z-index: 3;
}

#pi8 {
    position: absolute;
    color: #988e9f;
    display: inline-block;
    font-family: 'Roboto Mono', monospace;
    text-shadow: 20px 10px 20px #1a1527, 0 0 0.10em #1a1527, 0 0 0.1em #1a1527;
    font-size: 1.5vw;
    margin-top: 4%;
    left: 105%;
}

#hi8 {
    position: relative;
    color: white;
    display: inline-block;
    text-shadow: 20px 10px 20px #1a1527, 0 0 0.10em #1a1527, 0 0 0.1em #1a1527;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 2.2vw;
    font-weight: 500;
    margin-top: 15%;
    left: 70%;
    text-underline-offset: 0.35em;
}

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

    #psi8 {
        top: 0%;
        /* left: 32%; */
    }
}

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

    #psi8 {
        margin-top: 10%;
    }
}

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

    #psi8 {
        margin-top: 80vmax;
        left: 7vmin;
    }

    #hi8 {
        font-size: 14px;
        left: 60%;
    }

    #pi8 {
        font-size: 13px;
        left: 105%;
    }
}

/* ----------------------------------------IMAGE-9----------------------------------- */

#psi9 {
    position: relative;
    width: 30.6vmax;
    height: 20.3vmax;
    top: -5%;
    left: 7%;
    z-index: 3;
}

#pi9 {
    position: relative;
    color: #988e9f;
    display: inline-block;
    font-family: 'Roboto Mono', monospace;
    text-shadow: 20px 10px 20px #1a1527, 0 0 0.10em #1a1527, 0 0 0.1em #1a1527;
    font-size: 1.5vw;
    margin-top: 50%;
    left: 105%;
}

#hi9 {
    position: relative;
    color: white;
    display: inline-block;
    text-shadow: 20px 10px 20px #1a1527, 0 0 0.10em #1a1527, 0 0 0.1em #1a1527;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 28px;
    font-weight: 500;
    top: 8%;
    left: -110px;
    text-underline-offset: 0.35em;
}

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

    #psi9 {
        top: -3%;
    }
}

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

    #psi8 {
        top: -3%;
    }
}

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

    #psi9 {
        top: -1.5%;
        left: 19vmin;
    }

    #hi9 {
        font-size: 14px;
    }

    #pi9 {
        font-size: 13px;
        /* left: 80%; */
    }
}

/* ----------------------------------------IMAGE-10----------------------------------- */

#psi10 {
    position: relative;
    width: 30.9vmax;
    height: 17.4vmax;
    top: -9%;
    left: 60%;
    z-index: 3;
}

#pi10 {
    position: absolute;
    color: #988e9f;
    display: inline-block;
    font-family: 'Roboto Mono', monospace;
    text-shadow: 20px 10px 20px #1a1527, 0 0 0.10em #1a1527, 0 0 0.1em #1a1527;
    font-size: 1.5vw;
    margin-top: 4%;
    right: 105%;
}

#hi10 {
    position: relative;
    color: white;
    display: inline-block;
    text-shadow: 20px 10px 20px #1a1527, 0 0 0.10em #1a1527, 0 0 0.1em #1a1527;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 2.2vw;
    font-weight: 500;
    margin-top: 15%;
    right: 20%;
    text-underline-offset: 0.35em;
}

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

    #psi10 {
        top: -4%;
    }
}

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

    #psi10 {
        top: 0%;
        left: 20%;
    }

    #hi10 {
        font-size: 14px;
    }

    #pi10 {
        font-size: 13px;
    }
}


/* ----------------------------------------IMAGE-11----------------------------------- */

#psi11 {
    position: relative;
    width: 34.5vmax;
    height: 18.1vmax;
    top: -9%;
    left: 14%;
    z-index: 3;
}

#pi11 {
    position: absolute;
    color: #988e9f;
    display: inline-block;
    font-family: 'Roboto Mono', monospace;
    text-shadow: 20px 10px 20px #1a1527, 0 0 0.10em #1a1527, 0 0 0.1em #1a1527;
    font-size: 1.5vw;
    margin-top: 4%;
    right: 105%;
}

#hi11 {
    position: relative;
    color: white;
    display: inline-block;
    text-shadow: 20px 10px 20px #1a1527, 0 0 0.10em #1a1527, 0 0 0.1em #1a1527;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 2.2vw;
    font-weight: 500;
    margin-top: 15%;
    right: 28%;
    text-underline-offset: 0.35em;
}


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

    #psi11 {
        top: -5%;
    }
}

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

    #psi11 {
        top: 1%;
        left: 22%;
    }

    #hi11 {
        font-size: 14px;
    }

    #pi11 {
        font-size: 13px;
        /* left: 80%; */
    }
}


/* ----------------------------------------IMAGE-12----------------------------------- */

#psi12 {
    position: relative;
    width: 36.6vmax;
    height: 19.9vmax;
    top: -13%;
    left: 59%;
    z-index: 3;
}

#pi12 {
    position: absolute;
    color: #988e9f;
    display: inline-block;
    font-family: 'Roboto Mono', monospace;
    text-shadow: 20px 10px 20px #1a1527, 0 0 0.10em #1a1527, 0 0 0.1em #1a1527;
    font-size: 1.5vw;
    margin-top: 20%;
    right: 104%;
}

#hi12 {
    position: relative;
    color: white;
    display: inline-block;
    text-shadow: 20px 10px 20px #1a1527, 0 0 0.10em #1a1527, 0 0 0.1em #1a1527;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 2.2vw;
    font-weight: 500;
    margin-top: 15%;
    right: 20%;
    text-underline-offset: 0.35em;
}

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

    #psi12 {
        top: -8%;
    }
}

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

    #psi12 {
        top: -6%;
    }
}

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

    #psi12 {
        top: 2%;
        left: 15%;
    }

    #hi12 {
        font-size: 14px;
    }

    #pi12 {
        font-size: 13px;
    }
}