/* perfect-scrollbar v0.6.11 */
.ps-container{-ms-touch-action:none;touch-action:none;overflow:hidden !important;-ms-overflow-style:none}.ps-container.ps-active-x>.ps-scrollbar-x-rail,.ps-container.ps-active-y>.ps-scrollbar-y-rail{display:block;background-color:transparent}.ps-container.ps-in-scrolling{pointer-events:none}.ps-container.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail{opacity:.7;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";filter:alpha(opacity=70)}.ps-container.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail>.ps-scrollbar-x{background-color:#ccc}.ps-container.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail{opacity:.7;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";filter:alpha(opacity=70)}.ps-container.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail>.ps-scrollbar-y{background-color:#ccc}.ps-container>.ps-scrollbar-x-rail{display:none;position:absolute;border-radius:4px;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);-webkit-transition:background-color .2s linear, opacity .2s linear;transition:background-color .2s linear, opacity .2s linear;bottom:3px;height:8px}.ps-container>.ps-scrollbar-x-rail>.ps-scrollbar-x{position:absolute;background-color:#ccc;border-radius:4px;-webkit-transition:background-color .2s linear;transition:background-color .2s linear;bottom:0;height:8px}.ps-container>.ps-scrollbar-y-rail{display:none;position:absolute;border-radius:4px;opacity:0.5;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);-webkit-transition:background-color .2s linear, opacity .2s linear;transition:background-color .2s linear, opacity .2s linear;right:3px;width:5px; margin-top: 3px; margin-bottom: 3px;}.ps-container>.ps-scrollbar-y-rail>.ps-scrollbar-y{position:absolute;background-color:#ccc;border-radius:4px;-webkit-transition:background-color .2s linear;transition:background-color .2s linear;right:0;width:5px}.ps-container:hover.ps-in-scrolling{pointer-events:none}.ps-container:hover.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail{opacity:.7;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";filter:alpha(opacity=70)}.ps-container:hover.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail>.ps-scrollbar-x{background-color:#ccc}.ps-container:hover.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail{opacity:.7;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";filter:alpha(opacity=70)}.ps-container:hover.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail>.ps-scrollbar-y{background-color:#ccc}.ps-container:hover>.ps-scrollbar-x-rail,.ps-container:hover>.ps-scrollbar-y-rail{opacity:.6;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter:alpha(opacity=60)}.ps-container:hover>.ps-scrollbar-x-rail:hover{opacity:.7;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";filter:alpha(opacity=70)}.ps-container:hover>.ps-scrollbar-x-rail:hover>.ps-scrollbar-x{background-color:#ccc}.ps-container:hover>.ps-scrollbar-y-rail:hover{opacity:.7;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";filter:alpha(opacity=70)}.ps-container:hover>.ps-scrollbar-y-rail:hover>.ps-scrollbar-y{background-color:#ccc}


/*canvas {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    width: 100vw;
    background-color: transparent!important;
    z-index: 0;
	pointer-events:all!important;
	-webkit-transition: opacity .5s ease-in-out;
	transition: opacity .5s ease-in-out;
}

body.home > * {
	pointer-events: none;
}*/

a, .magnetic {
		pointer-events:all!important;
		cursor: pointer!important;
display: inline-block;
}



canvas.hide {
	opacity: 0;
	-webkit-transition: opacity .5s ease-in-out;
	transition: opacity .5s ease-in-out;
}





 .circle {
	
 position: absolute;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
  margin: -50px 0 0 -50px;
  background: transparent;
  border: solid 2px white;
  border-radius: 80%;
  backface-visibility: hidden;
  visibility: hidden;
  z-index: 999!important;
  pointer-events: none;
  
  transform-origin: center center;
	
	
	-webkit-transition:  margin .5s ease-in-out, width .5s ease-in-out, height .5s ease-in-out;
	transition: margin .5s ease-in-out, width .5s ease-in-out, height .5s ease-in-out;
	
}


.circle .triangle-left {
	transform-origin: center center;
    width: 0;
    height: 0;
    
    margin-top: 20px;
    margin-left: 7.5px;
    
    border-top: 3px solid transparent;
    border-right: 6px solid white;
    border-bottom: 3px solid transparent;
    
    	
	-webkit-transition:  margin .5s ease-in-out, width .5s ease-in-out, height .5s ease-in-out;
	transition: margin .5s ease-in-out, width .5s ease-in-out, height .5s ease-in-out;
}

 .circle .triangle-right {
	  transform-origin: center center;
	width: 0;
	height: 0;
	border-top: 3px solid transparent;
	border-left: 6px solid white;
	border-bottom: 3px solid transparent;
	
	   margin-top: -6px;
    margin-left: 30px;
    
	-webkit-transition:  margin .5s ease-in-out, width .5s ease-in-out, height .5s ease-in-out;
	transition: margin .5s ease-in-out, width .5s ease-in-out, height .5s ease-in-out;
}


/* Smooth Scroll Content */
#smooth-content {
padding-bottom: 220px;
}

.single-projects #smooth-content {
    padding-bottom: 0px;
}




/****** DRAG - Mouse DOWN */

