/*
	(c)2017 - visuallizard.com

	Responsive Styles
	Sets responsive style breakpoints templates.
*/

/* !Media Queries ============================== */

.mobile-menu-toggle { display: none; }
/*
section#progress { display: none; }
section#donors { display: none; }
*/

/* Up to 1400px (devices and desktop browsers) */
@media only screen and (max-width: 1400px) {

}

/* Up to standard 1200 (tablets portrait display) */
@media only screen and (max-width: 1200px) {

}

/* Up to standard 1024 (tablets portrait display) */
@media only screen and (max-width: 1024px) {
    div.home-banners { width: 80%; right: -200px; }
    header div.copy > a img { width: 40%; }
    header div.copy h2 { font-size: 2.5rem; }
    section#how-to div.form-placeholder div.form-column { flex: 0 0 35%; max-width: 35%; }
    section#donors { padding-bottom: 50vh; }
    div.donor-set div.banner div.group-column { flex: 0 0 32%; max-width: 32%; }
}

/* Up to standard 800 (tablets portrait display) */
@media only screen and (max-width: 800px) {
    div.home-banners { display: none; }
    header { background: none; }
    header div.copy { flex: 0 0 100%; padding: 3rem 1rem; }
    section#progress { background: none; }
    section#how-to p { max-width: 100%; }
    section#donors { padding-bottom: 30vh; }
    div.donor-set div.banner div.group-column { flex: 0 0 49%; max-width: 49%; }
}

/* Up to standard 670 (phone landscape and portrait display) */
@media only screen and (max-width: 670px) {
    header div.copy h1 { width: 100%; padding: 0 0 1.5rem 0; margin: 1rem 0; }
    header div.copy h2 { max-width: 80%; }
    section#donors { padding-bottom: 50vh; }
}

/* Up to standard 520 (phone landscape and portrait display) */
@media only screen and (max-width: 520px) {
    section#how-to div.form-placeholder div.form-column { flex: 0 0 100%; max-width: 100%; }
    section#donors { padding-bottom: 30vh; }
    form#donor-search-form > input[type="text"] { width: 80%; }
    div.donor-set div.banner div.group-column { flex: 0 0 100%; max-width: 100%; }
}