a {
	/*cursor: url("https://chrisnager.github.io/cursors/bulbasaur.cur"), auto;*/
	/* cursor: url("https://chrisnager.github.io/cursors/squirtle.cur") 0 16, pointer; */
}

header::selection {
  background: #0000ff;
}
span::selection {
  background: #0000ff;
}
div::selection {
  background: #0000ff;
}
p::selection {
  background: #0000ff;
}
a::selection {
  background: #0000ff;
}
h1::selection {
  background: #0000ff;
}
h3::selection {
  background: #0000ff;
}
ul::selection {
  background: #0000ff;
}
li::selection {
  background: #0000ff;
}


/*-----------------------------------------------------------
    Testing
-------------------------------------------------------------*/

.project-fw {
	position: relative;
	/*margin-bottom: 10em;*/
	margin-bottom: calc(2vw * 1.041);
}

.box-wrapper {
	height: 500px;
	position: relative;
}

/* .box, .box-static {
	background-size: cover;
	height: 525px;
	width: 100%;
	margin: 0 auto;
	position: absolute;
	top: 0;
	transform-origin: 50% 0%;
} */

.static .box-wrapper {
	transform: scale3d(.959, .959, 1);
}

.static .box-caption {
	padding-top: 50px;
}

.voyage .box-wrapper div {
	background-image: url('../images/overhead.jpg');
	background-position: center;
}

.uber .box-wrapper div {
	background-image: url('../images/krypton.jpg');
	background-position: center;
}

.safwat .box-wrapper div {
	background-image: url('../images/saf-wave.jpg');
	background-position: center;
}

.box.shrink {
	transform: scale3d(.959, .959, 1);
	transition: all ease-out .5s;
}


.box.grow {
	transform: scale3d(1, 1, 1);
	transition: all ease-out .5s;
}


.box-caption {
	padding: 40px 2.5vw;
}


.box-caption h3 {
	font-size: 2em;
	font-family: graphik-medium, arial;
}


.box-caption a, .box-caption a:visited {
	color: #ffffff;
}


.box-caption p {
	margin: 0;
	padding: 0;
	font-size: 2em;
	color: hsla(0, 0%, 100%, 0.5);
	width: 60%;
	line-height: 1em;
	font-family: var(--body-fam-offwhite), sans-serif;
}


.box-detail img {
	width: 32vw;
	position: absolute;
	bottom: 1em;
	right: 8.5vw;
}







/* .social-links {
	position: fixed;
	bottom: calc(36px - 1em);
	right: 2em;
	z-index: 999;
}

.sq3 {
	width: 96vw;
	margin: 0 auto;
	text-align: center;
}

.roww {
	width: 100%;
}

.square {
	margin: 0;
	display: inline-block;
	background-color: #2d2d;
	width: 33%;
	max-width: 33.333%;
	height: 31vw;
	padding-right: 50px;
} */





.mt2vw {
	margin-top: 2vw;
}


/*----------------------*/






/*-----------------------------------------------------------
    Document
-------------------------------------------------------------*/












/* .mb20 {
	margin-bottom: 20em;
}

span.inline-heavy {
    font-weight: 600;
} */


/**, ::after, ::before {
	box-sizing: border-box;
}*/





/*-----------------------------------------------------------
    Header
-------------------------------------------------------------*/



/*-----------------------------------------------------------
    NEW SPINNER
-------------------------------------------------------------*/
/*#region*/
#spinner {
	mix-blend-mode: difference;
	position: fixed;
	bottom: 0;
	z-index: 9999999;
}

#spinner #gear, #spinner #line {
	/* fill: var(--text-color); */
	fill: var(--intro-bg);
	width: 32px;
    height: 32px;
	position: fixed;
    bottom: 1em;
	z-index: 999;
	/* right: calc(1.5vw); */
	right: var(--margsX);
}

/*#endregion*/


/* .informationOld {
	position: fixed;
	right: 0;
	top: 0;
	width: 36vw;
	height: 100vw;
	background-color: #272727;
	z-index: 2;
	display: none;
} */

.page-title {
	position: relative;
	background-color: var(--intro-bg);
	/* height: calc(var(--margsX) * 8); */
	/* height: 60vh; */
	/* height: 150px; */
	height: 25vh;
	
	
}

.page-title-box {
	position: absolute;
	padding-top: 1em;
	margin-left: var(--margsX);
	bottom: .05em;
}

.page-title h1 {
	font-family: var(--body-fam-offwhite);
	color: var(--title-color);
	font-size: 3.5em;
}

.page-title h1, .page-title p {
	display: inline-flex;
}

.page-herro {
	background-image: url(../images/proj/ludlow/bed-01.jpg);
	background-size: cover;
	width: 100%;
	height: 500px;
}



/* ewlkfmgnwoij */


.background: #000; {

}


.about a {
	color:#000;
	visited: "0000ff";
}


