/* Presets */

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
html {
  font-size: 62.5%; /* Browser default = 16px; this sets the default font size to 10px, meaning 1rem (root em) is now equivalent to 10px. */
}
body {
  font-size: 16px; font-size: 1.6rem; /* This sets the text to appear as 16px by default. The first '16px' is a fallback for the modern '1.6rem'. */
}
body {
  line-height: 1.25em /* = 20px by default */
  width: 100%;
  overflow-x: hidden;
}
@media (pointer: fine) /* This leaves touchscreen devices by default and targets non-touch devices */ {
  body { overflow-y: scroll; } /* Force scrollbar visibility to maintain consistency */
}
body,
input {
  font-family: 'Arial', sans-serif;
}



/* Defaults */

h1,
h2 {
  font-size: 2.5em;
  letter-spacing: -0.025em;
}
main ul {
  list-style-type: none;
}
main ul li {
  padding-left: 1.5em;
}
/*main ul li:before {
  content: '\2014';
  display: inline;
  position: absolute;
  margin-left: -1.5em;
}*/

/* p a,
li a {
  text-decoration: none;
  position: relative;
  color: inherit;
  font-weight: inherit;
}
p a:not(.button):before,
p a:not(.button):after,
li a:not(.button):before,
li a:not(.button):after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 0px;
  border-style: solid;
  border-color: inherit;
  border-width: 0 0 2px; border-width: 0 0 .2rem;
  opacity: .4;
  left: 0;
  bottom: -1px; bottom: -.1rem;
  transition: width .15s ease-out;
}
p a:not(.button):after,
li a:not(.button):after {
  width: 0;
  opacity: 1;
}
p a:not(.button):hover:after,
li a:not(.button):hover:after {
  width: 100%;
} */

p a,
li a {
  text-decoration: underline;
  position: relative;
  color: inherit;
  font-weight: inherit;
  transition: text-decoration-color .15s;
}
p a:hover,
li a:hover,
table a:hover {
  text-decoration-color: #a6a6a6;
}
a.button {
  position: relative;
  display: inline-block;
  border: none;
  outline: none;
  text-decoration: none;
  font: inherit;
  font-size: inherit;
  font-weight: bold;
  letter-spacing: -0.025em;
  line-height: 1em;
  padding: 16px 18px; padding: 1.6rem 1.8rem;
  box-sizing: border-box;
  color: white;
  background-color: #000f9f;
  transition: background-color .15s;
}
a.button:hover {
  background-color: black;
}


/***** Narrow screens *****/

@media (max-width: 1023px) {
  a.button {
    padding: 14px 16px; padding: 1.4rem 1.6rem;
  }
}



/* Page Wrapper */

#page-wrapper {
  min-height: 100%;
  margin: 0 auto;
  /*overflow-x: hidden;*/
}
#page-wrapper,
#page-wrapper > * {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}
#page-wrapper > * {
  padding-left: 104px; padding-left: 10.4rem;
  padding-right: 104px; padding-right: 10.4rem;
  padding-top: 40px; padding-top: 4rem;
  padding-bottom: 40px; padding-bottom: 4rem;
  margin: 0 auto;
}
@media (min-width: 1923px) {
  #page-wrapper > * {
    max-width: 1715px;
  }
}

/***** Narrow screens *****/

@media (max-width: 1023px) {

  #page-wrapper > * {
    padding-left: 59px; padding-left: 5.9rem;
    padding-right: 59px; padding-right: 5.9rem;
    padding-top: 20px; padding-top: 2rem;
    padding-bottom: 20px; padding-bottom: 2rem;
  }

}



/* Header */

