/*
	(c)2012 - visuallizard.com

	Mobile styles using Media Queries
*/


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

.mobile-menu-toggle {
	display: none;
	position: absolute;
	z-index: 1000;
	top: 25px;
	right: 0;
	line-height: 1;
}
.mobile-menu-toggle:before {
	content: "";
	display: block;
	position: absolute;
	z-index: 1000;
	top: 4px;
	left: -40px;
	width: 30px;
	padding: 2px 0 0 0;
	border-top: 6px double #000;
	border-bottom: 6px double #000;
	line-height: 0;
}



	/* Smaller than 1200 (devices and browsers) */
	@media only screen and (max-width: 1200px) {
		.container,
		.site-header > .container,
		main .container,
		.site-footer .container { left: auto; width: 100%; margin: 0; padding: 15px; }
		.site-header > .container { padding: 0 15px; }
		.site-header > .container:after { display: none; }
	}

	/* Smaller than standard 1024 (devices and browsers) */
	@media only screen and (max-width: 1024px) {
		.feature-banners div.hampers-needed,
		.page-heading div.hampers-needed {
			margin: 0 -500px 0 0;
		}
		.feature-banners div.hundred-years {
			margin: 0 0 0 -320px;
		}
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 800px) {
  	.site-header > .container { position: relative; padding: 0; }
  	main .container > h1 { display: none; }
  	.primary,
  	.sidebar { clear: both; float: left; width: 100%; padding: 0; }
  	.sidebar a.button { width: 70%; margin: 0 15%; }
  	.main-region { float: left; width: 100%; padding: 0; border: 0; }
		.cke > .c2,
		.cke > .c3 { flex-basis: 100%; max-width: 100%; margin: 0; }
		iframe { max-width: 100%; }
		body.financial-donations iframe { max-height: none; }
		div.page-heading h1 { margin-top: 0; font-size: 4rem; }
		h2, .h2 { font-size: 3.25rem; }
		h3, .h3 { font-size: 2.5rem; }
		h4, .h4 { font-size: 2.0rem; }

		.site-title { position: relative; width: 50%; }
		.site-title > a { background-size: 50%; }
		.site-header > div.page-heading { min-height: 100px; padding: 1em 0; }
		.site-header > div.page-heading .container { padding: 0 15px; line-height: 1; }
		.feature-banners div.hundred-years { left: auto; top: 15px; width: 70%; margin: 0 15%;  }
		.feature-banners div.hampers-needed { top: auto; right: 15px; bottom: 15px; margin: 0; }
		.page-heading div.hampers-needed { right: 30px; margin: 0; }
		.mobile-menu-toggle { display: block; }
		.main-nav { position: absolute; top: 6rem;  flex-basis: 0; max-width: 0; z-index: 2; height: 0; padding: 0; transition: all 0.2s ease;  }
		.main-nav.show { left: 0; right: 0; flex-basis: 100%; max-width: 100%; height: auto; background: #1c4535; }
		.main-nav ul.nav-1 { display: none; margin: 0; }
		.main-nav.show ul.nav-1 { display: block; }
		.nav-link { padding: 15px; }
        .main-nav .nav-1 > li[data-nav-status="active"] > a,
        .main-nav .nav-1 > li[data-nav-status="has-active"] > a { background: #9f1f14; }
		.main-nav .nav-1 > li > a { border-top: 1px solid #fbf1e3; text-align: left; color: #fbf1e3; }
		.main-nav .nav-1 > li.active > a:after { display: none; }
		.main-nav .has-sub > .nav-link:after { display: none; }
		.main-nav .sub-list { background: none; }
		.main-nav li > .sub-list {
            position: relative;
            z-index: 1; width: 100%; padding: 0;
            border: none; border-radius: 0;
            transform: none; visibility: visible; opacity: 1;
        }
        .main-nav .nav-2 { top: auto; box-shadow: none; }
        .main-nav .nav-2 > li[data-nav-status="active"] > a,
        .main-nav .nav-2 > li[data-nav-status="has-active"] > a { background: #9f1f14; }
		.main-nav .nav-2 > li > a { padding: 15px 15px 15px 45px; border-top: 1px solid #fbf1e3;  color: #fbf1e3; }
        .main-nav .sub-list .sub-list { left: auto; }
        .main-nav .nav-3 { top: auto; left: auto; box-shadow: none; }
        .main-nav .nav-3 > li[data-nav-status="active"] > a { background: #9f1f14; }
        .main-nav .nav-3 > li > a { padding: 15px 15px 15px 60px; border-top: 1px solid #fbf1e3;  color: #fbf1e3; }

		.banner-area .banner img { width: 100%; }

		#directors-message img { width: 100%; }
		.site-footer .snow { background-size: 7%; }
		.site-footer .container div.footer-block { width: 100%; padding: 0 15%; margin: 0 0 30px 0; }
		.site-footer .right-side nav.footer-nav { display: none; }
		.site-footer .site-title { margin: 0 auto; }
		ul.footer-navigation { padding: 0; }
		p.proud:before { top: -5px; left: 75px; line-height: 0.75; }

	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 670px) {
		iframe { min-height: 50px; max-height: 200px; }
		body.financial-donations iframe { max-height: none; }
		.site-header .container { padding: 0 1rem; }
		.site-title { position: relative; flex-basis: 80%; max-width: 80%; padding: 0; background: none; }
		.site-title > a { margin: 0; background-size: contain; }
		.feature-banners div.hundred-years { top: 0; width: 100%; padding: 0.5em; margin: 0; }
		.feature-banners div.hundred-years h2 { font-size: 20px; text-align: center; }
		.feature-banners div.hampers-needed,
		.page-heading div.hampers-needed { display: none; }
		#quicklinks .container .quicklink,
		#quicklinks .container .quicklink:first-child { width: 100%; margin: 0 0 15px 0; }
		.form-block { padding: 15px; }
        div.input-text, div.input-email, div.input-number { flex-basis: unset; }
		.container.banner-block { display: none; }
		.news { padding: 0 0 15px 0; }
		.news article { width: 100%; }
		.event-set > div p.dates,
		.event-set > div h3,
		.event-set > div div.body { width: 100%; }

		.grid-flex .banner { width: 50%; }

		a.button { width: 100%; }

		section#introduction { margin: 0; }
		section#introduction .container { padding: 1rem 1rem 3rem 1rem; }
		section#introduction .container h1 { margin: 0 0 3rem 0; font-size: 4.75rem; letter-spacing: -7px; }
		section#introduction div#intro-banner { position: relative; width: 100%; min-height: 0; padding: 0 0 7rem 0; }
		section#introduction div#intro-banner:before { height: 170px; background-position: -2px 20px; }
        section#introduction div#intro-banner div.button-set { margin: 0 auto; }

		section#about .container { padding: 3rem 1rem; }

		section#statistics .container { padding: 3rem 1rem; }
		section#statistics div.stat { flex-basis: 100%; max-width: 100%; }

		section#apply .container { padding: 3rem 1rem; margin-bottom: 0; }

		section#latest:before { display: none; }
		section#latest .container { padding: 3rem 1rem; }
		section#latest .container div.blog.feed > h2 { flex-basis: 100%; max-width: 100%; }
		section#latest .container div.blog.feed > div.article-set { margin: 0 0 1rem 0; }
		section#latest .container div.blog.feed > div.article-set article { flex-basis: 100%; max-width: 100%; }
		section#latest .container div.blog.feed > ul.actions { order: 1; }
		section#latest .container div.blog.feed { flex-basis: 100%; max-width: 100%; }
		section#latest .container div.blog.banner { position: relative; top: auto; left: auto; width: 100%; }

		section#key-dates .container { padding: 3rem 1rem 5rem 1rem; }
		section#key-dates div.date { flex-basis: 100%; max-width: 100%; }
		section#key-dates div.date div.date-info h3 { font-size: 3.25rem; }

		section#tradition div.tradition { flex-basis: 100%; max-width: 100%; }
		section#tradition .container:after { display: none; }

		.site-footer .left-side,
		.site-footer .right-side { flex-basis: 100%; max-width: 100%; }
		.site-footer .left-side .site-title > a { background-position: center center; }
		.site-footer .right-side ul.social { justify-content: center; flex-basis: 100%; max-width: 100%; margin: 0 0 1.25rem 0; }
		.site-footer .container div.footer-block { padding: 0 1.25rem; margin: 0 0 2rem 0; }

	}
	@media only screen and (max-width: 500px) {

	}