@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;
}

.dropbtn:hover {
	color:white;
}

.dropdown-content {
  display: none;
  position: absolute;
  width: fit-content;
  transition: all 0.2s;
}

.dropdown:hover .dropdown-content {
  display: block;
		padding: 1rem;
    background: #111111;
    border-radius:0.5rem;
}

.dropdown:hover .dropbtn {
  color: white;
}

.dropdown a {
  display: block;
  margin-top:1vh;
  text-transform: uppercase;
  color:#4A4A4A!important;
}

.dropdown a:hover {
  color:white!important;

}

.dropdown:hover {
}

.work {
	margin-left:5%;
}

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

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

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

footer {
	padding-bottom:12vh;

}

#home {
	margin-top: 15vh;
}

.home1 {
	grid-row: 1;
	grid-column: span 10;
}

.home1 h2 {
	font-family: 'ZirkonBlack';
	font-size: 4rem;
}

.home1 a {
	border-bottom: 2px solid white;
	text-transform: uppercase;
	font-size: 2rem;
	color:white;
	transition:all 0.2s ease-out;
	cursor:pointer;
}


.home1 a:hover {
	border-bottom: 10px solid white;
}

.home2 {
	grid-row: 1;
	grid-column: span 14/25;
}


/*-------------------- TYPE --------------------*/

.seemore {
border: solid 1px white;
    padding: .5rem;
    width: fit-content;
    margin-top: 1rem;
    transition: all 0.5s ease-out;
	color:white!important;
}


.seemore:hover {
	background:white;
	color:black!important;
}

h1 {
	font-size:1em;
}

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

a h1 {
		transition: all 0.2s;
		display:inline-block;
		color:#4a4a4a;
}

a h1:hover {
		color:white;
}

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;
}

h6 {
	font-size:.8em;
	padding-top:12px;
	color:#666666;
}


.projecttags {
	text-transform:uppercase;
}

.navseven a {
	color:white;
		transition: all 0.2s;
}


.navseven a:hover {
	color:white;
	text-decoration: underline;
}

.credit {
	text-decoration:underline;
}

.smalltype {
	color:#666666;
	margin-bottom:0.5rem;
}

footer h5 a {
	color:#666666;
	transition: all 0.2s;
}

footer h5 a:hover {
	color:white;
	text-decoration:underline;
}

footer h5 {
	color:#666666;
}

.LH {
	text-decoration: underline;
}

.navten a {
	color:white;
}

.navten a:hover {
	text-decoration:underline;
}

/* --------------------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: none;
	font-family:'ZirkonBlack';
	font-size: 2rem;
}

.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;
}

.project-divider {
	border-top:solid 1px white;
	margin-top:6vw;
	grid-column: span 24;
}

.footer-divider {
	border-top:solid 1px #666666;
	margin-top:6vw;
	grid-column: span 24;
}

.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;
}

.navfour {
	grid-column: span 4;	
}

.navthree {
	grid-column:span 3;
}

.ptitle {
	grid-column: span 10;
	grid-row:2;
}

.pdesc, .pcred {
	grid-column: span 7;
	grid-row:2;
}

.infoblock {
	margin-top:7vh;
}


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

			.ptitle {
				grid-column: span 24;
			}

			.pdesc {
				grid-column: span 24;
				grid-row:3;
			}

			.pcred {
				grid-column: span 24;
				grid-row:4;
			}

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

			.caption {display:none;}

			.footer-about {
				display:none;
			}

			.home1 {
				grid-row:1;
				grid-column: span 24;
				margin-bottom:4rem;
			}

			.home2 {
				display:none;
			}

			.home1 h2 {
				font-size: 2rem;
			}

			.home1 a {
				font-size: 1rem;
			}
}