@CHARSET "ISO-8859-1";

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500&family=Roboto:ital,wght@0,400;0,500;1,400&display=swap');

@font-face { 
	font-family: "Berthold Akzident"; 
	src: url("Berthold-akzidenz-grotesk-be-regular.ttf"); 
}
@font-face { 
	font-family: "Berthold Akzident light"; 
	src: url("Berthold-akzidenz-grotesk-be-light.ttf"); 
}
@font-face { 
	font-family: "Berthold Akzident medium"; 
	src: url("Berthold-akzidenz-grotesk-be-medium.ttf"); 
}
@font-face { 
	font-family: "Berthold Akzident bold"; 
	src: url("Berthold-akzidenz-grotesk-be-bold.ttf"); 
}
@font-face { 
	font-family: "Berthold Akzident italic"; 
	src: url("Berthold-akzidenz-grotesk-be-italic.ttf"); 
}
@font-face { 
	font-family: "Berthold Akzident medium italic"; 
	src: url("Berthold-akzidenz-grotesk-be-medium-italic.ttf"); 
}
@font-face { 
	font-family: "Berthold Akzident bold italic"; 
	src: url("Berthold-akzidenz-grotesk-be-bold-italic.ttf"); 
}


html {
	min-height: 100%;
	height: 100%;
	min-width: 1280px;
	font-family: Roboto, Berthold Akzident, Arial, Helvetica, sans-serif;
	line-height: 1.3;
	font-size: calc( 8px + 0.35vh + 0.35vw );
	color: #333333;
	background-color: #ffffff;
}
body {
	margin: 0;
} 

h1 {
	font-family: Roboto Slab, Berthold Akzident bold, Arial, Helvetica, sans-serif;
	font-size: calc( 24px + 1vh + 1vw );
	font-weight: bold;
}
h2 {
	font-family: Roboto Slab, Berthold Akzident medium, Arial, Helvetica, sans-serif;
	font-size: calc( 16px + 0.7vh + 0.7vw );
	font-weight: normal;
}
h3 {
	font-family: Roboto Slab, Berthold Akzident medium, Arial, Helvetica, sans-serif;
	font-weight: normal;
}

#content {
	float: left;
	width: 100%;
}

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

/** ----- menu ------------------------------------ **/

#cookieAcc {
	position: fixed;
	bottom: 0px;
	left: 0px;
	display: inline-block; 
	width: calc(100% - 2vh - 2vw);
	padding: calc(0.5vw + 0.5vh) calc(1vw + 1vh) calc(0.5vw + 0.5vh) calc(1vw + 1vh); 
	background: #333; 
	color: #fff;
	z-index: 6;
}
#cookieOk {
	padding: 0 calc(0.3vh + 0.3vw);
	border: 2px solid #fff;
	float: right;
	cursor: pointer;
}

#menuButton {
	position: fixed;
	top: 40px;
	right: 40px;
	width: 50px;
	height: 50px;
	padding: 7px 0 0 0;
	overflow: hidden;
	cursor: pointer;
	z-index: 5;
}
.hambBBar {
	width: 50px;
	height: 4px;
	margin-bottom: 14px;
	background-color: #fff;
}

#menuOptions {
	display: none;
	position: fixed;
	top: 0px;
	left: 0px;
	background: rgba(20,20,20,0.8);
	width: calc(100vw - 80px);
	height: calc(100vw - 140px);
	padding: 100px 40px 40px 40px;
	z-index: 5;
}
.menuOpt {
	margin: calc(0.5vh + 0.5vw)  0;
	color: #fff;
	font-size: calc( 24px + 1vh + 1vw );
	font-family: Roboto Slab, Berthold Akzident medium;
	text-align: right;
	cursor: pointer;
}
#shoppingCart {
	position: fixed;
	top: 47px;
	right: 90px;
	padding: 0 0 0 7px;
	cursor: pointer;
	z-index: 4;
}
#shoppingCart img {
	height: 40px;
}
#spCount {
	position: fixed;
	top: 32px;
	right: 116px;
	width: 30px;
	height: 30px;
	border-radius: 15px;
	background: #fff;
	text-align: center;
	font-family: Roboto, Berthold Akzident medium, Arial, Helvetica, sans-serif;
	font-size: calc( 22px );
}

