/*
Project Name: Research DNA Article
Author: Boston University Interactive Design
Website: http://www.bu.edu/interactive-design/
Version: 1.0.0
Description: Styles for the DNA article based off Responsive Static
Template: responsive-framework
*/
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 300;
  src: url(http://fonts.gstatic.com/s/opensanscondensed/v10/gk5FxslNkTTHtojXrkp-xMmDra0ONnO3FPH--kzkC5zr7w4p9aSvGirXi6XmeXNA.woff2) format("woff2"), url(http://fonts.gstatic.com/s/opensanscondensed/v10/gk5FxslNkTTHtojXrkp-xGAzD5WKQVN4wSyA0MYYi4rr7w4p9aSvGirXi6XmeXNA.woff) format("woff");
}
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 700;
  src: url(http://fonts.gstatic.com/s/opensanscondensed/v10/gk5FxslNkTTHtojXrkp-xIgEy7irt_A5K-aDq9kG7DHr7w4p9aSvGirXi6XmeXNA.woff2) format("woff2"), url(http://fonts.gstatic.com/s/opensanscondensed/v10/gk5FxslNkTTHtojXrkp-xM6Eyu0BCqAfob_z3hhzRFzr7w4p9aSvGirXi6XmeXNA.woff) format("woff");
}
/*||||||||||||||||||||||||||||||||

Functions

||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||

Mixins

||||||||||||||||||||||||||||||||||*/
#dna-1:after {
  content: "";
  display: table;
  clear: both;
}

.dna, .dna-pullquote-quote {
  font-family: "Economica", "Open Sans Condensed", "Oswald", "proxima-nova-extra-condensed", "BentonComp", sans-serif;
  font-family: "Open Sans Condensed", "Oswald", "proxima-nova-extra-condensed", "BentonComp", sans-serif;
  color: #fff;
  letter-spacing: .06em;
  font-weight: 300;
  text-transform: uppercase;
  line-height: 1;
  transform: scale(1, 1.15);
}

.dek,
.byline, .dna-pullquote-quote {
  color: #000;
  background-color: #f7ff77;
  box-shadow: 5px 0 0 #f7ff77, -5px 0 0 #f7ff77;
  -webkit-box-decoration-break: clone;
  -ms-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
  line-height: 1.45;
  font-size: 18px;
  letter-spacing: .05em;
}
@media screen and (min-width: 768px) {
  .dek,
  .byline, .dna-pullquote-quote {
    font-size: 22px;
  }
}

/*||||||||||||||||||||||||||||||||

Animations

||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||

Stylin'

||||||||||||||||||||||||||||||||||*/
.single-editorialarticle #page_wrapper .container {
  /*max-width: 100%;
  padding: 0;*/
}

#page_wrapper {
 /* padding-top: 0;*/
}

.bu-sharing,
.publish-details,
.topic-link-list,
.comments-area,
#related-stories {
  /*width: 100%;
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;*/
}

.single-editorialarticle #page-title {
  display: none;
}

.single-editorialarticle article[role=main] li {
  font-size: 18px;
}

header[role="banner"] {
  /*position: relative;
  z-index: 10;*/
}

article header {
  /*display: none;*/
}

.dna-headline {
  position: relative;
  z-index: 100;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding-top: 56vw;
}
@media screen and (min-width: 500px) {
  .dna-headline {
    padding-top: 0;
    text-align: left;
    margin: -1em auto 1em;
  }
}
@media screen and (min-width: 768px) {
  .dna-headline {
    left: -3vh;
    max-width: 728px;
  }
}
@media screen and (min-width: 992px) {
  .dna-headline {
    max-width: 970px;
  }

  .dna-headline h1 {
    font-size: 100px;
  }
}
@media screen and (min-width: 1200px) {
  .dna-headline {
    max-width: 1170px;
  }

  .dna-headline h1 {
    font-size: 200px;
  }
}
.dna-headline h1, .dna-headline h2, .dna-headline h3 {
  font-family: inherit;
}

