/* fonts */

@font-face {
  font-family: 'markbold';
  src: url('../../fonts/markbold-webfont.eot');
  src: url('../../fonts/markbold-webfont.eot?#iefix') format('embedded-opentype'), url('../../fonts/markbold-webfont.woff2') format('woff2'), url('../../fonts/markbold-webfont.woff') format('woff'), url('../../fonts/markbold-webfont.ttf') format('truetype'), url('../../fonts/markbold-webfont.svg#markbold') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'markheavy';
  src: url('../../markheavy-webfont.eot');
  src: url('../../markheavy-webfont.eot?#iefix') format('embedded-opentype'), url('../../markheavy-webfont.woff2') format('woff2'), url('markheavy-webfont.woff') format('woff'), url('markheavy-webfont.ttf') format('truetype'), url('markheavy-webfont.svg#markheavy') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'marklight';
  src: url('../../fonts/marklight-webfont.eot');
  src: url('../../fonts/marklight-webfont.eot?#iefix') format('embedded-opentype'), url('../../fonts/marklight-webfont.woff2') format('woff2'), url('../../fonts/marklight-webfont.woff') format('woff'), url('../../fonts/marklight-webfont.ttf') format('truetype'), url('../../fonts/marklight-webfont.svg#marklight') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'markmedium';
  src: url('../../fonts/markmedium-webfont.eot');
  src: url('../../fonts/markmedium-webfont.eot?#iefix') format('embedded-opentype'), url('../../fonts/markmedium-webfont.woff2') format('woff2'), url('../../fonts/markmedium-webfont.woff') format('woff'), url('../../fonts/markmedium-webfont.ttf') format('truetype'), url('../../fonts/markmedium-webfont.svg#markmedium') format('svg'); font-weight: normal;
  font-style: normal;
}

/* global box-sizing */
*,
*:after,
*:before {
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  -webkit-font-smoothing:antialiased;
  font-smoothing:antialiased;
  /*text-rendering:optimizeLegibility;*/
}
/* html element 62.5% font-size for REM use */

html {
  font-size:62.5%;
}

/* clear */
.clear:before,
.clear:after {
    content:' ';
    display:table;
}

.clear:after {
    clear:both;
}
.clear {
    *zoom:1;
}
img {
  max-width:100%;
  vertical-align:bottom;
}

a {
  color:#444;
  text-decoration:none;
}
a:hover {
  color:#444;
}
a:focus {
  outline:0;
}
a:hover,
a:active {
  outline:0;
}
input:focus {
  outline:0;
  border:1px solid #04A4CC;
}

.rte, 
.rte p { 
  line-height: 1.4;
}

.rte a { 
    border-bottom: 1px solid #ccc; 
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'markmedium', Helvetica, Arial;
  font-weight: normal;
  margin: 0 0 1em;
}

h1 {
  font-size: 60px;
}

h2 {
  font-size: 24px;
}

@media (max-width: 640px) { 
  h2 { 
    font-size: 20px; 
  }
}

h4 {
  font-family: 'markbold';
  font-size: 11px;
  color: #a2a2a2;
  text-transform: uppercase;
}

p {
  line-height: 1.3;
}

/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/

body {
  background: #fff;
  font-family: 'marklight', Helvetica, Arial;
  color: #333;
  font-size: 15px;
}

/* NEW marianne edits */

.justify {
    text-align: justify;
    font-size: 0;
}

.justify > * {
    display: inline-block;
    text-align: left;
    vertical-align: top;
    font-size: 15px;
}

.justify:after {
    content:'';
    display: inline-block;
    width: 100%;
    height: 0;
}

.no-cssanimations .justify {
    font-size: 0.05px;
}

.table,
.table-cell {
  height: 100%;
  vertical-align: middle;
}

.table {
  display: table;
}

/* .table-cell {
  display: table-cell;
} */


/* wrapper */
.wrapper {
  max-width: 1920px;
  width:96%;
  margin:0 auto;
  position:relative;
}

.container {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 40px;
}

@media (max-width: 640px) { 
  .container { 
    padding: 0 20px;
  }
}