body.down-mouse .circle {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 50%;
  left: 50%;
  margin: -50px 0 0 -50px;
  background: transparent;
  border: solid 2px white;
  border-radius: 80%;
  backface-visibility: hidden;
  visibility: hidden;
  z-index: 999!important;
  pointer-events: none;
  
  transform-origin: center center;
  
  	
	-webkit-transition:  margin .5s ease-in-out, width .5s ease-in-out, height .5s ease-in-out;
	transition: margin .5s ease-in-out, width .5s ease-in-out, height .5s ease-in-out;
}

body.down-mouse .circle .triangle-left {
	transform-origin: center center;
    width: 0;
    height: 0;
    
    margin-top: 12px;
    margin-left: -15px;
    
    border-top: 3px solid transparent;
    border-right: 6px solid white;
    border-bottom: 3px solid transparent;
    
    	
	-webkit-transition:  margin .5s ease-in-out, width .5s ease-in-out, height .5s ease-in-out;
	transition: margin .5s ease-in-out, width .5s ease-in-out, height .5s ease-in-out;
}

body.down-mouse .circle .triangle-right {
	transform-origin: center center;
	width: 0;
	height: 0;
	border-top: 3px solid transparent;
	border-left: 6px solid white;
	border-bottom: 3px solid transparent;
	
	margin-top: -6px;
    margin-left: 35px;
    
    	
	-webkit-transition:  margin .5s ease-in-out, width .5s ease-in-out, height .5s ease-in-out;
	transition: margin .5s ease-in-out, width .5s ease-in-out, height .5s ease-in-out;
}

.hslide div {
      transition: height .65s ease-in-out, margin-left .65s ease-in-out;
    -webkit-transition: height .65s ease-in-out, border .65s ease-in-out;
}

body.down-mouse  .hslide div {
    height: calc(50vh - 40px);
      transition: height .65s ease-in-out, margin-left .65s ease-in-out;
    -webkit-transition: height .65s ease-in-out, border .65s ease-in-out;
    }




body.down-mouse .hslide div span {
    margin-left: 0px;
    width: 100%!important;
    transition: width .65s ease-in-out, margin-left .65s ease-in-out;
    -webkit-transition: width .65s ease-in-out, margin-left .65s ease-in-out;
}






/* MOUSE FOllOWS 
#box {
z-index: 99999;
position: absolute;
width: 50px;
height: 50px;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
background: transparent;
border: .5px solid white;
border-radius: 50%;
-webkit-backface-visibility: hidden;
pointer-events: none;
opacity: .5;
}
END MOUSE FOllOWS */


















/* HOME - Hero Pagination */
.pagination {
position: fixed;
width: auto;
/*left: calc(20% - 8vw);*/
bottom: 0px;
z-index: 9;
left: 20px;
    display: none !important;
}

.pagination span {
position: relative;
display: inline-block;
padding: 20px 5px;
width: auto;
text-transform: capitalize;
font-size: 36px;
line-height: 38px;
font-weight: 400;
letter-spacing: -1px;
}

.pagination span:nth-child(1) {
margin-right: 40px;
}










/************************************************************************************
*************************************************************************************

GLOBAL STYLES

/************************************************************************************
************************************************************************************/

* {
box-sizing: border-box;
}

body {
/*background-color: #f5f0e9d4; #ebe6da;
background: #fafeff;
background-color: #00f35d;*/
  /*background-color: #f6f4f4; */
/*background-color: #fffef8; */
background-color: #fbfbfb;
/*color: #5A531E;*/
color: #262626;
    font-family: "instrument sans", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;

word-break:break-word;
}


.container {
padding: 0px 60px;
}

.wrapper {
padding: 60px 60px;
}

.clear {
display: block;
position: relative;
clear: both;
}

.clear:after {
content: '';
display: block;
position: relative;
clear: both;
}


/* TYPESET */
h1 { 
    font-family: "instrument sans", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;

font-size: 13px;
letter-spacing: 1px;
text-transform: capitalize;
/*color: #5A531E;*/
color: #262626;


}

a {

/*color: #5A531E;*/
color: #262626;
}

h2 {
font-size: 5.65vw;
line-height: 5.65vw;
font-weight: 400;
text-transform: none;
letter-spacing: -.25px;
text-align: left;
}

h3 { 
  
  font-size: 3.5vw;
  line-height: 4vw;
  font-weight: 400;
  text-transform: none;
  text-align: left;
  
}

h4 {   
font-size: 1.5vw;
line-height: 2vw;
  font-weight: 400;
  text-transform: none;
  text-align: left;
}

h5 { 

  
}

h6 {
/*font-size: 14px;
font-weight: 700;
letter-spacing: 1.15px;
text-transform: uppercase;
margin-bottom: 15px; */
    font-family: "instrument sans", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;



font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 12px; 
}

p {
/*font-size: 16px;
font-weight: 100;
letter-spacing: 1.25px;
text-align: left;
line-height: 28px;*/

font-size: 1.5vw;
font-weight: 400;
letter-spacing: .25px;
text-align: left;
line-height: 2.35vw;
}

p.text-block {
font-size: 1.5vw;
font-weight: 400;
letter-spacing: .25px;
text-align: left;
line-height: 2.35vw;
}

