/* #49dfea color personal */
/* #343a3e color bacground */
@font-face {
   font-family: 'right';
   src: url(../fonts/Righteous-Regular.ttf);
}
@font-face {
   font-family: 'workSansItalic';
   src: url(../fonts/WorkSans-Italic-VariableFont_wght.ttf);
}
@font-face {
   font-family: 'workSansVariable';
   src: url(../fonts/WorkSans-VariableFont_wght.ttf);
}

* {
   box-sizing: border-box;
   font-family: workSansVariable;
   margin: 0;
   padding: 0;
   /*me permite deslizar cuando  hago click en los links del menú*/
   scroll-behavior: smooth;
}
img{
   width: 100%;
   display: block;
}

body {
   display: flex;
   flex-direction: column;
}
/*MENÚ*/
.contenedor-header {
   background: #343a3e;
   position: fixed;
   width: 100%;
   top: 0;
   left: 0;
   z-index: 99;
}

.contenedor-header header {
   max-width: 1100px;
   margin: auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 15px 20px;
}

.contenedor-header header .logo {
   width: 6vw;
}

.contenedor-header header .logo a {
   font-size: 0;
   height: calc(4vw * 1.11666666666667);
   display: block;
   background: url(../img/Logo_Propio.png) center center no-repeat;
   background-size: contain;
   text-decoration: none;
}

.contenedor-header header ul {
   display: flex;
   list-style: none;
}

.contenedor-header header nav ul li a {
   font-family: 'workSansVariable';
   font-weight: 600;
   color: #fff;
   margin: 0 15px;
   padding: 3px;
   transition: .5s;
   text-decoration: none;
}

.contenedor-header header nav ul li a:hover {
   color: #49dfea;
}

.nav-responsive {
   background-color: #49dfea;
   color: #fff;
   padding: 5px 10px;
   border-radius: 5px;
   cursor: pointer;
   display: none;
}

/* SECCIÓN I N I C I O */
.inicio {
   background: linear-gradient(to top, rgba(95, 103, 107, 0.8), rgb(40, 42, 43)),
      url(../img/fondo.jpg);
   background-size: cover;
   height: 100vh;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;

}

.inicio .contenido-banner {
   padding: 20px;
   background-color: #343a3e;
   width: 25vw;
   margin: 5% auto 0;
   text-align: center;
   border-radius: 40px;
}

.inicio .contenido-banner img {
   margin-top: 40px;
   border: 10px solid #49dfea;
   display: block;
   width: 60%;
   margin: auto;
   border-radius: 100%;
}

.inicio .contenido-banner h1 {
   margin-top: 30px;
   font-size: 3vw;
   font-family: 'right';
}

.inicio .contenido-banner h2 {
   font-size: 15px;
   font-weight: normal;
}

.inicio .contenido-banner .redes a {
   color: #fff;
   display: inline-block;
   text-decoration: none;
   border: 1px solid #fff;
   border-radius: 100%;
   width: 3vw;
   height: calc(3vw * 1);
   line-height: 42px;
   margin: 30px 5px;
   font-size: 20px;
   transition: .3s;
}

.inicio .contenido-banner .redes a:hover {
   background-color: #49dfea;
}

/* SECCIÓN S O B R E  M Í */
.sobremi {
   background-color: #1e2326;
   color: #fff;
   padding: 90px 30px;
}

.sobremi .contenido-seccion {
   max-width: 1100px;
   margin: auto;
}

.sobremi h2 {
   font-size: 48px;
   font-family: 'right';
   text-align: center;
   padding: 20px 0;
}

.sobremi .contenido-seccion p {
   font-size: 20px;
   line-height: 22px;
   margin-bottom: 20px;
}

.sobremi .contenido-seccion p span {
   color: #49dfea;
   font-weight: bold;
}

.sobremi .fila {
   display: flex;
}

.sobremi .fila .col {
   width: 50%;
}

.sobremi .fila .col h3 {
   font-size: 28px;
   font-family: 'right';
   margin-bottom: 25px;
}

.sobremi .fila .col ul {
   list-style: none;
}

.sobremi .fila .col ul li {
   margin: 12px 0;
}

.sobremi .fila .col ul li span:first-child {
   display: inline-block;
   color: #49dfea;
   width: 120px;
}

