@import url('https://fonts.googleapis.com/css2?family=Anton&family=Raleway:wght@300&display=swap');

html{
    box-sizing: border-box;
    font-family: var(--anton-font-family);
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: var(--azul-main);
}

*, 
*::before,
*::after {
    box-sizing: inherit;
}

p,
figure,
ul,
a{
    padding: 0;
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6{
    padding: 0;
    margin: 0;
    font-weight: normal;
    font-size: var(--step-3);
}

/***Root*/

:root{
    
    --negro: rgba(16, 16, 16, 1);
    --blanco: rgb(255, 255, 255);
    --blanco-translucido: rgb(255, 255, 255, .2);
    --verde-main: rgb(55, 177, 162);
    --verde-amarillo: rgb(209, 238, 148);
    --verde-footer: rgba(194, 209, 202);
    --verde-agua: rgb(160, 255, 238);
    --azul-main: rgba(5, 26, 38);
    --azul-fuerte: rgba(15, 68, 98);
    --azul-agua: rgba(45, 136, 188);
    --azul-cielo: rgba(179, 205, 211);
    --amarillo-intenso: rgba(214, 236, 81);
    --rosa-intenso: rgba(255, 85, 228);
    --verde-intenso: rgba(37, 255, 36);
    --morado: rgba(18, 15, 158);

    
    --anton-font-family: 'Anton', sans-serif !important;
    --secundario: 'Raleway', sans-serif !important;

    --step--3: clamp(0.65rem, calc(0.65rem + 0.02vw), 0.60rem);
    --step--2: clamp(0.78rem, calc(0.77rem + 0.03vw), 0.80rem);
    --step--1: clamp(0.94rem, calc(0.92rem + 0.11vw), 1.00rem);
    --step-0: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);
    --step-1: clamp(1.35rem, calc(1.28rem + 0.37vw), 1.56rem);
    --step-2: clamp(1.62rem, calc(1.50rem + 0.58vw), 1.95rem);
    --step-3: clamp(1.94rem, calc(1.77rem + 0.87vw), 2.44rem);
    --step-4: clamp(2.33rem, calc(2.08rem + 1.25vw), 3.05rem);
    --step-5: clamp(2.80rem, calc(2.45rem + 1.77vw), 3.82rem);
    --step-6: clamp(3.20rem, calc(3.00rem + 2.1vw), 4.32rem);
    --step-7: clamp(3.80rem, calc(3.40rem + 2.7vw), 4.92rem);
    --step-8: clamp(4.40rem, calc(4.10rem + 3.7vw), 5.22rem);

    --nav-height: 5rem;
    --footer-height: 20rem;
    
    

}

.border{
    border: 1px solid pink;
}

.xs-d-flex{
    display:flex;
}    

.xs-d-none{
    display: none;
}

/*Cabecera*/

.nav{
    width: 100%;
    width: 100%;
    height: var(--nav-height);
    background-color: var(--blanco-translucido);
    backdrop-filter: blur(15px);

    position: fixed;
    top: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    z-index: 998;

    transition: top 500ms ease-in-out;

}


.nav-bar{
    width: 100%;
    height: var(--nav-height);

    display: flex;
    flex-direction: row;
    justify-content: space-between; 
    
    padding-top: 0.5rem;
}

.nav-bar-logo{
    width: 60%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;

    padding-left: 1rem;

    visibility: visible;

    transition: visibility;
    transition-duration: 100ms;
    transition-timing-function: ease-in-out;
    transition-delay: 700ms;
    
}

.nav-bar-logo.is-active{
    visibility: hidden;
}

.nav-bar-logo-img{
    width: var(--nav-height);
    height: 60%;
}


.nav-bar-logo-img-menu{
    width: 8rem;

    position: absolute;
    top: 1rem;
    left: -10rem;


    transition-property: left;
    transition-duration: 100ms;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    transition-delay: 700ms;    

}

.nav-bar-logo-img-menu.is-active{
  left: 1rem;
}

.logo{
    width: 100%;
    height: 100%;
}

.nav-bar-logo-desc{
    color: var(--azul-cielo);
    font-size: var(--step--3);
    font-family: var(--secundario);
    font-weight: bold;
}

.nav-bar-menu{
    width: 40%;
    height: 100%;

    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;

    padding-right: 1rem;
}

.nav-bar-menu-svg{
    width: 2rem;
    height: 2rem;
    z-index: 999;
    margin-left: 1rem;
}

.nav-bar-menu-lang{
    width: 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 1rem;
}

