/**
 * Complete and utter hackjob. Proceed at your own risk.
 *
 * ATTN
 *
 * These are rules from the old site. As we port things over, consider removing these
 *
 * BEGIN OLD SITE RULES
 */

:root {
  --top-bar-spacer: 46px;
}

html,
body {
  margin: 0;
  padding: 0;
}

html::-webkit-scrollbar {
  width: 0px;
  background: transparent;
  scrollbar-width: none;
  /* For Firefox */
  -ms-overflow-style: none;
  /* For Internet Explorer and Edge */
}

/**
 * Sections.
 */

.section {
  position: relative;
  padding: 50px 41px;
}

.section .input-text,
.footer .input-text {
  /*margin: 12px 0 26px 0;*/
  margin: 6px 0px !important;
  padding: 8px 0 !important;
}

.section-billboard {
  text-align: center;
}

.section-billboard .form {
  padding: 24px;
}

.section-billboard .button-submit {
  width: 269px;
  margin-bottom: 20px;
}

.section-billboard.bg-dark .input-text {
  color: white;
}

.section-learn-more {
  text-align: left;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 660px;
}

.section-learn-more .copy {
  width: 25ch;
}

.section-meet-andrew {
  background-image: url(/wp-content/uploads/meet-andrew.png);
}

.section-policies {
  background-image: url(/wp-content/uploads/capitol-building.png);
}

.section-video {
  overflow: hidden;
  color: var(--primary-light);
  border: 10px solid var(--secondary-accent);
  position: relative;
  padding: 0;
  text-align: center;
}

.section-video .video {
  padding-bottom: 181%;
}

.section-video .video .video-iframe {
  background-color: var(--primary-dark);
  position: absolute;
  top: 0;
  min-width: 100vh;
  min-height: 100vh;
  height: 100%;
  transform: translateX(-50%) translateZ(0);
  z-index: -1;
}

.section-video .video-overlay {
  position: absolute;
  background-color: black;
  opacity: 0.7;
  height: 100%;
  width: 100%;
}

.section-video .video-copy {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate3d(-50%, 0, 0);
  padding: 20px;
}

.section-video .video-play-button {
  content: url(svg/video-play-button.svg);
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

.form {
  text-align: left;
  max-width: 340px;
  margin: 0 auto;
}

.form .label-input,
.form .input-text {
  display: block;
}

.form .input-text {
  width: 100%;
}

/**
 * Footer.
 */

.footer {
  text-align: center;
  padding: 38px 34px 72px 34px;
}

.footer .subheadline {
  margin: 0 0 10px 0;
  color: var(--primary-dark);
  /* font-weight: 500; */
}

.footer .form {
  padding: 34px 46px;
  box-sizing: content-box;
}

.footer p.copy {
  margin: 0 auto;
}

.footer .input-group {
  margin: 6px 0 32px 0;
}

.footer .button-container {
  margin-top: 50px;
}

.footer .footer-nav {
  margin-bottom: 12px;
}

.footer ul {
  list-style-type: none;
}

.footer li {
  display: inline-block;
  margin: 0px 8px;
}

.footer li:first-child {
  margin-left: 0px;
}

.footer li:last-child {
  margin-right: 0px;
}

.footer .link-footer {
  color: var(--primary-neutral);
  text-decoration: none;
  font-size: .75rem;
  font-weight: 600;
}

.footer .link-footer:focus,
.footer .link-footer:hover {
  color: var(--primary-dark) !important;
  transition: none;
}

.footer .social-icons {
  padding: 0;
}

.footer .social-icons-icon {
  display: inline-block;
  height: 36px;
  width: 36px;
  color: var(--primary-neutral);
  margin: 12px 20px;
}

.footer .social-icons-icon:focus,
.footer .social-icons-icon:hover {
  color: var(--primary-dark);
  transition: none;
}

.footer .paid-for-by {
  color: var(--primary-dark);
  font-size: .5rem;
  font-weight: 500;
  border: 1px solid var(--primary-dark);
  width: 244px;
  margin: 12px auto;
  padding: 4px 19px;
  font-size: 8px;
}

.footer .all-rights-reserved {
  font-size: 8px !important;
  font-weight: 400 !important;
  color: var(--primary-dark) !important;
  /* padding-bottom: 10px; */
  margin-bottom: 0;
  font-family: 'montserrat' !important;
  line-height: 0.5;
}

.footer .all-rights-reserved .link-footer {
  font-size: 9px !important;
  font-weight: 400 !important;
  color: var(--primary-dark) !important;
}

/**
 * But make it responsive.
 */

@media (min-width: 700px) {
  .section-billboard .copy,
  .section-video .copy,
  .footer .copy {
    max-width: 35ch;
    margin: 0 auto;
  }

  .section-video .video {
    padding-bottom: 45%;
  }

  .section-video .video .video-iframe {
    width: 100%;
    height: 125%;
    transform: translate3d(-50%, -20%, 0);
  }

  .section-learn-more {
    height: 800px;
  }

  .section-learn-more .copy {
    width: 35ch;
  }

  .section-meet-andrew {
    background-image: url(/wp-content/uploads/meet-andrew-wide.png);
  }

  .section-policies {
    background-image: url(/wp-content/uploads/capitol-building-wide.png);
  }
}

@media screen and (min-width: 800px) {
  .label-input {
    font-size: 18px;
  }

  .input-text {
    padding: 18px 0 21px 0;
    font-size: 18px;
  }

  .input-text.valid ~ .input-text-validation {
    top: 40px;
  }

  .input-text.invalid ~ .input-text-validation {
    top: 40px;
  }
}

@media (min-width: 1000px) {

  .footer .subheadline {
    margin-bottom: 24px;
    font-size: 40px;
  }

  .footer .form {
    padding: 44px 46px;
  }

  .form .button-container {
    margin-top: 56px;
  }

  .footer .paid-for-by {
    margin: 10px auto 16px;
    font-size: 8px;
  }
}

@media (min-width: 1300px) {
  .section .section-inner {
    max-width: 1440px;
    margin: 0 auto;
  }
}

/**
 *  Total theme overrides
 */

#outer-wrap {
  background-color: var(--white);
  transition: transform 0.3s ease-in-out;
  transform-origin: 50% 50%;
  position: absolute;
  left: 0;
  right: 0;
  top: 52px;
  bottom: 0;
  overflow-y: auto;
  -webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.2);
}