.sobremi .fila .col ul li .free {
   background-color: #49dfea;
   padding: 3px;
   font-weight: bold;
   border-radius: 5px;
}

.sobremi .fila .col .cotenedor-intereses {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(100px, 2fr));
}

.sobremi .fila .col .cotenedor-intereses .interes {
   width: 100px;
   height: 100px;
   background-color: #252A2E;
   border-radius: 10px;
   margin: 0 15px 15px 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   transition: .3s;
}

.sobremi .fila .col .cotenedor-intereses .interes:hover {
   background-color: #49dfea;
}

.sobremi .fila .col .cotenedor-intereses .interes button {
   border: none;
   cursor: pointer;
}

.sobremi .fila .col .cotenedor-intereses .interes i {
   font-size: 30px;
   margin: 0 auto 10px;
}

.sobremi .fila .col .cotenedor-intereses .interes span {
   font-size: 13px;
}

.sobremi button {
   cursor: pointer;
   background-color: transparent;
   border: 2px solid #fff;
   width: fit-content;
   display: flex;
   flex-direction: column;
   padding: 20px;
   font-size: 16px;
   color: #fff;
   position: relative;
   z-index: 10;
}

.sobremi button .overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 0;
   height: 100%;
   background-color: #49dfea;
   z-index: -1;
   transition: 1s;
}

.sobremi button:hover .overlay {
   width: 100%;
}
.sobremi button a{
   text-decoration: none;
   color: white;
   display: block;
   width: 100%;
   padding: 10px 22px;
}
/* SECCIÓN S K I L L S */
.skills {
   background-color: #252A2E;
   color: #fff;
   padding: 80px 20px;
}

.skills .contenido-seccion {
   max-width: 1100px;
   margin: auto;
}

.skills h2 {
   font-size: 48px;
   font-family: 'right';
   text-align: center;
   padding: 20px 0;
}

.skills .fila {
   display: flex;
}

.skills .fila .col {
   width: 50%;
   padding: 0 20px;
}

.skills .fila .col h3 {
   font-size: 28px;
   font-family: 'right';
   margin-bottom: 25px;
}

.skills .skill>span {
   font-weight: bold;
   display: block;
   margin-bottom: 15px;
}

.skills .skill .barra-skill {
   height: 8px;
   width: 80%;
   background-color: #131517;
   position: relative;
   margin-bottom: 30px;
}

.skills .skill .progreso {
   background-color: #49dfea;
   position: absolute;
   top: 0;
   left: 0;
   height: 8px;
}

.skills .skill .barra-skill span {
   position: absolute;
   height: 40px;
   width: 40px;
   background-color: #49dfea;
   border-radius: 50px;
   line-height: 40px;
   text-align: center;
   top: -17px;
   right: -15px;
   font-size: 14px;
}

/* Estas clases se agregaran dinámicamente mediante javascript*/
.skills .skill .javascript {
   width: 0%;
   animation: 2s javascript forwards;
}

@keyframes javascript {
   0% {
      width: 0%;
   }

   100% {
      width: 50%;
   }
}

.skills .skill .htmlCss {
   width: 0%;
   animation: 2s htmlCss forwards;
}

@keyframes htmlCss {
   0% {
      width: 0%;
   }

   100% {
      width: 90%;
   }
}

.skills .skill .photoshop {
   width: 0%;
   animation: 2s photoshop forwards;
}

@keyframes photoshop {
   0% {
      width: 0%;
   }

   100% {
      width: 70%;
   }
}

.skills .skill .illustrator {
   width: 0%;
   animation: 2s illustrator forwards;
}

@keyframes illustrator {
   0% {
      width: 0%;
   }

   100% {
      width: 50%;
   }
}

.skills .skill .bootstrap {
   width: 0%;
   animation: 2s bootstrap forwards;
}

@keyframes bootstrap {
   0% {
      width: 0%;
   }

   100% {
      width: 40%;
   }
}

.skills .skill .wordpress {
   width: 0%;
   animation: 2s wordpress forwards;
}

@keyframes wordpress {
   0% {
      width: 0%;
   }

   100% {
      width: 30%;
   }
}

.skills .skill .php {
   width: 0%;
   animation: 2s php forwards;
}