#page-wrapper > header {
  position: relative;
  box-sizing: border-box;
}
header #header-wrapper {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 72px; height: 7.2rem;
}
header .logo {
  position: relative;
  float: left; clear: both;
  margin-left: -64px; margin-left: -6.4rem;
}
header .logo img {
  height: 72px; height: 7.2rem;
}
header #ray-quicksearch-wrapper {
  display: block;
  position: relative;
  z-index: 3;
  margin: 0 auto;
  width: 50%;
  height: 48px; height: 4.8rem;
  box-sizing: border-box;
}
header #ray-quicksearch-wrapper #ray-quicksearch-title {
  display: inline-block;
  position: relative;
  font-weight: bold;
  width: auto;
  width: 119px; width: 11.9rem;
  line-height: 1em;
  padding: 16px; padding: 1.6rem;
  padding-left: 0;
  box-sizing: border-box;
}
header #ray-quicksearch-wrapper #ray-quicksearch-title h1 {
  font-size: inherit;
}
header #ray-quicksearch-wrapper form input[type="search"],
header #ray-quicksearch-wrapper form input[type="submit"] {
  border: none;
  outline: none;
  font: inherit;
  box-sizing: border-box;
}
header #ray-quicksearch-wrapper form input[type="submit"] {
  display: block;
  position: absolute;
  cursor: pointer;
  font-weight: bold;
  letter-spacing: -0.025em;
  width: auto;
  width: 87px; width: 8.7rem;
  line-height: 1em;
  padding: 14px 16px; padding: 1.4rem 1.6rem;
  color: black;
  background-color: white;
  border: 2px solid black;
  top: 0; right: 0;
  transition: background-color .15s, color .15s;
}
header #ray-quicksearch-wrapper form input[type="submit"]:hover {
  background-color: black;
  color: white;
}
header #ray-quicksearch-wrapper form input[type="search"] {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 16px; padding: 0 1.6rem;
  background-color: white;
  border: 2px solid black;
  border-right: none;
}
header #ray-quicksearch-wrapper > form > div {
  position: absolute;
  top: 0;
  left: 119px; left: 11.9rem;
  right: 87px; right: 8.7rem;
  height: 100%;
}
header #login-logout-wrapper {
  position: absolute;
  right: 0;
  text-align: right;
  z-index: 200;
}
header #login-logout-wrapper a.logout,
header #login-logout-wrapper.logged-in a.login,
header #login-logout-wrapper .logged-in-user {
  display: none;
}
header #login-logout-wrapper a.login,
header #login-logout-wrapper.logged-in a.logout {
  display: inline-block;
}
header #login-logout-wrapper.logged-in .logged-in-user {
  display: block;
}
header #login-logout-wrapper .logged-in-user {
  width: auto;
  max-width: 100%;
  margin-top: 40px; margin-top: 4rem;
}
header #login-logout-wrapper .logged-in-user p {
  position: relative;
  display: block;
  padding: 16px 18px; padding: 1.6rem 1.8rem;
  margin: -16px 0 0 0;
  background-color: #ffffff;
}
/* header #login-logout-wrapper .logged-in-user p:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 100%;
  right: -1000%;
  height: 100%;
  background-color: inherit;
} */
header #login-logout-wrapper .logged-in-user p .logged-in-as {
  font-weight: bold;
}
header #ray-quicksearch-wrapper,
header #login-logout-wrapper {
  top: 24px; top: 2.4rem;
}



/* Masthead */

#page-wrapper > #masthead {
  display: block;
  position: relative;
  height: 456px; height: 45.6rem;
  max-width: none;
  background-image: url(./images/anders-jilden-O85h02qZ24w-unsplash.jpg);
  background-size: cover;
  background-position: center bottom;
}
#page-wrapper > #masthead #masthead-wrapper {
  display: block;
  position: relative;
  margin: 0 auto;
}
@media (min-width: 1923px) {
  #page-wrapper > #masthead #masthead-wrapper {
    max-width: 1507px;
  }
}
#masthead .title-container {
  display: block;
  width: auto;
  height: auto;
}
#masthead h1 {
  position: absolute;
  top: 0; left: 0;
  display: inline;
  font-size: inherit;
  font-size: 3.333333333333333em;
  line-height: 40px; line-height: 4rem;
  padding: 20px 22px; padding: 2rem 2.2rem;
  color: black;
  background-color: white;
}
#masthead h1 span { font-weight: bold; }
#masthead h2 {
  position: absolute;
  top: 80px; left: 16.666666666666667%;
  display: inline;
  font-size: inherit;
  font-size: 1.666666666666667em;
  line-height: 20px; line-height: 2rem;
  padding: 16px 18px; padding: 1.6rem 1.8rem;
  color: white;
  background-color: black;
}



/* Nav */

#page-wrapper > nav {
  display: block;
  position: absolute;
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
}
nav #nav-wrapper {
  display: block;
  position: relative;
  width: 16.666666666666667%; /* fallback */
  width: calc(100%/6); /* 2 12ths */
  height: 100%;
  padding: 40px; padding: 4rem;
  padding-left: 0;
  padding-right: 20px; padding-right: 2rem;
  box-sizing: border-box;
  color: white;
  background-color: black;
}
nav #nav-wrapper:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 100%;
  left: -104px; left: -10.4rem;
  height: 100%;
  background-color: inherit;
}
nav ul {
  display: block;
  position: relative;
  list-style: none;
  padding-left: 18px; padding-left: 1.8rem;
  border-left: 2px solid white;
}
nav ul li {
  display: block;
  position: relative;
  line-height: 1em;
  vertical-align: baseline;
  margin-top: 20px; margin-top: 2rem;
}
nav ul:first-child li:first-child {
  margin-top: 0;
}
nav ul li a {
  display: inline;
  position: relative;
  font-weight: normal;
  letter-spacing: -0.0125em;
  color: white;
  transition: color .15s, text-decoration-color .15s;
}



