@font-face {
	font-family: ZirkonBlack;
	src: url(fonts/GT-Zirkon-Black.woff2);
}

@font-face {
	font-family: ZirkonLight;
	src: url(fonts/GT-Zirkon-Light.woff2);
}

@font-face {
	font-family: ZirkonMed;
	src: url(fonts/GT-Zirkon-Medium.woff2);
}

/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}
/* 2. Remove default margin */
* {
  margin: 0;
}


body {
	background:#111111;
	font-family: ZirkonLight;
	color:white;
	cursor: crosshair;
}


#alt-nav {
	display:none;
}

nav {
		position: fixed;
    width: -webkit-fill-available;
    margin-top:1%!important;
    top:0;
    z-index:2;
    color:#4a4a4a;
}



.work {
	margin-left:5%;
}

.pf {
	position:absolute;
	right:1%;
}

.pf a {
	color:#666666!important;
}

.pf a:hover {
	color:white!important;
}


/* TYPE */

h1 {
	font-size:1em;
}

a {
	color:#afafaf;
	text-decoration:none;
}

a:hover h1 {
	border-bottom:1px solid white;
	color:white;
}

a h1 {
		transition: all 0.2s;
}

figcaption {
		color: #4a4a4a;
    font-family: 'ZirkonMed';
    text-transform: uppercase;
    font-size: .8em;
		line-height: 1em;
    padding-top: 1%;
		opacity:0;
		transition:all .3s ease-out;
}

figure:hover figcaption {
	opacity:1;
}

div.vimeo:hover figcaption {
	opacity:1;
}

#title {
	display:none;
	width: 100%;
    margin: 0 auto;
    text-align: center;
    position: fixed;
    z-index: -1;
	font-family: 'ZirkonBlack';
    color: #121212;
	top: 50%;
   transform: translateY(-50%);
}

#title h2 {
	font-size: 11em;
    margin: 0;
}

#title h3{
    font-size: 3em;
    margin: 0;
}

/* GALLERY */

.biggy {width:71%;}

.big {
	width:70%;
	
}

.bigmed {
	width:50%;
}

.med {
	width:40%;
}

.small {
	width:35%;
}

.tiny {
	width:20%;
}

.left {
	float:left;
}

.right {
	float:right;
}

.vimeo iframe {
	width: 100%;
    height:-webkit-fill-available;
}

iframe {
	border:0;
}

figure {
	margin:0;
}

img {
	width:-webkit-fill-available;
}


.about {
	width:30%;
    display: inline-block;
	vertical-align: top;
		color:#afafaf;

}

.contact {
	width:30%;
    display: inline-block;
    margin-left: 10%;
	color:#afafaf;
}

.about h1, .contact p, .links p {
	line-height:1.5em;
}

.links {
	margin-top:5%;
}

.links a {
	color:white;
}

.ul {
	border-bottom:solid 1px;
}

.contact a {
	border-bottom:solid 1px;
}

.contact a:hover {
	color:white;
}

.eron {
	height:630px; 
}

.pattern {
	height:463px;
}

.demo {
	height:570px;
}

.spectral {
	height:630px;
}

.ravagee {
	height:295px;
}


.medtext {
	font-family: "ZirkonMed";
}

.abt h2 {
	text-transform: uppercase;
}

.abt {
	margin:15vh auto 0 auto;
}

:root{
    --columns: 24;
    --gutter: 12px;
    --side-gap: 24px;
    --max-width: 1440px;
}

.grid-project {
		display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    column-gap: var(--gutter);
    row-gap: var(--gutter);
    align-items: start;
    padding:2vw;
}

.grid-project > .fourteen{ grid-column: span 14; }
.grid-project > .twelve{ grid-column: span 12; }
.grid-project > .ten{ grid-column: span 10; }
.grid-project > .seven{ grid-column: span 7; }
.grid-project > .five{ grid-column: span 5; }
.grid-project > .six{ grid-column: span 6; }
.grid-project > .four{ grid-column: span 4; }

.grid-project div {
	position:relative;
}

.vimeo45 {
	position: relative;
  width: 100%;
  aspect-ratio: 4/5;           /* modern browsers */
  padding-top: 2.25%;            /* 9 / 16 = 56.25% */
  overflow: hidden;
}

.vimeo45 iframe {
	position: absolute; /* fill the wrapper */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.vimeo169 {
	position: relative;
  width: 100%;
  aspect-ratio: 16/9;           /* modern browsers */
  overflow: hidden;
}

.vimeo169 iframe {
	position: absolute; /* fill the wrapper */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.navten {
	grid-column: span 10;
}

.navseven {
	grid-column: span 7;
}



@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

	
    figcaption {display:none;}
  
}

@media (max-width: 480px) and (orientation:portrait) {

		.navten {
			grid-column: span 24;
		}

		.navseven {
			display:none;
		}

		.abt {
			margin:7vh auto 0 auto;
		}

    figcaption {display:none;}
	
}

/* --------- RESPONSIVE ---------

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

	
    figcaption {display:none;}
	
	.eron {height:280px;}
	
	.pattern {height:206px}
	
	.demo {height:264px;}
	
	.spectral {height:262px;}
	
	.about {width:40%;}
	
	.contact {width:40%; margin-left:10%;}
	
	.links {margin-top: 15%}
  
}

@media (max-width: 480px) and (orientation:portrait) {
    .pf {display:none;}
	
	.big {width:100%}

	.med {width:50%}

	.small {width:45%}

	.tiny {width:35%}
	
	section {margin: 100px auto 0 auto}
	
	figure {margin:0 0 4% 0}
	
    figcaption {display:none;}
	
	.eron {height:209px;}
	
	.pattern {height:115px}
	
	.demo {height:228px;}
	
	.spectral {height:186px;}
	
	.about, .contact, .links {width:100%;}
	
	.contact {margin-left:0; margin-top:20%;}
	
	.links {margin-top: 20%}
	
}
 
@media screen and (min-width: 1900px) {
  section {
    width: 75%;
  }
}
*/