:root{
	--header-fs: 0.9vw;
	--header-right-fs: 0.8em;
	--grid-cols: repeat(12, 1fr);
	--grid-gap: 0.5vw;
	--snippet-height: 22vh;
	--header-h: 4.5vh;
	--footer-h: 5.5vh;
}

body {
  -webkit-font-smoothing: antialiased; /* Chrome, Safari */
  -moz-osx-font-smoothing: grayscale;  /* Firefox on macOS */
  text-rendering: optimizeLegibility;  /* Better kerning & ligatures */
}

@font-face {
  font-family: "bb-modern-regular-pro";
  src: url("fonts/bb-modern-regular-pro.ttf") format("TrueType")
}

@font-face {
  font-family: "bb-modern-semicondensed-pro";
  src: url("fonts/bb-modern-semicondensed-pro.ttf") format("TrueType")
}

html, body{
	width: 100%;
	height: 100%;
	margin: 0;
	
}

body{
	padding: 0px var(--grid-gap);
}

*{
	box-sizing: border-box;
	font-family: "bb-modern-regular-pro";
}

::selection {
  background: #BEBEBE;
  color: black;
  text-shadow: none;
}

::-moz-selection {
  background: #BEBEBE;
  color: black;
  text-shadow: none;
}

.loader{
	z-index: 100;
	background: white;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.contentWrapper{
/*	height: 1000px;*/
    /* background: red; */
/*    overflow: hidden;*/
/*    border: 1px solid red;*/
    position: relative;
}

.footer{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 2vh;
}

.footer p {
	text-align: center;
}

.footer a, .footer a:visited{
	color: black;
	text-decoration: none;
}


.footerLinks{
	display: flex;
	flex-direction: column;
	align-items: center;

}

.footerLinks a{
	font-family: "bb-modern-semicondensed-pro";
}

.projectInfo{
  position: fixed;
  bottom: calc(var(--footer-h) * -1);
  z-index: 20;
  transition: 0.4s bottom;
  margin: 0;
  padding: 0;
  width: 100%;
  left: 0;
  height: var(--footer-h);
  display: flex;
  flex-direction: column;
}

.projectInfo.open{
	bottom: 0;
}

.projectInfo.open.notLastImage, .projectInfoBottom.open.notLastImage{
	bottom: calc((var(--footer-h) / 2) * -1);
}

.projectInfo .projectInfoTop{
	display: grid;
	background: black;
	color: white;
  justify-content: space-between;
  height: calc(var(--footer-h) / 2);
  width: 100%;
  align-items: center;
  padding-left: var(--grid-gap);
  padding-right: var(--grid-gap);
  overflow: hidden;
  transition: 0.4s height, 0.4s margin-top;
}



.projectInfo .projectInfoTop .projectTitle{
/*	position: absolute;
  width: 100%;*/
  text-align: center;
  pointer-events: none;
  position: absolute;
    width: calc(100% - (var(--grid-gap) * 2));
}

.projectInfo .projectInfoTop .projectTitle, .projectInfo .projectInfoTop .count, .projectInfo .projectInfoTop .moreInfo, .previewInfo *{
	text-transform: uppercase;
  font-family: "bb-modern-semicondensed-pro" !important;
  font-style: normal;
/*  font-size: var(--header-fs) !important;*/
}  
.previewInfo .projectTitle{
	font-size: calc(var(--header-fs) * 0.9);
}
.previewInfo .moreInfo{
	cursor: pointer;
}
.previewInfo .moreInfo, .previewInfo .count{
	font-size: calc(var(--header-fs) * 0.78);
}

.previewInfo .count .snippet-no{
	margin-right: 1vw;
}
.moreInfo .arrow{
	transform: rotate(180deg);
  position: relative;
  display: inline-block;
  margin-left: 1vw;
}






.projectInfoTop .previewInfo{
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	height: calc(var(--footer-h) / 2);
/*	background: green;*/
	z-index: 1;
	grid-column-start: 1;
  grid-column-end: 13;
  align-self: baseline;
}
.projectInfoBottom{
	display: flex;
	justify-content: center;
	height: calc(var(--footer-h) / 2);
	align-items: center;
/*	mix-blend-mode: difference !important;*/
/*	background: white;*/
	background: white;
	position: fixed;
	transition: 0.4s bottom;
  bottom: calc((var(--footer-h) / 2) * -1);
  left: 0;
  width: 100%;
  z-index: 20;
  cursor: pointer;
}

.projectInfoBottom.open{
	bottom: 0;
}

.moreOrNextClient{
	text-transform: uppercase;
  font-family: "bb-modern-semicondensed-pro" !important;
  font-style: normal;
  font-size: calc(var(--header-fs) * 0.85) !important;
  color: black;
  
}

@media screen and (orientation:portrait){
	.projectInfo .projectInfoTop .clientInfoExp{
		padding-top: calc(var(--footer-h) * 0.5);
		padding-bottom: calc(var(--footer-h) * 0.1);
		/*padding-top: 0.5em;
		padding-bottom: 0.5em;*/
		margin-top: -1vh;
		font-size: calc(var(--header-fs) * 0.75);
	}
	.projectInfo .projectInfoTop .clientInfoExp p{
		margin: 0;
	}
}

@media screen and (orientation:landscape){
	.projectInfoTop .clientInfoExp{
		display: grid;
		font-size: 0.5em;
		grid-template-columns: repeat(12, 1fr);
		margin-top: 0px;
		transition: 0.4s margin-top;
		grid-column-start: 1;
    grid-column-end: 13;
	}
	.projectInfo .projectInfoTop.openInfo .clientInfoExp{
		margin-top: calc(var(--footer-h) * -0.5);
		/*padding-top: 0.5em;
		padding-bottom: 0.5em;*/
		
	}
	.projectInfo .projectInfoTop .clientAbout{
		grid-column-start: 8;
	  grid-column-end: 11;
	  margin-right: 10px;
	  margin-top: 0.5em;
	  margin-bottom: 2.5em;
	}

	.projectInfo .projectInfoTop .clientNote{
		grid-column-start: 11;
		margin-top: 0.5em;
	  margin-bottom: 2.5em;
	}
	.clientAbout p, .clientNote p{
		margin-top: 0;
	}
	.projectInfo .projectInfoTop .projectTitle{
		font-size: var(--header-fs);
	}
}