/* default primary element styles */
body {
    margin: 0;
    font-family: Open Sans;
    position: relative;
    z-index: 1;
    overflow-x: hidden;
    background: white;
}

#container {
    overflow: hidden;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

hr {
    background: #DCDCDC;
    height: 2px;
    border: 0;
}

a {
    text-decoration: none;
    color: #1999D6;
}

a:hover {
    cursor: pointer;
}

section a:hover {
    text-decoration: underline;
}

header {
    height: 400px;
    background-image: url(../img/Carter2018.jpg);
    background-attachment: fixed;
    background-position: center 30%;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    margin-bottom: 82px;
    z-index: 1000;
}

header .logo img {
    display: block;
    border-radius: 5px;
    padding: .6em;
    background: rgba(255, 255, 255, .7);
    -webkit-box-shadow: 0 0 5px 0 #444;
    box-shadow: 0 0 5px 0 #444;
    width: 100%;
    max-width: 300px;
    position: absolute;
    left: 40%;
    top: 50%;
    -webkit-transform: translate(-50%, -40%);
    transform: translate(-50%, -50%);
}

.placeholderImage {
    background-image: url('/static/img/sample.png');
}

nav {
    background: #061428;
    text-align: center;
    width: 100%;
    height: 80px;
    -webkit-transition: background-color .5s ease;
    transition: background-color .5s ease;
    position: absolute;
    top: 400px;
    z-index: 10;
    -webkit-transition: background .4s ease;
    transition: background .4s ease;
}

nav > div > a {
    float: left;
}

nav > div > ul {
    display: inline-block;
}

nav > div > ul > li {
    display: inline-block;
    padding: 28px 0;
}

nav > div > ul > li > a {
    color: #54799e;
    -webkit-transition: color .2s ease;
    transition: color .2s ease;
    font-size: 18px;
    padding: 30px 20px;
    line-height: 20px;
    font-family: Oswald;
    letter-spacing: 1.8px;
}

nav > .desktop > ul > li > a {
    color: white;
}

nav > div > ul:hover li a {
    color: #54799e;
}

nav > div > ul > li > a:hover {
    color: white;
}

nav > div > ul > li input {
    margin-right: 8px;
}

.button_link {
    text-align: center;
    margin: 60px 0;
}

.button_link a {
    text-decoration: none;
    color: #FFF;
    padding: 10px 20px;
    background: #DD463C;
    transition: .4s;
    border-radius: 5px;
}

.button_link a:hover {
    background: #B43C38;
    text-decoration: none;
}

.resources h2 {
    text-align: left;
}

/* [STICKY MENU] */
.sticky {
    position: fixed;
    top: 0;
    background: rgba(6, 20, 40, 0.9);
    -webkit-transition: background .4s ease;
    transition: background .4s ease;
}

/* [STICKY MENU END ] */
/* [BTN-MENU] */
#btn-menu {
    width: 100%;
    cursor: pointer;
    height: 80px;
}

#btn-menu span {
    position: absolute;
    left: 0;
    color: #FFF;
    padding: 30px 20px;
    font-size: 3em;
    line-height: 20px;
}

/* [BTN-MENU END] */
nav > .menu,
nav > .btn-r {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    list-style: none;
}

nav > .btn-r {
    position: absolute;
    right: 0;
    top: 0;
    overflow: hidden;
    bottom: 0;
}

nav > .menu > li > a,
nav > .btn-r > li > a {
    display: block;
    padding: 8px 24px;
    line-height: 20px;
    color: #FFF;
    font-family: Oswald;
    font-size: 18px;
    letter-spacing: 1.8px;
    -webkit-transition: .4s;
    transition: .4s;
}

nav > .menu:hover > li > a {
    color: #54799e;
}

nav > .menu:hover > li > a:hover {
    color: white;
}

nav > .btn-r > li > a {
    background: #DD463C;
    padding: 30px 20px;
}

nav > .btn-r > li > a:hover {
    background: #B43C38;
}

nav > .btn-r > li > a > i {
    margin-right: 5px;
}

