/* 18-25 *//* 87-99 *//* 503-506 *//* 664-665     138title*/ 

@font-face {
  font-family: 'Helvetica Neue';
  src: url('../fonts/HelveticaNeue-Thin-12.eot');
  src: url('../fonts/HelveticaNeue-Thin-12.woff2') format('woff2'),
       url('../fonts/HelveticaNeue-Thin-12.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'HelveticaNeue-Thin';
  src: url('HelveticaNeue-Thin.woff') format('woff'),
       url('HelveticaNeue-Thin.ttf') format('truetype'),
       url('HelveticaNeue-Thin.svg#HelveticaNeue-Thin') format('svg');
  font-weight: normal;
  font-style: normal;
}
html, body {
	margin: 0;
	color: #ffffff;
	background-color: #000000;
    /*font-family: 'helveticaNeue' !important;*/
    font-family: 'Helvetica Neue' !important;
}
* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	-webkit-tap-highlight-color: rgba(255,255,255,0);
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;
	
}
.hidden {
	/* 18-25 */
	visibility: hidden;
}
img.videoPlayImage {
	cursor: pointer;
}
#scrollArea {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}
#stage {
	position: fixed;
	left: 0;
	top: 0;
	overflow: hidden;
}
.isMobile #stage {
	position: fixed;
}
#stage #stats {
	position: absolute;
	top: 0;
	left: 0;
	font-size: 2rem;
}
br.portrait {
	display: none;
}
#stage #bg {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 1;
	-webkit-transition: opacity 0.66s ease;
	-moz-transition: opacity 0.66s ease;
	-ms-transition: opacity 0.66s ease;
	-o-transition: opacity 0.66s ease;
	transition: opacity 0.66s ease;
	background-color: #2242cc;
    background-repeat:no-repeat;
    background-position:center;
    background-size: cover;   
}
#stage #bg * {
	position: absolute;
	top: 0;
	left: 0;
    background-repeat:no-repeat;
    background-position:center;
    background-size: cover;
}

#stage #introOverlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	height: 100%;
	background-color: #666666; /*#2242cc  initial bluish color overlay  */
}
.isMobile #stage #bg, .isMobile #stage #bg * {
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;

}

#stage #logo {
	position: absolute;
	display: inline-block;
	width: 27rem; /* 27 */;
	left: 50%;
	margin-left: -15.5rem; /* 13.5 */
}
#stage #logo img {
	position: relative;
	width: 100%;
	display: inline-block;
}
#stage #logo2 {
	/* 87-99 */
	position: absolute;
	display: inline-block;
	width: 20rem; /* 27 */;
	/*left: 20vw; */
    margin-top:18vh;
	margin-left: 15vw;  
    
}

.slide {
    position: absolute;
    top: -3vh;
    -webkit-animation: slide 0.5s forwards;
    -webkit-animation-delay: 1s;
    animation: slide 0.5s forwards;
    animation-delay: 1s;
}

@-webkit-keyframes slide {
    
    100% { top: 0;opacity :0; }
}

@keyframes slide {
    
    100% { top: 0; opacity :1;}
}