li {
font-style: normal;
font-size: 12px;
font-weight: 400;
line-height: 16px;
letter-spacing: 0px;
text-transform: uppercase;
font-style: normal;
/*color: #5A531E;*/
color: #262626;
text-align: left;
}

a {
cursor: pointer;
/*font-size: 12px;
font-weight: 100;
letter-spacing: 1.15px;
text-transform: lowercase;*/
}
/* END TYPESET */


h2.display {
    text-align: left;	
    margin-bottom: 120px;
    padding-left: 10px;
    padding-right: 20px;
    margin-top: 40vh;
    font-weight: 500;
    line-height: 270px;
    font-size: 220px;
    letter-spacing: -10px;
    text-transform: unset;
}

h3.display {
    text-align: left;	
    font-weight: 400;
    line-height: 13vw;
    font-size: 14vw;
    letter-spacing: -10px;
    text-transform: unset;
}





/* FLEX-BOX */
.flex-container {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -o-flex;
display: flex;
flex-wrap: wrap;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}

.flex-element {
display: inherit;
height: auto;
flex-wrap: wrap;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}	

.align-center {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}

.justify-end {
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}

.space-between {
-webkit-justify-content: space-between;
-ms-flex-pack: space-between;
justify-content: space-between;
}

.align-items-start {
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}

.align-items-end {
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
}

.align-items-stretch {
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}

#align .flex-element {
height: auto;
height: auto;
flex-wrap: wrap;
}
/* END FLEX-BOX */

/************************************************************************************
*************************************************************************************

END GLOBAL STYLES

/************************************************************************************
************************************************************************************/











/************************************************************************************
*************************************************************************************

NAVIGATION

/************************************************************************************
************************************************************************************/

header {
    position: fixed;
    display: block;
    width: 100%;
    padding: 0px 10px;
    z-index: 999;
    top: 0;
}



/* Nav - Items */
nav.main-nav {
width: 100%;
z-index: 2;
vertical-align: top;
}

nav {
z-index: 1;
}

nav.main-nav .navigation {
    width: calc((100% - 12vw) * .65); /* THE MATH: (0.8 x 0.65) = 0.52*/
}

.brand {
    /*width: 200px;
    padding: 0px 5px; */
    /*margin-left: 8vw;*/
}

.brand em {
	font-weight: 100;
}

nav.main-nav a{
text-decoration: none;
vertical-align: top;
}

.navigation a {
text-decoration: none;

/*color: #5A531E;*/
color: #262626;
text-transform: uppercase;
font-size: 12px;
font-weight: 500;
letter-spacing: 1px;
transition: color .35s ease-in-out;
-webkit-transition:  color .35s ease-in-out;
}


/* About Menu */
.menu-open .navigation a/*, .menu-open h1 */{
/*color: #5A531E;*/
color: #262626;
transition: color .35s ease-in-out;
-webkit-transition:  color .35s ease-in-out;
}




/* Brand.
.brand {
display: block;
font-size: 14px;
font-weight: 700;
letter-spacing: 1.15px;
text-transform: uppercase;
margin-bottom: 5px;
}

.brand svg {
width: 35px;
}
 */



/* Sidebar */
.sidebar {
position: fixed;
z-index: 999;
bottom: 0px;
left: 20px;
width: 100vh;
font-size: 12px;
font-weight: 500;
letter-spacing: 1;
text-transform: uppercase;
text-align: left;
padding-left: 4vw;
transform-origin: bottom left;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}

.sidebar span:nth-child(1) {
padding-right: 60px;
}




/*.navigation {
position: fixed;
width: calc(80%;
right: calc(20%);
top: 35px;
z-index: 9999999999;
}

.navigation span {
position: relative;
display: inline-block;
padding: 15px 5px;
width: calc(35% + 50px);
text-transform: uppercase;
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
}*/


/*.nav-item {
display: inline-block;
}

nav.work {
z-index: 2;
}*/


nav span {
display: inline-block;
font-size: 12px;
font-weight: 500;
letter-spacing: 1;
text-transform: lowercase;
}

nav.info {
float: right;
position: relative;
display: inline-block;
cursor: pointer
}

nav.info .nav-info:hover {
background-color: rgba(27,27, 27, 1);
color: #f6f2ec;


transition: color .35s ease-in-out, background-color .35s ease-in-out;
-webkit-transition: color .35s ease-in-out, background-color .35s ease-in-out;
}

.nav-info {
   /* font-size: 36px;*/
font-weight: 400;
/*line-height: 38px; */
letter-spacing: -0.5px;
text-align: center;
text-transform: Capitalize;
/*line-height: 5px;*/
/*vertical-align: middle;*/
/*border: .5px solid rgba(27,27, 27, .25);
padding: 0px 5px;*/
/*padding-bottom: 13px;
border-radius: 25px;
margin-top: 10px;*/
transition: color .35s ease-in-out, background-color .35s ease-in-out;
-webkit-transition: color .35s ease-in-out, background-color .35s ease-in-out;
}







/************************************************************************************
*************************************************************************************

END NAVIGATION

/************************************************************************************
************************************************************************************/

















/************************************************************************************
*************************************************************************************

HOME ---- HERO

/************************************************************************************
************************************************************************************/

/* Home Hero */
.hero .flex-container {
padding: 0px 60px;
}