.cc-license {
	margin: 0;
}

.empty {
	margin-top: 250px;
}

span.cc-license a {
	color: #fff;
	opacity: 0.9;
	text-decoration: none;
	font-style: italic;
}

span.cc-license a:visited {
	color: #fff;
	opacity: 0.9;
}

span.cc-license a:hover {
	color: greenyellow;
	opacity: 0.9;
}




  



/*-----------------------------------------------------------
    FOOTER
-------------------------------------------------------------*/
/*#region*/
.footy {
	display: flex;
	width: 100%;
	min-height: 150px;
	font-family: var(--body-fam);
	background-color: var(--intro-bg);
	/* padding: 1.5em calc(var(--margsX) + 32px + 3em) 1.1em 0; */
	padding: 1.5em 0 1.1em var(--margsX);
	/* text-transform: uppercase; */
	/* text-align: left; */
	/* margin-top: calc(var(--margsX) * 4); */

}

.footy-links, .footy-links a {
	color: var(--text-color);
	align-self: flex-end;
}

.footy img {
	height: 1em;
}


/* -mailto copy and disable auto-open- */

.mailto-link {
	position: relative;
	/* padding: 8px 0; */
}

.mailto-message {
	top: 1px;
	left: 50%;
	margin-bottom: -5px;
	/* transform: translate(-400%, -100%); */
	position: absolute;
	display: none;
	width: auto;
	white-space: nowrap;
	font-size: 12px;
	background-color: #027dff;
	color: white;
	padding: 2px 6px;
	border-radius: 2px;
}

.mailto-link:hover .mailto-message,
.mailto-link:focus .mailto-message,
.mailto-link:focus-within .mailto-message {
	display: block;
}

.information-container .mailto-message {
	transform: translate(-22%, 120%);
}
/*#endregion*/



/*-----------------------------------------------------------
    Intro
-------------------------------------------------------------*/

/*#region*/
.intro {
	padding-top: 3em;
	padding-left: 3vw;
/*	background-color: #121212;*/
	/* height: 90vh; */
	z-index: 9;
	position: relative;
	transition: all ease-out 1s;
	pointer-events: none;
	/* height: 400px; */
	width: 100%;
	height: 90vh;
}


.intro p {
	color: #fff;
	margin: 0;
	padding: 0;
	margin-top: 4em;
}

.hello {
	position: relative;
	/* padding: 5em 0; */
	top: 50%;
	transform: translateY(-50%);

}

.hey {
	font-family: var(--body-fam), sans-serif;
	font-family: graphik-regular, sans-serif;
	color: #ffffff;
	font-size: 42px;
	font-weight: 500;
	display: none;
}


.blurb {
	/* width: 35vw; */
	/* height: 90vh; */
	font-family: var(--body-fam), sans-serif;
	font-family: graphik-regular, sans-serif;
	color: #ffffff;
	font-size: 24px;
	pointer-events: auto;

}

.hey, .blurb {
	color: #000;
}

.about {
    /* transform: translateY(-50%); */
}


.who {
	font-family: graphik-medium;
}

.what {
	opacity: 0.8;
	color: #585858;
	/*color: #929292;*/
	font-family: graphik-regular;
}

.prev {
	font-size: 18px;
	opacity: 0.8;
	color: #585858;
	position: relative;
	margin-top: 1.05em;
	font-family: source-code-pro;
	font-weight: 500;
	font-size: .65em;
	margin-top: 1em;
}

.prev a {
	opacity: .8;
	color: #585858;
	text-decoration: underline;
}

.prev a:hover {
	color: #0000FF;
}


/* .upto {
	font-size: 16px;
	text-transform: uppercase;
	font-family: graphik-regular;
	letter-spacing: -0.02em;
	position: absolute;
	bottom: 2vw;
} */


/* .look-here {
	position: absolute;
	bottom: 5vh;
	display: none;
} */

/* .look-here span {
	font-family: Basis Grotesque Pro, sans-serif;
	font-family: graphik-regular, sans-serif;
	color: rgb(14, 237, 207);
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: .111em;
	letter-spacing: -.02em;
} */


.dark-bg {
	background-color: #121212;
}

.tan-bg {
	background-color: rgb(255, 226, 199);
}

.white-txt {
	color: #ffffff;
}


/*#endregion*/

/*-----------------------------------------------------------
    Misc Homepage
-------------------------------------------------------------*/
/*#region*/
.misc {
	margin-top: 200px;
}

.misc h1 {
		color: #fff;
	font-family: graphik-regular, sans-serif;
	text-transform: uppercase;
	margin-left: 3vw;
	padding-bottom: .5em;
	/*font-size: 42px;*/
	font-size: 18px;
}

.ludlow {
	margin-top: 2vw;
}
/*#endregion*/


