@font-face {
  font-family: 'Public';
  src: url('fonts/PublicSans-Regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/PublicSans-Regular.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/PublicSans-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/PublicSans-Regular.otf')  format('opentype'); /* Legacy iOS */
}

/* ANIMATIONS */ 

/* Text */

@-webkit-keyframes text-loader {
  0%   { clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  		 opacity: 0;}
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  		 opacity: 1;}
}
@-moz-keyframes text-loader {
  0%   { clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  		 opacity: 0;}
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  		 opacity: 1;}
}
@-o-keyframes text-loader {
  0%   { clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  		 opacity: 0;}
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  		 opacity: 1;}
}
@keyframes text-loader {
  0%   { clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  		 opacity: 0;}
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  		 opacity: 1;}
}

/* Header */

@-webkit-keyframes header-loader {
  0%   { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
  		 opacity: 0;}
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  		 opacity: 1;}
}
@-moz-keyframes header-loader {
  0%   { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
  		 opacity: 0;}
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  		 opacity: 1;}
}
@-o-keyframes header-loader {
  0%   { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
  		 opacity: 0;}
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  		 opacity: 1;}
}
@keyframes header-loader {
  0%   { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
  		 opacity: 0;}
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  		 opacity: 1;}
}

/* Footer */

@-webkit-keyframes footer-loader {
  0%   { clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  		 opacity: 0;}
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  		 opacity: 1;}
}
@-moz-keyframes footer-loader {
  0%   { clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  		 opacity: 0;}
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  		 opacity: 1;}
}
@-o-keyframes footer-loader {
  0%   { clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  		 opacity: 0;}
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  		 opacity: 1;}
}
@keyframes footer-loader {
  0%   { clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  		 opacity: 0;}
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  		 opacity: 1;}
}

/* Button */

@-webkit-keyframes button-loader {
  0%   { opacity: 0;}
  100% { opacity: 1;}
}
@-moz-keyframes button-loader {
  0%   { opacity: 0;}
  100% { opacity: 1;}
}
@-o-keyframes button-loader {
  0%   { opacity: 0;}
  100% { opacity: 1;}
}
@keyframes button-loader {
  0%   { opacity: 0;}
  100% { opacity: 1;}
}


/* Loader */

@-webkit-keyframes main-loader {
  0%   { clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
  		 opacity: 1;}
  100% { clip-path: polygon(0 0, 100% 0%, 100% 0, 0 0);
  		 opacity: 1;}
}
@-moz-keyframes main-loader {
  0%   { clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
  		 opacity: 1;}
  100% { clip-path: polygon(0 0, 100% 0%, 100% 0, 0 0);
  		 opacity: 1;}
}
@-o-keyframes main-loader {
  0%   { clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
  		 opacity: 1;}
  100% { clip-path: polygon(0 0, 100% 0%, 100% 0, 0 0);
  		 opacity: 1;}
}
@keyframes main-loader {
  0%   { clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
  		 opacity: 1;}
  100% { clip-path: polygon(0 0, 100% 0%, 100% 0, 0 0);
  		 opacity: 1;}
}

html {
	font-family: Public;
  	font-size: 16px;
  	line-height: 24px;
  	color: rgba(0, 0, 0, 0.65);
  	background-color: #fff;
}

body {
	left: 0;
	top: 0;
	margin: 0;
	overflow: hidden;
}

::-moz-selection { /* Code for Firefox */
  	color: black;
  	background: rgba(0, 0, 0, 0.35);
}

::selection {
	color: black;
  	background: rgba(0, 0, 0, 0.35);
}

h1, h2 {
	font-size: 0.9em;
  	font-weight: 300;
  	margin: 0;
}

img {
/*	border: rgba(0, 0, 0, 0.04) 1px solid; */	
/*	margin-left: -1px; */
	opacity: 0;
	transform: all;
	transition: all ease 0.5s;
}

.img-visible {
	opacity: 1;
}

a {
	font-size: 0.9em;
	text-decoration: none;
  color: rgba(0, 0, 0, 0.65);
  transition: all ease 0.24s;
  }  

footer a:hover {
  opacity: 0.5;	
}