/* Home Project SLIDESHOW */
.hero .container  {
height: 100vh;
width: 100%;
top: 0;
bottom: 0;
right: 0;
left: unset;
}

.hero .container .flex-container  {
position: absolute;
top: unset!important;
left: unset!important;
right: 0!important;
bottom: 0px;
display: flex!important;	
/*width: 80%;*/
width: calc(100%);
padding: 0!important;
}





/* HOME -- Project Slideshow -- Preview */
.hero .preview-container  {
position: fixed;
top: 0;
right:0px;
width: calc(100% - 120px);
height: 100vh;
z-index: 101;
border-left: .5px solid rgba(30,30,30, .15);
}

.hero .preview-container .flex-container {
/*position: fixed;*/
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100vh;
padding: 0!important;
left: unset!important;
}

.hero .preview-container .flex-container .visual {
width: 0%;
height: 100vh!important;
}

.hero .preview-container .flex-container .flex-element {
position: absolute;
top: 0;
bottom: 0;
/*width: 100%;*/
height: 100%;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}

.hero .container .slider__item.flex-element { }

.preview_slider__item {
position: fixed;
top: 0;
bottom: 0;
/*width: 100%;*/
height: 100%;
left: 0; 
}

.preview_slider__item span {
width: 100%;
height: 100%; 
}






/* HOME -- Project Slideshow -- Thumbnail */
.hero .container.thumbnail .flex-container .slider__item span {
width: 0%;
}

.visual {
width: 50%;
height: 55vh!important;
position: relative;
margin-left: 50%;
}

.visual span{
width: 100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}







/* Home Project Description */
.description a {
border: 1px solid #fffef8;
padding: 10px 15px;
text-decoration: none;
display: inline-block;

  /*background-color: #f6f4f4; */
background-color: #fffef8;
/*color: #5A531E;*/
color: #262626;

text-transform: lowercase;
border-radius: 25px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: color .35s ease-in-out, background-color .35s ease-in-out;
-webkit-transition: color .35s ease-in-out, background-color .35s ease-in-out;
}

.description a:hover {
color: #fffef8;
/*background-color: #5A531E;*/
background-color: #262626;
transition: color .35s ease-in-out, background-color .35s ease-in-out;
-webkit-transition: color .35s ease-in-out, background-color .35s ease-in-out;
}

.displayed-project {
width: 100%;
margin-bottom: 0;
opacity: 0;
margin-bottom: -64px;
}


.categories {
  width: 175px;
  padding-left: 20px;
}

.project-title  {
  width: calc(100% - 350px);
  margin-right: 175px;
} 


.displayed-project a {
/*  width: calc(100% - 175px);*/
width: 100%;
}


/* *********************
Home Hero Slider Project Names
************************/

/*.displayed-project a h2  {
width: calc(100%);
font-weight: 500;
font-size: 10.5vw;
letter-spacing: -3px;
text-align: center;
text-transform: capitalize;
display: inline-block;
width: 100%;
/* margin-left: -210px; */
/*    line-height: 10.5vw;
vertical-align: middle;
font-weight: 400;
}*/

.displayed-project a h2:hover {

}

.description {
    position: relative;
    /* margin-top: 115px; */
    vertical-align: bottom;
    width: 50%;
    padding-right: 60px;
    padding-left: 20px;
    opacity: 0;
    align-items: end;
    padding-bottom: 120px;
}



}

.description p {
margin: 35px 0;
font-style: normal!important;
line-height: 18px;
}

.description p, .description a {
font-size: 12px;
line-height: 18px;
}

.description a {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    margin-top: 40px;
}

.project-count  {
font-family: "instrument sans", sans-serif;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;

font-size: 10px;

line-height: 14px;
display: inline-block;
width: 100px;
}

.project-medium  {
margin-top: 0px;
}

.project-medium li {
display: block;
}

.project-medium li:last-child span {
display: none;
}

/************************************************************************************
*************************************************************************************

END HOME ---- HERO

/************************************************************************************
************************************************************************************/



























/************************************************************************************
*************************************************************************************

HOME ---- About OPEN

/************************************************************************************
************************************************************************************/

body.menu-open .brand svg .brand-01,  body.menu-open .nav-info/*, body.menu-open .sidebar */, body.menu-open .nav-items ul li, body.menu-open .name h1 a {
/*color: #5A531E;*/
color: #262626;
transition: fill .35s ease-in-out, color .35s ease-in-out, border-color .35s ease-in-out;
-webkit-transition: fill .35s ease-in-out, color .35s ease-in-out, border-color .35s ease-in-out;
}

body .brand svg .brand-01,  body .nav-info, body.sidebar, body .nav-items ul li, body .name h1 a   {
transition: fill .35s ease-in-out, color .35s ease-in-out, border-color .35s ease-in-out;
-webkit-transition: fill .35s ease-in-out, color .35s ease-in-out, border-color .35s ease-in-out;
}



.about {
position: fixed;
top: 0;
bottom: 0;
left: unset;
right: 0;
width: 0%;
height: 100%;
/*background: #fffef8;*/
background: #fbfbfb;
z-index: -1;
/*color: #5A531E;*/
color: #262626;
transition: width .35s ease-in-out;
-webkit-transition: width .35s ease-in-out;
}

