@font-face {
  font-family: 'AlegreyaSansSC-Italic'; /* Nombre que quieras asignar a la fuente */
  src: url('../fonts/AlegreyaSansSC-Italic.ttf') format('truetype'); /* Ruta relativa al archivo TTF */
}

@font-face {
  font-family: 'Raleway-Light'; /* Nombre que quieras asignar a la fuente */
  src: url('../fonts/Raleway-Light.ttf') format('truetype'); /* Ruta relativa al archivo TTF */
}

@font-face {
  font-family: 'AlegreyaSansSC-Regular'; /* Nombre que quieras asignar a la fuente */
  src: url('../fonts/AlegreyaSansSC-Regular.ttf') format('truetype'); /* Ruta relativa al archivo TTF */
}


* {
  padding: 0px;
  margin: 0px;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

/* quita el scroll alv jeje*/
::-webkit-scrollbar{
  width: 0px;
}


[class*=underlay] {
    left: 0;
    min-height: 100%;
    min-width: 100%;
    position:absolute;
    top: 0;
  }
  
  .underlay-photo {
    animation: hue-rotate 6s infinite;
    background-size: cover;
    -webkit-filter: grayscale(30%);
    z-index: -1;
  }
  
  .underlay-black {
    background: rgba(53, 53, 53, 0.3);
    z-index: -1;
  }
  
  @keyframes hue-rotate {
    from {
      -webkit-filter: grayscale(0%) hue-rotate(0deg);
    }
    to {
      -webkit-filter: grayscale(0%) hue-rotate(360deg);
    }
}

/* ====================== Start Header ====================== */

#header {
  transition: 0.7s;
}

/* ====================== End Header ====================== */



body {
  /*background: -webkit-linear-gradient(to right, #a6a7af, #f3f3ed);  /* Chrome 10-25, Safari 5.1-6 */
  /*background: linear-gradient(to right, #a6a7af, #f3f3ed); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}




.tri {
    position: absolute;
    top: 0;
    left: 0;
    border-top: 240px solid rgb(226,225,211);
    border-right: 50px solid rgba(255, 255, 255, 0);
}

.tri-2 {
    position: absolute;
    top: 0;
    left: 0;
    border-top: 240px solid rgb(226,225,211);
    border-right: 50px solid rgba(255, 255, 255, 0);
}


#sombra-derecha {
  -webkit-box-shadow: 8px 2px 32px 8px rgba(40,40,75,0.4);
  -moz-box-shadow: 8px 2px 32px 8px rgba(40,40,75,0.4);
  box-shadow: 8px 2px 32px 8px rgba(40,40,75,0.4);
}

#sombra-izquierda {
  -webkit-box-shadow: -13px 2px 32px 8px rgba(40,40,75,0.4);
-moz-box-shadow: -13px 2px 32px 8px rgba(40,40,75,0.4);
box-shadow: -13px 2px 32px 8px rgba(40,40,75,0.4);
}



/* ====================== Start Proyectos ====================== */


.elemt-clasf:after {
  content: ",\00a0"; /* Coma seguida de un espacio no rompible */
}

.elemt-clasf:last-child:after {
  content: ""; /* Evita agregar coma después del último elemento */
}





.font-projects {
  font-family: 'AlegreyaSansSC-Regular', sans-serif;
}

.font-projects h2 {
  font-family: 'AlegreyaSansSC-Regular', sans-serif;
}

.font-projects p {
  font-family: 'AlegreyaSansSC-Regular', sans-serif;
}

.font-projects h3 {
  font-family: 'AlegreyaSC-Regular', sans-serif;
}

/* ====================== End Proyectos ====================== */






/* */

#footer_zs {
  transition: opacity 1.2s ease-out; /* Transición de la opacidad */
}