@import "root.css";
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');


/* INDEX

1. Navbar
2. Headers
   > Home
   > Animación home
3. Grids
   > Grid 2 y 3 columnas
   > Grid content
   > Elementos internos del Grid
   > Tamaños distintos Grid
   > Background Grid
4. About + headerpage
5. Skillmap
6. Making off + Contacto
7. Mockup portatil Vídeo
8. Footer
9. Otras páginas > Grup






*/


/* 1. NAVBAR */


.navbar{background-color: rgb(244,244,244); position:sticky; z-index: 99; width: 100%; top:0;}
.navbar__content{display:flex; flex-direction: row; justify-content: space-between; align-items: center;}
.navbar__menu{display:flex; flex-direction: row; justify-content: flex-start; align-items: center;}

.navbar__logo{height:60px;}
.navbar__item{line-height: 0px; padding:12px 24px 12px 24px;}

.navbar__item span{font-size:12px !important;}
.navbar__item--link{font-family: 'Poppins', sans-serif; text-decoration:none; font-size:24px; font-weight: 800; margin-top:5px; color:black;   line-height: 0.3;}
.navbar__item--link:hover {color:var(--acent-color); transition: 0.2s;}
.navbar__item--gap{border-right: 2px dotted var(--main-dark-color);}
.navbar__icons{display:inline;}


/* 2. HEADERS */



/* 2.1 home */
#header-home{width:70%; padding:100px 0 0 0;}
#header-page{padding:75px 0 0 0;}
.header-home__emoji{width:48px;}
.home__ux--gap{padding:100px 0 0 0;}

/* 2.2 Animación home */

.bg-wire-home{animation-name: mockup; animation-duration: 1s; position: relative; background-image: url("../img/wireframes.svg"); background-repeat: no-repeat; background-size:30%; background-position: top 80px right 35px;}
@keyframes mockup { 0% {opacity: 0;} 100% {opacity: 1;}}

@keyframes movimiento-scrolldown {
0% {top: 6px;} 20% {top: 30px;} 40% {top: 6px;}  100% {top: 6px;}}

#scrolldown {
      animation-name: movimiento-scrolldown;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      }


/* 3. GRIDS */


/* 3.1 grid 3 cols */