@media (min-width: 1000px) {
  #outer-wrap {
    top: 64px;
  }
}

.footer .link-footer {
  font-size: 12px;
  line-height: 13.8px;
  color: var(--primary-neutral) !important;
  font-weight: 500;
}

.input-group {
  position: relative;
  margin: 6px 0 26px 0;
}

.input-group .input-text-validation {
  position: absolute;
  top: 26px;
  right: 0;
  display: none;
}

.input-group .input-text-error-message {
  color: var(--primary-accent);
  display: none;
  font-size: 0.75rem;
  letter-spacing: 0.14px;
  font-weight: 600;
  line-height: 12px;
  margin-left: 18px;
}

.input-text.valid~.input-text-validation {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: var(--tertiary-accent);
  display: inline-block;
}

.input-text.valid~.input-text-validation:after {
  content: url(svg/checkmark-white.svg);
  color: white;
  display: inline-block;
  width: 20px;
  height: 20px;
  padding-left: 5px;
  position: absolute;
  top: -8px;
}

.input-text.invalid~.input-text-validation {
  content: url(svg/exclamation-mark-red.svg);
  width: 20px;
  height: 20px;
  display: inline-block;
}

.input-text.invalid~.input-text-error-message {
  display: block;
  bottom: -18px;
  position: absolute;
}

.button.invalid {
  pointer-events: none;
}

.button.valid {
  pointer-events: all;
}

.link-title.invalid {
  color: var(--primary-neutral);
  cursor: not-allowed;
  pointer-events: none;
}

.footer input[type="text"] {
  margin: 6px 0px !important;
  padding: 8px 0 !important;
}

.footer .button {
  font-size: 18px !important;
  box-sizing: border-box;
  padding: 6px 26px;
  width: 100%;
  max-width: 300px;
  font-size: 16px;
  word-spacing: 0;
}

@media (min-width: 1000px) {
  .footer {
    padding: 100px 100px 22px;
  }

  .footer .subheadline {
    font-size: 40px;
    margin-bottom: 24px;
  }

  .footer input[type="text"] {
    font-size: 20px !important;
    padding: 18px 0 21px 0 !important;
  }

  .footer .label-input {
    font-size: 20px !important;
  }

  .footer .button {
    padding: 10px 26px;
    line-height: 20px;
    font-size: 20px !important;
    width: 100%;
    max-width: 300px;
  }
}

