/* NOTES
    pink: #ec476b
    blue: #71d4dd
    black: #1a1a1a
    darker grey: #a7a9ab
    lighter grey: #3cb8ae
/*

/* Global stuff */

    .hidden {
        display:none;
    }

    .clear {
        clear:both;
    }

/* TYPOGRAPHY */
    body {
        font-family: roboto;
        color:#fff;
        margin:0;
        background-color: #1a1a1a;
        background-image: url("../images/bw-crowd.jpg");
        background-repeat:no-repeat;
        background-attachment: fixed;
        font-weight:300;
    }

    p {

    }

    h1 {
        text-align: center;

    }

    h2 {
        text-align:center;
        font-size:1.25em;
    }

    h3 {

    }

    .petition-text {
        font-weight:bold;
        color:#000000;
    }

    .no-decoration a, .no-decoration{
        text-decoration: none;
        color:#fff;
    }



/* HEADER CSS */

    .header {
        background-color: #71d4dd;
        position:fixed;
        width:100%;
        overflow:hidden;
        height:50px;
        z-index: 1;
        transition: .3s;
        box-shadow: 0px 3px 5px rgba(10, 10, 10, 0.8);
        -webkit-box-shadow: 0px 3px 5px rgba(10, 10, 10, 0.8);
        -moz-box-shadow:    0px 3px 5px rgba(10, 10, 10, 0.8);
    }

    .header-logo {
        height:40px;
        padding:5px 20px;
        float:left;
        display: inline-block;
    }

    .header-buttons {
        display:none;
    }

    .header-text {
        border-right: 1px solid white;
        text-decoration:none;
        color:#ffffff;
        font-weight: bold;
        font-size:24px;
        padding-right:15px;
        vertical-align: top;
    }

/* FOOTER CSS */

    .footer {
        background:#1a1a1a;
    }

    .footer-content {
        width:800px;
        max-width: 100%;
        margin:0 auto;
        padding: 40px 0 40px 0;
    }

    .footer-text {
        font-style: italic;
        text-decoration: none;
        color:#ffffff;
        font-size:14px;
        text-align: center;
        font-weight:normal;
        margin:0 0 10px 0;
        padding:0 5px;
    }

    .footer-buttons {
        width:110px;
        margin:0 auto;
    }

    .share-icon {
        padding:3px 5px 0 5px;
        display:inline-block;
        width:23px !important;
        height: 23px !important;
    }

    .icon {
        max-width:100%;
    }

/* SECTIONS OF PAGE BACKGROUNDS CSS */

    .topLogo {
        width:100px;
        margin:3%;
    }

    .section {
        padding-top:20px;
        padding-left:5%;
        padding-right:5%;
        padding-bottom:30px;
        background:#1a1a1a;
    }

    .section-content {
        max-width:600px;
        margin:0 auto;
    }

    .section-header {
        text-align:center;  
    }

    .splash {
        color:#ffffff;
        background:rgba(0,0,0,.6);
        min-height:80vh;
        padding-top:70px;
    }

    .splash h2 {
        text-align:left;
        font-weight:300;
    }

    .more-details {

    }

    .distributed-actions {
        background:#F9F6F3;
        color:#1a1a1a;

    }

    .even-more-details {

    }

    .what-saying {
        background:#71d4dd;
    }

    .what-saying-attribution {
        font-style:italic;
        text-align:center;
        margin-top:-15px;
    }

    .what-doing {
        background:#F9F6F3;
        position:relative;
    }

    .what-doing-gif {
        width:100%;
    }

    .what-doing-text {
        position:absolute;
        left:0;
        right:0;
        top:30%;
        text-align:center;
        text-shadow: 1px 2px 7px #000;
    }

/* MAKING THAT SECTION SLIDE */

    #homepage-read-more-content {
        transition: 1s;
        display:none;
        opacity:0;
    }

    #homepage-read-more-link {

    }