/*-----------------------------------------------------------
    Grid
-------------------------------------------------------------*/
/*#region*/
.grid-two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5vw 1.5vw;
}

.grid-two img {
	display: block;
}

.two-full {
	grid-column: 1 / 3;
	gap: 1.5vw;
}

.two-full img{
	/* margin-bottom: 3em; */
}
.grid-four {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 1.5vw 1.5vw;
}

.four-full {
	grid-column: 1 / 5;
}

.grid-three {
	display: grid;
	/* grid-template-columns: 1fr 1fr; */
	gap: 1.1em;
}

.three-full {
	grid-column: 1 / 4;
}

.two-full {
	grid-column: 1 / 3;
}

/*#endregion*/

/*-----------------------------------------------------------
    Media
-------------------------------------------------------------*/
/*#region*/
@media screen and (max-width: 860px) {
	.information-container {
		width: 50vw;
	}
}






/* @media screen and (max-width: 660px) {


	#my-name, #nav {
		padding-top: 3vw;
	}

	.information-container {
		width: 100vw;
	}

	.intro {
		height: 75vh;
	}

	.blurb {
		width: 90vw;
	}

	.about {
		top: 25vh;
	}

	

	#home-gal {
		margin-top: -1em;
	} */

	/*#endregion*/










































/*-----------------------------------------------------------
    Navigation
-------------------------------------------------------------*/
/*#gear {
    background: url('../images/circle-white.svg');
    width: 32px;
    height: 32px;
    position: fixed;
    top: 4em;
    right: calc(15px + 4vw);
    left: calc(4.5vw);
    z-index: 999;
}

#line {
	background: url('../images/line-white.svg');
    width: 32px;
    height: 32px;
    position: fixed;
    top: 4em;
    right: calc(15px + 4vw);
    left: calc(4.5vw);
    z-index: 999;
}*/

#name {
	position: fixed;
	right: calc(15px + 4vw);
	/*left: 20vw;*/
	top: 4.45em;
	font-family: 'graphik-medium', sans-serif;

	font-size: 16px;
	z-index: 999;
	letter-spacing: .5px;
}

#name-alt {
	position: fixed;
	left: calc(15px + 4vw);
	/*left: 20vw;*/
	top: 3em;
	font-family: 'graphik-medium', sans-serif;

	font-size: 16px;
	z-index: 999;
	letter-spacing: .5px;
}

#nav90 {
	position: fixed;
	/*-webkit-transform-origin: 50% 0%;*/
	transform-origin: top left;
	/*left: calc(-5vw);*/
	left: 4.75vw;
	top: 14em;
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg) translate(0em, 0em) ;
	z-index: 999;
}

#work, #about, #contact, #four {
	position: relative;
	font-family: 'graphik-regular', sans-serif;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0px;
}

#logo {
	position: fixed;
	/*-webkit-transform-origin: 50% 0%;*/
	transform-origin: top left;
	/*left: calc(-5vw);*/
	left: calc(4.5vw);
	/*top: 15.75em;*/
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg) translate(0em, 0em) ;
	z-index: 999;
	top: 4.25em;
	font-size: 1.5em;
	font-family: 'maison-neue-demi', sans-serif;
	font-family: 'graphik-medium', sans-serif;
	font-size: 20px;
	display: none;
}

#work {
	right: calc(20vh);
}


#about {
	right: calc(35vh);
}


#contact {
	right: calc(50vh);

}

#four {
	position: fixed;
	/*-webkit-transform-origin: 50% 0%;*/
	transform-origin: top right;
	/*left: calc(-5vw);*/
	right: 5vw;
	top: 50vh;
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg) translate(0em, 0em) ;
	z-index: 999;
}




/*-----------------------------------------------------------
    Text 
-------------------------------------------------------------*/

/* body p {
	font-family: 'graphik-regular', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 13px;
	line-height: 1.8em;
	line-height: 28px;
	letter-spacing: .25px;
	color: #777;

} */






h2 {
	/* letter-spacing: 1px;
	margin-bottom: 15px; */
}













/*-----------------------------------------------------------
    Misc
-------------------------------------------------------------*/


/*Custom Cursor*/
.magnify {
	/*cursor: crosshair;*/
	/*cursor: url("https://chrisnager.github.io/cursors/bulbasaur.cur"), auto;
	cursor: url("https://chrisnager.github.io/cursors/squirtle.cur") 0 16, pointer;*/
	cursor: crosshair;
}

/*#scrollUp {
  border: 1px solid #787878;
  border-radius: 50%;
  font-size: 20px;
  outline: none;
  height: 30px;
  width: 30px;
  cursor: pointer;
  display: none;
  position: fixed;
  bottom: 1.5em;
  right: 5vw;
  z-index: 999;
  text-align: center;
  font-weight: 800;

}

#scrollUp:hover {
	background-color: lightgrey;
	border: 2px solid lightgrey;
}*/
}