/* header */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0; 
  width: 100%; 
  background: #fff; 
  z-index: 1000;
  padding: 30px 40px; /* used to be 30px 40px 10px; */ 
}

@media (max-width: 640px) { 
  .header { 
    padding: 25px 20px; /* used to be 30px 20px 10px; */ 
  }
}

.header .container {
    margin: 0;
    padding: 0;
}

.main-nav { 
  position: fixed;
  top: 0; 
  left: -280px; 
  bottom: 0; 
  z-index: 1050;
  
  background: #888;
  background: rgba(0,0,0,0.5);
  width: auto;
  
  font-size: 18px; 
  padding: 60px 60px 5px 40px;
  
  transition: left 0.25s ease-out;
  transform: translateZ(0);

  font-family: 'markmedium', helvetica, arial; 
}

@media (max-width: 640px) { 
  .main-nav { 
    padding: 50px 20px 20px; 
  }
}

@media (max-width: 480px) { 
  .main-nav { 
    font-size: 14px;
  }
}

.main-nav .close-x {
  position: absolute;
  top: 20px;
  right: 22px; 
  display: inline-block;
  width: 26px;
  height: 20px;
  color: #fff;
  cursor: pointer;
}

@media (max-width: 640px) { 
  .main-nav .close-x { 
    top: 15px;
  }
}

.main-nav .close-x:before { 
  content: '×';
  font-size: 30px;
}

.main-nav.open { 
  left: 0; 
}

.main-nav a {
  display: inline-block;
  color: #fff;
  border-bottom: 2px solid transparent;
}

.main-nav a:active,
.main-nav a:focus, 
.touchevents .main-nav a:hover {
  border-bottom: 2px solid #fff;
}

.main-nav .no-link a {
  color: #333;
  cursor: default;
}

.main-nav .current-menu-item a { 
  border-bottom: 2px solid #fff;
}

.main-nav ul {
  list-style: none;
}

.main-nav li {
  margin: 10px 0;
}

@media (max-width: 640px) { 
  .main-nav li { 
    margin: 10px 0 5px; 
  }
}

.logo {
  display: inline-block;
  color: #333;
  font-size: 20px;
  transition: color 0.25s ease-in;
  margin: 0; 
  font-weight: normal; 
}

@media (max-width: 480px) { 
  .logo { 
    font-size: 16px;
  }
}

.logo-container { 
  display: inline-block; 
  position: relative; 
  z-index: 2;
}

.logo-container:hover .logo { 
  color: #000; 
}

.logo .fa-bars { 
  margin-right: 5px; 
  font-size: 19px;
}

@media (max-width: 480px) { 
  .logo .fa-bars { 
    font-size: 16px;
  }
}

.title-meta { 
  font-size: 20px;
  color: #888; 
  font-family: 'markmedium', helvetica, sans-serif;
  font-weight: normal; 
  display: inline-block; 
}

@media (max-width: 480px) { 
  .title-meta { 
    font-size: 16px;
  }
}

.title-meta a { 
  color: #888; 
  transition: color 0.25s ease-in;
}

.title-meta a:hover { 
  color: #333; 
}

i.desktop-title { 
  font-style: normal; 
}

@media (max-width: 860px) { 
  i.desktop-title { 
    /*display: none; */
  }
}

.bar-fixed { 
  background: transparent; 
  position: fixed; 
  top: 0; 
  left: 0; 
  bottom: 0; 
  width: 250px; 
  z-index: 1049;
}

/* homepage, behind the scenes carousel */

/* TODO: fix:; */
.flex-control-nav.flex-control-paging {
	opacity: 0.5; 
  /*transition: all 0.1s ease-in;*/
}

.flex-control-nav.moving { 

}
/* end TODO */

.flexslider { 
  /*background: url(../../img/ajax-loader.gif) center center no-repeat transparent;*/
}

.flexslider.loaded { 
  background: transparent; 
}

.flexslider.loaded .preloaded-img { 
  display: none; 
}

.flexslider li { 
  text-align: center; 
}

