html, body {margin: 0;font-family: alright sans;color: #ffffff;background-color: #000000; overflow:hidden;}
* {-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;}
/*body.isMobile {overflow: hidden;}
*/#scrollArea {position: absolute;width: 0;height: 0;overflow: hidden;}
#stage {position: fixed;left: 0;top: 0;overflow: hidden;}
.isMobile #stage {position: absolute;}
#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;}
#stage #bg * {position: absolute;top: 0;left: 0;}
#stage #introOverlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: #2242cc;}
#stage #logo {position: absolute;display: inline-block;width: 27rem;left: 50%;margin-left: -13.5rem;}
#stage #logo 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: 1.25rem;font-weight: 400;letter-spacing: 0.15em;}
#stage #introText {position: absolute;width: 100%;text-align: center;font-size: 1.2rem;text-transform: uppercase;font-weight: 700;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;}
#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: 56rem;margin-top: -19rem;top: 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;}
#stage #titles.init {opacity: 1;}
#stage #titles .project {position: absolute;width: 100%;top: 0;}
#stage #titles .project #title {position: relative;width: 100%;opacity: 0.4;-webkit-transition: opacity 0.5s ease;transition: opacity 0.5s ease;}
#stage #titles .project #title.bold {opacity: 1;}
#stage #titles .project.hidden #title {opacity: 0;/*transform: scaleX(0.25) scaleY(0.25);-ms-transform: scaleX(0.25) scaleY(0.25);-webkit-transform: scaleX(0.25) scaleY(0.25);*/}
#stage #titles .project #title p {font-size: 5rem;line-height: 1em;letter-spacing: 0.1em;font-weight: 200;text-transform: uppercase;}
#stage #titles .project #title p.largest {font-size: 7rem;}
#stage #titles .project #title p.larger {font-size: 6rem;}
#stage #titles .project #title p.smaller {font-size: 3.5rem;line-height: 1em;letter-spacing: 0.15em;}
#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%;}
.project .info {display: none;}
.project .info.visible {display: block;}
.projectNav {position: relative;}
.projectNav a {position: relative;font-weight: 700;font-size: 1rem;display:none !important;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;}
#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%;}
.projectInfo .info p {margin: 1rem 0;}
.projectInfo #description p.available > * {font-family: Knockout, Helvetica, Arial;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-family: Knockout, Helvetica, Arial;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-size: 100% 100%;}
.social {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;}
.social.visible {bottom: 4rem;}
.social a {position: relative;display: inline-block;margin: 0 1rem;}
.social a img {position: relative;display: block;width: 1.6rem;height: 1.6rem;}
#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;}
#stage a {cursor: pointer;color: #ffffff;text-decoration: none;}
/*#stage a:link {color: #ffffff;}
#stage a:hover {text-decoration: underline;}
*/#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(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: 1.8rem;font-weight: 200;}
#stage .overlay .content.visible {display: table-cell;}
#stage .overlay .text {position: absolute;text-align: left;width: 100%;height: 68%;top: 20%;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 .text p:last-child {margin-bottom: 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 #press {font-size: 1.4rem;}
#stage #press .quote {font-size: 0.8em;display: none;}
#stage #press a {font-size: 1.8rem;line-height: 1.2em;}
#stage #press 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;padding: 1rem 0;text-align: right;}
.sideProject #circle {position: relative;display: inline-block;width: 0.6rem;height: 0.6rem;border-radius: 2rem;margin-left: 1rem;margin-right: 1rem;/*border-width: 0.2rem;border-style: solid;border-color: #ffffff;*/-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 {position: relative;display: block;width: 100%;height: 100%;background-color: #ffffff;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: 1rem;vertical-align: middle;letter-spacing: 0.15em;font-weight: 400;text-transform: uppercase;color: #ffffff;white-space: nowrap;opacity: 0;right: 3rem;top: 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: 700;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;display: none;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 all and (orientation : portrait) {br.portrait {display: block;}
#stage #titles {width: 80%;left: 10%;height: 55rem;margin-top: -25rem;}
#stage #titles .project #title p.largest {font-size: 5rem;}
#stage #titles .project #title p.larger {font-size: 4.5rem;}
#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;}
/*.st0 {stroke-width:0.15rem;}
*/#stage .overlay {padding: 16rem 4rem 12rem;}
#stage .overlay #menu {text-align: left;margin-right: 0;/*margin-bottom: 3rem;*/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: 45rem;*/height: 100%;}
#stage .overlay .text {height: 100%;top: 0%;padding-bottom: 5rem;padding-top: 5rem;}
}
@media all and (max-width: 640px) and (orientation : portrait) {
#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;}
}



@media only screen and (max-width: 639px) {
.bannerBtn{font-size: 16px;margin-top: 0px;padding: 7px 15px;top: 30px;}

}

@media only screen and (max-width: 479px) {
#stage #titles {height: 100px ;left: 10%;margin-top: 200px;opacity: 0;position: relative !important;text-align: center;top:0;}

}