.grid-x3-custom { 
    display: grid;
    grid-template-columns: repeat(3, 1fr); /*numero columnas, 1fr mismo tamaño*/
    grid-auto-rows: minmax(240px, auto) minmax(240px, auto) 75px; /*altura grid item*/
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.grid-x3 { 
    display: grid;
    grid-template-columns: repeat(3, 1fr); /*numero columnas, 1fr mismo tamaño*/
    grid-auto-rows: minmax(240px, auto); /*altura grid item*/
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

/* 3.2 grid 2 cols */

.grid-x2 { 
    display: grid;
    grid-template-columns: repeat(2, 1fr); /*numero columnas, 1fr mismo tamaño*/
    grid-auto-rows: minmax(450px, auto);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}


/* 3.3 grid item content */

.grid__item{}
.grid__item:hover .link-underline {transition: background-size .3s .3s, background-position .3s; background-size: 200% 50%; background-position: 100% 100%;}
.grid__item h3, a {font-size:28px; font-family: 'Roboto', sans-serif; text-decoration:none; color: white;}
.grid__item:hover h3{text-shadow: black 3px 0px;}
.grid__item h4, a {font-size:18px; font-family: 'Roboto', sans-serif; text-decoration:none;}



/* 3.4 Elementos internos grid: columna */

.grid__item--inside{position:absolute; display: flex; flex-direction:column; justify-content: start; /*align-items: center; gap:12px;*/ bottom:30px; left:30px; width: 80%;}
.grid__item--inside img{margin-bottom:-20px;}

.grid__item--private{position:absolute; display: flex; flex-direction:row; justify-content: start; align-items: center; gap:12px; /*bottom:30px;*/ left:30px; width: 80%;}
/*.grid__item--private img{margin-bottom:-20px;}*/
.grid__label{display:flex; gap: 5px; margin:-15px 0 0 0;} .grid__label span{background-color: var(--acent-color); border-radius:20px; padding:3px 6px 3px 6px; color: var(--black); font-size:12px; font-family: 'Raleway', sans-serif;} 


/* 3.5 grids con tamaños diferentes */
/* Grid 3 Columnas */
.grid__row1-1-3{ /* Fila 1 - item 1 hasta 3 en sentido horizojntal "row"  */
  grid-column-start: 1; /*ancho*/
  grid-column-end: 3;
  grid-row-start: 1;  /*alto*/
  grid-row-end: 2;    
}

.grid__row2-2-4{ /* Fila 2 - item 2 hasta 3 en sentido horizojntal "row"  */
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 3;    
}

.grid__col3-1-3{ /* columna 3 - item 1 hasta 3 en sentido vertical "column"  */
  grid-column-start: 3; /*ancho*/
  grid-column-end: 4;
  grid-row-start: 1;  /*alto*/
  grid-row-end: 3;    
}

.grid__col1-1-3{ /* columna 1 - item 1 hasta 3 en sentido vertical "column"  */
  grid-column-start: 1; /*ancho*/
  grid-column-end: 2;
  grid-row-start: 1;  /*alto*/
  grid-row-end: 3;    
}

.grid__row3-2-3{ /* columna 3 - item 1 hasta 3 en sentido vertical "column"  */
  grid-column-start: 2; /*ancho*/
  grid-column-end: 4;
  grid-row-start: 3;  /*alto*/
  grid-row-end: 3;    
}




/* GRID BACKGROUNDS */

.bg-case-1{position: relative; background-image: url("../img/bg-invisalign.png"); background-repeat: no-repeat;background-position: center center;}
.bg-case-1::before{ content: ""; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background-color: rgba(93,93,93,0.5); border-radius:12px;}
.bg-case-1:hover::before{ background-color: rgba(93,93,93,0.2);}

.bg-case-2{position: relative; background-image: url("../img/bg-camisetas.png"); background-repeat: no-repeat;background-position: center center;}
.bg-case-2::before{ content: ""; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background-color: rgba(93,93,93,0.5); border-radius:12px;}
.bg-case-2:hover::before{ background-color: rgba(93,93,93,0.2);}

.bg-case-3{position: relative; background-image: url("../img/bg-creoo.png"); background-repeat: no-repeat;background-position: center center;}
.bg-case-3::before{ content: ""; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background-color: rgba(93,93,93,0.5); border-radius:12px;}
.bg-case-3:hover::before{ background-color: rgba(93,93,93,0.2);}


.bg-case-4{position: relative; background-image: url("../img/bg-grup.png"); background-repeat: no-repeat;background-position: center center;}
.bg-case-4::before{ content: ""; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background-color: rgba(93,93,93,0.5); border-radius:12px;}
.bg-case-4:hover::before{ background-color: rgba(93,93,93,0.2);}


.bg-brand-1{position: relative; background-image: url("../img/bg-brand.png"); background-repeat: no-repeat;background-position: center center;}
.bg-brand-1::before{ content: ""; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background-color: rgba(93,93,93,0.5); border-radius:12px;}
.bg-brand-1:hover::before{ background-color: rgba(93,93,93,0.2);}

.bg-brand-2{position: relative; background-image: url("../img/bg-corporate.png"); background-repeat: no-repeat;background-position: center center;}
.bg-brand-2::before{ content: ""; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background-color: rgba(93,93,93,0.5); border-radius:12px;}
.bg-brand-2:hover::before{ background-color: rgba(93,93,93,0.2);}

.bg-brand-3{position: relative; background-image: url("../img/bg-media.png"); background-repeat: no-repeat;background-position: center center;}
.bg-brand-3::before{ content: ""; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background-color: rgba(93,93,93,0.5); border-radius:12px;}
.bg-brand-3:hover::before{ background-color: rgba(93,93,93,0.2);}

.bg-brand-4{position: relative; background-image: url("../img/bg-store.png"); background-repeat: no-repeat;background-position: center center;}
.bg-brand-4::before{ content: ""; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background-color: rgba(93,93,93,0.5); border-radius:12px;}
.bg-brand-4:hover::before{ background-color: rgba(93,93,93,0.2);}

.bg-private{position: relative; background-color: rgba(93,93,93,0.1);}
.bg-private:hover{position: relative; background-color: rgba(93,93,93,0.3); transition: 0.5s;}
.bg-private::before{ content: ""; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;}






/* 4. ABOUT + HEADER PAGES */

.about{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
justify-content: center;
padding:40px 40px 15px 40px;
}

.headerpage {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
justify-content: center;
}

.about__img{display: flex; flex-direction: column; align-items: center; padding: 26px 0 0 0;}
.headerpage__img{display: flex; flex-direction: column; align-items: center;}
.about__img img{width:250px; height:auto;}
.headerpage__img img{width:min(100%,500px); height: auto;}

.about__btn{
    position: relative;
    z-index:0;
    margin-top:-50px;
    width:100px;
    height:100px;
    border-radius:250px;
    background-color: var(--acent-color);
    box-shadow: 0px 0px 50px var(--acent-color);
}

.about__btn:hover{transform: rotate(360deg); transition: 1s;}

.about__btn::before{
    content:"";
    position:absolute;
    width:100px;
    height:100px;
    z-index:-1;
     border-radius:250px;
    background-image: linear-gradient(360deg, rgba(198,140,10,1) 25%, rgba(255,199,0,1) 75%);
    background-origin: border-box;
    box-shadow: inset 0 100vw var(--acent-color) ; /* color fondo */
    border: 2px solid transparent;
    animation:border-animation 3s linear infinite;
}


@keyframes border-animation{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}


.about__txt, .headerpage__txt{ width: min(100% - 20px, 380px); flex-grow: 1; padding: 0px 16px 16px 24px;}



/* 5. SKILLMAP */

.skillmap{margin-top: 40px; padding:20px 0 20px 0;}

.skillmap__content{
 position:relative;
 z-index:2;
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
}


.skillmap__humman-column{
    /*flex-basis*/width:40%;
    padding:40px 0px 15px 0;
    margin: 0 0 0 40px;
}

.skillmap__tech-column{
    /*flex-basis*/width:40%;
    margin-left:-2px;
    padding:40px 0px 15px 0px;
    margin: 0 42px 0 0;
}

.skillmap__border-humman{border-right: 2px dotted black; border-bottom: 2px dotted black;}
.skillmap__border-tech{margin:0 0 0 -2px; border-top: 2px dotted black; border-left: 2px dotted black;}

.skillmap__section--size{min-height: 300px;}


.skillmap__humman-focus{margin:0 0 0 -47px;}
.skillmap__humman-focus::before{
 display: inline-flex;
 content: '';
 background-image: url('../img/focused-user-box.svg');
 background-size: 35px 35px;
 height: 35px;
 width: 35px;
 margin:0 10px 0 0;
 vertical-align: middle;   
}

.skillmap__humman-focus-align{text-align:left;}

.skillmap__tech-focus{margin:0 -47px 0 0;}
.skillmap__tech-focus::after{
 display: inline-flex;
 content: '';
 background-image: url('../img/focused-tech.svg');
 background-size: 35px 35px;
 height: 35px;
 width: 35px;
 margin:0 0 0 10px;
 vertical-align: middle;  
}

.skillmap__tech-focus-align{text-align: right;}


.skillmap__shadow{
position:absolute;
z-index:-2;
background: rgb(249,50,50);
background: radial-gradient(circle, rgba(249,50,50,0.9) 0%, rgba(249,234,50,0.6) 32%, rgba(180,249,50,0.3) 44%, rgba(50,150,249,0.1) 57%, rgba(50,150,249,0) 65%);
width:650px;
height:580px;
top:0;
left:115px;
}

.skillmap__shadow2{
position:absolute;
z-index:-1;
background: rgb(249,91,50);
background: radial-gradient(circle, rgba(249,91,50,0.8) 0%, rgba(249,144,50,0.7) 14%, rgba(249,234,50,0.5) 31%, rgba(180,249,50,0) 70%);
width:450px;
height:450px;
top:0;
right:240px;
}

.skillmap__nav{display: none;}


.ux-skills {
display: flex;
flex-direction: row;
flex-wrap: wrap-reverse;
justify-content: flex-end;
gap:7px;
}

.ui-skills {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
gap:7px;
}

.tech-skills {
display: flex;
flex-direction: row;
flex-wrap: wrap-reverse;
justify-content: flex-start;
gap:7px;
}



.skills-tools{width:60px; height:60px; border: 2px solid black;/*flex-grow: 1; */}
.skills-tools:hover {background-color:var(--acent-color); }
.skills-label{
  background-color: var(--acent-color);
  border-radius: 20px;
  padding: 3px 6px 3px 6px;
  color: var(--black);
  font-size: 12px;
  font-family: 'Raleway', sans-serif;
}

  

/* 6. MAKING OFF + CONTACTO */

.making-off {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
justify-content: center;
gap:12px;
margin-top:12px;
}

.making-off__info{ width:500px; height:auto; flex-grow: 1.8; padding:30px 48px 30px 48px;}
.making-off__animicon-1{animation:wheel-small 6s linear infinite;}
@keyframes wheel-small{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}

.making-off__animicon-2{animation:wheel-big 6s linear infinite;}
@keyframes wheel-big{0%{transform: rotate(0deg);}100%{transform: rotate(-360deg);}}

.contact__links{ position:relative; width:300px; height:auto; flex-grow: 1; padding:24px 24px 24px 0px;  }
.contact__links::after{position:absolute; z-index:2; content: url(../img/hand.svg); width:100px; bottom:-20px; right:20px; transform: rotate(20deg); transition: 1s;}
.contact__links:hover::after{ transform: rotate(0deg); transition: 1s;}

.contact__list ul{}
.contact__list li{
  list-style:none;
  padding: 0.2rem 0 1rem 2rem;
  background-position: 0 0;
  background-size: 1.8rem 1.8rem;
  background-repeat: no-repeat;
}

.contact__list li:nth-child(1){background-image: url(../img/contact-telf.svg);}
.contact__list li:nth-child(2){background-image: url(../img/contact-email.svg);}
.contact__list li:nth-child(3){background-image: url(../img/contact-in.svg);}
.contact__list li:nth-child(4){background-image: url(../img/contact-medium.svg);}


.contact__list a {
  background-image: linear-gradient(#ffc700 0 0);
  background-size: 200% .08em;
  background-position: 200% 100%;
  background-repeat: no-repeat;
  transition: background-size .3s, background-position .3s .3s;
}
.contact__list a:hover {transition: background-size .3s .3s, background-position .3s; background-size: 200% 50%; background-position: 100% 100%;}



/* 7. MOCKUPS REPRODUCTOR VIDEO */
.mockup-video{padding:18px; width:70%; background-color:black;}  .mockup-teclado{margin-top:-10px; width: 90%;}


/* 7. FOOTER */
.footer__content{min-height:220px;}
.footer__title{-webkit-text-fill-color: rgba(0,0,0,0); -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black; }
.footer__title:hover{-webkit-text-fill-color: rgba(0,0,0,0); -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: black;  }
.footer__divider{height: 2px; border-bottom: 4px dotted black; flex-grow: 0.3;}
.footer__bg{background-color:var(--acent-color);  background-image:url("../img/bg-dark-dot.png");background-repeat:repeat;background-attachment:fixed;background-size:5px;}

/*links UX - Brand*/
.footer-underline{
  background-image: linear-gradient(#ffc700 0 0);
  background-size: 200% .08em;
  background-position: 200% 65%;
  background-repeat: no-repeat;
  transition: background-size .3s, background-position .3s .3s;
}
#footer-ux:hover .footer-underline{transition: background-size .3s .3s, background-position .3s; background-size: 200% 35%; background-position: 100% 65%;}
#footer-brand:hover .footer-underline{transition: background-size .3s .3s, background-position .3s; background-size: 200% 35%; background-position: 100% 65%;}



/* 9. PAG. GRUP */

#metricas__usuarios::after{position:absolute; z-index:2; content: url(../img/grup/resultados-usuario.svg); width:180px; bottom:15px; right:15px; opacity: 0.1;}
#metricas__demograficas::after{position:absolute; z-index:2; content: url(../img/grup/resultados-demografico.svg); width:180px; bottom:15px; right:15px; opacity: 0.1;}
#metricas__dispositivos::after{position:absolute; z-index:2; content: url(../img/grup/resultados-dispositivos.svg); width:180px; bottom:15px; right:15px; opacity: 0.1;}
#metricas__nav::after{position:absolute; z-index:2; content: url(../img/grup/resultados-navegacion.svg); width:180px; bottom:15px; right:15px; opacity: 0.1;}
#metricas__result::after{position:absolute; z-index:2; content: url(../img/grup/resultados.svg); width:180px; bottom:15px; right:15px; opacity: 0.1;}
#metricas__resumen::after{position:absolute; z-index:2; content: url(../img/grup/primeros-resultados.svg); width:180px; bottom:15px; right:15px; opacity: 0.1;}

/* 9. PAG. M-OFF */
.moff__me{position:relative; width:320px; margin-left:-350px; z-index:1;}
.moff__me::after{position:absolute; z-index:2; width:320px; height:320px; content: url(../img/portfolio-circle.svg); bottom:0px; left:0px; animation:rotate-me auto; animation-direction: alternate; animation-duration:6s; animation-iteration-count: infinite;}
.moff__me::before{position:absolute; z-index:-1; width:320px; height:320px; content: url(../img/making-circle.svg); bottom:0px; left:0px;}
@keyframes rotate-me{
  0%{transform: rotate(0deg); -ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);}
  20%{transform: rotate(360deg);-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg); }
  50%{transform: rotate(360deg);-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg); }
  70%{transform: rotate(0deg); -ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);}
  100%{transform: rotate(0deg); -ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);}
}
.moff__particleUp {position:absolute; width:40px; top: 20px; left:-10px; }
.moff__particleDown{position:absolute; width:150px; bottom:-20px; right:-100px;}