.flexslider ul {
    /*transition: opacity 0.25s ease-in;*/
    /* TODO transition */
    opacity: 0;
}

.flexslider.loaded ul {
    opacity: 1;
}

.flex-direction-nav {
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 50px; /* used to be 40 */ 
  z-index: 10;

  display: none !important; 
}

@media (max-width: 860px) { 
  .flex-direction-nav { 
    display: none;  /* seriously??? */
  }
}

/* overrides */
.flex-direction-nav a {
  position: absolute;
  top: 0;
  opacity: 1;
  color: #fff; /* fake transparent */

  text-decoration: none;
  display: inline-block;
  width: 20px;
  height: 20px;
}

.flex-direction-nav a:after { 
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  position: absolute; 
  overflow: hidden;
  cursor: pointer;
  transform: rotate(45deg);
  text-indent: -9999em; 
  border: 5px solid #333;
  transition: border 0.15s ease-in;
}


.flex-direction-nav a.flex-prev {
  float: left;
}

.flex-direction-nav a.flex-prev:after {
    border-top: 0; 
    border-right: 0; 
}

.flex-direction-nav a.flex-next {
  float: right;
}

.flex-direction-nav a.flex-next:after {
  border-bottom: 0; 
  border-left: 0; 
}

.flex-direction-nav a:hover:after { 
  border-color: #888;
}

.slides {
  padding: 85px 0;
}

.slides img {
  display: block;
  /*visibility: hidden;*/
  margin-left: auto;
  margin-right: auto;
  height: auto;
  width: auto;
  max-height: 100%;
  max-width: 100%;
}

.slide-container {
  text-align: center;
  font-size: 0; 
}

.slides .img-container {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;

  display: inline-block;
  position: relative;

  max-width: 100%;
  transition: max-width 0.25s ease-in, background-position 0.25s ease-in;
  /* TODO: transition mixin */
}

.slides .prev,
.slides .next {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 1;
  cursor: pointer;
}

.slides .prev {
  left: 0;
  cursor: url(../../img/icons/cursor-left-lg.png), auto;
}

.slides .next {
  right: 0;
  cursor: url(../../img/icons/cursor-right-lg.png), auto;
}

.slides .toggle-open,
.slides .toggle-close {
  position: absolute;
  top: 0;
  right: -30px;
  font-size: 30px;
  cursor: pointer;
  z-index: 2;
  color: #333;
  line-height: 0.4; /* ? */
  font-family: 'markmedium', Helvetica, Arial;
}

.slides .toggle-open {
  top: 0;
  opacity: 1;
  transition: opacity 0.25s ease-in;
}

.slides .caption {
  display: inline-block;
  position: relative;
  width: 1px;
  height: 1px;
  overflow: hidden;
  vertical-align: top;
  padding: 0;
  transition: width 0.25s ease-in, padding 0.25s ease-in;
  /* TODO: transition mixin */
  font-family: 'marklight', arial, Helvetica, sans-serif;
  font-size: 15px; 

  text-align: left;
}

.slides .caption-holder p { 
  margin-bottom: 20px;
}

.slides .caption-inner {
  opacity: 0;
  transition: opacity 0.25s ease-in;
  /* TODO: transition mixin */
}

.pos-rel { 
  position: relative; 
}

/* expanded state! */

.slides .expanded .img-container {
  max-width: 70%;
}

.slides .expanded .caption {
  width: 28%;
  height: auto;
  height: 100%; 
  overflow: visible;
  padding: 0 0 100px 30px;
}