/**
 * END OLD SITE RULES
 */

/**
 * OLD SITE OVERRIDES
 *
 * These override styles from the default WP theme, often not
 * stored in a CSS file but added directly to the initial HTML doc.
 */

div#searchWrap {
  z-index: 8;
}

.header .nav-logo-icon img {
  max-width: none;
}
.header .nav .nav-links .button {
  box-sizing: border-box;
  font-size: 18px;
  line-height: 1;
  padding: 8px 26px;
}

@media (min-width: 1000px) {
  .header .nav .nav-links .button {
    font-size: 20px;
  }
}

.sidebar-host .close-btn {
  font-size: 16px;
}

.sidebar-host .close-btn,
.sidebar-host .button {
  line-height: 1;
}

/**
 * END OLD SITE OVERRIDES
 */

/**
 * ATTN
 *
 * These are rules from the new site, from base.css
 * As we port things over, just re-copy/paste from the latest commit.
 *
 * BEGIN NEW SITE RULES
 */





/**
 * Front page styles.
 */

/**
 * Variables.
 */

 :root {
  --header-height-mobile: 52px;
  --header-height-desktop: 64px;
  --header-side-margin: 24px;
  --top-bar-spacer: 46px;
}


html,
body {
  margin: 0;
  padding: 0;
}

/**
 * No foucing way.
 */

.no-js {
  visibility: hidden;
  opacity: 0;
}

.js {
  visibility: visible;
  opacity: 1;
}

.header {
  position: fixed;
  width: 100%;
  z-index: 10;
  background: var(--primary-light);
  border-bottom: 1px solid var(--primary-neutral);
}

.header-spacer {
  height: var(--header-height-mobile);
}

.has-top-bar .header-spacer {
  height: calc(var(--header-height-mobile) + var(--top-bar-spacer));
}

.header .nav {
  height: var(--header-height-mobile);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
}

.sidebar-host .sidebar-item.close-btn-row {
  align-items: center;
  display: flex;
  height: var(--header-height-mobile);
  justify-content: flex-start;
}

/* Left third of header */
.header .nav-menu {
  display: flex;
  flex: 0;
  justify-content: flex-start;
}

/* Middle third of header */
.header .nav-logo {
  display: flex;
  flex: 0;
  justify-content: center;
  align-items: stretch;
}

/* Logo styles (in either left and middle, depending on width) */
.header .nav-logo-icon.mobile,
.header .nav-logo-icon.desktop {
  flex-direction: column;
  justify-content: center;
}

.header .nav-logo-icon.mobile {
  display: flex;
  /* Padding for usability, margin so its clear where hamburger/logo separate */
  margin: 0 16px;
  padding: 0 8px;
}

.header .nav-logo-icon.mobile img {
  height: 24px;
}

@media (min-width: 1000px) {
  .header .nav-logo-icon.mobile img {
    height: 46px;
    margin: 0 24px;
    padding: 0 16px;
    /* Center the letter 'Y' */
    transform: translate(0, 4px);
  }
}

.header .nav-logo-icon.desktop {
  display: none;
  padding: 0 24px;
}

.header .nav-logo-icon.desktop img {
  height: 46px;
  /* Center the letter 'Y' */
  transform: translate(0, 4px);
}

@media (min-width: 1300px) {
  .header .nav-logo-icon.mobile {
    display: none;
  }

  .header .nav-menu {
    /* Match .nav-links so .nav-logo stays centered */
    flex: 1;
  }

  .header .nav-logo-icon.desktop {
    display: flex;
  }
}

/* Right third of header */
.header .nav .nav-links {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
}

.header .nav .nav-links .link-default,
.header .nav .nav-links .button {
  margin-right: var(--header-side-margin);
}

.sidebar-host .close-btn,
.header .nav .hamburger {
  cursor: pointer;
  display: inline-flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  padding-left: var(--header-side-margin);
  padding-right: 8px;
  text-decoration: none;
}

.header .nav .hamburger:after,
.header .nav .hamburger:before,
.header .nav .hamburger .hamburger-icon {
  background-color: var(--primary-dark);
  content: '';
  display: block;
  height: 3px;
  margin: 3.5px 0;
  cursor: pointer;
  border-radius: 3px;
}

.header .nav .hamburger:before {
  width: 18px;
  transition: width 0.1s ease-in;
}

.header .nav .hamburger .hamburger-icon {
  width: 24px;
  border-radius: 10px;
}