a:hover + .arrow {
  	opacity: 0.5;
}

header {
	position: absolute;
	display: grid;
	top: 2em;
	left: 0;
	right: 0;
	height: 32px;
	grid-template-columns: repeat(7, 1fr);
	width: 100%;
	z-index: 2;	
}

footer {
	position: absolute;
	display: grid;
	bottom: 2em;
	left: 0;
	right: 0;
	grid-template-columns: repeat(7, 1fr);
	width: 100%;
	z-index: 2;
}

.toggle {
	width: 47px;
	height: 47px;
	margin-top: -16px;
	border-radius: 4px;
	background-color: rgba(0, 0, 0, 0.08);
	transition: all ease 0.5s;
	border: solid 1px rgba(0, 0, 0, 0);
	cursor: pointer;

	opacity: 0;

	-webkit-animation: button-loader 2s forwards; /* Safari 4+ */
  	-moz-animation:    button-loader 2s forwards; /* Fx 5+ */
  	-o-animation:      button-loader 2s forwards; /* Opera 12+ */
  	animation:         button-loader 2s forwards; /* IE 10+, Fx 29+ */

  	animation-timing-function: ease;
  	animation-delay: 3s; /* or: Xms */	
}

.toggle-active {
	background-color: rgba(0, 0, 0, 0.08);
	border: solid 1px rgba(0, 0, 0, 0.24);
}

.cross {
	margin: 16px 0 0 16px;
	opacity: 1;
}

.rotation {
	transform: rotate(135deg);
}

.external {
	clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
	opacity: 0;

	-webkit-animation: footer-loader 1.5s forwards; /* Safari 4+ */
  	-moz-animation:    footer-loader 1.5s forwards; /* Fx 5+ */
  	-o-animation:      footer-loader 1.5s forwards; /* Opera 12+ */
  	animation:         footer-loader 1.5s forwards; /* IE 10+, Fx 29+ */

  	animation-timing-function: cubic-bezier(0.76, 0.07, 0, 0.99);
  	animation-delay: 2.6s; /* or: Xms */		

}

.sendmail {
	  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>💌</text></svg>")
      16 0, auto;
}

.external p {
	margin: 0;
	font-size: 0.9em;
}

.gray-back {
	width: 100%;
	height: 100vh;
	background-color: #3e3e3e;
	z-index: 4;
	position: absolute;
	clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);

	-webkit-animation: main-loader 1s forwards; /* Safari 4+ */
  	-moz-animation:    main-loader 1s forwards; /* Fx 5+ */
  	-o-animation:      main-loader 1s forwards; /* Opera 12+ */
  	animation:         main-loader 1s forwards; /* IE 10+, Fx 29+ */

  	animation-timing-function: cubic-bezier(0.76, 0.07, 0, 0.99);
  	animation-delay: 0.5s; /* or: Xms */		
}


.columns {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	width: 100%;
}

.column {
	display: inline-grid;
	border-right: solid 1px rgba(0, 0, 0, 0.06);
	height: 100vh;
	z-index: -2;
}

.column-1 {
	border-right: none;
}

/* COLUMNS ANIMATED */

.logo {
	grid-column-start: 2;
	grid-column-end: 2;
	clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);	
	opacity: 0;	

	-webkit-animation: header-loader 1.5s forwards; /* Safari 4+ */
  	-moz-animation:    header-loader 1.5s forwards; /* Fx 5+ */
  	-o-animation:      header-loader 1.5s forwards; /* Opera 12+ */
  	animation:         header-loader 1.5s forwards; /* IE 10+, Fx 29+ */

  	animation-timing-function: cubic-bezier(0.76, 0.07, 0, 0.99);
  	animation-delay: 1s; /* or: Xms */	

    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>👋</text></svg>")
      16 0, auto;	

}

.logo-image {
	padding: 1px;
}

.title {
	grid-column-start: 6;
	grid-column-end: 6;
	cursor: default;
	opacity: 0;
	clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);	

  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>👋</text></svg>")
      16 0, auto;


	-webkit-animation: header-loader 1.5s forwards; /* Safari 4+ */
  	-moz-animation:    header-loader 1.5s forwards; /* Fx 5+ */
  	-o-animation:      header-loader 1.5s forwards; /* Opera 12+ */
  	animation:         header-loader 1.5s forwards; /* IE 10+, Fx 29+ */

  	animation-timing-function: cubic-bezier(0.76, 0.07, 0, 0.99);
  	animation-delay: 1s; /* or: Xms */		
}

