html,
body {
  overflow-x: hidden; /*without this, website shifts around in the viewport of mobile devices*/
}
html {
  scroll-behavior: smooth;
}
.jumbo-animate {
  animation-duration: 2s;
}

#star {
  animation-delay: 1s;
}
#right-jumbo {
  animation-duration: 3s;
}
#council {
  animation-duration: 5s;
}

.color1 {
  color: rgb(214, 26, 61);
}
.color2 {
  color: rgb(24, 65, 144);
}

.bg-color1 {
  background-color: rgb(24, 65, 144);
}

.bg-color2 {
  background-color: rgb(214, 26, 61);
}
.bg-gradient {
  background-image: linear-gradient(to right, rgb(24, 65, 144));
}

.bg-image {
  /* background-image: url("images/constitution-min.jpg"); */
  background-image: -webkit-gradient(
      linear,
      left top,
      right bottom,
      from(rgba(0, 0, 0, 0.5)),
      to(rgba(0, 0, 0, 0.7))
    ),
    url("images/constitution-min.jpg");
  background-image: -o-linear-gradient(
      top left,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.7)
    ),
    url("images/constitution-min.jpg");
  background-image: linear-gradient(
      to bottom right,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.7)
    ),
    url("images/constitution-min.jpg");
  background-size: cover;
  /* background-attachment: fixed; */
  background-position: center;
}

.font2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  /* font-size: 75%; */
}
.border-top {
  border-top: 1px solid rgb(24, 65, 144);
}
.border-bottom2 {
  border-bottom: 2px solid rgb(214, 26, 61);
}

body {
  /* font-family: "Montserrat", sans-serif; */
  font-family: "Libre Franklin", sans-serif;
  /* font-size: 1.2rem;   */
}

h1,
h2,
.font1 {
  font-family: "Libre Franklin", sans-serif;
}
.display-2 {
  font-weight: 500;
}

h3,
h4 {
  font-family: "Libre Franklin", sans-serif;
}
h3 {
  color: rgb(24, 65, 144);
}
/* ACCESSIBILITY */
a {
  color: #005a9c;
  font-weight: 600;
}

/***NAVIGATION***/
.logo-text {
  font-size: 24px;
}
.logo-icon {
  height: 60px;
}
.logo-text a {
  text-decoration: none;
}

.logo-img {
  max-height: 100px;
}

.nav-logo {
  max-height: 100px;
}

.nav {
  padding-right: 2rem;
}

.navbar-light .navbar-nav .nav-link,
.dropdown-item {
  text-transform: uppercase;
  color: rgb(24, 65, 144);
  letter-spacing: 1px;
  font-weight: 300;
  opacity: 1;
}
#active {
  color: rgb(24, 65, 144);
  font-weight: 800;
}

.navbar-light .navbar-nav .nav-link:hover,
.dropdown-item:hover {
  color: rgb(24, 65, 144);
  opacity: 0.6;
}
.navbar-light .navbar-nav .navbar-toggler-icon {
  color: rgb(24, 65, 144);
}
.navbar-toggler,
.navbar-toggler:link,
.navbar-toggler:visited,
.navbar-toggler:hover,
.navbar-toggler:active {
  border-color: #fff;
}

/*removes yellow border line surrounding hamburger*/
button.navbar-toggler:focus {
  outline: 1px none;
}

/*mobile X displayed when menu is open*/
.navbar-toggler > .close {
  display: inline;
}
.navbar-toggler.collapsed > .close,
.navbar-toggler:not(.collapsed) > .navbar-toggler-icon {
  display: none;
}
/*end mobile X css*/

#donate {
  color: #fff;
}
#donate:hover {
  color: rgb(24, 65, 144);
}

.btn-primary {
  color: #fff;
  background-color: rgb(24, 65, 144);
  border: 1px solid rgb(24, 65, 144);

  /* color: rgb(24,65,144);
    background-color: white;
    border: 1px solid white; */
}

