/* vars.scss - variables like colors, fonts, sizes, etc. */
/* colors: black/grey/white */
/* $color_ltred: #fee; */
/* $color_ltred: #e0c0c0; */
/* colors: other common colors */
/* was #800 */
/* colors: header */
/* colors: footer */
/* colors: special */
/* alt options: #f9f4d6, #f5e7b5 */
/*  fonts */
/* $avenir: 'Avenir Next W01', helvetica, sans-serif; */
/* thin */
/* light */
/* regular */
/* demi */
/* bold */
/* condensed bold */
/* chinese character fonts */
/* z-index values (depth) */
/* responsive screen breakpoints */
/*-------------------------------------------------- */
/* GENERAL CSS */
/*-------------------------------------------------- */
html, body {
  height: 100%; }

body {
  margin: 0;
  padding: 0;
  font-family: 'AvenirNextWorldLight', helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 14px;
  background-color: #fff; }

a, a:visited {
  text-decoration: none;
  color: #db291c; }

a:hover, a:active {
  text-decoration: none;
  color: #333; }

.caps {
  font-size: 90%; }

button, .button, a.button {
  padding: 10px 20px;
  font-family: 'AvenirNextWorldBold', helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background-color: #db291c;
  cursor: pointer;
  /*@include responsive(large-screens) {  }*/
  /*@include responsive(small-screens) {  }
  @include responsive(xsmall-screens) {  }
  @include responsive(mobile-screens) {  }*/ }
  button:hover, .button:hover, a.button:hover {
    color: #fff;
    background-color: #333; }
  @media only screen and (min-width: 1920px) {
    button, .button, a.button {
      font-size: 100%; } }
  @media only screen and (max-width: 1920px) {
    button, .button, a.button {
      font-size: 100%; } }
  @media only screen and (max-width: 1092px) {
    button, .button, a.button {
      padding: 8px 16px;
      font-size: 95%; } }

p {
  margin: 0;
  padding: 0 0 16px 0;
  max-width: 1100px;
  font-family: 'AvenirNextWorldLight', helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 1.3em;
  line-height: 1.4em; }

h1, h2, h3 {
  margin: 0;
  padding: 0 0 6px 0;
  font-family: 'AvenirNextWorldDemi', helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
  color: #21415e; }

/* Root div */
#root {
  z-index: 100;
  position: relative;
  display: grid;
  min-width: 375px;
  height: 100%;
  min-height: 800px;
  grid-template-columns: 35% auto 320px;
  grid-template-rows: 80px minmax(300px, auto) 250px;
  grid-column-gap: 0;
  grid-row-gap: 0;
  grid-template-areas: "blank blank nav" "logo welcome welcome" "footer footer footer";
  background-image: url("../img/dongting_watercolor_cropped.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center bottom;
  /*@include responsive(large-screens) {  }
  @include responsive(medium-screens) {  }*/ }
  @media only screen and (min-width: 1920px) {
    #root {
      grid-template-columns: 35% auto 320px;
      grid-template-rows: 80px minmax(300px, auto) 250px;
      grid-template-areas: "blank blank nav" "logo welcome welcome" "footer footer footer"; } }
  @media only screen and (max-width: 1920px) {
    #root {
      grid-template-columns: 35% auto 280px;
      grid-template-rows: 80px minmax(300px, auto) 250px;
      grid-template-areas: "blank blank nav" "logo welcome welcome" "footer footer footer"; } }
  @media only screen and (max-width: 768px) {
    #root {
      grid-template-columns: auto 250px;
      grid-template-rows: 80px 260px minmax(300px, auto) 250px;
      grid-template-areas: "blank nav" "logo logo" "welcome welcome" "footer footer"; } }
  @media only screen and (max-width: 480px) {
    #root {
      grid-template-rows: 70px 220px minmax(300px, auto) 200px; } }
  @media only screen and (max-width: 375px) {
    #root {
      grid-template-rows: 60px 220px minmax(300px, auto) 200px; } }

