/**
 * Complete and utter hackjob. Proceed at your own risk.
 */

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 */
}

.viewport {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--primary-dark);
}

.header.top-nav {
  position: fixed;
  width: 100%;
  z-index: 10001;
  background: var(--primary-light);
  transition: transform 0.3s ease-in-out;
  border-bottom: 1px solid var(--primary-neutral);
}

.header.top-nav .nav {
  height: 52px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.header.top-nav .nav .nav-menu {
  display: flex;
  flex: 1;
  justify-content: flex-start;
}

.header.top-nav .nav .nav-logo-icon {
  box-sizing: initial;
  cursor: pointer;
  content: url(svg/yang2020-logo.svg);
  height: 24px;
  align-self: center;
}

@media (min-width: 375px) {
  .header .nav .nav-logo-icon {
    padding: 14px 24px;
  }
}

.header.top-nav .nav .nav-logo {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
}

.header.top-nav .nav .nav-logo .nav-logo-icon {
  display: none;
}

.header.top-nav .nav .nav-links {
  display: flex;
  flex: 1;
  justify-content: flex-end;
}

.header.top-nav .nav .nav-links .button-donate {
  margin-right: 20px;
}

.nav-links li {
  line-height: 16px !important;
  font-size: 16px !important;
  font-weight: 400;
}

.header.top-nav .nav .nav-links {
  text-align: center;
}

.header.top-nav .nav .nav-links .button {
  padding: 8px 26px;
  line-height: 1;
  height: 18px;
  box-sizing: content-box;
  min-width: 40px;
  letter-spacing: 1.13px;
}

.header.top-nav .nav .nav-links .button-neutral {
  margin-right: 24px;
}

.header.top-nav .nav .hamburger {
  font-size: 44px;
  cursor: pointer;
  display: inline-block;
  padding: 9px 10px 8px 20px;
}

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

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

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

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

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

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

.header.top-nav .nav .nav-links .button-neutral {
  display: none;
}

/**
 * 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%;
}

/**
 * Sidebar.
 */

.r-sidebar {
  background: var(--primary-dark);
  color: white;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: auto;
  z-index: -1;
}

.r-sidebar .close-x {
  cursor: pointer;
  content: url(svg/close-x.svg);
  width: 14px;
  height: 14px;
  padding: 20px;
  box-sizing: content-box;
}

.r-sidebar .button {
  width: 194px;
  text-align: center;
  display: block;
  margin: 24px 20px;
  padding: 2px 26px;
  letter-spacing: 1.13px;
}

.r-sidebar ul {
  list-style-type: none;
  padding: 0 0 16px 20px;
  margin-top: -9px;
}

.r-sidebar li {
  margin: 34px 0px;
}

.r-sidebar button {
  display: block;
  margin: 24px 0px;
}

.r-sidebar .link-title {
  font-size: 18px !important;
  transition: none;
}

.r-sidebar .link-title:focus,
.r-sidebar .link-title:focus-within {
  color: white;
}

/**
 * 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:hover {
  color: var(--primary-dark) !important;
  transition: none;
}

a.link-footer {}

.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: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;
}

/**
 * Sidebar animation.
 */

input[data-function*='swipe'] {
  position: absolute;
  opacity: 0;
}

input[data-function*='swipe']:checked~#outer-wrap {
  transform-origin: 50% 50%;
  /*top: 0;*/
  bottom: 0;
  left: 0;
  right: 0;
  transform: translate3d(70%, -26px, 0) scale(0.75);
  position: absolute;
  overflow: hidden !important;
  display: flex;
  width: 100%;
  flex-direction: column;
  z-index: 2;
  pointer-events: none;
}

input[data-function*='swipe']:checked~.header.top-nav {
  transform: translate3d(0, -52px, 0);
}

input[data-function*='swipe']:checked~.r-sidebar {
  z-index: 1;
}


.r-sidebar .sidebar-inner .sidebar-inner-inner {
  width: 70%;
}

/**
 * But make it responsive.
 */

@media (max-width: 479px) {
  input[data-function*='swipe']:checked~#outer-wrap {
    transform: translate3d(70%, -26px, 0) scale(0.75);
  }
}

@media (min-width: 700px) {

  .header.top-nav .nav .nav-logo-icon,
  .header.top-nav .nav .nav-links .button-neutral {
    display: inline-block;
  }

  .header.top-nav .nav .nav-links .button {
    max-width: 104px;
  }

  .header.top-nav .nav .nav-links .button-neutral {
    transition: background-color 0.3s ease-in-out;
  }

  .header.top-nav .nav .nav-links .button-neutral:active {
    transition: background-color 0.3s ease-in-out;
    border-color: white;
  }

  .header.top-nav .nav .button {
    width: 180px;
  }

  .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);
  }


  .r-sidebar .button {
    width: 250px;
    line-height: 32px;
  }

  input[data-function*='swipe']:checked~#outer-wrap {
    transform: translate3d(35%, -31px, 0) scale(.75);
  }

  .r-sidebar .sidebar-inner .sidebar-inner-inner {
    width: 40%;
  }
}

@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) {
  .header.top-nav .nav .nav-links .button {
    padding: 8px 26px 10px;
  }

  .header.top-nav .nav {
    height: 64px;
  }

  .header.top-nav .nav .hamburger {
    align-self: center;
  }

  .header.top-nav .nav .nav-logo-icon {
    height: 46px;
    margin-left: 20px;
    margin-bottom: -6px;
  }

  .header.top-nav .button {
    font-size: 20px !important;
  }

  .r-sidebar .close-x {
    margin: 9px 0;
    font-size: 28px;
  }

  .r-sidebar ul {
    margin-top: -18px;
  }

  .r-sidebar li {
    margin: 36px 0;
  }

  .r-sidebar .link-title {
    font-size: 28px !important;
  }

  .r-sidebar .button {
    font-size: 26px !important;
    padding: 5px 26px !important;
  }

  input[data-function*='swipe']:checked~.header.top-nav {
    transform: translate3d(0, -64px, 0);
  }

  input[data-function*='swipe']:checked~#outer-wrap {
    transform: translate3d(35%, -32px, 0) scale(.75);
  }

  .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) {
  .header.top-nav .nav .nav-menu .nav-logo-icon {
    display: none;
  }

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

  input[data-function*='swipe']:checked~#outer-wrap {
    transform: translate3d(25%, 0, 0) scale(.75);
  }

  /**
   * Max widths.
   */

  .header.top-nav .nav,
  .r-sidebar .sidebar-inner,
  .section .section-inner {
    max-width: 1440px;
    margin: 0 auto;
  }

  .r-sidebar .sidebar-inner .sidebar-inner-inner {
    width: 30%;
  }
}

/**
 *  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: 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;
  }
}

.header.top-nav button,
.r-sidebar button {
  background-color: var(--transparent);
  font-size: 16px;
  padding: 0px;
  text-transform: none;
  width: auto;
  word-spacing: 0px;
  border-style: solid;
  font-size: 18px;
  padding: 0.875rem;
  min-width: 160px;
  letter-spacing: 1.13px;
  font-weight: 500;
  border-radius: 30px;
  cursor: pointer;
  border-width: 2px;
}

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

a.link-footer {}

.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-group {}

  .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;
  }
}