@media (max-width: 860px) { 
  .slides .img-container, 
  .slides .caption, 
  .slides .expanded .img-container, 
  .slides .expanded .caption { 
    margin-bottom: 30px; 
    transition: none;
    max-width: 100%;
    width: 100%;
    height: auto; 
    padding: 0; 
  }

  .slides .caption-inner,
  .slides .expanded .caption-inner { 
    opacity: 1; 
    transition: none;
  }

  .toggle-open, 
  .toggle-close { 
    display: none; 
  }

  .slide-container, 
  .slides .img-container { 
    height: auto !important; 
  }

  .slides .caption { 
    padding-top: 10px;
    text-align: left; 
  }

  /* overriding above... ugh*/ 
  /*.slides .caption, 
  .home .slides .caption-holder > * { 
    display: none; 
  }
  .home .slides .caption-holder > .btn { 
    display: block; 
  }

  .home .slides .caption { 
    display: block; 
  }*/

  .flex-control-nav { 
    bottom: inherit; 
  }

  .flex-control-nav li {
    margin: 0 3px;
  }
  .flex-control-paging li a {
    width: 6px;
    height: 6px;
  }
}

.slides .toggle-open.closed {
  opacity: 0;
}

.slides .caption-inner.visible {
  opacity: 1;
}

/* caption btn styles */

.btn, 
.pagination a {
  display: block;
  border: 1px solid #a2a2a2;
  padding: 25px;
  text-align: center;
  margin-bottom: 20px;
  /* h4 styles: TODO: refactor? */
  font-family: 'markbold';
  font-size: 11px;
  color: #a2a2a2;
  text-transform: uppercase;

  transition: color 0.25s ease-in, background-color 0.25s ease-in;
}

.grid-pos-rel .btn, 
.grid-pos-rel h4 { 
  color: #fff; 
  border-color: #fff;
}

/*.grid-pos-rel { 
  cursor: default; 
}

.grid-pos-rel .btn { 
  cursor: pointer; 
}*/

.grid-pos-rel .btn:hover { 
  background: rgba(255,255,255,0.25);
}

@media (max-width: 860px) { 
  .grid-pos-rel { 
    cursor: pointer; 
  }
}

.pagination { 
  text-align: center; 
}

.pagination a { 
  display: inline-block; 
  width: auto !important; 
}

/*************************************************/
/* Projects */

.preloaded-img { 
  text-align: center;
  opacity: 0.5;
  min-height: 73vh;
}

.projects-outer {
    padding: 85px 0 40px;
}

.grid-view .justify > * {
    width: 32.5%;
    margin-bottom: 1.25%;
}

/*homepage exception*/ 
#HomeGridPostsOuter { 
  display: flex; 
  flex-flow: row wrap; 
  justify-content: space-between;
}

#HomeGridPostsOuter .col { 
  width: 49.375%; 
  margin-bottom: 1.25%;
}

#HomeGridPostsOuter .grid-post { 
  margin-bottom: 2.5%;
}

@media (max-width: 860px) { 
  #HomeGridPostsOuter .col { 
    width: 100%; 
  }

  #HomeGridPostsOuter .grid-post { 
    margin-bottom: 40px; 
  }
}

#HomeGridPostsOuter .gutter-element { 
  width: 1.25%;
  height: 0; 
}

.grid-view .grid-post-gap { 
  display: inline-block; 
  height: 0; 
  overflow: hidden; 
}

.grid-post img {
    width: 100%;
}

.grid-container > a { 
  display: block; 
  position: relative; 
}

.grid-container .overlay { 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  z-index: 2; 
  
  background: rgba(0,0,0,0.5);
  color: #fff; 
  padding: 20px; 
  font-size: 26px; 
  
  opacity: 0; 
  transition: opacity 0.15s ease-in;

  font-family: 'markmedium', helvetica, arial, sans-serif; 
  overflow: hidden; 
}

.grid-container .overlay h3 { 
  font-size: 32px; 
  line-height: 36px; 
  margin-bottom: 12px; 
}

.grid-container .overlay .long-title, 
.grid-container .overlay.long-title { 
  display: block; 
  font-size: 16px;
  font-family: 'marklight', helvetica, arial, sans-serif; 
}

.grid-container > a:hover .overlay, 
.grid-container > .pos-rel:hover .overlay { 
  opacity: 1; 
}

.grid-view .grid-description {
    display: none;
}

.list-view { 
  max-width: 980px; 
  margin: auto; 
}

.list-view a,
.list-view .grid-description {
    display: inline-block;
    width: 48%;
}

.list-view .grid-description.grid-blog h2 { 
  margin-bottom: 10px; 
}