button {
    outline: 0;
    border: 0;
    color: white;
    background: #DD463C;
    padding: 8px 24px;
    font-family: Oswald;
    -webkit-transition: background .2s ease;
    transition: background .2s ease;
    font-size: 18px;
}

button:hover {
    cursor: pointer;
    background: #B43C38;
}

input {
    outline: 0;
    border: 0;
    color: #061428;
    background: #d9dfec;
    padding: 8px;
    -webkit-transition: background .2s ease;
    transition: background .2s ease;
}

input:hover,
input:focus {
    background: white;
}

nav > a > button {
    font-size: 18px;
    letter-spacing: 1.8px;
    display: inline-block;
    position: absolute !important;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 0;
}

h1,
h2,
h3 {
    text-align: center;
    color: white;
}

h1 {
    font-family: Merriweather;
    color: #263746;
    margin: 10px 0;
}

h2 {
    color: #1A3C7F;
    font-family: Merriweather;
    font-size: 48px;
    margin: 16px 0;
}

h4 {
    color: #333333;
    font-family: Merriweather;
    font-size: 24px;
    margin: 0;
    margin-bottom: 12px;
}

h2 span {
    font-family: Oswald;
    font-size: 18px;
    letter-spacing: 1.8px;
    font-weight: normal;
    white-space: nowrap;
    padding: 16px;
    background: #DD463C;
    color: white;
    margin-right: 16px;
    display: inline-block;
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
}

h3 {
    font-family: Oswald;
    font-size: 18px;
    letter-spacing: 1.8px;
    font-weight: normal;
    white-space: nowrap;
    display: table;
    padding: 16px;
    background: #DD463C;
}

p {
    color: #263746;
}

section p {
    line-height: 1.8;
    font-size: 18px;
}

.userimage {
    width: 150px;
    height: 150px;
    border: 10px solid #E6E6E6;
    border-radius: 50%;
    background-image: url('/static/img/lee.jpg');
    background-size: cover;
}

.userimage.lee {
    background-image: url('/static/img/leeport.png');
}

.userimage.elizabeth {
    background-image: url('/static/img/elizabeth.jpg');
}

.userimage.mansimran {
    background-image: url('/static/img/mansimranport.png');
}

.userimage.ken {
    background-image: url('/static/img/kenport.png');
}

header .userimage {
    margin: 0 auto;
    margin-top: -110px;
}

nav .userimage {
    float: left;
}

.userimage.small {
    width: 65px;
    height: 65px;
    border-width: 5px;
}

#sideimage .userimage.small {
    margin-right: 10px;
}

nav #sideimage {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: left .5s ease;
    transition: left .5s ease;
    left: -1000px;
}

nav #sideimage .userimage {
    margin-top: 4px;
}

nav #sideimage p {
    font-family: Merriweather;
    color: white;
    font-size: 18px;
    display: inline-block;
}

nav .mobile {
    display: none;
}

footer > nav {
    background: #122940;
}

footer {
    background: #061428;
    padding: 32px;
    margin-top: 110px;
}

footer p,
footer a {
    font-family: Oswald;
    text-align: center;
    color: #697a89;
    margin: 0 auto;
    -webkit-transition: color .2s ease;
    transition: color .2s ease;
}

.disclaimer {
    margin-bottom: 24px;
    text-transform: uppercase;
}