.logo {
  z-index: 300;
  grid-area: logo;
  position: relative;
  margin-right: 20px;
  text-align: right;
  /*@include responsive(large-screens) {  }
  @include responsive(medium-screens) {  }*/
  /*@include responsive(xsmall-screens) {  }
  @include responsive(mobile-screens) {  }*/ }
  @media only screen and (min-width: 1920px) {
    .logo {
      margin-right: 20px;
      padding-top: 0;
      text-align: right; } }
  @media only screen and (max-width: 1920px) {
    .logo {
      margin-right: 20px;
      padding-top: 0;
      text-align: right; } }
  @media only screen and (max-width: 768px) {
    .logo {
      margin-right: 0;
      padding-top: 20px;
      text-align: center; } }
  .logo div {
    float: right;
    text-align: center;
    /*@include responsive(large-screens) {  }
    @include responsive(medium-screens) {  }*/
    /*@include responsive(xsmall-screens) {  }
    @include responsive(mobile-screens) {  }*/ }
    @media only screen and (min-width: 1920px) {
      .logo div {
        float: right; } }
    @media only screen and (max-width: 1920px) {
      .logo div {
        float: right; } }
    @media only screen and (max-width: 768px) {
      .logo div {
        float: none; } }
  .logo img {
    position: relative;
    margin: 0 auto 30px auto;
    width: 250px;
    /*@include responsive(large-screens) {  }
    @include responsive(medium-screens) {  }
    @include responsive(small-screens) {  }*/ }
    @media only screen and (min-width: 1920px) {
      .logo img {
        width: 200px; } }
    @media only screen and (max-width: 1920px) {
      .logo img {
        width: 200px; } }
    @media only screen and (max-width: 480px) {
      .logo img {
        width: 175px; } }
    @media only screen and (max-width: 375px) {
      .logo img {
        width: 175px; } }
  .logo p {
    display: inline-block;
    margin: 0 auto; }
  .logo .enterreader {
    display: inline-block;
    /*@include responsive(large-screens) {  }
    @include responsive(medium-screens) {  }*/ }
    @media only screen and (min-width: 1920px) {
      .logo .enterreader {
        display: inline-block; } }
    @media only screen and (max-width: 1920px) {
      .logo .enterreader {
        display: inline-block; } }
    @media only screen and (max-width: 768px) {
      .logo .enterreader {
        display: none; } }
    @media only screen and (max-width: 480px) {
      .logo .enterreader {
        display: none; } }
    @media only screen and (max-width: 375px) {
      .logo .enterreader {
        display: none; } }

