@charset "UTF-8";
/*------------------------------*\
            $VARIABLES
/*------------------------------*/
/*------------------------------*\
            $BODY
/*------------------------------*/
body {
  font-family: 'Anonymous Pro', monospace;
  font-size: 18px; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Open Sans', sans-serif; }

/*------------------------------*\
            $FOOTER
/*------------------------------*/
.footer {
  width: 100%;
  background: #FFEE58;
  margin-bottom: 0;
  padding: 3em 0; }

.footer__headline {
  font-family: 'Anonymous Pro', monospace;
  font-size: 30px; }

.footer__cta {
  border: solid 1px black;
  color: black;
  padding: 15px 15px; }

.footer__social {
  margin-top: 1em; }

.footer__social a {
  color: #000;
  text-decoration: underline; }

/*------------------------------*\
            $Header
/*------------------------------*/
.hero {
  width: 100%;
  background: #090113;
  color: #fff;
  overflow: hidden; }

.hero__top {
  margin-top: 2em; }

#fuentes_logo {
  width: 150px; }

.hero__desc {
  margin-top: 3em;
  font-size: 25px;
  line-height: 30px; }

.cta--hero {
  color: #000;
  margin-right: 50px;
  padding: 5px 15px;
  background: #FFEE58;
  position: relative;
  text-decoration: none; }

.cta--hero:hover {
  text-decoration: none; }

.hero__link {
  color: #fff; }

.cta--hero:hover {
  transform: translate3d(-6px, -6px, 0); }

.hero__cv {
  color: #FFEE58; }

.hero__image {
  overflow: hidden; }

/* .hero__image{
	height: 400px;
	background-image: url(../img/glitch_2.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
} */
.hero__image img {
  max-width: 380px;
  width: 100%;
  height: 100%;
  background-attachment: fixed; }

/*------------------------------*\
            $GLITCH
/*------------------------------*/
#ivy {
  position: relative;
  z-index: 1; }

#ivy:after {
  content: "Hello world! mi nombre es Iván Fuentes soy diseñador UX y Desarrollador web.";
  position: absolute;
  top: 1px;
  left: 1px;
  color: #00d5d5;
  z-index: -1;
  animation-name: glitch;
  animation-iteration-count: infinite;
  animation-duration: 5s; }

#ivy:before {
  content: "Hello world! mi nombre es Iván Fuentes soy diseñador UX y Desarrollador web.";
  position: absolute;
  top: 0px;
  left: 0px;
  color: red;
  z-index: -2;
  animation-name: glitch_left;
  animation-iteration-count: infinite;
  animation-duration: 5s; }

@keyframes typing {
  0% {
    opacity: 0; }
  50% {
    opacity: 1; } }

@keyframes glitch {
  0% {
    top: 0;
    left: 0; }
  10% {
    top: 0px;
    left: 5px; }
  20% {
    top: 0;
    left: 0; } }

@keyframes glitch_left {
  0% {
    top: 0;
    left: 0; }
  10% {
    top: 0px;
    left: 7px; }
  20% {
    top: 0;
    left: 0; } }

/*------------------------------*\
            $LOGO
/*------------------------------*/
#line {
  animation-name: typing;
  animation-iteration-count: infinite;
  animation-duration: 1s; }

@keyframes typing {
  0% {
    opacity: 0; }
  50% {
    opacity: 1; } }

/*------------------------------*\
            $PORTFOLIO
/*------------------------------*/
.portfolio__item {
  width: 100%;
  height: 400px;
  background-image: url(../img/indumet_linetime.jpg);
  margin: 0;
  position: relative;
  cursor: pointer; }

.portfolio__item:hover::after {
  background: rgba(0, 0, 0, 0.9); }

.portfolio__title {
  position: absolute;
  top: 20px;
  left: 20px;
  color: #fff;
  text-transform: uppercase;
  z-index: 1; }

.portfolio__item:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  transition: 0.3s; }

.portfolio .ed-item {
  padding: 0; }

/*------------------------------*\
            $DESCRIPTION
/*------------------------------*/
.description {
  margin-top: 4em; }

/*------------------------------*\
            $UTILITIES
/*------------------------------*/
.verde {
  color: #00d5d5; }