@keyframes php {
   0% {
      width: 0%;
   }

   100% {
      width: 20%;
   }
}

.skills .skill .comunicacion {
   width: 0%;
   animation: 2s comunicacion forwards;
}

@keyframes comunicacion {
   0% {
      width: 0%;
   }

   100% {
      width: 50%;
   }
}

.skills .skill .equipo {
   width: 0%;
   animation: 2s equipo forwards;
}

@keyframes equipo {
   0% {
      width: 0%;
   }

   100% {
      width: 70%;
   }
}

.skills .skill .creatividad {
   width: 0%;
   animation: 2s creatividad forwards;
}

@keyframes creatividad {
   0% {
      width: 0%;
   }

   100% {
      width: 30%;
   }
}

.skills .skill .dedicacion {
   width: 0%;
   animation: 2s dedicacion forwards;
}

@keyframes dedicacion {
   0% {
      width: 0%;
   }

   100% {
      width: 70%;
   }
}

.skills .skill .proyect {
   width: 0%;
   animation: 2s proyect forwards;
}

@keyframes proyect {
   0% {
      width: 0%;
   }

   100% {
      width: 10%;
   }
}

/* SECCIÓN C U R R I C U L U M */
.curriculum {
   background-color: #1e2326;
   color: #fff;
   padding: 80px 20px;
}

.curriculum .contenido-seccion {
   max-width: 1100px;
   margin: auto;
}

.curriculum h2 {
   font-size: 48px;
   font-family: 'right';
   text-align: center;
   padding: 20px 0;
}

.curriculum .fila {
   display: flex;
   justify-content: space-between;
}

.curriculum .fila .col {
   width: 49%;
   padding: 0 20px;
}

.curriculum .fila .col h3 {
   font-size: 28px;
   font-family: 'right';
   margin-bottom: 25px;
}

.curriculum .fila .izquierda {
   border-right: 2px solid #252A2E;
}

.curriculum .fila .derecha {
   border-left: 2px solid #252A2E;
}

.curriculum .fila .item {
   padding: 25px;
   margin-bottom: 30px;
   background-color: #252A2E;
   position: relative;
}

.curriculum .fila .item h4 {
   font-size: 20px;
   margin-bottom: 10px;
}

.curriculum .fila .item .casa {
   color: #49dfea;
   font-size: 22px;
   font-weight: bold;
   display: block;
}

.curriculum .fila .item .fecha {
   display: block;
   color: #49dfea;
   margin-bottom: 10px;
}

.curriculum .fila .item p {
   line-height: 24px;
}

.curriculum .fila .izq {
   border-right: 2px solid #49dfea;
   margin-right: 20px;
}

.curriculum .fila .der {
   border-left: 2px solid #49dfea;
   margin-left: 20px;
}

.curriculum .fila .item .conectori {
   height: 2px;
   background-color: #49dfea;
   width: 47px;
   position: absolute;
   top: 50%;
   right: -47px;
   z-index: 5;
}

.curriculum .fila .item .conectori .circuloi {
   display: block;
   height: 10px;
   width: 10px;
   border-radius: 50%;
   background-color: #49dfea;
   float: right;
   position: relative;
   bottom: 4px;
}

.curriculum .fila .item .conectord {
   height: 2px;
   background-color: #49dfea;
   width: 47px;
   position: absolute;
   top: 50%;
   left: -47px;
   z-index: 5;
}

.curriculum .fila .item .conectord .circulod {
   display: block;
   height: 10px;
   width: 10px;
   border-radius: 50%;
   background-color: rgb(73, 223, 234);
   float: left;
   position: relative;
   bottom: 4px;
}

/* SECCIÓN P O R T F O L I O */
.portfolio {
   background-color: #252A2E;
   color: #fff;
   padding: 80px 20px;
}

.portfolio .contenido-seccion {
   max-width: 1100px;
   margin: auto;
}

.portfolio h2 {
   font-size: 48px;
   font-family: 'right';
   text-align: center;
   padding: 20px 0;
}

.portfolio .galeria {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
}

.portfolio .galeria .proyecto {
   position: relative;
   max-width: 340px;
   height: fit-content;
   margin: 10px;
   cursor: pointer;
}

.portfolio .galeria .proyecto img {
   width: 100%;
   display: block;
}