.lang-p,
.lang-s{
    width: 100%;
    height: 1.7rem;
    text-decoration: none;
    color: var(--azul-main);
    list-style: none;


    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background-color: var(--azul-cielo);
}

.lang-p{
    border-radius: .5rem;
    text-decoration: underline;
}

.lang-s{
    visibility: hidden;
}

.lang-p.is-active{

    border-bottom-right-radius: 0rem;
    border-bottom-left-radius: 0rem;
}

.lang-s.is-active{
    visibility: visible;
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
    border-top: .5px solid var(--azul-main);
}


.nav-bar-menu-li{
    height: 100vh;

    position: fixed;
    top: -100vh;
    right: 0vw;
    left: 0vw;

    background-color: var(--verde-main);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    transition: top 400ms cubic-bezier(0.075, 0.82, 0.165, 1);

    z-index: 998;
}

.nav-bar-menu-li.is-active{
    top:0;
}

.nav-bar-menu-li > a{
    height: 3.5rem;
    text-decoration: none;
}

.nav-bar-menu-li > a > li{
    width: 15ch;
    height: 100%;
    list-style: none;
    color: var(--azul-main);
    font-size: var(--step-3);
}

.nav-bar-menu-li a li:hover{
    text-decoration: underline;
}


/*Footer*/