.paid {
    color: #061428;
    background: #2c3e50;
    max-width: 1000px;
    padding: 21px 45px;
    font-size: 18px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

footer a:hover {
    color: white;
}

section {
    background: white;
    padding: 30px 10%;
    position: relative;
}

.quote,
.map {
    background: #F0F0F0;
}

.map img {
    width: 100%;
    max-width: 525px;
}

.map .image {
    position: relative;
    display: table;
    margin: 0 auto;
}

.map > p {
    text-align: center;
}

.map .note {
    max-width: 392px;
    margin: 0 auto;
    margin-top: 12px;
    overflow: hidden;
    padding: 6px;
}

.map .note > p {
    display: inline;
    padding: 6px;
    background-color: rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 1em 0 0 rgba(0, 0, 0, 0.7), -1em 0 0 rgba(0, 0, 0, 0.7);
    box-shadow: 1em 0 0 rgba(0, 0, 0, 0.7), -1em 0 0 rgba(0, 0, 0, 0.7);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    line-height: 33px;
    color: white;
}

.quote q {
    font-size: 22px;
    word-wrap: break-word;
    font-style: italic;
}

.mobile ul {
    background: #061428;
    width: 100%;
    position: absolute;
    top: 80px;
    -webkit-transition: background .4s ease;
    transition: background .4s ease;
    left: 0;
}

.sticky .mobile ul {
    background: rgba(6, 20, 40, 0.9);
    -webkit-transition: background .4s ease;
    transition: background .4s ease;
}

nav > .mobile > ul > li {
    width: 100%;
}

nav > .mobile > ul > li > a {
    font-size: 18px;
}

section.image {
    display: block;
    max-width: 1200px;
    margin: 0 auto;
}

section.md {
    width: 60%;
    background: #F2F2F2;
    margin-bottom: 20px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, .1);
}

section.news {
    display: block;
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
    max-width: 1200px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: wrap row;
    flex-flow: wrap row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

section.image img {
    margin: 20px;
    width: 400px;
    border: 5px solid #DCDCDC;
    margin-top: 12px;
}

section.image img.center {
    display: block;
    margin: 0 auto;
}

section.image p {
    display: block;
}

section.articles > div {
    position: relative;
    display: inline-block;
    width: 32.999%;
    height: 400px;
    background-size: cover;
}

section.articles > div:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #2c3e50;
    opacity: 0.2;
}

section.articles > div:hover:before {
    background: #061428;
}

section.donate > h1 {
    font-size: 32px;
    font-family: Merriweather;
    color: white;
    text-align: center;
    font-weight: 300;
}

section.donate > p {
    color: white;
    text-align: center;
    font-style: italic;
}

section.donate {
    background: #1A3C7F;
    z-index: -2;
    position: relative;
}

section.donate > ul {
    padding: 8px;
    text-align: center;
}

section.donate > ul > li {
    display: inline-block;
    margin-bottom: 24px;
}

section.donate > ul > li > a {
    border-radius: 50%;
    font-size: 48px;
    background: #DD463C;
    color: white;
    width: 100px;
    height: 100px;
    display: block;
    margin: 0 24px;
    line-height: 100px;
    font-family: Merriweather;
    position: relative;
    -webkit-transition: background .2s ease;
    transition: background .2s ease;
}

section.donate > ul > li > a > span {
    font-size: 24px;
    -webkit-transform: translateY(-13px);
    transform: translateY(-13px);
    display: inline-block;
    color: rgba(6, 20, 40, .2);
}

section.donate > ul > li > a:before {
    content: '';
    z-index: -1;
    background: rgba(6, 20, 40, .2);
    width: 100px;
    height: 100px;
    display: block;
    border-radius: 50%;
    position: absolute;
    top: 8px;
    left: 0;
}

section.donate > ul > li > a:hover {
    text-decoration: none;
    background: #B43C38;
}

/* [ABOUT SECTION] */
.about-section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.sub-about {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.sub-about:nth-child(odd) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

.sub-about:nth-child(even) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

@media screen and (max-width: 979px) {

    .sub-about:nth-child(odd),
    .sub-about:nth-child(even) {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}

/* -------------------- */
#join {
    background: #1A3C7F;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: inline-block;
    text-align: center;
    padding: 16px;
    z-index: 2;
}

#join.fixed {
    position: absolute;
    bottom: 182px;
}

#join span {
    background: rgba(6, 20, 40, .2);
    padding: 8px;
    display: inline-block;
}

#join p {
    font-size: 18px;
    font-family: Oswald;
    letter-spacing: 1.8px;
    color: white;
    display: inline-block;
}

#join input {
    font-size: 22px;
}

