/**
 * Reset some basic elements
 */
body, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, hr,
dl, dd, ol, ul, figure {
  margin: 0;
  padding: 0;
}

/**
 * Basic styling
 */
body {
  /**font: 400 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;**/
  word-wrap: break-word;
  color: black;
  overflow-y: scroll;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-font-feature-settings: "kern" 1;
  -moz-font-feature-settings: "kern" 1;
  -o-font-feature-settings: "kern" 1;
  font-feature-settings: "kern" 1;
  font-kerning: normal;
}
p, ul, ol, td, th {
  font-family: 'Source Sans Pro', sans-serif;
}
p {
  padding-top: 5px;
  line-height: 1.5em;
  font-size: 1.1em;
}
.quo {
  padding-left: 3em;
  margin-bottom: 2em;
  font-size: 0.95em;
}
/**
 * Set `margin-bottom` to maintain vertical rhythm
 */
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
ul, ol, dl, figure, hr {
  margin-bottom: 15px;
}

/* IMAGES */
img {
  max-width: 100%;
  vertical-align: middle;
}

/* FIGURES */
figure > img {
  display: block;
  padding: 0.5em 0;
}
figcaption {
  max-width: 35em;
  font-size: 0.8em;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 1em;
}

/* LISTS */
ul, ol {
  margin-left: 50px;
  counter-reset: item;
}
li > ul,
li > ol {
  font-size: 1.1em;
  margin-bottom: 0;
}
ol > h3 > li {
  counter-increment: item;
  list-style-type: upper-roman;
  font-size: 1em;
  font-weight: 700;
  text-transform: uppercase;
  font-family: "Open Sans Condensed", sans-serif;
}
ol ol > li {
  list-style-type: lower-alpha;
}
ol ol ol > li {
  list-style-type: lower-roman;
}
.li {
  text-align: left;
  padding: 0;
  margin: 0;
}

/* HEADINGS */
h1, h2, h3, h4, h5, h6, cite {
  font-family:'Open Sans Condensed', sans-serif;
  font-weight: 700;
 	color: #393939;
  text-align: center;
  text-transform: uppercase;
}
article h1, .appendix h1 {
  padding-top: 2em;
}
article h2, article h3 {
  padding-top: 1.5em;
}
.table-title {
  padding-bottom: 15px;
  margin-bottom: 0;
  font-family: 'Source Sans Pro', sans-serif;
}

/* LINKS */
a {
  color: #4FBBA9;
  box-sizing: content-box;
  text-decoration: none;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
a:hover {
  color: #111;
}

/* BLOCKQUOTES */
blockquote {
  color: #858585;
  border-left: 4px solid #4FBBA9;
  padding-left: 15px;
  font-size: 1.3em;
  font-weight: 400;
  line-height:1.5em;
  font-style: italic;
  quotes: '“' '”';
}
blockquote.appendix p:before {
  content: '';
  content: no-open-quote;
}
blockquote.appendix p:first-child:before {
  content: '“';
  content: open-quote;
  font:400 1.8em 'Source Sans Pro', sans-serif;
  line-height: inherit;
  color: #393939;
  float: left;
}
blockquote.appendix p:after {
  content: '';
  content: no-close-quote;
}
blockquote.appendix p:last-child:after {
  content: ' ”';
  content: close-quote;
  font:400 1.8em 'Source Sans Pro', sans-serif;
  line-height:0.4em;
  color: #393939;
}

/* HEADER */
#logo {
  position: absolute;
  left: 1em;
  top: 1em;
  z-index: 1;
  transform: translateX(0);
}
header {
  width: 100vw;
  min-height: 800px;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex !important;
  display: -webkit-flex;
  flex-direction: row;
  justify-content: space-around;
  align-content: center;
  flex-wrap: nowrap;
  background-color: #efefef;
  margin-bottom: 10vh;
  flex-direction: row;
  flex-wrap: nowrap;
  display: flex;
}
.chbg {
  position: relative;
  height: 100vh;
  min-height: 800px;
  width: 50vw;
  box-sizing: border-box;
  margin: 0;
}
#bg1 {
  background: url("/assets/part1-cover-image.jpg");
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
}
#bg2 {
  background: url("/assets/part2-cover-image.jpg");
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
}
#bg2a {
  background: url("/assets/mustafa.jpg");
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
}
#bg3 {
  background: url("/assets/part3-cover-image.jpg");
  background-position: left;
  background-size: cover;
  background-repeat: no-repeat;
}
#inner-wrapper {
  display: flex;
  position: relative;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: space-between;
  align-content: flex-start;
  min-height: 600px;
  height: 90vh;
  width: 50vw;
  padding: 2em;
  padding-left: 4em;
  padding-right: 4em;
}
#heds > h1 {
  padding: 0;
  padding-bottom: 0.2em;
  margin: 0;
  line-height: 1.2em;
  font-size: 5.5em;
}
#contrib {
  padding: 0;
  margin: 0;
  margin-top: 4em;
  display: block;
  box-sizing: content-box;
}