/* Main */

#page-wrapper > main {
  display: block;
  position: relative;
  height: auto;
  padding-top: 0; 
  padding-bottom: 0;
  min-height: 100vh;
}

#page-wrapper > main.home {
  margin-top: -152px; margin-top: -15.2rem;
}

#page-wrapper > main p,
#page-wrapper > main li {
  line-height: 1.5em;
}
#page-wrapper > main p:not(:first-child),
#page-wrapper > main ul:not(:first-child),
#page-wrapper > main li:not(:first-child) {
/*  padding-top: 1em;*/
}
main #main-wrapper {
  display: block;
  position: relative;
  z-index: 4;
  width: 66.666666666666667%; /* fallback if needed */
  width: calc(100%/1.5); /* 8 12ths */
  width: 83.333333333333333%; /* fallback if needed */
  width: calc(100%/1.2); /* 10 12ths */
  height: auto;
  margin: 0 0 0 auto;
  padding: 40px 0 40px 40px; padding: 4rem 0 4rem 4rem;
  box-sizing: border-box;
  background-color: white;
  min-height: 152px; min-height: 15.2rem;
}
main #main-wrapper:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 100%;
  right: -104px; right: -10.4rem;
  height: 100%;
  background-color: inherit;
}

/***** Narrow screens *****/

@media (max-width: 1023px) {

  /* Header */

  header #header-wrapper {
    height: 44px; height: 4.4rem;
  }
  header .logo {
    margin-left: -39px; margin-left: -3.9rem;
  }
  header .logo img {
    height: 44px; height: 4.4rem;
  }
  header #ray-quicksearch-wrapper #ray-quicksearch-title {
    display: none;
  }
  header #ray-quicksearch-wrapper {
    height: 44px; height: 4.4rem;
  }
  header #ray-quicksearch-wrapper #ray-quicksearch-title {
    padding-top: 14px; padding-top: 1.4rem;
    padding-bottom: 14px; padding-bottom: 1.4rem;
  }
  header #ray-quicksearch-wrapper > form > div {
    left: 0;
  }
  header #ray-quicksearch-wrapper form input[type="submit"] {
    padding: 12px 14px; padding: 1.2rem 1.4rem;
  }
  header #login-logout-wrapper .logged-in-user {
    margin-top: 20px; margin-top: 2rem;
  }
  header #login-logout-wrapper .logged-in-user p {
    padding-right: 0;
  }
  header #login-logout-wrapper .logged-in-user p:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 100%;
    right: -104px; right: -10.4rem;
    height: 100%;
    background-color: inherit;
  }
  header #ray-quicksearch-wrapper,
  header #login-logout-wrapper {
    top: 0;
  }


  /* Masthead */

  #page-wrapper > #masthead {
    height: 320px; height: 32rem;
  }
  #page-wrapper > #masthead {
    padding-top: 60px; padding-top: 6rem;
  }
  #masthead h1 {
    font-size: inherit;
    font-size: 2.5em;
    padding: 14px 16px; padding: 1.4rem 1.6rem;
  }
  #masthead h2 {
    top: 68px; top: 6.8rem;
    left: 0;
    font-size: inherit;
    font-size: 1.25em;
    padding: 14px 16px; padding: 1.4rem 1.6rem;
  }


  /* Nav */

  nav #nav-wrapper {
    width: 25%;
  }


  /* Main */

  #page-wrapper > main.home {
    margin-top: -84px; margin-top: -8.4rem;
  }
  main #main-wrapper {
    margin: 0 0 0 auto;
    width: 75%;
    padding-right: 0;
  }
}





/***** Narrow touchscreens *****/

@media (pointer: coarse) and (max-width: 1023px) {
  #page-wrapper > * {
    padding-right: 20px; padding-right: 2rem;
    padding-left: 20px; padding-left: 2rem;
  }



  header .logo {
    margin-left: 0;
  }
  header #ray-quicksearch-wrapper {
    width: 33.333333333333333%;
  }
  header #ray-quicksearch-wrapper form input[type="submit"] {
    visibility: hidden;
  }
  header #ray-quicksearch-wrapper form input[type="search"] {
    border-right: 2px solid black;
  }
  header #ray-quicksearch-wrapper > form > div {
    left: 22px; right: -22px;
  }



  nav #nav-wrapper {
    padding: 20px 20px 20px 0; padding: 2rem 2rem 2rem 0;
  }
  nav ul {
    padding: 0;
    border: none;
  }



  main #main-wrapper {
    padding: 30px 10px 30px 30px; padding: 3rem 1rem 3rem 3rem;
  }
}