.portfolio .galeria .proyecto .overlay {
   position: absolute;
   top: 0;
   width: 100%;
   height: 100%;
   text-align: center;
   background: linear-gradient(rgba(73, 223, 234, .5), rgba(115, 234, 243, .8));
   display: flex;
   flex-direction: column;
   justify-content: center;
   transition: 1s;
   font-size: 18px;
   letter-spacing: 3px;
   opacity: 0;
}

.portfolio .galeria .proyecto .overlay h3 {
   margin-bottom: 20px;
   transition: 1s;
   color:#282525;
}
.portfolio .galeria .proyecto .overlay p{
   color:#282525;
}

.portfolio .galeria .proyecto .overlay:hover {
   opacity: 1;
}

.portfolio .galeria .proyecto .overlay:hover h3 {
   margin-bottom: 0px;
}

/* SECCIÓN C O N T A C T O */
.contacto {
   background: url(../img/contact_bg.png), #1e2326;
   color: #fff;
   padding: 80px 0px;
}

.contacto .contenido-seccion {
   max-width: 1100px;
   margin: auto;
}

.contacto h2 {
   font-size: 48px;
   font-family: 'right';
   text-align: center;
   padding: 20px 0;
}

.contacto .fila {
   display: flex;
}

.contacto .col {
   width: 50%;
   padding: 10px;
   position: relative;
}

.contacto .col form input,
.contacto .col form textarea {
   display: block;
   width: 100%;
   padding: 18px;
   border: none;
   margin-bottom: 20px;
   background-color: #252A2E;
   color: #fff;
   font-size: 18px;

}

.contacto .col form textarea {
   height: 180px;
}

.contacto button {
   cursor: pointer;
   background-color: transparent;
   border: 2px solid #fff;
   width: fit-content;
   display: block;
   margin: 20px auto;
   padding: 10px 22px;
   font-size: 16px;
   color: #fff;
   position: relative;
   z-index: 10;
}

.contacto button .overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 0;
   height: 100%;
   background-color: #49dfea;
   z-index: -1;
   transition: 1s;
}

.contacto button:hover .overlay {
   width: 100%;
}

.contacto .col .mapa iframe {
   width: 100%;
   height: 65vh;
}

.contacto .col .info {
   position: absolute;
   top: 40%;
   background-color: #252A2E;
   padding: 20px;
   width: 350px;
   left: 50%;
   transform: translate(-50%, -50%);
}

.contacto .col .info ul {
   list-style: none;
}

.contacto .col .info ul li {
   margin-bottom: 20px;
   font-size: 14px;
}

.contacto .col .info ul li i {
   color: #49dfea;
   display: inline-block;
   margin-right: 10px;
}

.contacto .col .info ul li:last-child a {
   color: white;
   text-decoration: none;
   cursor: pointer;
}

/* SECCIÓN M O D A L E S */
.modales {
   position: fixed;
   z-index: 99;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   top: 0;
   bottom: 0;
   right: 0;
   overflow: auto;
   padding: 1rem;
   width: 100vw;
   height: 100vh;
   background-color: rgba(37, 42, 46, 0.9);
}

.modales .cerrar {
   position: fixed;
   z-index: 99;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   top: 2em;
   right: 3%;
   border-radius: 2.5em;
   width: 3em;
   height: 3em;
   background-color: grey;
   font-size: 0.7em;
   padding: 0 1.3rem;
   font-weight: 400;
   text-align: center;
   color: white;
   cursor: pointer;
}
.modales .cerrar:hover{
   background-color: red;
}
.modales .contenido-general {
   display: flex;
   flex-direction: column;
   width: 90%;
   border-radius: 10px;
   background-color: rgba(73, 223, 234, .11);
   margin: 1rem auto 0;
}
.modales .contenido-general h2 {
   font-size: 48px;
   font-family: 'right';
   text-align: center;
   color: white;
   display: inline-block;
   margin: 0 auto;
}
.modales .contenido-general .contenedor-principal {
   display: flex;
   flex-direction: row;
}
.modales .contenido-general .contenedor-principal .cuadro{
   width: 50%;
   padding: 1%;
}
.modales .contenido-general .contenedor-principal .fotos{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));/*crea dos columnas de 50% de ancho*/
}
.modales .contenido-general .contenedor-principal .fotos .foto {
   margin-bottom: 1rem;
}
.modales .contenido-general .contenedor-principal .fotos .foto img{
   width: 70%;
}
.modales .contenido-general .contenedor-principal .descripcion {
   font-size: 0.8rem;
   line-height: 1.2rem;
   color: white;
   display: flex;
   align-items: center;
   flex-direction: column;
}
.modales .contenido-general .contenedor-principal .descripcion .musica{
   font-size: 0;
   width: 30%;
}

