/*------------------------------------variables-----------------------------------------*/

:root{
	--brandGrey1:#707070;

}


/*----------------------------------------------GENERAL---------------------------------------------*/

html {
	margin:0;
	padding:0;
}

body {
  background-color: #faf1db;
  margin: 0px;
  padding-top: 0.25px;
  font-size: 1.25em;
  font-family: "Abhaya Libre", serif;
  line-height: 1em;
}

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

.fullSection{
	position:relative;
	width:100vw;
	height:100vh;
}

.flexSection{
	position:relative;
	width:100vw;
	height:auto;
}

/*----------------------------------------------FONTS---------------------------------------------*/

/*helv*/
 @import url("https://fast.fonts.net/lt/1.css?apiType=css&c=d07e5d62-2db5-4a76-9a9b-b6914f1b7cab&fontids=5664093,5664150");
    @font-face{
        font-family:"Helvetica-Roman";
        src:url("/fonts/5664093/522972a6-5867-47ae-82fc-a7cf9bd5d4d4.eot?#iefix");
        src:url("/fonts/5664093/522972a6-5867-47ae-82fc-a7cf9bd5d4d4.eot?#iefix") format("eot"),url("/fonts/5664093/08b57253-2e0d-4c12-9c57-107f6c67bc49.woff2") format("woff2"),url("/fonts/5664093/08edde9d-c27b-4731-a27f-d6cd9b01cd06.woff") format("woff"),url("/fonts/5664093/8f4a1705-214a-4dd0-80b8-72252c37e688.ttf") format("truetype");
    }
    @font-face{
        font-family:"Helvetica-Bold";
        src:url("/fonts/5664150/4c21ab66-1566-4a85-b310-fbc649985f88.eot?#iefix");
        src:url("/fonts/5664150/4c21ab66-1566-4a85-b310-fbc649985f88.eot?#iefix") format("eot"),url("/fonts/5664150/800da3b0-675f-465f-892d-d76cecbdd5b1.woff2") format("woff2"),url("/fonts/5664150/7b415a05-784a-4a4c-8c94-67e9288312f5.woff") format("woff"),url("/fonts/5664150/f07c25ed-2d61-4e44-99ab-a0bc3ec67662.ttf") format("truetype");
    }


.bodyCopy{
	font-family: "Abhaya Libre", serif;
}

.bodyCopySmall{
	font-family: "Abhaya Libre", serif;
	font-size:0.9em;
	line-height: 1.5em;
}

/*----------------------------------------------INITSTATES---------------------------------------------*/

.o0{
	opacity: 0;
}

.o0-y{
	opacity:0;
	transform: translateY(20px);
}

.s0{
	transform-origin: 0% 50%;
	transform: scaleX(0);
}


/*----------------------------------------------NAV---------------------------------------------*/

.navCon{
	position:fixed;
	width:100vw;
	height: auto;
	/*background-color:rgba(0,0,0,0.04);*/
	z-index: 100;
}

.navIconCon{
	position:absolute;
	width:60px;
	height: 60px;
	left:0;
	right:0;
	/*background-color:rgba(0,0,0,0.04);*/
	margin: 10px auto;
	cursor:pointer;
	z-index: 101;
}

.navLine{
	position:relative;
	width:100%;
	height: 1px;
	margin: 10px 0;
	background-color:rgba(0,0,0,1.0);
	transition: 200ms;
}

.navLineRotate1{
	transform: translateY(20px) rotate(45deg);
}

.navLineRotate2{
	transform: translateY(-2px) rotate(-45deg);
}

.navLineFadeOut{
	opacity: 0;
}

.navMenu{
	position:relative;
	margin: 0 0 0 0;
    padding: 90px 0 10px 0;
	text-align: center;
	background-color: #faf1db;
	transform: translateY(-30px);
	opacity: 0;
	transition: 200ms;
}

.navMenuScrollOut{
	transform: translateY(0px);
	opacity: 1;
}

.navItem{
	font-family: "Helvetica-Bold", "Helvetica";
	font-size:14px;
	text-decoration: none;
	list-style: none;
	display: inline-block;
    margin: 0 5px;
}

.navItem a{
	transition: 200ms;
}

.navItem a:hover{
	color:#656208;
	transform:translateY(2px);
}