.about li, .about a {
/*color: #5A531E;*/
color: #262626;
}

.about .portrait {
margin-left: 0;
height: 100%;
width: calc(28% + 12vw);
position: relative;
}

.about .portrait span{
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 0%;




z-index: 1;	
transition: height .35s ease-in-out;
-webkit-transition: height .35s ease-in-out;
}

.about .flex-container {
height: 100vh;
position: absolute;
bottom: 0;
}

.about .bio {
opacity: 0;
position: relative;
background-color: transparent;
height: 100%;
transition: opacity .35s ease-in-out;
-webkit-transition: opacity .35s ease-in-out;
}

.about .bio {
width: calc(51% + 8vw);
padding: 90px 3vw;	
}

.about .bio p {
margin-bottom: 60px;
font-size: 42px;	
line-height: 48px;
letter-spacing: -1px;
}

.about .bio ul {
display: inline-block;
margin-right: 60px;
vertical-align: top;
margin-bottom: 30px;
}

.about .bio ul:nth-child(3) {
  margin-right: 0px;
}

.about .bio ul:nth-child(4) {
margin-right: 60px;
margin-bottom: 0px;
}

.about .bio ul span{
display: block;
margin-bottom: 16px;
font-family: "instrument sans", sans-serif;
font-optical-sizing: auto;
font-style: normal;
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;

}

.about .bio ul li {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0px;
    vertical-align: top;
line-height: 14px;
    font-size: 12px;
    font-weight: 500;
}

.contacts {
margin-bottom: 110px;
/*padding-top: 30px;*/
}

.contacts a {
text-transform: capitalize;
font-size: 32px;
font-weight: 400;
line-height: 36px;
letter-spacing: 1px;
/* padding: 15px 15px; */
background-color: transparent;
display: block;
}

.contacts a:nth-child(1) {
/*padding-left: 10px; */
}

.redirect {
display: none;
vertical-align: middle;
background-color: transparent!important;
width: 15px;
height: 15px;
}	

.redirect svg {
width: 15px;
height: 15px;
background-color: transparent!important;
}

.about a {
text-decoration: none!important;

}







/************************************************************************************
*************************************************************************************

END ----- HOME ---- About OPEN

/************************************************************************************
************************************************************************************/



















/************************************************************************************
*************************************************************************************

GALLERY -- All WORKS

/************************************************************************************
************************************************************************************/



/*** GALLERY ALL WORKS 
.gallery {
margin-top: 0px;
margin-left: 60px;
}
*/



/* All Works -- Individual Projects */
/*
.project:nth-child(1) {
margin-top: 0px!important;
}


.project {
min-height: calc(100vh - 190px);
margin: 200px 0px;
}


.project:nth-child(even) {
padding-top: 30px;
padding-left: 30px;
}

.project:nth-child(odd) {
padding-top: 30px;
padding-right: 30px;
} */

/*
.gallery .project {
width: 50%!important;
display: inline-block;
margin: 100px 0px;
margin-bottom: 0px;
-webkit-transform: scale(1); 
transform: scale(1);      
}

.gallery .project:last-child {
margin-bottom: 100px;
}

.gallery .project  {
-webkit-transform: translate3d(0,30vw,0);
transform: translate3d(0,30vw,0); 
transition: transform 1.5s ease-in-out;
-webkit-transition: transform 1.5s ease-in-out;
}

.gallery .project.visible  {
-webkit-transform: translate3d(0,0vw,0);
transform: translate3d(0,0vw,0); 
transition: transform 1.5s ease-in-out;
-webkit-transition: transform 1.5s ease-in-out;
}

.gallery .project:nth-of-type(2n)  {
-webkit-transform: translate3d(0,45vw,0);
transform: translate3d(0,45vw,0); 
transition: transform 1.5s ease-in-out;
-webkit-transition: transform 1.5s ease-in-out;
}

.gallery .project:nth-of-type(2n).visible  {
-webkit-transform: translate3d(0,15vw,0);
transform: translate3d(0,15vw,0);
transition: transform 1.5s ease-in-out;
-webkit-transition: transform 1.5s ease-in-out;
}

.gallery .project.full_width, .gallery .project.full-width .project-thumbnail{
width: 100%;
}
*/





/* Project Thumbnail 
.project-thumbnail {
min-height: 35vh;
display: inline-block;
}

.thumbnail {
width: 100%;
height: 100%;
opacity: 1;
}

.gallery .project:hover .thumbnail {
-webkit-transform: scale(.96); 
transform: scale(.96); 
transition: transform .5s ease-in-out;
-webkit-transition: transform .5s ease-in-out;
}

.gallery .project .thumbnail {
width: 100%;
height: 100%;
opacity: 1;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
-webkit-transform: scale(1); 
transform: scale(1); 
transition: transform .5s ease-in-out;
-webkit-transition: transform .5s ease-in-out;
}

.gallery .project.full_width .project-thumbnail  {
width: calc(100% - 45px);
height: 100%;
min-height: 75vh;
position: relative;
}
 */