.dna-subhead {
  width: 100%;
  max-width: 590px;
  z-index: 100;
}
@media screen and (min-width: 768px) {
  .dna-subhead {
    position: absolute;
    top: 20vh;
    left: 9px;
  }
}
@media screen and (min-width: 992px) {
  .dna-subhead {
    top: 19vh;
  }
}
@media screen and (min-width: 1200px) {
  .dna-subhead {
    top: 13.75vw;
    left: 18px;
  }
}

.dek,
.byline {
  display: inline;
}

.wp-prepress-layout-article-content .hed {
  font-weight: bold;
  text-align: center;
  font-size: 26vw;
  letter-spacing: -.07em;
  line-height: 1;
  color: #fff;
  text-shadow: 9999px 10px 2px currentColor, 9999px 7px 40px #000;
  margin-left: -9999px;
  margin-bottom: .75em;
  position: relative;
  z-index: 20;
  max-width: 100%;
}
@media screen and (min-width: 500px) {
  .wp-prepress-layout-article-content .hed {
    color: #000;
    color: rgba(0, 0, 0, 0.9);
    text-align: left;
    font-size: 15.5vw;
    text-shadow: 9999px 10px 3px currentColor;
    margin-bottom: .5em;
  }
}
@media screen and (min-width: 992px) {
  .wp-prepress-layout-article-content .hed {
    text-shadow: 9999px 10px 4px currentColor;
  }
}

@media screen and (min-width: 1628px) {
  .wp-prepress-layout-article-content .hed {
    font-size: 260px;
  }
}
.ie9 .wp-prepress-layout-article-content .hed {
  margin-left: 0;
}
.lt-ie9 .wp-prepress-layout-article-content .hed {
  margin-left: 0;
  color: #000;
  text-align: left;
  font-size: 150px;
}

.wp-prepress-layout-article-content .dek {
  padding: 0;
  margin: 0;
  color: #000;
  font-size: 16px;
}
@media screen and (min-width: 1200px) {
  .wp-prepress-layout-article-content .dek {
    font-size: 20px;
  }
}
.lt-ie9 .wp-prepress-layout-article-content .dek {
  text-align: left;
}

.hed .em {
  font-size: 2.1em;
  display: block;
  line-height: 0.7em;
  text-indent: -0.03em;
  letter-spacing: -.08em;
}

.wp-prepress-layout-article-content .dek {
  border-bottom: none;
}

.wp-prepress-layout-article-content .byline {
  font-size: 16px;
  font-weight: bold;
}
@media screen and (min-width: 1200px) {
  .wp-prepress-layout-article-content .byline {
    font-size: 20px;
  }
}

article[role="main"] {
  /*position: relative;*/
}