.welcome {
  z-index: 300;
  grid-area: welcome;
  position: relative;
  margin: 80px 0 0 0;
  padding: 72px 0 0 0;
  /*@include responsive(large-screens) {  }
  @include responsive(medium-screens) {  }*/ }
  @media only screen and (min-width: 1920px) {
    .welcome {
      margin: 80px 0 0 0;
      padding: 72px 0 0 0; } }
  @media only screen and (max-width: 1920px) {
    .welcome {
      margin: 80px 0 0 0;
      padding: 72px 0 0 0; } }
  @media only screen and (max-width: 768px) {
    .welcome {
      margin: 20px 0 0 0;
      padding: 0 0 0 20px; } }
  @media only screen and (max-width: 480px) {
    .welcome {
      margin: 20px 0 0 0;
      padding: 0 0 0 20px; } }
  @media only screen and (max-width: 375px) {
    .welcome {
      margin: 20px 0 0 0;
      padding: 0 0 0 20px; } }
  .welcome .intro {
    margin-left: 20px;
    padding: 0 50px 0 30px;
    border-left: solid 1px #c3c3c3;
    /*@include responsive(large-screens) {  }
    @include responsive(medium-screens) {  }*/
    /*@include responsive(xsmall-screens) {  }
    @include responsive(mobile-screens) {  }*/ }
    @media only screen and (min-width: 1920px) {
      .welcome .intro {
        padding: 0 50px 0 30px; } }
    @media only screen and (max-width: 1920px) {
      .welcome .intro {
        padding: 0 50px 0 30px; } }
    @media only screen and (max-width: 768px) {
      .welcome .intro {
        padding: 0 30px 0 30px; } }
    .welcome .intro h1 {
      padding: 0 0 16px 0;
      color: #db291c;
      font-family: 'AvenirNextWorldDemi', helvetica, sans-serif;
      font-weight: normal;
      font-style: normal;
      font-size: 2.1em;
      line-height: 1.2em;
      /*@include responsive(large-screens) {  }
      @include responsive(medium-screens) {  }*/ }
      @media only screen and (min-width: 1920px) {
        .welcome .intro h1 {
          font-size: 2.1em; } }
      @media only screen and (max-width: 1920px) {
        .welcome .intro h1 {
          font-size: 2.1em; } }
      @media only screen and (max-width: 768px) {
        .welcome .intro h1 {
          font-size: 1.8em; } }
      @media only screen and (max-width: 480px) {
        .welcome .intro h1 {
          font-size: 1.6em; } }
      @media only screen and (max-width: 375px) {
        .welcome .intro h1 {
          font-size: 1.6em; } }
    .welcome .intro p {
      padding: 0;
      font-size: 1.5em;
      line-height: 1.5em;
      max-width: 800px;
      /*@include responsive(large-screens) {  }
      @include responsive(medium-screens) {  }*/ }
      @media only screen and (min-width: 1920px) {
        .welcome .intro p {
          font-size: 1.5em; } }
      @media only screen and (max-width: 1920px) {
        .welcome .intro p {
          font-size: 1.5em; } }
      @media only screen and (max-width: 768px) {
        .welcome .intro p {
          font-size: 1.3em; } }
      @media only screen and (max-width: 480px) {
        .welcome .intro p {
          font-size: 1.2em; } }
      @media only screen and (max-width: 375px) {
        .welcome .intro p {
          font-size: 1.2em; } }
      .welcome .intro p.aboutreader {
        padding-top: 15px;
        font-family: 'AvenirNextWorldDemi', helvetica, sans-serif;
        font-weight: normal;
        font-style: normal; }
        .welcome .intro p.aboutreader span {
          font-family: 'AvenirNextWorldLight', helvetica, sans-serif;
          font-weight: normal;
          font-style: normal; }

#footer {
  z-index: 200;
  grid-area: footer;
  min-height: 250px;
  position: relative;
  /*@include responsive(large-screens) {  }
  @include responsive(medium-screens) {  }*/
  /*@include responsive(mobile-screens) {  }*/ }
  @media only screen and (min-width: 1920px) {
    #footer {
      min-height: 250px; } }
  @media only screen and (max-width: 1920px) {
    #footer {
      min-height: 250px; } }
  @media only screen and (max-width: 768px) {
    #footer {
      min-height: 200px; } }
  @media only screen and (max-width: 480px) {
    #footer {
      min-height: 150px; } }

/* Primary nav / tabs */
#primarynav {
  z-index: 400;
  grid-area: nav; }

