@import url(https://use.typekit.net/rvi6hre.css);
@import url("https://use.typekit.net/cyr4nti.css");


/* ---- define, html, body, img, figcaption, h1-3, p, a, li, nav, nav a, ul, video ---- */

html{
 	cursor: crosshair;
 	background-color: #ddd;
}

body{
	font-family: neue-haas-unica, sans-serif;
	/*font-family: degular, sans-serif;*/
	font-size: 1em;
	font-weight: 300;
	color: #333;
	/*margin: 0 2rem 0 2rem;*/
	margin: 0;
	/*padding-top: .5rem;*/
	background-color: #ddd;
	position: relative;
	cursor: crosshair;
}

nav{
	font-size: 1.2em;
	font-weight: 300;
	padding: .8rem 2rem .8rem 2rem;
	position: fixed;
	width: 100%;
	z-index: 100;
	color: #333;
	border-bottom: 1px solid #333;
	background-color: #ddd;

}

nav a{
	color: #333;
	font-weight: 400;
	margin: 0;
	/*cursor: none;*/
}

section{
	padding-top: 3rem;
}

#hidenav1{
	display: inline;
}

#hidenav2{
	display: none;
}

.nav-left:hover #hidenav1{
	display: none;
}

.nav-left:hover #hidenav2{
	display: inline;
}

.nav-left span{
	/*font-style: normal;*/
}


img{
	width: 100%;
	/*margin: 0;*/
	display: block;
}

/*.imgborder{
	border: 1px solid #333;
}*/

figure{
	margin: 0;
	display: inline-block;
}

figcaption{
	font-size: 0.85em;
	color: #999999;
	margin-top: 0.3rem;
	margin-bottom: .8rem;
}

video{
	width: 100%;
	display: block;
}

video:focus {
	outline: 0;
}

button:focus {outline:0;}

h1{
	/*font-size: 5em;*/
	font-size: 2.5rem;
	line-height: 115%;
	font-weight: 300;
	margin: 0;
	margin-left: -.2rem;
}

.project-page h1{
	font-size: 7em;
}

h2{
	font-size: 1.5em;
	line-height: 130%;
	font-weight: 300;
	margin: 0;
	padding: 0;
	/*margin-bottom: 2.2rem;*/
	margin-top: .9rem;
	/*font-weight: 400;*/
}

h3{
	/*color: #616161;*/
	font-size: 1em;
	font-weight: 300;
}

h4{
	font-size: 1.2em;
	font-weight: 700;
}

a{
	text-decoration: none;
	color: #333;
	margin: 0;
	padding: 0;
}

a:hover{
	font-style: italic;
	cursor: crosshair;
}

p{
	/*margin: 0;*/
	font-size: 1em;
	color: #333;
	line-height: 170%;
}

.centertext{
	text-align: center;
}

::-moz-selection { background: #7BD6FF; }
::selection { background: #7BD6FF; }

.grey-text{
	color: #999999;
}

.white-text{
	color: #c7c7c7;
}

.orange-text{
	color: #ff5104;
}

b{
	font-weight: 500;
}

.borderleft{
	border-left: 1px solid #333;
}

.borderbottom{
	border-bottom: 1px solid #333;
}

.borderbottom-mobile{
	border-bottom: 1px solid #333;
}

.borderleft-white{
	border-left: 1px solid #8c8c8c;
}

.borderbottom-white{
	border-bottom: 1px solid #8c8c8c;
}

.borderright-white{
	border-right: 1px solid #8c8c8c;
}

.borderright{
	border-right: 1px solid #333;
}




/*//////////////////// HOME PAGE ////////////////////*/

.project-classification{
	text-align: center;
	border-bottom: 1px solid #333;
	font-weight: 400;
	position: relative;
	overflow: hidden;
}

.project-classification p{
		margin: 0;
	padding: 0;
}

.project-list-item{
	border-bottom: 1px solid #333;
}

.project-list-text h1{
	width: 80%;
	margin-left: 1.55rem;
	padding-top: 5%;
	transition: 1s;
}

.indextitle{
	padding-left: 0.4rem;
}

.project-list-text p{
	width: 80%;
	/*margin-bottom: 2rem;*/
	margin-left: 2rem;
}

.project-list-text a{
	color: #333;
	/*transition: 1s;*/
}

.project-list-img{
	/*display: block;*/
	transition: 0.4s;
}

/*.project-list-img:hover{
	transform: scale(1.03);
	transform-origin: 40% 40%;
}*/

/*.text-reveal-container:hover .text-reveal {
    display: block;
    color: #ddd;
}


.text-reveal{
    display: none;
    background: #ff5104;
    margin-left: 40px;
    position: absolute;
    z-index: 1000;
    padding: 0.5rem 1rem 0.5rem 1rem;
    text-decoration: none;
}
*/


/*//////////////////// PROJECT PAGES ///////////////////////*/
.projectpage-header{
	padding: 20rem 0 2rem 2rem;
}

.overview-item{
	padding: .8rem 0 .8rem 0;
	width: 80%;
}

.project-page-item{
	border-bottom: 1px solid #333;
}

.content-item{
	padding: .8rem 0 .8rem 0;
	width: 80%;
}

.projectpage-text p{
	/*margin-left: 2rem;*/
}

.projectpage-text{
	margin-top: 2rem;
}

#glancewidth{
	width: 80%;
}

.bwimg{
	-webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(100%);
}

.bwimg:hover{
	transition: filter .5s ease-in-out;
  -webkit-filter: grayscale(0%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(0%); /* FF 35+ */
}

.blackbkg{
	background-color: #222;
	color: white;
}

.extramargin-4{
	padding-top: 3%;
	padding-bottom: 3%;
}

.bottommargin-4{
	padding-bottom: 3%;
}

#beachyoga{
	width: 20%;
	padding: 1rem 20%;
}

#youtubelink{
	padding-top: .5%;
	padding-bottom: .8%;
}