#stage #logo2 img {
	position: relative;
	width: 100%;
	display: inline-block;
}
#stage #logo #logoStudios {
	position: absolute;
	display: inline-block;
	top: 0;
	left: 0;
}
#stage #cinematic {
	position: absolute;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	font-size: 3rem;
	font-weight: 200;
	letter-spacing: 0.15em;
    /*color: crimson;*/
}
#stage #introText {
	position: absolute;
	width: 100%;
	text-align: center;
	font-size: 1.2rem;
	text-transform: uppercase;
	font-weight: 200;
	letter-spacing: 0.4em;
	bottom: -3rem;
}
#stage #introText a {
	display: inline-block;
	position: relative;
}
#stage #introText #arrowDown {
	position: relative;
	width: 3.25em;
	margin-top: 1.25em;
}
#stage #hamburger {
	position: absolute;
	left: 3rem;
	top: 3rem;
	width: 3.2rem;
	height: 3.2rem;
    z-index: 99;
}
#stage #hamburger svg {
	position: absolute;
	width: 100%;
	height: 100%;
}
#stage #ui {
	-webkit-transition: opacity 0.66s ease;
	-moz-transition: opacity 0.66s ease;
	-ms-transition: opacity 0.66s ease;
	-o-transition: opacity 0.66s ease;
	transition: opacity 0.66s ease;
}
.hasOverlay #stage #ui {
	opacity: 0;
}
#stage #titles {
	position: absolute;
	text-align: center;
	width: 80%;
	left: 10%;
	height: 66rem; /* 56*/
	margin-top: 0px; /* -22 */
	top: 5%; /* 50 */
	opacity: 0;
	-webkit-transition: opacity 0.66s ease;
	-moz-transition: opacity 0.66s ease;
	-ms-transition: opacity 0.66s ease;
	-o-transition: opacity 0.66s ease;
	transition: opacity 0.66s ease;
	font-family: 'Helvetica Neue' !important;
	-webkit-text-fill-color: white; /* Will override color (regardless of order) */;
	-webkit-text-stroke-width: 0px;
	-webkit-text-stroke-color: cccccc;
     
}
#stage #titles.init {
	opacity: 1;
}
#stage #titles .project {
	position: absolute;
	width: 100%;
	top: 0;
}
#stage #titles .project #title {
    font-family:'Helvetica Neue';
	position: relative;
	width: 100%;
	opacity: 0.4;
	-webkit-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
    padding-top: 4rem;
    padding-bottom: 4rem;
    /*border: 2px solid green;*/
}
#stage #titles .project #title.bold {
	opacity: 1;
}
#stage #titles .project.hidden #title {
	opacity: 0;
}
#stage #titles .project #title p {
	font-size: 4.5rem;
	line-height: 1em;
	/*letter-spacing: 0.1em;*/
	font-weight: 200;
	text-transform: uppercase;
    
	
}
#stage #titles .project #title p.largest {
    font-family:'Helvetica Neue';
	font-size: 6.5rem;
    /*letter-spacing: -0.2rem;*/
    /*font-weight: 500;
    padding-bottom: 8rem;
    border: 2px solid green;*/
}


#stage #titles .project #title p.largest span {
	font-size: 4.5rem;
}
#stage #titles .project #title p.larger {
	font-size: 5rem;
    
}
#stage #titles .project #title p.smaller {
	font-size: 4rem;
	line-height: 1em;
	/*letter-spacing: 2px;*/

	-webkit-text-fill-color: crimson;
    
}
#stage #titles .project #title p.smaller2 {
	font-size: 4.5rem;
	line-height: 1em;
    letter-spacing: 0.1rem;

	/*letter-spacing: 2px;*/
}
#stage #titles .project #title p.smallest {
	font-size: 3.25rem;
	line-height: 1em;
	/*letter-spacing: 0.15em;*/
}
#stage #titles .project .projectContent {
	position: absolute;
	width: 100%;
}

#stage #titles .project .projectContent .description span{
    font-size:2rem;
}
#stage #titles .project .projectContent .description, p{   /* technical text */
    font-size:2rem;
    
}
#stage #titles .project .projectContent .description, img{
    vertical-align: middle
}