.tagline {
	grid-column-start: 7;
	grid-column-end: 7;
	cursor: default;
	clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);	
	opacity: 0;	

	-webkit-animation: header-loader 1.5s forwards; /* Safari 4+ */
  	-moz-animation:    header-loader 1.5s forwards; /* Fx 5+ */
  	-o-animation:      header-loader 1.5s forwards; /* Opera 12+ */
  	animation:         header-loader 1.5s forwards; /* IE 10+, Fx 29+ */

  	animation-timing-function: cubic-bezier(0.76, 0.07, 0, 0.99);
  	animation-delay: 1.2s; /* or: Xms */		
}

.arrow {
  	transform: all;
  	transition: all ease 0.24s;
  	margin-left: 0.25em;
}

.arrow-hover {
	margin-left: 8px;
}

.content {
	display: grid;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	grid-template-columns: repeat(7, 1fr);
	width: 100%;
	transition: all 0.5s ease;
}

.text {
	grid-column-start: 2;
	grid-column-end: 6;
	max-width: 512px;
	clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
	opacity: 0;

	-webkit-animation: text-loader 1s forwards; /* Safari 4+ */
  	-moz-animation:    text-loader 1s forwards; /* Fx 5+ */
  	-o-animation:      text-loader 1s forwards; /* Opera 12+ */
  	animation:         text-loader 1s forwards; /* IE 10+, Fx 29+ */

  	animation-timing-function: cubic-bezier(0.76, 0.07, 0, 0.99);
  	animation-delay: 1.6s; /* or: Xms */
}

.text a {
	font-size: 1em;
	text-decoration: none;
	border-bottom: 2px rgba(0, 0, 0, 0.65) dotted;
}

.images {
	display: grid;
	position: absolute;
	top: 0;
	left: 0;
	grid-template-columns: repeat(7, 1fr);
	width: 100%;
	z-index: -1;
	transition: all ease 1s;
	transition-delay: 0.5s;
}

.index-change {
	z-index: 1;
}

.image-1 {
	grid-column-start: 2;
	grid-column-end: 4;
	margin-top: 2.2em;
	width: 100%;
	max-width: 380px;
	clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
	transition: all cubic-bezier(0.76, 0.07, 0, 0.99) 1s;
}

