/*

 ____ _____  ____   ____    __      ____  __ __  ___      ___  ____                                   
|    / ___/ /    | /    |  /  ]    |    \|  |  ||   \    /  _]|    \      ▄▄▀▀█▄   ▄▀▀▄▀▀▀▄  ▄▀▀▀█▀▀▄ 
 |  (   \_ |  o  ||  o  | /  /     |  D  )  |  ||    \  /  [_ |  D  )    ▐  ▄▀ ▀▄ █   █   █ █    █  ▐ 
 |  |\__  ||     ||     |/  /      |    /|  |  ||  D  ||    _]|    /        █▄▄▄█ ▐  █▀▀█▀  ▐   █     
 |  |/  \ ||  _  ||  _  /   \_     |    \|  :  ||     ||   [_ |    \       ▄▀   █  ▄▀    █     █      
 |  |\    ||  |  ||  |  \     |    |  .  \     ||     ||     ||  .  \     █   ▄▀   █     █   ▄▀       
|____|\___||__|__||__|__|\____|    |__|\_|\__,_||_____||_____||__|\_|  █  ▐   ▐    ▐     ▐   █        
                                                                                   ▐         ▐         
*/

html {font-size: 12px;}
html, body {margin: 0; padding: 0; height: 100%; background-color: #000000; 
	 -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: antialiased;
	         font-smoothing: antialiased;}
body {overflow-y: scroll;
overflow-x: hidden;}