.btn-primary:hover {
  background-color: #fff;
  border: 1px solid rgb(24, 65, 144);
  color: rgb(24, 65, 144);
  /* background-color: rgb(24,65,144);
    border: 1px solid #fff;
    color: #fff; */
}
.btn-outline-primary {
  color: rgb(24, 65, 144);
  border: 1px solid rgb(24, 65, 144);
  /* background-color: rgb(24,65,144);
    border: 1px solid #fff;
    color: #fff; */
}
.btn-outline-primary:hover {
  background-color: rgb(24, 65, 144);
  border: 1px solid rgb(24, 65, 144);
  color: #fff;
  /* background-color: #fff;
    border: 1px solid #fff;
    color: rgb(24,65,144); */
}

/*adjust spacing on adjacent buttons*/
.btn-space {
  margin-left: 2%;
}
.btn-div {
  margin-top: 4%;
  margin-bottom: 6%;
}

.text-box {
  max-width: 800px;
  margin: 2rem auto;
  background-color: #fff;
  padding: 2rem;
}

.line-color2 {
  background-color: rgba(214, 26, 61, 0.4);
  width: 40%;
  margin: 1rem auto 2rem auto;
  height: 1px;
}
.line-color1 {
  background-color: rgb(24, 65, 144);
  width: 70%;
  height: 1px;
}
.svg-color1 {
  fill: rgb(24, 65, 144);
  width: 50px;
}
.svg-white {
  fill: white;
  width: 60px;
  display: inline-block;
  animation-delay: 0.6s;
}
.line-white {
  background-color: white;
  width: 70%;
  height: 1px;
}
.svg-sm {
  width: 20;
}
/* GENERAL */
.no-bullets {
  list-style-type: none;
}
.roomy-text {
  letter-spacing: 2px;
}

/*INDEX*/
.flex1 {
  flex: 1;
}
.jumbotron {
  border-radius: 0px;
}

.jumbo-names {
  font-size: 45%;
  font-size: 50%;
}
.jumbotron-img {
  height: 55vh;
  width: auto;
}

.box-3 {
  padding: 2rem 3rem;
  flex: 1;
}
.box-3 h5 {
  text-align: center;
}
.box-3 img {
  width: 100%;
  max-width: 300px;
}

.white-partial-line {
  margin-bottom: 20px;
  height: 1px;
  background-color: white;
  width: 75%;
  margin-left: auto;
  margin-right: auto;
}
.donkey {
  max-width: 100%;
  height: auto;
}
.bg-donkey {
  background-image: url("images/donkey-2025465_1280.png");
  background-image: linear-gradient(
      to bottom right,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.7)
        /* to bottom right,
            rgba(255, 255, 255, 0.5),
            rgba(255, 255, 255, 0.7) */
    ),
    url("images/donkey-2025465_1280.png");
  -webkit-background-size: contain;
  -moz-background-size: contain;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.fw-bolder {
  font-weight: 700;
}
/* EVENTS */
.event-date {
  margin-right: 1rem;
  font-size: 1.2rem;
  color: rgb(214, 26, 61);
}
.event-text {
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-size: 1.1rem;
  display: flex;
}

/*PLAN*/
.plan-sidebar {
  width: 30%;
  width: 50%; /*temporary*/
}
/*DONATE*/
.prominent-text {
  font-size: 1.5rem;
  letter-spacing: 2px;
}
.dp-btn-text {
  font-size: 1.2rem;
}
.mw-btn {
  min-width: 400px;
}

.bg-fnots {
  background-image: url("images/fnots.jpg");
  background-position: bottom;
  background-size: cover;
}
.bg-postcards {
  background-image: url("images/Dem-postcard-pattern.jpg");
  background-position: center;
}

