/* Logo for dark layouts */

.logo-fill-front {
  fill: #222;
  }

.logo-fill-back {
  fill: #ccc;
}

.tag-line, .explanation {
  color: #999;
  }

.title-info h1 {
  font-weight: 900;
  color: #9db2cb;
  font-family: "jaf-facitweb","Lucida Grande","Lucida Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  }

.ed-note {
  color: #ccc;
  }

.header-color {
  background-color: #594357;
  }

article.main span.drop-cap {
  margin-top: 0;
  margin-left: 0px;
  margin-right: 5px;
  font-size: 4em;
  color: #9db2cb;
  font-family: "jaf-facitweb","Lucida Grande","Lucida Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  }



/* Styles for only SMALL screens */

@media screen and (max-width: 50em) {

.title-info:after {
  content: "";
  display: block;
  height: 20em;
  background: #eed0b2 url("/images/articles/making-remote-teams-work/making-remote-teams-work.jpg") no-repeat center bottom;
  background-size: cover;
  margin-left: 0;
  margin-right:0;
  }

article.main {
  padding-top: 20px;
  }
}


/* Styles for only BIG screens */

@media screen and (min-width: 50em) {

.logo-fill-front {
  fill: #594357;
  }

.logo-fill-back {
  fill: rgba(0, 0, 0, .2);
  }

.icon-editorially-logo {
  fill: #fff;
  }

.tag-line, .explanation {
  color: #b4998b;
  }

.full-feature-outer {
  background: #eed0b2 url("/images/articles/making-remote-teams-work/making-remote-teams-work-bg.jpg") repeat;
  }

.full-feature-wrapper {
 	background: transparent url("/images/articles/making-remote-teams-work/making-remote-teams-work.jpg") no-repeat center top;
  min-height: 806px;
  position: relative;
  margin-bottom: 250px;
  }

.masthead-wrapper {
  background: transparent;
  }

.banner {
  border-bottom-color: #f5e3d1;
  }


.nav-main>li a, .nav-main li.nav-sub a, .nav-sub:after {
  color: #fff;
  }


.nav-main>li a:hover, .nav-main>li a:active {
  border-color: #fff;
  color: #594357;
  }

.nav-main li.nav-sub a:hover {
 color: #594357;
}

.title-info {
  margin-top: 5px;
  text-align: center;
}

.title-info .meta-data ul li {
  color: #b4998b;
  }

.title-info h1 {
  font-size: 3.5em;
  color: #fff;
  margin-top: 10px;
  margin-bottom: 0;
  line-height: 1;
  }

.header-color {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  bottom: -237px;
  }

article.main {
  padding-top: 80px;
  }

.media-vertical {
  margin-top: 86px;
  }

article.main span.drop-cap {
  margin-top: -8px;
  margin-left: -10px;
  margin-right: 5px;
  font-size: 7em;
  }
}

@media screen and (min-width: 75em) {

.title-info h1 {
  font-size: 4.6em;
}

}