/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* custom css starts here... */
@font-face {
	font-family: gill_sans;
	src: url(font/GillSans-Light.ttf);
}
/*getting rid of scrollbar*/
::-webkit-scrollbar {
display: none;
}
::-moz-scrollbar {
display: none;
}
/*toggling mobile/pc content*/
.pc-content {
	display: none;
}
@media only screen and (min-aspect-ratio:16/10){
	.pc-content {	display: block;	}
	.mobile-content {	display: none; }
}
/*general: color and font*/
body {
  background-color: white;
	font-family: "gill_sans";
	color: black;
	overflow-x: hidden;
}
h1 {
	color: black;
	letter-spacing: 0.25vw;
	font-size: 3.5vw;
	line-height: normal;
}
a {/*disabling text select for links*/
	text-decoration: none;
	color: black;
	outline: 0;
	-webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
p {
	text-decoration: none;
}
@media only screen and (min-aspect-ratio:16/10){
	h1 {
		letter-spacing: 0.1vw;
		font-size: 1.5vw;
	}
}
/*coming soon text for films section*/
.coming-soon {
	display: none;
	position: fixed;
	top: 40vh;
	left: 30vw;
}
@media only screen and (min-aspect-ratio:16/10){
	.coming-soon {
		top: 50vh;
		left: 42vw;
	}
}
/*dropdown menu and also lightbox*/
.menu_open, .lightbox { /*tint*/
	display: none;
	z-index: 4;
	position: fixed;
	top: 0;
	width: 100vw;
	height: 100vh;
	filter: opacity(95%);
	background-color: #1D1D1B;
}
.menu_container {/*icon plus content*/
	display: none;
	position: relative;
	width: 90vw;
	top: 0;
	left: 5vw;
}
.menu_container .logo {/*position logo container, logo size dont together with main*/
	float: left;
	width: auto;
	height: auto;
	padding-top: 3vh;
}
.lightbox-target {
	position: fixed;
	top: 6vh;
	left: 10vw;
	height: 84%;
	width: 80%;
	text-align: center;
}
.lightbox-target .ghost-element {
	height: 100%;
	width: 0.1%;
	display: inline-block;
	vertical-align: middle;
}
.lightbox-target img {
	height: auto;
	width: 98%;
	max-width: 80vw;
	display: inline-block;
	vertical-align: middle;
}
.lightbox .exit {
	position: fixed;
	z-index: 5;
	top: 5.5vh;
	right: 5vw;
}
.lightbox .exit img {
	width: 10vw;
}
.lightbox .left-arrow, .lightbox .right-arrow {
	position: fixed;
	top: 50vh;
	left: 3vw;
	z-index: 4;
}
.lightbox .right-arrow {
	left: auto;
	right: 3vw;
}
.lightbox .left-arrow img, .lightbox .right-arrow img {
	width: 8vw;
}
.lightbox .counter {
	position: fixed;
	height: 5vh;
	width: 70vw;
	left: 15vw;
	bottom: 4vh;
	color: white;
	font-family: "gill_sans";
	font-size: 3.5vw;
	text-align: center;
}
.lightbox figcaption {
	color: white;
	font-family: "gill_sans";
	font-size: 3.5vw;
	text-align: center;
	position: relative;
	bottom: 6vh;
}
@media only screen and (min-aspect-ratio:16/10){
	.menu_container {/*icon plus content*/
		width: 80vw;
		left: 10vw;
	}
	.menu_container .logo {/*position logo container*/
		padding-top: 5vh;
	}
	.lightbox-target .ghost-element {
		display: none;
	}
	.lightbox-target {
		top: 10vh;
		height: 80%;
		width: 80%;
	}
	.lightbox-target img {
		height: 100%;
		width: auto;
	}
	.lightbox .exit {
		top: 14.5vh;
		right: 10vw;
	}
	.lightbox .exit img {
		width: 2.5vw;
	}
	.lightbox .left-arrow {
		left: 9vw;
	}
	.lightbox .right-arrow {
		left: auto;
		right: 9vw;
	}
	.lightbox .left-arrow img, .lightbox .right-arrow img {
		width: 4vw;
	}
	.lightbox .counter {
		bottom: 0vh;
		font-size: 1.5vw;
	}
	.lightbox figcaption {
		font-size: 1.2vw;
		bottom: 0vh;
	}
}
.menu {/*content*/
	position: absolute;
	width: 100%;
	top: 18vh;
	text-align: center;
}
.menu ul li {/*each list item*/
	padding: 7vh 0;
}
.menu ul li a {
	text-decoration: none;
	font-size: 4.5vw;
	font-weight: bold;
	letter-spacing: 0.6vw;
	transition: color 0.5s;
	color: grey;
}
.menu ul li a:focus, .menu ul li a:hover {
	color: white;/*turn links whte on hover*/
}
.menu_content {
	display: none;
	position: absolute;
	width: 90%;
	top: 21vh;
	text-align: left;
}
.menu_content h2 {
	color: white;
	font-size: 4.5vw;
	font-weight: bold;
}
.menu_content p {
	color: white;
	font-size: 4.5vw;
	line-height: 5vw;
}
.menu_content .insta_icon img, .menu_content .fb_icon img  {
	width: 9vw;
	margin: 8vw 4vw 0 0;
	height: auto;
	vertical-align: middle;
}
.menu_content .insta_icon img {
	width: 10vw;
}
.studio img {
	position: fixed;
	height: 20vh;
	width: auto;
	left: 5vw;
}
.studio .profile_aditya img {
	top: 32vh;
}
.studio .profile_shamsher img {
	top: 54vh;
}
.studio .profile_anurag img{
	top: 77vh;
}
.studio div {
	cursor: pointer;
}
.studio div p {
	position: fixed;
	top: 32vh;
	right: 5vw;
	width: 50vw;
	display: none;
	font-size: 3.8vw;
	line-height: 4vw;
}
.studio i {
	font-style: italic;
}
@media only screen and (min-aspect-ratio:6/10){
	.studio p {/*tablet screen*/
		font-size: 3.5vw;
		line-height: 4vw;
	}
	.studio div p {
		font-size: 3vw;
		line-height: 4vw;
	}
}
@media only screen and (min-aspect-ratio:16/10){
	.menu {
		top: 34vh;/*position of links in big screens*/
	}
	.menu ul li {/*padding list items*/
		padding: 4vh 0;
	}
	.menu ul li a {
		font-size: 1.2vw;
		letter-spacing: 0.1vw;
	}
	.menu_content {
		width: 100%;
		top: 34vh;
	}
	.menu_content h2 {
		font-size: 1.2vw;
	}
	.menu_content p {
		font-size: 1.2vw;
		line-height: 2vw;
	}
	.menu_content .insta_icon img, .menu_content .fb_icon img  {
		width: 2.5vw;
		margin: 2vw 1vw 0 0;
		height: auto;
		vertical-align: middle;
	}
	.menu_content .insta_icon img {
		width: 2.8vw;
	}
	.studio div {
		position: fixed;
	}
	.studio .profile_aditya {
		left: 10vw;
	}
	.studio .profile_shamsher {
		left: 37.5vw;
	}
	.studio .profile_anurag {
		left: 65vw;
	}
	.studio img, .studio div p {
		position: static;
		width: 25vw;
		height: auto;
		margin-top: 2vh;
	}
	.studio div p {
		display: none;
		font-size: 1.2vw;
		line-height: 1.5vw;
	}
	.studio div:last-child img, .studio div:last-child p {
		margin-right: 0;
	}
}

/*header basic*/
header {
	height: 24vh;
	width: 90vw;
	position: fixed;
	top: 0;
	left: 5vw;
	z-index: 2;
	background-color: white;
	/*border: 0.1vh solid black;*/
}
header .logo {/*position logo container*/
	float: left;
	width: auto;
	height: auto;
	padding-top: 3vh;
	display: none;
}
.logo img {/*size the logo*/
	width: 18vw;
}
/*main menu icon*/
.menu_icon {
	float: right;
	width: auto;
	height: auto;
	padding-top: 5.5vh;
}
.menu_icon img {
	width: 10vw;
}
@media only screen and (min-aspect-ratio:3/4){
	.menu_icon {/*tablet screen*/
		padding-top: 6vh;
	}
}
/*header big screen*/
@media only screen and (min-aspect-ratio:16/10){
	header {
		width: 80vw;
		height: 32vh;
		left: 10vw;
		padding-top: 2vh;
	}
	.logo img{
		width: 11vw;
	}
	.menu_icon {
		padding-top: 12.5vh;
	}
	.menu_open .menu_icon {
		padding-top: 14.6vh;/*adjustment*/
	}
	.menu_icon img {
		width: 2.5vw;
	}
}
/*sub-header basic*/
.sub-header {
	height: 3vh;
	width: 100vw;
	position: fixed;
	left: 0vw;
	top: 18vh;
	z-index: 2;
}
.sub-header a:hover {
	font-style: italic;
}
/*sub-header big screen*/
@media only screen and (min-aspect-ratio:16/10){
	.sub-header {
		height: 12vh;
		width: 58vw;
		left: 22vw;
		top: 16.5vh;
		z-index: 2;
	}
}
/*horizontal navbar basics*/
.horizmenu {
	display: inline-block;
	position: relative;
	text-align: center;
}
.horizmenu ul li {
	display: inline;
}
.horizmenu ul li a {
	letter-spacing: 0.1vw;
	font-size: 1.35vw;
	padding: 0 0.5vw 1vh 0.5vw;
}
/*submenu text*/
.submenu {
	width: 100%;
	display: inline-block;
	padding-left: 2vw;
}
.submenu ul li {
	padding: 0 1.5vw;
}
.submenu ul li a {
	letter-spacing: 0.2vw;
	font-size: 3vw;
}
@media only screen and (min-aspect-ratio:3/4){
	.submenu {/*tablet screen*/
		padding: 2vh 0 2vh 4vw;
	}
	.submenu ul li {
		padding: 0 2.5vw;
	}
}
@media only screen and (min-aspect-ratio:16/10){
	.horizmenu ul li a {/*wide screens*/
		font-size: 1.2vw;
		letter-spacing: 0.05vw;
	}
	.submenu {
		padding: 0;
	}
	.submenu ul li {
		padding: 0 5vw;
	}
}
/*subsubmenu text*/
.subsubmenu {
	width: 100%;
	padding-top: 2vh;
}
.subsubmenu .arch, .subsubmenu .design, .subsubmenu .film {
	display: none;
}
.subsubmenu ul li {
	padding: 0 2vw;
}
.subsubmenu ul li a {
	letter-spacing: 0.3vw;
	font-size: 2.5vw;
}
@media only screen and (min-aspect-ratio:7/10){
	.subsubmenu {
		padding-top: 1vh;
	}
}
@media only screen and (min-aspect-ratio:16/10){
	.subsubmenu {/*big screen*/
		top: 5vh;
	}
	.subsubmenu ul li a {
		letter-spacing: 0.05vw;
		font-size: 1.2vw;
	}
}
/*project page*/
#project-page {
	display: none;
	z-index: 0;
	position: absolute;
	top: 18vh;
	left: 5vw;
	width: 90vw;
	z-index: 1;
	/*border: 0.1vh solid black;*/
}
#project-page figure img {
	width: 100%;
	height: auto;
}
#project-page .colp1 {
	display: inline-block;
	width: 44vw !important;
	position: -webkit-sticky;
	position: sticky;
	top: 9vh; /*sticky threshold for phones*/
	height: 120vw;
	padding-right: 3%;
	float: left;
}
#project-page .colp1 a:hover {
	font-style: italic;
}
#project-page .colp2 {
	display: inline-block;
	width: 46%;
	text-align: justify;
	float: left;
}
#project-page .colp2 figcaption {
	padding: 0;
	font-family: "gill_sans";
	font-size: 2.5vw;
	text-align: center;
}
#project-page .colp2 figure {
	margin: 3vh 0;
}
#project-page .colp2 figure img {
	display: none;
}
#project-page .colp2 .lightboxfig_active img {
	display: inline-block;
}
#project-page .colp1 p {
	margin-top: 1vh;
	font-size: 3vw;
	line-height: 4.5vw;
	color: black;
}
#project-page .colp2 p {
	font-size: 3vw;
	line-height: 4.5vw;
	color: black;
	min-height: 18vh;
}
#project-page a:hover {
	font-style: italic;
}
@media only screen and (min-aspect-ratio:6/10){
	#project-page .colp1 {
		top: 2vh; /*sticky threshold for tablets*/
	}
	#project-page .colp1 p, #project-page .colp2 p {
		font-size: 2.5vw;
		line-height: 4vw;
	}
}
@media only screen and (min-aspect-ratio:16/10){
	/*big screen adjustments*/
	#project-page {
		left: 10vw;
		width: 80vw;
		top: 35.5vh;
	}
	#project-page .colp1 {
		position: -webkit-sticky;
		position: sticky;
		width: 26vw !important;
		padding-right: 3%;
		height: 50vw;
		top: -12vh; /*sticky threshold for laptops & above*/
	}
	#project-page .colp1 p {
		margin: 3vh 0 5vh 0vh;
		font-size: 1.2vw;
		line-height: 1.8vw;
	}
	#project-page .colp2 {
		width: 64%;
	}
	#project-page .colp2 p {
		font-size: 1.2vw;
		line-height: 2vw;
		min-height: 38vh;
	}
	#project-page .colp2 .fit-height {
		text-align: center;
	}
	#project-page .colp2 .fit-height img {
		width: auto;
		height: 65vh;
	}
	#project-page .colp2 figcaption {
		font-size: 1.2vw;
	}
	#project-page .colp2 figure {
		margin: 5vh 0;
	}
}
/*masonry grid basics*/
#grid {
	z-index: 1;
	position: absolute;
	top: 24vh;
	left: 4vw;
	width: 92vw;
	/*border: 0.1vh solid black;*/
}
#grid .item a {
	outline: 0;
}
#grid .item, #grid .grid-sizer {
	width: 44vw !important;
	margin: 0 1vw 1.5vw 1vw;
}
#grid .item img {
	width: 100% !important;
	height: auto !important;
}
/*grid big screen*/
@media only screen and (min-aspect-ratio:16/10){
	#grid {
		top: 35.5vh;
		left: 9.5vw;
		width: 81vw;
	}
	#grid .gutter-sizer {
		width: 1vw;
	}
	#grid .item, #grid .grid-sizer  {
		width: 26vw !important;
		margin: 0 0.5vw 1vw 0.5vw;
	}
	#grid .item img {
		width: 100% !important;
		height: auto !important;
	}
}/*big screen finish*/

#grid .item_hidden {
	position: absolute;
	width: 100%;
	bottom: 20%;
	text-align: center;
	padding: 1vh 0;
	background-color: #f2f2f2;
	opacity: 0;
	transition: opacity 1s;
}
#grid .item_visible {
	filter: contrast(50%);
	transition: filter 1s;
}
#grid .item_visible img {
	display: none;/*fade in with js*/
}
/*loading animation*/
.loading {
	z-index: 5;
	position: fixed;
	top: 3vh;
	left: 2vw;
}
.loading img {
	width: 23.5vw;
	height: auto;
}
@media only screen and (min-aspect-ratio:16/10){
	.loading {
		top: 3vh;
		left: 8.4vw;
	}
	.loading img {
		width: 14.3vw;
	}
}
/*loading animation over!*/