/*CONTACT*/
#section-contact {
  background-image: url("images/candidates-library-min.jpg");
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}
.contact-col {
  margin-top: 20vh;
}
.contact-img {
  display: none;
}
.result {
  color: #fff;
  font-weight: 700;
  background-color: rgb(60, 16, 83);
  padding: 20px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.contact-address p {
  line-height: 1;
}
label {
  margin: 6px 0 6px 0;
  display: block;
  font-size: 1.2rem;
  color: black;
  background-color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.2;
  max-width: 100%;
  display: inline-block;
  padding: 2px;
}
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  max-width: 700px;
  width: 100%;
  padding: 8px;
  display: block;
  background-color: #ffffff;
  border: 1px solid #d8d8d8;
  border-radius: 3px;
  background-clip: padding-box;
}
form li {
  list-style: none;
}
form {
  padding: 1rem;
}

.btn-submit {
  color: white;
  font-size: 1.2rem;
  width: 150px;
  height: 60px;
  border: none;
  border-radius: 3px;
  padding: 18px 30px 18px 30px;
  margin-top: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.error {
  color: red;
  font-weight: 700;
}
/*FOOTER*/
#contact {
  padding-top: 150px;
}
#links {
  padding-top: 150px;
}
.facebook {
  width: 100%;
  height: auto;
  fill: #3b5998;
}

.facebook-link a:hover {
  opacity: 0.6;
}
.paid4 {
  font-size: 70%;
}

/*ANIMATIONS*/
.js-wp-4 {
  opacity: 0;
}
.js-wp-4 {
  opacity: 1;
}
.js-wp-3 {
  opacity: 0;
}
.js-wp-3 {
  opacity: 1;
}
.js-wp-1 {
  opacity: 0;
}
.js-wp-1 {
  opacity: 1;
}
.js--wp-2 {
  opacity: 0;
}
.js-wp-2 {
  opacity: 1;
}
@media (min-width: 1200px) {
  /* #melissa-young:target {
        padding-top: 50px;
    } */
  /*create underline effect on main nav*/
  .nav-link {
    position: relative;
  }

  .nav-link::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    height: 2px;
    background-color: rgb(214, 26, 61);
    transform-origin: center;
    transform: translate(-50%, 0) scaleX(0);
    transition: transform 0.3s ease-in-out;
  }

  .nav-link:hover::before {
    transform: translate(-50%, 0) scaleX(1);
  }
}
@media only screen and (max-width: 767px) {

  /* Adjust styles for screens smaller than medium breakpoint */
  .btn-lg {
    /* Reset or modify styles to achieve smaller button size */
    font-size: 1rem;
    padding: 0.375rem 0.75rem;
  }
}
@media (max-height: 675px) {
  /*laptops*/
  .jumbotron-img {
    height: 61vh;
    width: auto;
  }
}

@media (max-width: 1400px) {
  .display-4 {
    font-size: 2.8rem;
  }
}

@media (max-width: 1200px) {
  /* .candidate-names {
            
            margin: 2rem 0rem 2rem 0rem;
        } */
  .jumbo-left {
    text-align: center;
  }

  .candidates-cropped-home {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
  }
  .plan-sidebar {
    width: 40%;
  }
}
@media (max-width: 1142px) {
  .logo-text {
    font-size: 18px;
  }
}
@media (max-width: 1056px) {
  .box-3 h5 {
    font-size: 1.2rem;
  }
  .box-3 {
    padding: 1.5rem 1rem;
  }
  #section-contact {
    background-image: url("images/candidates-library-ipad3-min.jpg");
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
  }
}
/*Ipad pro only */
@media only screen and (min-device-width: 1024px) and (max-device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  .jumbotron-img {
    height: 35vh;
  }
}