/* Project Description  
.project-description {
display: inline-block;	
padding: 0px 60px;
width: 35%;
}

.project-description h2 {
display: block;
font-size: 36px;
font-weight: 400;
line-height: 32px;
text-transform: uppercase;
text-align: left;
}

.project-description p {
display: block;
font-size: 16px;
font-weight: 100;
letter-spacing: 1.25px;
text-align: left;
line-height: 28px;
opacity: 0;
}

.project-description h2, .project-description .project-medium {
display: inline-block;
}

.gallery .project:hover .project-description {
padding-top: 10px!important;
transition: padding .5s ease-in-out;
-webkit-transition: padding .5s ease-in-out;
}

.gallery .project.full_width .project-description {
width: auto;
position: relative;
padding: 0px;
-webkit-writing-mode: vertical-rl; 
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl; 
text-orientation: mixed;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
transition: padding .5s ease-in-out;
-webkit-transition: padding .5s ease-in-out;
}

.gallery .project.full_width .project-description div {
position: relative;
padding: 0px 0px;
}

.gallery .project.full_width .project-description div  .project-medium {
margin-top: 0px;
}

.gallery .project.full_width .project-description h2 {
font-size: 1.15vw;
}

*/

/************************************************************************************
*************************************************************************************

END -- GALLERY -- All WORKS

/************************************************************************************
************************************************************************************/

































/************************************************************************************
*************************************************************************************

 CASE STUDY 

/************************************************************************************
************************************************************************************/



/* CASE STUDY -- GLOBAL */
.case-study {
padding-bottom: 9.375vw;;	
}

.case-study:last-child {
padding-bottom: 9.375vw;	
}

.case-study .container {
padding: 0px 20px;	
}






/* CASE STUDY -- HERO */
.single-work-information {
margin-bottom: 0px;
/*margin-bottom: 9.375vw; */
/*padding-top: 220px; */
}


.single-work-information .container {
/*padding: 0 8vw;*/
padding-left: 0;
}

.single-work-information .container .wrapper {
    padding: 120px 24px;
    /*width: calc(65% - 12vw);*/
    width: 100%;
  /*  margin: auto 10px; */
    /*margin-bottom: 120px;*/
}


.single-work-information .flex-container {
    /*height: calc(100vh); */
    /*margin-top: 160px;*/
    height: auto;
}


.single-visual {
    /*width: calc(65% - 20vw); */
    width: 100%;
    height: 100vh;
    position: relative;
    margin-top: 220px;
}



.single-visual div video, .single-visual #hero-media div div   {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
    width: 0%;
    height: 100%;
    opacity: 0;
    
    
    
-webkit-animation-name: showVisual;
-webkit-animation-duration: 1s; 
 -webkit-animation-fill-mode: forwards;


animation-name: showVisual;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1.5s;
}



.single-visual div video {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
  
height: 100%;
position: relative;
  
}


@keyframes showVisual {
0% {  width: 0%; opacity: 0; } 

100% {  width: 100%; opacity: 1; } 

}



@-webkit-keyframes showVisual {
from {  width: 0%; opacity: 0;} 

to {  width: 100%; opacity: 1;} 

}






.archive .lineParent {
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: .15;
}

.archive .line {
  width: 0%;
/*background: #5A531E;*/
  background: #262626;
  position: absolute;
  left: 0px;
  bottom: 0px;
  top: 0px;
  height: 1px;
  
  -webkit-animation-name: revealLine;
  -webkit-animation-duration: 1s; 
  -webkit-animation-fill-mode: forwards;
  
  
  animation-name: revealLine;
  animation-duration: 1s;
  animation-fill-mode: forwards;
 /* animation-delay: 0.5s;*/
}



.archive a.block__link:nth-child(1) .line {
  animation-delay: 0.5s;
}
.archive a.block__link:nth-child(2) .line {
  animation-delay: .65s;
}
.archive a.block__link:nth-child(3) .line {
  animation-delay: .75s;
}
.archive a.block__link:nth-child(4) .line {
  animation-delay: .85s;
}
.archive a.block__link:nth-child(5) .line {
  animation-delay: .95s;
}
.archive a.block__link:nth-child(6) .line {
  animation-delay: 1.05s;
}
.archive a.block__link:nth-child(7) .line {
  animation-delay: 1.15s;
}
.archive a.block__link:nth-child(8) .line {
  animation-delay: 1.25s;
}
.archive a.block__link:nth-child(9) .line {
  animation-delay: 1.35s;
}


@keyframes revealLine {
0% {  width: 0%; } 
100% {  width: 100%; } 

}

@-webkit-keyframes revealLine {
from {  width: 0%; } 
to {  width: 100%; } 
}


.single-work-information .wrapper .details .flex-container {
  border-bottom: solid 1px;
  padding: 24px 0px;
}

.single-work-information .wrapper .two_columns {
width: calc(25% - 1.25vw);
}

.single-work-information .wrapper .details {
width: calc(60% - 2.65vw);
    display: flex;
    height: auto;
    }
    .single-work-information .wrapper .details div {
      width: 100%;
    }
    
    
.single-work-information .wrapper div {    
display: flex;
display: -webkit-flex;
display: -ms-flexbox;

-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;

align-items: start;
width: 100%;
}


/*
.single-hero-image {
height: 75vh;
width: 100%;
display: block;
position: relative;
}*/