#candidates li {
    display: inline-block;
    margin-right: 16px;
}

#candidates li:before {
    content: '';
    width: 18px;
    height: 18px;
    background: #1A3C7F;
    display: inline-block;
    margin-right: 4px;
}

#candidates li.opponent:before {
    background: #DD463C;
}

#join button {
    letter-spacing: 1.8;
    font-size: 18px;
}

#issues h1 {
    margin-top: 64px;
}

#issues li .progressContainer {
    background: #F0F0F0;
}

#issues li .progressBar {
    background: #1A3C7F;
    height: 22px;
}

#issues li.opponent .progressBar {
    background: #DD463C;
}

#issues li > p:first-child + i {
    position: absolute;
    right: 0;
}

.interact {
    display: none;
}

.user {
    text-align: center;
}

.user img {
    display: block;
    margin: 0 auto;
    border-radius: 50%;
    margin-bottom: 8px;
}

.quote .timePosted {
    font-size: 16px;
}

.tweet {
    text-align: center;
    font-style: italic;
}

.tweet:before {
    font-family: FontAwesome;
    content: '\f099';
    color: #1da1f2;
    margin-right: 4px;
    font-style: initial;
}

::-moz-selection {
    background: #5CD1FF;
    color: black;
}

::selection {
    background: #5CD1FF;
    color: black;
}

#iconList {
    display: block;
    text-align: center;
    margin: 0 auto;
    margin-top: 24px;
    margin-bottom: -24px;
}

#iconList li {
    font-family: Merriweather;
    display: inline-block;
    font-size: 24px;
    margin-right: 24px;
    position: relative;
    margin-top: 24px;
    line-height: 64px;
    -webkit-transition: color .2s ease;
    transition: color .2s ease;
    color: #263746;
}

#iconList li:hover,
#iconList li.active {
    cursor: pointer;
    color: #1A3C7F;
}

#iconList li:before {
    content: '\f19d';
    font-family: FontAwesome;
    position: absolute;
    left: 50%;
    top: -28px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

#iconList li.healthcare:before {
    content: '\f21e';
}

#iconList li.economy:before {
    content: '\f155';
}

#iconList li.environment:before {
    content: '\f06c';
}

#iconList li.environment:before {
    content: '\f06c';
}

#iconList li.immigration:before {
    content: '\f0c0';
}

#iconList li.veterans:before {
    content: '\f132';
}

#iconList li.canvassing:before {
    content: '\f015';
}

#iconList li.phonebanking:before {
    content: '\f095';
}

#iconList li.donating:before {
    content: '\f155';
}

#iconList li.hosting:before {
    content: '\f073';
}

#iconList li.transportation:before {
    content: '\f1b9';
}

#iconList li.workers:before {
    content: '\f0c0';
}

#iconList li.corporate:before {
    content: '\f1ad';
}

#iconList li.women:before {
    content: '\f221';
}

#iconList li.criminal:before {
    content: '\f19c';
}

#iconList li.housing:before {
    content: '\f015';
}

#iconList li.voting:before {
    content: '\f058';
}

#iconList li.equality:before {
    content: '\f224';
}

#iconList li.consumers:before {
    content: '\f007';
}

.precincts li {
    position: absolute;
    color: #263746;
    border: 2px solid #263746;
    border-radius: 36px;
    padding: 0 6px;
    z-index: 1;
    background: #F0F0F0;
}

.precincts li div {
    margin-top: 29px;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    opacity: 0;
    -webkit-transition: opacity .2s ease;
    transition: opacity .2s ease;
    pointer-events: none;
    background: #F0F0F0;
    border: 2px solid #263746;
    padding: 12px;
}

.precincts li div:before {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: -12px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #263746;
}

.precincts li div:after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: -10px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #F0F0F0;
}

.precincts li:hover div {
    opacity: 1;
    pointer-events: initial;
}

.precincts .p201 {
    left: 20%;
    top: 40%;
}

.precincts .p207 {
    left: 75%;
    top: 50%;
}

