@font-face {

   font-family: 'GothamBook';

   src: url('../assets/fonts/Gotham-Book.eot');

   src: url('../assets/fonts/Gotham-Book.eot?#iefix') format('embedded-opentype'), url('../assets/fonts/Gotham-Book.woff') format('woff'), url('../assets/fonts/Gotham-Book.ttf') format('truetype');

   font-weight: normal;

   font-style: normal;

 }

 @font-face {

   font-family: 'GothamBookItalic';

   src: url('../assets/fonts/Gotham-BookItalic.eot');

   src: url('../assets/fonts/Gotham-BookItalic.eot?#iefix') format('embedded-opentype'), url('../assets/fonts/Gotham-BookItalic.woff') format('woff'), url('../assets/fonts/Gotham-BookItalic.ttf') format('truetype');

   font-weight: normal;

   font-style: normal;

 }

 @font-face {

   font-family: 'GothamExtraLightItalic';

   src: url('../assets/fonts/Gotham-ExtraLightItalic.eot');

   src: url('../assets/fonts/Gotham-ExtraLightItalic.eot?#iefix') format('embedded-opentype'), url('../assets/fonts/Gotham-ExtraLightItalic.woff') format('woff'), url('../assets/fonts/Gotham-ExtraLightItalic.ttf') format('truetype');

   font-weight: normal;

   font-style: normal;

 }

 .bookFont {

   font-family: 'GothamBook', Arial, Helvetica, sans-serif;

   font-weight: normal;

 }

 .italicFont {

   font-family: 'GothamBookItalic', Arial, Helvetica, sans-serif;

   font-weight: normal;

 }

 .thinFont {

   font-family: 'GothamExtraLightItalic', Arial, Helvetica, sans-serif;

   font-weight: normal;

 }

 .tungsten {

   font-family: 'Tungsten A', 'Tungsten B';

   font-weight: 500;

   font-style: normal;

 }

 .inline-block {

   display: -moz-inline-stack;

   display: inline-block;

   zoom: 1;

   *display: inline;

 }

 

 .ios header {

   background-color: transparent;

   box-shadow: none;

 }

 .ios header .trans {

   width: 100%;

   height: 74px;

   position: absolute;

   left: 0;

   top: 0;

   z-index: 0;

   overflow: hidden;

 }

 .ios header .trans:before {

   content: "";

   position: absolute;

   width: 130%;

   height: 130%;

   background-color: rgba(255, 255, 255, 0.9);

   -webkit-filter: blur(5px);

   filter: blur(5px);

   z-index: 0;

   left: -10%;

   top: -10%;

 }

 .ios #main section#portfolio .column.ready.work .info {

   bottom: 0 !important;

 }

 .ios #main section#portfolio .column.ready.work .info .copy,

 .ios #main section#portfolio .column.ready.work .info .tags {

   bottom: 15px;

 }

 .ios #main section#portfolio .column.ready.work h1 {

   top: -150px;

 }

 .loader {

   position: relative;

   width: 75px;

   height: 75px;

 }

 .loader .wBall {

   position: absolute;

   width: 71px;

   height: 71px;

   opacity: 0;

   -moz-transform: rotate(225deg);

   -moz-animation: orbit 7.15s infinite;

   -webkit-transform: rotate(225deg);

   -webkit-animation: orbit 7.15s infinite;

   -ms-transform: rotate(225deg);

   -ms-animation: orbit 7.15s infinite;

   -o-transform: rotate(225deg);

   -o-animation: orbit 7.15s infinite;

   transform: rotate(225deg);

   animation: orbit 7.15s infinite;

 }

 .loader .wBall .wInnerBall {

   position: absolute;

   width: 9px;

   height: 9px;

   background: #c7c7c7;

   left: 0px;

   top: 0px;

   -moz-border-radius: 9px;

   -webkit-border-radius: 9px;

   -ms-border-radius: 9px;

   -o-border-radius: 9px;

   border-radius: 9px;

 }

 .loader #wBall_1 {

   -moz-animation-delay: 1.56s;

   -webkit-animation-delay: 1.56s;

   -ms-animation-delay: 1.56s;

   -o-animation-delay: 1.56s;

   animation-delay: 1.56s;

 }

 .loader #wBall_2 {

   -moz-animation-delay: 0.31s;

   -webkit-animation-delay: 0.31s;

   -ms-animation-delay: 0.31s;

   -o-animation-delay: 0.31s;

   animation-delay: 0.31s;

 }

 .loader #wBall_3 {

   -moz-animation-delay: 0.62s;

   -webkit-animation-delay: 0.62s;

   -ms-animation-delay: 0.62s;

   -o-animation-delay: 0.62s;

   animation-delay: 0.62s;

 }

 .loader #wBall_4 {

   -moz-animation-delay: 0.94s;

   -webkit-animation-delay: 0.94s;

   -ms-animation-delay: 0.94s;

   -o-animation-delay: 0.94s;

   animation-delay: 0.94s;

 }

 .loader #wBall_5 {

   -moz-animation-delay: 1.25s;

   -webkit-animation-delay: 1.25s;

   -ms-animation-delay: 1.25s;

   -o-animation-delay: 1.25s;

   animation-delay: 1.25s;

 }

 .orange-blue header .logo {

   background-image: url(../assets/images/global/logo-orange-blue.png);

 }

 .dark-mint header .logo {

   background-image: url(../assets/images/global/logo-dark-mint.png);

 }

 .blue-green header .logo {

   background-image: url(../assets/images/global/logo-blue-green.png);

 }

 header {

   width: 100%;

   position: fixed;

   left: 0;

   top: 0;

   z-index: 5;

 

 }

 header.out {

   -webkit-animation: headerOut 500ms linear 1 forwards;

   animation: headerOut 500ms linear 1 forwards;

 }

 header .contain {

   width: 100%;

   min-width: 320px;

   max-width: 1600px;

   margin: 0 auto;

 }

 header .trans {

   display: block;

 }

 header .logo {

   display: block;

   background-image: url(../assets/images/global/logo-red-blue.png);

   background-position: center center;

   background-repeat: no-repeat;

   width: 258px;

   height: 39px;

   text-indent: -9999em;

   position: relative;

   margin: 16px 36px 15px 0;

   float: left;

 }

 header .dropdown {

   max-height: 0;

   position: absolute;

   top: 100%;

   left: 0;

   padding: 0 1000em;

   margin: 0 -1000em;

   overflow: hidden;

   background-color: #55727b;

 }

 header.active {

   animation: headerIn 500ms linear 1 forwards;

   -webkit-animation: headerIn 500ms linear 1 forwards;

 }

 header nav {

   float: right;

   padding: 24px 0 0;

   position: relative;

 }

 header nav .mainNav > li {

   float: left;

   position: relative;

   margin: 0 32px;

   padding-bottom: 25px;

   font-size: 14px;

   text-transform: uppercase;

 }

 header nav .mainNav > li > a {

   display: block;

   color: #898989;

   padding: 5px;

 }

 header nav .mainNav > li > a:hover {

   color: #F1644F;

 }

 header nav .mainNav > li.current > a {

   color: #F1644F;

 }

 header nav .mainNav > li.current::after {

   position: absolute;

   top: 100%;

   left: 50%;

   z-index: 1;

   content: " ";

   width: 0;

   height: 0;

   pointer-events: none;

   border: solid transparent;

   border-width: 6px;

   border-bottom-color: #ddd;

   margin: -12px 0 0 -6px;

 }

 header nav .mainNav > li .subMenu {

   max-height: 0;

   position: absolute;

   top: 100%;

   left: 0;

   padding: 0 1000em;

   margin: 0 -1000em;

   overflow: hidden;

   background-color: #55727b;

   left: -445px;

   width: 525px;

 }

 header nav .mainNav > li .subMenu ul {

   float: right;

   padding: 10px 15px;

 }

 header nav .mainNav > li .subMenu ul li {

   margin: 3px 0;

   font-size: 9px;

   white-space: nowrap;

   text-transform: uppercase;

 }

 header nav .mainNav > li .subMenu ul li a {

   color: #fff;

 }

 header nav .mainNav > li .subMenu .locationLinks .info {

   display: none;

 }

 header nav .mainNav > li .subMenu .contactInfo {

   float: right;

   padding: 13px 15px;

   color: #fff;

   font-size: 9px;

   white-space: nowrap;

   text-transform: uppercase;

   text-align: right;

 }

 header nav .mainNav > li .subMenu .contactInfo a {

   color: #fff;

 }

 header nav .mainNav > li:hover .subMenu {

   animation: dropDown 300ms linear 1 forwards;

   -webkit-animation: dropDown 300ms linear 1 forwards;

 }

 header nav.respond {

   float: none;

   display: none;

   padding: 0;

   background-color: #fff;

   position: absolute;

   top: 74px;

   left: 0;

   width: 100%;

   box-shadow: 0px 3px 2px 1px rgba(0, 0, 0, 0.25);

   box-sizing: border-box;

   -moz-box-sizing: border-box;

   -webkit-box-sizing: border-box;

 }

 header nav.respond > ul > li {

   position: relative;

   padding: 10px 0;

   font-size: 14px;

   text-transform: uppercase;

 }

 header nav.respond > ul > li > a {

   display: block;

   color: #898989;

   padding: 5px;

 }

 header nav.respond > ul > li > a:hover {

   color: #F1644F;

 }

 header nav.respond > ul > li.current {

   background-color: #ada8af;

 }

 header nav.respond > ul > li.current > a {

   color: #fff;

 }

 header nav.respond > ul > li.current a {

   color: #fff;

 }

 header nav.respond > ul > li > ul {

   display: block;

   margin-left: 15px;

 }

 header nav.respond > ul > li > ul > li {

   padding: 10px 0;

 }

 header nav.respond > ul > li > ul > li > a {

   color: #898989;

 }

 header nav.respond > ul > li > ul > li.active > ul {

   display: block;

 }

 header nav.respond > ul > li > ul > li > ul {

   display: none;

   margin-left: 15px;

 }

 header nav.respond > ul > li > ul > li > ul > li {

   padding: 10px 0;

 }

 header nav.respond > ul > li > ul > li > ul > li > a {

   display: block;

   color: #898989;

 }

 header nav.respond > ul > li .subMenu {

   display: none;

   max-height: 0;

   position: absolute;

   top: 100%;

   left: 0;

   padding: 0 1000em;

   margin: 0 -1000em;

   overflow: hidden;

   background-color: #55727b;

   left: -420px;

   width: 500px;

 }

 header nav.respond > ul > li .subMenu ul {

   float: right;

   padding: 10px 15px;

 }

 header nav.respond > ul > li .subMenu ul li {

   margin: 3px 0;

   font-size: 9px;

   white-space: nowrap;

   text-transform: uppercase;

 }

 header nav.respond > ul > li .subMenu ul li a {

   color: #fff;

 }

 header nav.respond > ul > li .subMenu .locationLinks .info {

   display: none;

 }

 header nav.respond > ul > li .subMenu .contactInfo {

   float: right;

   padding: 13px 15px;

   color: #fff;

   font-size: 9px;

   white-space: nowrap;

   text-transform: uppercase;

   text-align: right;

 }

 header nav.respond > ul > li .subMenu .contactInfo a {

   color: #fff;

 }

 header nav.respond > ul > li:hover .subMenu {

   animation: dropDown 300ms linear 0s forwards;

   -webkit-animation: dropDown 300ms linear 0s forwards;

 }

 header nav .drawer {

   display: none;

   float: right;

   background-color: #fff;

   width: 30px;

   height: 22px;

   -webkit-border-radius: 5px;

   -moz-border-radius: 5px;

   border-radius: 5px;

   position: relative;

   top: 2px;

   margin: 0 30px 8px 0;

 }

 header nav .drawer span {

   position: absolute;

   left: 0;

 }

 header nav .drawer .line1 {

   top: 0px;

   background-color: #7aaebc;

   width: 30px;

   height: 5px;

   -webkit-border-radius: 5px;

   -moz-border-radius: 5px;

   border-radius: 5px;

 }

 header nav .drawer .line2 {

   top: 8px;

   background-color: #7aaebc;

   width: 30px;

   height: 5px;

   -webkit-border-radius: 5px;

   -moz-border-radius: 5px;

   border-radius: 5px;

 }

 header nav .drawer .line3 {

   top: 16px;

   background-color: #7aaebc;

   width: 30px;

   height: 5px;

   -webkit-border-radius: 5px;

   -moz-border-radius: 5px;

   border-radius: 5px;

 }

 header nav .sortMenu {

   margin-left: -21px;

   position: absolute;

   top: 49px;

 }

 header nav .sortMenu li {

   float: left;

   position: relative;

   margin: 0;

   font-size: 9px;

   text-transform: uppercase;

 }

 header nav .sortMenu li a {

   display: block;

   color: #898989;

   padding: 3px 8px 7px;

 }

 header nav .sortMenu li .children {

   max-height: 0;

   position: absolute;

   top: 100%;

   left: 0;

   padding: 0 1000em;

   margin: 0 -1000em;

   overflow: hidden;

   background-color: #55727b;

 }

 header nav .sortMenu li .children li {

   float: none;

   white-space: nowrap;

 }

 header nav .sortMenu li .children li a {

   padding: 3px 8px;

   color: #fff;

 }

 header nav .sortMenu li .children li:nth-child(1) a {

   padding-top: 5px;

 }

 header nav .sortMenu li .children li:nth-last-child(1) a {

   padding-bottom: 10px;

 }

 header nav .sortMenu li:hover .children {

   animation: dropDown 300ms linear 1 forwards;

   -webkit-animation: dropDown 300ms linear 1 forwards;

 }

 

   #main {

    /* width: 100%; */

    /* text-align: left; */

    /* padding-top: 0; */

  margin-top: -38%;

 

 }

 #main section#portfolio .column {

   width: 50%;

   height: 900px;

   position: relative;

   color: #fff;

   overflow: hidden;

   float: left;

 }

 #main section#portfolio .column a {

   color: #fff;

 }

 #main section#portfolio .column a:hover {

   text-decoration: underline;

 }

 #main section#portfolio .column .imageCont {

   width: 100%;

   height: 100%;

 }

 #main section#portfolio .column .imageCont.left {

   background-position: left center;

 }

 #main section#portfolio .column .imageCont.right {

   background-position: right center;

 }

 #main section#portfolio .column .imageCont.center {

   background-position: center center;

 }

 #main section#portfolio .column .imageCont .origami {

   position: absolute;

   top: 0;

   left: 0;

   z-index: 2;

   width: 100%;

   height: 100%;

   overflow: hidden;

   opacity: 0;

   transition: opacity 500ms;

   -webkit-transition: opacity 500ms;

   transform: rotate(0deg);

   -webkit-transform: rotate(0deg);

   -ms-transform: rotate(0deg);

 }

 #main section#portfolio .column .imageCont .origami .arrow {

   position: absolute;

   top: 0;

   left: 0;

   width: 0;

   height: 0;

   border-top: 95px solid transparent;

   border-bottom: 95px solid transparent;

   opacity: 0;

   animation-duration: 150ms;

   -webkit-animation-duration: 150ms;

 }

 #main section#portfolio .column .imageCont .origami .arrow.slow {

   animation-duration: 300ms;

   -webkit-animation-duration: 300ms;

 }

 #main section#portfolio .column .imageCont .origami .arrow.right,

 #main section#portfolio .column .imageCont .origami .arrow.left {

   border-left: 165px solid;

   border-left-color: #f27360;

 }

 #main section#portfolio .column .imageCont .origami .arrow.down,

 #main section#portfolio .column .imageCont .origami .arrow.up {

   border-right: 165px solid;

   border-right-color: #f27360;

 }

 #main section#portfolio .column .imageCont .origami .arrow.active.right {

   animation-name: unfoldRight;

   -webkit-animation-name: unfoldRight;

 }

 #main section#portfolio .column .imageCont .origami .arrow.active.left {

   animation-name: unfoldLeft;

   -webkit-animation-name: unfoldLeft;

 }

 #main section#portfolio .column .imageCont .origami .arrow.active.down {

   animation-name: unfoldDown;

   -webkit-animation-name: unfoldDown;

 }

 #main section#portfolio .column .imageCont .origami .arrow.complete {

   opacity: 1;

 }

 #main section#portfolio .column .imageCont .origami .arrow.complete.right,

 #main section#portfolio .column .imageCont .origami .arrow.complete.left {

   border-left: 165px solid;

   border-left-color: #f27360;

 }

 #main section#portfolio .column .imageCont .origami .arrow.complete.down {

   border-right: 165px solid;

   border-right-color: #f27360;

 }

 #main section#portfolio .column .imageCont .origami.complete {

   width: 150%;

   height: 150%;

   top: -250px;

   left: -200px;

   opacity: 1;

   transform: rotate(-10deg);

   -webkit-transform: rotate(-10deg);

   -ms-transform: rotate(-10deg);

 }

 #main section#portfolio .column .imageCont .origami.exit {

   transition: top 400ms;

   -webkit-transition: top 400ms;

   top: -1100px;

 }

 #main section#portfolio .column .loader {

   position: absolute;

   top: 50%;

   left: 50%;

   margin: -37px 0 0 -37px;

   z-index: 0;

 }

 #main section#portfolio .column .videoCont {

   width: 100%;

   height: 100%;

   position: absolute;

   top: 0;

   left: 0;

 }

 #main section#portfolio .column .videoCont .background {

   width: 100%;

   height: 100%;

   position: absolute;

   top: 0;

   left: 0;

   background-color: #000;

   opacity: 0;

   transition: opacity 500ms;

   -webkit-transition: opacity 500ms;

 }

 #main section#portfolio .column .videoCont .callout {

   display: block;

   position: absolute;

   top: 50%;

   left: 50%;

   margin: -42px 0 0 -41px;

   opacity: 0;

   transition: opacity 500ms;

   -webkit-transition: opacity 500ms;

 }

 #main section#portfolio .column .videoCont.play .background {

   opacity: 1;

 }

 #main section#portfolio .column > h1,

 #main section#portfolio .column .imageCont h1 {

   position: absolute;

   top: -100%;

   left: 0;

   z-index: 2;

   box-sizing: border-box;

   -moz-box-sizing: border-box;

   -webkit-box-sizing: border-box;

   width: 100%;

   padding: 35px;

   font-family: 'GothamExtraLightItalic', Arial, Helvetica, sans-serif;

   font-weight: normal;

   font-size: 44px;

   line-height: 48px;

   transition: top 250ms, bottom 250ms;

   -webkit-transition: top 250ms, bottom 250ms;

 }

 #main section#portfolio .column > h1.initial,

 #main section#portfolio .column .imageCont h1.initial {

   top: 0;

 }

 #main section#portfolio .column > h1.initial.bottom,

 #main section#portfolio .column .imageCont h1.initial.bottom {

   top: auto;

   bottom: 0;

 }

 #main section#portfolio .column > h1.right,

 #main section#portfolio .column .imageCont h1.right {

   text-align: right;

 }

 #main section#portfolio .column > h1.bottom,

 #main section#portfolio .column .imageCont h1.bottom {

   top: auto;

   bottom: -150px;

 }

 #main section#portfolio .column > h1 span,

 #main section#portfolio .column .imageCont h1 span {

   position: absolute;

   top: auto;

   left: 0;

   bottom: -37px;

   width: 100%;

   padding: 35px;

   font-size: 14px;

   -webkit-font-smoothing: subpixel-antialiased;

   box-sizing: border-box;

   -moz-box-sizing: border-box;

   -webkit-box-sizing: border-box;

 }

 #main section#portfolio .column .info {

   width: 100%;

   height: 170px;

   position: absolute;

   bottom: -170px;

   left: 0;

   z-index: 2;

   transition: bottom 250ms;

   -webkit-transition: bottom 250ms;

 }

 #main section#portfolio .column .info .background {

   position: absolute;

   top: 50px;

   left: 0;

   z-index: 0;

   width: 120%;

   height: 120%;

   background-color: #f1644f;

   transform: rotate(-4deg);

   -webkit-transform: rotate(-4deg);

   -ms-transform: rotateZ(-4deg);

 }

 #main section#portfolio .column .info .copy {

   width: 700px;

   position: absolute;

   bottom: -170px;

   right: 25px;

   text-align: right;

   transition: bottom 250ms;

   -webkit-transition: bottom 250ms;

   transition-delay: 100ms;

   -webkit-transition-delay: 100ms;

 }

 #main section#portfolio .column .info .copy h2 {

   padding-right: 20px;

   font-family: 'GothamExtraLightItalic', Arial, Helvetica, sans-serif;

   font-weight: normal;

   font-size: 44px;

   line-height: 48px;

   background: transparent url('../assets/images/work/link_arrow_large.png') no-repeat right center;

 }

 #main section#portfolio .column .info .copy p {

   font-family: 'GothamBook', Arial, Helvetica, sans-serif;

   font-weight: normal;

   font-size: 14px;

   line-height: 18px;

 }

 #main section#portfolio .column .info .tags {

   position: absolute;

   display: none;

   bottom: -170px;

   left: 25px;

   transition: bottom 250ms;

   -webkit-transition: bottom 250ms;

   transition-delay: 100ms;

   -webkit-transition-delay: 100ms;

   z-index: 1;

 }

 #main section#portfolio .column .info .tags li {

   float: left;

   margin-right: 15px;

   font-family: 'GothamBook', Arial, Helvetica, sans-serif;

   font-weight: normal;

   font-size: 11px;

 }

 #main section#portfolio .column.colorGray.ready .corner {

   display: none;

 }

 #main section#portfolio .column .corner {

   position: absolute;

   right: 0;

   bottom: 0;

   width: 0;

   height: 0;

   border-bottom: 35px solid #f1644f;

   border-left: 35px solid transparent;

   display: none;

 }

 #main section#portfolio .column.exit h1.initial {

   top: -400px;

 }

 #main section#portfolio .column.exit h1.initial.bottom {

   top: auto;

   bottom: -150px;

 }

 #main section#portfolio .column.ready .corner {

   display: block;

 }

 #main section#portfolio .column.ready .videoCont .callout {

   opacity: 1;

 }

 #main section#portfolio .column.ready .videoCont.play .callout {

   opacity: 0;

 }

 #main section#portfolio .column.ready h1 {

   top: 0;

 }

 #main section#portfolio .column.ready h1.bottom {

   top: auto;

   bottom: 0;

 }

 #main section#portfolio .column.ready h1.initial {

   top: -400px;

 }

 #main section#portfolio .column.ready.work:hover h1 {

   top: -150px;

 }

 #main section#portfolio .column.ready.work:hover h1.bottom {

   top: auto;

   bottom: -150px;

 }

 #main section#portfolio .column.ready.work:hover h1.initial {

   top: -400px;

 }

 #main section#portfolio .column.ready.work:hover .info {

   bottom: 0;

 }

 #main section#portfolio .column.ready.work:hover .info .copy,

 #main section#portfolio .column.ready.work:hover .info .tags {

   bottom: 15px;

 }

 #main section#portfolio .column.wide {

   width: 100%;

 }

 #main section#portfolio .column.wide .info .copy {

   width: 550px;

 }

 #main section#portfolio .column.wide .info .copy h2 {

   font-size: 51px;

   line-height: 54px;

 }

 #main section#portfolio .column.short {

   height: 450px;

 }

 #main section#portfolio .column.news h1 {

   max-width: 900px;

   font-size: 34px;

   line-height: 34px;

   -moz-opacity: 0;

   -khtml-opacity: 0;

   -webkit-opacity: 0;

   opacity: 0;

   -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);

   filter: alpha(opacity=0);

   -moz-transition-duration: 550ms;

   -webkit-transition-duration: 550ms;

   -o-transition-duration: 550ms;

   transition-duration: 550ms;

   top: -50px;

   left: 0;

   position: relative;

   padding: 5px 35px;

 }

 #main section#portfolio .column.news article {

   position: relative;

   top: -100%;

   left: 0;

   z-index: 2;

   max-width: 550px;

   padding: 35px;

   transition: top 250ms linear 250ms;

   -webkit-transition: top 250ms linear 250ms;

 }

 #main section#portfolio .column.news article img {

   padding-top: 20px;

 }

 #main section#portfolio .column.news .imageCont {

   position: absolute;

   top: 0;

   left: 0;

 }

 #main section#portfolio .column.news .excerpt {

   padding: 0 35px;

   color: #fff;

   position: relative;

   font-size: 12.5px;

   top: -50px;

   -moz-opacity: 0;

   -khtml-opacity: 0;

   -webkit-opacity: 0;

   opacity: 0;

   -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);

   filter: alpha(opacity=0);

   -moz-transition-duration: 350ms;

   -webkit-transition-duration: 350ms;

   -o-transition-duration: 350ms;

   transition-duration: 350ms;

 }

 #main section#portfolio .column.career {

   display: inline-block;

   position: static;

   vertical-align: top;

   float: none;

   margin-right: -4px;

   cursor: pointer;

 }

 #main section#portfolio .column.career .imageCont {

   position: relative;

   width: 100%;

   height: 100%;

 }

 #main section#portfolio .column.career .imageCont h1 span {

   font-size: 16px;

 }

 #main section#portfolio .column.career .imageCont h3 {

   margin: 70px 40px 40px 40px;

   font-family: 'GothamExtraLightItalic', Arial, Helvetica, sans-serif;

   font-weight: normal;

   font-size: 25px;

   line-height: 24px;

   position: absolute;

   right: 0;

   bottom: 0;

 }

 #main section#portfolio .column.career.colorGray .imageCont.solid {

   background-color: #ada8af;

 }

 #main section#portfolio .column.career.open .details {

   height: auto;

 }

 #main section#portfolio .column.career .details {

   box-sizing: border-box;

   -moz-box-sizing: border-box;

   -webkit-box-sizing: border-box;

   position: absolute;

   left: 0;

   width: 100%;

   height: 0;

   overflow: hidden;

   background-color: #434849;

   cursor: default;

 }

 #main section#portfolio .column.career .details h1 {

   margin: 70px 0 0 40px;

   font-family: 'GothamExtraLightItalic', Arial, Helvetica, sans-serif;

   font-weight: normal;

   font-size: 41px;

   line-height: 42px;

 }

 #main section#portfolio .column.career .details h4 {

   margin: 10px 0 0 40px;

   font-size: 16px;

 }

 #main section#portfolio .column.career .details article {

   box-sizing: border-box;

   -moz-box-sizing: border-box;

   -webkit-box-sizing: border-box;

   width: 100%;

   padding: 30px 40px 20px;

   font-family: 'GothamBook', Arial, Helvetica, sans-serif;

   font-weight: normal;

   font-size: 13px;

   line-height: 1.6;

   column-count: 2;

   -moz-column-count: 2;

   -webkit-column-count: 2;

   column-gap: 40px;

   -moz-column-gap: 40px;

   -webkit-column-gap: 40px;

 }

 #main section#portfolio .column.career .details article p {

   width: 90%;

   padding: 15px 20px;

 }

 #main section#portfolio .column.career .details article a {

   font-family: 'GothamBookItalic', Arial, Helvetica, sans-serif;

   font-weight: normal;

 }

 #main section#portfolio .column.career .details .closeBtn {

   position: absolute;

   width: 40px;

   height: 40px;

   top: 20px;

   right: 20px;

   cursor: pointer;

 }

 #main section#portfolio .column.career .details .closeBtn::before,

 #main section#portfolio .column.career .details .closeBtn::after {

   content: '';

   position: absolute;

   width: 100%;

   top: 50%;

   height: 1px;

   transform: rotate(45deg);

   -webkit-transform: rotate(45deg);

   -ms-transform: rotate(45deg);

 }

 #main section#portfolio .column.career .details .closeBtn::after {

   transform: rotate(-45deg);

   -webkit-transform: rotate(-45deg);

   -ms-transform: rotate(-45deg);

 }

 #main section#portfolio .column.career.animate {

   transition: padding-bottom 500ms;

   -webkit-transition: padding-bottom 500ms;

 }

 #main section#portfolio .column.career.animate .details {

   transition: height 500ms;

   -webkit-transition: height 500ms;

 }

 #main section#portfolio .column.career.open .imageCont::after {

   position: absolute;

   top: 100%;

   left: 50%;

   z-index: 1;

   content: " ";

   width: 0;

   height: 0;

   pointer-events: none;

   border: solid transparent;

   border-width: 6px;

   border-top-color: #ddd;

   margin-left: -6px;

 }

 #main section#people .person {

   box-sizing: border-box;

   -moz-box-sizing: border-box;

   -webkit-box-sizing: border-box;

   width: 25%;

   display: inline-block;

   vertical-align: top;

   margin-right: -4px;

   padding:0 10px;

   color: #fff;

   opacity: 0;

   transition: opacity 250ms;

   -webkit-transition: opacity 250ms; margin-bottom: 20px;

 }

 #main section#people .person h1 {