#mkoff__about::before{position:absolute; z-index:-2; content: url(../img/arrow-2.svg); width:180px; bottom:-90px; left:30px; opacity: 0.1;} 
#mkoff__sketch::after{position:absolute; z-index:2; content: url(../img/arrow.svg); width:60px; bottom:-50px; right:50px; opacity: 1;}
.mkoff__world{top:-71px; right:67px; z-index:-1;}




/* 10. POPUP */
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 150px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}



  

/* MEDIAQUERIES */

/* 928 */

/* 838 */
@media screen and (max-width: 838px) {

#header-home{width:100%; padding:75px 0 0 0;}
.skills-tools{width:50px; height:50px;}
.skillmap__shadow{left:-30px;}
.skillmap__section--size{min-height: 340px;}
}    


/* 810 */
@media screen and (max-width: 810px) {

.bg-wire-home{background-image: url(" ");}
.grid-x3-custom,.grid-x3 { 
    grid-template-columns: repeat(2, 1fr); /*numero columnas, 1fr mismo tamaño*/
}


/* Resetea los items del grid con tamaños diferentes a 1x1 */
.grid__row1-1-3,.grid__col3-1-3,.grid__row3-2-3, .grid__row2-2-4, .grid__col1-1-3{
  grid-column-start: auto; 
  grid-column-end: auto;
  grid-row-start: auto; 
  grid-row-end: auto;       
}

}