/*----------------------------------------------HOMEPAGE---------------------------------------------*/
/*----------------------------------------------HOMEPAGE---------------------------------------------*/
/*----------------------------------------------HOMEPAGE---------------------------------------------*/


/*-----------------ENTRY-SECTION--------------------*/

.hpEntrySection {
	background: url(/images/home/copyright_BarkowPhoto_6712_D.jpg) no-repeat center;
	background-size: cover;
	display: flex;
    align-items: center;
}

.entryContent{
	position:relative;
	width:100vw;
	height:14vw;
	margin: 50px 0 0 0;
	display:grid;
	grid-template-columns: 40% 27% 10% 8% 10% 5%;
	background-color:rgba(247,229,185, 0.5);
}

.entryColumn{
	position:relative;
	height: 100%;
}

.entryColumn{
	display: flex;
	align-items:center;
}

.home-logo {
	position: relative;
    width: auto;
    height: 70%;
    margin: 0 0 0 5%;
}

.home-name {
	font-family: "Helvetica-Bold", "Helvetica";
	font-size:0.44em;
	letter-spacing:0.2em;
	line-height:1.3vw;
	text-transform:uppercase;
	text-align:right;
	position:relative;
	width: 95%;
    margin: 50px 0 0 0;
    color:#707070;
}

.navLink{
	position:relative;
	margin: auto;
	display: block;
	transition: 200ms;
}

.navLink:hover{
	color:#656208;
	transform:translateY(2px);
}

.navText{
	font-family: "Helvetica-Bold", "Helvetica";
    font-size: 1em;
    line-height: 1.2em;
    text-align: center;
}

.dividerLine{
	position:relative;
	width: 44%;
	height: 2px;
	margin: auto;
	background-color: #fff;
	transform: rotate(-45deg);
}


/*-----------------MISSION-STATEMENT-SECTION--------------------*/

.msSection{
	background-color:#fff;
	padding: 50px 0;
}

.msCopyCon{
	position:relative;
	width:66%;
	max-width:880px;
	margin: 0 auto;
}

.msCopy{
	font-size:0.85em;
	line-height: 1.8em;
	color: #000;
}


/*-----------------PROJECT-STORIES-SECTION--------------------*/

.moduleSection{
	margin: 100px 0;
}

.moduleSectTitleCon{
	position:relative;
	width:50vw;
	max-width: 600px;
	margin: 0 auto 30px auto;
	text-align: center;
	border-bottom: solid 1px #000;
}

.moduleSectTitle{
	font-family: "Helvetica-Bold", "Helvetica";
    font-size: 0.88em;
    font-weight: normal;
    letter-spacing: 0.08em;
    margin: 0 0 20px 0;
}

.moduleCon{
	position:relative;
	width: 90%;
	height: auto;
	margin: 0px auto 50px auto;
	padding: 30px 30px 60px 30px;
	background-color:rgba(255,255,255, 0.5);
}

.moduleTitle{
	font-family: "Abhaya Libre", serif;
    font-weight: normal;
    font-size: 1.2em;
    letter-spacing: 0.08em;
    line-height: 1.2em;
    color: #707070;
    text-align: center;
    margin: 20px 0 41px 0;
}

.moduleGrid {
	position:relative;
	width:80%;
	height: auto;
	margin: 0 auto;
	display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(3, 1fr);
}

.gridItem{
	position:relative;
	height: 15vw;
	background-color:#fff;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.phBlock{
	opacity: 0.1;
	pointer-events: none;
}

.hp-caseStudyIMG{
	position:absolute;
	width: 100%;
	height: auto;
	transition: 600ms ease-out;
}

.gridHoverCon{
	position:relative;
	width:100%;
	height:100%;
	display: flex;
	align-items: center;
	background-color:rgba(251,242,220, 0.88);
	opacity: 0;
	transition: 200ms;
}

/*not in use, but keeping just in case*/
.hoverBG{
	position:absolute;
	width:100%;
	height:100%;
	background-color:rgba(251,242,220, 0.88);
	transform: scaleX(0);
	transform-origin: left center;
	transition: 200ms;
	display: none;
}

.gridItemLink:hover .gridItem .hp-caseStudyIMG{
	transform: scale(1.1,1.1);
}

.hoverTextCon{
	position:relative;
	margin: 0 auto;
	opacity: 0;
	transition: 300ms 50ms;
}

