/*!
 * Start Bootstrap - Stylish Portfolio Bootstrap Theme (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */


/* Global Styles */

html,
body {
    width: 100%;
    height: 100%;
    font-family: 'Proxima-Nova-ScOsf-Light',"Helvetica Neue",Helvetica, sans-serif;
    text-rendering: optimizelegibility;
    -moz-font-feature-settings: "kern" 1;
    -moz-font-feature-settings: "kern=1";
    -ms-font-feature-settings: "kern" 1;
    -o-font-feature-settings: "kern" 1;
    -webkit-font-feature-settings: "kern" 1;
    font-feature-settings: "kern" 1; 
}

canvas{ 
    width: 100%; 
    height: 100%; 
    padding:0; 
}

.text-vertical-center {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    z-index: 100;
}

#mti_wfs_colophon{
    display: none !important;
}

/* Typography */

.logo_descrip{
    color: white;
    text-transform: uppercase;
    font-size: 1em;
    letter-spacing: 7px;
    padding-left: 4px;
    margin-top: 1em;
    font-family: 'Proxima-Nova-ScOsf-Light', "Helvetica Neue", Helvetica, sans-serif;
}

.title {
    color: white;
    text-align: center;
    vertical-align: middle; 
    margin: 0;
    padding: 0;
    font-family:'DidotLTStd-Roman', 'Palatino Linotype', serif;
}

.descrip{
    color: white;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Proxima-Nova-ScOsf-Light', "Helvetica Neue", Helvetica, sans-serif;
}

.project .title{
    font-size: 6.0em;
}

.project .descrip{
    font-size: .90em;
}

.project .title2{
    font-size: 3.50em;
    margin-bottom: 10px;
    letter-spacing: -2px;
    line-height: normal;
    font-family:'DidotLTStd-Roman', 'Palatino Linotype', serif;
}

.project .descrip2{
    font-size: .80em;
    padding-top: 0;
}

.p_hero_title {
    font-size: 7em;
}

.p_hero_descrip {
    font-size: .95em;
    padding-top: 2.25em;
}

#hero{
/*    position: absolute;*/
    width: 100%;
    height: auto;
/*    top: 0 !important;*/
}

/* Links */

a{
    color: #a2c4b3;
}

#links {
    width: 75%;
    clear: both;
    margin: 0 auto;
    padding-top: 2em;
}

#links .link{
    float: left;
    width: 50%;
    height: auto;
    text-align: center;
}

.link {
    font-size: .95em;
    letter-spacing: 1px;
}

.link a:hover{
    color: #a2c4b3;
}

.single_link {
    width: 100%;
    clear: both;
    margin: 0 auto;
    padding-top: 2em;
    text-align: center;
    height: auto;
}

/* Custom Button Styles */

.arrow {
  position: absolute;
  top: 90%;
  left: 50%;
  margin: 0 0 0 -30px;
  z-index: 1000; 
}

.animate {
  -webkit-animation: bounce 2s infinite;
  -moz-animation: bounce 2s infinite;
  animation: bounce 2s infinite; 
}

.btn-dark {
    border-radius: 0;
    color: #a2c4b3;
    background-color: rgba(255,255,255,0.9);
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
    color: #a2c4b3;
    background-color: rgba(255,255,255,0.4);
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}

.btn-light {
    border-radius: 0;
    color: #333;
    background-color: rgb(255,255,255);
}

.btn-light:hover,
.btn-light:focus,
.btn-light:active {
    color: #333;
    background-color: rgba(255,255,255,0.8);
}

/* Custom Horizontal Rule */

hr.small {
    max-width: 100px;
}

/* Side Menu */

.index .logo{
    display: none;
    visibility: hidden !important;
}

/*.h{
  visibility: visible;
  position: fixed;
}*/

.logo{
    position: fixed;
    z-index: 90;
    width: 50%;
    padding: 0 0 0 10px;
    margin: 10px 0 0 15px;
    display: none;
}

.logo.about_logomark{
    display: block;
}

.logo2{
    position: fixed;
    z-index: 90;
    width: 50%;
    padding: 0 0 0 10px;
    margin: 10px 0 0 15px;
}

.logomark {
    width: 70px;
    height: auto;
}

.fa {
    font-size: 1.50em !important;
}