/* 740 */
@media screen and (max-width: 740px) {
.navbar__icons{display:none;}
.mkoff__world{top:-46px; right:-103px;}
.popup{width: 70%;}
}    


/* 660 */
@media screen and (max-width: 660px) {
#header-home{width:100%; padding:0;}
.header-center-vh{height:80vh; display:flex; justify-content: center; align-items: center; align-content: center;} /*centrado header movil*/
.header-home__emoji{width:40px;}
.moff__me{ margin-left:0;} 
#mkoff__sketch::after{bottom:-65px; transform: rotate(-30deg);}
#me, #world{overflow-x: clip;}
.footer__divider{width: 2px; height:auto; border-bottom:0; border-right: 4px dotted black; flex-grow: 2;}   


/* Partículas (iconos) viewport header versión móvil */
.bg-particles{
   animation-name: particles; animation-duration: 2s;
   background-color: var(--acent-color) !important;
   background: url(../img/particle-draw.svg) top 20px right -40px no-repeat, url(../img/particle-mvl.svg) bottom 20px left -50px no-repeat,  url(../img/particle-x.svg) bottom 10px right 40px no-repeat;
   background-size:35%,30%,15%;}
   @keyframes particles {
    0% {
      -moz-transform: scale(1.1);
      -webkit-transform: scale(1.1);
      -o-transform: scale(1.1);
      -ms-transform: scale(1.1);
      transform: scale(1.1)
    } 100% {
      -moz-transform: scale(1);
      -webkit-transform: scale(1);
      -o-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1)
    }}