.header .nav .hamburger:after {
  width: 12px;
  transition: width 0.1s ease-in;
}

.header .nav .hamburger:focus:before,
.header .nav .hamburger:hover:before {
  width: 12px;
  transition: width 0.1s ease-in;
}

.header .nav .hamburger:focus:after,
.header .nav .hamburger:hover:after {
  width: 18px;
  transition: width 0.1s ease-in;
}

.header .nav .nav-links .link-default,
.header .nav .nav-links .button-neutral {
  display: none;
}

/**
 * Sections.
 */

.section {
  position: relative;
  padding: 60px 34px;
  box-sizing: border-box;
}

.section.fit-to-viewport {
  /* Note: Modules should set their own minimum functional height */
  height: calc(100vh - var(--header-height-mobile));
  max-height: 1080px; /* For portrait orientation */
}

.has-top-bar .section.fit-to-viewport {
  /* Note: Modules should set their own minimum functional height */
  height: calc(100vh - var(--header-height-mobile) - var(--top-bar-spacer));
}

.section .section-anchor {
  position: absolute;
  top: 0px;
}

.section .input-text,
.footer .input-text {
  margin: 6px 0;
}

/**
 * Sidebar.
 */

.sidebar-host {
  position: fixed;
  z-index: 100;
 }

.sidebar-host .sidebar-overlay {
  display: none;
}

.sidebar-host.open .sidebar-overlay {
  cursor: pointer;
  display: block;
  height: 100vh;
  position: absolute;
  width: 100vw;
}

.sidebar-host .sidebar-container {
  background: var(--primary-dark);
  height: 100vh;
  left: -100vw;
  position: absolute;
  transition: left 0.3s ease-out;
  width: 304px;
}

@media (min-width: 700px) {
  .sidebar-host .sidebar-container {
    width: 454px;
  }
}

@media (min-width: 1400px) {
  .sidebar-host .sidebar-container {
    width: 576px;
  }
}

.sidebar-host.open  .sidebar-container {
  left: 0;
}

.sidebar-host .sidebar-items {
  display: none;
}

.sidebar-host.open .sidebar-items {
  display: block;
  height: 100%;
  overflow-y: auto;
}

.sidebar-host .sidebar-item {
  display: block;
}

.sidebar-host .last-link-item::after {
  content: "";
  display: block;
  height: 24px;
}

.sidebar-host .sidebar-item.link-title {
  padding: 16px 0 16px 64px;
  text-decoration: none;
}

.sidebar-host .sidebar-item.button-row {
  margin: 16px 0 16px 64px;
}

.sidebar-host .button-row .button {
  width: 192px;
}

.sidebar-host .close-btn {
  color: white;
}

.sidebar-host .close-btn:focus, 
.sidebar-host .close-btn:hover {
  color: var(--primary-light-active);
}

.sidebar-host .link-title,
.sidebar-host .button {
  font-size: 18px;
}

@media (min-width: 700px) {
  .sidebar-host .link-title,
  .sidebar-host .button {
    font-size: 28px;
  }

  .sidebar-host .sidebar-item.link-title {
    padding: 20px 0 20px 112px;
  }

  .sidebar-host .sidebar-item.button-row {
    margin: 20px 0 20px 112px;
  }

  .sidebar-host .button-row  .button {
    width: 256px;
  }
}

/**
 * 404
 */

.error-404 {
  width: 100%;
  background: var(--white);
}

.error-404 .page-content {
  width: 100%;
  margin: 0 auto;
  padding: 4em 0;
  text-align: center;
}

.error-404 .page-header {
  margin: 1em 0;
  font-size: 4em;
  line-height: 0.9;
}

.error-404 h1 {
  color: var(--primary-dark);
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
}

.error-404 span.oops {
  padding-right: 0.2em;
}

.error-404 .accent {
  color: var(--primary-accent);
}

.error-404 p {
  padding: 1em 0 3em;
  color: var(--primary-dark);
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
}

.error-404 a, .error-404 a:visited {
  text-decoration: none;
  color: var(--primary-dark);
}

/**
 * Footer.
 */

.footer {
  text-align: center;
  padding: 38px 34px 72px 34px;
}

.footer .subheadline {
  margin-bottom: 10px;
}

.footer .form {
  padding: 34px 24px;
}

.footer .button {
  max-width: 300px;
  width: 100%;
}