@media (max-width: 992px) {
  .plan-sidebar {
    width: 80%;
  }
  #section-contact {
    background-image: linear-gradient(
      to right bottom,
      rgba(255, 184, 28, 1),
      rgba(255, 184, 28, 0.8)
    );
  }
  .contact-img {
    display: block;
  }
  .contact-col {
    margin-top: 0px;
  }

  .donkey {
    width: 250px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 910px) {
  .display-4 {
    font-size: 2.7rem;
  }
  .logo-text {
    font-size: 18px;
  }
  .logo-icon {
    height: 50px;
  }
  .nav-link {
    font-size: 1rem;
  }
}
@media (max-width: 850px) {
  .box-3 h5 {
    font-size: 1rem;
  }

  .logo-text {
    font-size: 15px;
  }
  .logo-icon {
    height: 40px;
  }
  .navbar {
    padding-left: 0.5rem;
  }
}
@media (max-width: 767px) {
  .display-4 {
    font-size: 2.4rem;
  }
  .box-3 h5 {
    font-size: 1.5rem;
    text-align: center;
  }

  .box-3 img {
    margin-left: auto;
    margin-right: auto;
  }
  .purple-partial-line {
    margin-left: auto;
    margin-right: auto;
  }
  .logo-img {
    height: 80px;
  }
  #contact,
  #links {
    text-align: center;
    padding-top: 30px;
  }
  /* #contact:target,
    #links:target {
        padding-top: 300px;
    } */
  #contact.more-padding,
  #links.more-padding {
    padding-top: 330px;
  }
}
@media (max-width: 650px) {
  .display-4 {
    /* font-size: 2rem; */
  }
  .jumbo-info {
    font-size: 1.6rem;
    text-align: center;
  }
  .bg-image {
    background-image: -webkit-gradient(
        linear,
        left top,
        right bottom,
        from(rgba(0, 0, 0, 0.5)),
        to(rgba(0, 0, 0, 0.7))
      ),
      url("images/constitution-min.jpg");
    background-image: -o-linear-gradient(
        top left,
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.7)
      ),
      url("images/constitution-min.jpg");
    background-image: linear-gradient(
        to bottom right,
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.7)
      ),
      url("images/constitution-min-mobile.jpg");
  }
}
@media (max-width: 576px) {
  .text-box {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .plan-sidebar {
    width: 100%;
  }
  .bg-postcards {
    background-image: url("images/Dem-postcard-pattern-mobile.jpg");
    background-position: center;
    background-size: cover;
  }
}

@media (max-width: 500px) {
  .display-3 {
    font-size: 3rem;
  }
  h3 {
    font-size: 1.35rem;
  }
  .logo-text {
    font-size: 14px;
  }
  .logo-icon {
    height: 35px;
  }
  .candidates-cropped-home {
    width: 100%;
  }
  .jumbo-names {
    font-size: 45%;
  }
  .jumbo-info {
    font-size: 1.3rem;
  }
  .nav-logo {
    max-height: 70px;
  }
  #section-contact ol {
    padding: 0px;
  }
  .prominent-text {
    font-size: 1.3rem;
    letter-spacing: 1px;
  }
  .dp-btn-text {
    font-size: 1rem;
  }
  .tv {
    font-size: 14px;
  }
}
@media (max-width: 445px) {
  .event-text {
    margin-top: 0.8rem;
    margin-bottom: 0.8rem;
    font-size: 1rem;
  }
}
@media (max-width: 420px) {
  .mw-btn {
    min-width: 300px;
  }
  .kb-lm-btn {
    font-size: 1rem;
  }
  .dp-btn-text {
    font-size: 12px;
  }
  .newspaper {
    font-size: 0.9em;
  }
  .display-2 {
    font-size: 4.5rem;
  }
  #plan li {
    font-size: 14px;
  }
  #plan h2 {
    font-size: 24px;
  }
}
@media (max-width: 400px) {
  .event-text {
    font-size: 14px;
    display: block;
    text-align: center;
    margin-bottom: 1.7rem;
  }
  .event-date {
    font-size: 16px;
    margin-bottom: 10px;
    margin-right: 1rem;
    color: rgb(214, 26, 61);
  }
}

@media (max-width: 340px) {
  .logo-text {
    font-size: 12px;
  }

  .logo-icon {
    display: none;
  }
  .display-2 {
    font-size: 4.5rem;
  }
}
@media (max-width: 336px) {
  .btn-space {
    margin-top: 20px;
  }
  .btn-div {
    margin-top: 20px;
  }
}