/* FIXING ACTION NETWORK STYLES */

    .an-form {
        max-width:600px;
        margin:0 auto;
        border-radius: 5px;
        padding: 15px;
        background: rgba(255,255,255,.8);
    }

    #action_welcome_message {
        background-color: rgba(80,80,80,.4);
        padding: 10px;
        border-radius: 5px;
        text-align: center;
    }

    .action-thanks, .action-thanks h2 {
        color:#000000;
        text-align:center;
    }

    #can_embed_form_inner h2, #can_embed_form_inner h4, #logo_wrap, .action_owner, #d_sharing, .country_wrap, .can_thank_you_wrap, #form-comments, .ajax-loading, #can_embed_form h2 {
        display:none;
    }

    .can_thank_you_wrap {
        opacity:0;
        height:0;
    }

    #form-first_name, #form-last_name, #form-email, #form-zip_code {
        border:1px solid rgba(36,36,36,0.4);
        padding:0;
        margin-top:5px;
        height: 40px;
        vertical-align: bottom;
        border-radius: 5px;
        font-size: 14px;
        font-family:roboto;
        width: 100%;
        color:black;
        padding:0 0 0 2%;
        box-sizing: border-box;
        background: #fff;
        cursor: text;
    }

    #form-first_name:focus, #form-last_name:focus, #form-email:focus, #form-zip_code:focus {
        box-shadow: 0 0 10px #71d4dd;
        outline-color:#71d4dd;
    }

    .error_input {
        border:1px solid red !important;
    }

    .error_input:focus {
        outline-color:red !important;
        box-shadow: 0 0 10px red !important;
    }

    [name~=commit], #form-zip_code-submit {
        text-align:center;
        background-color: #71d4dd;
        height:40px;
        margin-top:5px;
        border:none;
        font-family:roboto;
        color:#fff;
        font-weight:900;
        border-radius:5px;
        font-size:18px;
        cursor:pointer;
    }

    [name~=commit] {
        width:100%;
    }

    #form-zip_code-submit {
        width:35%;
        text-transform: uppercase;
    }


    [name~=commit]:hover, #form-zip_code-submit:hover {
        background: #ec476b;
        transition-duration: .5s;
        -webkit-transition-duration: .5s;
    }

    .formIcon {
        width:100px;
        margin:0 auto;
    }

    .formIcon.share {
        margin-top:10px;
    }

    #can_embed_form_inner h3 {
        display:none;
    }

/* MAKING THE MAP WORK */

    #event_map_wrap, #map_canvas {
        height:300px;
        margin-top:10px;
    }

    #event_map_wrap div {
        clear:none;
    }

    .event_campaign #form-zip_code {
        width:63%;
    }

    .widget_title {
        text-align: center;
        font-style: italic;
        margin:5px;
        font-weight:300;
    }

    #form_col3 .widget_title, #form_col1 h4 {
        display:none;
    }

    #search_location_list {
        text-align:center;
        margin-top:10px;
    }


/* Share Buttons */

    .share-button, .button {
        width: 100%;
        margin-bottom:5px;
    }

    .share-button:hover {
        background: #ec476b;
        transition-duration: .5s;
        -webkit-transition-duration: .5s;
    }

    .shareButtons {
        width:100%;
    }

    button, .btn, .button {
        display: inline-block;
        text-align: center;
        padding:8px 0;
        font-size: 18px;
        font-weight: 900;
        letter-spacing: 1px;
        text-transform: uppercase;
        text-decoration: none;
        color:#ffffff;
        border-radius: 5px;
        cursor: pointer;
        border-style: none;
    }

    .button {
        background: #71d4dd;
    }

    button, .btn {
        background: #ec476b;
    }

    button:hover, .btn:hover {
        background: #71d4dd;
        transition-duration: .5s;
        -webkit-transition-duration: .5s;
    }

    .button:hover {
        background: #ec476b;
        transition-duration: .5s;
        -webkit-transition-duration: .5s;
    }

    .donate-button {
        background-color:#ec476b;
        width:100%;
    }

    .donate-button:hover {
        background: #71d4dd;
        transition-duration: .5s;
        -webkit-transition-duration: .5s;   
    }

    .facebook {
        background: #3b5998;
    }
    
    .twitter {
        background: #1DA1F2;
    }
    
    .email {
        background: #ec476b;
    }

/* Blog Posts on Home Page */

    .blog-post-image {
        width:100%;
        margin:5px auto 0;
        max-width:400px;
    }

    .blog-post {
        width:100%;
        text-align: center;
        margin-bottom:20px;
    }

    .blog-post-link {
        text-decoration: none;
        color:#000000;
        font-weight:normal;
    }

    .blog-post-title {
        margin:0;
    }

@media screen and (min-width: 650px) {

    /* Header */

        .header-buttons {
            height:30px;
            padding:5px 20px;
            float:right;
            margin-top:5px;
            display:inherit;
        }

    /* Type */

        body {
            background-size:100%;
        }

        h1 {
            font-size:3em;
        }

        h2 {
            font-size:1.5em;
        }

        h3 {

        }

        p {

        }


    /* SECTIONS */

        .topLogo {
            width:120px;
        }

    /* button styles */

        .shareButtons {
            max-width:400px;
            margin:0 auto 5px;
        }

        .donate-button {
            width:300px;
            margin:0 auto;
            display:block;
        }

    /* Blog Posts on Home Page */

        .blog-post {
            width:31.33%;
            float:left;
            margin:1%;
        }

        .blog-post-image {
            max-width:auto;
        }