.project .info {
	display: none;
    letter-spacing: 0.1rem;
}
.project .info.visible {
	display: block;
}
.projectNav {
	position: relative;
}
.projectNav a {
	position: relative;
	font-weight: 700;
	font-size: 1rem;
	display: inline-block;
	margin: 0.5rem;
	text-transform: uppercase;
	/*letter-spacing: 0.2em;*/
	padding: 1.5em;
}
.projectNav a .arrow {
	position: absolute;
	width: 1.1rem;
	height: 0.6rem;
	left: 50%;
	margin-left: -0.55rem;
	bottom: 0;
	opacity: 0;
    visibility: hidden;
}
#stage #titles .project #client {
	position: absolute;
	font-size: 1.2rem;
	/*font-weight: 800;
	letter-spacing: 0.4em;*/
	text-transform: uppercase;
	width: 100%;
	top: -1em;
	transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	-webkit-transform: translateY(-100%);
}
#stage #titles .project #extra {
	position: relative;
	font-size: 1.6rem;
	font-weight: 400;
	/*letter-spacing: 0.05em;*/
	width: 100%;
	margin-top: 1rem;
    
}
.projectInfo {
	position: relative;
}
.projectInfo .info {
	position: absolute;
	top: 0;
}
.projectInfo #description {
	font-size: 1.4rem;
	font-weight: 400;
	/*letter-spacing: 0.05em;*/
	line-height: 1.4em;
	width: 56%;
	margin-left: 22%;
    color: crimson;
}
.projectInfo .info p {
	margin: 1rem 0;
	
}
.projectInfo #description p.available > * {
    font-family:'Helvetica Neue';
	font-size: 1.1rem;
	margin: 0 2rem;
	display: inline-block;
	text-transform: uppercase;
	/*letter-spacing: 0.2em;*/
	line-height: 1.4em;
}
.projectInfo #description a:hover {
	text-decoration: underline;
}
.projectInfo #description p.awards {
	text-align: center;
	margin-top: 1.5em;
}
.projectInfo #description p.awards > * {
	display: inline-block;
	margin: 0 2rem;
	vertical-align: middle;
}
.projectInfo #description p.awards > *:first-child {
	margin-left: 0;
}
.projectInfo #description p.awards > *:last-child {
	margin-right: 0;
}
.projectInfo #credits {
	font-size: 1.1rem;
	/*letter-spacing: 0.2em;*/
	line-height: 1.5em;
	width: 48%;
	margin-left: 26%;
}
.projectInfo #credits span {
	display: inline;
	margin-left: 0.5rem;
	margin-right: 0.5rem;
}
.vignette {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url("../img/vignette.png");
	background-size: 100% 100%;
}
.social {
	position: fixed; /*absolute fixed*/
	text-align: center;
    /*transform: translate(-50%, 0);*/
    width:90vw;
    height:10vh;
    color: #666666;
	white-space: nowrap;
    line-height: 60%;
    /*text-align: center;*/
	/*-webkit-transition: bottom 0.5s ease 0s;
	-moz-transition: bottom 0.5s ease 0s;
	-ms-transition: bottom 0.5s ease 0s;
	-o-transition: bottom 0.5s ease 0s;
	transition: bottom 0.5s ease 0s;
     border: dotted 1px pink;*/
    animation: fadein 6s;
    -moz-animation: fadein 6s; /* Firefox */
    -webkit-animation: fadein 6s; /* Safari and Chrome */
    -o-animation: fadein 6s; /* Opera */
    /*border: solid 1px blue;  */
    left: 5vw;

}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}




.social.visible {
	bottom: 0;
     
}
.copy{ 
  position: fixed;
  right: 0;
  left: 5vw;
  padding: 1rem;
  bottom: 2vh;
  text-align: center;
  width:88vw;
  /*border:solid 1px yellow;*/
  }
.social a {
	position: relative;
	display: inline-block;
	margin: 0 1rem;
}
.social a img{
	position: relative;
	display: block;
    opacity:0.7;
}
.social a img:hover{
    opacity:1;
}
.social .home img{
    width: 3rem;
	height: 3rem;

}
.social .home{ 
  /*border:solid 1px yellow;   
    top:-5rem; left: -58rem;  */
  position: fixed;
  bottom: 2vh;
  left: 1.5vw;
}
.social .tv img,.social .film img, .social .exhibit img{
    width: 6rem;
	height: 6rem;
}

.social .tv, .social .film{
   position: absolute; 
   top: 1vh; /*-53rem */
   left: 0.5vh; /*-83.25rem border:dotted 1px red;*/
   
}

.social .exhibit{
    position: absolute; 
   top: 10vh; /*-53rem */
   left: 0.5vh; /*-51.5rem border:dotted 1px blue;*/
   
}

.isMobile .social .tv, .isMobile .social .film{
   position: absolute; 
   top: 10vh; /*-53rem */
   left: 0.5vh; /*-83.25rem border:dotted 1px red;*/
    
}
.isMobile .social .exhibit{
   position: absolute; 
   top: 20vh; /*-53rem */
   left: 0.5vh; /*-51.5rem border:dotted 1px blue;*/
    
}
.footer {
    position: absolute;
	right: 3rem; /* */
	bottom: -4rem; /* */
	white-space: nowrap;
	-webkit-transition: bottom 0.5s ease 0s;
	-moz-transition: bottom 0.5s ease 0s;
	-ms-transition: bottom 0.5s ease 0s;
	-o-transition: bottom 0.5s ease 0s;
	transition: bottom 0.5s ease 0s;
}
.footer a {
	position: relative;
	display: inline-block;
	margin: 0 1rem;
}
.footer a img {
	position: relative;
	display: block;
	width: 2.5rem;
	height: 2.5rem;
}
.footer.visible {
	bottom: 4rem;
}