.list-view h2 a { 
    width: 100%;
    line-height: 1.1;
}

.list-view .grid-description {
    padding-left: 40px;
    vertical-align: top;
}

/* responsive styles for both list view and grid are the same after 860px */ 

@media (max-width: 860px) { 
    .grid-view .justify > * {
        width: 100%;
        margin-bottom: 40px; 
    }

    .grid-container > a, 
    .grid-view .grid-description { 
        display: inline-block; 
        width: 48%
    }

    .grid-container .overlay { 
        display: none; 
    }

    /* replacing .list-view with .grid-view at front of these */ 
    .grid-view .grid-description.grid-blog h2 { 
      margin-bottom: 10px; 
    }

    .grid-view h2 a { 
        width: 100%;
        line-height: 1.1; }

    .grid-view .grid-description {
        padding-left: 40px;
        vertical-align: top;
    }

    .grid-view .date { 
        line-height: 1.4;
        letter-spacing: 0.1mm;
    }

    .grid-view .grid-post {
        width: 100%; 
        margin-bottom: 40px;
    }

    .grid-view .excerpt-outer {
        font-family: 'marklight', helvetica, arial, sans-serif; 
        margin-bottom: 30px;
    }

    .grid-view .instagram-outer .grid-post { 
      width: 48%; 
    }

    .instagram-outer .grid-container > a { 
      width: 100%; 
    }
}

@media (max-width: 767px) { /* smaller than ipad portrait */ 
  .grid-view a,
  .grid-view .grid-description, 
  .list-view a,
  .list-view .grid-description {
    width: 100%;
  }

  .grid-view .grid-description, 
  .list-view .grid-description {
    padding: 20px 0 0 0;
  }
}

@media (max-width: 640px) { 
  .grid-view .instagram-outer .grid-post { 
    width: 100%; 
  }
}

/* more list-view specific things */ 

.list-view .date { 
    line-height: 1.4;
    letter-spacing: 0.1mm;
}

.list-view .grid-post {
    width: 100%; 
    margin-bottom: 40px;
}

.list-view .excerpt-outer {
    font-family: 'marklight', helvetica, arial, sans-serif; 
    margin-bottom: 30px;
}

.view-toggle {
    position: fixed; 
    top: 0; 
    left: 250px;
    right: 0; 
    height: 85px; 
    z-index: 1001;
    text-align: right;
    color: #ccc;
    padding: 35px 40px 0 0;
    opacity: 0; 
    transition: opacity 0.15s ease-in; 
}

@media (max-width: 960px) { 
  .view-toggle { 
    display: none; 
  }
}

.view-toggle.visible { 
  opacity: 1; 
}

.view-toggle span {
    padding: 2px 0;
    margin: 0 0 0 5px;
    cursor: pointer;
}

.view-toggle .toggle-list-view {
    font-size: 17px;
}

.view-toggle .active {
    color: #333;
}

/* press */ 

.press .grid-container .overlay { 
  background: rgba(0,0,0,0.8);
}

.press .grid-view .justify > * {
    width: 32.5%;
    margin-bottom: 1.25%; 
}

.press .grid-container > a { 
    display: block; 
    width: 100%
}

.press .grid-container .overlay { 
    display: block; 
}

@media (max-width: 767px) { 
  .press .grid-view .justify > * { 
    width: 48%; 
  }
}

@media (max-width: 640px) { 
  .press .grid-view .justify > * { 
    width: 100%; 
  }
}

/* individual post page */ 

.story-full { 
  padding: 85px 0; 
}

.story-full .story-container { 
  max-width: 60%; 
  margin: auto; 
}

@media (max-width: 860px) { 
  .story-full .story-container { 
    max-width: 100%; 
  }
}

.story-full .slides { 
  /* height: 100%; */ 
  padding: 0; 
}

.story-full .flexslider { 
  margin-bottom: 60px; /* used to be 85px */ 
}

@media (max-width: 640px) { 
  .story-full .flexslider { 
    margin-bottom: 0; 
  }
}