#youtubelink a{
	/*color: #ff5104;*/
	color: #999;
	font-weight: 400;
	font-size: .85em;
}

.nextproject{
	/*margin-left: 2rem;*/
	font-size: 1.5em;
	padding: 0.1rem 0 0.1rem 2rem;
}

.nextproject:hover{
	background-color: #b0c7d6;
}


#pcpersona{
	margin-top: 2rem;
}

.pc{
	padding-top: 10%;
}

.quote3{
	font-size: 1.5rem;
	line-height: 150%;
	font-weight: 500;
	margin-top: .8rem;
}



.extrawork-top{
	margin-top: 8rem;
}



/*/////////////////// INFO PAGE /////////////////////*/

#profileimg{
	padding: 0;
}

#infoheader{
	margin-top: 0%;
	margin-bottom: 0;
	padding-bottom: 1rem;
	padding-left: .35rem;
	font-size: 2.7em;
	line-height: 130%;
}

#infobody{
	font-size: 1.4em;
	line-height: 140%;
	margin-bottom: 0;
}

.info-item{
	margin: 0;
	flex: 1;
}

.info-item p{
	text-align: center;
	padding: 30% 13%;
	font-weight: 300;
}

.info-item h1{
	text-align: center;
	padding: 30% 20%;
}

.info-item:hover{
	/*background-color: #b0c7d6;*/
}

.info-text{
	text-align: center;
	padding: 15% 10%;
	font-size: 1.5em;
}






/*//////////////////// FOOTER ///////////////////////*/

.footer{
	/*background-color: #333;*/
	padding: 1.5rem 0 1.5rem 0;

}
.footer p{
	font-size: .8em;
	font-weight: 400;
	color: #333;
	text-align: center;
	margin: 0;
	padding: 0;

}


/*//////////////////// CURSOR EFFECTS ///////////////////////*/
.cursor-follower {
    position: absolute;
    background: rgba(255, 81, 4, 1);
    /*background: rgba(84,104,0,1);*/
    /*background-color: white;*/
    mix-blend-mode: exclusion;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    /*z-index: 1;*/
    transition: 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform,
        0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) opacity;
    user-select: none;
    pointer-events: none;
    transform: translate(4px, 4px);
    z-index: 1000;
}

.cursor-follower.active {
    opacity: 1;
    transform: scale(2.5);
}



.cursorgrow {
    /*overflow: hidden;*/
    transition: all 0.5s cubic-bezier(0.25, 1, 0.3, 1);
}

.cursorgrow img {
    /*max-width: 360px;
    opacity: 0.4;*/
    transition: all 0.5s cubic-bezier(0.25, 1, 0.3, 1);
    transform-origin: 90% center;
}

.cursorgrow h1{
	transition: all 0.5s cubic-bezier(0.25, 1, 0.3, 1);
    transform-origin: 90% center;
}


/*//////////////////// FADE-IN EFFECT (not in use) ///////////////////////*/
.tag {
}

.tag {
opacity: 0;
transform: translate(0, 10vh);
transition: all 1s;
}

.tag.visible {
opacity: 1;
transform: translate(0, 0);
}

.yellow {
background-color: lightyellow;
}
.red {
background-color: lightcoral;
}
.blue {
background-color: lightblue;
}
.green {
background-color: lightgreen;
}






/*//////////////////// OVERLAY -> INDEX ///////////////////////*/
.bkg-pink:hover{
	background-color: #EC7363;
	transition: .8s ease;
}

.flex-list-50 {
  position: relative;
}

.overlay-extra {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  /*width: 100%;*/
  opacity: 1;
  transition: .4s ease;
  background-color: rgba(221,221,221,0);
  /*text-align: center;*/
}

.overlay-green {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  /*width: 100%;*/
  opacity: 0;
  transition: .4s ease;
  background-color: #ddd;
  /*text-align: center;*/
}

.overlay-blue {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  /*width: 100%;*/
  opacity: 0;
  transition: .4s ease;
  background-color: #ddd;
  /*text-align: center;*/
}


.flex-list-50:hover .overlay-extra {
  opacity: 1;
}


.projectcaption{
	width: 60%;
	margin: auto;
}

.projectdescription{
	padding: 2rem 2rem 5.6rem 2rem;
}

.projectcaption2{
	width: 70%;
}

.overlaycontent{
	margin-top: 30%;
}

/*.noitalics:hover{
	font-style: none;
}*/

.overlaybox div{
	position: relative;
}
.overlaytext{
	position: absolute;
}




/*//////////////////// ARROW ICONS ///////////////////////*/

.icon .material-icons{
	font-size: 16px;
	/*padding-top: .1rem;*/
}

#youtubelink .material-icons{
	font-size: 12px;
}

.icon:hover .material-icons{
	font-style: italic;
}

#youtubelink:hover .material-icons{
	font-style: italic;
}