/* Logo for dark layouts */

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

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

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

.title-info h1 {
  font-weight: 900;
  color: #fe374c;
  font-family: "calluna", Georgia, Times, "Times New Roman", serif;
  }

.ed-note {
  color: #ccc;
  }

.header-color {
  background-color: #2b2c29;
  }

article.main span.drop-cap {
  margin-top: 0;
  margin-left: 0px;
  margin-right: 5px;
  font-size: 4em;
  color: #fe374c;
  font-family: "calluna", Georgia, Times, "Times New Roman", serif;
  }



/* Styles for only SMALL screens */

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

.title-info:after {
  content: "";
  display: block;
  height: 20em;
  background: #ffffbd url("/images/articles/disruption/disruption-arms-bg.png") no-repeat center center;
  background-size: contain;
  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: #66664c;
  }

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

.full-feature-outer {
  background: #ffffbd;
  }

.full-feature-wrapper {
 	background: transparent url("/images/articles/disruption/disruption-arms-bg.png") no-repeat center 340px;
  position: relative;
  background-size: contain;
  margin-bottom: 270px;
  }

.masthead-wrapper {
  background: transparent;
  }

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


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


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

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

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

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

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

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

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

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

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

.full-feature-wrapper {
  min-height: 650px;
  }

}

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

.full-feature-wrapper {
  min-height: 830px;
  }

}