@font-face
{
  font-family: "Source Sans Pro";
  src: url(fonts/SourceSansPro-Light.woff);
  /* local("Ø") forces using no local font called Source Sans Pro */
  src: local("Ø"), url(fonts/SourceSansPro-Light.woff) format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face
{
  font-family: "Source Sans Pro";
  src: url(fonts/SourceSansPro-Semibold.woff);
  /* local("Ø") forces using no local font called Source Sans Pro */
  src: local("Ø"), url(fonts/SourceSansPro-Semibold.woff) format("woff");
  font-weight: 600;
  font-style: normal;
}

body
{
  font-family: "Source Sans Pro";
  font-weight: 300;
  font-size: 18px;
  line-height: 24px;
  margin: 0px;
  background-color: #ececec;
}

/* Header */

.content-block
{
  max-width: 1000px;
  margin: 0px auto;
  position: relative;
  padding: 0px 20px;
}

header
{
  background-color: #ffffff;
  border-top: 8px solid #727272;
  border-bottom: 4px solid #ececec;
  line-height: normal;
}

header a
{
  text-decoration: none;
}

header .content-block > div, nav
{
  display: inline-block;
  vertical-align: bottom;
}

nav ul
{
  list-style: none;
  margin: 0px 27px;
  padding: 0px;
  font-size: 17px;
}

nav li
{
  display: inline-block;
}

nav a
{
  padding: 0px 15px 29px 15px;
  color: #727272;
  display: block;
  border-bottom: 1px solid;
  border-color: transparent;
}

nav a:hover
{
  border-color: #727272;
}

#logo, #bookmark
{
  display: inline-block;
}

#logo img
{
  width: 192px;
}

#logo
{
  padding-top: 34px;
  padding-bottom: 18px;
  vertical-align: bottom;
}

#bookmark
{
  position: absolute;
  right: 0px;
  top: 0px;
}

html[dir="rtl"] #bookmark
{
  right: auto;
  left: 0px;
}

#bookmark span
{
  color: #afafaf;
  font-size: 13px;
  padding: 0px 8px;
}

#bookmark img
{
  vertical-align: middle;
}

#hamburger
{
  display: none;
}

/* Content */
#content
{
  padding-top: 62px;
  padding-bottom: 68px;
  font-size: 18px;
  line-height: 24px;
}

#content-wrapper
{
  background-color: #ffffff;
}

.content-left
{
  max-width: 40%;
  display: inline-block;
  vertical-align: top;
}

#content h1, #content h2
{
  display: inline-block;
  font-weight: 300;
  font-size: 38px;
  line-height: 46px;
  margin-bottom: 17px;
  margin-top: 0px;
}

#content h2
{
  font-size: 30px;
  margin-top: 17px;
}

.note
{
  padding: 10px;
  border: 1px solid #27AAE1;
  border-radius: 5px;
}

#content .note h1
{
  margin: 0px;
}

#promo-image-mobile
{
  display: none;
  width: 80%;
  margin: 17px auto;
}

#promo-image
{
  margin-left: 3%;
  width: 54%;
  display: inline-block;
}

html[dir="rtl"] #promo-image
{
  margin-left: 0%;
  margin-right: 3%;
}

#content p
{
  margin: 17px 0px;
}

#content a, #modal a, #form-success
{
  color: #139dd1;
}

#content #email-me
{
  display: block;
  padding-bottom: 17px;
  margin: 0px;
}

#content #badges
{
  margin-bottom: 14px;
}

#badges a, #social-media a 
{
  text-decoration: none;
}

#playstore img
{
  width: 43%;
  max-width: 172px;
}

#appstore img
{
  width: 50%;
  max-width: 203px;
}

#badges a:not(:first-child)
{
  margin-left: 10px;
}

html[dir="rtl"] #badges a:not(:first-child)
{
  margin-left: 0px;
  margin-right: 10px;
}

#footnotes
{
  margin-top: 48px;
  padding-top: 13px;
  border-top: 1px solid #cccccc;
}

#footnotes, #privacy
{
  color: #727272;
  font-size: 13px;
  line-height: 16px;
}

#footnotes ul
{
  position: relative;
  margin: 0px;
  padding: 0px;
}

#footnotes li
{
  list-style: none;
  margin-left: 20px;
}

#footnotes li::before
{
  display: table-cell;
  position: absolute;
  left: 0px;
}

html[dir="rtl"] #footnotes li
{
  margin-left: 0px;
  margin-right: 20px;
}

html[dir="rtl"] #footnotes li::before
{
  right: 0px;
  left: auto;
}

#footnotes li:nth-child(1)::before
{
  content: "*";
}

#footnotes li:nth-child(2)::before
{
  content: "**";
}

/* Footer */
footer
{
  min-height: 104px;
  background-color: #ececec;
  color: #333333;
  font-size: 13px;
  line-height: 16px;
}

footer p
{
  margin: 17px 0px;
}

footer a
{
  font-weight: 600;
  color: #333333;
}

#language
{
  vertical-align: middle;
  margin-right: 10px;
}

html[dir="rtl"] #language
{
  margin-left: 10px;
  margin-right: 0px;
}

#social-media
{
  display: inline-block;
  vertical-align: middle;
  margin: 10px 0px;
}

#social-media a
{
  margin: 0px 3px;
}

#modal
{
  padding: 17px 34px;
  margin: auto;
  background-color: #ffffff;
  position: fixed;
  top: 200px;
  left: 0px;
  right: 0px;
  width: 800px;
  z-index: 2;
}

#overlay
{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

#modal-close
{
  display: block;
  width: 17px;
  height: 17px;
  background-image: url("/National_Library/20181105034639oe_/https://adblockbrowser.org/images/close-icon.png");
  position: absolute;
  right: 17px;
}

html[dir="rtl"] #modal-close
{
  left: 17px;
  right: auto;
}

#modal-close:hover
{
  opacity: 0.6;
}

#modal-close:active
{
  opacity: 0.8;
}

#form-success, #form-invalid, #form-error
{
  display: none;
}

.success #form-success, .invalid #form-invalid, .error #form-error
{
  display: block;
}

#modal, #overlay
{
  opacity: 0;
  visibility: hidden;
  -webkit-transition: visibility 150ms linear, opacity 150ms linear;
  transition: visibility 150ms linear, opacity 150ms linear;
}

.modal #modal, .modal #overlay
{
  visibility: visible;
  opacity: 1;
}

#modal > *
{
  margin-bottom: 17px;
}

#modal h1
{
  line-height: 46px;
  margin-top: 51px;
  font-size: 38px;
  font-weight: 300;
}

#modal p 
{
  margin-top: 0px;
}

#request-links input
{
  height: 34px;
  width: 500px;
  border: 1px solid #afafaf;
  padding: 0px 8px;
  color: #727272;
}

#request-links button
{
  height: 36px;
  color: #ffffff;
  background-color: #139dd1;
  border: none;
  cursor: pointer;
  padding: 0px 20px;
  font-size: 18px;
  margin: 0px 9px;
}

#form-invalid, #form-error
{
  color: #ff0000;
}

#request-links button:hover
{
  -moz-box-shadow: 0px 0px 5px #5D5D5D;
  -webkit-box-shadow: 0px 0px 5px #5D5D5D;
  box-shadow: 0px 0px 5px #5D5D5D;
}

@media (max-width: 700px)
{
  #promo-image, #bookmark, #content #email-me
  {
    display: none;
  }

  #promo-image-mobile
  {
    display: block;
  }

  header
  {
    border-bottom: 0px;
  }

  header .content-block
  {
    padding: 0px;
  }

  header .content-block > div
  {
    display: block;
    margin: 0px 24px;
    position: relative;
  }

  nav.closed ul li
  {
    display: none;
  }

  nav a
  {
    border: none;
  }

  #logo
  {
    padding: 34px 0px 17px 0px;
    width: 192px;
  }

  #content #badges
  {
    max-width: 500px;
    text-align: center;
    margin: 34px auto;
  }

  #logo img
  {
    width: inherit;
  }

  #hamburger
  {
    position: absolute;
    top: 40px;
    right: 0px;
    display: block;
  }

  html[dir="rtl"] #hamburger
  {
    right: auto;
    left: 0px;
  }

  nav
  {
    display: block;
  }

  nav ul
  {
    border-top: 4px solid #ececec;
    margin: 0px;
  }

  nav li
  {
    width: 100%;
    height: 85px;
    margin: 0px;
    border-bottom: 1px solid #ececec;
  }

  nav li > *
  {
    display: block;
    text-align: center;
    vertical-align: middle;
    line-height: 80px
  }

  nav li:last-child
  {
    border-bottom: 4px solid #727272;
  }

  .content-left
  {
    max-width: 100%;
    display: block;
    margin: 0px auto;
  }

  #content h1
  {
    font-size: 28px;
    line-height: 36px;
  }

  #content
  {
    padding: 34px 20px 68px 20px;
  }

  #footnotes
  {
    margin-top: 34px;
  }
}