.navbar__content{justify-content: center;} 
.home__ux--gap{padding:0;} 
.grid-x3-custom { 
    display: grid;
    grid-template-columns: repeat(1, 1fr); /*numero columnas, 1fr mismo tamaño*/
    grid-auto-rows: minmax(180px, auto) minmax(180px, auto) minmax(180px, auto) minmax(180px, auto) 75px 75px; /*altura grid item*/
}
.grid-x3 {
  grid-template-columns: repeat(1, 1fr); /*numero columnas, 1fr mismo tamaño*/
  grid-auto-rows: minmax(180px, auto);}
.grid__item--inside{flex-direction: row; align-items: center; gap:12px; bottom:40px;}
.grid__item--inside img{margin-bottom:0px;}
.about {padding:40px 15px 15px 15px;}
.skillmap__shadow2{right:150px;}



}



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

.navbar__logo{height:45px;}
.navbar__item{padding:6px 12px 6px 12px;}
.navbar__item span{line-height: 1;}
.navbar__item--link{font-size:22px; margin: 10px 0 15px 0; line-height: 0.1;}



.skillmap{
  overflow-x: scroll;
  scroll-behavior: smooth;
  padding: 0 0 40px 0;
 scroll-snap-type: x mandatory;
  overflow: hidden;
}