.projectTitle{
	font-family: "Helvetica-Bold", "Helvetica";
	font-size: 0.6em;
	font-weight: normal;
	letter-spacing: 0.06em;
	line-height: 1em;
	color: #707070;
	text-align: center;
	margin: 0;
	transition: 200ms;
}

.projectClient{
	font-family: "Abhaya Libre", serif;
    font-size: 0.66em;
    letter-spacing: 0.03em;
    color: #707070;
    text-align: center;
    margin: 0;
    transition: 200ms;
}

.gridItemLink:hover .gridItem .gridHoverCon{
	opacity: 1;
}

.gridItemLink:hover .gridItem .gridHoverCon .hoverBG{
	transform: scaleX(1);
}

.gridItemLink:hover .gridItem .gridHoverCon .hoverTextCon,
.gridItemLink:hover .gridItem .gridHoverCon .hoverTextCon{
	opacity: 1;
	transform: translateY(-10px);
}


/*-----------------FOOTER--------------------*/

footer {
  width: 100vw;
  background-color: #ffffff;
  font-size: 0.4em;
  display: grid;
  font-family: "Helvetica-Bold", "Helvetica";
  grid-template-columns: 5.4vw 32.5vw 4.4vw 15vw 11.3vw 19.6vw 11.8vw;
  padding-bottom:4vw;
  margin: 10vw 0 0 0;
  color:#707070;
}

.ftMgn footer{
    margin: 7% 0 0 0;
}

.footer-logo {
  grid-column: 2;
  margin-top:4.6vw;
}

img.mobile {
	display:none;
}

.footer-contact {
  grid-column: 4;
  line-height:2.2em;
  letter-spacing:0.2em;
  margin-top:5.5vw;
  text-transform:uppercase;
}

.footer-contact a {
	text-decoration:none;
	color:#707070;
}

.footer-social-email-copy {
  grid-column: 6;
  margin-top:5.16vw;
}

.footer-social-row {
  text-transform: uppercase;
  line-height:1.56vw;
  letter-spacing:0.2em;
}

.footer-social-row a {
  color: #707070;
  text-decoration:none;
}



form.ajaxForm {
  display: grid;
  grid-template-columns: 80.1% 4.9% 0.5%;
  margin-top:3.1vw;
  margin-bottom:8vw;
  border-top:1px solid #707070;
  border-bottom:1px solid #707070;
  color: #707070;
  font-family: "Helvetica-Bold", "Helvetica";
  font-size: 1.2em;
  line-height: 2em;
  letter-spacing: 0.05em;
}

.footer-social-email-box {
  grid-column: 1;
  border:0;
  -webkit-appearance: none;
  text-transform: uppercase;
  color: #707070;
  font-family: "Helvetica-Bold", "Helvetica";
  font-size: 1.2em;
  line-height: 1em;
  letter-spacing: 0.05em;
}

.footer-social-email-slash {
  grid-column: 2;
  color: #707070;
  font-family: "Helvetica-Bold", "Helvetica";
  font-size: 1.2em;
  line-height: 2em;
  letter-spacing: 0.05em;
}

.footer-social-email-button {
  grid-column: 3;
  color:#707070;
  font-family: Helvetica;
  font-size: 1.2em;
  letter-spacing: 0.05em;
  font-weight: 600;
  text-transform: uppercase;
  padding:0;
  background-color: #fff;
  border:0;
  margin: 0;
  -webkit-appearance: none;
}

.footer-social-copyright {
 font-size: 0.5em;
    line-height: 2.6vw;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-family: "Helvetica-Roman", "Helvetica";
    color: #000;
}


/*-------------------------------------------STORIES--------------------------------------------*/
/*-------------------------------------------STORIES--------------------------------------------*/
/*-------------------------------------------STORIES--------------------------------------------*/

.storiesPage .moduleSectTitleCon{
	margin: 10% auto 20px auto;
}

.storyLinksCon{
	position:relative;
	width:100vw;
	text-align: center;
}

.storyLinksCon a{
	font-family: "Helvetica-Bold", "Helvetica";
	color: #707070;
	line-height: 2.6vw;
	letter-spacing: 0.1em;
	margin-top: 2.6vw;
	font-size: .78vw;
	align-self: center;
	transition: 200ms;
}