.single-work-information h2 {
  /*  font-size: 13vw;
    line-height: 11.5vw;
font-weight: 700;*/
text-align: left;	
    margin-bottom: 120px;
    padding-left: 10px;
    padding-right: 20px;
    margin-top: 40vh;
    font-weight: 500;
    /*line-height: 10vw;
    font-size: 10.5vw; */
    line-height: 270px;
    font-size: 220px;
    letter-spacing: -10px;
    text-transform: unset;
}

.single-work-information ul, .single-work-information .details h4 {
margin-top: 0;
/* margin-bottom: 35px; */
    width: 50%;
}

.single-work-information p {
margin-top: 0;
/*margin-bottom: 35px;*/
/*max-width: 600px;*/
}

.single-work-information li {
 /* font-style: normal;
  font-family: 'Sweet Sans';
  color: #1b1b1b;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  */

    font-size: 1.15vw;
    font-family: "instrument sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
 font-variation-settings: "wdth" 100;
  
  
/*color: #5A531E;*/
 color: #262626;
  font-weight: 400;
  letter-spacing: .5px;
  text-transform: unset;
}


.single-work-information a::not(:first-child) {
margin-left: 4vw;
}

.single-work-information a {
	
text-transform: capitalize;
font-size: 21px;
font-weight: 400;
letter-spacing: 0px;
text-decoration: none;
background-color: #1b1b1b;
color: #f6f2ec;

border: .5px solid rgba(27,27, 27, .25);
padding: 16px 32px;
border-radius: 100%;
transition: color .35s ease-in-out, background-color .35s ease-in-out;
-webkit-transition: color .35s ease-in-out, background-color .35s ease-in-out;
}

.single-work-information a:hover {
background-color: #f6f2ec;
color: #1b1b1b;
transition: color .35s ease-in-out, background-color .35s ease-in-out;
-webkit-transition: color .35s ease-in-out, background-color .35s ease-in-out;
}









/* LAYOUT -- 1 Column Image Block */	
.image-block.one_column {
/*height: 70vh;*/
height: auto;
width: 100%;
margin: auto;
}








/* LAYOUT -- 2 Column Image Blocks */	
.case-study.case-study-two-image-blocks .flex-container {
width: 100%;
margin: auto;
}

.image-block.two_columns {
/*height: 43.75vw;*/
height: auto;
width: calc(50% - 1.25vw);
object-fit: cover;
}

.image-block.two_columns div {
height: 100%;
width: 100%;
}

/* LAYOUT -- 2 Column Text Block */	

.case-study-text-block {
  padding-top: 220px;
  padding-bottom: 220px;
}
.case-study-text-block .two_columns {
height: auto;
width: calc(25% - 1.25vw);
    -webkit-align-items: start;
-ms-flex-align: start;
 align-items: start;
}

.case-study-text-block .two_columns:nth-child(2) {
height: auto;
width: calc(60% - 2.65vw);
padding-right: 0px;
}

.case-study-text-block .two_columns:nth-child(1), .single-work-information .wrapper .flex-element {
display: block;
}

.case-study-text-block .two_columns:nth-child(1) h4:nth-child(1), .single-work-information .wrapper .flex-element:nth-child(1) h4 {
margin-bottom: 64px;
}

.case-study-text-block .two_columns:nth-child(2) h3, .single-work-information .wrapper div div h3 {
margin-bottom: 64px;
}


/* LAYOUT -- 1 Column Video Block */
.one_col_video_block {
width: 100%;
margin: auto;
}

.one_col_video_block video {
width: 100%;
}






/* LAYOUT -- 2 Column Video Blocks */
.two_col_video_block  {
    width: calc(50% - 1.25vw);

}

.two_col_video_block video {
width: 100%;
}



/* LAYOUT -- Web Container Blocks */
.browser-elements {
position: absolute;
top: 7px;
left: 10px;
z-index: 9;
pointer-events: none!important;
}

.browser-elements span {
position: relative;
display: inline-block;
width: 8px;
height: 8px;
border-radius: 10px;
border: 2px solid #ebebe7;
background: #ebebe7;
}

.web-container{
margin: 0 auto;
display: block;
max-width: 1080px;
width: 100%;
position: relative;
}

.web-container, .mobile-frame {	
box-shadow: 0px 13px 60px -20px rgba(0,0,0,0.36);
-webkit-box-shadow: 0px 13px 60px -20px rgba(0,0,0,0.36);
-moz-box-shadow: 0px 13px 60px -20px rgba(0,0,0,0.46);
}

.web-frame{
position: relative;
display: block;
overflow: hidden;
font-size: 0;
z-index: 1;
border-radius: 8px;
border-top: 30px solid white;
border-left: 2px solid white;
border-right: 2px solid white;
border-bottom: 2px solid white;
}

.web-frame:before{
content: '';
display: block;
padding-top: 68.5%;
border-radius: 8px;
}

.web-frame img {
position: absolute;
top: 0;
left: 0;
width: calc(100% + 1px);
}








/* LAYOUT -- Web Video Container Block */
.web-container.web-video .web-frame:before {
content: '';
display: block;
/*padding-top: 0;*/
}

.web-container.web-video .scroll-me {
display: none;
}