/* NAV BAR*/
#nav-txt {
  height: inherit;
  vertical-align: middle;
}
#nav-logo{
  height: 30px;
  padding: 0 20px 0 5px;

  overflow: hidden;
  display: inline;
}
#nav {
  top:100%;
  height:40px;
  position:fixed;
  background-color: #ffffff;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
  display: inline-block;
  z-index: 3;
  margin: auto;
}
.nav-wrapper {
  position: absolute;
  top: 100%;
  width: 100%;
  display: block;
  z-index: 3;
}
#nav > a {
  text-decoration: none;
}

/* SIDEBAR STUFF */
.aside {
  vertical-align: middle;
  text-align: center;
}
.back-to-top {
  position: absolute;
  top: 1500px;
  left: 15px;
}
.back-to-top-2 {
  position: absolute;
  top: 46000px;
  left: 150px;
}
.back-to-article {
  position: absolute;
  top: 1000px;
  left: 15px;
}
.sticky-wrapper {
  position: absolute;
  top: 1500px;
  width: 100px;
  display: inline-block;
  text-align: center;
}
.sticky-wrapper-2 {
  position: absolute;
  top: 46000px;
  width: 100px;
  display: inline-block;
  text-align: center;
}
.back-to-article-wrapper {
  position: absolute;
  top: 1000px;
  left: 15px;
  width: 100px;
  display: inline-block;
  text-align: center;
}

/* MAIN FLEX */
  main {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }
  .left-sidebar {
    flex: 1;
    order: 1;
  }
  aside {
    flex: 1;
    order: 3;
  }
  article {
    flex: 2;
    order: 2;
    padding-top: 4rem;
    max-width: 40em;
  }

  .aside-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .aside-el {
    text-align: center;
  }


/* MAPS */
#spillMap, #pesticideMap {
  width:70vw;
  height:70vh;
  position: relative;
  margin-left: 50%;
  transform: translateX(-50%);
  z-index:1;
  margin-bottom: 1em;
}
#legend {
  background: #FFF;
  padding: 0 10px;
  margin: 5px;
  width: 110px;
  font-size: 1em;
  font-family: 'Source Sans Pro', sans-serif;
}
.color {
  border: 1px solid;
  height: 18px;
  width: 18px;
  margin-right: 3px;
  float: left;
  opacity: 0.7;
}
.r {
  background: #e3e3e3;
}
.r1 {
  background: #fcbca2;
}
.r2 {
  background: #fb6a4a;
}
.r3 {
  background: #ef3b2c;
}
.r4 {
  background: #cb181d;
}
.r5 {
  background: #a50f15;
}

/* HIGHLIGHTED TEXT */
p > mark {
  background-color: #fbede2;
}
/*FIGURE CAPTIONS*/
figcaption.wide-fig {
  max-width: 100vw;
  word-wrap: break-word;
}
.wide-fig {
  width: 60vw;
  position: relative;
  margin-left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.cmtBox {
    display: inline-block;
    padding: 1em;
    padding-bottom: 0;
    background-color: #e9fff5;
  }
/*BOTTOM THROW*/
#btm_throw {
    /*align-content: center;*/
    width: 75%;
    margin: auto;
    border-bottom: 1px solid black;
    padding-bottom: 2em;
}
#btm_throw_content {
  display: flex;
  margin: auto;
  width: 85%;
  margin-right: 0%;
}
#btm_throw_left, #btm_throw_right {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#btm_throw_left{
  padding-right: 2em;
  border-right:1px solid #9c9c9c;
}
#btm_throw_right{
  padding-left: 2em;
}