.storyLinksCon a:hover{
	color: #656208;
    letter-spacing: 0.12em;
}

.nr{
	color: red !important;
	pointer-events: none;
}

/*-------------------------------------------CASESTUDIES--------------------------------------------*/
/*-------------------------------------------CASESTUDIES--------------------------------------------*/
/*-------------------------------------------CASESTUDIES--------------------------------------------*/


.csEntryCon{
	position:relative;
	width:100vw;
	height:100%;
	display: grid;
	grid-template-columns: 14% 66% 14%;
	grid-gap: 3%;
	align-items: center;
}

.csEntryColumn:nth-of-type(2){
	justify-content: center;
    display: flex;
}

.csIMG01{
	width:100%;
}

.csTitle{
	text-align: right;
	color: var(--brandGrey1);
}

.csCategory{
	font-family: "Helvetica-Bold", "Helvetica";
	line-height: 3em;
	font-size:0.5em;
	letter-spacing: 0.02em;
}

.csName{
	font-size: 1.2em;
	line-height: 1.1em;
	margin: 15px 0;

}

.csLocation{
	font-size:0.8em;
	line-height: 1.2em;
}

#csImgRowSection01,
#csImgRowSection02,
#csImgRowSection03,
#csImgRowSection05,
#csImgRowSection07{
	text-align: center;
}

#csImgRowSection01{
	padding: 100px 0;
	background-color:#fff;
	overflow: hidden;
}

.csCopyBlock{
	position:relative;
	max-width: 1000px;
	margin: 100px auto;
	display: block;
}

.Creds{
	font-family: "Helvetica-Roman", "Helvetica";
	font-size: 0.7em;
}

.hBold{
	font-family: "Helvetica-Bold", "Helvetica";
}



.gridSection{
	position:relative;
	width:100%;
	display:grid;
	grid-template-columns:6.25vw 6.25vw 6.25vw 6.25vw 6.25vw 6.25vw 6.25vw 6.25vw 6.25vw 6.25vw 6.25vw 6.25vw 6.25vw 6.25vw 6.25vw;
}

.csIMG{
	position:relative;
	width: 100%;
}

.csIMG02{
	grid-column:2/9;
}

.csCopyBlock{
	width:100%;
	grid-column: 4/11;
}

.csIMG03{
    grid-column:10/15;
}

.csIMG04{
	margin: 12vw 0 0 0;
    grid-column: 3/8;
}

.csIMG05{
	grid-column:9/15;
}

.csIMG06 {
    margin: 8vw 0 0 0;
    grid-column: 3/10;
}

.csIMG07 {
    margin: 0vw 0 -9vw 0;
    grid-column: 11/14;
    align-self: end;
}

.csIMG08 {
    margin: 10vw 0 0vw 0;
    grid-column: 1/7;
}

.csIMG09 {
    margin: 20vw 0 0vw 0;
    grid-column: 9/17;
}


.csIMG10{
	 margin: 9vw 0 0vw 0;
    grid-column: 4/14;
}

.csIMG11 {
    margin: 7vw 0 0vw 0;
    grid-column: 1/7;
}

.csIMG12 {
    margin: 16vw 0 0vw 0;
    grid-column: 9/17;
}

.csIMG13 {
    margin: -5vw 0 0vw 0;
    grid-column: 2/6;
}

.csIMG14 {
    margin: 12vw 0 0vw 0;
    grid-column: 10/15;
}




/*-------------------------------------------MQS--------------------------------------------*/
/*-------------------------------------------MQS--------------------------------------------*/
/*-------------------------------------------MQS--------------------------------------------*/
/*-------------------------------------------MQS--------------------------------------------*/
/*-------------------------------------------MQS--------------------------------------------*/
/*-------------------------------------------MQS--------------------------------------------*/


/*--------------------------------------------1660px----*/

@media (min-width:0px) and (max-width:1660px){




}

/*--------------------------------------------1200px----*/

@media (min-width:0px) and (max-width:1200px){

/*---------------GLOBALS----*/

.navText {
    font-size: 0.8em;
}

footer {
    grid-template-columns: 5.4vw 32.5vw 2.4vw 23vw 5.3vw 26vw 5.4vw;
}

}



/*--------------------------------------------1001px----*/