.web-container.web-video .web-frame video {
position: absolute;
top: 0;
left: 0;
width: calc(100% + 1px);
}








/* LAYOUT -- Mobile Container Block */
.mobile-container {
margin: 0 auto 0 auto;
max-width: 850px;
width: calc(100% - 120px);
text-align: justify;
}

.mobile-container {
/*padding-top: 30px;
padding-bottom: 30px;*/
position: relative;
}

.mobile-container {
margin: 0 auto 0 auto;
max-width: 850px;
width: calc(100% - 120px);
text-align: justify;
}

.mobile-frame {
background-color: white;
position: relative;
display: inline-block;
max-width: 375px;
width: calc(50% - 30px);
overflow: hidden;
border-radius: 30px;
border-top: 5px solid white;
border-bottom: 5px solid white;
border-left: 5px solid white;
border-right: 5px solid white;
}

.mobile-frame img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}

.mobile-container .mobile-frame:only-of-type {
margin: 0 auto;
display: block;
position: relative;
}

.mobile-frame:after {
content: '';
display: block;
padding-top: 178%;
}

.scroll-me {
position: absolute;
left: calc(100% + 15px);
top: 5px;
font-size: 10px;
color: #c0c0c0;
font-weight: 700;
/*width: 100%;*/
/* width: 45px; */


  font-family: "instrument sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;


font-size: 12px;
letter-spacing: 1px;

text-transform: uppercase;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-orientation: mixed;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}

.mobile-container .mobile-frame:only-of-type + .scroll-me {
left: calc(50% + 215px);
}

.scroll-me i {
/*content: '\2193';*/
position: relative;
display: block;
font-size: 12px;
-webkit-animation: pulse 1s infinite;
animation: pulse 1s infinite;
}

.mobile-container:after {
content: '';
display: inline-block;
width: 100%;
}

@keyframes pulse {
0%, 100% { top: 5px; } 50% { top: 0px; }
}











/* LAYOUT -- Mobile Video Container Block */
.mobile-frame video {
position: absolute;
top: 0;
left: 0;
width: 100%;
}

/*.mobile-container.one_device:before {
display: none;
content: 'MOBILE ';
position: absolute;
top: 50%;
font-size: 15vw;
margin: auto;
line-height: 0px;
font-weight: 900;
color: #1a1a1a;
text-align: center;
width: 100%;
}

.mobile-container.two_devices:before {
display: none;
content: 'MOBILE ';
position: absolute;
top: 50%;
font-size: 16vw;
line-height: 0px;
font-weight: 900;
transform: rotate(90deg);
color: #1a1a1a;
}
*/



/************************************************************************************
*************************************************************************************

END -- CASE STUDY 

/************************************************************************************
************************************************************************************/
























/************************************************************************************
*************************************************************************************

Footer

/************************************************************************************
************************************************************************************/

footer {
display: none;
}

/*footer {
position: fixed;
bottom: 0;
width: calc(100% - 120px);
margin: 0px 60px;
padding: 35px 0px;
border-top: .5px solid rgba(27,27, 27, .25);
background-color: #ebebe7;
}

/footer div {
display: inline-block;
vertical-align: top;
}

footer div.footer-item {
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;	
}

footer div.social-networks {
position: relative;
float: right;
}

footer div.social-networks ul li, footer div.social-networks ul span {
display: inline-block;
font-size: 12px;
font-weight: 100;
letter-spacing: 1.15px;
text-transform: lowercase;
}
*/
/************************************************************************************
*************************************************************************************

END FOOTER

/************************************************************************************
************************************************************************************/


























/************************************************************************************
*************************************************************************************

Perfect SCROLL BAR

/************************************************************************************
************************************************************************************/


.ps-container {
-ms-touch-action: none;
touch-action: none;
overflow: hidden !important;
-ms-overflow-style: none;
}

.ps-container.ps-active-x>.ps-scrollbar-x-rail, .ps-container.ps-active-y>.ps-scrollbar-y-rail {
display: block;
background-color: transparent;
}

.ps-container>.ps-scrollbar-x-rail {
display: none;
position: absolute;
border-radius: 4px;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-transition: background-color .2s linear, opacity .2s linear;
transition: background-color .2s linear, opacity .2s linear;
bottom: 3px;
height: 8px;
}

.ps-container>.ps-scrollbar-x-rail>.ps-scrollbar-x {
position: absolute;
background-color: #ffffff;
border-radius: 4px;
-webkit-transition: background-color .2s linear;
transition: background-color .2s linear;
bottom: 0;
height: 8px;
}

.ps-container>.ps-scrollbar-y-rail {
display: none;
position: absolute;
border-radius: 4px;
opacity: 0.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-transition: background-color .2s linear, opacity .2s linear;
transition: background-color .2s linear, opacity .2s linear;
right: 3px;
width: 5px;
margin-top: 3px;
margin-bottom: 3px;
}

.ps-container>.ps-scrollbar-y-rail>.ps-scrollbar-y {
position: absolute;
background-color: #ffffff;
border-radius: 4px;
-webkit-transition: background-color .2s linear;
transition: background-color .2s linear;
right: 0;
width: 5px;
}


/************************************************************************************
*************************************************************************************

END --- Perfect SCROLL BAR

/************************************************************************************
************************************************************************************/