.dna-island {
  position: relative;
  background-color: #F3F3F4;
  z-index: 3;
  width: 100%;
  padding: 50px 20px;
}
.dna-island p,
.dna-island ul {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.wp-prepress-layout-article-content .dna-caption {
  max-width: 840px;
  margin: 0 auto;
  padding: 20px;
  padding-bottom: 0;
}

.dust {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  -webkit-animation: tv-noise 0.4s steps(4) infinite;
  -moz-animation: tv-noise 0.4s steps(4) infinite;
  -ms-animation: tv-noise 0.4s steps(4) infinite;
  -o-animation: tv-noise 0.4s steps(4) infinite;
  animation: tv-noise 0.4s steps(4) infinite;
}

@-webkit-keyframes tv-noise {
  0% {
    background-image: url("images/noise-1.png");
  }
  25% {
    background-image: url("images/noise-2.png");
  }
  50% {
    background-image: url("images/noise-3.png");
  }
  75% {
    background-image: url("images/noise-4.png");
  }
  100% {
    background-image: url("images/noise-5.png");
  }
}
@-moz-keyframes tv-noise {
  0% {
    background-image: url("images/noise-1.png");
  }
  25% {
    background-image: url("images/noise-2.png");
  }
  50% {
    background-image: url("images/noise-3.png");
  }
  75% {
    background-image: url("images/noise-4.png");
  }
  100% {
    background-image: url("images/noise-5.png");
  }
}
@-ms-keyframes tv-noise {
  0% {
    background-image: url("images/noise-1.png");
  }
  25% {
    background-image: url("images/noise-2.png");
  }
  50% {
    background-image: url("images/noise-3.png");
  }
  75% {
    background-image: url("images/noise-4.png");
  }
  100% {
    background-image: url("images/noise-5.png");
  }
}
@-o-keyframes tv-noise {
  0% {
    background-image: url("images/noise-1.png");
  }
  25% {
    background-image: url("images/noise-2.png");
  }
  50% {
    background-image: url("images/noise-3.png");
  }
  75% {
    background-image: url("images/noise-4.png");
  }
  100% {
    background-image: url("images/noise-5.png");
  }
}
@keyframes tv-noise {
  0% {
    background-image: url("images/noise-1.png");
  }
  25% {
    background-image: url("images/noise-2.png");
  }
  50% {
    background-image: url("images/noise-3.png");
  }
  75% {
    background-image: url("images/noise-4.png");
  }
  100% {
    background-image: url("images/noise-5.png");
  }
}
canvas {
  /*width: 100%;
  height: 100%;*/
}

.dna-animations {
  width: 100%;
  height: 1400px;
  height: 80vh;
  padding: 20px;
  box-sizing: border-box;
  background: url("images/research-dna-2.jpg") no-repeat;
  background-position: center right;
  background-size: cover;
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
}
@media screen and (min-width: 992px) {
  .no-touch .dna-animations {
    background-attachment: fixed;
  }
}
.lt-ie9 .dna-animations {
  height: 750px;
  max-width: 1400px;
  background-size: 100% auto;
}

#dna-1 {
  background-image: url("images/dna-1.jpg");
  height: auto;
  overflow: visible;
  margin-top: -56px;
}
@media screen and (min-width: 500px) {
  #dna-1 {
    margin-top: 0;
    height: 60vh;
  }
}
@media screen and (min-width: 992px) {
  #dna-1 {
    height: 0;
    padding-bottom: 43.6%;
    background-size: cover;
    overflow: hidden;
  }
}
.lt-ie9 #dna-1 {
  display: table;
}
.lt-ie9 #dna-1 > .dna-headline {
  top: auto;
  display: table-cell;
  vertical-align: middle;
}
#dna-1 > .dna-headline {
  position: relative;
  top: 50%;
  display: block;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.lt-ie9 #dna-1 {
  height: 750px;
  max-width: 1400px;
  background-size: 100% auto;
  padding: 0;
}
.lt-ie9 #dna-1 .dna-headline {
  top: 150px;
}
#dna-1 .dna-js {
  display: none;
}
@media screen and (min-width: 500px) {
  #dna-1 .dna-js {
    display: inline;
  }
}
#dna-1 .p-5 {
  left: 4%;
  bottom: 37%;
  z-index: 101;
}
#dna-1 .p-2 {
  left: -1%;
  bottom: -5%;
}
#dna-1 .p-3 {
  left: -9%;
  top: -3%;
}
#dna-1 .p-4 {
  left: 20%;
  bottom: 6%;
}
#dna-1 .p-1 {
  left: 47%;
  top: 3%;
  color: #A5A7A2;
}
#dna-1 .p-6 {
  left: 90%;
  bottom: 21%;
  color: #000;
}
#dna-1 .p-7 {
  left: 82%;
  bottom: 10%;
}
#dna-1 .p-8 {
  left: 57%;
  bottom: 37%;
  color: #8D8D8D;
}
#dna-1 .p-9 {
  left: 58%;
  bottom: 8%;
}
#dna-1 .p-10 {
  left: 3%;
  top: 11%;
}
@media screen and (min-width: 1425px) {
  #dna-1 .p-3 {
    left: 88%;
    top: -3%;
  }
}