#clsButton {
    display: none;
    position: fixed;
	top: 40px;
	right: 40px;
	width: 50px;
	height: 48px;
	margin-bottom: 50px;
	cursor: pointer;
}
#clsButton:before, #clsButton:after {
    position: absolute;
    left: 40px;
    content: '';
    height: 54px;
    width: 4px;
    background-color: #fff;
}
#clsButton:before {
    transform: rotate(45deg);
}
#clsButton:after {
    transform: rotate(-45deg);
}

#logo {
	position: fixed;
	top: 45px;
	left: 40px;
	z-index: 5;
	color: white;
	font-family: Roboto Slab, Berthold Akzident bold, Arial, Helvetica, sans-serif;
	font-size: calc( 24px + 1vh + 1vw );
	letter-spacing: 1px;
	font-weight: bold;
}
#logo img {
	height: 45px;
}
#instaButton {
	position: fixed;
	bottom: 40px;
	right: 40px;
	width: 50px;
	height: 50px;
	padding: 7px 0 0 0;
	overflow: hidden;
	cursor: pointer;
	z-index: 5;
}
#instaButton img {
	width: 50px;
	height: 50px;
}

/** ----- home ------------------------------------ **/

#home {
	float: left;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	color: #fff7f4;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


/** ----- projects  ------------------------------- **/

#projects {
	width: calc(100% - 80px);
	min-height: calc(100vh - 140px);
	padding: 100px 40px 60px 40px;
	float: left;
	background-color: #f1f1f1;
}

.project {
	float: left;
	width: calc(50% - 60px);
	height: calc(30vw - 60px);
	overflow: hidden;
	margin: 30px 60px 30px 0;
	position: relative;
	cursor: pointer;
}
.project img {
	width: 100%;
}
.projectTitle {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 525px;
	color: #fff;
	font-size: calc( 24px + 1vh + 1vw );
	font-family: Roboto Slab, Berthold Akzident medium;
	font-weight: bold;
	text-align: left;
	line-height: 1.1;
	display: none;
}



/** ----- how we work  ---------------------------- **/


#howwework {
	float: left;
	width: calc(100% - 80px);
	height: calc(100vh - 160px);
	padding: 100px 40px 60px 40px;
	background: url("../images/howBg.jpg") no-repeat top center; 
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#howwereallywork {
	width: calc(62vw - 80px);
	height: calc(66vh - 60px);
	margin: 0vh 11vw 20vh 0;
	padding: 30px 40px;
	background-color: #fff;
	overflow: hidden;
}

#howwereallywork h3 {
	margin-top: 0;
}
#howwereallywork img {
	width: 60%;
	margin-top: 20px;
}
#howwereallyworkColLeft {
	width: 47%;
	float: left;
}
#howwereallyworkColRight {
	width: 47%;
	float: right;
}

/** ----- selectedWorks  ------------------------------- **/


#selectedWorks {
	width: calc(100% - 80px);
	min-height: calc(100vh - 140px);
	background: rgb(220,220,220);
	padding: 100px 40px 40px 40px;
	float: left;
}

#selectedWorksCanvas {
	width: 100%;
	min-height: calc(100vh - 180px);
	margin-top: 10px;
	padding: 30px 5px;
	float: left;
	background: #fff;
	overflow: auto;
}
#selectedWorksInnerCanvas {
	width: 130%;
	float: left;
}
.selWorksCol {
	width: calc(14.2% - 120px);
	float: left;
	padding: 0 60px 0 60px;
}
.workTile {
	width: 100%;
	float: left;
	margin: 0;
	cursor: pointer;
}
.workTile img {
	width: 100%;
}
.workDetailsSpace {
	float: left;
	width: 100%;
	height: 120px;
}
.workDetails {
	display: none;
}
.workTitle {
	width: 100%;
	float: left;
	font-weight: bold;
}
.workTechnique {
	width: 100%;
	float: left;
}