.btn-group-lg>.btn, .btn-lg {
    padding: 8px 11px;
}

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    right: 0;
    width: 250px;
    height: 100%;
    margin-right: -250px;
    overflow-y: auto;
    background: rgba(0,0,0,0.9);
    visibility: hidden;
    opacity: 0;
   -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
    transition: opacity 0.5s, visibility 0s 0.5s;
}

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    line-height: 2.50em;
    text-align: center;
    font-family: 'DidotLTStd-Italic', 'Palatino Linotype', serif;
    font-weight: 300;
    font-style: normal;
    font-size: 3.75em;
}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #fff;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #a2c4b3;
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
    height: 55px;
    font-size: 18px;
    line-height: 55px;
}

.sidebar-nav > .sidebar-brand a {
    color: #999;
}

.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
}

#menu-toggle {
    z-index: 500;
    position: fixed;
    top: 0;
    right: 0;
}

#sidebar-wrapper.active {
    right: 250px;
    width: 100%;
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}


.toggle {
    margin: 5px 5px 0 0;
}

/* Header */

.header {
    display: table;
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: url(../img/hero_bg.jpg) no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

/* About */

.about_pic{
    margin: 0 auto;
    padding-top: 10%;
    text-align: center;
}

.about_pic img{
    width: 22%;
    height: auto;
    border-radius: 500px;
}

.about {
    padding: 50px 0;
}


/* Portfolio */

#projects{
    background: #000;
}

.project {
    position: relative;
    width: 100%;
    height: 400px;
    color: #fff;
}

.project figcaption { padding-top: 150px; pointer-events: none; }

.project .bg_image{
    position: absolute;
    background-position: 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    -webkit-transition: opacity 1s, -webkit-transform 1s;
    transition: opacity 1s, transform 1s;
    width: 100%;
    height: 26em;
}

.project .bg_image:hover{
    -webkit-transition: all 0.9s ease 0s;
    -moz-transition: all 0.9s ease 0s;
    -ms-transition: all 0.9s ease 0s;
    -o-transition: all 0.9s ease 0s;
    transition: all 0.9s ease 0s;
    opacity: 0.4;
    -webkit-transform: scale3d(1.1,1.1,1);
    transform: scale3d(1.1,1.1,1);
}