.footer{
    width: 100%;
    height: var(--footer-height);
    background-color: var(--verde-footer);

    border-radius: 2rem 2rem 0 0;
    

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.footer-content{
    width: 60%;
    height: 90%;

    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.footer-soc-med{
    width: 100%;
    height: 30%;

    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.footer-soc-med a{
    width: 2rem;
}

.footer-soc-med a svg{
    width: 100%;
    height: 100%;
}

.footer-menu{
    align-self: flex-start;

    width: auto;
    height: 60%;

    display: flex;
    flex-direction: column;
    justify-content: space-around;
    
}

.footer-menu a{
    text-decoration: none;
}

.footer-menu a li{
    list-style: none;
    color: var(--verde-main);
    font-size: var(--step-0);
}


/*Home Component*/

.main{
    width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.main-offer-o,
.main-offer{

    width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: calc(var(--nav-height) + 2rem) 0 2rem 0;
}

.main-offer-o{
    min-height: calc(100vh - var(--nav-height) - 4rem);
}

.home-components-o,
.home-components{
    width: 95%;
    height: calc(100dvh);
    padding-top: var(--nav-height);
    background-color: transparent;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;

}


.home-components-o{
    height: auto;
    padding-top: calc(var(--nav-height) + 2rem);
}

.main-sentence-u,
.main-sentence-o,
.main-sentence{
    width: 80%;
    height: 75%;

    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;

    color: var(--blanco);
}

.main-sentence-o{
    height: 85%; 
}

.main-sentence-u{
    width: 90%;
    height: auto;
    padding-bottom: 2rem;
}

.main-sentence > h2{
    align-self: self-start;
    font-size: var(--step-3);

}

.main-sentence > h1{
    align-self: self-end;
    font-size: var(--step-3);
}

.main-sentence ul{
    width: 50%;
    height: 50%;
    list-style-type: none;     
    padding: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.main-sentence ul li{
    position: absolute;

    
}

.adj{
    visibility: hidden;
    font-size: var(--step-5);
}

.adj.is-active{
    visibility: visible;
    z-index: 1;
}

.adj-1{
    color: #00FF7F;
}

.adj-2{
    color: 	#00FF7F;
}

.adj-3{
    color: #00FF7F;
}

.adj-4{
    color:	#00FF7F;
}

.adj-5{
    color: #00FF7F;
}

.adj-6{
    color: #00FF7F;
}

.btn-offer-o,
.btn-offer{
    width: 60%;
    height: 10%;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 2rem;
}

.btn-offer-o{
    width: 35%;
}

.btn-offer:hover{
    scale: 105%;
}

.btn{
    height: 2.5rem;
    border-radius: 3rem;
    background-color: var(--verde-agua);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-decoration: none;
    font-size: var(--step--2);
    font-family: var(--secundario);
    font-weight: bold;
    color: var(--azul-main);
}

.slogan{

    height: 15%;
    width: 100%;

    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;

    padding-left: 2rem;
}

.slogan strong{
    font-size: var(--step-4);
    color: var(--verde-agua);
}

.slogan span{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;

    font-size: var(--step-0);
    color: var(--blanco);

    margin-left: .5rem;
}

/*Services Component*/

.services-components-o,
.services-components{
    width: 100%;
    height: 50vh;

    background-color: var(--blanco);
    overflow: hidden;    

    display: flex;
    flex-direction: column;
    justify-content: center;
    
}

.services-components-o{
    height: 90vh;
    margin-bottom: calc(-1 * var(--footer-height));
    padding-bottom: var(--footer-height);
}


.serv{
    width: calc(33.33vw * 9);
    height: 30%;
    position: relative;
    right: 0vw;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;

    padding: 0;
    color: var(--azul-main);

    transition:right 250ms ease-in-out;
}

.serv-ot{
    list-style: none;
    text-align: center;
    font-size: .7rem;
    width: 33.33vw;
}


.serv-li{
    list-style: none;
    text-align: center;
    font-size: var(--step--3);
    width: 33.33vw;

    transition:font-size 1000ms ease-in-out;
}

.serv-li.is-active{
    font-size: var(--step-1);
}

/*Offer Form*/

.offer-form-u,
.offer-form-o,
.offer-form{
    width: 80%;
    height: 45rem;
    padding-top: calc(var(--nav-height));
    padding-bottom: 3rem;

    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}

.offer-form-o{
    width: 90%;
    padding-top: calc(var(--nav-height) + 3rem);
    padding-bottom: 0rem;
}

.offer-form-u{
    padding-top: 0;
    padding-bottom: 2rem;
}

.content-form-o,
.content-form{
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.content-form-o{
    height: 30rem;
}

.content-form-o p,
.content-form p{
    align-self: flex-start;
    color: var(--verde-footer);
    font-size: var(--step-0);
    margin: 0rem 0 1rem 0;
}

.content-form h6{
    align-self: flex-start;
    color: var(--azul-cielo);
    font-size: var(--step--1);
    padding-left: 2rem;
    margin: .5rem 0 0 0;
}


.inp{
    width: 100%;
    border-radius: 3rem;   
    height: 7%;

    border: .5px solid var(--verde-agua);
    color: var(--verde-main);
    padding-left: 1rem;
}

.inp-msg{
    height: 30%;
    border-radius: 1.5rem;
}

.inp-2{
    width: 100%;
    border-radius: 3rem;   
    height: 10%;

    border: .5px solid var(--verde-agua);
    color: var(--verde-main);
    padding-left: 1rem;
}

.inp-2::placeholder,
.inp::placeholder{
    color: var(--azul-main);
    font-size: var(--step--2);
    font-family: var(--secundario);
}

.content-form label{
    font-size: var(--step--3);
}

.opt-form{
    width: 100%;
    height: 7rem;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

}

.opt-form article{
    width: 85vw;
    height: 3rem;

    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items:center;
}

.form-rad-1,
.form-rad-2,
.form-rad-3,
.form-rad-4,
.form-rad-5,
.form-rad-6{
    width: 30%;
    height: 3rem;

    background-color: var(--azul-main);
    color: var(--azul-cielo);
    border: .5px solid var(--azul-agua);

    border-radius: 1rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;

    font-size: var(--step--3);
    font-family: var(--secundario);
    font-weight: bold;
}

.form-rad-1.is-active,
.form-rad-2.is-active,
.form-rad-3.is-active,
.form-rad-4.is-active,
.form-rad-5.is-active,
.form-rad-6.is-active{
    
    background-color: var(--azul-agua);
    color: var(--azul-main);

}

.radio-btn{
    display: none;
}

.msg-error{
    color: var(--blanco);
    align-self: flex-start;
    font-family: var(--secundario);
    font-size: var(--step--3);
    margin-top: .5rem;
}

.sbmt{
    width: 40%;
    height: 2.5rem;
    border-radius: 3rem;
    align-self: flex-end;  
    
    border: none;
    background-color: var(--verde-main);
    color: var(--azul-main);

    margin-top: 1rem;

    font-size: var(--step--1);
    font-family: var(--secundario);
    font-weight: bold;
}

.sbmt:hover{
    scale: 105%;
}

/*Project Banner*/

.prj-banner{
    width: 90vw;
    height: 80vh;

    overflow: hidden;
    position: relative;
}

.img-banner{
    width: calc(80vw * 2 );
    height: 100%;

    position: relative;
    left: 0vw;

    display: flex;
    flex-direction:row;

    transition: left 500ms cubic-bezier(0.39, 0.575, 0.565, 1);
}

.img-banner img{
    width: 80vw;
    height: 100%;
    object-fit:cover;
    object-position: 50% 50%;
}

.prj-banner-ctl{
    width: 100%;
    height: 5rem;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    position: absolute;
    top:50%;
    z-index: 996;
}

.prj-banner-ctl svg{
    width: 4rem;
    height: 4rem;

    -webkit-box-shadow: 0px 5px 10px 0px rgba(23,23,23,1);
    -moz-box-shadow: 0px 5px 10px 0px rgba(23,23,23,1);
    box-shadow: 0px 5px 10px 0px rgba(23,23,23,1);
}

/*CV*/

.cv-main{
    width: 100%;
    padding-top: var(--nav-height);
}

.cv-desc-container{
    width: 100%;
    height: auto;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.pers-name-cv,
.pers-name{

    width: 100%;

    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: end;

    padding: 1rem 0 1rem 0;
    
}

.pers-name-cv{
    padding: 1rem 0 1rem 2rem;
}

.pers-name-cv h3,
.pers-name h3{
    color: var(--verde-amarillo);
    font-size: var(--step-0);
    display: block;

}


.cv-desc-main{
    width: 70%;
    min-height: 30vh;
    color: var(--azul-cielo);
    margin: 2rem;
    padding: .5rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;


}


.cv-desc-main h1{
    font-size: var(--step-0);
    font-family: var(--secundario);
    font-weight: bolder;
    line-height: 2.5ch;
}

.cv-personal-desc{
    width: 100%;
    height: 30rem;

    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-y: hidden;
    
}

.div-nmt{
    width: 50%;
    position: absolute;
    top: 0;
    border-top: 2px solid var(--blanco);
    align-self: flex-end;
}


.cv-img{
    width: 100%;
    min-height: 100%;
    scale : 1;  

    object-fit: cover;
    object-position: 50% 50%;

    background: linear-gradient(0deg, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0.40) 100%), 
    url(../img/cv.png), lightgray -0.5px -72.835px / 100% 139.533% no-repeat;
    background-position: 50% 50%;
    background-size:cover;
    background-color: var(--azul-cielo);
}

.cv-personal-desc h3{
    position: absolute;

    width: 70%;
    font-size: var(--step--0);
    font-family: var(--secundario);
    font-weight: bold;
}

/*Schoolar info*/

.cv-sch-desc{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    background-color: var(--blanco);
    overflow: hidden;
}

.cv-sch-desc article{
    width: 80%;
    height: auto;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    margin: 1rem 0 1rem 0;
}

.cv-sch-desc article h2{
    font-size: var(--step-1);
    color: var(--azul-main);
    width: 100%;
}

.sch-info{
    color: var(--azul-fuerte);
    font-size: var(--step--1);
    font-family: var(--secundario);
    font-weight: bold;
    margin-top: 1rem;
}

.thesis-info{
    width: 100%;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    margin-top: .5rem;
}

.thesis-info figcaption{
    width: 65%;
    
    margin: 1rem 1rem 0 0;
    font-size: var(--step--1);
    font-family: var(--secundario);
    font-weight: bold;
    color: var(--azul-fuerte);
    text-align: justify;
}

.thesis-info img{
    width: auto;
    height: 9rem;
}


.thesis-info img:hover{
    scale: 105%;
}

/*Softwares*/

.cv-soft{
 width: 100%;
 padding: 3rem 0 3rem 0;
}

.cv-soft section{
    display: flex;
    flex-direction: column;
}
   
.cv-soft h2{
    color: var(--blanco);
    font-size: var(--step-0);
    font-family: var(--secundario);
    font-weight: bold;
    margin: 1rem 0 1rem 1rem;
    align-self: self-start;
}

.cv-soft article h3{
    color: var(--azul-cielo);
    font-size: var(--step-1);
    margin: .5rem 0 1rem 0;
}

.soft-field{
    padding: 0 1rem 0 1rem;
}


.cv-soft-mod{
    display: flex;
    flex-direction: row;
}

.cv-soft-mod h4{
    font-size: var(--step--2);
    color: var(--azul-agua);
    width: 30%;
}

.cv-soft-mod h5{
    font-size: var(--step--2);
    width: auto;
    margin-right: 1rem;
    margin-bottom: .5rem;
    text-align: start;
}


.cv-soft-mod ul{
    width: auto;
    color: var(--verde-main);

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: start;
    flex-wrap: wrap;
    margin: auto;
}

/*Profesional Experience*/

.cv-prof-exp{
    width: 100%;
    background-color: var(--blanco);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem 0  3rem 0;

    overflow: hidden;

}

.cv-prof-exp-title{
    width: 80%;
    min-height: 3rem;
    color: var(--azul-main);
    margin: 0 0 3rem 0;
}

.cv-prof-exp-title h3{
    font-size: var(--step-0);
    font-family: var(--secundario);
    font-weight: bold;
}

.cv-prof-exp-et{
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin:0rem 0 1rem 0;

}

.prof-exp-header{
    min-width: 90%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

}

.prof-exp-header > h3{
    width: 30%;
    color: var(--azul-fuerte);
    font-size: var(--step-0);
}

.prof-exp-header ul{
    width: 60%;
}

.prof-exp-header > article{
    width: 20%;
}

.cv-exp-info{
    color: var(--azul-fuerte);
    padding-left: 1rem;
  
}

.cv-exp-info h3{
    font-size: var(--step--1);
}

.prof-exp-header ul time{
    font-size: var(--step--3); 
    color: var(--negro); 
  
}

.prof-exp-desc{
    width: 80%;
    padding: 0 0 .5rem 0;

    align-self: flex-end;
}

.prof-exp-desc h3{
    color: var(--negro);
    font-size: var(--step--1);
    font-family: var(--secundario);

    line-height: 1rem;

    padding: 1rem;
    display: none;

}

.prof-exp-desc h3 a{
    color: var(--azul-agua);
}


.tab-btn-serv,
.tab-btn-desk,
.tab-btn{
    height: 2rem;

    border-radius: 3rem;
    border: none;
    background-color: var(--verde-footer);
    color: var(--azul-main);
    font-size: var(--step--2);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin-top: .5rem;

}

.tab-btn-desk{
    width: 100%;
    color: var(--azul-main);
}

.tab-btn-serv{
    width: 50%;
}

.tab-btn{
    width: 30%;
}

.tab-btn-desk.is-active{
    display: none;
}

.tab-btn-serv.is-active{
    display: none;
}

.content.is-active{
    display: block;
}

/*More*/

.cv-more{
    background-color: var(--azul-cielo);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.cv-more article{

    width: 100%;
    min-height: 20vh;

    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;

}

.cv-tit-more{
    font-size: var(--step--1);
    color: var(--azul-main);
    margin-bottom: 1rem;
}

.cv-li-more{
    font-size: var(--step--2);
    color: var(--azul-main);
    font-family: var(--secundario);
    list-style: none;
}



/*Testimonials*/

.cv-last-comp{
    width: 100%;
    min-height: 35rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 2rem;


}


.cv-form{
    width: 100%;
    min-height: 35rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 0 2rem 0 2rem;
    overflow: hidden;

}

.cv-test{
    width: 100%;
    min-height: 30rem;


    display: flex;
    flex-direction: column;
    justify-content: right;

    border: .5px solid var(--azul-cielo);
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;

    position: relative;
    overflow: hidden;



}

.test-content{
    width: 0%;
    min-height: 30rem;

    display: flex;
    flex-direction: row;
    justify-content: right;

    position: relative;
    left: 0%;


}

.cv-test-cont{
    width: 100%;
    height: auto;

    margin-top: 5rem;

    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;   

    padding-top: 1rem;
}


.cv-test-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

.cv-test h3{
    width: 100%;
    min-height: 3rem;
    padding-top: 2rem;

    align-self: center;
    text-align: center;
    color: var(--verde-main);
    font-size: var(--step-3);

    position: absolute;
}

.cv-test div{
    width: 100%;
    height: 100%;

    position: absolute;
    top: 0%;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.prj-left,
.prj-right{
    width: 4rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    z-index: 1;
}

.prj-left-ctl-o,
.prj-left-ctl,
.prj-right-ctl{
    width: 2rem;
    height: 2rem;

    -webkit-box-shadow: 0px 5px 10px 0px rgba(23,23,23,1);
    -moz-box-shadow: 0px 5px 10px 0px rgba(23,23,23,1);
    box-shadow: 0px 5px 10px 0px rgba(23,23,23,1);

    z-index: 995;
    color: #00FF7F;
}

.prj-left-ctl{
    visibility: hidden;
}

.prj-left-ctl-o{
    visibility: visible;
}

.cv-test-cont blockquote{
    width: calc(100% - 8rem);
    height: auto;
    color: var(--verde-footer);
    text-align: center;

    font-size: var(--step--3);
    line-height: 2ch;
    font-family: var(--secundario);
}

.cv-test-cont cite{
    width: 80%;
    height: auto;
    color: var(--azul-agua);
    text-align: center;
    font-size: var(--step--2);
    font-family: var(--secundario);
    font-weight: bold;
}


/*Menu*/

.menu{
    width: 100%;
    height: 100%;
    position: relative;
}

.menu.is-active{
    height: 3%;
}

.lin{
    width: 100%;
    height: 4px;
    background-color: var(--azul-cielo);
    border-radius: 1rem;

}

.lin-p{
    position: absolute;
    top: 0%;
    transition: all 300ms ease-in-out;
}

.lin-s{
    position: absolute;
    top: 50%;
    right: 0;
    transition: width 300ms ease-in-out;
}

.lin-t{
    position: absolute;
    top: 100%; 
    
    transition: all 300ms ease-in-out;
}

.lin-p.is-active{
    top: 50%; 
}

.lin-s.is-active{
    width: 0%; 
    top: 50%; 
 
}

.lin-t.is-active{
    top: 50%; 
}

.lin-p.is-active-s{
    rotate: 135deg; 
    scale: 140%;
}

.lin-t.is-active-s{
    rotate: 45deg;
    scale: 140%;
}

.div-hamb{
    height: 1.5rem;
    margin-left: 2rem;
}

/*Services*/

.services-components-s{
    width: 100%;
    margin-bottom: calc(-1 * var(--footer-height));
    padding-bottom: var(--footer-height);
    background-color: var(--blanco);
}


.serv-cont{
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

    color: var(--azul-cielo);
}

.serv-cont li{
    font-size: var(--step--1);
}

.serv-desc{
    width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.clint-atten,
.serv-details{
    width: 100%;
    height: auto;
    padding: 3rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.serv-details p{
    color: var(--azul-main);
    font-size: var(--step--1);
    font-family: var(--secundario);
}

.clint-atten p{
    color: var(--verde-main);
    font-size: var(--step-3);
}

.chat-bot{
    width: 7rem;
    height: 7rem;
    background-color: var(--azul-main);
    border-radius: 3rem;
    margin: 1rem;
    align-self: flex-end;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}

.clint-atten{
    padding-top: 0;
}

.btn-cv{
    height: 2.5rem;
    border-radius: 3rem;
    background-color: var(--verde-main);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-decoration: none;
    font-size: var(--step--2);
    font-family: var(--secundario);
    font-weight: bold;
    color: var(--azul-main);
}


/*About us*/

.abt-us-cont{
    width: 100%;
    padding: 0 2rem 2rem 2rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.abt-us-cont p{
    color: var(--azul-cielo);
    font-size: var(--step--1);
    font-family: var(--secundario);
    text-align: center;
}

/*Articles*/

.error-cont,
.art-cont{
    width: 100%;
    height: 50vh;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.art-cont h4{
    color: var(--verde-main);
    text-decoration-line: underline;
    padding: 1rem;

}

.error-cont h4{
    color: var(--verde-amarillo);
    padding: 1rem;
}

@media screen and (min-width:62em){

    /*Cabecera*/


    .nav-bar-d{
        width: 90%;
    }

    .nav-bar-logo-d{
        width: 35%;
    }

    .nav-bar-logo-desc-d{
        font-size: var(--step--1);
    }

    .nav-bar-menu-d{
        width: 65%;
        height: 100%;
    }

    .nav-bar-menu-li-d{
        width: 80%;
    }
    

    /*Main Component*/

    .btn-offer-d{
        width: 35%;
    }

    .home-components-d{
        width: 70%;
    }
    
    /*Form*/

    .content-form-d{
        width: 50%;
    }

    .content-form-d-2{
        width: 80%;
    }

    .opt-form-d article{
        width: 60vw;
    }
    
    /*CV*/
    
    .cv-desc-main-d{
        width: 20%;
        min-height: 25vh;
    }

    .cv-desc-container-d{
        height: 50vh;
    }
    
    .cv-img-d{
        background-position: 0% 50%;    
    }

    .cv-sch-desc-d{
        padding: 0 10vw 0 10vw;
    }        

    .cv-sch-desc-d article{
        width: 40%;
    }        

    /*Softwares*/


    .cv-soft-d h2{
        margin: 1rem 0 1rem 8.5%;
    }

    .cv-soft-d section{    
        flex-direction: row;
        flex-wrap: wrap;

        width: 85%;
        }
    
}

@media screen and (min-width:20em){

    .nav-bar-logo-desc-m{
        font-size: var(--step--3);
    }    

    .abt-us-cont-m p{
        font-size: var(--step-0);
    }

    /*Servicios*/

    .serv-cont-m li{
        font-size: var(--step-0);
    }
    
    /*CV*/
    
    .cv-exp-info-m h3{
        font-size: var(--step-0);
    }

    .cv-test-cont-m blockquote{
        font-size: var(--step--1);
    }
    
    .cv-test-cont-m cite{
        font-size: var(--step--2);
    }
    
    
    
}


@media screen and (min-width:48em){
    
    .md-d-flex{
        display:flex;
    }
    
    .md-d-none{
        display: none;
    }    

    /*Cabecera*/

    .nav-bar-logo-t{
        width: 35%;
    }

    .nav-bar-logo-desc-t{
        font-size: var(--step--2);
    }
    

    .nav-bar-menu-t{
        width: 65%;
        height: 100%;
    }

    .nav-bar-menu-li-t{
        width: 90%;
        height: 50%;

        position: relative;
        top: 0;
        left: 0;
    
        border-radius: 10rem;
    
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }
    
    .nav-bar-menu-li-lang-t{
        width: 4rem;
        padding-left: .3rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        position: relative;
        top: 35%;
    }  

    .lang-p-t,
    .lang-s-t{
        width: 100%;
        height: 1.5rem;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        list-style: none;
        text-decoration: none;
        background-color: var(--azul-cielo);
        color: var(--azul-main);
    }

    .lang-p-t{
        border-radius: .5rem;
        text-decoration: underline;
    }

    .lang-s-t{
        visibility: hidden;
    }

    .lang-p-t.is-active{
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .lang-s-t.is-active{
        visibility: visible;
        border-bottom-left-radius: .5rem;
        border-bottom-right-radius: .5rem;

        border-top: .5px solid var(--azul-main);
    }


    .lang-p-t li,
    .lang-s-t li{
        width: auto;
    }


    
    .nav-bar-menu-li-t > a{
        height: 2ch;
        margin-left: 0;
    }
    
    .nav-bar-menu-li-t a  li{
        width: auto;
        font-size: var(--step--2);
    }    

    /*Footer*/
    
    .footer-content-t{
        flex-direction: row;
        align-items: center;
    }

    .footer-soc-med-t{
        width: 50%;
    }

    .footer-soc-med-t a{
        width: 2.5rem;
    }
    
        
    .footer-menu-t{
        width: auto;
        height: 80%;   
        align-self: center;     
    }

    
 
    /*Home Component*/

    .btn-offer-t-o,
    .btn-offer-t{
        width: 30%;
    }

    .btn-offer-t-o{
        width: 15%;        
    }

    /*Form*/

    .content-form-t{
        width: 80%;
    }


    /*CV*/

    .cv-desc-container-t{
        padding-top: 3rem;    
        flex-direction: row-reverse;
        justify-content: center;
        align-items: start;
        min-height: 50vh;
    }

    .cv-desc-main-t{
        width: 30%;
        min-height: 10vh;
        margin: 0rem;
        border-right: 2px solid var(--blanco);
        border-top: 2px solid var(--blanco);
        border-bottom: 2px solid var(--blanco);
        
        border-radius: 0 1rem 1rem 0;
        
    }

    .cv-desc-main-t h1{
        font-size: var(--step--1);
    }
    
    .cv-personal-desc-t{
        width: 35%;
        height: 40vh;
    }

    .cv-img-t{
        border-radius: 1rem;
    }

    .cv-sch-desc-t{
        flex-direction: row;
        background-color: var(--azul-main);
    }
    
    .cv-sch-desc-t article{
        width: 45%;
        min-height: 25vh;
        justify-content: start;

    }        

    .cv-sch-desc-t article h2{
        color: var(--verde-agua);
        width: 100%;
    }        

    .thesis-info-t{
        flex-direction: row-reverse;
        justify-content: start;
        align-items: start;
        
    }

    .thesis-info-t img{
        margin-right: 1rem;

    }


    .sch-info-t{
        color: var(--blanco);
    }
        
    .thesis-info-t figcaption{
        color: var(--blanco);
        text-align: start;
    }

    .thesis-info-t img{
        height: auto;
        width: 7rem;
    }



/*Softwares*/


    .cv-soft-t{
        background-color: var(--blanco);  
        display: flex;
        flex-direction: column;
        align-items: center;
       }

       
       .cv-soft-t section{    
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        }
       
       .soft-field-t{
        width: 50%;        
       }

       .cv-soft-t h2{
           color: var(--azul-main);
       }
       
       .cv-soft-t article h3{
           color: var(--azul-fuerte);
       }
              
       .cv-soft-mod-t h4{
           color: var(--morado);
           font-size: var(--step--1);

       }
       
       .cv-soft-mod-t ul{
           color: var(--azul-agua);
       }
       
       .cv-soft-mod-t h5{
           width: auto;
           font-size: var(--step--1);
       }      

/*Profesional Experience*/

.cv-prof-exp-t{
    width: 100%;
    background-color: var(--azul-main);
}

.cv-prof-exp-title-t{
    width: 80%;
    color: var(--blanco);
}

.prof-exp-header-t > h3{
    width: 30%;
    color: var(--azul-cielo);
    font-size: var(--step-1);
}

.cv-exp-info-t{
    color: var(--azul-agua);
  
}

.prof-exp-header-t ul time{
    font-size: var(--step--3); 
    color: var(--verde-footer); 
  
}

.prof-exp-desc-t{
    width: 50%;
    align-self: center;
}

.prof-exp-desc-t h3{
    color: var(--azul-cielo);
    font-size: var(--step--1);
    line-height: 2rem;

    margin-top: 1rem;
    padding: 1rem;

    border: .5px solid var(--azul-cielo);
    border-radius: .5rem;
}

/*Testimonials*/

.cv-last-comp-t{
    
    flex-direction: row;
    justify-content: space-evenly;
}

.cv-test-t{
    width: 50%;
    border-radius: 1rem;
}

.test-content-t{
    width: 0%;
}

.cv-form-t{
    width: 50%;
}

.cv-test-cont-t{
    width: 100%;
}

.cv-test-cont-t blockquote{
    font-size: var(--step--1);
}

.cv-test-cont-t cite{
    font-size: var(--step--1);
}

.cv-more-t article{
    padding: 0 5vw 0 5vw;
}

/*Services*/

.serv-desc-t{
    flex-direction: row;
}

.clint-atten-t,
.serv-details-t{
    width: 45%;
    padding: 3rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.serv-cont-t li{
    font-size: var(--step-2);
}

.serv-details-t{
    padding: 10rem 0 10rem 5rem;
}

.serv-details-t p{
    font-size: var(--step-1);
}

.clint-atten-t p{
    font-size: var(--step-4);
}

.chat-bot-t{
    width: 15%;
    height: 10rem;        
}


/*About us*/

.abt-us-cont-t p{
    font-size: var(--step-1);
}

    
}

@media screen and (min-width:62em){

    /*Cabecera*/


    .nav-bar-d{
        width: 90%;
    }

    .nav-bar-logo-d{
        width: 35%;
    }

    .nav-bar-logo-desc-d{
        font-size: var(--step--1);
    }

    .nav-bar-menu-d{
        width: 65%;
        height: 100%;
    }

    .nav-bar-menu-li-d{
        width: 80%;
    }

    .nav-bar-menu-li-d a li{
        width: auto;
        font-size: var(--step--1);
    }    


    /*Main Component*/

    .btn-offer-d{
        width: 30%;
    }

    .home-components-d{
        width: 80%;
    }
    
    /*Form*/

    .content-form-d{
        width: 90%;
    }

    .content-form-d-2{
        width: 80%;
    }

    .opt-form-d article{
        width: 60vw;
    }
    
    /*CV*/
    
    .cv-desc-main-d{
        width: 20%;
        min-height: 25vh;
    }

    .cv-desc-container-d{
        height: auto;
    }
    
    .cv-img-d{
        background-position: 0% 50%;    
    }

    .cv-sch-desc-d{
        padding: 0 10vw 0 10vw;
    }        

    .cv-sch-desc-d article{
        width: 40%;
    }        

    .cv-prof-exp-d{
        padding: 2rem 10rem 2rem 10rem;
    }

    .cv-last-comp-d{
        padding: 2rem 10rem 2rem 10rem;
    }

    /*Softwares*/


    .cv-soft-d h2{
        margin: 1rem 0 1rem 8.5%;
    }

    .cv-soft-d section{    
        flex-direction: row;
        flex-wrap: wrap;

        width: 85%;
        }
    
}

@media screen and (min-width:100em){

    /*Cabecera*/

    .nav-bar-menu-li-xl{
        width: 70%;
    }

    .nav-bar-xl{
        width: 80%;
    }

    /*Main Component*/

    .btn-offer-xl{
        width: 20%;
    }

    .main-xl{
        max-width: 50%;
    }

    .home-components-xl{
        width: 50%;
    }


}