/** ----- separator ------------------------------- **/

#separator {
	float: left;
	width: 100%;
	height: 50vh;
	overflow: hidden;
	color: #fff7f4; 
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/** ----- products  ------------------------------- **/


#products {
	width: calc(100% - 80px);
	min-height: calc(100vh - 140px);
	background: rgb(192,192,192);
	padding: 100px 40px 40px 40px;
	float: left;
}

.collab {
	float: left;
	width: calc(33% - 60px);
	height: calc(20vw - 60px);
	overflow: hidden;
	margin: 30px 60px 30px 0;
	position: relative;
	cursor: pointer;
}
.collab img {
	width: 100%;
}
.collabTitle {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 525px;
	color: #fff;
	font-size: calc( 14px + 1vh + 1vw );
	font-family: Roboto, Berthold Akzident medium;
	text-align: left;
	line-height: 1.1;
	display: none;
}


/** ----- contact  -------------------------------- **/

#contact {
	width: calc(100% - 80px);
	min-height: calc(100vh - 160px);
	padding: 120px 40px 40px 40px;
	float: left;
	color: #fff;
	background-color: #333;
}
#contact a {
	text-decoration: none;
	color: #bf946a;
}
#contactLeft {
	float: left;
	padding-right: 80px;
	width: calc(50% - 80px);
	height: calc(100% - 80px);
}
#legalities {
	float: left;
	padding-right: 80px;
	width: calc(50% - 80px);
	padding-top: 50px;
}
.legals {
	color: #bf946a;
	float: left;
	padding-right: 30px;
	cursor: pointer;
}

#newsletter {
	float: left;
	padding-right: 80px;
	width: calc(50% - 80px);
}
#newsletter input {
	border: none;
	border-bottom: 1px solid #ccc;
	margin: 20px 0 20px 0;
	font-size: calc( 9px + 0.38vh + 0.38vw );
	font-family: Roboto, Berthold Akzident light;
	color: #fff;
	background-color: #333;
}
#nlEmail {
	width: 400px;
}
#nlCity {
	display: none;
}
#subscribe {
	margin-top: 30px;
	float: left;
	background-color: #fff;
	color: #333;
	padding: 10px 20px;
}
.err {
	color: #ff0000;
	font-size: calc( 4px + 1vh + 1vw );
	height: 0;
}


/** ----- image gallery  -------------------------- **/

.galleryLeft {
	width: 40px;
	height: 100%;
	float: left;
	text-align: center;
	cursor: pointer;
	display: flex;
}
.galleryLeft img {
	margin: auto;
}
.galleryRight {
	width: 40px;
	height: 100%;
	float: right;
	text-align: center;
	cursor: pointer;
	display: flex;
	
}
.galleryRight img {
	margin: auto;
}
.galleryCenter {
	width: calc(100% - 80px);
	float: left;
	text-align: center;
}
.galleryCenter img {
	max-height: 72vh;
	max-width: calc(100% - 80px);
}
.imgTxt {
	padding-top: 5px;
}


/** ----- content overlay  ------------------------ **/

#overlayGround {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	min-width: 1280px;
	height: 100%;
	background-color: #fff;
	z-index: 6;
}
#overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% - 80px);
	height: calc(100vh - 60px);
	overflow: auto;
	padding: 60px 40px 0 40px;
	background-color: #fff;
	z-index: 6;
}

#clsButtonDark {
    position: fixed;
	top: 40px;
	right: 40px;
	width: 50px;
	height: 50px;
	margin-bottom: 50px;
	cursor: pointer;
	z-index: 7;
}
#clsButtonDark:before, #clsButtonDark:after {
    position: absolute;
    left: 25px;
    content: '';
    height: 60px;
    width: 4px;
    background-color: #000;
}
#clsButtonDark:before {
    transform: rotate(45deg);
}
#clsButtonDark:after {
    transform: rotate(-45deg);
}
.gallDirs {
	height: 45px;
}