/* SECCIÓN FOOTER */
footer {
   background-color: rgb(37, 42, 46);
   color: #fff;
   padding: 50px 0 30px 0;
   text-align: center;
   position: relative;
   width: 100%;
}

footer .arriba {
   display: block;
   width: 50px;
   height: 50px;
   background-color: #49dfea;
   color: #fff;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   top: -25px;
   border-radius: 50%;
   line-height: 50px;
   font-size: 18px;
}

footer .redes {
   margin-bottom: 20px;
}

footer .redes a {
   color: #fff;
   display: inline-block;
   text-decoration: none;
   border: 1px solid #fff;
   border-radius: 100%;
   width: 42px;
   height: 42px;
   line-height: 42px;
   margin: 30px 5px;
   font-size: 20px;
   transition: .3s;
}

/* SECCION RESPONSIVE */
@media screen and (max-width:980px) {
   .inicio .contenido-banner h1 {
      font-size: 4vw;
   }

   .inicio .contenido-banner .redes a {
      width: 4.5vw;
      height: calc(4.5vw * 1);
      line-height: 35px;
   }

   nav {
      display: none;
   }

   .nav-responsive {
      display: block;
   }

   nav.responsive {
      display: block;
      position: absolute;
      right: 0;
      top: 75px;
      background-color: #252A2E;
      width: 180px;
   }

   nav.responsive ul {
      display: block !important;
   }

   nav.responsive ul li {
      border-bottom: 1px solid #fff;
      padding: 10px 0;

   }

   .inicio .contenido-banner {
      width: 45vw;
   }
   .modales .contenido-general .contenedor-principal {
      display: flex;
      flex-direction: column;
  }
  .modales .contenido-general .contenedor-principal .fotos {
   width: 100%;
  }
  .modales .contenido-general .contenedor-principal .descripcion {
   width: 100%;
  }
}

@media screen and (max-width:600px) {
   .contenedor-header header .logo a {
      width: 10vw;
   }

   .inicio .contenido-banner h1 {
      font-size: 5vw;
   }

   .inicio .contenido-banner .redes a {
      width: 6vw;
      height: calc(6vw * 1);
      line-height: 19px;
   }

   .inicio .contenido-banner .redes a i {
      font-size: 0.8rem;
   }

   .inicio .contenido-banner {
      width: 62vw;
   }

   .contenedor-header header .logo a {
      height: calc(8vw * 1.11666666666667);
   }

   .sobremi .fila {
      display: block;
   }

   .sobremi .fila .col {
      width: 100%;
   }

   .skills .fila {
      display: block;
   }

   .skills .fila .col {
      width: 100%;
   }

   .skills .fila .col .barra-skill {
      width: 100%;
   }

   .curriculum .fila {
      display: block;
   }

   .curriculum .fila .col {
      width: 90%;
   }

   .curriculum .fila .derecha {
      margin-left: 20px;
   }

   .portfolio .galeria {
      display: block;
      width: 100%;
   }

   .portfolio .galeria .proyecto {
      max-width: 100%;
   }

   .portfolio .galeria .proyecto img {
      width: 100%;
   }

   .contacto .fila {
      display: block;
   }

   .contacto .fila .col {
      width: 100%;
   }
   .modales .contenido-general h2 {
      font-size: 42px;
      margin-bottom: 2rem;
   }
   .modales .contenido-general {
      margin: 3rem auto 0;
      padding: 0 0.5rem;
  }
   .modales .contenido-general .contenedor-principal {
      display: flex;
      flex-direction: column;
  }
  .modales .contenido-general .contenedor-principal .fotos {
      display: flex;
      flex-direction: column;
  }
  .modales .contenido-general .contenedor-principal .descripcion {
   width: 100%;
  }
}