@import url('http://fonts.cdnfonts.com/css/norwester');
@import url('http://fonts.cdnfonts.com/css/montserrat');

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


/*
 * -- BASE STYLES --
 * Most of these are inherited from Base, but I want to change a few.
 */
body {
    line-height: 1.7em;
    color: black;
    font-size: 16px;
    max-width: 78em;
    margin-top: 1em;
    margin-left: auto;
    margin-right:auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
b,
label {
    color: #002b5c;
}


.pure-img-responsive {
    max-width: 100%;
    height: auto;
}

/*
 * -- LAYOUT STYLES --
 * These are some useful classes which I will need
 */
.l-box {
    padding: 1em;
}

.is-center {
    text-align: center;
}

h3.content-subhead a {
    text-decoration: none;
    color: #002b5c;
}

h3.content-subhead a:visited {
    text-decoration: none;
}

h3.content-subhead a:hover {
    text-decoration: none;
    color: #bf0e0e;
}



/*
 * -- PURE FORM STYLES --
 * Style the form inputs and labels
 */
.pure-form label {
    margin: 1em 0 0;
    font-weight: bold;
    font-size: 100%;
}

.pure-form input[type] {
    border: 2px solid #ddd;
    box-shadow: none;
    font-size: 100%;
    margin-bottom: 1em;
}

.pure-button {
    font-family: 'Norwester', sans-serif;
    letter-spacing: 0.1em;
    background-color: #002b5c;
    color: white;
    padding: 0.5em 1em;
    font-size: 125%;
}

.ribbon .pure-button {
    background-color: #bf0e0e;
}



/*
 * -- MENU STYLES --
 * I want to customize how my .pure-menu looks at the top of the page
 */

.home-menu {
    padding: 0.5em;
    text-align: left;
}

.pure-menu.pure-menu-fixed {
    /* Fixed menus normally have a border at the bottom.
    border-bottom: none;*/
    border-bottom-color: red;
}


.pure-menu-link {
    padding: 0.25em 0.5em;
}


/*
* Header
*/

#donate {
    padding: 0 1em 1em 1.5em;
    display: block;
}

.donate {

}

#topheader {
    border-bottom: 1em #bf0e0e solid;
}

#topheader a {
    text-decoration: none;
}

.header-primary {
}

.header-secondary {
}

.moderate {
    line-height: 1em;
    margin-bottom: -10px
}

.miles {
    line-height: 1em;
    font-size: 250%;
    margin: -6px -3px;
}

.mm {
    font-family: 'Norwester', sans-serif;
    color: #002b5c;
    font-size: 300%;
    padding-left: 0.5em;
}

#subheader {
    margin-bottom: 1em;
}

#pomeroy {
    font-family: 'Norwester', sans-serif;
    color: #002b5c;
    line-height: 1em;
    padding: 0em 0.5em;
    font-size: 300%;
    display: inline;
}

#uh {
    font-family: 'Norwester', sans-serif;
    color: #bf0e0e;
    text-align: right;
    font-size: 133%;
    line-height: 1em;
    display: inline-block;
}

.district {
    font-size: 120%;
    padding-right: 1em;
    text-align: right;
    line-height: 1.4em;
}

.district a, .district a:visited {
    text-decoration: none;
    color: #002b5c;
}

.district a:hover {
    text-decoration: underline;
    color: #bf0e0e;
}

.pure-menu-selected a {
    color: #bf0e0e;
}


.home-menu li a:hover,
.home-menu li a:focus {
    background: none;
    border: none;
    color: #bf0e0e;
}

.home-menu ul {
    float: right;
}
/*
 * -- CONTENT STYLES --
 * This represents the content area (everything below the blue section)
 */
.content-wrapper {
    margin-top: 3em;

}

ul {
    padding: 0;
    margin: 0;
}

.ribbon .image {
    line-height: 0;
}

/* We want to give the content area some more padding */
.content {
    padding: 2em 3em;
}

/* This is the class used for the main content headers (<h2>) */
.content-head {
    padding-top: 1em;
}

/* This is a modifier class used when the content-head is inside a ribbon */
.content-head-ribbon {
    color: white;
    margin-top: 0;
}

/* This is the class used for the content sub-headers (<h3>) */
.content-subhead {

}
.content-subhead i {
    margin-right: 7px;
}

/* This is the class used for the dark-background areas. */
.ribbon {
    background: #002b5c;
    color: #fff;
    font-size: 16px;
    line-height: 1.5em;
}

.ribbon h4 {
    color: white;
    margin-bottom: 0.3em;
}

.ribbon.thank-you {
    background: #bf0e0e;
}

.stat {
    font-family: 'Norwester', sans-serif;
    font-size: 20px;
    text-align: left;

}

#footer-content {
    margin: 2em;
}

/* This is the class used for the footer */
.footer {
    background: #002b5c;
    color: white;
    bottom: 0;
    width: 100%;
    margin-bottom: 0;

}

.footer a, .footer a:hover, .footer a:visited {
    color: white;
    text-decoration: none;
}

.line {
    border-top: white 0.5em solid;
}