#stage #tools {
	position: absolute;
	bottom: -5rem;
	width: 100%;
	text-align: center;
	-webkit-transition: All 0.5s ease 0s;
	-moz-transition: All 0.5s ease 0s;
	-ms-transition: All 0.5s ease 0s;
	-o-transition: All 0.5s ease 0s;
	transition: All 0.5s ease 0s;
}
#stage #tools.visible {
	bottom: 4rem;
}
#stage #tools .icon {
	margin: 0 0.5rem;
}
#tools a {
	display: inline-block;
}
#stage .icon {
	width: 4rem;
	height: auto;
}
.icon {
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
.icon:hover {
	transform: scaleX(1.1) scaleY(1.1);
	-ms-transform: scaleX(1.1) scaleY(1.1);
	-webkit-transform: scaleX(1.1) scaleY(1.1);
}
.icon:active {
	transform: scaleX(0.9) scaleY(0.9);
	-ms-transform: scaleX(0.9) scaleY(0.9);
	-webkit-transform: scaleX(0.9) scaleY(0.9);
}
.st0 {
	stroke: #FFFFFF;
	stroke-miterlimit: 2;
	stroke-width: 1px;
	fill: transparent;
}
a:hover .st0, a:active .st0 {
	stroke-width: 2px;
}
.testCanvas {
	position: absolute;
	top: 0;
	left: 0;
    bottom: 0; left: 0;

}
#stage a {
	cursor: pointer;
	color: #ffffff;
	text-decoration: none;
}
#stage .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	text-align: center;
	font-size: 0;
	white-space: nowrap;
	background-color: rgba(140,0,0,0.6); /* blue tint on hamburger  rgba(58,73,214,0.6)*/
}
#stage .overlay.visible {
	display: block;
}
#stage .overlay * {
	white-space: normal;
}
#stage .overlay .table {
	display: inline-table;
	position: relative;
	height: 100%;
	vertical-align: top;
}
#stage .overlay #menu {
	text-align: right;
	margin-right: 12.5rem;
}
#stage .overlay #menu a {
	display: block;
	font-size: 1.4rem;
	margin: 2rem 0;
	color: #ffffff;
	opacity: 0.5;
	text-transform: uppercase;
	font-weight: 700;
	-webkit-transition: opacity 0.5s ease 0s;
	-moz-transition: opacity 0.5s ease 0s;
	-ms-transition: opacity 0.5s ease 0s;
	-o-transition: opacity 0.5s ease 0s;
	transition: opacity 0.5s ease 0s;
}
#stage .overlay #menu a:hover {
	opacity: 1;
}
#stage .overlay #menu a.selected {
	opacity: 1;
}
#stage .overlay #menu a:first-child {
	margin-top: 0;
}
#stage .overlay #menu a:last-child {
	margin-bottom: 0;
}
#stage .overlay #contents {
	width: 60rem;
	text-align: left;
}
#stage .overlay #closeButton {
	position: absolute;
	display: inline-block;
	left: 50%;
	margin-left: -2rem;
	bottom: 4rem;
}
#stage .overlay .content {
	width: 100%;
	height: 100%;
	vertical-align: middle;
	display: none;
	font-size: 1rem;
	font-weight: 200;
}
#stage .overlay .content.visible {
	display: table-cell;
}
#stage .overlay .text {
	position: absolute;
	text-align: left;
	width: 100%; //;
	height: 68%; /* 503-506 */ //;
	top: 20%;
	height: 50%;
	top: 30%;
	overflow: hidden;
	padding-bottom: 6rem;
	padding-top: 6rem;
	-webkit-mask-image: -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,1),rgba(0,0,0,1),rgba(0,0,0,1),rgba(0,0,0,1),rgba(0,0,0,1),rgba(0,0,0,1),rgba(0,0,0,1),rgba(0,0,0,1),rgba(0,0,0,0));
}
#stage .overlay p {
	margin-bottom: 1em;
}
#stage #contact #menu {
	display: none;
}
#stage .overlay #team.content ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0;
}
#stage .overlay #team.content ul li {
	display: inline-block;
	font-size: 0;
	width: 48%;
	margin: 0 0 1em;
	font-size: 1.8rem;
}
#stage .overlay #team.content ul li:nth-child(odd){margin-left:0;margin-right:2%;}
#stage .overlay #team.content ul li:nth-child(even){margin-right:0;margin-right:2%;}
#stage .overlay .closeOverlay {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	display: none;
}
#stage .overlay.visible .closeOverlay {
	display: block;
}
#stage .overlay .content .list > div {
	width: 50%;
	padding-left: 0.75em;
	padding-right: 0.75em;
}
#stage #projects {
	font-size: 0.8rem;
}
#stage #projects .quote {
	font-size: 0.7em;
    
	/*display: none;*/
}
#stage #projects a {
	font-size: 1.8rem;
	line-height: 1.2em;
}
#stage #projects b {
	font-weight: 400;
}

