/*
 *   Fonts
 */


@font-face {
    font-family: 'Avenir Medium';
    src: url('/fonts/Avenir Medium.eot');
    src: url('/fonts/Avenir Medium.svg#avenirmedium') format('svg'),
         url('/fonts/Avenir Medium.eot?#iefix') format('embedded-opentype'),
         url('/fonts/Avenir Medium.woff') format('woff'),
         url('/fonts/Avenir Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir Black';
    src: url('/fonts/Avenir Black.eot');
    src: url('/fonts/Avenir Black.svg#avenirmedium') format('svg'),
         url('/fonts/Avenir Black.eot?#iefix') format('embedded-opentype'),
         url('/fonts/Avenir Black.woff') format('woff'),
         url('/fonts/Avenir Black.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


/*
 *   Reset
 */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,select,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
strong{font-weight:700;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}abbr,acronym{border:0;}

button::-moz-focus-inner {border:0; padding:0;} /* Remove button padding in Firefox */ 

/*
 *   Styles
 */
 
* {box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
 
html {height:100%;}

body {height:100%;}

body,
button,
textarea {font-family:'Avenir Medium', Arial, Helvetica, sans-serif; color:rgb(77,77,79);}

a:link,
a:visited {color:rgb(77,77,79); text-decoration:none;}
a:hover {text-decoration:underline;}

a.button:link,
a.button:visited {display:inline-block; padding:5px 20px; border:3px solid #fd8136; color:#fd8136;}
a.button:hover {background:#fd8136; color:#fff; text-decoration:none;}

a.button-blue:link,
a.button-blue:visited {display:inline-block; padding:5px 20px; border:3px solid #7fd0c7; color:#7fd0c7;}
a.button-blue:hover {background:#7fd0c7; color:#fff; text-decoration:none;}

p {float:left; width:100%;}

em {font-style:italic;}

.pull-left {float:left;}
.pull-right {float:right;}

.text-center {text-align:center;}

.panel {float:left; width:100%;}
.panel .inner {width:960px; margin:0 auto;}

header {height:156px; background:#ccd3d4;}

header.header-contact {background:#fff;}

header .logo {float:left; margin:36px 0 0 0;}

nav.main {float:left; margin:0 0 0 50px; font-size:17px; line-height:1em; text-transform:uppercase;}
nav.main a:link,
nav.main a:visited {position:relative; overflow:hidden; float:left; margin:0 0 0 1px; padding:101px 20px 27px 20px;}
nav.main a:hover {text-decoration:none;}
nav.main a .bg {clip:rect(auto auto 0px auto); position:absolute; top:0; left:0; padding:101px 20px 27px 20px; z-index:2; background:#7dd0c8; color:#fff;
  -webkit-transition:all 0.2s ease-out;
     -moz-transition:all 0.2s ease-out;
          transition:all 0.2s ease-out;
}
nav.main a .under {position:relative; z-index:1;}
nav.main a.active .bg {clip:rect(auto auto 156px auto);}
nav.main a .bg-on {clip:rect(auto auto 156px auto);}
nav.main a .name {display:block; padding-top:10px; border-top:1px solid #ccd3d4;}
nav.main a.active .name,
nav.main a .bg-on .name {border-top:1px solid #fff;}

header.header-contact nav.main a .name {border-top:1px solid #fff;}

nav.burger {display:none; float:right; font-size:36px;}
nav.burger a:link,
nav.burger a:visited {float:left; margin:60px 10px 0 0; color:#f58227;}

nav.mobile {display:none; position:fixed; z-index:100; right:0; top:0; width:70%; height:100%; background:#7dd0c8; border-left:20px solid #5bbbb2; box-shadow:0px 0px 0px 10px rgba(0,0,0,.2);}
nav.mobile a:link,
nav.mobile a:visited {float:left; width:100%; padding:20px 30px; color:#fff; text-transform:uppercase;}
nav.mobile a:active {background:#5bbbb2;}
nav.mobile a:hover {text-decoration:none;}
nav.mobile a.close:link,
nav.mobile a.close:visited {position:absolute; right:0; top:0; padding:20px 30px; width:auto;}

footer {float:left; width:100%; height:120px; padding:30px 0; background:#f58227; color:#fff;}
footer .logo {float:left;}
footer .details {float:left; margin:0 0 0 40px; color:#fff; font-size:12px; line-height:20.5px;}
footer .copyright {float:right; clear:right; color:#fff; font-size:12px; line-height:20.5px;}
footer .quiet {color:rgba(255,255,255,.75);}
footer a:link,
footer a:visited {color:#fff;}

footer .social {float:right; clear:right; margin:-8px 0 10px 0;}
footer .social a {display:inline-block; margin:0 0 0 5px; width:36px; height:36px; background:url('/images/social.png') 0px 0px no-repeat;}
footer .social a.facebook {background-position:0px 0px;}
footer .social a.linkedin {background-position:-40px 0px;}
footer .social a.instagram {background-position:-80px 0px;}
footer .social a.googleplus {background-position:-120px 0px;}

footer .social a.facebook:hover {background-position:0px -36px;}
footer .social a.linkedin:hover {background-position:-40px -36px;}
footer .social a.instagram:hover {background-position:-80px -36px;}
footer .social a.googleplus:hover {background-position:-120px -36px;}

.body {min-height:100%; margin-bottom:-120px; padding-bottom:120px;}

.hero {float:left; width:100%; height:280px;}
.hero-home {height:916px; background:url('/images/bg-home.png?v2') top center no-repeat #ccd3d4;}
.hero-about {position:relative; height:915px; background:url('/images/bg-about.png') top center no-repeat #ccd3d4;}
.hero-about .text {position:absolute; top:516px; left:50%; margin:0 0 0 -430px; width:350px; color:#f58227; font-size:20px; line-height:26px;}
.hero-about .text p {margin:0 0 26px 0;}
.hero-whatwedo {height:922px; background:url('/images/bg-whatwedo.png') top center no-repeat #ccd3d4;}
.hero-whatwedo .text {position:absolute; top:456px; left:50%; margin:0 0 0 143px; width:285px; color:#f58227; font-size:20px; line-height:26px;}
.hero-work {height:921px; background:url('/images/bg-work.png') top center no-repeat #ccd3d4;}
.hero-work .text {position:absolute; top:347px; left:50%; margin:0 0 0 110px; width:285px; color:#f58227; font-size:20px; line-height:26px;}
.hero-work .text p {margin:0 0 26px 0;}

.showcase {float:left; width:100%; padding:70px 0; background:#f3f3f3;}
.showcase .inner {position:relative; overflow:hidden; height:100%;}

.showcase .dots {float:left; width:100%; margin:10px 0 50px 0; text-align:center;}
.showcase .dots .dot {display:inline-block; margin:0 8px; width:25px; height:25px; border:3px solid #fd8136; border-radius:50%;}
.showcase .dots .dot:hover {background:#fd8136;}
.showcase .dots .dot-active,
.showcase .dots .dot-active:hover {background:#7fd0c7; border-color:#7fd0c7;}

.showcase .items {position:relative; float:left; width:100%;}
.showcase .item {float:left; width:100%; text-align:center;}
.showcase .item-changing {position:absolute; left:0; top:0; z-index:1;}
.showcase .image {float:left; width:100%; text-align:center;}
.showcase .info {float:left; width:100%; margin:30px 0 0 0; text-align:center;}
.showcase .info h3 {margin:0 0 20px 0; font-family:'Avenir Heavy', Arial, Helvetica, sans-serif; font-size:30px; line-height:30px; color:#fd8238;}

.showcase a.button-blue {padding:8px 40px; font-size:30px; font-family:'Avenir Heavy', sans-serif;}

.what-we-do {background:url('/images/what-we-do.png') top center no-repeat #7fd0c7;}
.what-we-do .wrap {float:left; width:100%; height:100%; padding:130px 0 80px 0; position:relative;}
.what-we-do h2 {float:left; width:380px; margin:0 0 30px 0; font-family:'Avenir Heavy', sans-serif; font-size:24px; line-height:34px; color:#fff;}
.what-we-do p {float:left; clear:left; width:380px; margin:0 0 30px 0; font-size:20px; line-height:30px; color:#fff;}

.what-we-do img {position:absolute; right:0; bottom:0; margin-bottom:-1px;}

.contact-home {padding:75px 0; background:#e1e1e1; color:#f58227;}
.contact-home h2 {float:left; width:100%; margin:0 0 50px 0; text-align:center; font-family:'Avenir Heavy', sans-serif; font-size:24px; line-height:34px;}
.contact-home p {text-align:center; font-size:32px; line-height:1em;}
.contact-home a.button {padding:8px 40px;}

.about {float:left; width:100%; height:540px; padding:75px 0; background:#f3f3f3; border-bottom:20px solid #e6e6e6;}
.about .inner {position:relative; height:100%;}
.about img {float:left;}
.about p {float:right; width:450px; margin:0 0 40px 0; color:#f58227; font-size:26px; line-height:33px;}

.contact-about {padding:75px 0; background:#7fd0c7; text-align:center; color:#fff;}
.contact-about h2 {margin:0 0 40px 0; font-size:24px; line-height:31px; font-family:'Avenir Heavy', sans-serif;}
.contact-about a.button {padding:5px 30px; font-size:30px; font-family:'Avenir Heavy', sans-serif; color:#fff; border-color:#fff;}
.contact-about a.button:hover {background:#fff; color:#7fd0c7;}

.creative-team {padding:75px 0 75px 0; color:#e66525;}
.creative-team .inner {width:860px;}
.creative-team-right {padding-top: 0px;}
.creative-team h2 {margin:0 0 75px 0; color:#7dd0c8; font-size:40px; line-height:1em; text-align:center;}
.creative-team h3 {margin:0 0 1em 0; font-size:40px;}
.creative-team p {margin:0 0 1.2em 0; font-size:20px; line-height:30px; color:rgb(77,77,79);}
.creative-team a:link,
.creative-team a:visited {color:#e66525;}
.creative-team img {float:left;}
.creative-team .text {float:right; width:385px; margin:50px 0 0 0;}


.creative-team-right img {float:right;}
.creative-team-right .text {float:left; margin:120px 0 0 0;}

.creative-team-first {padding-top:100px; background:url('/images/creative-top.png') top center no-repeat !important;}

.whatwedo-box {height:auto; padding:0 0 100px 0; border-bottom:0;}
.whatwedo-box .inner {width:750px;}
.whatwedo-box h2 {float:right; clear:right; width:315px; margin:0 0 40px 0; font-size:24px; line-height:34px;}
.whatwedo-box p {float:right; clear:right; width:315px; font-size:20px; line-height:26px;}

.whatwedo-green {background:#7dd0c8; color:#4d4d4f; /* color:#fff; */}
.whatwedo-green h2,
.whatwedo-green p {float:right; clear:right; color:#4d4d4f; /* color:#fff; */}

.whatwedo-white {background:#fff; color:#4d4d4f;}
.whatwedo-white h2,
.whatwedo-white p {color:#4d4d4f;}

.whatwedo-right img {float:right;}
.whatwedo-right h2,
.whatwedo-right p {float:left; clear:left;}

.whatwedo-first {padding-top:100px; background:url('/images/whatwedo-top.png') top center no-repeat;}


.grayscale {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url('/css/grayscale.svg#greyscale'); /* Firefox 4+ */
  filter: gray; /* IE 6-9 */
  
  -webkit-transition: filter 0.2s ease-out;
  -webkit-transition: -webkit-filter 0.2s ease-out;
     -moz-transition: filter 0.2s ease-out;
     -moz-transition: -moz-filter 0.2s ease-out;
          transition: filter 0.2s ease-out;
          transition: -webkit-filter 0.2s ease-out;
}

.whatwedo-box:hover h2,
.whatwedo-box:hover p {
  color:#f58227;
}

.grayscale:hover,
.whatwedo-box:hover .grayscale {
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  -o-filter: none;
  filter: none;
}

.work {float:left; width:100%; padding:70px 0; background:#f3f3f3; font-size:26px; line-height:36px; color:#fd8037;}
.work .inner {
  -webkit-columns:2; -moz-columns:2; columns:2;
  -webkit-column-gap:50px; -moz-column-gap:50px; column-gap:50px;
}
.work p {float:none; display:inline-block;}

.portfolio {padding:140px 0; background:url('/images/work-top.png') top center no-repeat #e8e8e7;}
.portfolio .inner {width:900px}
.portfolio .items {float:left; width:100%;}
.portfolio .item {position:relative; overflow:hidden; float:left; width:410px; margin:0 20px 40px 20px; height:280px;}
.portfolio .item-long {height:540px;}
.portfolio .item img {position:relative; width: 100%; z-index:1;}
.portfolio .rollover {position:absolute; z-index:2; opacity:0; left:0; top:0; width:100%; height:100%; padding:0; font-size:30px; line-height:1em; text-align:center; background:rgba(127, 208, 199, 0.95); font-size:26px; color:#fff;
  -webkit-transition:all 0.2s ease-out;
     -moz-transition:all 0.2s ease-out;
          transition:all 0.2s ease-out;
  text-shadow:1px 1px rgba(0,0,0,.25);
}
.portfolio .item-long .rollover {padding:0;}
.portfolio .item-orange .rollover {background:rgba(253, 130, 57, 0.95);}
.portfolio small {display:block; margin:10px 0 0 0; font-size:20px; line-height:26px;}
.portfolio .pull-left {float:left;}
.portfolio .pull-right {float:right;}

.portfolio .item:hover .rollover {opacity:1;}
  
.portfolio .item table {width:100%; height:100%; vertical-align:middle;}
.portfolio .item table tr td {padding:30px; vertical-align:middle;}

.features {float:left; width:100%; position:relative; margin:0 0 60px 0;}

.feature {display:inline-block; margin:0 20px;}
.feature h2 {margin:0 0 20px 0; font-size:30px; line-height:1em;}
.feature p {margin:0 0 20px 0;}
.feature img {margin:0 0 20px 0;}
.feature a.button {border-color:#000; color:#000;}
.feature a.button:hover {background:#000; color:#fff;}

.features .fading {position:absolute; left:0; top:0; z-index:1;}

.map {height:400px; background:#e6e6e6;}

.contact {padding:140px 0 500px 0; background:url('/images/bg-contact.png') bottom center no-repeat #c8d3d4;}

.contact .details {float:left; width:50%; font-size:20px; line-height:30px; color:#6d6d6f;}
.contact .details h2 {margin:0 0 30px 0; font-size:30px;}
.contact .details p {margin:0 0 26px 0;}
.contact .details a:link,
.contact .details a:visited {color:#6d6d6f;}

.contact-form {float:right; width:50%;}

.contact-form input[type="text"],
.contact-form textarea {float:left; width:100%; margin:0 0 20px 0; padding:15px; background:#ededed; border:0; outline:none; color:rgb(77,77,79); font-size:20px;}
.contact-form textarea {max-width:100%; height:300px;}
.contact-form button {width:100%; padding:15px; background:#c8d3d4; border:0; border:3px solid #f58227; outline:none; color:#f58227; font-size:20px; line-height:1em; cursor:pointer;}
.contact-form button:hover {background:#f58227; color:#fff;}

.pageresponse {margin:0 0 1em 0; padding:15px; background:#f58227; color:#fff; font-size:18px;}
.pageresponse i {margin:0 10px 0 0; color:rgba(255,255,255,.5);}

.contact-phone {padding:90px 0; background:#f3f3f3; border-bottom:20px solid #e6e6e6; color:#6d6d6f;}
.contact-phone h2 {margin:0 0 60px 0; font-size:56px; letter-spacing:-2px;}
.contact-phone p {margin:0 0 1em 0; font-size:23px; line-height:30px;}
.contact-phone a:link,
.contact-phone a:visited {color:#6d6d6f;}

.google-adwords {float:left; width:100%; height:0px;}

::-webkit-input-placeholder {color:#f58227;}
::-moz-placeholder {color:#f58227;}
:-moz-placeholder {color:#f58227;}
:-ms-input-placeholder {color:#f58227;}

@media all and (max-width:1020px){
  
  .body {float:left; width:100%; margin-bottom:0; padding-bottom:0;}
  
  .panel .inner {width:100%; margin:0;}
  
  header .inner {padding:0 30px;}
  
  nav.main {display:none;}
  nav.burger {display:block;}
  
  .pageresponse .inner {padding:0 30px;}
  
  .showcase {height:auto;}
  .showcase .inner {padding:0 30px 60% 30px;}
  
  .showcase .item {background-size:contain;}
  .showcase .info {left:0; right:auto; top:auto; bottom:0; width:100%; padding-top:100px; text-align:center;}
  .showcase .info a:link,
  .showcase .info a:visited {display:block; width:100%;}
  .showcase .prev a {margin-left:10px;}
  .showcase .next a {margin-right:10px;}
  .showcase .prev span {left:10px;}
  .showcase .next span {right:10px;}
  
  .showcase-button {display:none;}
  .showcase-swipe {display:block;}
  
  .showcase-swipe .inner {padding:0;}
  .showcase-swipe .item {position:relative; top:auto; left:auto; padding:0 50px; background-position:50% 0%;}
  .showcase-swipe .info {position:relative; top:auto; left:auto; padding:80% 0 20% 0; text-align:left;}
  
  .what-we-do .inner {padding:0 30px;}
  
  .pie {float:none; display:block; margin:0 auto 20px auto;}
  
  .contact-home .inner {padding:0 30px;}
  
  .about {height:auto;}
  .about .inner {padding:0 30px; text-align:center;}
  .about img {float:none;}
  .about h2 {width:100%; margin:40px 0 0 0;}
  .about p {width:100%; margin:40px 0 0 0;}
  
  .creative-team .inner {padding:0 30px;}
  .creative-team h2 {width:100%; text-align:center;}
  .creative-team img {height:auto; max-width:100%;}
  
  .whatwedo-box img {height:auto; max-width:100%;}

  .grayscale {
    -webkit-filter: none;
    -moz-filter: none;
    -ms-filter: none;
    -o-filter: none;
    filter: none;
  }
  
  .work .inner {
    padding:0 30px;
    -webkit-columns:1; -moz-columns:1; columns:1;
  }
  .work p {margin:0 0 1em 0;}
  
  .portfolio .inner {width:900px; margin:0 auto;}
  
  .map {height:300px;}
  
  .contact {padding:30px 30px 560px 30px;}

  .contact-phone .inner {padding:0 48px;}
  .contact-phone h2 {font-size:44px;}
  
  footer {height:auto;}
  footer .inner {padding:0 30px;}
  footer .left {width:400px; margin:0 auto;}
  footer .copyright {width:100%; text-align:center;}
  footer .social {width:100%; margin:15px 0; text-align:center;}
  
  .hero {height:auto; background-image:none;}
  .hero .text {float:left; position:relative; top:0; left:0; width:100%; margin:0; padding:30px; text-align:center;}
  .hero .text p {float:none; max-width:600px; display: inline-block;}
  .hero-home {background-image:url('/images/bg-home.png'); background-size:contain; height:0px; padding-bottom:57%;}
  
  .creative-team-first {background-image:url('/images/mobile-top.png');}
  .whatwedo-first {background-image:url('/images/mobile-top.png');}
  .portfolio {background-image:url('/images/mobile-portfolio-top.png');}
  
}

@media all and (max-width:910px){
  
  .what-we-do .inner {padding:0 20px; text-align:center;}
  .what-we-do h2 {float:none; width:100%; margin:0 0 20px 0; text-align:center;}
  .what-we-do p {float:none; display:inline-block; width:100%; max-width:600px;}
  .what-we-do img {display:none;}
  
  .portfolio {padding-top:80px;}
  .portfolio .inner {width:100%; margin:0; text-align:center;}
  .portfolio .items {display:inline-block; float:none; margin:0; width:410px;}
  .portfolio .item {display:inline-block; float:none; clear:left; margin:0 0 30px 0; top: 0 !important;}
  
}

@media all and (max-width:800px){
  
  
  .creative-team {padding:30px 0; text-align:center;}
  .creative-team-first {padding-top:100px;}
  .creative-team h2 {margin:0 0 50px 0;}
  .creative-team img {float:none; margin:0 auto; width:auto !important; max-height:400px; position: static !important;}
  .creative-team .text {width:100%; margin:30px 0 0 0; text-align:left;}
  
  
}
  
@media all and (max-width:768px){
  
  .contact {background-image:none; padding:30px;}
  .contact .inner {width:100%; margin:0 auto; text-align:center;}
  .contact .details {width:100%;}
  
  .contact-form {width:100%;}
  
  .what-we-do .wrap {padding:80px 0 50px 0;}
  
}

@media all and (max-width:470px){
  
  .portfolio {padding:80px 0 30px 0;}
  .portfolio .items {width:100%; margin:0; padding:0 30px;}
  .portfolio .item {float:left; width:100%; height:auto !important;}
  .portfolio .item .rollover {padding:30px;}
  .portfolio .item img {float:left; width:100%;}
  
}

@media all and (max-width:440px){
  
  footer .left {width:100%; margin:0; text-align:center;}
  footer .logo {float:none; margin:0 0 20px 0; text-align:center;}
  footer .details {width:100%; margin:0; text-align:center;}
  
}

@media all and (max-width:360px){
  
  header .logo {max-width:180px; margin-top:50px;}
  
  .contact-home a.button {font-size:18px;}
  
}