.paidfor {
    border: 1px solid white;
    padding: 0.5em;
    margin: 1em 0;
    text-align: center;
}

.social {
    margin-top: 0.5em ;
}

.social i {
    margin: 0.25em;
}

.hidden-md {
    display: none;
}

#third-party-bar {
    background-color: #fff;
}

#third-party-poll {
    height: 2.5em;
    width: 58%;
    background-color: #bf0e0e;
}

#independent-bar {
    background-color: #fff;
}

#independent-poll {
    height: 2.5em;
    width: 40%;
    background-color: #bf0e0e;
}

#logo {
    padding: 2em;
}

.priority {
    font-size: 80%;
    margin-top: 0;
}

.pri {
    margin: 0;
}

#donor-bar {
    height: 1em;
    background-color: #fff;
    display: flex;
}

#breakdown {
    padding: 2em 0 0 0;
}

.bd-item {
    background-color: #bf0e0e;
    padding: 0.5em;
    display: inline-block;
    margin-right: 0.3em;
    min-height: 2.5em;
    white-space: nowrap;
}

.donor-self {
    /*opacity: 0.5;*/
    /*background-image:  linear-gradient(#bf0e0e 1px, transparent 1px), linear-gradient(to right, #bf0e0e 1px, #fff 1px);*/
    /*background-size: 2px 2px;*/
    width: 67%;
}

.donor-ffoutsideutah {
    width: 25%;
    /*opacity: 0.5;*/
    /*opacity: 1;*/
    /*background: repeating-linear-gradient( 90deg, #bf0e0e, #bf0e0e 1px, #fff 1px, #fff 2px );*/
}

.donor-outsideutah {
    width: 4%;
    /*opacity: 0.5;*/
    /*opacity: 1;*/
    /*background: repeating-linear-gradient( 90deg, #bf0e0e, #bf0e0e 1px, #fff 1px, #fff 2px );*/
}

.donor-residents {
    width: 54%;
    /*opacity: 0.5;*/
    /*opacity: 1;*/
    /*background-image:  repeating-linear-gradient(45deg, #bf0e0e 25%, transparent 25%, transparent 75%, #bf0e0e 75%, #bf0e0e), repeating-linear-gradient(45deg, #bf0e0e 25%, #fff 25%, #fff 75%, #bf0e0e 75%, #bf0e0e);*/
    /*background-position: 0 0, 4px 4px;*/
    /*background-size: 2px 2px;*/
}

.donor-pacs {
    width: 51%;
    /*opacity: 0.5;*/
}

.pure-table {
    /*font-size: 75%;*/
    margin-right: auto;
    margin-left: auto;
}

.pure-table tfoot {
    background-color: white;
    color: #002b5c;
    font-weight: bold;
}

.footnote {
    font-size: 75%;
    opacity: 0.75;
    text-align: center;
}

.donor-cat {
    padding: 0.2em 0;
    display: flex;
}

#pub-dis {
    text-align: left;
}

a {
    color: #000;
}

a:visited {
    color: #000;
}


a:hover {
    opacity: 1;
    text-decoration: none;
}

.ribbon a:visited, .ribbon a:link, a:visited.pure-button , a:link.pure-button, .ribbon b {
    color: white;
}



#donate2 {
    display: block;
    text-align: center;
    padding-bottom: 2em;
}

.more-link {
    padding-top: 2em;
    font-size: 75%;
}

.more-platform {
    display: block;
    text-align: center;
    padding-bottom: 2em;
}

.text-right {
    text-align: right;
}

.contact {
    margin: 0.5em 0;
}

#join-form {
    max-width: 500px;
    margin-right: auto;
    margin-left: auto;
}

.no-bottom-margin {
    margin-bottom: 0;
}

.endorsement {
    padding: 1em;
    font-size: 16px;
    line-height: 1.2em;
}

.endorsed-by {
    font-weight: bold;
    font-size: 18px;
    line-height: 1.5em;
}

/*
 * -- TABLET (AND UP) MEDIA QUERIES --
 * On tablets and other medium-sized devices, we want to customize some
 * of the mobile styles.
 * pure md key
 */
@media (min-width: 48em) {

    .hidden-md {
        display: inline;
    }

    #donate {
        float: right;
    }

    .ribbon {
        font-size: 22px;

    }

    .pure-table {
        margin-left: unset;
        margin-right: unset;
    }

    .footnote {
        text-align: left;
    }

    .stat {
        font-size: 26px;
    }

    .line {
        border-top: none;
    }

}

/*
 * -- DESKTOP (AND UP) MEDIA QUERIES --
 * On desktops and other large devices, we want to over-ride some
 * of the mobile and tablet styles.
 * xl key
 */
@media (min-width: 78em) {

    .district {
        font-size: 200%;
    }

    .endorsement {
        font-size: 18px;
    }

    .endorsed-by {
        font-size: 22px;
    }


}

/*
When setting the primary font stack, apply it to the Pure grid units along
with "html", "button", "input", "select", and "textarea". Pure Grids use
specific font stacks to ensure the greatest OS/browser compatibility.
*/
html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
    /* Set your content font stack here: */
    font-family: 'Montserrat', sans-serif;
}