.precincts .p208 {
    left: 34%;
    top: 68%;
}

.media {
    text-align: center;
}

.media li {
    display: inline-block;
    font-size: 64px;
    margin-right: 24px;
}

.media li a i {
    color: #263746;
    -webkit-transition: color .2s ease;
    transition: color .2s ease;
}

.media li:hover a i.fa-twitter {
    color: #1da1f2;
}

.media li:hover a i.fa-facebook-official {
    color: #3b5998;
}

.media li:hover a i.fa-envelope {
    color: #ED4335;
}

#involvement {
    background: #F0F0F0;
    margin-top: 24px;
    padding: 24px;
}

#involvement li {
    display: none;
}

#involvement li.active {
    display: block;
}

.donate button {
    font-size: 48px;
    position: relative;
    display: block;
    margin: 0 auto;
    margin-bottom: 24px;
}

.donate button:before {
    content: '';
    position: absolute;
    background: rgba(6, 20, 40, .2);
    border-radius: 20px;
    width: 100%;
    height: 100%;
    top: 10px;
    left: 0;
    z-index: -1;
}

.donate a:hover {
    text-decoration: none;
}

.userlist {
    text-align: center;
}

.userlist > li {
    display: inline-block;
}

.userlist a {
    color: #263746;
}

.contact {
    background: #F0F0F0;
    max-width: 500px;
    display: block;
    margin: 0 auto;
    text-align: left;
    padding: 12px 24px;
}

.contact i {
    margin-right: 6px;
}

/* Pagination */
.pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.pagination > li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.pagination > li > a,
.pagination > li > span {
    padding: 20px;
    background: gainsboro;
    color: #697a89;
}

.pagination > li > a {
    color: #1999D6;
}

.pagination > li.active > span {
    background: #1A3C7F;
    color: white;
}

.results {
    margin: 24px 0;
}

.results > li {
    border-bottom: 2px solid gainsboro;
}

.results > li:last-child {
    border-bottom: 0;
}

.date {
    margin-top: 0;
}

.newsitem {
    background: #F2F2F2;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, .1);
    vertical-align: top;
    max-width: 300px;
    min-width: 150px;
    margin: 12px;
    padding: 24px;
    text-align: left;
}

.newsitem img {
    width: calc(100% - 8px);
    margin: 0;
    border: 4px solid #122940;
}

.endorsements-logos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: .5rem;
    row-gap: .5rem;
    background: #1A3C7F;
}

.endorsements-logos .endorsement-item {
    background: #FFF;
    box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(11, 11, 11, .1);
    border-radius: 5px;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.endorsements-logos .endorsement-title {
    grid-column: 1 / 5;
    justify-self: center;
    color: #FFF;
    font-size: 3rem;
    padding: 2rem;
}

.endorsements-logos .endorsement-item img {
    display: block;
    width: 100%;
    max-width: 150px;
}

/* device */
@media screen and (max-width: 979px) {
    header {
        background-position: 80%;
    }

    header .logo img {
        display: none;
    }

    nav > div > ul li {
        color: #54799e;
    }

    nav .desktop {
        display: none;
    }

    nav .mobile {
        display: block;
    }

    nav .mobile ul {
        display: none;
    }

    section.image img {
        width: 100%;
        margin: 0;
    }

    section.image p {
        display: inline-block;
    }

    section.md {
        width: auto;
    }

    .sub-about {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .endorsements-logos .endorsement-title {
        grid-column: 1 / 4;
    }

    .endorsements-logos {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 767px) {
    #join p {
        display: block;
    }

    #join input {
        display: block;
        margin-bottom: 8px;
    }

    #join button {
        width: 100%;
    }

    .newsitem {
        display: block;
        max-width: unset;
        position: relative;
    }

    .button_link a {
        font-size: 14px;
    }

    .resources h2 {
        font-size: 25px;
    }

    .endorsements-logos .endorsement-title {
        grid-column: 1 / 3;
    }

    .endorsements-logos {
        grid-template-columns: repeat(2, 1fr);
    }
}