#dna-1 > .dna-headline {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
@media screen and (min-width: 500px) {
  #dna-1 > .dna-headline {
    -webkit-transform: translateY(-52%);
    transform: translateY(-50%);
  }
}
@media screen and (min-width: 768px) {
  #dna-1 > .dna-headline {
    -webkit-transform: translateY(-59%);
  }
}
@media screen and (min-width: 992px) {
  #dna-1 > .dna-headline {
    transform: translateY(0);
  }
}
.lt-ie9 #dna-1 > .dna-headline {
  margin-left: 0;
  color: #000;
  max-width: 960px;
  margin: 0 auto;
  text-align: left;
  display: block;
}

#dna-2 {
  background-image: url("images/dna-2.jpg");
}
#dna-2 .p-5 {
  left: 9%;
  bottom: 37%;
}
#dna-2 .p-2 {
  left: -1%;
  bottom: -5%;
}
#dna-2 .p-3 {
  left: 83%;
  top: 20%;
}
#dna-2 .p-4 {
  left: 18%;
  bottom: 19%;
}
#dna-2 .p-1 {
  left: 36%;
  top: 3%;
}
#dna-2 .p-6 {
  left: 91%;
  bottom: 37%;
}
#dna-2 .p-7 {
  left: 80%;
  bottom: 10%;
}
#dna-2 .p-8 {
  left: 68%;
  bottom: 20%;
}
#dna-2 .p-9 {
  left: 42%;
  bottom: 8%;
}
#dna-2 .p-10 {
  left: 3%;
  top: 12%;
}

#dna-3 {
  background-image: url("images/dna-3.jpg");
  overflow: hidden;
}
#dna-3 span.dna {
  font-size: 16px;
  letter-spacing: .05em;
  display: block;
  float: left;
  min-width: 100px;
  opacity: .75;
}

#dna-4 {
  background-image: url("images/dna-4.jpg");
}
@media screen and (min-width: 768px) {
  #dna-4 aside {
    text-align: center;
  }
}
#dna-4 .p-5 {
  left: 9%;
  bottom: 37%;
}
#dna-4 .p-2 {
  left: -1%;
  top: 20%;
}
#dna-4 .p-3 {
  left: 80%;
  top: 20%;
}
#dna-4 .p-4 {
  left: 18%;
  bottom: 19%;
}
#dna-4 .p-1 {
  left: 36%;
  top: 3%;
}
#dna-4 .p-6 {
  left: 90%;
  bottom: 37%;
}
#dna-4 .p-7 {
  left: 86%;
  bottom: 10%;
}
#dna-4 .p-8 {
  left: 69%;
  bottom: 20%;
}
#dna-4 .p-9 {
  left: 35%;
  bottom: 8%;
}
#dna-4 .p-10 {
  left: 24%;
  top: 12%;
}

#dna-5 {
  background-image: url("images/dna-5.jpg");
}
#dna-5 .p-5 {
  left: 9%;
  bottom: 45%;
}
#dna-5 .p-2 {
  left: 0;
  bottom: 3%;
}
#dna-5 .p-3 {
  left: 39%;
  top: 25%;
}
#dna-5 .p-4 {
  left: 18%;
  bottom: 19%;
}
#dna-5 .p-1 {
  left: 66%;
  top: -2%;
}
#dna-5 .p-6 {
  left: 89%;
  bottom: 31%;
}
#dna-5 .p-7 {
  left: 88%;
  bottom: 10%;
}
#dna-5 .p-8 {
  left: 69%;
  bottom: 20%;
}
#dna-5 .p-9 {
  left: 37%;
  bottom: 8%;
}
#dna-5 .p-10 {
  left: 4%;
  top: 17%;
}