.story-content { 
  max-width: 550px; 
  margin: auto; 
  line-height: 1.4; 
  /*letter-spacing: 0.1mm;*/
}

@media (max-width: 860px) { 
  .story-content { 
    max-width: 100%; 
  }
}

.single-post .story-content { 
  max-width: 100%;
}

.story-content h1 { 
  line-height: 1.1;
  margin-bottom: 30px; 
  font-size: 40px; /* shrunken from 60px */ 
  letter-spacing: 0;
}

@media (max-width: 640px) { 
  .story-content h1 { 
    font-size: 22px;
  }
}

.story-content h3 { 
  font-size: 24px; 
  line-height: 1.2;
  padding-bottom: 30px; 
  margin-bottom: 30px; 
  border-bottom: 1px solid black;
}

.story-content a { 
  color: #888;
}

/* individual post page */ 

.date { 
  display: block; 
  color: #888; 
  font-size: 12px;
  margin-bottom: 20px;
  font-weight: 600;
}

.comments, 
.comments label { 
  vertical-align: top; 
  display: block;
  margin-bottom: 5px;
}

img.avatar { 
  display: none; 
}

.comment-author { 
  margin-bottom: 5px; 
}

.comments ul { 
  list-style: none; 
}

.comment-meta { 
  font-size: 13px; 
  margin-bottom: 5px; 
}

textarea { 
  max-width: 100%; 
}

/*************************************************/
/* Secondary Pages */

.secondary-outer { 
  padding: 88px 0 40px; /* used to be 85px */ 
}

.secondary-outer h1 { 
  margin-bottom: 20px; 
}

.secondary-outer .row { 
  margin-bottom: 10px; 
}

.left-column,
.right-column { 
  width: 48%;
}

.gray { 
    color: #a2a2a2;
    font-family: 'markmedium', arial, helvetica, sans-serif;
    font-size: 15px;
    margin-bottom: 60px;
}

/*************************************************/
/* about page */ 

/*.about-outer .flex-control-paging { 
  display: none; 
}

@media (max-width: 860px) { 
  .about-outer .flex-control-paging { 
    display: block; 
  }
}*/

.about-outer .left-column { 
  width: 66%; 
}

.about-outer .left-column p { 
  font-size: 15px; 
  padding: 0 80px; 
}

.about-outer .right-column { 
  width: 30%; 
  text-align: left; 
}

@media (max-width: 860px) { 
  .about-outer .left-column, 
  .about-outer .right-column { 
    width: 100%; 
    text-align: left; 
  }

  .about-outer .left-column p {
    padding: 0; 
  }
}

.about-outer .slides { 
  padding: 0; 
  font-family: 'marklight', arial, Helvetica, sans-serif;
  font-size: 13px;
}

.about-outer .slides img { 
  visibility: visible; 
  margin-bottom: 40px; /* used to be 15px */ 
}

.about-outer .slides .table-cell { 
  vertical-align: top; 
}

.about-outer .slides .table-cell, 
.about-outer .slides .slide-container, 
.about-outer .slides .img-container { 
  /*max-height: 500px; */
}

.about-outer .flexslider { 
  position: relative;
}

.about-outer .flex-nav-prev, 
.about-outer .flex-nav-next { 
  position: relative;
  display: inline-block; 
}

.about-outer .flex-direction-nav a { 
  text-indent: 0;
}

.about-outer .flex-nav-prev { 
}

.about-outer .flex-nav-next { 
  float: right; 
}

.about-outer .flex-direction-nav {
  position: absolute;
  bottom: inherit;
  top: 100%; 
  right: 0;
  /*width: 40px; /* used to be 80px */
  margin-top: 15px; 
}

/*************************************************/
/* contact */ 

.contact-outer .right-column { 
  border-top: 2px solid black;
  padding-top: 20px; 
  font-size: 15px; 
  /*text-align: right; */
}

.contact-outer .right-column h4, 
.contact-outer .ib { 
  display: inline-block; 
  vertical-align: top; 
  font-size: 15px; 
}

.contact-outer .right-column h4 { 
  width: 150px; 
}

