<style>
/* 
CREATED BY: PETER MARTIN;
FOR: MEMBER JOIN AND RENEW PAGES PLUS SUPPORTER PAGES, SALESFORCE, LIBERAL DEMOCRATS;
LIVE FOR: JOIN PAGES ONLY;
DATE CREATED: JANUARY 26 2016;
LAST UPDATED: 250219
UPDATED FOR NEW STYLE: April 2017 - by Greg Foster
UPDATED FOR NEW STYLES: February 2019 - by Greg Foster
THIS FILE RESKINS THE JOIN AND RENEW PAGES */

/*  =========== THE BASICS =========== */
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}
.clearfix, .clearfix:after {content: ""; display: block; clear: both;}
html, body, button, input, select, textarea, {font-family: 'Open Sans', Arial, sans-serif;  font-size: 1rem; color: #151721;}
html {scroll-behavior: smooth;}
strong, .strong {font-family: 'Open Sans', Arial, sans-serif;}
p, h1, h2, h3, h4, h5, h6 {font-family: 'Open Sans', Arial, sans-serif; font-weight: 700; color: #151721;}
p {margin: 0; font-weight: 400; font-size: 1.2rem; margin: 0 0 4% 0;}
h1 {font-size: 3rem; line-height: 95%; padding: 10px 0; margin: 10px 0;}
h2 {font-size: 2.4rem; line-height: 95%; padding: 10px 0; margin: 10px 0;}
h3 {font-size: 2rem; line-height: 95%; padding: 10px 0; margin: 10px 0;}
h4 {font-size: 1.5rem; line-height: 95%; padding: 10px 0; margin: 10px 0;}
li {font-size: 1.2rem; margin-bottom: 20px;}
a {color: #fff; text-decoration: underline; outline: none; transition: all 0.3s ease-in-out 0s;}
a:hover {color: #21aa50; text-decoration: underline;}
a:active {color: #21aa50; text-decoration: underline;}
hr {display: block; height: 1px; border: 0; border-top: 1px solid #eeeeee; margin: 1em 0; padding: 0;}
img {max-width: 100%; height: auto; vertical-align: middle; border: none;}
body {background: #151721; margin: 0; padding: 0; font-size: 100%; font-family: 'Open Sans', Arial, sans-serif;}

/* ======= Terms and Conditions Popout ======= */
.overlay {height: 100%; width: 0; position: fixed; z-index: 1; left: 0; top: 0; background-color: #ffffff; overflow-x: hidden; transition: 0.5s;}
.overlay-r {height: 100%; width: 0; position: fixed; z-index: 1; right: 0; top: 0; background-color: #ffffff; overflow-x: hidden; transition: 0.5s;}
.overlay-l{height: 100%; width: 0; position: fixed; z-index: 1; left: 0; top: 0; background-color: #ffffff; overflow-x: hidden; transition: 0.5s;}
.overlay-content {position: relative; top: 5%; width: 80%; margin-top: 30px; margin-bottom: 30px; margin-left: auto; margin-right: auto; text-align: left; font-family: 'Open Sans', arial, sans-serif;}
.overlay-content h3 {margin-top: 20px; margin-bottom: 20px;}
.overlay-content p {margin-top: 5px; margin-bottom: 5px;}
.overlay-content h2 {margin-top: 20px; margin-bottom: 20px;}
.overlay-content a {color: #2B59C3;}
.overlay a:hover, .overlay a:focus {color: #21aa50;}
.overlay .closebtn {position: absolute; top: 45px; right: 5%; font-size: 60px; color: #151721;}
.overlay-r a:hover, .overlay a:focus {color: #faa61a;}
.overlay-r .closebtn {position: absolute; top: 45px; right: 5%; font-size: 60px; color: #151721;}
.overlay-l a:hover, .overlay a:focus {color: #faa61a;}
.overlay-l .closebtn {position: absolute; top: 45px; right: 5%; font-size: 60px; color: #151721;}
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {font-size: 40px; top: 15px; right: 35px; z-index: 3;}
  .overlay-r a {font-size: 20px}
  .overlay-r .closebtn {font-size: 40px; top: 15px; right: 35px; z-index: 3;}
  .overlay-l a {font-size: 20px}
  .overlay-l .closebtn {font-size: 40px; top: 15px; right: 35px; z-index: 3;}
}
.overlay-trigger {text-decoration: underline; color: #fff; transition: all 0.3s ease-in-out 0s;}
.overlay-trigger:hover {color: #21aa50;}
.overlay-trigger:active {color: #21aa50; font-weight: 700;}
.overlay-close {text-decoration: underline; color: #2B59C3; transition: all 0.3s ease-in-out 0s;}
.overlay-close:hover {color: #21aa50;}
.overlay-close:active {color: #21aa50; font-weight: 700;}

/* ======= Flexbox grid system ======= */

.flex-container {padding: 2% 0; display: inline-flex; width: 100%; height: auto; flex-direction: row; flex-flow: row;}
.flex-container-50 {padding: 0% 1%; display: inline-flex; width: 50%; height: auto; flex-direction: row; flex-flow: row;}
.flex-align-start {align-items: flex-start;}
.flex-align-center {align-items: center;}
.flex-align-end {align-items: flex-end;}
.flex-justify-top {justify-content: flex-start;}
.flex-justify-center {justify-content: center;}
.flex-justify-bottom {justify-content: flex-end;}
.flex-100 {width: 100%; padding: 1%;}
.flex-70 {width: 70%; padding: 1%;}
.flex-60 {width: 60%; padding: 1%;}
.flex-50 {width: 50%; padding: 1%;}
.flex-40 {width: 40%; padding: 1%;}
.flex-33{width: 33%; padding: 1%;}
.flex-30 {width: 30%; padding: 1%;}
.flex-25 {width: 25%; padding: 1%;}
.flex-20 {width: 20%; padding: 1%;}
.flex-15 {width: 15%; padding: 1%;}
.flex-12 {width: 12.5%; padding: 1%;}
.flex-10 {width: 10%; padding: 1%;}

@media screen and (max-width: 767px) {
  .flex-container {flex-wrap: wrap;}
  .flex-container-50 {padding: 2% 0; display: inline-flex; width: 100%; height: auto; flex-direction: row; flex-flow: row;}
  .flex-70 {width: 100%; padding: 1%}
  .flex-60 {width: 100%; padding: 1%;}
  .flex-50 {width: 100%; padding: 1%;}
  .flex-40 {width: 100%; padding: 1%;}
  .flex-33 {width: 100%; padding: 1%;}
  .flex-30 {width: 100%; padding: 1%;}
  .flex-25 {width: 50%; padding: 1%;}
  .flex-20 {width: 50%; padding: 1%;}
  .flex-15 {width: 25%; padding: 1%;}
  .flex-12 {width: 25%; padding: 1%;}
  .flex-10 {width: 25%; padding: 1%;}
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .flex-container-50 {padding: 2% 0; display: inline-flex; width: 100%; height: auto; flex-direction: row; flex-flow: row;}
  .flex-container-50 .blog-side-item {width: 50%; padding: 1%;}
  .flex-70 {width: 67%; padding: 1%}
  .flex-60 {width: 50%; padding: 1%;}
  .flex-50 {width: 50%; padding: 1%;}
  .flex-40 {width: 50%; padding: 1%;}
  .flex-33 {width: 33%; padding: 1%;}
  .flex-30 {width: 33%; padding: 1%;}
  .flex-25 {width: 25%; padding: 1%;}
  .flex-20 {width: 25%; padding: 1%;}
  .flex-15 {width: 25%; padding: 1%;}
  .flex-12 {width: 25%; padding: 1%;}
  .flex-10 {width: 25%; padding: 1%;}
}

@media screen and (min-width: 767px) and (max-width: 1024px) and (orientation: landscape) {
  .flex-70 {width: 70%; padding: 1%;}
  .flex-33 {width: 33%; padding: 1%;}
}

/* ========= Atomic Classes ====== */

.strong {font-weight: 700;}

.center {text-align: center;}
.right {text-align: right;}
.left {text-align: left;}

.small-text {font-size: 0.66rem;}
.larger {font-size: 1.5rem;}

.content-padding {padding: 5% !important;}
.side-padding {padding: 0 5% !important;}
.top-padding {padding: 5% 0 !important;}

.white {color: #fff;}
.charcoal {color: #151721;}
.gold {color: #faa61a;}
.coral {color: #f95f53}

.force-black {color: #151721 !important;}
.force-white {color: #ffffff !important;}

.margintop {margin-top: 2% !important;}
.margintopmax {margin-top: 4% !important;}
.marginbottom {margin-bottom: 2% !important;}
.marginbottommax {margin-bottom: 4% !important;}
.padtop {padding-top: 2 !important%;}
.padtopmax {padding-top: 4% !important;}
.padbottom {padding-bottom: 2% !important;}
.padbottomax {padding-bottom: 4% !important;}
.standard-padding {padding: 2% 4% !important;}
.nomargin {margin: 0 !important;}
.nopadbottom {padding-bottom: 0 !important;}
.nopadtop {padding-top: 0 !important;}
.padding-0 {padding: 0 !important;}
.padding-2 {padding: 2% !important;}
.padding-4 {padding: 4% !important;}
.padding-20 {padding: 20px !important;}
.margintop-2 {margin-top: 2% !important;}

.bg-charcoal {background: #151721;}
.bg-gold {background: #faa61a;}
.bg-white {background: #fff;}
.bg-coral {background: #f95f53;}
.bg-charcoal-75 {background-color: rgba(21,23,33,0.75)}
.bg-gold-75 {background-color: rgba(250,166,26,0.75)}
.bg-rally {background-image: linear-gradient(to right, rgba(21,23,33,0) 0%,rgba(21,23,33,0) 60%,rgba(21,23,33,1) 100%), url(https://d3n8a8pro7vhmx.cloudfront.net/libdems/pages/45888/attachments/original/1558605007/signupbgrally2.jpg?1558605007); background-size: cover; background-repeat: no-repeat; background-position: 50% 0%; background-color: #151721;}

.polygon-1 {clip-path: polygon(0 1%, 100% 0%, 100% 99%, 0% 100%); -webkit-clip-path: polygon(0 1%, 100% 0%, 100% 99%, 0% 100%);}

@media screen and (max-width: 767px) {
  .bg-rally {background-size: contain;}
  {clip-path: polygon(0 4%, 100% 0%, 100% 96%, 0% 100%); -webkit-clip-path: polygon(0 4%, 100% 0%, 100% 96%, 0% 100%);}
}
.desktop {display: inline-block;}
.mobile {display: none;}
@media screen and (max-width: 767px) {
  .desktop {display: none;}
  .mobile {display: inline-block;}
}

/* Buttons */

a.button-hollow {transition: all 300ms;}
a.button-hollow {font-weight: 900; border: 6px solid #FAA61A; color: #FAA61A; background: none; text-transform: uppercase; padding: 0.8rem 1.25rem; text-decoration: none; cursor: pointer; display: inline-block; margin-bottom: 20px; font-size: 1rem; text-align: center;}
a.button-hollow:hover, a.button:focus {border-color: #21aa50; background-color: #151721; color: #FAA61A; }
a.button-hollow:after {content: "»"; margin-left: 0.3rem; transform: translateY(-0.08rem); display: inline-block;}

#scroll-down {position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); color: #faa61a;font-weight: 900; text-decoration: none; font-family: 'Open sans'; text-align: center; opacity: 0.7;}
#scroll-down:hover {opacity: 1;}

/* Landing Page Specific Code */

.flag {position: absolute; top: 0; left: 4%; width: 20%; max-width: 60px; height: auto;}
.intro-box {border-radius: 3px 0 0 3px; -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; position: relative;}
p.body1 {padding-right: 20%;}

@media screen and (max-width: 1024px) {
  .mobile-spacer {height: 200px; min-height: 40%;}
  .rotate-90::after {transform: translateY(0rem) !important; transform: rotate(270deg) !important;}
  .bird-flag {position: absolute; top: 0; right: 12.5%; z-index: 1; max-width: 1920px; margin-left: auto; margin-right: auto;}
}
@media screen and (min-width: 1025px) {
  .intro-box {margin-right: 10%; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px;}
}
</style>