#stage #awards {
	
}
#stage #awards p{
	font-size: 1.4rem;
}
#stage #awards img{float: left; padding: 1vw;}

#stage #awards .quote {
	font-size: 0.8em;
	display: block;
}
#stage #awards a {
	font-size: 1.8rem;
	line-height: 1.2em;
}
#stage #awards b {
	font-weight: 400;
}
#stage #carrieres {
	font-size: 1.4rem;
}
#stage #carrieres .quote {
	font-size: 0.8em;
	display: block;
}
#stage #carrieres a {
	font-size: 1.8rem;
	line-height: 1.2em;
}
#stage #carrieres b {
	font-weight: 400;
}
#stage #contact #address {
	position: relative;
	width: 100%;
	font-size: 0;
}
#stage #contact #address p {
	position: relative;
	display: inline-block;
	width: 48%;
	margin-left: 2%;
	margin-right: 2%;
	text-align: left;
	font-size: 1.8rem;
	vertical-align: top;
	font-weight: 200;
	line-height: 1.4em;
}
#stage #contact #address p:first-child {
	margin-left: 0%;
}
#stage #contact #address p:last-child {
	margin-right: 0%;
}
#stage #contact a:hover {
	text-decoration: underline;
}
#mapContainer {
	position: absolute;
	width: 60rem;
	height: 19rem;
	top: 0;
	left: 0;
}
#mapContainer #map {
	visibility: hidden;
}
#map {
	position: relative;
	width: 100%;
	height: 19rem;
	margin-top: 2rem;
}
#sideMenu {
	position: absolute;
	top: 0;
	height: 100%;
	display: table;
	right: -25rem;
	-webkit-transition: right 0.66s ease 0s;
	-moz-transition: right 0.66s ease 0s;
	-ms-transition: right 0.66s ease 0s;
	-o-transition: right 0.66s ease 0s;
	transition: right 0.66s ease 0s;
    
}
#sideMenu.visible {
	right: 2rem;
}
#sideMenu #cell {
	position: relative;
	top: 0;
	left: 0;
	height: 100%;
	display: table-cell;
	vertical-align: middle;
	text-align: left;
    
}
.sideProject {
	position: relative;
	display: block;
	white-space: nowrap;
	height: 3.1rem; /* 664-665  2.1rem*/;
	padding: 0.7rem 0;
	text-align: right;
    
}
.sideProject #circle {
	position: relative;
	display: inline-block;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 2rem;
	margin-left: 0.5rem;
	margin-right: 0.5rem;
	-webkit-box-shadow: inset 0px 0px 0px 1px #fff;
	-moz-box-shadow: inset 0px 0px 0px 1px #fff;
	box-shadow: inset 0px 0px 0px 1px #fff;
	overflow: hidden;
	vertical-align: middle;
	z-index: 0;
    
    
}
.sideProject #circle #fill {
   display: block;
	width: 2rem;;
	height: 2rem;;
	background-color: crimson; /*   white*/
	transform: scaleX(0) scaleY(0);
	-ms-transform: scaleX(0) scaleY(0);
	-webkit-transform: scaleX(0) scaleY(0);
}
.sideProject.selected #circle #fill {
	transform: scaleX(1) scaleY(1);
	-ms-transform: scaleX(1) scaleY(1);
	-webkit-transform: scaleX(1) scaleY(1);
}
.sideProject #title {
	position: absolute;
	display: inline-block;
	font-size: 1.2rem;
	vertical-align: middle;
	letter-spacing: 0.15em;
	font-weight: 400;
	text-transform: uppercase;
	color: #ffffff;
	white-space: nowrap;
	opacity: 0;
	right: 2rem;
	top: 45%; /* 50 */
	transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-webkit-transition: opacity 0.5s ease 0s;
	-moz-transition: opacity 0.5s ease 0s;
	-ms-transition: opacity 0.5s ease 0s;
	-o-transition: opacity 0.5s ease 0s;
	transition: opacity 0.5s ease 0s;
}
.sideProject.selected #title {
	font-weight: 200;
	opacity: 1;
}
.sideProject:hover #title {
	opacity: 1;
}
.sundance {
	width: 7.5rem;
}
.hotdocs {
	width: 7.5rem;
	display: none;
}
.tribeca {
	width: 4rem;
}
.sxsw {
	width: 6rem;
}
.languageMenu {
	position: absolute;
	display: block;
	right: 3rem;
	top: 3rem;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	line-height: 2.5em;
}
.languageMenu .button {
	position: relative;
	display: inline-block;
	cursor: pointer;
}
.languageMenu .button .arrow {
	display: inline-block;
	vertical-align: middle;
	width: 1.1rem;
	height: 0.6rem;
	margin-left: 0.75rem;
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
}
.languageMenu.opened .button .arrow {
	transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
}
.languageMenu .other {
	position: relative;
	display: block;
	overflow: hidden;
}
.languageMenu .other .list {
	position: relative;
	display: block;
	border-bottom: solid 1px;
	transform: translateY(-98%);
}
.languageMenu .other a {
	position: relative;
	display: block;
}