.projectmercari .bg_image{ 
    background: url(../img/mercari_hero.jpg) no-repeat center center scroll; 
    background-position: 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.projectjibe .bg_image{ 
    background: url(../img/jibe_hero.jpg) no-repeat center center scroll; 
    background-position: 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.projectIris .bg_image{ 
    background: url(../img/iris_hero.jpg) no-repeat center center scroll; 
    background-position: 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.project1 .bg_image{ 
    background: url(../img/grazed_hero.png) no-repeat center center scroll; 
    background-position: 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
.project2 .bg_image{ 
    background: url(../img/ikea_hero.png) no-repeat center center scroll; 
    background-position: 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
.project3 .bg_image{ 
    background: url(../img/vitale_hero.png) no-repeat center center scroll; 
    background-position: 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.project4 .bg_image{ 
    background: url(../img/avox_hero.svg) no-repeat center center scroll; 
    background-position: 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.project5 .bg_image{ 
    background: url(../img/50logos_hero.png) no-repeat center center scroll; 
    background-position: 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.project6 .bg_image{ 
    background: url(../img/spectre_hero2.png) no-repeat center center scroll; 
    background-position: 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.project7 .bg_image{ 
    background: url(../img/hakone_hero.png) no-repeat center center scroll; 
    background-position: 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.p_container{
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
}

.p_grid{
    clear: both;
    margin: 0 auto;
    background: #2f3238;
}

.p_grid .grid_item{
    float: left;
    margin: 0;
    width: 50%;
    height: 17.50em;
    background: #000;
}

.grid_item figcaption { padding-top: 7.50em; pointer-events: none; }

.p_grid .grid_item:nth-child(1) {
}

.p_grid .grid_item:nth-child(2) {
}

.p_grid .grid_item:nth-child(3) {
}

.p_grid .grid_item:nth-child(4) {
}

div.p_container figcaption::before,
div.p_container figcaption::after {
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

div.p_container h1 {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,-20px,0);
    transform: translate3d(0,-20px,0);
}

div.p_container p {
    padding: 1.80em 2.5em;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,20px,0);
    transform: translate3d(0,20px,0);
}

div.p_container:hover figcaption::before,
div.p_container:hover figcaption::after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

div.p_container:hover h1,
div.p_container:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/* Body of work */

.header .ikea_hero{
    display: table;
    position: relative;
    width: 100%;
    height: 60%;
    z-index: 10;
}

.p_brief .contact h2{
    font-size: 1em;
}

.p_brief.about_me{
    text-align: center;
    width: 75%;
}

.p_brief.about_me h2{
    font-size: 2.50em;
}

.about_me h4{
    font-family:'DidotLTStd-Roman', 'Palatino Linotype', serif;
    color: #a2c4b3;
    font-size: 1.30em;
    letter-spacing: 0px;
    text-transform: uppercase;
}

.about_me br {
    display: none;
}

.words{
    padding-bottom: 4em;
}

.three_words{
    margin: 2em 0;
    padding-bottom: 3em;
}

.three_words h5{
    font-family:'DidotLTStd-Italic', 'Palatino Linotype', serif;
    color: #a2c4b3;
}

.circle{
    display: block;
    height: 3.70em;
    width: 3.70em;
    line-height: 2em;

    -moz-border-radius: 50%; /* or 50% */
    border-radius: 50%; /* or 50% */

    background-color: #fff;
    color: white;
    text-align: center;
    font-size: 2.2em;
    padding-top: 1.5em;
    margin: 0 auto;
    border: 2px solid #a2c4b3;
}

.w_grid .grid_item{
    width: 33.33%;
}

.w_grid .grid_item {
    float: left;
}


.w_grid.words{
    margin-top: 2em;
}

.p_brief.about_p p{
    padding-top: 2.10em;
}

.p_brief.head{
    padding: 9% 5% 4% 5%;
}

.p_brief {
    height: auto;
    padding: 9% 5% 9% 5%;
    width: 75%;
    margin: 0 auto;
}

.p_brief2{
    padding: 9% 0% 0% 0%;
}

.p_brief h2{
    color: #a2c4b3;
    text-align: center;
    vertical-align: middle; 
    margin: 0;
    padding: 0;
    font-size: 3.20em;
    font-family:'DidotLTStd-Italic', 'Palatino Linotype', serif;
    letter-spacing: -1px;
}

.p_brief p{
    color: gray;
    padding-top: 1.55em;
    font-family: 'Proxima-Nova-Alt-Light', "Helvetica Neue", Helvetica, sans-serif;
    line-height: 1.65em;
}

.p_brief ol{
    padding-top: 1.85em;
}


ol {
    margin:0px 0;
    padding: 3em 0 0 0;
    list-style: disc inside none;
    color: gray;
    font-family: 'Proxima-Nova-Alt-Light', "Helvetica Neue", Helvetica, sans-serif;
    line-height: 1.65em;
}

ol li 
{
    margin: 0px;
    padding: 0px;
    text-indent: -1em;
    margin-left: 3.4em;
}

.mercari_hero{
    background: url(../img/mercari_lp_hero.jpg) no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.jibe_hero{
    background: url(../img/jibe_hero.jpg) no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.iris_hero{
    background: url(../img/iris_lp_hero.jpg) no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.ikea_hero{
    background: url(../img/ikea_lp_hero.png) no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.big_img {
    position: relative;
    width: 100%;
    height: 40em;
    color: #fff;
}

.big_img2 {
    position: relative;
    width: 100%;
    height: 100%;
    color: #fff;
}

.jibe_img1{
    background: url(../img/jibe1.jpg) no-repeat center center scroll; 
    background-position: 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.jibe_img2{
    background: url(../img/jibe2.jpg) no-repeat center center scroll; 
    background-position: 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.mercari_img1{
    background: url(../img/mercari1.jpg) no-repeat center center scroll; 
    background-position: 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.mercari_img2{
    background: url(../img/mercari2.jpg) no-repeat center center scroll; 
    background-position: 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.mercari_img3 {
    max-width: 100%;
    height: auto;
}

.iris_img1{
    background: url(../img/iris1.jpg) no-repeat center center scroll; 
    background-position: 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.iris_img2{
    background: url(../img/iris2.jpg) no-repeat center center scroll; 
    background-position: 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.ikea_img1{
    background: url(../img/ikea1.png) no-repeat center center scroll; 
    background-position: 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.ikea_img2{
    background: url(../img/ikea2.png) no-repeat center center scroll; 
    background-position: 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.ikea_menu{
    width: 100%;
    text-align: center;
}

.ikea_menu img{
    max-width: 100%;
    height: auto;
}

/*.ikea_img3{
    background: url(../img/ikea3.gif) no-repeat center center scroll; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    position: relative;
    width: 100%;
    min-width: 100%;
}*/

.ikea_side_menu{
    padding: 1% 0 5% 0;
}


.ikea_img4 {
    max-width: 100%;
    height: auto;
}

.ikea_img5 {
    max-width: 80%;
    height: auto;
}

.ikea_img8 {
    max-width: 100%;
    height: auto;
}

.scan{
    text-align: center;
    padding-bottom: 3%;
}

.p_brief.beacon{
    padding-bottom: 3%;
    padding-top: 8%;

}

.beacon_vid{
    display: block;
}

.beacon_vid_mobile {
    display: none;
}

.recall_vid{
    display: block;
}

.recall_vid_mobile {
    display: none;
}

/*.p_grid .grid_item2{
    float: left;
    margin: 0;
    width: 50%;
    height: 20em;
}*/

.ikea_vid{
    padding-top: 10%;
    margin: 0 auto;
    width: 80%;
}

.vitale_vid{
    margin: 0 auto;
    width: 80%;
}

.videoWrapper{
    position: relative;
    padding-bottom: 56.25%; 
    padding-top: 30px; 
    height: 0; 
    overflow: hidden;
    margin-top: 8%;

}

.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.gradient_bg{
    background: -webkit-radial-gradient(#5db8e5, #0f6b98); /* For Safari 5.1 to 6.0 */
    background: -o-radial-gradient(#5db8e5, #0f6b98); /* For Opera 11.1 to 12.0 */
    background: -moz-radial-gradient(#5db8e5, #0f6b98); /* For Firefox 3.6 to 15 */
    background: radial-gradient(#5db8e5, #0f6b98); /* Standard syntax */
    height: 55em;
}

.vitale_img2{
    max-width: 100%;
    height: auto;
    margin-top: -2em;
}

.vitale_img3{
    max-width: 100%;
    height: auto;
/*    margin-top: -2em;*/
}

.result {
    width: 90%;
    margin: 0 auto;
}

#survey{
    margin-top: 2em;
}

.survey {
    width: 65%;
    margin: 0 auto;
}

.wires{
    width: 90%;
    margin: 0 auto;
}

.container2{
    padding-bottom: 2px;
}

.responsive {
    padding: 7% 0;
    margin: 0 auto;
}

.vitale_hero{
    background: url(../img/vitale_lp_hero.png) no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.vitale_img1{
    background: url(../img/vitale1.png) no-repeat center center scroll; 
    background-position: 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.p_brief.concept{
    padding: 9% 5% 2% 5%;
}

.grazed_hero{
    background: url(../img/grazed_lp_hero.png) no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.product_pic{
    width: 100%;
}

.g_left{
    width: 50%;
    float: left;
}

.g_right {
    width: 50%;
    float: right;
}

.g_side {
    width: 65%;
    margin: 0 auto;
}

.img_wrapper{
    width: 90%;
    height: auto;
    margin: 0 auto;
}

.logos_hero{
    background: url(../img/logos_lp_hero.png) no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}


.logos_vid{
    margin: 0 auto;
    width: 80%;
    padding: 0 0 9% 0;
}  

/*** Logos grid ***/

.logos_grid{
    clear: both;
    margin: 0 auto;
}

.logos_grid .grid_item{
    float: left;
    margin: 0;
    width: 33.333%;
    height: auto;
}

.logo_img{
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
}

.logo_img img{
    width: 100%;
}

.clear {
    clear: both;
    margin: 0;
    padding: 0;
}

.avox_hero{
    background: url(../img/avox_lp_hero.svg) no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

/*.avox_img1{
    background: url(../img/avox1.jpg) no-repeat center center scroll; 
    background-position: 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}*/

.full{
    width: 100%;
    height: auto;
    padding: 0;
}

    .container.full{
    height: auto;
}

.avox_img2{
    background: url(../img/avox2.svg) no-repeat center center scroll; 
    background-position: 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.blk_bg{
    background: #000;
}

.big_img3 {
    position: relative;
    width: 100%;
    color: #fff;
}

.big_img4 {
    position: relative;
    width: 100%;
    height: auto;
}

.metrics .big_img4{
    padding-bottom: 7em;
}


.hakone_hero{
    background: url(../img/hakone_lp_hero.jpg) no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.hakone_img1{
    background: url(../img/hakone1.jpg) no-repeat center center scroll; 
    background-position: 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.hakone_img2{
    background: url(../img/hakone2.jpg) no-repeat center center scroll; 
    background-position: 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.spectre_hero{
    background: url(../img/spectre_lp_hero.jpg) no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

/* Prev and Next */

.prev_next{
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.prev_next a{
    text-transform: uppercase;
    width: 50%;
    float: left;
    text-align: center;
    padding: 2em 1em;
    letter-spacing: 1px;
    background-color: #a2c4b3;
    color: #fff;
    font-family: 'Proxima-Nova-ScOsf-Light', "Helvetica Neue", Helvetica, sans-serif;
    font-size: 1em;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.prev_next .prev a{
    background-color: #616161;
}

.next a:hover{
    background-color: #fff;
    color: #a2c4b3;
}

.prev a:hover{
    background-color: #fff;
    color: #616161;
}


/* Footer */

footer{
    background-color: black;
    bottom: 0;
}

footer .container {
    padding: 1.50em 0;
}

.line{
    height: 5px;
    background-color: #a2c4b3;
    z-index: 500;
}

.footer_name{
    font-family: 'DidotLTStd-Italic', 'Palatino Linotype', serif;
    font-weight: 300;
    font-style: normal;
    color: #a2c4b3;
    font-size: 1.25em;
}

.social a{
    color: #a2c4b3;
}

.social:hover{
    color: #fff;
}

.left_col{
    float: left;
}

.right_col{
    float: right;
}


/* MEDIA QUERIES */

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

    .big_img {
        height: 20em;
    }

    .gradient_bg{
        height: 18em;
    }

    .logo_descrip {
    color: white;
    font-size: .85em;
    letter-spacing: 4px;
    padding-left: 4px;
    margin-top: 1em;
    }

    .header img{
        width: 70%;
    }

    .title {
    color: white;
    text-align: center;
    vertical-align: middle; 
    margin: 0;
    padding: 0;
    font-family:'DidotLTStd-Roman', 'Palatino Linotype', serif;
    }

    .descrip{
        color: white;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-family: 'Proxima-Nova-ScOsf-Light', "Helvetica Neue", Helvetica, sans-serif;
    }

    .project .title{
        font-size: 3.0em;
        margin-bottom: 10px;
    }

    .project .descrip{
        font-size: .70em;
        padding-top: 0;
    }

    .project .title2{
        font-size: 3.00em;
        margin-bottom: 10px;
        letter-spacing: -2px;
        font-family:'DidotLTStd-Roman', 'Palatino Linotype', serif;
    }

    .project .descrip2{
        font-size: .70em;
        padding-top: 0;
    }

    .p_hero_title {
        font-size: 3em;
    }

    .p_hero_descrip {
        font-size: .75em;
        padding-top: .5em;
    }

    .p_brief {
        width: 90%;
        padding: 12% 0;
    }

    .p_brief.head{
        padding: 9% 0% 4% 0%;
    }

    .p_brief2{
        padding: 8% 0 0 0;
    }

    .p_brief h2 {
        font-size: 2.10em;
    }

    .p_brief p{
        font-size: .85em;
        padding-top: .85em;
    }

    .p_brief.about_p p {
        padding-top: 1.2em;
    }

    #links {
        width: 100%;
        font-size: .75em;
    }

    #projects .p_container{
        height: 17em;
        width: 100%;
    }

    .project figcaption { 
        padding-top: 7.50em; 
        pointer-events: none; 
    }

    .bg_image {
        background-color: #000;
        opacity: 0.5;
    }

    .projectmercari .bg_image{ 
        background: url(../img/mercari_hero.jpg) no-repeat; 
        background-position: 0% 100%;
        bottom: -40%;
        min-width: 100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
    }

    .project1 .bg_image{ 
        background: url(../img/grazed_hero2.jpg) no-repeat; 
        background-position: 0% 100%;
        bottom: -40%;
        min-width: 100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
    }

    .project2 .bg_image{ 
        background: url(../img/ikea_hero2.jpg) no-repeat; 
        background-position: 40% 0%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
    }

    .project3 .bg_image{ 
        background: url(../img/vitale_hero2.jpg) no-repeat; 
        background-position: 5% 50%;
        bottom: -65%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
    }

    .full{
        width: 100%;
        height: auto;
        padding: 0;
    }

    .container.full{
        height: auto;
    }

    .logos_grid .grid_item{
        width: 100%;
    }

    .logos_grid .grid_item {
        float: none;
    }

    .logo{
        position: fixed;
        z-index: 90;
        width: 50%;
        padding: 0;
        margin: 10px 0 0 10px;
        display: none;
    }

    .logo2{
        position: fixed;
        z-index: 90;
        width: 50%;
        padding: 0 0 0 10px;
        margin: 10px 0 0 15px;
    }

    .logomark {
        width: 55px;
        height: auto;
    }

    .sidebar-nav li {
        line-height: 2.75em;
        font-size: 2.15em;
    }

    .beacon video{
        display: none;
    }

    .beacon_vid_mobile img{
        max-width: 100%;
        height: auto;
    }

    .beacon_vid{
        display: none;
    }

    .beacon_vid_mobile {
        display: block;
        width: 100%;
        text-align: center;
    }

    .recall video{
        display: none;
    }

    .recall_vid_mobile img{
        max-width: 100%;
        height: auto;
    }

    .recall_vid{
        display: none;
    }

    .recall_vid_mobile {
        display: block;
        width: 100%;
        text-align: center;
    }

    .prev_next a{
        font-size: .80em;
    }

    .project {
        height: auto;
    }

   /* .about_me br {
        display: block;
    }*/

    .p_brief.about_me h2{
        font-size: 1.85em;
        line-height: 1em;
    }

    .p_brief.about_me{
        width: 90%;
    }

    .about_me h4 {
        font-size: 1em;
    }

    .about_pic img {
        width: 40%;
        height: auto;
    }

    .circle {
        width: 2.90em;
        height: 2.90em;
        margin-bottom: 1em;
        font-size: 2.2em;
        padding-top: 1.1em;
    }

    .metrics .big_img4{
        padding-bottom: 3em;
    }

    .p_brief.concept{
        padding: 12% 0% 6% 0%;
    }

    .logos_vid {
        padding-bottom: 12%;
    }

}

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) { 

    .about_pic img {
        width: 45%;
        height: auto;
    }

    .circle {
        width: 2.30em;
        height: 2.30em;
        margin-bottom: 1em;
        padding-top: .90em;
    }

    .three_words h5 {
        font-size: 14px;
    }

     .about_me br {
        display: block;
    }

    .p_brief.about_me h2{
        font-size: 1.85em;
        line-height: 1.20em;
    }

    .p_brief2{
        padding: 7% 0 0 0;
    }

    .w_grid.words {
        margin-top: 1em;
    }

    .metrics .big_img4{
        padding-bottom: 3em;
    }

    .p_brief h2 {
        font-size: 2em;
    }

    .p_brief {
        width: 90%;
        padding: 12% 0;
    }

    .p_brief.head{
        padding: 7% 0% 4% 0%;
    }

    .p_brief.concept{
        padding: 12% 0% 6% 0%;
    }

    .logo_descrip {
        font-size: .75em;
        letter-spacing: 2px;
    }

    .logos_vid {
        padding-bottom: 12%;
    }

}




/* FONTS */

@font-face {
    font-family: 'DidotLTStd-Headline';
    src: url('../fonts/DidotLTStd-Headline.eot');
    src: url('../fonts/DidotLTStd-Headline.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DidotLTStd-Roman';
    src: url('../fonts/DidotLTStd-Roman.eot');
    src: url('../fonts/DidotLTStd-Roman.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DidotLTStd-Italic';
    src: url('../fonts/DidotLTStd-Italic.eot');
    src: url('../fonts/DidotLTStd-Italic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Proxima-Nova-Alt-Light';
    src: url('../fonts/Proxima-Nova-Alt-Light.eot');
    src: url('../fonts/Proxima-Nova-Alt-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Proxima-Nova-Alt-Regular';
    src: url('../fonts/Proxima-Nova-Alt-Regular.eot');
    src: url('../fonts/Proxima-Nova-Alt-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Proxima-Nova-ScOsf-Light';
    src: url('../fonts/Proxima-Nova-ScOsf-Light.eot');
    src: url('../fonts/Proxima-Nova-ScOsf-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}