html {
    scroll-behavior: smooth;
  }
      body {
        background-color: #061834 !important;
      }
  
      #preloader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #FEFCFC;
        /* Change this color if needed */
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10000;
        /* Ensure it stays above all content */
      }
      #preloader h1 {
        color: #223a73;
      font-size: 3em;
      position: absolute;
      text-transform: uppercase;
      text-align: center;
      top: 100px;
  
      }
  
      /* Hide preloader after loading */
      #preloader.hidden {
        display: none;
      }
  
      .background-image {
  
        background-image: url("urn:scrapbook:download:error:https://www.gettrumpjrmemes.com/assets/css/assets/images/bg.gif");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: fixed;
  
      }
  
      .brand-logo {
        width: 8.5em;
        display: flex;
      }
  
      @media (max-width: 60em) {
        .brand-logo {
          display: none;
        }
      }
  
      .brand-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
  
      .content-wrapper .content button {
        z-index: 2;
        top: 15px;
        right: 15px;
        transition: 0.3s all ease-in-out;
      }
  
      .content-wrapper .content button:hover {
        transform: rotate(180deg);
      }
  
      .content-wrapper .content {
        border-radius: 10px;
        min-width: 30em;
      }
  
      @media (min-width: 60em) {
        .content-wrapper .content {
          min-width: 40em;
        }
      }
  
      .trump-image {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        position: relative;
        min-height: 14em;
        width: 100%;
      }
  
      @media (min-width: 48em) {
        .trump-image {
          min-height: 14em;
        }
      }
  
      .trump-image img {
        width: 18em;
        margin: 0 auto;
        position: absolute;
        left: 50%;
        top: 20%;
        transform: translate(-50%, -50%);
      }
  
      .trump-image .sub-text h4 {
        color: #da1333;
        text-transform: uppercase;
        font-weight: 800;
        letter-spacing: 2px;
        font-size: 0.85em;
      }
  
      .trump-image .sub-text h1 {
        color: #da1333;
        text-transform: uppercase;
        font-weight: 800;
        font-size: 1.5em;
      }
  
      .trump-image .sub-text p {
        color: #223a73;
        font-size: 15px;
        margin-top: 0.7em;
      }
  
      .donation-links {
        margin: -1em auto 1em;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        max-width: 25em;
        padding: 0 2em;
      }
  
      .donation-links a {
        padding: 0.8em 2.5em;
        background-color: #223a73;
        color: white;
        border-radius: 5px;
        width: 10em;
        text-align: center;
        margin: 0.4em 0;
        letter-spacing: 1px;
        transition: 0.2s all ease-in-out;
      }
  
      .donation-links a:hover {
        background-color: #0a0228;
      }
  
      .popup2 {
        display: none;
      }
  
      .popup2 .donation-links h5 {
        width: 100%;
        text-align: center;
        margin: 0.7em 0;
        font-size: 1.5em;
        font-weight: 500;
        color: #223a73;
      }
  
      .popup2 .donation-links a {
        width: 48%;
      }
  
      .popup2 .content {
        padding: 2em;
        position: relative;
      }
  
      .popup2 .poppimage {
        width: 100%;
        height: 20em;
        object-fit: contain;
      }
  
      .popup2 .brand-logo {
        width: 7.5em;
        display: flex;
      }
  
      .popup2 .content button {
        position: absolute;
        width: 15px;
        height: 15px;
        background-image: url("");
        z-index: 2;
        top: 2em;
        right: 2em;
        transition: 0.3s all ease-in-out;
      }
  
      @media (max-width: 48em) {
  
        .popup2 .trump-image,
        .popup2 .donation-links {
          max-width: 100% !important;
        }
      }
  
      .contri {
        margin-bottom: 1em;
        margin-right: 4em;
      }
  
      @media (min-width: 48em) {
        .contri {
          margin-bottom: 0;
        }
      }
  
      .b-blue {
        background-color: #213875 !important;
        border-color: #213875 !important;
      }
  
      .b-blue:hover {
        background-color: #0a0228 !important;
        border-color: #0a0228;
      }
  
      .b-blue:after {
        background-image: url("urn:scrapbook:download:error:https://www.gettrumpjrmemes.com/assets/css/assets/images/arw_blue.svg") !important;
      }
  
      @media (max-width: 48em) {
        .home.banner {
          min-height: 70vh;
        }
  
        .home.banner .content h1 {
          max-width: 22em;
          font-size: 2em;
        }
  
        .home.banner .content p {
          max-width: 20em;
        }
      }
  
      .truth-feed .feed {
        padding: 2em 1em;
        justify-content: center;
        /* max-width: 50em; */
        margin: 0 auto;
      }
  
      .truth-feed .feed .post-link .icons img {
        width: 100%;
        height: 7em !important;
        object-fit: contain;
        transition: 0.3s all ease-in-out;
        transform: scale(1);
      }
  
      @media(min-width: 48em) {
        .truth-feed .feed {
          padding: 3.5em 0;
        }
  
        .truth-feed .feed .post-link .icons img {
          height: 4em;
        }
      }
  
      .truth-feed .feed .post-link .icons img:hover {
        transform: scale(0.98);
      }
  
      .text.trump p,
      .OG {
        color: #213875 !important;
        display: -webkit-box;
        max-width: 100%;
  
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
  
      .text.trump a {
        display: none !important;
      }
  
  
      #header.is-fixed #header-logo, #header #header-logo {
        width: 65px;
        height: 65px;
      }
  
      #main {
        margin-top: -105px;
      }
  
      .is-header-desktop #header nav>ul li.level-1 a {
        color: white;
      }
  
      #header {
        border-bottom: 0px;
      }
  
      .signup-form .dform {
        max-width: 100% !important;
      }
  
      .signup-form .dform .dform_text_input {
        width: 100%;
      }
  
      .bg-blue-2c,
      .bg-dblue,
      .footer-overlap:after,
      .btn.btn-filled.btn-blue {
        /* background-color: #061834 !important; */
        /* background-color: #051937 !important; */
        background-color: #061834 !important;
      }
  
  
      .timeline {
        width: 100%;
        height: auto;
        /* max-width: 800px; */
        margin: 0 auto;
        display: flex;
        flex-direction: column;
      }
  
      .timeline-content {
        padding: 20px;
        background: #ba1d1d;
        /* -webkit-box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #242424;
            box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #242424; */
        border-radius: 5px;
        color: white;
        padding: 1.75rem;
        transition: 0.4s ease;
        overflow-wrap: break-word !important;
        margin: 1rem;
        margin-bottom: 20px;
        border-radius: 6px;
      }
  
      .timeline-component {
        margin: 0px 20px 20px 20px;
      }
  
      .timeline p {
        font-size: 20px;
      }
  
      @media screen and (min-width: 768px) {
        .timeline {
          display: grid;
          grid-template-columns: 1fr 3px 1fr;
        }
  
        .timeline-middle {
          position: relative;
          background-image: linear-gradient(45deg, #1163e6, #0c4baf, #061834);
          width: 3px;
          height: 100%;
        }
  
        .main-middle {
          opacity: 0;
        }
  
        .timeline-circle {
          position: absolute;
          top: 0;
          left: 50%;
          width: 30px;
          height: 30px;
          border-radius: 50%;
          background-image: linear-gradient(45deg, #1163e6, #0c4baf, #061834);
          -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
        }
      }
  
      .pulse {
        animation: pulse-animation 2s infinite;
      }
  
      @keyframes pulse-animation {
        0% {
          box-shadow: 0 0 0 0px rgba(186, 29, 29, 0.5);
        }
  
        100% {
          box-shadow: 0 0 0 30px rgba(186, 29, 29, 0);
        }
      }
  
      #timer,
      .timer-title,
      .title-lrg-1 {
        font-size: 2.75em;
        font-weight: 100;
        color: white;
        text-shadow: 0 0 20px #48C8FF;
        font-weight: bold;
        /* text-align: center; */
      }
  
      .timer-title {
        animation: lighttext 1.1s infinite linear;
  
      }
  
      @keyframes lighttext {
        0% {
          opacity: 0;
        }
  
        100% {
          opacity: 1;
        }
      }
  
      #timer div {
        display: inline-block;
        min-width: 90px;
      }
  
      #timer div span {
        color: white;
        display: block;
        font-size: 0.45em;
        font-weight: 400;
      }
  
  
      .pie-container {
        transition: padding 0.7s ease;
        padding: 10px 13%;
      }
  
      #pieChart {
        max-width: none !important;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        counter-reset: break-point 80;
      }
  
      #pieChart svg {
        overflow: visible;
        transition: width 0.7s ease;
      }
  
      #pieChart path {
        cursor: pointer;
      }
  
      #pieText {
        overflow: visible;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
  
      #pieText .panel {
        background-color: #111;
        border: groove 4px #222;
        box-shadow: 8px 10px 20px #000, 4px 5px 25px #000;
        width: 100% !important;
        height: auto !important;
        border-radius: 7px;
        padding: 0 3px;
        float: left;
        transition: height 0.7s ease, padding 0.7s ease;
        perspective: 650px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
  
      .content-wrapper {
        overflow: hidden;
        transform-style: preserve-3d;
      }
  
      #segmentTitle,
      #segmentText {
        text-shadow: 1px 1px 3px #000, 1px 1px 3px #000;
        text-align: center;
      }
  
      #segmentTitle {
        transition: padding 0.7s ease;
        padding: 20px;
        font-size: calc(19px + (35 - 19) * (100vw - 200px) / (1314 - 200));
      }
  
      @media screen and (max-width: 200px) {
        #segmentTitle {
          font-size: 19px;
        }
      }
  
      @media screen and (min-width: 1314px) {
        #segmentTitle {
          font-size: 35px;
        }
      }
  
      #segmentText {
        width: 100%;
        transition: padding 0.7s ease, line-height 0.7s ease;
        padding: 15px 20px 20px;
        font-size: calc(14px + (21 - 14) * (100vw - 200px) / (1314 - 200));
        line-height: 28px;
      }
  
      @media screen and (max-width: 200px) {
        #segmentText {
          font-size: 14px;
        }
      }
  
      @media screen and (min-width: 1314px) {
        #segmentText {
          font-size: 21px;
        }
      }
  
      @media (max-width: 360px) {
        div.pie-container {
          padding: 10px 12%;
        }
  
        div.pie-container #pieChart {
          counter-reset: break-point 40;
        }
  
        div.pie-container #pieChart svg {
          width: 100%;
        }
  
        div.pie-container #pieText {
          margin-top: 15px;
        }
  
        div.pie-container #pieText .panel {
          height: 230px;
          padding: 0;
        }
  
        div.pie-container #pieText .panel #segmentTitle {
          padding: 2px 4px 4px;
        }
  
        div.pie-container #pieText .panel #segmentText {
          padding: 2px 4px 4px;
          line-height: 16px;
        }
      }
  
      @media (min-width: 360.02px) and (max-width: 442px) {
        div.pie-container {
          padding: 10px 10%;
        }
  
        div.pie-container #pieChart {
          counter-reset: break-point 53;
        }
  
        div.pie-container #pieChart svg {
          width: 70%;
        }
  
        div.pie-container #pieText {
          margin-top: 15px;
        }
  
        div.pie-container #pieText .panel {
          height: 210px;
          padding: 0;
        }
  
        div.pie-container #pieText .panel #segmentTitle {
          padding: 4px;
        }
  
        div.pie-container #pieText .panel #segmentText {
          padding: 4px;
          line-height: 18px;
        }
      }
  
      @media (min-width: 442.02px) and (max-width: 575.98px) {
        div.pie-container {
          padding: 10px 10%;
        }
  
        div.pie-container #pieChart {
          counter-reset: break-point 60;
        }
  
        div.pie-container #pieChart svg {
          width: 70%;
        }
  
        div.pie-container #pieText {
          margin-top: 15px;
        }
  
        div.pie-container #pieText .panel {
          height: 200px;
          padding: 0;
        }
  
        div.pie-container #pieText .panel #segmentTitle {
          padding: 4px;
        }
  
        div.pie-container #pieText .panel #segmentText {
          padding: 0 4px 4px;
          line-height: 21px;
        }
      }
  
      @media (min-width: 576px) and (max-width: 637.98px) {
        div.pie-container {
          padding: 10px 12%;
        }
  
        div.pie-container #pieChart {
          counter-reset: break-point 70;
        }
  
        div.pie-container #pieChart svg {
          width: 60%;
        }
  
        div.pie-container #pieText {
          margin-top: 20px;
        }
  
        div.pie-container #pieText .panel {
          padding: 0;
          height: 205px;
        }
  
        div.pie-container #pieText .panel #segmentTitle {
          padding: 8px;
        }
  
        div.pie-container #pieText .panel #segmentText {
          padding: 0 8px 8px;
          line-height: 24px;
        }
      }
  
      @media (min-width: 638px) and (max-width: 767px) {
        div.pie-container {
          padding: 10px 15%;
        }
  
        div.pie-container #pieChart {
          counter-reset: break-point 80;
        }
  
        div.pie-container #pieChart svg {
          width: 60%;
        }
  
        div.pie-container #pieText {
          margin-top: 20px;
        }
  
        div.pie-container #pieText .panel {
          padding: 0 3px;
          height: 270px;
        }
  
        div.pie-container #pieText .panel #segmentTitle {
          padding: 15px;
        }
  
        div.pie-container #pieText .panel #segmentText {
          padding: 15px;
          line-height: 27px;
        }
      }
  
      @media (min-width: 767.02px) and (max-width: 965px) {
        div.pie-container {
          padding: 10px 4%;
        }
  
        div.pie-container #pieChart {
          counter-reset: break-point 50;
        }
  
        div.pie-container #pieText .panel {
          height: 82%;
          padding: 0;
        }
  
        div.pie-container #pieText .panel #segmentTitle {
          padding: 8px;
        }
  
        div.pie-container #pieText .panel #segmentText {
          padding: 0 8px 8px;
          line-height: 23px;
        }
      }
  
      @media (min-width: 965.02px) and (max-width: 1314px) {
        div.pie-container {
          padding: 10px 5%;
        }
  
        div.pie-container #pieChart {
          counter-reset: break-point 60;
        }
  
        div.pie-container #pieText .panel {
          height: 70%;
        }
  
        div.pie-container #pieText .panel #segmentTitle {
          padding: 10px;
        }
  
        div.pie-container #pieText .panel #segmentText {
          padding: 5px 10px 10px;
        }
      }
  
      @media (min-width: 1314.02px) and (max-width: 1480px) {
        div.pie-container {
          padding: 10px 8%;
        }
  
        div.pie-container #pieChart {
          counter-reset: break-point 70;
        }
  
        div.pie-container #pieText .panel #segmentText {
          padding-top: 10px;
        }
      }
  
  
      @media screen and (max-width:600px) {
        #main {
          margin-top: 0px;
        }
  
        #header #header-logo {
          height: 65px;
          width: 65px;
        }
  
        .mobile-panel .title-lrg-4 {
  
          font-size: 1.625rem;
  
        }
  
        .video {
          width: 100%;
        }
  
        .video-slider .video .share li a svg {
          width: 40px;
          height: 40px;
        }
  
        #pieChart,
        #pieText {
          width: 100% !important;
        }
  
        .feed .col-2 {
          width: 50% !important;
        }
      }
  
      .bg-image-section .bg-image {
        opacity: 0.5 !important;
      }
  
      .btn.btn-filled,
      .btn:hover,
      .btn:focus,
      .bg-red {
        background-color: #ba1d1d !important;
      }
  
      .plist {
        margin: 1.7em 0;
      }
  
      .dno {
        background: #ba1d1d;
        padding: 0.5em 0.7em;
        font-size: 1em;
        margin: 0px 1em;
        color: white;
        font-weight: 600;
        width: 2.3em;
        display: flex;
        align-items: center;
        justify-content: center;
      }
  
  
      /* .blue-bg {
        background-color: #4D4545;
        color: #ED8D8D;
        height: 100%;
      } */
  
      .circle {
        font-weight: bold;
        padding: 15px 20px;
        border-radius: 50%;
        background-color: #ba1d1d;
        color: white;
        max-height: 50px;
        z-index: 2;
      }
  
      .how-it-works.row {
        display: flex;
      }
  
      .how-it-works.row .col-2 {
        display: inline-flex;
        align-self: stretch;
        align-items: center;
        justify-content: center;
      }
  
      /* .how-it-works.row .col-2::after {
        content: "";
        position: absolute;
        border-left: 3px solid #ba1d1d;
        z-index: 1;
      } */
  
      /* .how-it-works.row .col-2.bottom::after {
        height: 50%;
        left: 50%;
        top: 50%;
      }
  
      .how-it-works.row .col-2.full::after {
        height: 100%;
        left: calc(50% - 3px);
      }
  
      .how-it-works.row .col-2.top::after {
        height: 50%;
        left: 50%;
        top: 0;
      } */
  
      .timeline-1 div {
        padding: 0;
        height: 40px;
      }
  
      .timeline-1 hr {
        border-top: 3px solid #ba1d1d;
        margin: 0;
        top: 17px;
        position: relative;
      }
  
      .timeline-1 .col-2 {
        display: flex;
        overflow: hidden;
      }
  
      .timeline-1 .corner {
        border: 3px solid #ba1d1d;
        width: 100%;
        position: relative;
        border-radius: 15px;
      }
  
      .timeline-1 .top-right {
        left: 50%;
        top: -50%;
      }
  
      .timeline-1 .left-bottom {
        left: -50%;
        top: calc(50% - 3px);
      }
  
      .timeline-1 .top-left {
        left: -50%;
        top: -50%;
      }
  
      .timeline-1 .right-bottom {
        left: 50%;
        top: calc(50% - 3px);
      }
  
      .info .panel {
        opacity: 1 !important;
      }
  
  
  
  
  
      .main {
        width: 100%;
  
        display: flex;
        justify-content: center;
        align-items: center;
  
      }
  
      .profile-card {
        position: relative;
        font-family: sans-serif;
        width: 220px;
        height: 220px;
        background: #fff;
        padding: 30px;
        border-radius: 50%;
        box-shadow: 0 0 22px #3336;
        transition: .6s;
        margin: 0 25px;
      }
  
      .profile-card:hover {
        border-radius: 10px;
        height: 260px;
      }
  
      .profile-card .img {
        position: relative;
        width: 100%;
        height: 100%;
        transition: .6s;
        z-index: 99;
      }
  
      .profile-card:hover .img {
        transform: translateY(-60px);
      }
  
      .img img {
        width: 100%;
        border-radius: 50%;
        box-shadow: 0 0 22px #3336;
        transition: .6s;
      }
  
      .profile-card:hover img {
        border-radius: 10px;
      }
  
      .caption {
        text-align: center;
        transform: translateY(-80px);
        opacity: 0;
        transition: .6s;
      }
  
      .profile-card:hover .caption {
        opacity: 1;
      }
  
      .caption h3 {
        font-size: 21px;
        font-family: sans-serif;
      }
  
      .caption p {
        font-size: 15px;
        color: #ba1d1d;
        font-family: sans-serif;
        margin: 2px 0 9px 0;
      }
  
      .caption .social-links a {
        color: #333;
        margin-right: 15px;
        font-size: 21px;
        transition: .6s;
      }
  
      .social-links a:hover {
        color: #ba1d1d;
      }
      @media screen and (max-width: 636px) {
      #header #header-nav {
          width: 50%;
      }
      .banner-main{
        background-position: right;
      }
  }
  