/* =======================================================================================
        MEDIA / Portrait

*/

@media all and (orientation : portrait) {
br.portrait {
	display: block;
}
#stage #titles {
	width: 80%;
	left: 10%;
	height: 75rem; /* 55 */
	margin-top: -5rem; /* -25 */
    /*border: 2px solid blue;*/
	
}
#stage #titles .project #title p.largest {
	font-size: 5rem;
}
#stage #titles .project #title p.larger {
	font-size: 2rem;
}
#stage #titles .project #title p {
	font-size: 4rem;
}
#stage #titles .project #title p.smaller {
	font-size: 3rem;
}
#stage #titles .project #title p.smallest {
	font-size: 2.5rem;
}
.projectInfo #description {
	width: 90%;
	margin-left: 5%;
}
.projectInfo #credits {
	width: 90%;
	margin-left: 5%;
}
#stage #titles .project #client {
	width: 90%;
	left: 5%;
}
.sideProject #title {
	display: none;
}
#stage .overlay {
	padding: 16rem 4rem 12rem;
}
#stage .overlay #menu {
	text-align: left;
	margin-right: 0;
	text-align: center;
	width: 100%;
}
#stage .overlay #menu a {
	display: inline-block;
	margin: 0.5em 1em;
}
#stage .overlay .table {
	display: table;
	position: relative;
	height: auto;
	vertical-align: top;
}
#stage .overlay #contents {
	text-align: left;
	width: 100%;
	height: 100%;
}
#stage .overlay .text {
	height: 100%;
	top: 0%;
	padding-bottom: 5rem;
	padding-top: 5rem;
}
.isMobile #stage #bg, .isMobile #stage #bg * {
    background: no-repeat center center;    
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
}

@media all and (orientation : landscape) {
.isMobile .social .tv, .isMobile .social .film{
   position: absolute; 
   top: 15vh; /*-53rem */
   left: 0.5vh; /*-83.25rem border:dotted 1px red;*/
    
}
.isMobile .social .exhibit{
   position: absolute; 
   top: 25vh; /*-53rem */
   left: 0.5vh; /*-51.5rem border:dotted 1px blue;*/
    
}
    

}
/* =======================================================================================
        MEDIA / max-width: 640px / Portrait

*/


@media all and (max-width: 640px) and (orientation : portrait) {
.isMobile #stage #logo2 {
	/*left: 20vw; */
    margin-top:5vh;
	margin-left: 5vw;  
    
}
#stage #titles {
	/*border: 2px solid red;*/
	
}
    
    #stage #contact #address p {
	display: block;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}
#stage #contact #address p:first-child {
	margin-left: 0;
}
#stage #contact #address p:last-child {
	margin-right: 0;
}
#mapContainer {
	height: 22rem;
}
#map {
	height: 22rem;
}
    
.social .tv, .social .film{
   position: absolute; 
   top: 10vh; /*-53rem */
   left: 0.5vh; /*-83.25rem border:dotted 1px red;*/
   
}
.social .exhibit{
    position: absolute; 
   top: 20vh; /*-53rem */
   left: 0.5vh; /*-51.5rem border:dotted 1px blue;*/
   
}    
}

.copy {
    
}