:root {
    --BG: linear-gradient(180deg,#202020,#000);
    --black: #000000;
    --darkGrey: #202020;
    --greyClaro: #949494;
    --blueMarino: #040014;
    --purple1: #4a48b3;
    --purpleClaro: #6b54bd;
    --white: #fff;
    --nfColor: #8f8f8f;
    --pi: 3.14159265359;
    --a1: 60;
    --a2: 25;
    --a3: 10;
    --a4: 5;
}

body {
    margin: 0%;
    padding: 0;
    background-image: var(--BG);
    background-size: cover;
    background-repeat: no-repeat;
    color: var(--greyClaro);
    font-family: sans-serif;
    overflow-x: hidden;
    height: 100%;
    min-height: 100vh;
    width: 100vw;
    min-width: 100vw;
}

/*------------------------------------- COMÚN*/
/*------------------------------------- COMÚN*/

.p {
    color: #7a7a7a;
    line-height: 34px;
    line-height: 23px;
}

/*------- contenedor de info*/
/*------- contenedor de info*/

.bcg {
    width: 100vw;
    min-width: 100vw;
    position: fixed;
    top: 40px;
    z-index: 7;
    background-color: var(--black);
}

.bcg-whole {
    margin-left: 10vw;
}

.sup {
    display: flex;
    flex-direction: row;
    margin-bottom: 1%;
}

.titulo-portfolio {
    color: var(--white);
    font-size: 25px;
    margin-right: 2%;
    margin-bottom: 0%;
}

.sub-portfolio {
    color: var(--purpleClaro);
    font-size: 25px;
    margin-bottom: 0%;
    animation: Parpadeo 1.7s infinite;
} @keyframes Parpadeo {
    0% {
        color: var(--purpleClaro);
    }
    7% {
        background: linear-gradient(90deg,var(--purpleClaro),#111111,#111111,#111111,#111111,#111111);
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    17% {
        background: linear-gradient(90deg,var(--purpleClaro),var(--purpleClaro),#111111,#111111,#111111,#111111);
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    30% {
        background: linear-gradient(90deg,var(--purpleClaro),var(--purpleClaro),var(--purpleClaro),#111111,#111111,#111111);
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    50% {
        background: linear-gradient(90deg,var(--purpleClaro),var(--purpleClaro),var(--purpleClaro),var(--purpleClaro),#111111,#111111);
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    77% {
        background: linear-gradient(90deg,var(--purpleClaro),var(--purpleClaro),var(--purpleClaro),var(--purpleClaro),var(--purpleClaro),#111111);
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    87% {
        background: linear-gradient(90deg,var(--purpleClaro),var(--purpleClaro),var(--purpleClaro),var(--purpleClaro),var(--purpleClaro),var(--purpleClaro));
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    100% {
        background: linear-gradient(90deg,var(--purpleClaro),var(--purpleClaro),var(--purpleClaro),var(--purpleClaro),var(--purpleClaro),var(--purpleClaro));
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.contenedor-explain {
    width: 60%;
    margin-left: 3vw;
    margin-bottom: 5%;
}

.date {
    color: #474747;
}

.contenedorWhole {
    width: 100vw;
    margin-top: 10vh;
}

/*------- tarjetas*/
/*------- tarjetas*/

.contenedor-tarjetas {
    margin-top: 7%;
    display: flex;
    flex-direction: row;
    width: 80vw;
    max-width: 80vw;
    margin-left: 10vw;
    margin-bottom: 10vh;
}

.cont-texto {
    width: 100%;
    background-color: none;
    color: #b9b9b9;
    padding-bottom: 7px;
    margin-top: 0%;
}

.text {
    margin-top: 0%;
    font-size: 20px;
}

/*------- páginas proyectos*/
/*------- páginas proyectos*/

.contenedor-portfolio {
    margin-top: 30vh;
    width: 80vw;
    max-width: 80vw;
    margin-left: 15vw;
}

.illustration-portfolio {
    width: 70vw;
    max-width: 70vw;
    margin-bottom: 5vh;
    border-radius: 7px;
}

.wholeDataPort {
    margin-top: 10vh;
    width: 80vw;
    max-width: 80vw;
    margin-left: 10vw;
}

.contCont {
    width:90%;
}

.parrAnRes {
    margin-top: 4%;
    line-height: 23px;
}

.imgDatPort {
    max-width: 70vw;
    margin: 4% 0 4% 0;
}

.aq {
    color: var(--purpleClaro);
}

/*------- botones*/
/*------- botones*/

.more {
    padding: 10px 395px;
    background-color:  #3f2891 /*#151469*/;
    color: #ffffff;
    text-decoration: none;
    margin-left: 15%;
    border: none;
    border-radius: 7px;
    cursor: pointer;
}

/*----------------------------------- NAV ------------------------------------*/
/*----------------------------------- NAV ------------------------------------*/

nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 7;
    width: 100vw;
    min-width: 100vw;
    background-color: var(--darkGrey);
    height: 40px;
    display: flex;
}

.nav-contenedor {
    margin-top: 1.4vh;
    margin-left: 20vw;
}

.nav {
    text-decoration: none;
    color: var(--nfColor);
    margin: 7px;
}

.nav0 {
    text-decoration: none;
    color: var(--white);
    margin: 7px;
}

.dropy {
    visibility: hidden;
}

.drop {
    visibility: hidden;
}

#drop {
    visibility: hidden;
}

.menu-img {
    width: 20px;
}

.language {
    background-color: #3c3a9c;
    color: var(--white);
    padding: 7px 10px;
    border-radius: 7px;
}

.menu {
    color: #7a7a7a;
    margin-right: 2px;
    margin-top: -4%;
}

/*----------------------------------- FOOTER ------------------------------------*/
/*----------------------------------- FOOTER ------------------------------------*/

footer {
    width: 100vw;
    height: 7vh;
    text-align: center;
    margin-top: 10%;
    color: var(--nfColor);
    background-color: var(--black);
}

.foooter {
    position: absolute;
    bottom: 0;
}

/*----------------------------------- HOME ------------------------------------*/
/*----------------------------------- HOME ------------------------------------*/
/*----------------------------------- HOME ------------------------------------*/
/*----------------------------------- HOME ------------------------------------*/
/*----------------------------------- HOME ------------------------------------*/
/*----------------------------------- HOME ------------------------------------*/
/*----------------------------------- HOME ------------------------------------*/

.fbg {
    width: 80vw;
    min-width: 80vw;
    max-width: 80vw;
    height: 90vh;
    max-height: 100vh;
    min-height: 100vh;
    position: fixed;
    z-index: 0;
    margin: 15vh 0 0 10vw;
}

.contenedor-home {
    width: 100%;
    display: flex;
    flex-direction: row;
    position: relative;
    z-index: 1;
}

/*------- HEAD*/
/*------- HEAD*/

.contenedor-head {
    position: relative;
}

#container {
    margin: 0 7% 0 15%;
    perspective: 1000px;
}

.apegs {
    height: 200px;
    width: 200px;
    position: relative;
    transform-style: preserve-3d;
    animation: rotate 7s linear infinite;
}@keyframes rotate {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
}

#face {
    position: absolute;
    height: 200px;
    width: 200px;
    opacity: 0.9;
    background: #000000;
}

.s1 {
    transform: translateZ(100px);
}

.eyes {
    margin-top: 40px;
    margin-left: 30px;
    background-color: #151469;
    width: 70%;
    height: 30px;
    border-radius: 25px;
    animation: Eyes 1s infinite;
}@keyframes Eyes {
    from {
        background-color: #2826bd/*#151469*/;
    }
    to {
        background-color: #07063d;
    }
}

.s2 {
    transform: rotateY(90deg)
    translateZ(100px);
}

.s3 {
    transform: rotateY(180deg)
    translateZ(100px);
}

.s4 {
    transform: rotateX(90deg)
    translateZ(100px);
}

.s5 {
    transform: rotateY(-90deg)
    translateZ(100px);
}

.s6 {
    transform: rotateX(-90deg) rotate(180deg)
    translateZ(100px);
}


.namePro {
    width: 70%;
    display: flex;
    flex-direction: column;
}

.title-home {
    margin: 7% 0 0 10%;
    font-size: 77px;
    font-weight: bold;
    animation: Title 7s infinite;
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -ms-background-clip:text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    -ms-text-fill-color: transparent;
    -o-text-fill-color: transparent;
    color: var(--greyClaro);
}@keyframes Title {
    0% {
        background-color: var(--greyClaro);
        background-clip: text; -webkit-background-clip: text;-moz-background-clip: text;-ms-background-clip:text;-moz-background-clip: text;
        -webkit-text-fill-color: transparent;-moz-text-fill-color: transparent;-ms-text-fill-color: transparent;-o-text-fill-color: transparent;
    }
    7% {
        background-color: var(--greyClaro);
        background-clip: text; -webkit-background-clip: text;-moz-background-clip: text;-ms-background-clip:text;-moz-background-clip: text;
        -webkit-text-fill-color: transparent;-moz-text-fill-color: transparent;-ms-text-fill-color: transparent;-o-text-fill-color: transparent;
    }
    13% {
        background: linear-gradient(90deg,#2826bd,var(--greyClaro),var(--greyClaro),var(--greyClaro),var(--greyClaro),var(--greyClaro));
        background-clip: text; -webkit-background-clip: text;-moz-background-clip: text;-ms-background-clip:text;-moz-background-clip: text;
        -webkit-text-fill-color: transparent;-moz-text-fill-color: transparent;-ms-text-fill-color: transparent;-o-text-fill-color: transparent;
    }
    14% {
        background-color: var(--greyClaro);
        background-clip: text; -webkit-background-clip: text;-moz-background-clip: text;-ms-background-clip:text;-moz-background-clip: text;
        -webkit-text-fill-color: transparent;-moz-text-fill-color: transparent;-ms-text-fill-color: transparent;-o-text-fill-color: transparent;
    }
    100%{
        background-color: var(--greyClaro);
        background-clip: text; -webkit-background-clip: text;-moz-background-clip: text;-ms-background-clip:text;-moz-background-clip: text;
        -webkit-text-fill-color: transparent;-moz-text-fill-color: transparent;-ms-text-fill-color: transparent;-o-text-fill-color: transparent;
    }
}

.sub-title {
    font-size: 35px;
    font-weight: 500;
    margin-left: 10%;
    width: 100%;
    margin-top: 0;
    animation: SubTitle 7s infinite;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    -ms-text-fill-color: transparent;
    -o-text-fill-color: transparent;
    color: #8f8f8f;
}@keyframes SubTitle {
    0% {
        background-color: var(--greyClaro);
        background-clip: text; -webkit-background-clip: text;-moz-background-clip: text;-ms-background-clip:text;-moz-background-clip: text;
        -webkit-text-fill-color: transparent;-moz-text-fill-color: transparent;-ms-text-fill-color: transparent;-o-text-fill-color: transparent;
    }
    7% {
        background-color: var(--greyClaro);
        background-clip: text; -webkit-background-clip: text;-moz-background-clip: text;-ms-background-clip:text;-moz-background-clip: text;
        -webkit-text-fill-color: transparent;-moz-text-fill-color: transparent;-ms-text-fill-color: transparent;-o-text-fill-color: transparent;
    }
    13% {
        background: linear-gradient(90deg,#2826bd,var(--greyClaro),var(--greyClaro),var(--greyClaro),var(--greyClaro),var(--greyClaro));
        background-clip: text; -webkit-background-clip: text;-moz-background-clip: text;-ms-background-clip:text;-moz-background-clip: text;
        -webkit-text-fill-color: transparent;-moz-text-fill-color: transparent;-ms-text-fill-color: transparent;-o-text-fill-color: transparent;
    }
    14% {
        background-color: var(--greyClaro);
        background-clip: text; -webkit-background-clip: text;-moz-background-clip: text;-ms-background-clip:text;-moz-background-clip: text;
        -webkit-text-fill-color: transparent;-moz-text-fill-color: transparent;-ms-text-fill-color: transparent;-o-text-fill-color: transparent;
    }
    100%{
        background-color: var(--greyClaro);
        background-clip: text; -webkit-background-clip: text;-moz-background-clip: text;-ms-background-clip:text;-moz-background-clip: text;
        -webkit-text-fill-color: transparent;-moz-text-fill-color: transparent;-ms-text-fill-color: transparent;-o-text-fill-color: transparent;
    }
}

.contenedor-present {
    width: 40vw;
    margin-left: 10%;
}

.b {
    color: #534b9c;
}

.texto-home-info {
    color: #8d8d8d;
    line-height: 25px;
    margin-top: 10%;
    font-size: 20px;
    margin-bottom: 10%;
}

.meBTN {
    color: #8d8d8d;
    background-color: transparent;
    text-decoration: none;
    padding: 12px 30px;
    border: #8d8d8d solid 2px;
    border-radius: 7px;
    cursor: pointer;
}

.meBTN:hover {
    color: var(--white);
    border: #3c3a9c solid 2px;
}

/*------- SECOND PART*/
/*------- SECOND PART*/
/*------- SECOND PART*/
/*------- SECOND PART*/

.firstbg {
    background-color: var(--black);
    padding-bottom: 4%;
    width: 100vw;
    position: relative;
    top: 100vh;
    z-index: 4;
    margin-bottom: 10%;
}

.sk {
    font-size: 40px;
    position:relative;
    top: 40px;
    left: 7vw;
}

.choose {
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    animation: brillo 1s infinite;
    color: #2c2c2c;
}

.toolWhole {
    display: flex;
    flex-direction: row;
    width: 80vw;
    max-width: 80vw;
    margin-left: 10vw;
}

.totTool {
    margin-top: 7%;
    width: 97%;
}

.contTool {
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-left: 4%;
}

.herr {
    width: 25%;
    height: 200px;
    border-radius: 7px;
    margin: 3%;
    overflow: hidden;
    cursor: pointer;
    border: none;
}

.herr:hover {
    box-shadow: var(--white)81 0px 0px 0.25em,var(--white)81 0px 0.25em 1em;
    animation: forwards;
}

.herr.u {
    animation: Uno 10s infinite;
    background-image: url(image/appsLogos.png);
    background-size: cover;
    background-position: center;
}

.herr.d {
    animation: Dos 7s infinite;
    background-image: url(image/appsLogos1.png);
    background-size: cover;
    background-position: center;
}

.herr.t {
    animation: Tres 10s infinite;
    background-image: url(image/appsLogos2.png);
    background-size: cover;
    background-position: center;
}

.herr.c {
    animation: Cuatro 10s infinite;
    background-image: url(image/appsLogos3.png);
    background-size: cover;
    background-position: center;
}

.herr.ci {
    animation: Cinco 10s infinite;
    background-image: url(image/appsLogos4.png);
    background-size: cover;
    background-position: center;
}

.herr.s {
    animation: Seis 10s infinite;
    background-image: url(image/appsLogos5.png);
    background-size: cover;
    background-position: center;
}

.herr.si {
    animation: Siete 10s infinite;
    background-image: url(image/appsLogos6.png);
    background-size: cover;
    background-position: center;
}

.herr.o {
    animation: Ocho 10s infinite;
    background-image: url(image/appsLogos7.png);
    background-size: cover;
    background-position: center;
}

.herr.n {
    animation: Ocho 10s infinite;
    background-image: url(image/appsLogos9.png);
    background-size: cover;
    background-position: center;
}

.herr.di {
    animation: Ocho 10s infinite;
    background-image: url(image/appsLogos10.png);
    background-size: cover;
    background-position: center;
}

.herr.onc {
    animation: Ocho 10s infinite;
    background-image: url(image/appsLogos11.png);
    background-size: cover;
    background-position: center;
}

.toolInfCont {
    margin-top: 8%;
    border: #202020 2px solid;
    border-radius: 7px;
    width: 0%;
}

.displayN {
    display: none;
}

.closeBtn {
    border: none;
    background-color: var(--purple1);
    color: var(--white);
    border-radius: 7px;
    padding: 0px 20px;
    font-size: 50px;
    cursor: pointer;
    position: relative;
    top: 0;
    right: -87%;
}

.eachTool {margin-left: 4%;}

.hid {
    display: none;
}

.toolTitle {
    color: var(--white);
    font-size: 20px;
}

.subsub {
    color: var(--purple1);
}

.moreTimeBtn {
    background-color: transparent;
    font-size: 20px;
    color: var(--white);
    text-decoration: none;
    width: 185px;
    height: 40px;
    cursor: pointer;
    margin-left: 4%;
}

.rowGraph {
    display: flex;
    flex-direction: row;
    margin: 7%;
}

.circle {
    position: relative;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 4% 0 4% 15%;
}

.circle:before {
    content: "";
    position:absolute;
    width: 84%;
    height: 84%;
    background-color: #000;
    border-radius: 50%;
}

.perValue {
    position: relative;
    font-size: 40px;
    color: #ffffff;
}

.moreAnBtn {
    background-color: transparent;
    font-size: 20px;
    color: #ffffff;
    text-decoration: none;
    width: 185px;
    height: 40px;
    cursor: pointer;
    margin: 15% 0 0 15%;
    border: none;
}

/*-----------------------------------  TIMELINE  ------------------------------------*/
/*-----------------------------------  TIMELINE  ------------------------------------*/
/*-----------------------------------  TIMELINE  ------------------------------------*/
/*-----------------------------------  TIMELINE  ------------------------------------*/
/*-----------------------------------  TIMELINE  ------------------------------------*/
/*-----------------------------------  TIMELINE  ------------------------------------*/
/*-----------------------------------  TIMELINE  ------------------------------------*/

.firstTimeline {
    margin: 10% 10% 0 0%;
}

.line {
    width: 70vw;
    height: 15vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-left: 10vw;
}

.backg {
    background-image: linear-gradient(90deg, #3c3a9c, #3c3a9c, #121233,#121233,  #121233, #121233, #121233, #121233, #121233, #121233, #121233, #121233, #121233);
}

.backgU {
    background-image: linear-gradient(90deg, #121233,#121233, #3c3a9c,#3c3a9c,#121233, #121233, #121233, #121233, #121233, #121233, #121233, #121233, #121233, #121233);
}

.backgD {
    background-image: linear-gradient(90deg, #121233,#121233, #121233, #121233, #121233, #3c3a9c, #3c3a9c,#3c3a9c, #121233, #121233, #121233, #121233, #121233, #121233, #121233, #121233, #121233);
}

.backgT {
    background-image: linear-gradient(90deg, #121233,#121233, #121233, #121233, #121233, #121233, #121233, #121233, #3c3a9c,#3c3a9c, #121233, #121233, #121233, #121233);
}

.backgC {
    background-image: linear-gradient(90deg, #121233,#121233, #121233, #121233, #121233, #121233, #121233, #121233, #121233, #121233, #3c3a9c,#3c3a9c, #121233, #121233);
}

.circleTime {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #121233;
    color: #ffffff;
    position: relative;
    top: 17%;
    border: none;
    cursor: pointer;
}

.chosenDate {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #3c3a9c;
    color: #ffffff;
    position: relative;
    top: 17%;
    border: none;
    cursor: pointer;
}

/*------- history panel*/
/*------- history panel*/

.timeStoryCont {
    width: 70vw;
    background-color: #000000; /*#0e0e1f; #0f1e27*/
    border-radius: 1%;
    margin: 23vh 0 0 15vw;
}

.contenidoCont {
    padding-top: 7px;
    padding-bottom: 5%;
    margin-left: 7%;
    width: 77%;
}

.yrsTimeTitle {
    text-align: center;
    font-size: 70px;
    font-weight: 700;
    color: #3c3a9c; /*#283c49*/
}

.aMarca {
    color: #fff;
    text-decoration: none;
    background-color: #3c3a9c;
    border-radius: 4px;
    padding: 10px 30px;
    height: 20px;
    margin-top: 19%;
    margin-left: 23%;
    border: none;
}

.mesLine {
    display: flex;
    flex-direction: row;
}

.mes {
    font-size: 25px;
    color: #ffffff;
}

.hrMes {
    width: 700px;
    height: 2px;
    background-color: #3c3a9c;
    border: none;
    margin: 5.4% 0% 0% 2%;
}

.imgTime {
    width: 40%;
}

.titleTime {
    font-size: 40px;
}

.oculto, .ocultoU, .ocultoD,
.ocultoT, .ocultoC, .ocultoCi {
    display: none;
}

.contLastBTN {
    margin-top: 10%;
}

.detailBTN {
    color: #ffffff;
    margin-left: 0%;
    border: #3c3a9c solid 2px;
    text-decoration: none;
    padding: 7px 320px;
    border-radius: 7px;
    cursor: pointer;
}

/*---------------------------------------------- CLASES ----------------------------------------------*/
/*---------------------------------------------- CLASES ----------------------------------------------*/
/*---------------------------------------------- CLASES ----------------------------------------------*/
/*---------------------------------------------- CLASES ----------------------------------------------*/
/*---------------------------------------------- CLASES ----------------------------------------------*/
/*---------------------------------------------- CLASES ----------------------------------------------*/
/*---------------------------------------------- CLASES ----------------------------------------------*/

.compl {
    margin-bottom: 27%;
}

.choose-proyecto {
    text-decoration: none;
    width: 23%;
    margin: 0 7px;
    background-color: transparent;
    padding: 2%;
    box-shadow: 0px 7px 18px #3c3a9c4d;
    border-radius: 7px;
}

.proyecto-uno {
    text-align: center;
}

.portad {
    width: 90%;
    margin-bottom: 0%;
    border-radius: 7px;
}

.resBlock {
    display: none;
}

/*---------------------------------------------- CLASE ----------------------------------------------*/
/*---------------------------------------------- CLASE ----------------------------------------------*/
/*---------------------------------------------- CLASE ----------------------------------------------*/
/*---------------------------------------------- CLASE ----------------------------------------------*/
/*---------------------------------------------- CLASE ----------------------------------------------*/
/*---------------------------------------------- CLASE ----------------------------------------------*/
/*---------------------------------------------- CLASE ----------------------------------------------*/

.cl-h1 {
    margin-top: 18vh;
}

.cl-par {
    width: 70vw;
    line-height: 25px;
}

.titulo-vario {
    margin-top: 7vh;
    font-size: 25px;
}

.exHolder {
    background-color: rgb(27, 27, 27);
    width: 70%;
}

.ex-cl-par {margin-left: 4%; width: 90%;}
.exItalic {color: rgb(190, 190, 190);}

/*-------------------------------------------- DATA ----------------------------------------*/
/*-------------------------------------------- DATA ----------------------------------------*/
/*-------------------------------------------- DATA ----------------------------------------*/
/*-------------------------------------------- DATA ----------------------------------------*/
/*-------------------------------------------- DATA ----------------------------------------*/
/*-------------------------------------------- DATA ----------------------------------------*/
/*-------------------------------------------- DATA ----------------------------------------*/

.contenedor-images {
    width: 80vw;
    margin-top: 30vh;
    margin-left: 10vw;
}

.expPar {
    width: 80%;
    line-height: 20px;
}

/* .exp {
    margin-top: 4%;
} */

.dataTitlePres {
    margin: 7% 0 0 0%;
    font-size: 40px;
    color: #474747;
}

.analisisCont {
    /* height: 170px; */
    width: 70%;
    /* background-color: #dadada; */
}

.analysisProyCont {
    display: flex;
    flex-direction: row;
    margin-top: 7%;
    width: 100%;
}

.analisis {
    background-color: #3c3a9c;
    background-size: cover;
    width: 40%;
    height: 250px;
    border-radius: 4%;
    margin: 2%;
    cursor: pointer;
    text-decoration: none;
    color: transparent;
    font-size: 20px;
    text-align: center;
    color: #ffffff
}

.resInCards {
    /* display: grid;
    justify-content: center; */
    /* background-color: #3c3a9c; */
    margin: 4%;
}

.imgInCards {
    width: 90%;
    border-radius: 7px;
}

/* .telPic {background-image: url(image/telPic.jpg);} */
/* 
.telPic:hover {
    filter: drop-shadow(0 0 0.75rem #3c3a9c);
    color: #ffffff;
    transition: ease-in-out .7s;
} */

/*-------------------------------------------- ANÁLISIS ----------------------------------------*/
/*-------------------------------------------- ANÁLISIS ----------------------------------------*/
/*-------------------------------------------- ANÁLISIS ----------------------------------------*/
/*-------------------------------------------- ANÁLISIS ----------------------------------------*/
/*-------------------------------------------- ANÁLISIS ----------------------------------------*/
/*-------------------------------------------- ANÁLISIS ----------------------------------------*/
/*-------------------------------------------- ANÁLISIS ----------------------------------------*/



/*-------------------------------------------- ILLUSTRATION ----------------------------------------*/
/*-------------------------------------------- ILLUSTRATION ----------------------------------------*/
/*-------------------------------------------- ILLUSTRATION ----------------------------------------*/
/*-------------------------------------------- ILLUSTRATION ----------------------------------------*/
/*-------------------------------------------- ILLUSTRATION ----------------------------------------*/
/*-------------------------------------------- ILLUSTRATION ----------------------------------------*/
/*-------------------------------------------- ILLUSTRATION ----------------------------------------*/

.choose-proyect {
    text-decoration: none;
    width: 35vw;
    margin: 0 7px;
}

.proyecto-uno {
    width: 100%;
}

.portada {
    width: 90%;
    margin-bottom: 0%;
    border-radius: 7px;
}

/*-------------------------------------------- WEB ----------------------------------------*/
/*-------------------------------------------- WEB ----------------------------------------*/
/*-------------------------------------------- WEB ----------------------------------------*/
/*-------------------------------------------- WEB ----------------------------------------*/
/*-------------------------------------------- WEB ----------------------------------------*/
/*-------------------------------------------- WEB ----------------------------------------*/
/*-------------------------------------------- WEB ----------------------------------------*/

.showY {
    font-size: 35px;
}

.webRow {
    display: flex;
    flex-direction: row;
    width: 70vw;
    margin-bottom: 7%;
    border-bottom: 2px solid #282772;
}

.webIMG {
    width: 40%;
}

.irPrueba {
    background-color: #2a297c;
    padding: 7px 20px;
    text-decoration: none;
    color: #ffffff;
    width: 270px;
    border-radius: 7px;
}

/*-----------------------------------  BRANDS  ------------------------------------*/
/*-----------------------------------  BRANDS  ------------------------------------*/
/*-----------------------------------  BRANDS  ------------------------------------*/
/*-----------------------------------  BRANDS  ------------------------------------*/
/*-----------------------------------  BRANDS  ------------------------------------*/
/*-----------------------------------  BRANDS  ------------------------------------*/
/*-----------------------------------  BRANDS  ------------------------------------*/

.logo-section {
    width: 80vw;
    max-width: 80vw;
    margin-left: 10vw;
    /* margin-bottom: 25%; */
}

.contenedor-info-logos {
    margin-top: 15vh;
    width: 40%;
}

.contenedor-logo {
    margin-top: 7%;
    display: grid;
    grid-template-columns: repeat(4, 250px);
    grid-template-rows: 250px 250px 250px;
    grid-column-gap: 15px;
    grid-row-gap: 40px;
    margin-bottom: 0%;
}

.logos {
    width: 250px;
    background-color: #000000;
}

.brand-section {
    width: 80vw;
    background-color: #000000;
    margin-left: 10vw;
}

.marca {
    color: #dadada;
}

.brand-content {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.title-place {
    display: flex;
    flex-direction: row;
    margin-left: 2%;
}

.gris {
    color: #525252;
    margin-left: 4%;
}

.brand {
    text-decoration: none;
    background-color: #000000;
    border: 1px #525252 solid;
    color: #ffffff;
    width: 40%;
    margin: 10px;
    padding: 7px;
    border-radius: 3px;
}

.text {
    margin-bottom: 4%;
}

.imagenes {
    width: 100%;
}

/*-------------------------------------------- VIDEO ----------------------------------------*/
/*-------------------------------------------- VIDEO ----------------------------------------*/
/*-------------------------------------------- VIDEO ----------------------------------------*/
/*-------------------------------------------- VIDEO ----------------------------------------*/
/*-------------------------------------------- VIDEO ----------------------------------------*/
/*-------------------------------------------- VIDEO ----------------------------------------*/
/*-------------------------------------------- VIDEO ----------------------------------------*/

.veds{width: 70vw;}

.edsHolr {width: 80vw;max-width: 80vw;margin-left:10vw;display: flex;flex-direction: row;justify-content: space-around;}

.sShape{width: 30%;height: 100%;}

.vieds{width: 100%;}

/*-------------------------------------------- CONTACT ----------------------------------------*/
/*-------------------------------------------- CONTACT ----------------------------------------*/
/*-------------------------------------------- CONTACT ----------------------------------------*/
/*-------------------------------------------- CONTACT ----------------------------------------*/
/*-------------------------------------------- CONTACT ----------------------------------------*/
/*-------------------------------------------- CONTACT ----------------------------------------*/
/*-------------------------------------------- CONTACT ----------------------------------------*/

.phoneCircle {
    background-color: #000000;
    width: 70vw;
    max-width: 70vw;
    position: relative;
    top: 15vh;
    left: 15%;
}

.contact-cont {
    width: 100%;
    margin-left: 4%;
    display: flex;
    flex-direction: row;
    margin-bottom: 20%;
}

.conta-inf-cont {
    width: 50%;
    margin: 0%;
    margin-right: 1%;
}

.contact-titulo {
    margin-left: 0%;
    margin-top: 10%;
    color: #646464;
    font-size: 50px;
    margin-bottom: 0%;
}

.contact-exp {
    margin-top: 1%;
    margin-left: 0%;
    color: #949494;
    margin-bottom: 7%;
}

.conBor {
    border-radius: 7px;
    margin-left: 0%;
    padding: 1% 0 1% 0;
    width: 330px;
    position: relative;
    z-index: 2;
}

.mail {
    margin-left: 2%;
    display: flex;
    flex-direction: row;
    margin-bottom: 2%;
}

.email {
    margin-top: 0%;
    color: #b1b1b1;
}

.purMail {
    color: var(--letraLila);
    margin-left: 4%;
    font-size: 18px;
    margin-top: 0%;
}

.git {
    margin-top: 2%;
    margin-left: 2%;
    display: flex;
    flex-direction: row;
}

.contaLink {
    padding: 10px 75px;
    background-color: #3f2891/*#151469*/;
    color: #ffffff;
    text-decoration: none;
    margin-left: 4%;
    border: none;
    border-radius: 7px;
    cursor: pointer;
}

.telephone-cont {
    width: 45%;
    position: relative;
    background-color: #121233;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
}

.telephone {
    width: 40%;
    margin-top: 2%;
}

/*---------------------------------------------- MEDIA QUERIES ----------------------------------------*/
/*---------------------------------------------- MEDIA QUERIES ----------------------------------------*/
/*---------------------------------------------- MEDIA QUERIES ----------------------------------------*/
/*---------------------------------------------- MEDIA QUERIES ----------------------------------------*/
/*---------------------------------------------- MEDIA QUERIES ----------------------------------------*/
/*---------------------------------------------- MEDIA QUERIES ----------------------------------------*/
/*---------------------------------------------- MEDIA QUERIES ----------------------------------------*/
/*---------------------------------------------- MEDIA QUERIES ----------------------------------------*/
/*---------------------------------------------- MEDIA QUERIES ----------------------------------------*/
/*---------------------------------------------- MEDIA QUERIES ----------------------------------------*/
/*---------------------------------------------- MEDIA QUERIES ----------------------------------------*/
/*---------------------------------------------- MEDIA QUERIES ----------------------------------------*/
/*---------------------------------------------- MEDIA QUERIES ----------------------------------------*/
/*---------------------------------------------- MEDIA QUERIES ----------------------------------------*/

@media (max-width: 900px){
    body {width: 100vw;}
    h1{width: 90vw;}
    .bcg {position: fixed;z-index: 5;}
    .sup {display: flex;flex-direction: column;}
    .titulo-portfolio {margin-top: 4%;}
    .sub-portfolio  {margin-top: 1%;font-size: 20px;}
    .date {font-size: 14px;}
    .contenedor-explain {font-size: 15px;margin-left: 0%;width: 90%;padding: 0 8% .1px 2%;}
    .contenedor-images {margin-top: 35vh;}
    .more {margin-left: 2vw;padding: 10px 40vw;}
    .aMarca {margin-left: 10%;font-size: 15px;padding: 10px 10px;}
    /*------- tarjetas*/
    /*------- tarjetas*/
    .contenedor-tarjetas {flex-direction: column;margin-left: 7vw;}
    .choose-proyecto, .choose-proyect{width: 100%;margin-bottom: 10%;}
    /*------- analisis*/
    /*------- analisis*/
    .wholeDataPort{margin-left: 4vw;}
    .parrAnRes{width: 90vw;}
    .imgDatPort {width: 90vw;}
    /*------- ilustraciones, web y marcas*/
    /*------- ilustraciones, web y marcas*/
    .contenedor-portfolio{width: 90vw; max-width: 90vw; margin: 40vh 0 0 7vw;}
    .illustration-portfolio {width: 95%;max-width: 95%;}
    /*------------------------------ nav*/
    /*------------------------------ nav*/
    nav {position: fixed;top: 0;z-index: 7;width: 100vw;font-size: 15px;background-color: #000000;margin: 0%;}
    .nav-contenedor {transform: translateX(200%);transition: all 500ms ease;height: 70vh;max-height: 70vh;}
    .drop {opacity: 100%;position: fixed;top: 15px;left: 40%;z-index: 70;color: #2a297c;visibility: visible;}
    #drop {position: fixed;top: 10px;left: 75%;width: 40px;height:40px;}
    #drop:checked  ~ .nav-contenedor {transform: translateX(-13%);}
    #grupo-nav {display: flex;flex-direction: column;position: relative;top: 30px;}
    .nav {margin: 0%;padding-left: 13px;padding-right: 70vw;}
    .nav0 {margin: 0%;padding-left: 13px;background-color: #111111;}
    #op {padding-top: 4vh;padding-bottom: 2vh;border-bottom: 2px solid #2a297c;background-color: #000000;z-index: 8;}
    .language {background-color: #282772 !important;}
    /*------------------------------ BRANDS*/
    /*------------------------------ BRANDS*/
    .logo-section {width: 90vw;max-width: 90vw;height: 100%;min-height: 100vh;margin: 10vh 0 0 4vw;}
    .contenedor-info-logos, .contenedor-info-brand {width: 100%;}
    .contenedor-info-logos .title, .contenedor-info-brand .title {font-size: 35px;}
    .contenedor-logo {grid-template-columns: repeat(2, 250px);grid-template-rows: 250px 250px 250px 250px;grid-row-gap: 40px;justify-content: center;}
}

/*celulares*/

@media (max-width: 480px){
    body {width: 100vw;max-width: 100vw;min-width: 100vw;}
    h1{width: 90vw;}
    .bcg {position: fixed;z-index: 5;}
    .sup {display: flex;flex-direction: column;}
    .titulo-portfolio {margin-top: 4%;}
    .sub-portfolio  {margin-top: 1%;font-size: 20px;}
    .date {font-size: 14px;}
    .contenedor-explain {font-size: 15px;margin-left: 0%;width: 90%;padding: 0 8% .1px 2%;}
    .contenedor-images {margin-top: 35vh;}
    .more {margin-left: 2vw;padding: 10px 40vw;}
    .aMarca {margin-left: 10%;font-size: 15px;padding: 10px 10px;}
    /*------- tarjetas*/
    /*------- tarjetas*/
    .contenedor-tarjetas {flex-direction: column;margin-left: 7vw;}
    .choose-proyecto, .choose-proyect{width: 100%;margin-bottom: 10%;}
    /*------- analisis*/
    /*------- analisis*/
    .wholeDataPort{margin-left: 4vw;}
    .parrAnRes{width: 90vw;}
    .imgDatPort {width: 90vw;}
    /*------- ilustraciones, web y marcas*/
    /*------- ilustraciones, web y marcas*/
    .contenedor-portfolio{width: 90vw; max-width: 90vw; margin: 40vh 0 0 7vw;}
    .illustration-portfolio {width: 95%;max-width: 95%;}
    /*------------------------------ nav*/
    /*------------------------------ nav*/
    nav {position: fixed;top: 0;z-index: 7;width: 100vw;font-size: 15px;background-color: #000000;margin: 0%;}
    .nav-contenedor {transform: translateX(200%);transition: all 500ms ease;height: 70vh;max-height: 70vh;}
    .drop {opacity: 100%;position: fixed;top: 15px;left: 40%;z-index: 70;color: #2a297c;visibility: visible;}
    #drop {position: fixed;top: 10px;left: 75%;width: 40px;height:40px;}
    #drop:checked  ~ .nav-contenedor {transform: translateX(-13%);}
    #grupo-nav {display: flex;flex-direction: column;position: relative;top: 30px;}
    .nav {margin: 0%;padding-left: 13px;padding-right: 70vw;}
    .nav0 {margin: 0%;padding-left: 13px;background-color: #111111;}
    #op {padding-top: 4vh;padding-bottom: 2vh;border-bottom: 2px solid #2a297c;background-color: #000000;z-index: 8;}
    .language {background-color: #282772 !important;}
    /*------------------------------ HOME*/
    /*------------------------------ HOME*/
    .fbg {width: 90vw;max-width: 90vw;height: 100%;min-height: 100vh;margin: 10vh 0 0 2vw;}
    .contenedor-home {width: 100%;margin: 0%;}
    /*------- head*/
    /*------- head*/
    .contenedor-head {margin-top: 20%; width: 40%;}
    #container {margin: 0 0% 0 7%;perspective: 1000px;}
    .apegs {margin: 40% 0 0 4%;height: 100px;width: 100px;}
    #face {height: 100px;width: 100px;margin: 0%;}
    .s1 {transform: translateZ(50px)translateY(-34px);}
    .eyes {margin-top: 18px;margin-left: 15px;width: 70%;height: 18px;}
    .s2 {transform: rotateY(90deg)translateZ(50px) translateY(-34px);}
    .s3 {transform: rotateY(180deg)translateZ(50px)translateY(-34px);}
    .s4 {transform: rotateX(90deg)translateZ(84px);}
    .s5 {transform: rotateY(-90deg)translateZ(50px)translateY(-34px);}
    .s6 {transform: rotateX(-90deg) rotate(180deg)translateZ(14px);}
    /*------- head*/
    .namePro {margin-top: 2%;width: 70%;}
    .title-home {font-size: 57px; width: 100%;}
    .sub-title {font-size: 17px;}
    .contenedor-present {width: 90vw; margin-left: 2vw;}
    .texto-home-info {font-size: 18px;}
    /*------- second part*/
    /*------- second part*/
    .toolWhole {width: 90vw;max-width: 90vw;margin-left: 4vw;}
    .sk {font-size: 30px;margin-bottom: 4vh;}
    .choose {font-size: 18px;margin-top: 70px;}
    .contTool {display: flex;flex-direction: column;}
    .herr {width: 90%;margin: 1%;}
    /*------- in sp*/
    /*------- in sp*/
    .toolInfCont {width: 100%;}
    .closeBtn {font-size: 30px;top: 0;right:-77%;}
    .toolExp, .perExplanation {font-size: 15px;width: 100%;}
    .rowGraph {display: flex;flex-direction: column;}
    .circle, .moreAnBtn {margin-left: 4%;}
    /*------------------------------ TIMELINE*/
    /*------------------------------ TIMELINE*/
    .line {width: 80vw; margin-left: 4vh;}
    .timeStoryCont {width: 90vw; min-height: 70vh; margin-left: 4vw;}
    /*------------------------------ DATA*/
    /*------------------------------ DATA*/
    .expPar{width: 100%;}
    .analisisCont{width: 100%;}
    .analysisProyCont {flex-direction: column;}
    .analisis {width: 100%;}
    /*------------------------------ WEB*/
    /*------------------------------ WEB*/
    .webRow {flex-direction: column;padding-bottom: 7%;width: 90vw;max-width: 90vw;}
    .webIMG {width: 80%;}
    .j {flex-direction: column-reverse;}
    .irPrueba {margin: 7% 0 7% 0;}
    /*------------------------------ BRANDS*/
    /*------------------------------ BRANDS*/
    .logo-section {width: 90vw;max-width: 90vw;height: 100%;min-height: 100vh;margin: 10vh 0 0 4vw;}
    .contenedor-logo{width: 90vw; max-width:90vw; display:flex;flex-direction: column;}
    .logos {width: 100%;}
    .brand-section {margin-left: 4vw;}
    .brand-content {flex-direction: column;}
    .brand {width: 100%;}
    .contenedor-info-logos, .contenedor-info-brand {width: 90vw;}
    .contenedor-info-logos .title, .contenedor-info-brand .title {font-size: 35px;}
    /*------------------------------ CONTACT*/
    /*------------------------------ CONTACT*/
    .phoneCircle {top: 10vh;left: 4vw;width: 90vw;max-width: 90vw;height: 50vh;border-radius: 7px;}
    .contact-cont {margin-top: 10%;}
    .conta-inf-cont {margin-top: 20%;}
    .contact-titulo {font-size: 40px;margin-top: 0;}
    .contact-exp {font-size: 15px;}
    .conBor {margin-top: 40%;margin-left: 0;}
    .email {font-size: 15px;margin-left: 0;}
    .purMail {font-size: 15px;}
    .contaLink {font-size: 15px;}
    .telephone-cont {position: absolute;top: 7%;left: 50%;width: 50%;height: 100px;}
}