@media (min-width:0px) and (max-width:1001px){

.moduleGrid {
    grid-gap: 20px;
    grid-template-columns: repeat(2, 1fr);
}

.gridItem {
    height: 20vw;
}

.projectTitle, .projectClient {
    font-size: 1em;
    line-height: 1.5em;
}


/*---------------CASE-STUDIES----*/

.csName {
    font-size: 1em;
    margin: 10px 0;
}

.csLocation {
    font-size: 0.66em;
    line-height: 1.2em;
}

.csCopyBlock {
    width: 100%;
    grid-column: 4/13;
}



}


@media only screen and (min-device-width: 768px) and (max-device-width: 1366px){

/*---------------HOME------------*/

.hpEntrySection {
    background: url(/images/home/copyright_BarkowPhoto_6712_D.jpg) no-repeat left;
}

.entryContent {
    height: 18vw;
    grid-template-columns: 49% 15% 10% 8% 10% 7%;
    padding: 20px 0 20px 10px;
}



/*---------------CASE-STUDIES----*/

.csEntrySection{
	height: 50vh;
}

.csLocation {
    font-size: 0.55em;
    line-height: 1.2em;
}

.csCopyBlock {
    width: 100%;
    grid-column: 3/12;
}

.csIMG04 {
    margin: 12vw 0 0 0;
    grid-column: 2/8;
}

.csIMG05 {
    grid-column: 9/16;
}

.csIMG07 {
    grid-column: 12/15;
}

.csIMG10 {
    margin: 12vw 0 6vw 0;
    grid-column: 3/15;
}

.csIMG13 {
    margin: -7vw 0 0vw 0;
    grid-column: 2/7;
}

.csIMG14 {
    margin: 12vw 0 0vw 0;
    grid-column: 10/16;
}

}

/*--------------------------------------------444px----*/

@media (min-width:0px) and (max-width:444px){


/*---------------HOME------------*/

.hpEntrySection {
    background: url(/images/home/copyright_BarkowPhoto_6712_D.jpg) no-repeat left;
}

.entryContent {
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.entryColumn1{
	width: 90%;
    margin: 30px;
}

.home-logo{
	margin: auto;
}

.entryColumn3, .entryColumn5{
	margin:10px 0;
}

.entryColumn4{
	width: 20%;
	margin: 50px 0 0 0;
}

.home-name {
    margin: 30px 0 0 0;
}

.moduleCon {
    width: 90%;
    margin: 0px auto 40px auto;
    padding: 10px 10px 10px 10px;
}

.moduleGrid {
	width: 100%;
    grid-gap: 10px;
}

.gridItem {
    height: 24vw;
}

.projectTitle, .projectClient{
	font-size:0.5em;
}

.projectClient{

}

/*---------------GLOBALS----*/

footer{
	grid-template-columns: 6.25vw 87.5vw 6.25vw;
	margin: 4vw 0 0 0;
}

.footer-logo, .footer-contact, .footer-social-email-copy {
    grid-column: 2/3;
}

.footer-logo{
	width: 90%;
	margin: 40px 0 0 0;
}


.footer-contact{
	margin: 10vw 0;
}


/*---------------CASE-STUDIES----*/

.csEntrySection {
    height: fit-content;
}

.csEntryCon {
    height: 60vh;
    display: flex;
    align-items: end;
    flex-direction: column;
    justify-content: end;
}

.csEntryColumn:nth-of-type(1) {
    margin: 15% 6% 0% 3%;
}

.csEntryColumn:nth-of-type(2){
	margin: 5%;
}

.csEntrySection .buffer{
	display: none;
}

#csImgRowSection01 {
    padding: 0;
    height: fit-content;
    display: flex;
    flex-direction: column-reverse;
    margin: 0;
}

.csIMG02, .csIMG03 {
	width:90%;
    margin: 5%;
}


.csCopyBlock, .csIMG04, .csIMG05, .csIMG06, .csIMG07, .csIMG08, .csIMG09, .csIMG10, .csIMG11, .csIMG12, .csIMG13, .csIMG14
 {
    grid-column: 2/16;
    margin: 3.25vw 0;
}


}


/*--------------------------------------------375px----*/

@media (min-width:0px) and (max-width:375px){

.entryColumn3, .entryColumn5 {
    margin: 0px 0 20px 0;
}

.entryColumn4 {
    margin: 30px 0 0 0;
}


}