#btm_throw_left_img {
  background: url("/assets/ch1-cover.jpg");
}
#btm_throw_right_img{
  background: url("/assets/ali.jpg");
}
#btm_throw_left_img, #btm_throw_right_img{
  box-sizing: border-box;
  height: 30vh;
  min-height: 300px;
  width: auto;
  background-size: cover;
  margin-bottom: 1.3em;
}
#btm_throw_left_txt, #btm_throw_right_txt {
  box-sizing: border-box;
  position: relative;
  width: 80%;
  text-align: left;
  margin-top: 1.3em;
}
#btm_throw_left a, #btm_throw_right a{
  text-decoration: none;
}
#btm_throw_left a:hover, #btm_throw_right a:hover {
  color: #4FBBA9;
  text-decoration: underline;
}
#righta {
  background: url("/assets/right.svg");
  height: 1.5em;
  width: 1em;
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center;
}
a.right {
  display: none;
}

/*FOOTER*/
footer{
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 4em;
}

footer a{
  color: grey;
  text-decoration: none;
}
footer a:hover{
  text-decoration: underline;
}
#footer_edg{
  display: flex;
  /*flex-direction: column;*/
  align-items: flex-end;
}
.social {
  width: 15px;
  height: 15px;
}


/*MEDIA QUERIES*/

@media only screen and (max-width : 1100px) {
  header {
    margin-bottom: 0vh;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
  }
  .chbg {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    box-sizing: border-box;
    position: relative;
    height: 50vh;
    min-height: 300px;
    width: 100vw;
    margin: 0;
    flex: initial;
    order: 1;
  }
  #inner-wrapper {
    width: 90vw;
    min-height: 0;
    height: 50vh;
    flex: 3;
    order: 2;
    padding-left: 0;
    padding-right: 0;
  }
  #heds > h1 {
    font-size: 2.7em;
    flex: initial;
    order: 1;
  }
  #heds > h2 {
    font-size: 1.5em;
    flex: auto;
    order: 2;
  }
  #contrib {
    padding: 0;
    margin: 0;
    margin-top: 0vh;
    font-size: 1em;
    flex: 0;
    order: 3;
  }
  .left-sidebar {
    display: none;
    visibility: collapse;
  }

  main {
    display: flex;
    flex-direction: column;
    padding: 10px;
  }

  .aside-wrapper {
    flex-direction: row;
    justify-content: space-around;
  }

  aside {
    max-width: 100%;
    order: 1;
  }
  article {
    padding-top: 2em;
    order: 2;
    align-self: center;
    width: 40em;
    max-width: 97%;
  }

  #spillMap, #pesticideMap {
    width: 100vw;
  }
  .wide-fig {
    width: 90vw;
    position: relative;
    margin-left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }

  #btm_throw {
    width: 95%;
  }
  #btm_throw_content {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }
  #btm_throw_left{
    width: 100%;
    padding-right: 0;
    border-right-style: none;
    border-bottom:1px solid #dfdfdf;
    flex-direction: row;
    justify-content: flex-start;
  }
  #btm_throw_right {
    width: 100%;
    padding-left: 0;
    flex-direction: row;
    justify-content: flex-start;
  }
  #btm_throw_left_img, #btm_throw_right_img{
    display: none;
  }
  #btm_throw_left_txt, #btm_throw_right_txt {
    width: 100%;
    margin-top: 0;
    padding: 1em;
  }
  #righta {
    display: inline-block;
  }
  a.throw_img {
    display: none;
  }
  a.right {
    display: inline-block;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 10%;
    margin-left: auto;
  }

  footer{
    flex-direction: column-reverse;
    align-items: center;
    margin-top: 4em;
    text-align: center;
    border-top: 1px solid #dfdfdf;
  }
  #footer_edg{
    flex-direction: column-reverse;
    align-items: center;
  }
}