.tabs {
  position: relative;
  padding: 36px 50px 0 30px;
  font-family: 'AvenirNextWorldDemi', helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
  border-left: solid 1px #c3c3c3;
  /*@include responsive(large-screens) {  }*/ }
  @media only screen and (min-width: 1920px) {
    .tabs {
      padding: 36px 50px 0 30px; } }
  @media only screen and (max-width: 1920px) {
    .tabs {
      padding: 36px 50px 0 30px; } }
  @media only screen and (max-width: 1092px) {
    .tabs {
      padding: 36px 10px 0 30px; } }
  @media only screen and (max-width: 768px) {
    .tabs {
      padding: 20px 10px 0 30px; } }
  @media only screen and (max-width: 480px) {
    .tabs {
      padding: 16px 10px 0 20px; } }
  @media only screen and (max-width: 375px) {
    .tabs {
      padding: 12px 0 0 20px; } }
  .tabs span {
    margin-right: 20px;
    font-size: 1.0em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    /*@include responsive(large-screens) {  }
    @include responsive(medium-screens) {  }*/
    /*@include responsive(xsmall-screens) {  }
    @include responsive(mobile-screens) {  }*/ }
    @media only screen and (min-width: 1920px) {
      .tabs span {
        font-size: 1.0em; } }
    @media only screen and (max-width: 1920px) {
      .tabs span {
        font-size: 1.0em; } }
    @media only screen and (max-width: 768px) {
      .tabs span {
        font-size: 0.9em; } }
    .tabs span.home {
      display: inline;
      /*@include responsive(large-screens) {  }
      @include responsive(medium-screens) {  }*/
      /*@include responsive(xsmall-screens) {  }
      @include responsive(mobile-screens) {  }*/ }
      @media only screen and (min-width: 1920px) {
        .tabs span.home {
          display: inline; } }
      @media only screen and (max-width: 1920px) {
        .tabs span.home {
          display: inline; } }
      @media only screen and (max-width: 768px) {
        .tabs span.home {
          display: none; } }
    .tabs span.selected {
      color: #668fbc; }
    .tabs span a {
      color: #333;
      text-decoration: none; }
      .tabs span a:hover {
        color: #000; }

/*-------------------------------------------------- */
/* ABOUT PAGE */
/*-------------------------------------------------- */
#root.about {
  height: auto;
  grid-template-columns: auto 320px;
  grid-template-rows: 80px 100px minmax(300px, auto) 250px;
  grid-column-gap: 0;
  grid-row-gap: 0;
  grid-template-areas: "sublogo nav" "pagetitle pagetitle" "content sidebar" "footer footer";
  /*@include responsive(large-screens) {  }*/
  /*@include responsive(mobile-screens) {  }*/ }
  @media only screen and (min-width: 1920px) {
    #root.about {
      grid-template-columns: auto 320px;
      grid-template-rows: 80px 100px minmax(300px, auto) 250px; } }
  @media only screen and (max-width: 1920px) {
    #root.about {
      grid-template-columns: auto 320px;
      grid-template-rows: 80px 100px minmax(300px, auto) 250px; } }
  @media only screen and (max-width: 1092px) {
    #root.about {
      grid-template-columns: auto 280px; } }
  @media only screen and (max-width: 768px) {
    #root.about {
      grid-template-columns: auto 200px;
      grid-template-rows: 62px 80px minmax(300px, auto) auto 150px;
      grid-template-areas: "sublogo nav" "pagetitle pagetitle" "content content" "sidebar sidebar" "footer footer"; } }
  @media only screen and (max-width: 480px) {
    #root.about {
      grid-template-rows: 50px 60px minmax(300px, auto) auto 120px; } }

#sublogo {
  grid-area: sublogo; }
  #sublogo img {
    padding: 30px 0 0 75px;
    width: 180px;
    /*@include responsive(large-screens) {  }
    @include responsive(medium-screens) {  }*/ }
    @media only screen and (min-width: 1920px) {
      #sublogo img {
        padding: 30px 0 0 75px;
        width: 180px; } }
    @media only screen and (max-width: 1920px) {
      #sublogo img {
        padding: 30px 0 0 75px;
        width: 180px; } }
    @media only screen and (max-width: 768px) {
      #sublogo img {
        padding: 20px 0 0 40px;
        width: 150px; } }
    @media only screen and (max-width: 480px) {
      #sublogo img {
        padding: 18px 0 0 30px;
        width: 120px; } }
    @media only screen and (max-width: 375px) {
      #sublogo img {
        padding: 14px 0 0 30px; } }