.image-1-visible {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.image-2 {
	grid-column-start: 6;
	grid-column-end: 8;
	margin-top: 2.5em;
	width: 100%;
	max-width: 356px;
	clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
	transition: all cubic-bezier(0.76, 0.07, 0, 0.99) 1s;
	transition-delay: 0.2s;
}

.image-2-visible {
	clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
}


.image-3 {
	grid-column-start: 1;
	grid-column-end: 3;
	margin-top: -8em;
	grid-row: 3;
	width: 100%;
	max-width: 380px;
	clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
	transition: all cubic-bezier(0.76, 0.07, 0, 0.99) 1s;
	transition-delay: 0.4s;
}

.image-3-visible {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.image-4 {
	grid-column-start: 4;
	grid-column-end: 6;
	margin-top: -7em;
	width: 100%;
	max-width: 380px;
	clip-path: polygon(0 0, 100% 0%, 100% 0, 0 0);
	transition: all cubic-bezier(0.76, 0.07, 0, 0.99) 1s;
	transition-delay: 0.3s;
}

.image-4-visible {
	clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);
}

.image-5 {
	grid-column-start: 7;
	margin-top: 4.5em;
	width: 100%;
	max-width: 300px;
	clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
	transition: all cubic-bezier(0.76, 0.07, 0, 0.99) 1.2s;
}

.image-5-visible {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.image-6 {
	grid-column-start: 3;
	grid-column-end: 5;
	margin-top: -1em;
	width: 100%;
	max-width: 340px;
	clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);	
	transition: all cubic-bezier(0.76, 0.07, 0, 0.99) 1.4s;
	transition-delay: 0.4s;	
}

.image-6-visible {
	clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
}

.image-7 {
	grid-column-start: 6;
	grid-column-end: 8;
	margin-top: 2em;
	width: 100%;
	max-width: 500px;
	clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
	transition: all cubic-bezier(0.76, 0.07, 0, 0.99) 1.4s;
	transition-delay: 0.8s;	
}

.image-7-visible {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}


.headshot {
	background-color: red;
	background-image: url("http://ikerfernandez.com/images/headshot.jpg");
	background-size: cover;
	width: 500px;
	height: 400px;
	position: absolute;
	display: flex;
	left: 50%;
	margin-left: -250px;
	margin-top: -200px;
	top: 50%;
	z-index: 2;

	clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
	transition: all cubic-bezier(0.76, 0.07, 0, 0.99) 0.8s;
	transition-delay: 0.2s;
}

.headshot-visible {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}


/* MEDIA QUERIES FOR IMAGES */

@media (max-width: 1600px) { 

	.image-1 {
		max-width: 340px;
	}

}

@media (max-width: 1500px) { 

	.image-3 {
		max-width: 340px;
	}

}

@media (max-width: 1450px) { 

	.image-4 {
		max-width: 320px;
	}

}

@media (max-width: 1300px) { 

	.image-1 {
		max-width: 260px;
	}

	.image-2 {
		max-width: 300px;
	}

	.image-3 {
		max-width: 240px;
	}

	.image-4 {
		max-width: 280px;
	}

}

@media (max-width: 1150px) { 

	.image-6 {
		max-width: 290px;
	}

	.image-4 {
		max-width: 250px;
	}

}

@media (max-width: 1024px) { 

	.image-1 {
		max-width: 232px;
	}

	.image-3 {
		max-width: 220px;
	}

	.image-6 {
		max-width: 280px;
	}

	.image-4 {
		max-width: 210px;
	}

}

@media (max-width: 900px) { 

	.title {
	    grid-column-start: 4;
	    grid-column-end: 6;
    }	

	.tagline {
	    grid-column-start: 6;
	    grid-column-end: 8;    
	}    

	.images {
		display: none;
	}

	.headshot-visible {
		display: none;
	}

	.toggle {
		display: none;
	}

	.external a,
	.external p {
		font-size: 0.75em;
}


}

@media (max-width: 768px) { 

.external a,
.external p {
	font-size: 0.75em;
}

.external p {
    margin-top: 1px;
}

}	


@media (max-width: 680px) { 


	footer {
		display: block;
		margin-left: 20px;
		position: absolute;
		display: flex;
		max-width: 300px;
		flex-wrap: wrap;
		bottom: 1em;
	}


	.arrow {
		display: none;
	}

	.external {
		margin-bottom: 8px;
		margin-right: 40px;
		width: 60px;
	}

	.external:last-child {
		margin-bottom: 8px;
		margin-right: 40px;
		width: 130px;
	}

	.external a,
	.external p {
		font-size: 0.9em;
	}

	.external p {
	    margin-top: 0;
	}
}	


@media (max-width: 600px) { 

	.logo {
    	grid-column-start: 1;
    	grid-column-end: 1;
    	margin-left: 20px;
	}

	.title {
    	grid-column-start: 2;
    	grid-column-end: 5;
    	margin-left: 20px;
	}	

	.tagline {
    	grid-column-start: 5;
    	grid-column-end: 8;
	}

	.columns {
		display: none;
		grid-template-columns: repeat(4, 1fr);
		width: 100%;
}

	.column {
		display: none;
		border-right: solid 1px rgba(0, 0, 0, 0.06);
		height: 100vh;
		z-index: -2;
	}

	.column-1 {
		border-right: 1px solid rgba(0, 0, 0, 0);
	}

	.column-5,
	.column-6,
	.column-7 {
		display: none;
	}

	.content {
	    display: block;
	    position: relative;
	    padding-top: 32em;
	    width: 100%;
	    max-width: 420px;
	    transition: all 0.5s ease;
	}

	.text {
	    margin: 0 20px;
	}	

	.images {
		display: none;
	}

	.toggle {
		display: none;
	}

}