.contact-outer .left-column {
  display: none; 
}

@media (max-width: 1024px) { 
  .contact-outer .right-column { 
    width: 100%; 
    max-width: 640px;
  }
}

@media (max-width: 768px) { 
  .contact-outer .right-column { 
    width: 100%; 
    max-width: 100%;
  }

  .contact-outer .right-column h4 { 
    margin-bottom: 5px; 
  }

  .contact-outer .right-column .ib { 
    display: block; 
    margin-bottom: 20px;
  }
}

/**************************************************/ 
/* related posts */ 

.related-posts { 
  margin-top: 60px; 
  padding-top: 20px; 
  border-top: 1px solid #ccc; 
}

.related-posts .grid-post { 
  width: 30%;
}

.related-posts .grid-container .overlay {
  padding: 10px;
  font-size: 15px;
}

.related-posts .grid-container > a {
  width: 100%;
}

@media (max-width: 960px) { 
  .related-posts .grid-post { 
    width: 30%; 
  }

  .related-posts .grid-container .overlay {
    display: block; 
  }
}

@media (max-width: 640px) { 
  .related-posts .grid-container > a {
    width: 100%;
  }

  .related-posts .grid-post { 
    width: 100%; 
    margin-bottom: 20px; 
  }
}

/*******************************************************/ 
/* Gray Mailchimp Bar **********************************/ 

#EmailSignupOuter { 
  background: #e8e8e8; 
  background: rgba(0,0,0,0.15);
  position: fixed; 
  z-index: 1; 
  top: 0; 
  left: 0; 
  right: 0; 
  min-height: 88px; 
  font-size: 13px; 
  transition: transform 0.15s ease-out;
  display: table; 
  width: 100%; 
  transform: translate(0,-100%);
  text-align: right;
}

@media (max-width: 767px) { 
  #EmailSignupOuter { 
    display: none;

    /*background: rgba(0,0,0,0.3); 
    text-align: left; */
  }
}

#EmailSignupOuter.visible { 
  transform: translate(0,0);
}

#EmailSignupOuter .container { 
  padding: 30px 80px 20px 240px;
  display: table-cell;
  vertical-align: middle;
  line-height: 1.3;
}

#EmailSignupOuter .label-newsletter-signup { 
  display: inline-block; 
  font-family: 'markmedium', helvetica, sans-serif;
  margin-bottom: 10px; 
}

#EmailSignupOuter .newsletter-signup { 
  font-family: 'marklight', helvetica, sans-serif;
  border: 0; 
  background: white;
  padding: 5px; 
  font-size: 13px; 
  margin-right: 10px; 
  margin-bottom: 10px; 
}

#EmailSignupOuter .newsletter-submit { 
  border: 0; 
  padding: 5px 10px; 
  background: black; 
  color: white; 
  font-family: 'markmedium', helvetica, sans-serif;
  font-size: 13px; 
  margin-bottom: 10px; 
}

#MCResponse { 
  font-family: 'markmedium', helvetica, sans-serif;
  margin-bottom: 10px; 
  display: none; 
}

#MCSignup { 
  position: relative; 
}

#EmailSignupOuter .close { 
  position: absolute; 
  cursor: pointer; 
  top: 50%; 
  right: 40px; 
  font-size: 30px; 
  transform: translate(0,-50%);
}

@media (max-width: 640px) { 
  #EmailSignupOuter { 
    background: rgba(0,0,0,0.3); 
    text-align: left; 
  }

  #EmailSignupOuter .container { 
    padding: 60px 20px 20px;
  }

  #EmailSignupOuter .close { 
    top: 20px; 
    right: 20px;
  }
}

/*****************************************************/ 
/* new fix for slideshows? */ 

.img-container .table { 
	margin: auto;
}

.img-container .table-cell {  
  vertical-align: middle; 
}

.img-container .pos-rel { 
  position: relative; 
  display: inline-block; 
  /* height: 100%; */
}

ol {
	display: block;
}

/* FIL EDITS */
@media (max-width: 640px) { 
  article.post #attachments img {
    max-width:calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
  }
}