.wp-prepress-layout-article-content span {
  max-width: 7em;
}

.single-editorialarticle article[role="main"] aside.dna-pullquote {
  width: 100%;
  max-width: 100%;
  border: none;
  margin: 0 auto;
  float: none;
  text-indent: 0;
  position: absolute;
  z-index: 100;
  padding: 0;
  line-height: 1;
  padding-right: 40px;
}
@media screen and (min-width: 800px) {
  .single-editorialarticle article[role="main"] aside.dna-pullquote {
    max-width: 800px;
    left: 50%;
    margin-left: -400px;
  }
}

.lt-ie9 .dna-animations {
  display: table;
}
.lt-ie9 .dna-animations > .dna-pullquote {
  top: auto;
  display: table-cell;
  vertical-align: middle;
}
.dna-animations > .dna-pullquote {
  position: relative;
  top: 50%;
  left: 50%;
  display: block;
  -webkit-transform: translate(-50%);
  -moz-transform: translate(-50%);
  -ms-transform: translate(-50%);
  transform: translate(-50%);
}

@media screen and (min-width: 1200px) {

  .dna-animations > .dna-pullquote {
    width: 50% !important;
  }
}

.lt-ie9 .dna-animations .dna-pullquote {
  top: 50%;
}

.dna-names {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("images/names.gif") 0 0 repeat transparent;
  top: 0;
  left: 0;
  opacity: .5;
}

/*||||||||||||||||||||||||||||||||

Control classes

||||||||||||||||||||||||||||||||||*/
.z-1 {
  font-size: 43.85714px;
  color: #fff;
  text-shadow: 9999px 0 4.46429px currentColor;
  position: absolute;
  z-index: 1;
  opacity: 0.77143;
  margin-left: -9999px;
}
.ie9 .z-1, .lt-ie9 .z-1 {
  margin-left: 0;
  filter: alpha(opacity=35);
  zoom: 1;
}
@media screen and (min-width: 992px) {
  .z-1 {
    font-size: 6vw;
    text-shadow: 9999px 0 8.75px currentColor;
  }
}

.z-2 {
  font-size: 28.42857px;
  color: #fff;
  text-shadow: 9999px 0 2.85714px currentColor;
  position: absolute;
  z-index: 2;
  opacity: 0.78171;
  margin-left: -9999px;
}
.ie9 .z-2, .lt-ie9 .z-2 {
  margin-left: 0;
  filter: alpha(opacity=35);
  zoom: 1;
}
@media screen and (min-width: 992px) {
  .z-2 {
    font-size: 4.2vw;
    text-shadow: 9999px 0 5.6px currentColor;
  }
}

.z-3 {
  font-size: 16.42857px;
  color: #fff;
  text-shadow: 9999px 0 1.60714px currentColor;
  position: absolute;
  z-index: 3;
  opacity: 0.78971;
  margin-left: -9999px;
}
.ie9 .z-3, .lt-ie9 .z-3 {
  margin-left: 0;
  filter: alpha(opacity=35);
  zoom: 1;
}
@media screen and (min-width: 992px) {
  .z-3 {
    font-size: 2.8vw;
    text-shadow: 9999px 0 3.15px currentColor;
  }
}

.z-4 {
  font-size: 7.85714px;
  color: #fff;
  text-shadow: 9999px 0 0.71429px currentColor;
  position: absolute;
  z-index: 4;
  opacity: 0.79543;
  margin-left: -9999px;
}
.ie9 .z-4, .lt-ie9 .z-4 {
  margin-left: 0;
  filter: alpha(opacity=35);
  zoom: 1;
}
@media screen and (min-width: 992px) {
  .z-4 {
    font-size: 1.8vw;
    text-shadow: 9999px 0 1.4px currentColor;
  }
}

