body {
  background-color: #1c1c1a;
  color: #a5a5ac;
  padding-top: 5.5em;
}

.brand-logo {
  margin-top: -0.4em;
  margin-right: 0.3em;
  height: 2.2em;
  width: 2.2em;
}

h1,
h2,
h3 {
  margin-top: 0px;
  margin-bottom: 10px;
}

.projects {
  margin: auto;
  width: 100%;
}

a:link,
a:active,
a:hover,
a:visited {
  color: #8e8b8c;
  text-decoration: none;
}

.projects {
  font-size: smaller;
}

.tile {
  width: 176px;
  min-height: 140px;
}

.tile img {
  width: 170px;
  height: 96px;
  float: left;
}

.tile p {
  width: 170px;
}

.logo {
  width: 30px;
  height: auto;
  padding: 6px;
}

.portfolio {
  width: 100%;
  display: block;
}

dt {
  width: 40%;
  float: left;
}

dd {
  width: 60%;
  float: left;
}

/*
 for blocks texts
 */
.tile.about {
  width: 348px;
  padding-left: 0.3em;
  padding-right: 0.3em;
}

.tile.about h2 {
  color: #d3d2d0;
}

.client-list .tile {
  width: 170px;
  min-height: 70px;
}

.client-list .tile p {
  min-height: 70px;
  background-color: rgb(47, 46, 43);
  padding-top: 12%;
  text-align: center;
  font-size: 1.2em !important;
}

.tile.agency p {
  background-color: rgb(59, 59, 56);
}
.tile.brand p {
  background-color: rgb(66, 66, 64);
}
.tile.other p {
  background-color: rgb(37, 37, 35);
}
.tile.post-production p {
  background-color: rgb(41, 41, 39);
}
.tile.film-production p {
  background-color: rgb(47, 47, 45);
}

/*
  some improvements for phones
 */
@media all and (max-width: 390px) {
  .tile {
    width: 100% !important;
    margin-bottom: 0.5em;
  }

  .tile img {
    width: 100%;
    height: auto;
  }

  .tile p {
    width: 100%;
  }

  .client-list .tile p {
    padding-top: 10%;
  }
}

.projects,
.projects .tile {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -ms-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
}

.projects {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  -ms-transition-property: height, width;
  -o-transition-property: height, width;
  transition-property: height, width;
}

.projects .tile {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  -ms-transition-property: -ms-transform, opacity;
  -o-transition-property: -o-transform, opacity;
  transition-property: transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.projects.no-transition,
.projects.no-transition .tile,
.projects.tile.no-transition {
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -ms-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
}

.projects-vimeo {
  margin-bottom: 44px;
}

.projects-vimeo .tile {
  min-height: initial;
  width: 170px;
  max-height: 96px;
}

.projects-vimeo .tile::after {
  box-sizing: border-box;
  content: '\25BA';
  color: white;
  font-size: 220%;
  text-align: center;
  line-height: 38px;
  /*
  width: 100%;
  height: 96px;
  */
  width: 65px;
  height: 40px;
  position: absolute;
  z-index: 1;
  top: calc(50% - 20px);
  left: calc(50% - 15px);
  background: rgba(23, 35, 34, 0.75);
  pointer-events: none;
  border-radius: 0.2em;
  cursor: pointer;
}

.projects-vimeo .tile:hover::after {
  background-color: rgb(255, 255, 255);
  color: rgb(140, 140, 140);
}

@media screen and (max-width: 390px) {
  .projects-vimeo .tile {
    min-height: 140px;
    width: 170px;
    max-height: initial;
  }

  .projects-vimeo .tile::after {
    box-sizing: border-box;
    content: '\25BA';
    color: white;
    font-size: 220%;
    text-align: center;
    line-height: 38px;
    /*
    width: calc(100% - 30px);
    height: 100%;
    */
    width: 65px;
    height: 40px;
    position: absolute;
    z-index: 1;
    top: calc(50% - 20px);
    left: calc(50% - 30px);
    background: rgba(23, 35, 34, 0.75);
    pointer-events: none;
  }
}

.projects-thumbs li {
  position: relative;
  float: left;
}

.projects-thumbs li::after {
  box-sizing: border-box;
  content: '\25BA';
  color: white;
  font-size: 220%;
  text-align: center;
  line-height: 90px;
  width: 100%;
  height: 96px;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

/*
  video player stuff
 */

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 0px;
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.image-wrapper,
.video-wrapper {
  /* padding-top: 16px; */
  padding-bottom: 16px;
}
.image-wrapper.pull-left,
.video-wrapper.pull-left {
  padding-right: 16px;
}
.image-wrapper.pull-right,
.video-wrapper.pull-right {
  padding-left: 16px;
}

img {
  width: 100%;
  height: auto;
}

.wrapper-30 {
  width: 30%;
}
.wrapper-40 {
  width: 40%;
}
.wrapper-50 {
  width: 50%;
}
.wrapper-60 {
  width: 60%;
}
.wrapper-70 {
  width: 70%;
}

/*
  navbar colors
*/

.navbar-default {
  background-color: #151415;
  border-color: #272626;
}
.navbar-default .navbar-brand {
  color: #ecf0f1;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #a5a587;
}
.navbar-default .navbar-nav > li > a {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #a5a587;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #a5a587;
  background-color: #272626;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #a5a587;
  background-color: #646b69;
}
.navbar-default .navbar-nav > .dropdown > a .caret {
  border-top-color: #ecf0f1;
  border-bottom-color: #ecf0f1;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
  border-top-color: #a5a587;
  border-bottom-color: #a5a587;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
  border-top-color: #a5a587;
  border-bottom-color: #a5a587;
}
.navbar-default .navbar-toggle {
  border-color: #646b69;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #646b69;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #ecf0f1;
}

/* @media (max-width: 767px) { */
@media (max-width: 540px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #a5a587;
  }
}

/* @media (max-width: 767px) { */
@media (max-width: 540px) {
  .video-wrapper,
  .image-wrapper {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .portfolio {
    min-height: 3em;
  }
}

.clearfloats {
  clear: both;
}

.article-editor .article-text {
  height: 600px;
}