#overlayGroundDark {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	min-width: 1280px;
	height: 100%;
	background: rgba(32,29,28,0.95);
	z-index: 6;
}
#overlayDark {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% - 80px);
	height: calc(100vh - 60px);
	overflow: auto;
	padding: 60px 40px 0 40px;
	background: rgba(32,29,28,0.95);
	z-index: 6;
}

#clsButtonWhite {
    position: fixed;
	top: 40px;
	right: 40px;
	width: 50px;
	height: 50px;
	margin-bottom: 50px;
	cursor: pointer;
	z-index: 7;
}
#clsButtonWhite:before, #clsButtonWhite:after {
    position: absolute;
    left: 25px;
    content: '';
    height: 60px;
    width: 4px;
    background-color: #fff;
}
#clsButtonWhite:before {
    transform: rotate(45deg);
}
#clsButtonWhite:after {
    transform: rotate(-45deg);
}



/** ----- project details  ------------------------ **/

#projectHead {
	margin-top: 30px;
	width: 26%;
	float: left;
}
#projectLeft {
	margin-top: 30px;
	width: 26%;
	float: left;
}
#projectGallery {
	position: relative;
	float: right;
	width: 70%;
	height: 70vh;
	margin: 60px 0; 
}

#projectMetaInfo {
	font-family: Roboto, Berthold Akzident italic;
	line-height: 1.6;
	width: 26%;
	float: left;
}
#projectText {
	width: 100%;
	float: left;
	padding-bottom: 60px;
}

#projectVideo {
	float: right;
	text-align: center;
	width: 70%;
	margin: 20px 0 60px 0; 
}

#projectVideoFrame {
	padding-bottom: 10px;
	margin: auto;
}
#projectVideoText {
	margin: auto;
	width: 800px;
	text-align: left;
}


/** ----- selectedWorks Details  ------------------ **/

#workDetailImg {
	float: left;
	width: 100%;
	text-align: center;
}
#workDetailImg img {
	max-width: 100%;
	max-height: 80vh;
	
}
#workDetailInfo {
	float: left;
	width: 100%;
	text-align: center;
	color: #fff;
	margin-top: 15px;
}


/** ----- legal stuff  ---------------------------- **/

#legality {
	width: 70%;
	min-width: 800px;
	margin-bottom: 50px;
}

#legality a {
	text-decoration: none;
	color: #bf946a;
}


/** ----- gallery image opverlay ------------------ **/

.fullGalLayer {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(32,29,28,0.95); 
	z-index: 10;
}
#stepDown {
	position: fixed;
	top: 48%;
	left: 20px;
}
#stepDown img {
	width: 30px;
}
#stepUp {
	position: fixed;
	top: 48%;
	right: 20px;
}
#stepUp img {
	width: 30px;
}
.fullGalImg {
	display: none;
	position: fixed;
	z-index: 10;
	width: calc(100% - 100px);
	margin-left: 50px;
	margin-top: 5vh;
	text-align: center;
}
.fullGalImg img {
	max-width: 80vw;
	max-height: 90vh;
}
.imgTxt {
	text-align: center;
	padding-top: 10px;
	color: #fff7f4;
}

.clsButtonGal {
    display: none;
    position: fixed;
	top: 40px;
	right: 40px;
	width: 50px;
	height: 48px;
	margin-bottom: 50px;
	cursor: pointer;
}
.clsButtonGal:before, .clsButtonGal:after {
    position: absolute;
    left: 40px;
    content: '';
    height: 54px;
    width: 4px;
    background-color: #fff;
}
.clsButtonGal:before {
    transform: rotate(45deg);
}
.clsButtonGal:after {
    transform: rotate(-45deg);
}
.galleryWithOverlay {
	cursor: pointer;
}