::-moz-selection {background: #d9e021; color: #000000; text-shadow: none;}
	   ::selection {background: #d9e021; color: #000000; text-shadow: none;}


.mobile {display: inline-block !important;}
.desktop {display: none !important;}

.clear {clear:both;}
.spacer {margin-bottom: 5rem;}
.doublespacer {margin-bottom: 10rem;}

img {width: 100%; height: auto; margin: 0; padding: 0;}
a img {width: 100%; height: auto; margin: 0; padding: 0;}

.embedvid {position: relative; height: 0; overflow: hidden; max-width: 100%;} 
.embedvid iframe, .embedvid object, .embedvid embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.ratio-16-9 {padding-bottom: 56.25%;}
.ratio-9-16 {padding-bottom: 177.778% !important;}
.ratio-21-9 {padding-bottom: 42.1875%;}
.ratio-1-1 {padding-bottom: 100%;}
.ratio-4-3 {padding-bottom: 75%;}
.ratio-clouds {padding-bottom: 28.125%;}

* { cursor: none !important; }
#cursor {display: block; position: absolute; z-index: 9999; pointer-events:none; 
	width: 1.2rem; height: auto; } 
/*	width: 6.666rem; */
@media only screen and (max-width: 960px) {
	* { cursor: default !important; }
	#cursor{display: none;}
}


/* Typography */

/* H1 - Nav links, hyperlinks no underline
   H2 - Same style as H1 but links have underline
   H3 - Serif all caps heading, same size as P
   P - smaller body copy */

h1, h2, h3, p, ul li {margin: 0; padding: 0; color: #BF6EFF; text-decoration: none; cursor: default; font-weight: normal;}
h1, h2 {font-family: 'Zetkin Bold', Helvetica, Arial, sans-serif;}
p, ul li {font-family: 'Zetkin Medium', Helvetica, Arial, sans-serif;}
p {letter-spacing: 0.01rem;}
h1 em, h2 em {font-family: 'Zetkin Bold Oblique', Helvetica, Arial, sans-serif; font-style: normal; font-weight: normal;}
p em, ul li em {font-family: 'Zetkin Medium Oblique', Helvetica, Arial, sans-serif; font-style: normal; font-weight: normal;}
h3, h3 em {font-family: 'Editorial New', Times New Roman, Times, serif; text-transform: uppercase; font-style: normal; font-weight: normal;}
h1, h2, ul li {font-size:  1.75rem; line-height: 2.25rem;} 
/*h3, p {font-size: 1.35rem; line-height: 1.8rem; margin-bottom: 1.8rem;}*/
h3, p {font-size: 1.2rem; line-height: 1.6rem; margin-bottom: 1.6rem;}

a, a:visited, a:hover, a:active {font-size: inherit; line-height: inherit; text-decoration: underline; text-decoration-thickness: 0.1rem;}
a .gridtitle h2 {text-decoration: underline;}
a:hover, a:active, p a:hover, p a:active {color: rgba(217,224,33, 1) !important; text-decoration-color: rgba(217,224,33, 0.5) !important}
h1 a, h1 a:visited, h1 a:hover, h1 a:active {text-decoration: none;}
h2 a, a .gridtitle h2 {text-underline-offset: 0.13em; text-decoration-thickness: 0.1rem;}
p a  {text-underline-offset: 0.15em; text-decoration-thickness: 0.08rem;}

a, a:visited {color: rgba(191, 110, 255, 1);}
a, a .gridtitle h2 {text-decoration-color: rgba(191, 110, 255, 0.6);}

.glow {
  animation: glow 6s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {text-shadow: 0 0 1px #a343ff, 0 0 1px #a343ff, 0 0 2px #5c3199, 0 0 3px #5c3199, 0 0 4px #5c3199, 0 0 5px #5c3199;}
  to {text-shadow: 0 0 5px #a343ff, 0 0 5px #a343ff, 0 0 10px #5c3199, 0 0 15px #5c3199, 0 0 20px #5c3199, 0 0 25px #5c3199;}
}



/* Layout */
#container {width: 100%; padding: 0; margin: 0; max-width: 1920px; }
#aboutcontainer {max-width: 1340px; width: calc(100% - 4rem); padding-left: 2rem;}
.textwrap {width: calc(100% - 2.75rem); padding-right: 2.75rem;}
.infoheader.columns {width: 66px;}
.infocontent.columns {width: calc(100% - 70px);}
.contactinfo h2, .contactinfo h3 {display: inline-block; }
.contactinfo h3 {margin-bottom: 0; min-width: 66px;}

#navset {position: fixed; z-index: 100; top: 1.45rem; display: flex; justify-content: space-between;
	left: 2rem; right: auto; width: calc(100% - 4rem);}
#nameset {position: fixed; z-index: 100; top: 1.45rem; 
	left: 2rem; right: auto; width: calc(100% - 4rem);}
.nameseturl:hover > div h3, .nameseturl:active > div h3 {color: rgba(217,224,33, 1) !important;}

#newnav {position: fixed; z-index: 100; top: 0rem; left: 0rem; width: 100%; filter: drop-shadow(0.1rem 0.1rem 0.3rem rgba(0,0,0,0.6));}
/*	backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); */
.newnavname.columns {width: calc(50% - 2rem); margin-left: 2rem; padding: 2.05rem 0 0;}
.newnavnav.columns {width: calc(100% - 4rem); margin: 0 2rem; padding: 1.45rem 0 0.01rem; display: flex; justify-content: space-between;}
#mobilename {margin-top: 0.6rem;}
.newnavname.columns h3 a, .newnavnav.columns h1 a, .newnavname.columns h3 a:visited, .newnavnav.columns h1 a:visited, .newnavnav.columns h3 a, .newnavnav.columns h3 a:visited {color: #d9e021 !important;}
.newnavname.columns h3 a:hover, .newnavnav.columns h1 a:hover, .newnavname.columns h3 a:active, .newnavnav.columns h1 a:active, .newnavnav.columns h3 a:hover, .newnavnav.columns h3 a:active {color: #ffffff !important;}

@-moz-document url-prefix() { 
	.newnavname.columns {padding: 1.9rem 0 0;}
	#mobilename {margin-top: 0.4rem;}
}

.navedii.columns {width: calc(50% - 2.05rem);}
.navedir.columns {width: calc(50% - 2rem);}
#navname a svg {width: calc(100% - 4rem); padding: 0 2rem;}
#navname {margin-top: -4rem !important;}

#cursor .cursorshape {fill: #d9e021;}
#navlogo .logoshape {fill: #d9e021;}
#navlogo:hover > .logoshape {fill: #ffffff;}
.arrow {fill: #BF6EFF;}

.gridtitle {margin-top: 0.85rem;}
.gridlink {text-decoration: none;}
.gridlink:hover {text-decoration: none;}
.gridlink:hover > .gridtitle h3 {color: rgba(217,224,33, 1) !important;}
.gridlink:hover > .gridtitle h2 {color: rgba(217,224,33, 1) !important;}
.gridlink:hover > .gridtitle h2 {text-decoration-color: rgba(217,224,33, 1) !important;}
.gridlink:hover > .arrowwrap .griditem svg .arrow {fill: #d9e021}
.gridtitle h1 {line-height: 2.25rem; margin: 0; padding: 0;}
.gridtitle h3 {line-height: 1.75rem; margin: 0; padding: 0; text-decoration: none;}
hr {width: 100%; padding: 0; margin: -0.5rem 0 0; outline: none;}


#gridcontainer {width: calc(100% - 4rem); padding-left: 2rem; display: none;}
#gridcontainer div:nth-child(5n+4) {padding-left: 20.833%; clear: both;}
#gridcontainer div:nth-child(5n+6) {clear: both;}
.grid.columns {display: block; width: 25%; padding: 0 4.166%; margin-bottom: 5rem;}
.gridmobitem.columns {display: block; margin-bottom: 5rem; }
.grid.columns:hover >  h1 {color: #d9e021;}
.gridmobitem.columns:hover >  h1 {color: #d9e021;}
.griditemwrap {position: relative !important; padding-top: 100%; width: 100%;}
.griditem {position: absolute !important; top: 0; left: 0; bottom: 0; right: 0;}
.griditem img, .griditem svg {max-height:100%; max-width:100%; width: auto; position: absolute; left: 50%; top: 100%;
	-webkit-transform: translate(-50%, -100%);
	   -moz-transform: translate(-50%, -100%);
	    -ms-transform: translate(-50%, -100%);
	     -o-transform: translate(-50%, -100%);
	        transform: translate(-50%, -100%);}

.arrowwrap .griditem svg {max-width: 1.75rem;}

#gridmob {display: block; width: 100%; width: calc(100% - 4rem); margin-left: 2rem;}


.projectinfo {max-width: calc(100% - 4rem); margin-left: 2rem;}
.prevproject.columns {width: calc(33.333% - 2rem); margin-left: 2rem;}
.nextproject.columns {width: calc(33.333% - 2rem); margin-right: 2rem;}
.spaceproject.columns {width: 33.333%;}

.projimage div h1 {text-decoration: none !important;}
.projimage:hover > div h1 {color: #d9e021;}

.prevarrow, .nextarrow {position: relative; width: 56.7%; display: inline-block; margin-top: 0;}
.prevarrow {float: left; margin-left: -24%;}
.nextarrow {float: right; margin-right: -24%;}
.prevarrow:hover > a svg .arrowhover, .nextarrow:hover > a svg .arrowhover {stroke: #d9e021;}
.prevarrow a svg polyline, .nextarrow a svg polyline {stroke-width: 4;}



/* Grid */
.column, .columns {display: inline-block; float: left; margin: 0; padding: 0;}
.column, .typecolumn, .one.columns, .two.columns, .three.columns, .four.columns, .five.columns, .six.columns, .seven.columns, .eight.columns, .nine.columns, .ten.columns, .eleven.columns, .twelve.columns, .logo.columns, .typeone.columns, .typetwo.columns, .typethree.columns, .typefour.columns, .typefive.columns, .typesix.columns, .typeseven.columns, .typeeight.columns, .typenine.columns, .typeten.columns, .typeeleven.columns, .typetwelve.columns {width: 100%;}
.typeone.columns, .typetwo.columns, .typethree.columns, .typefour.columns, .typefive.columns, .typesix.columns, .typeseven.columns, .typeeight.columns, .typenine.columns, .typeten.columns, .typeeleven.columns, .typetwelve.columns {margin-right: 0;}
.offsetbyone, .offsetbytwo, .offsetbythree, .offsetbyfour, .offsetbyfive, .offsetbysix, .offsetbyseven, .offsetbyeight, .offsetbynine, .offsetbyten, .offsetbyeleven, .offsetbytypeone, .offsetbytypetwo, .offsetbytypethree, .offsetbytypefour, .offsetbytypefive, .offsetbytypesix, .offsetbytypeseven, .offsetbytypeeight, .offsetbytypenine, .offsetbytypeten, .offsetbytypeeleven {margin-left: 0;}

@media screen and (min-width: 640px){
	html{font-size: 12px;}
	#navname {margin-top: 4.75rem;}
}
@media screen and (min-width: 900px){
	html{font-size: 14px;}
	#navname {margin-top: 1rem;}
}
@media screen and (min-width: 1420px){
	html{font-size: 16px;}
}

@media only screen and (min-width: 900px) { 

	.mobile {display: none !important;}
	.desktop {display: inline-block !important;}

/*	h3, p {font-size: 1.2rem; line-height: 1.6rem; margin-bottom: 1.6rem;}*/

	#navset {right: 2rem; left: auto; width: calc(50% - 2rem);}
	#nameset {width: calc(41.666% - 2rem);}
	#officeof {top: 1.45rem; }
	.newnavnav.columns {width: calc(50% - 2rem); margin: 0 0rem; padding: 1.45rem 0 1.2rem;}

	#gridcontainer {display: block;}
	#gridmob {display: none;}

	.arrowwrap .griditem svg {max-width: 1.66rem;}

	.infoheader.columns {width: 8.333%;}
	.infocontent.columns {width: 83.333%;}
	.contactinfo h3 {min-width: 108px;}

	.projectinfo {max-width: 600px; margin-left: 0;}

	.prevproject.columns {width: calc(25% - 2rem); margin-left: 2rem;}  
	.nextproject.columns {width: calc(25% - 2rem); margin-right: 2rem;}
	.spaceproject.columns {width: 50%;}

	.prevarrow, .nextarrow {width: 28.35%; margin-top: 0;}
	.prevarrow {margin-left: -12%;}
	.nextarrow {margin-right: -12%;}
	.prevarrow a svg polyline, .nextarrow a svg polyline {stroke-width: 2;}

	.one.columns	{width: 8.333%}
	.two.columns	{width: 16.666%}
	.three.columns	{width: 25%}
	.four.columns	{width: 33.333%}
	.five.columns	{width: 41.666%}
	.six.columns	{width: 50%}
	.seven.columns	{width: 58.333%}
	.eight.columns	{width: 66.666%}
	.nine.columns	{width: 75%}
	.ten.columns	{width: 83.333%}
	.eleven.columns	{width: 91.666%}
	.twelve.columns	{width: 100%}

	.logo.columns {width: 57.5%;}

	.offsetbyone	{margin-left: 8.333%;}
	.offsetbytwo	{margin-left: 16.666%;}
	.offsetbythree	{margin-left: 25%;}
	.offsetbyfour	{margin-left: 33.333%;}
	.offsetbyfive	{margin-left: 41.666%;}
	.offsetbysix	{margin-left: 50%;}
	.offsetbyseven	{margin-left: 58.333%;}
	.offsetbyeight	{margin-left: 66.666%;}
	.offsetbynine	{margin-left: 75%;}
	.offsetbyten	{margin-left: 83.333%;}
	.offsetbyeleven	{margin-left: 91.666%;}
}



/* Font */
@font-face {
	font-family: 'Zetkin Bold';
	src:  url('fonts/Zetkin-Bold.woff2') format('woff2'),
		  url('fonts/Zetkin-Bold.woff') format('woff');
	font-weight: normal; font-style: normal; font-stretch: normal;
}
@font-face {
	font-family: 'Zetkin Bold Oblique';
	src:  url('fonts/Zetkin-BoldOblique.woff2') format('woff2'),
		  url('fonts/Zetkin-BoldOblique.woff') format('woff');
	font-weight: normal; font-style: normal; font-stretch: normal;
}
@font-face {
	font-family: 'Zetkin Medium';
	src:  url('fonts/Zetkin-Medium.woff2') format('woff2'),
		  url('fonts/Zetkin-Medium.woff') format('woff');
	font-weight: normal; font-style: normal; font-stretch: normal;
}
@font-face {
	font-family: 'Zetkin Medium Oblique';
	src:  url('fonts/Zetkin-MediumOblique.woff2') format('woff2'),
		  url('fonts/Zetkin-MediumOblique.woff') format('woff');
	font-weight: normal; font-style: normal; font-stretch: normal;
}
@font-face {
	font-family: 'Editorial New';
	src:  url('fonts/EditorialNew.woff2') format('woff2'),
		  url('fonts/EditorialNew.woff') format('woff');
	font-weight: normal; font-style: normal; font-stretch: normal;
}