.skillmap__content{width:200%;}
.skillmap__section--size{min-height: 150px;}

.skillmap__humman-column,.skillmap__tech-column{ scroll-snap-align: center; width:50%; padding:35px;}

.skillmap__tech-focus {margin: 0 -25px 0 0;} /*alinea grupo tech focus*/
.skillmap__humman-focus-align,.skillmap__tech-focus-align{text-align:center;}

.skillmap__border-humman{border-right: 0px;}
.skillmap__border-tech{margin:0; border-left: 0px;}

.skillmap__nav{ display:inline; z-index:98; bottom:-15; left:15; width:90%;}
.skillmap__nav ul{list-style: none; display:flex; justify-content: space-around; align-items: center; gap:8px; padding:0;}
.skillmap__nav--off { opacity: 0.1; filter: alpha(opacity=10);}


.ux-skills,.ui-skills,.tech-skills{justify-content: center;}

}    



/* 480 */
@media screen and (max-width: 480px) {
  .mockup-video{padding:12px;} .mockup-teclado{margin-top:-5px;}
}  



/* 400 */
@media screen and (max-width: 400px) {
.navbar__item span{font-size:10px !important;}
.skills-tools{width:40px; height:40px; border: 0px; flex-grow: 1;}
 }  


 /* 380 */
 @media screen and (max-width: 380px) {
  .navbar__logo{height:30px;}
  .navbar__item span{display:none;}
  .navbar__item--link{font-size:16px;}
  .mockup-video{padding:10px;} 
 } 


 /* 375 */
 @media screen and (max-width: 375px) {
  #skillmap {display:none;}

}
  /* 330 */
 @media screen and (max-width: 330px) {
 #header-home{display:none;}
 .header-center-vh{height:50vh; display:flex; justify-content: center; align-items: center; align-content: center;} /*centrado header movil*/
 .bg-wire-home{position: relative; background-image: url("../img/wireframes.svg"); background-repeat: no-repeat; background-size:80%; background-position: center bottom;}
 .size-small-mvl{height: 100%;}
 .grid__item--inside img{display:none;}
 .grid-x3-custom { grid-auto-rows: minmax(180px, auto) minmax(180px, auto) minmax(180px, auto) minmax(180px, auto) 100px 100px; /*altura grid item*/}
 .mockup-video{padding:8px;} .mockup-teclado{margin-top:-2px;}

 }