.z-5 {
  font-size: 2.71429px;
  color: #fff;
  text-shadow: 9999px 0 0.17857px currentColor;
  position: absolute;
  z-index: 5;
  opacity: 0.79886;
  margin-left: -9999px;
}
.ie9 .z-5, .lt-ie9 .z-5 {
  margin-left: 0;
  filter: alpha(opacity=35);
  zoom: 1;
}
@media screen and (min-width: 992px) {
  .z-5 {
    font-size: 1.2vw;
    text-shadow: 9999px 0 0.35px currentColor;
  }
}

.z-6 {
  font-size: 1px;
  color: #fff;
  text-shadow: 9999px 0 0px currentColor;
  position: absolute;
  z-index: 6;
  opacity: 0.8;
  margin-left: -9999px;
}
.ie9 .z-6, .lt-ie9 .z-6 {
  margin-left: 0;
  filter: alpha(opacity=35);
  zoom: 1;
}
@media screen and (min-width: 992px) {
  .z-6 {
    font-size: 1vw;
    text-shadow: 9999px 0 0px currentColor;
  }
}

.z-7 {
  font-size: 2.71429px;
  color: #fff;
  text-shadow: 9999px 0 0.17857px currentColor;
  position: absolute;
  z-index: 7;
  opacity: 0.79886;
  margin-left: -9999px;
}
.ie9 .z-7, .lt-ie9 .z-7 {
  margin-left: 0;
  filter: alpha(opacity=35);
  zoom: 1;
}
@media screen and (min-width: 992px) {
  .z-7 {
    font-size: 1.2vw;
    text-shadow: 9999px 0 0.35px currentColor;
  }
}

.z-8 {
  font-size: 7.85714px;
  color: #fff;
  text-shadow: 9999px 0 0.71429px currentColor;
  position: absolute;
  z-index: 8;
  opacity: 0.79543;
  margin-left: -9999px;
}
.ie9 .z-8, .lt-ie9 .z-8 {
  margin-left: 0;
  filter: alpha(opacity=35);
  zoom: 1;
}
@media screen and (min-width: 992px) {
  .z-8 {
    font-size: 1.8vw;
    text-shadow: 9999px 0 1.4px currentColor;
  }
}

.z-9 {
  font-size: 16.42857px;
  color: #fff;
  text-shadow: 9999px 0 1.60714px currentColor;
  position: absolute;
  z-index: 9;
  opacity: 0.78971;
  margin-left: -9999px;
}
.ie9 .z-9, .lt-ie9 .z-9 {
  margin-left: 0;
  filter: alpha(opacity=35);
  zoom: 1;
}
@media screen and (min-width: 992px) {
  .z-9 {
    font-size: 2.8vw;
    text-shadow: 9999px 0 3.15px currentColor;
  }
}

.z-10 {
  font-size: 28.42857px;
  color: #fff;
  text-shadow: 9999px 0 2.85714px currentColor;
  position: absolute;
  z-index: 10;
  opacity: 0.78171;
  margin-left: -9999px;
}
.ie9 .z-10, .lt-ie9 .z-10 {
  margin-left: 0;
  filter: alpha(opacity=35);
  zoom: 1;
}
@media screen and (min-width: 992px) {
  .z-10 {
    font-size: 4.2vw;
    text-shadow: 9999px 0 5.6px currentColor;
  }
}

.z-11 {
  font-size: 43.85714px;
  color: #fff;
  text-shadow: 9999px 0 4.46429px currentColor;
  position: absolute;
  z-index: 11;
  opacity: 0.77143;
  margin-left: -9999px;
}
.ie9 .z-11, .lt-ie9 .z-11 {
  margin-left: 0;
  filter: alpha(opacity=35);
  zoom: 1;
}
@media screen and (min-width: 992px) {
  .z-11 {
    font-size: 6vw;
    text-shadow: 9999px 0 8.75px currentColor;
  }
}

/*# sourceMappingURL=style.css.map */