#pagetitle {
  grid-area: pagetitle;
  background-color: #cedae6;
  display: flex;
  justify-content: center;
  flex-direction: column; }
  #pagetitle h1 {
    padding: 0 0 0 75px;
    font-family: 'AvenirNextWorldRegular', helvetica, sans-serif;
    font-weight: normal;
    font-style: normal;
    color: #21415e;
    font-size: 2.0em;
    /*@include responsive(large-screens) {  }
    @include responsive(medium-screens) {  }*/
    /*@include responsive(mobile-screens) {  }*/ }
    @media only screen and (min-width: 1920px) {
      #pagetitle h1 {
        padding: 0 0 0 75px;
        font-size: 2.0em; } }
    @media only screen and (max-width: 1920px) {
      #pagetitle h1 {
        padding: 0 0 0 75px;
        font-size: 2.0em; } }
    @media only screen and (max-width: 768px) {
      #pagetitle h1 {
        padding: 0 0 0 40px;
        font-size: 1.8em; } }
    @media only screen and (max-width: 480px) {
      #pagetitle h1 {
        padding: 0 0 0 30px;
        font-size: 1.6em; } }

#content {
  grid-area: content;
  padding: 46px 50px 50px 150px;
  /*@include responsive(mobile-screens) {  }*/ }
  @media only screen and (min-width: 1920px) {
    #content {
      padding: 46px 50px 50px 150px; } }
  @media only screen and (max-width: 1920px) {
    #content {
      padding: 46px 50px 50px 150px; } }
  @media only screen and (max-width: 1366px) {
    #content {
      padding: 46px 50px 50px 75px; } }
  @media only screen and (max-width: 1092px) {
    #content {
      padding: 46px 50px 50px 75px; } }
  @media only screen and (max-width: 768px) {
    #content {
      padding: 36px 40px 40px 40px; } }
  @media only screen and (max-width: 480px) {
    #content {
      padding: 26px 25px 40px 30px; } }
  #content .bios {
    margin: 10px 0 30px 60px;
    padding-left: 30px;
    border-left: solid 1px #c3c3c3;
    /*@include responsive(mobile-screens) {  }*/ }
    @media only screen and (min-width: 1920px) {
      #content .bios {
        margin: 10px 0 30px 60px; } }
    @media only screen and (max-width: 1920px) {
      #content .bios {
        margin: 10px 0 30px 60px; } }
    @media only screen and (max-width: 1366px) {
      #content .bios {
        margin: 10px 0 30px 40px; } }
    @media only screen and (max-width: 1092px) {
      #content .bios {
        margin: 10px 0 30px 0; } }
    @media only screen and (max-width: 768px) {
      #content .bios {
        margin: 10px 0 30px 0; } }
    @media only screen and (max-width: 480px) {
      #content .bios {
        margin: 10px 0 30px 0; } }
    #content .bios .bio {
      display: grid;
      grid-template-columns: 115px auto;
      grid-column-gap: 20px;
      margin-bottom: 20px;
      /*@include responsive(large-screens) {  }*/
      /*@include responsive(small-screens) {  }
      @include responsive(xsmall-screens) {  }
      @include responsive(mobile-screens) {  }*/ }
      #content .bios .bio.last {
        margin-bottom: 0; }
      @media only screen and (min-width: 1920px) {
        #content .bios .bio {
          display: grid; } }
      @media only screen and (max-width: 1920px) {
        #content .bios .bio {
          display: grid; } }
      @media only screen and (max-width: 1092px) {
        #content .bios .bio {
          display: block; } }
    #content .bios .biopic {
      display: flex;
      justify-content: center;
      flex-direction: column;
      position: relative;
      width: 115px;
      height: 115px;
      overflow: hidden;
      /*@include responsive(large-screens) {  }*/
      /*@include responsive(small-screens) {  }
      @include responsive(xsmall-screens) {  }
      @include responsive(mobile-screens) {  }*/ }
      #content .bios .biopic img {
        width: 122px; }
      @media only screen and (min-width: 1920px) {
        #content .bios .biopic {
          float: none;
          margin: 0; } }
      @media only screen and (max-width: 1920px) {
        #content .bios .biopic {
          float: none;
          margin: 0; } }
      @media only screen and (max-width: 1092px) {
        #content .bios .biopic {
          float: left;
          margin: 0 20px 10px 0; } }
    #content .bios .biotxt {
      display: block;
      position: relative; }
      #content .bios .biotxt p {
        max-width: 900px; }
  #content h2, #content h3 {
    color: #21415e;
    font-size: 1.4em;
    line-height: 1.2em;
    padding-bottom: 4px; }
  #content h3 {
    padding-top: 20px; }
  #content p {
    font-size: 1.2em;
    line-height: 1.4em; }
    #content p.subintro {
      font-family: 'AvenirNextWorldRegular', helvetica, sans-serif;
      font-weight: normal;
      font-style: normal;
      font-size: 1.5em;
      /*@include responsive(small-screens) {  }
      @include responsive(xsmall-screens) {  }
      @include responsive(mobile-screens) {  }*/ }
      @media only screen and (min-width: 1920px) {
        #content p.subintro {
          font-size: 1.5em; } }
      @media only screen and (max-width: 1920px) {
        #content p.subintro {
          font-size: 1.5em; } }
      @media only screen and (max-width: 1366px) {
        #content p.subintro {
          font-size: 1.4em; } }
      @media only screen and (max-width: 1092px) {
        #content p.subintro {
          font-size: 1.3em; } }
    #content p a {
      font-family: 'AvenirNextWorldRegular', helvetica, sans-serif;
      font-weight: normal;
      font-style: normal; }