.footer-nav {
  margin-bottom: 18px;
}

.footer-nav-item {
  display: inline-block;
  margin: 0px 8px;
}

.footer li:first-child {
  margin-left: 0px;
}

.footer li:last-child {
  margin-right: 0px;
}

.footer .link-footer {
  color: var(--primary-neutral);
  text-decoration: none;
  font-size: .75rem;
  font-weight: 600;
}

.footer .link-footer:focus,
.footer .link-footer:hover {
  color: var(--primary-dark);
}

.footer .social-icons-icon {
  display: inline-block;
  height: 36px;
  width: 36px;
  color: var(--primary-neutral);
  margin: 12px 20px;
}

.footer .social-icons-icon:focus,
.footer .social-icons-icon:hover {
  color: var(--primary-dark);
}

.footer .paid-for-by {
  color: var(--primary-dark);
  font-size: .5rem;
  font-weight: 500;
  border: 1px solid var(--primary-dark);
  max-width: 204px;
  margin: 14px auto;
  padding: 6px 19px;
}

.footer .all-rights-reserved {
  font-size: 0.5rem;
  color: var(--primary-dark);
  font-weight: 400;
}

.footer .all-rights-reserved .link-footer {
  font-size: 0.5rem;
  font-weight: 400;
  color: var(--primary-dark);
}

/**
 * But make it responsive.
 */

/**
 * Tablet.
 */

@media (min-width: 700px) {

  .header .nav .nav-links .link-default,
  .header .nav .nav-links .button-neutral {
    display: inline-block;
  }

  .header .nav .nav-links .link-default {
    color: var(--primary-dark);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 10px 0;
    letter-spacing: 0.88px;
    line-height: 22px;
  }

  .header .nav .nav-links .link-default:focus,
  .header .nav .nav-links .link-default:hover {
    color: var(--primary-light-active);
  }

  .header .nav .button {
    width: 160px;
  }

  .footer .copy {
    max-width: 35ch;
    margin: 0 auto;
  }

  .sidebar .button {
    width: 250px;
    max-width: 40%;
  }
}

/**
 * Min desktop.
 */

@media (min-width: 1000px) {

  /**
   * Top nav.
   */

  .header-spacer,
  .header .nav,
  .sidebar-host .sidebar-item.close-btn-row {
    height: var(--header-height-desktop);
  }

  /**
   * Sections.
   */

  .section {
    padding: 80px;
  }

  .section.fit-to-viewport {
    /* Note: Modules should set their own minimum functional height */
    height: calc(100vh - var(--header-height-desktop));
  }

  .has-top-bar .section.fit-to-viewport {
    /* Note: Modules should set their own minimum functional height */
    height: calc(100vh - var(--header-height-desktop) - var(--top-bar-spacer));
  }

  .section .subheadline {
    margin: 20px 0 20px 0;
    font-size: 32px;
    line-height: 1;
  }

  .section .copy {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 500;
  }

  .section .label-tag {
    padding: 8px 13px 8px 12px;
    font-size: 18px;
  }

  .section .link-cta {
    font-size: 18px;
    letter-spacing: normal;
    line-height: 2;
  }

  /**
   * Footer.
   */

  .footer {
    padding: 100px 100px 22px;
  }

  .footer .subheadline {
    margin-bottom: 24px;
    font-size: 40px;
  }

  .footer .form {
    padding: 44px 46px;
  }

  .footer .paid-for-by {
    margin: 19px auto;
  }
}

/**
 * Regular desktop.
 */

@media (min-width: 1300px) {
  .section.fit-to-viewport {
    /* Limit height in portrait orientation while being sensible for large monitor */
    max-height: 1440px;
  }

  /**
   * Padding.
   */

  .section {
    padding: 100px;
  }

  .section .subheadline {
    margin: 34px 0 24px 0;
    font-size: 34px;
    line-height: 1;
  }

  .section .copy {
    font-size: 20px;
    line-height: 1.8;
    font-weight: 500;
  }

  .section .label-tag {
    padding: 8px 13px 8px 12px;
    font-size: 22px;
  }

  .section .link-cta {
    font-size: 22px;
  }

  /**
   * Max widths.
   */

  .section .section-inner {
    max-width: 1440px;
    margin: 0 auto;
  }

}

/* Material Icon rules. Consider moving these into base.css */

.material-icons {
  vertical-align: bottom;
}

.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/**
 * END NEW SITE RULES
 */