margin-top: 0;

   line-height: 35px;

 }

 #main section#people .person h4 {

   margin: 15px 0 20px;

   font-weight: normal;

   font-size: 14px;

   line-height: 17px;

 }

 #main section#people .person .imageCont {

   position: relative;

   cursor: pointer;

 }

 #main section#people .person .imageCont img {

   display: block;

   position: relative;

   width: 100%;

   z-index: 0;

 }

 #main section#people .person .imageCont .background {

   position: absolute;

   top: 0;

   left: 0;

   width: 100%;

   height: 100%;

   z-index: 1;

   opacity: 0;

   transition: opacity 300ms;

   -webkit-transition: opacity 300ms;

 }

 #main section#people .person .imageCont .basics {

   position: absolute;

   top: 0;

   left: 0;

   z-index: 2;

   padding: 25px;

   opacity: 0;

   transition: opacity 250ms;

   -webkit-transition: opacity 250ms;

 }

 #main section#people .person .imageCont .basics a {

   color: #fff;

 }

 #main section#people .person .imageCont .basics a:hover {

   text-decoration: underline;

 }

 #main section#people .person.loaded {

   opacity: 1;

 }

 #main section#people .person.loaded .imageCont:hover .background {

   opacity: 0.8;

 }

 #main section#people .person.loaded .imageCont:hover .basics {

   opacity: 1;

 }

 #main section#people .person .details {

   box-sizing: border-box;

   -moz-box-sizing: border-box;

   -webkit-box-sizing: border-box;

   position: absolute;

   top: auto;

   left: 10.9px;

   right: 0;

   width: 98%;

   height: 0;

   overflow: hidden;

   background-image: none !important;

   background-color: #31327a !important;

 }

 #main section#people .person .details h1 {

   margin: 50px 0 0 40px;

   font-family: 'GothamExtraLightItalic', Arial, Helvetica, sans-serif;

   font-weight: normal;

   font-size: 61px;

   line-height: 62px;

 }

 #main section#people .person .details h4 {

   margin: 10px 0 0 40px;

 }

 #main section#people .person .details article {

   box-sizing: border-box;

   -moz-box-sizing: border-box;

   -webkit-box-sizing: border-box;

   width: 100%;

   padding: 10px 20px 20px;

   font-weight: normal;

   font-size: 14px;

   line-height: 18px;



 }

 #main section#people .person .details article p {

   width: 100%;

   padding: 15px 8px; color: #fff;

 }

 #main section#people .person .details article p a{ color: #adaee5;}

 

 #main section#people .person .details .closeBtn {

   position: absolute;

   width:20px;

   height: 20px;

   top: 20px;

   right: 20px;

   cursor: pointer;

 }

 #main section#people .person .details .closeBtn::before,

 #main section#people .person .details .closeBtn::after {

   content: '';

   position: absolute;

   width: 100%;

   top: 50%;

   height: 1px;

   transform: rotate(45deg);

   -webkit-transform: rotate(45deg);

   -ms-transform: rotate(45deg);

 }

 #main section#people .person .details .closeBtn::after {

   transform: rotate(-45deg);

   -webkit-transform: rotate(-45deg);

   -ms-transform: rotate(-45deg);

 }

 #main section#people .person.animate {

   transition: padding-bottom 500ms;

   -webkit-transition: padding-bottom 500ms;

 }

 #main section#people .person.animate .details {

   transition: height 500ms;

   -webkit-transition: height 500ms;

 }

 #main section#people .person.open .imageCont::after {

   position: absolute;

   bottom:-12px;

   left: 50%;

   z-index: 1;

   content: " ";

   width: 0;

   height: 0;

   pointer-events: none;

   border: solid transparent;

   border-width: 6px;

   border-top-color: #31327a;

   margin-left: -6px;

 }

 #main section#people .person.open .details {

   height: auto;

 }

 #main section#about {

   overflow-x: hidden;

 }

 #main section#about .web {

   width: 75%;

   height: 2033px;

   z-index: 1;

   background: url(../assets/images/about/web.png) no-repeat;

   position: absolute;

   top: 1020px;

   left: 115px;

 }

 #main section#about .circle {

   position: absolute;

   width: 365px;

   height: 365px;

   -webkit-border-radius: 50%;

   -moz-border-radius: 50%;

   border-radius: 50%;

   -moz-opacity: 0;

   -khtml-opacity: 0;

   -webkit-opacity: 0;

   opacity: 0;

   -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);

   filter: alpha(opacity=0);

   background-color: #faa839;

   background-color: rgba(250, 168, 57, 0.2);

 }

 #main section#about .circle.animated {

   -webkit-animation: grow 390ms cubic-bezier(0.17, 0.67, 0.83, 0.67) 1;

   animation: grow 390ms cubic-bezier(0.17, 0.67, 0.83, 0.67) 1;

   -webkit-animation-fill-mode: forwards;

   animation-fill-mode: forwards;

 }

 #main section#about .circle .inner {

   position: relative;

   width: 84%;

   height: 84%;

   margin-left: 8%;

   margin-top: 8%;

   -webkit-border-radius: 50%;

   -moz-border-radius: 50%;

   border-radius: 50%;

   background-color: #faa839;

 }

 #main section#about .circle .inner p {

   font-family: 'Tungsten A', 'Tungsten B';

   font-weight: 500;

   font-style: normal;

   color: #fff;

   letter-spacing: 4px;

   font-size: 75px;

   text-align: center;

   height: 307px;

   line-height: 280px;

   position: relative;

 }

 #main section#about .circle .inner p:after {

   content: "";

   position: absolute;

   width: 96px;

   height: 6px;

   background-color: #fff;

   bottom: 120px;

   left: 50%;

   margin-left: -48px;

 }

 #main section#about .circle .small {

   background-color: #faa839;

   position: absolute;

   left: 43px;

   bottom: 39px;

   width: 25%;

   height: 25%;

   -webkit-border-radius: 50%;

   -moz-border-radius: 50%;

   border-radius: 50%;

 }

 #main section#about .top-yellow,

 #main section#about .top-blue,

 #main section#about .bottom-blue,

 #main section#about .wave-bottom {

   overflow-x: hidden;

 }

 #main section#about .top-yellow {

   width: 100%;

   height: 637px;

   padding-top: 223px;

   background: transparent url(../assets/images/about/overpass.jpg) no-repeat;

 }

 #main section#about .top-yellow .icon {

   width: 186px;

   height: 184px;

   margin: 0 auto;

   display: block;

   background-image: url(../assets/images/about/top-yellow-icon.png);

   background-repeat: no-repeat;

   -webkit-background-size: contain;

   background-size: contain;

   margin-bottom: 53px;

 }

 #main section#about .top-yellow h1,

 #main section#about .top-yellow h2 {

   color: #fff;

   text-align: center;

   text-transform: uppercase;

 }

 #main section#about .top-yellow h1 {

   font-size: 95px;

   margin-bottom: 54px;

   font-family: 'GothamExtraLightItalic', Arial, Helvetica, sans-serif;

   font-weight: normal;

 }

 #main section#about .top-yellow h2 {

   width: 50%;

   margin: 0 auto;

   font-size: 21px;

   line-height: 1.6;

   letter-spacing: 5px;

   display: block;

   font-family: 'GothamBookItalic', Arial, Helvetica, sans-serif;

   font-weight: normal;

 }

 #main section#about .top-blue {

   width: 100%;

   height: 765px;

   overflow: auto;

   background: url(../assets/images/about/top-blue.jpg) no-repeat;

 }

 #main section#about .top-blue blockquote {

   font-family: 'Tungsten A', 'Tungsten B';

   font-weight: 500;

   font-style: normal;

   font-size: 185px;

   color: #ffffff;

   text-transform: uppercase;

   line-height: .83;

   position: relative;

   width: 70%;

   margin: 100px 0 10px 9%;

   padding: 0;

   text-indent: -35px;

 }

 #main section#about .top-blue blockquote .quotes {

   position: absolute;

 }

 #main section#about .top-blue blockquote:before {

   content: open-quote;

 }

 #main section#about .top-blue blockquote:after {

   content: close-quote;

 }

 #main section#about .top-blue cite {

   font-family: 'GothamBook', Arial, Helvetica, sans-serif;

   font-weight: normal;

   color: #fff;

   font-size: 30px;

   width: 50%;

   display: block;

   margin-left: 9%;

 }

 #main section#about .bottom-blue {

   position: relative;

   overflow: visible;

   width: 100%;

   height: 932px;

   padding-top: 180px;

   padding-left: 9%;

   background: url(../assets/images/about/bottom-blue.jpg) no-repeat;

   box-sizing: border-box;

   -moz-box-sizing: border-box;

   -webkit-box-sizing: border-box;

 }

 #main section#about .bottom-blue .copy {

   overflow: hidden;

   width: 89%;

 }

 #main section#about .bottom-blue .circle {

   right: 107px;

   top: -182px;

   z-index: 2;

   -moz-transition-duration: 450ms;

   -webkit-transition-duration: 450ms;

   -o-transition-duration: 450ms;

   transition-duration: 450ms;

 }

 #main section#about .bottom-blue p {

   position: relative;

   z-index: 3;

   font-size: 16px;

   color: #fff;

   text-transform: uppercase;

   margin-bottom: 30px;

   line-height: 1.25;

   font-weight: 500;

 }

 #main section#about .wave-bottom {

   position: relative;

   overflow: visible;

   width: 100%;

   height: 726px;

   padding-top: 281px;

   background: url(../assets/images/about/wave-bottom.jpg) no-repeat;

 }

 #main section#about .wave-bottom .circle {

   left: 50%;

   margin-left: -237px;

   top: -245px;

   z-index: 2;

   -moz-transition-duration: 450ms;

   -webkit-transition-duration: 450ms;

   -o-transition-duration: 450ms;

   transition-duration: 450ms;

   width: 474px;

   height: 474px;

   background-color: #fff;

   background-color: rgba(255, 255, 255, 0.2);

 }

 #main section#about .wave-bottom .circle .inner,

 #main section#about .wave-bottom .circle .small {

   background-color: #eb644b;

 }

 #main section#about .wave-bottom .circle .inner {

   width: 90%;

   height: 90%;

   margin-left: 5%;

   margin-top: 5%;

 }

 #main section#about .wave-bottom .circle .inner p {

   height: 430px;

   line-height: 440px;

   font-size: 53px;

   text-transform: uppercase;

 }

 #main section#about .wave-bottom .circle .inner p:after {

   height: 5px;

   top: 62%;

 }

 #main section#about .wave-bottom .circle .small {

   width: 10%;

   height: 10%;

   bottom: auto;

   left: auto;

   top: 9.5%;

   right: 19%;

 }

 #main section#about .wave-bottom p {

   font-family: 'GothamExtraLightItalic', Arial, Helvetica, sans-serif;

   font-weight: normal;

   font-size: 72px;

   letter-spacing: -1px;

   color: #fff;

   line-height: 1.3;

   width: 88%;

   margin: 0 auto;

   padding: 0;

   float: none;

 }

 #main section#about .wave-bottom p a {

   color: #77b13a;

   text-decoration: none;

 }

 #main section#contact .international {

   width: 100%;

   background: url(../assets/images/contact/international.jpg);

   background-size: cover;

 }

 #main section#contact .international p {

   color: #fff;

   font-size: 12px;

   margin-bottom: 10px;

   line-height: 1.5;

   -webkit-font-smoothing: antialiased;

 }

 #main section#contact .international p a {

   color: #53c0ee;

   text-decoration: none;

 }

 #main section#contact .international .copy {

   padding-top: 40px;

   padding-bottom: 15px;

   width: 33%;

   margin-left: 5%;

   float: left;

 }

 #main section#contact .international .right {

   padding-top: 165px;

   margin-left: 40%;

 }

 #main section#contact .international .right h3 {

   color: #fff;

   font-size: 68px;

   text-transform: uppercase;

   line-height: .9;

   font-family: 'Tungsten A', 'Tungsten B';

   font-weight: 500;

   font-style: normal;

   -webkit-font-smoothing: antialiased;

   margin-bottom: 32px;

 }

 #main section#contact .international .right h3 strong {

   color: #53c0ee;

 }

 #main section#contact .international .right .rr {

   width: 191px;

   height: 46px;

   background: url(../assets/images/contact/rr.png) center center no-repeat;

   display: -moz-inline-stack;

   display: inline-block;

   zoom: 1;

   *display: inline;

   margin-right: 50px;

 }

 #main section#contact .international .right .wwp {

   background: url(../assets/images/contact/wwp.png) center center no-repeat;

   width: 158px;

   height: 46px;

   display: -moz-inline-stack;

   display: inline-block;

   zoom: 1;

   *display: inline;

   margin-right: 50px;

 }

 #main section#contact .international .right .vto {

   background: url(../assets/images/contact/vto.png) no-repeat;

   width: 103px;

   height: 46px;

   display: -moz-inline-stack;

   display: inline-block;

   zoom: 1;

   *display: inline;

 }

 #main section#contact .international h2 {

   font-size: 50px;

   line-height: .9;

   text-transform: uppercase;

   color: #fff;

   -webkit-font-smoothing: antialiased;

   font-family: GothamExtraLightItalic, Arial, Helvetica, sans-serif;

   font-weight: 400;

   margin-bottom: 20px;

 }

 #main section#contact .location {

   position: relative;

   width: 100%;

   height: 393px;

   background-color: #000;

   color: #fff;

 }

 #main section#contact .location .overlay {

   position: absolute;

   top: 0;

   left: 0;

   width: 100%;

   height: 100%;

   background-color: #000;

   -moz-opacity: 0.6;

   -khtml-opacity: 0.6;

   -webkit-opacity: 0.6;

   opacity: 0.6;

   -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);

   filter: alpha(opacity=60);

   z-index: 1;

   cursor: pointer;

 }

 #main section#contact .location.even .overlay {

   -moz-opacity: 0.7;

   -khtml-opacity: 0.7;

   -webkit-opacity: 0.7;

   opacity: 0.7;

   -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);

   filter: alpha(opacity=70);

 }

 #main section#contact .location .gmnoprint {

   -moz-opacity: 1;

   -khtml-opacity: 1;

   -webkit-opacity: 1;

   opacity: 1;

   -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);

   filter: alpha(opacity=100);

   z-index: 3;

 }

 #main section#contact .location .pin {

   width: 29px;

   height: 29px;

   background-color: #ea644b;

   -webkit-border-radius: 20px;

   -moz-border-radius: 20px;

   border-radius: 20px;

   position: relative;

   display: none;

 }

 #main section#contact .location .pin span {

   position: absolute;

   top: 0;

   left: 0;

   width: 29px;

   height: 28px;

   background: url(../assets/images/contact/map-pin.png) no-repeat;

 }

 #main section#contact .location .info {

   position: absolute;

   left: 80px;

   bottom: 75px;

   width: 325px;

   z-index: 2;

 }

 #main section#contact .location .info h1 {

   font-family: 'GothamExtraLightItalic', Arial, Helvetica, sans-serif;

   font-weight: normal;

   font-size: 50px;

   line-height: 55px;

 }

 #main section#contact .location .info p {

   line-height: 17px;

 }

 #main section#contact .location .info p a {

   color: #fff;

 }

 #main section#contact .location .info p .contact {

   font-size: 10px;

 }

 #main section#contact .location .info .details {

   box-sizing: border-box;

   -moz-box-sizing: border-box;

   -webkit-box-sizing: border-box;

   margin: 20px 0;

   padding: 17px 10px 17px 17px;

   width: 325px;

 }

 #main section#contact .location .info.right {

   left: auto;

   right: 80px;

   text-align: right;

 }

 #main section#contact .location .info.right .details {

   float: right;

 }

 #main section#work {

   position: relative;

   background-color: #ececec;

 }

 #main section#work article.row .column.thumbs ul li {

   box-sizing: border-box;

   -moz-box-sizing: border-box;

   -webkit-box-sizing: border-box;

   border: 5px #DDD solid;

 }

 #main section#work article.row .column.thumbs ul li.on {

   box-sizing: border-box;

   -moz-box-sizing: border-box;

   -webkit-box-sizing: border-box;

   border: 5px #666666 solid;

 }

 #main section#work h1 {

   padding: 30px 0 0 30px;

   font-family: 'GothamExtraLightItalic', Arial, Helvetica, sans-serif;

   font-weight: normal;

   font-size: 50px;

   line-height: 52px;

 }

 #main section#work .tags {

   position: absolute;

   top: 15px;

   right: 35px;

   z-index: 1;

 }

 #main section#work .tags li {

   float: left;

   margin: 0 10px;

 }

 #main section#work .tags li a {

   color: #a8a8a8;

 }

 #main section#work .row {

   width: 100%;

   overflow: hidden;

 }

 #main section#work .row .column {

   position: relative;

   width: 50%;

   float: left;

 }

 #main section#work .row .column img {

   display: block;

   position: absolute;

 }

 #main section#work .row .column .caption {

   display: block;

   position: absolute;

 }

 #main section#work .row .column article {

   width: 70%;

   text-align: left;

   line-height: 17px;

 }

 #main section#work .row .column article p {

   padding: 12px;

 }

 #main section#work .row .column .videoCont {

   display: inline-block;

   padding: 20px 0;

 }

 #main section#work .row .column.wide {

   width: 100%;

   float: none;

   text-align: center;

 }



 

 .red-blue #main section#people .person .background {

   background-color: #31327a;

 }

 .red-blue #main section#people .person .details h4 {

   color: #adaee5;

 }

 .red-blue #main section#people .person .details .closeBtn::before,

 .red-blue #main section#people .person .details .closeBtn::after {

   background-color: #fff;

 }



 .red-blue #main section#people .person.open .imageCont::after {

   border-top-color: #31327a;

 }

 .red-blue #main section#contact .location .info h1 .highlight {

   color: #31327a;

 }

 .red-blue #main section#contact .location .info .details {

   background-color: #31327a;

 }

 .red-blue #main section#work h1 {

   color: #31327a;

 }

 @keyframes unfoldRight {

   0% {

	 opacity: 0.7;

	 border-left: 0;

	 animation-timing-function: ease-in-out;

   }

   30% {

	 opacity: 0.7;

	 border-bottom: 66.5px solid transparent;

   }

   60% {

	 opacity: 0.7;

	 border-bottom: 95px solid transparent;

   }

   100% {

	 opacity: 1;

   }

 }

 @-webkit-keyframes unfoldRight {

   0% {

	 opacity: 0.7;

	 border-left: 0;

	 -webkit-animation-timing-function: ease-in-out;

   }

   30% {

	 opacity: 0.7;

	 border-bottom: 66.5px solid transparent;

   }

   60% {

	 opacity: 0.7;

	 border-bottom: 95px solid transparent;

   }

   100% {

	 opacity: 1;

   }

 }

 @keyframes unfoldDown {

   0% {

	 opacity: 0.7;

	 border-bottom: 0 solid transparent;

	 animation-timing-function: ease-in-out;

   }

   30% {

	 opacity: 0.7;

	 border-bottom: 66.5px solid transparent;

   }

   60% {

	 opacity: 0.7;

	 border-bottom: 95px solid transparent;

   }

   100% {

	 opacity: 1;

   }

 }

 @-webkit-keyframes unfoldDown {

   0% {

	 opacity: 0.7;

	 border-bottom: 0 solid transparent;

	 -webkit-animation-timing-function: ease-in-out;

   }

   30% {

	 opacity: 0.7;

	 border-bottom: 66.5px solid transparent;

   }

   60% {

	 opacity: 0.7;

	 border-bottom: 95px solid transparent;

   }

   100% {

	 opacity: 1;

   }

 }

 @keyframes unfoldLeft {

   0% {

	 opacity: 0.7;

	 border-bottom: 0 solid transparent;

	 animation-timing-function: ease-in-out;

   }

   30% {

	 opacity: 0.7;

	 border-bottom: 66.5px solid transparent;

   }

   60% {

	 opacity: 0.7;

	 border-bottom: 95px solid transparent;

   }

   100% {

	 opacity: 1;

   }

 }

 @-webkit-keyframes unfoldLeft {

   0% {

	 opacity: 0.7;

	 border-bottom: 0 solid transparent;

	 -webkit-animation-timing-function: ease-in-out;

   }

   30% {

	 opacity: 0.7;

	 border-bottom: 66.5px solid transparent;

   }

   60% {

	 opacity: 0.7;

	 border-bottom: 95px solid transparent;

   }

   100% {

	 opacity: 1;

   }

 }

 @keyframes headerIn {

   40% {

	 top: -100px;

   }

   100% {

	 top: 0;

   }

 }

 @-webkit-keyframes headerIn {

   40% {

	 top: -100px;

   }

   100% {

	 top: 0;

   }

 }

 @keyframes headerOut {

   0% {

	 top: 0;

   }

   40% {

	 top: -10px;

   }

   100% {

	 top: -100px;

   }

 }

 @-webkit-keyframes headerOut {

   0% {

	 top: 0;

   }

   40% {

	 top: -10px;

   }

   100% {

	 top: -100px;

   }

 }

 @keyframes dropDown {

   40% {

	 max-height: 100px;

   }

   100% {

	 max-height: 350px;

   }

 }

 @-webkit-keyframes dropDown {

   40% {

	 max-height: 100px;

   }

   100% {

	 max-height: 350px;

   }

 }

 @keyframes grow {

   0% {

	 transform: scale(0.2);

	 -ms-transform: scale(0.2);

	 -webkit-transform: scale(0.2);

	 -moz-opacity: 0;

	 -khtml-opacity: 0;

	 -webkit-opacity: 0;

	 opacity: 0;

	 -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);

	 filter: alpha(opacity=0);

   }

   50% {

	 -moz-opacity: 1;

	 -khtml-opacity: 1;

	 -webkit-opacity: 1;

	 opacity: 1;

	 -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);

	 filter: alpha(opacity=100);

   }

   100% {

	 transform: scale(1);

	 -ms-transform: scale(1);

	 -webkit-transform: scale(1);

	 -moz-opacity: 1;

	 -khtml-opacity: 1;

	 -webkit-opacity: 1;

	 opacity: 1;

	 -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);

	 filter: alpha(opacity=100);

   }

 }

 @-webkit-keyframes grow {

   0% {

	 transform: scale(0.2);

	 -ms-transform: scale(0.2);

	 -webkit-transform: scale(0.2);

	 -moz-opacity: 0;

	 -khtml-opacity: 0;

	 -webkit-opacity: 0;

	 opacity: 0;

	 -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);

	 filter: alpha(opacity=0);

   }

   50% {

	 -moz-opacity: 1;

	 -khtml-opacity: 1;

	 -webkit-opacity: 1;

	 opacity: 1;

	 -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);

	 filter: alpha(opacity=100);

   }

   100% {

	 transform: scale(1);

	 -ms-transform: scale(1);

	 -webkit-transform: scale(1);

	 -moz-opacity: 1;

	 -khtml-opacity: 1;

	 -webkit-opacity: 1;

	 opacity: 1;

	 -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);

	 filter: alpha(opacity=100);

   }

 }

 @-moz-keyframes orbit {

   0% {

	 opacity: 1;

	 z-index: 99;

	 -moz-transform: rotate(180deg);

	 -moz-animation-timing-function: ease-out;

   }

   7% {

	 opacity: 1;

	 -moz-transform: rotate(300deg);

	 -moz-animation-timing-function: linear;

	 -moz-origin: 0%;

   }

   30% {

	 opacity: 1;

	 -moz-transform: rotate(410deg);

	 -moz-animation-timing-function: ease-in-out;

	 -moz-origin: 7%;

   }

   39% {

	 opacity: 1;

	 -moz-transform: rotate(645deg);

	 -moz-animation-timing-function: linear;

	 -moz-origin: 30%;

   }

   70% {

	 opacity: 1;

	 -moz-transform: rotate(770deg);

	 -moz-animation-timing-function: ease-out;

	 -moz-origin: 39%;

   }

   75% {

	 opacity: 1;

	 -moz-transform: rotate(900deg);

	 -moz-animation-timing-function: ease-out;

	 -moz-origin: 70%;

   }

   76% {

	 opacity: 0;

	 -moz-transform: rotate(900deg);

   }

   100% {

	 opacity: 0;

	 -moz-transform: rotate(900deg);

   }

 }

 @-webkit-keyframes orbit {

   0% {

	 opacity: 1;

	 z-index: 99;

	 -webkit-transform: rotate(180deg);

	 -webkit-animation-timing-function: ease-out;

   }

   7% {

	 opacity: 1;

	 -webkit-transform: rotate(300deg);

	 -webkit-animation-timing-function: linear;

	 -webkit-origin: 0%;

   }

   30% {

	 opacity: 1;

	 -webkit-transform: rotate(410deg);

	 -webkit-animation-timing-function: ease-in-out;

	 -webkit-origin: 7%;

   }

   39% {

	 opacity: 1;

	 -webkit-transform: rotate(645deg);

	 -webkit-animation-timing-function: linear;

	 -webkit-origin: 30%;

   }

   70% {

	 opacity: 1;

	 -webkit-transform: rotate(770deg);

	 -webkit-animation-timing-function: ease-out;

	 -webkit-origin: 39%;

   }

   75% {

	 opacity: 1;

	 -webkit-transform: rotate(900deg);

	 -webkit-animation-timing-function: ease-out;

	 -webkit-origin: 70%;

   }

   76% {

	 opacity: 0;

	 -webkit-transform: rotate(900deg);

   }

   100% {

	 opacity: 0;

	 -webkit-transform: rotate(900deg);

   }

 }

 @-ms-keyframes orbit {

   0% {

	 opacity: 1;

	 z-index: 99;

	 -ms-transform: rotate(180deg);

	 -ms-animation-timing-function: ease-out;

   }

   7% {

	 opacity: 1;

	 -ms-transform: rotate(300deg);

	 -ms-animation-timing-function: linear;

	 -ms-origin: 0%;

   }

   30% {

	 opacity: 1;

	 -ms-transform: rotate(410deg);

	 -ms-animation-timing-function: ease-in-out;

	 -ms-origin: 7%;

   }

   39% {

	 opacity: 1;

	 -ms-transform: rotate(645deg);

	 -ms-animation-timing-function: linear;

	 -ms-origin: 30%;

   }

   70% {

	 opacity: 1;

	 -ms-transform: rotate(770deg);

	 -ms-animation-timing-function: ease-out;

	 -ms-origin: 39%;

   }

   75% {

	 opacity: 1;

	 -ms-transform: rotate(900deg);

	 -ms-animation-timing-function: ease-out;

	 -ms-origin: 70%;

   }

   76% {

	 opacity: 0;

	 -ms-transform: rotate(900deg);

   }

   100% {

	 opacity: 0;

	 -ms-transform: rotate(900deg);

   }

 }

 @-o-keyframes orbit {

   0% {

	 opacity: 1;

	 z-index: 99;

	 -o-transform: rotate(180deg);

	 -o-animation-timing-function: ease-out;

   }

   7% {

	 opacity: 1;

	 -o-transform: rotate(300deg);

	 -o-animation-timing-function: linear;

	 -o-origin: 0%;

   }

   30% {

	 opacity: 1;

	 -o-transform: rotate(410deg);

	 -o-animation-timing-function: ease-in-out;

	 -o-origin: 7%;

   }

   39% {

	 opacity: 1;

	 -o-transform: rotate(645deg);

	 -o-animation-timing-function: linear;

	 -o-origin: 30%;

   }

   70% {

	 opacity: 1;

	 -o-transform: rotate(770deg);

	 -o-animation-timing-function: ease-out;

	 -o-origin: 39%;

   }

   75% {

	 opacity: 1;

	 -o-transform: rotate(900deg);

	 -o-animation-timing-function: ease-out;

	 -o-origin: 70%;

   }

   76% {

	 opacity: 0;

	 -o-transform: rotate(900deg);

   }

   100% {

	 opacity: 0;

	 -o-transform: rotate(900deg);

   }

 }

 @keyframes orbit {

   0% {

	 opacity: 1;

	 z-index: 99;

	 transform: rotate(180deg);

	 animation-timing-function: ease-out;

   }

   7% {

	 opacity: 1;

	 transform: rotate(300deg);

	 animation-timing-function: linear;

	 origin: 0%;

   }

   30% {

	 opacity: 1;

	 transform: rotate(410deg);

	 animation-timing-function: ease-in-out;

	 origin: 7%;

   }

 

   39% {

	 opacity: 1;

	 transform: rotate(645deg);

	 animation-timing-function: linear;

	 origin: 30%;

   }

   70% {

	 opacity: 1;

	 transform: rotate(770deg);

	 animation-timing-function: ease-out;

	 origin: 39%;

   }

   75% {

	 opacity: 1;

	 transform: rotate(900deg);

	 animation-timing-function: ease-out;

	 origin: 70%;

   }

   76% {

	 opacity: 0;

	 transform: rotate(900deg);

   }

   100% {

	 opacity: 0;

	 transform: rotate(900deg);

   }

 }

 @media screen and (max-width: 999px) {

   header nav ul li {

	 margin: 0 6px;

   }

 }

 @media screen and (max-width: 1450px) {

   #main section#portfolio .column.news h1 {

	 font-size: 34px;

	 line-height: 34px;

   }

   #main section#portfolio .column.news .excerpt {

	 display: none;

   }

 }

 @media screen and (max-width: 1170px) {

   #main section#portfolio .column.news h1 {

	 font-size: 28px;

	 line-height: 28px;

   }

   #main section#portfolio .column.news article {

	 padding: 0px 35px 5px 35px;

	 width: 85%;

   }

   #main section#portfolio .column.news article img {

	 width: 100%;

   }

   #main section#portfolio .column .info .copy h2 {

	 font-size: 32px;

	 line-height: 30px;

   }

   #main section#contact .international .right h3 {

	 font-size: 58px;

   }

   #main section#contact .international h2 {

	 font-size: 42px;

   }

   #main section#contact .international p {

	 font-size: 11px;

	 margin-bottom: 7px;

   }

 }

 @media screen and (max-width: 980px) {

   #main section#portfolio .column.news h1 {

	 font-size: 22px;

	 line-height: 22px;

   }

   #main section#portfolio .column.wide .info .copy h2 {

	 font-size: 40px;

	 line-height: 45px;

   }

   #main section#portfolio .column .info .copy {

	 width: 400px;

   }

   #main section#portfolio .column .info .copy h2 {

	 font-size: 27px;

	 line-height: 25px;

   }

   #main section#contact .international .copy {

	 float: none;

	 width: 90%;

   }

   #main section#contact .international .right {

	 margin-left: 0;

	 margin-left: 5%;

	 padding: 25px 0;

   }

 }

 @media screen and (max-width: 800px) {

   #main section#people .person {

	 width: 50%;

   }

   #main section#portfolio .column {

	 width: 100%;

   }

   #main section#portfolio .column.news h1 {

	 font-size: 36px;

	 line-height: 34px;

	 display: block;

   }

   #main section#portfolio .column.news .excerpt {

	 display: block;

   }

   #main section#portfolio .column.news article {

	 display: block;

   }

 }

 @media screen and (max-width: 570px) {

   #main section#portfolio .column.news h1 {

	 font-size: 24px;

	 line-height: 24px;

	 display: block;

   }

   #main section#portfolio .column.news .excerpt {

	 display: block;

	 font-size: 12px;

   }

   #main section#portfolio .column.news article {

	 display: block;

   }

 }

 @media screen and (max-width: 500px) {

   #main section#portfolio .column.news .excerpt {

	 display: none;

   }

 }

 @media screen and (max-width: 1330px) {

   #main section#about .circle {

	 transform: scale(0.8);

	 -ms-transform: scale(0.8);

	 -webkit-transform: scale(0.8);

   }

 }

 @media screen and (max-width: 850px) {

   #main section#about .bottom-blue .copy p {

	 font-size: 15px;

   }

 }

 @media screen and (max-width: 1000px) {

   header nav .mainNav > li {

	 margin: 0 26px;

   }

   #main section#about .circle {

	 transform: scale(0.6);

	 -ms-transform: scale(0.6);

	 -webkit-transform: scale(0.6);

   }

 }

 @media screen and (max-width: 950px) {

   header nav .mainNav > li {

	 margin: 0 20px;

   }

 }

 @media screen and (max-width: 875px) {

   header nav .mainNav {

	 display: none;

   }

   header nav .sortMenu {

	 display: none;

   }

   header nav .drawer {

	 display: block;

   }

   #main section#about .circle {

	 transform: scale(0.5);

	 -ms-transform: scale(0.5);

	 -webkit-transform: scale(0.5);

   }

 }

 @media screen and (min-width: 1024px) and (orientation: landscape) {

   .ios header .respond {

	 display: none !important;

   }

 }

 @media screen and (max-width: 650px) {

   #main section#about .circle {

	 transform: scale(0.4);

	 -ms-transform: scale(0.4);

	 -webkit-transform: scale(0.4);

   }

   #main section#portfolio .column.wide .info .copy h2 {

	 font-size: 29px;

	 line-height: 32px;

   }

   #main section#portfolio .column.wide .info .copy p {

	 font-size: 13px;

	 line-height: 18px;

   }

   #main section#contact .international .right h3 {

	 font-size: 52px;

   }

   #main section#contact .international .right .rr,

   #main section#contact .international .right .wwp,

   #main section#contact .international .right .vto {

	 height: 46px;

	 background-size: contain;

   }

   #main section#contact .international .right .rr {

	 width: 29%;

	 margin-right: 7.7%;

   }

   #main section#contact .international .right .wwp {

	 width: 24%;

	 margin-right: 7.7%;

   }

   #main section#contact .international .right .vto {

	 width: 16%;

   }

 }

 @media screen and (max-width: 550px) {

   #main section#contact .international .right h3 {

	 font-size: 40px;

   }

 }

 @media screen and (max-width: 480px) {

   #main section#contact .international h2 {

	 font-size: 33px;

   }

   #main section#contact .international .right {

	 margin-left: 0;

   }

   #main section#contact .international .right h3 {

	 font-size: 35px;

	 margin-left: 3%;

   }

   #main section#contact .international .right .rr,

   #main section#contact .international .right .wwp,

   #main section#contact .international .right .vto {

	 background-size: initial;

	 margin: 0 auto 10px;

	 display: block;

   }

   #main section#contact .international .right .rr {

	 width: 191px;

	 height: 46px;

   }

   #main section#contact .international .right .wwp {

	 width: 158px;

	 height: 46px;

   }

   #main section#contact .international .right .vto {

	 width: 103px;

	 height: 46px;

   }

   #main section#about .circle {

	 -moz-opacity: 1;

	 -khtml-opacity: 1;

	 -webkit-opacity: 1;

	 opacity: 1;

	 -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);

	 filter: alpha(opacity=100);

   }

   #main section#about .web {

	 display: none;

   }

   #main section#about .top-yellow .icon {

	 width: 130px;

	 height: 130px;

   }

   #main section#about .top-yellow h1 {

	 font-size: 34px;

	 line-height: 39px;

	 margin-bottom: 27px;

   }

   #main section#about .top-yellow h2 {

	 width: 95%;

	 font-size: 14px;

	 line-height: 1.5;

   }

   #main section#about .top-blue {

	 height: 420px;

   }

   #main section#about .top-blue blockquote {

	 font-size: 53px;

	 text-indent: -11px;

	 margin-right: 5%;

	 width: 89%;

   }

   #main section#about .top-blue cite {

	 font-size: 21px;

	 margin-left: 5%;

	 width: 60%;

	 line-height: 25px;

   }

   #main section#about .bottom-blue {

	 padding-top: 150px;

	 height: 1109px;

   }

   #main section#about .bottom-blue .circle {

	 right: 0;

   }

   #main section#about .wave-bottom {

	 padding-top: 140px;

   }

   #main section#about .wave-bottom p {

	 font-size: 31px;

	 line-height: 1.2;

   }

   #main section#people .person .details {

	 background-image: none !important;

   }

   #main section#portfolio .column.wide .info .copy h2 {

	 font-size: 20px;

	 line-height: 23px;

   }

   #main section#portfolio .column .info .copy h2 {

	 font-size: 20px;

	 line-height: 23px;

   }

   #main section#portfolio .column.career .details h1 {

	 margin: 70px 0 0 20px;

	 font-size: 43px;

	 line-height: 1;

   }

   #main section#portfolio .column.career .details h4 {

	 margin: 10px 0 0 23px;

   }

   #main section#portfolio .column.career .details article {

	 -webkit-column-count: 1;

	 -moz-column-count: 1;

	 column-count: 1;

	 font-size: 12px;

	 line-height: 1.7;

	 padding: 30px 20px 20px;

   }

   #main section#portfolio .column .info .copy p {

	 display: none;

   }

   #main section#portfolio .column.news h1 {

	 padding-top: 0px;

   }

   #main section#portfolio .column.news .excerpt {

	 display: none;

   }

   #main section#portfolio .column.news article {

	 display: block;

   }

   #main section#portfolio .column > h1 {

	 font-size: 26px;

	 line-height: 25px;

   }

 }

 @media screen and (max-width: 370px) {

   header .logo {

	 width: 220px;

   }

   #main section#portfolio .column.news .excerpt {

	 display: none;

   }

 }

 @media screen and (max-width: 320px) {

   #main section#people .person .details h1 {

	 margin: 70px 0 0 20px;

	 font-size: 42px;

	 line-height: 1;

   }

   #main section#people .person .details h4 {

	 margin: 10px 0 0 20px;

   }

   #main section#people .person .details article {

	 -webkit-column-count: 1;

	 -moz-column-count: 1;

	 column-count: 1;

	 padding: 10px 20px 10px 0;

   }

   #main section#people .person .imageCont .basics {

	 padding: 10px;

   }

   #main section#people .person .imageCont .basics h1 {

	 font-size: 21px;

	 line-height: 23px;

   }

   #main section#people .person .imageCont .basics a {

	 display: none;

   }

   #main section#portfolio .column .info .copy h2 {

	 font-size: 29px !important;

	 line-height: 20px !important;

   }

   #main section#portfolio .column .info .copy p {

	 font-size: 10px;

	 line-height: 18px;

   }

   #main section#contact .location .info {

	 left: 0px;

	 bottom: 75px;

	 width: 100%;

   }

   #main section#contact .location .info.right {

	 left: 0px;

	 right: auto;

   }

   #main section#contact .location .info.right .details {

	 float: none;

   }

 }

 @media all and (max-width: 768px) {

   .phone #main section#portfolio .column .info .background {

	 top: 70px;

   }

  

 }

 @media all and (max-width: 320px) {

   #main section#work .tags {

	 display: none;

   }

   .phone #main section#portfolio .column .info .background {

	 top: 108px;

   }

 }

 @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-o-min-device-pixel-ratio: 2/1), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {

   header .logo {

	 background-image: url(../assets/images/global/logo-red-blue-2x.png);

	 background-size: 194px 29px;

   }

   .orange-blue header .logo {

	 background-image: url(../assets/images/global/logo-orange-blue-2x.png);

   }

   .dark-mint header .logo {

	 background-image: url(../assets/images/global/logo-dark-mint-2x.png);

   }

   .blue-green header .logo {

	 background-image: url(../assets/images/global/logo-blue-green-2x.png);

   }

 }

 #main section#work article.row .column p {

   font-size: 12.5px;

   line-height: 1.65;

   margin-bottom: 15px;

 }

 #main section#work article.row .column.thumbs ul li a {

   line-height: 1;

   overflow: hidden;

 }

 

 

 @media only screen and (min-width:768px) and (max-width:1000px) {

  #main {

    /* width: 100%; */

    /* text-align: left; */

    /* padding-top: 0; */

    margin-top: -24%;

}

 }