/*
	(c)2018 - visuallizard.com

	General Layout Styles.
	Sets major blocking to elements that appear across the site in different templates.
	All can be removed and started from scratch or elements can be adjusted individually.
*/

body {
    background: url("../../../img/trailtogether/background-ice.jpg") no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
}
.container {
/*
	Set site maximum width only here and use this class to centre the content in browser window.
	Use "max-width" instead of "width" for auto-responsiveness.
*/
	position: relative;
	width: 100%;
    max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
}

/* ! header banner fader */
div.home-banners {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    height: 1000px;
    width: 1000px;
    z-index: 0;
}
.banner-text { display: none; }
/* ! Header */
header {
    display: flex;
    position: relative;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
    padding: 0;
    margin: 0;
}
    header div.copy {
        display: block;
        position: relative;
        z-index: 1;
        flex: 0 0 60%;
        padding: 3rem 4rem 3rem 1rem;
        text-align: center;
        background-image: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255, 1) 80%, rgba(255,255,255, 0.9) 90%, rgba(255,255,255,0));
    }



main {
    z-index: 1;
}
.milestone { border-top: 10px solid #ccc; }
.milestone.first { border-color: #B44F9E; }
.milestone.second { border-color: #00A08F; }


/* !Sections */
section {
    padding: 0;
}

section#progress {
    display: block;
    position: relative;
    padding: 150px 0 0 0;
    background-image: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255, 1) 49%, rgba(255,255,255, 0.9) 54%, rgba(255,255,255,0) 60%);
}
section#how-to {
    display: flex;
    position: relative;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 0;
    row-gap: 0;
    padding: 3rem 0;
    margin: 0;
    text-align: center;
    background: #004C53;
    color: #fff;
}
    div.form-placeholder {
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        column-gap: 2%;
        row-gap: 1rem;
        width: 100%;
        max-width: 1050px;
        padding: 0 0 3rem 0;
        margin: 0 auto;
    }
        div.form-placeholder div.form-column {
            display: block;
            position: relative;
            flex: 1 0 20%;
            max-width: 23.5%;
        }
    div.fundraise-columns {
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        column-gap: 2%;
        row-gap: 1rem;
        width: 100%;
        padding: 0 2rem;
        margin: 0 auto;
    }
        div.fundraise-columns div.form-column {
            display: block;
            position: relative;
            flex: 0 0 23.5%;
            max-width: 23.5%;
        }
        div.fundraise-columns div.form-column:before {
            content: "";
            display: block;
            position: relative;
            width: 100%;
            height: 0;
            border: 1px solid transparent;
        }

section#donors {
    padding: 3rem 0 50vh 0;
    text-align: center;
    background-image:
        linear-gradient(to bottom, #fff, rgba(255,255,255, 0.8) 70%, transparent),
        url("../../../img/trailtogether/background-donor-bridge.png"),
        url("../../../img/trailtogether/background-ice.jpg")
    ;
    background-position: top center, bottom center, center center;
    background-repeat: no-repeat;
    background-size: 100%, 100%, cover;
    background-attachment: initial, initial, fixed;
}
/* ! Disable the Donors container for launch, re-enable once there are enough donors in the data */
/* section#donors div.container { display: none; } */


/* ! Footer */
footer {
    display: block;
    position: relative;
    padding: 3rem 1rem;
    text-align: center;
    background: #004C53;
    color: #fff;
}
footer > ul {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    column-gap: 0.5rem;
    width: 20%;
    padding: 0;
    margin: 0 auto 1.5rem auto;
    list-style: none;
}
    footer > ul li {
        display: block;
        position: relative;
        flex: 0 0 30%;
        padding: 0 1rem;
    }
        footer > ul li a {
            display: block;
            color: #fff;
        }
            footer > ul li a i.icon {
                display: block;
                position: relative;
                width: 40px;
                height: 40px;
            }
footer > p.copyright {
    margin: 0;
}