#sidebar {
  grid-area: sidebar;
  padding: 50px 60px 0 0;
  /*@include responsive(large-screens) { }
  @include responsive(medium-screens) {  }*/
  /*@include responsive(mobile-screens) {  }*/ }
  @media only screen and (min-width: 1920px) {
    #sidebar {
      padding: 50px 60px 0 0; } }
  @media only screen and (max-width: 1920px) {
    #sidebar {
      padding: 50px 60px 0 0; } }
  @media only screen and (max-width: 768px) {
    #sidebar {
      padding: 0 30px 0 0; } }
  @media only screen and (max-width: 480px) {
    #sidebar {
      padding: 0 20px 0 0; } }
  #sidebar .sidecontent {
    padding-left: 30px;
    border-left: solid 1px #c3c3c3;
    /*@include responsive(large-screens) {  }
    @include responsive(medium-screens) { }*/
    /*@include responsive(mobile-screens) {  }*/ }
    @media only screen and (min-width: 1920px) {
      #sidebar .sidecontent {
        padding-left: 30px;
        border-left: solid 1px #c3c3c3; } }
    @media only screen and (max-width: 1920px) {
      #sidebar .sidecontent {
        padding-left: 30px;
        border-left: solid 1px #c3c3c3; } }
    @media only screen and (max-width: 768px) {
      #sidebar .sidecontent {
        padding-left: 40px;
        border-left: none; } }
    @media only screen and (max-width: 480px) {
      #sidebar .sidecontent {
        padding-left: 30px;
        border-left: none; } }
    #sidebar .sidecontent h2 {
      font-family: 'AvenirNextWorldDemi', helvetica, sans-serif;
      font-weight: normal;
      font-style: normal;
      color: #333;
      font-size: 1.0em;
      text-transform: uppercase;
      letter-spacing: 0.04em; }
    #sidebar .sidecontent p {
      padding: 0;
      font-family: 'AvenirNextWorldRegular', helvetica, sans-serif;
      font-weight: normal;
      font-style: normal;
      font-size: 1.0em;
      line-height: 1.5em; }

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