/* ############################################################################
   ## 
   ##  LAYOUT FOR DIFFERENT SCREENS
   ##  Check the following URL for a good device size reference:
   ##  https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Matrices
   ##
   ######################################################################### */

@media screen and (max-width: 1920px) {
	#PageBanner {
		background-size: cover;
	}
}
@media screen and (max-width: 1450px) {
	#PageBanner {
		/*background-position-y: -50px;*/
	}
}
@media screen and (max-width: 1280px) {
	#PageBanner {
		background-position-y: 0px;
	}
}
@media screen and (max-width: 1060px) {
	#AccessibilityToolbar{
		box-sizing:border-box;
		width:100%;
		margin:10px 0;
		font-size:75%;
		padding: 0 2%;
	}
		#AccessibilityToolbarInner{
			width:100%;
			padding:0;
			display:inline-block;
		}
		
	#Header{
		
	}
		#HeaderInner{
			width:100%;
			display:inline-block;
		}
			#PageBanner {
				background-position-x: 70%;
			}
				#PageBannerContent {
					width: 100%;
					padding: 0 2%;
					box-sizing: border-box;
				}
	#MainMenu {
		box-sizing: border-box;
	}
		#MainMenuInner {
			width:100%;
			box-sizing: border-box;
		}
			#MenuUL {
				font-size: 16px;
			}
	#TrailNav {
		padding-left: 2%;
	}
		#TrailNavInner {
			width: 100%;
		}
	#FooterInner {
		width: 100%;
	}
}
@media screen and (max-width: 1060px) {
	#Header {
		padding: 0 2%;
		box-sizing: border-box;
		margin-bottom: 35px;
	}
	#TrailNavInner {
		padding: 10px 2%;
	}
	.fullWidthInner {
		padding: 0 2%;
	}
	#FooterInner {
		padding: 0 2%;
	}
	#FeedbackWrapperInner {
		padding: 0 2%;
	}
	#CharityABN {
		padding: 0;
	}
	#Footer #FooterBottom {
		padding: 4% 0;
	}
	#MainMenuInner {
		width: 100%;
		padding: 0 2%;
	}
}
@media screen and (max-width: 1024px) {
	#TrailNavInner {
		width: 100%;
		padding: 10px 0;
	}
	
	#Header{margin-bottom:0;}
		#Header #Quicklinks{
			margin:0;
		}
		#Header #SearchSite{
			box-sizing:border-box;
			width:200px;
			height:35px;
			padding:0;
			margin:10px 0 0 0;
			clear:right;
			display: inline-block;
		}
			#Header #SearchSite .keywords {
				width: 80%;
				height: 33px;
				padding: 1% 4%;
			}
			#Header #SearchSite .submit {
				width: 20%;
				height:33px;
				background-color: #fff;
			}
}
@media screen and (max-width: 1004px) {
	.desktop{
		display:none;
	}
	.mobile{
		display:inline-block !important;
	}
	#Page #PageContent #Primary #PrimaryInner {
		display: block;
		margin: 0 auto;
	}
	#Page #PageContent #PrimaryContent {
	}
    /* Main Menu */
    #MainMenu {
    }
		#MenuUL li {
			/*width: 100%;*/
			overflow: hidden;
			padding: 0;
		}
		#MenuUL li:first-child a {
			padding-left: 0px;
		}
		#MenuUL li ul {
			width:100%;
			left:0; 
			position: relative;
			display:none;
		}
		#MenuUL li:hover ul, #MenuUL li li:hover ul, #MenuUL li.sfhover ul, #MenuUL li li.sfhover ul {
			left:0; 
			display:inline-block; 
			display:none;
		}
	.subMenu{
		display:none;
	}
	#SubHeader {
		margin:-4px 0 0 0;
	}
	#Footer {
    }
		#FooterInner {
			width: 100%;     
		}
}

@media screen and (max-width: 990px) {
    /* Smaller than the fixed width template. Adjust to suit the template. Usually around 970px-980px or depends on your grid/CSS system. */

    #Template {
        width: 100%;
        min-width: 0;
    }

    #Primary img, #Secondary img {
        max-width: 100% !important;
        height: auto !important;
    } 
}

@media screen and (max-width: 767px) {
    /* A good general size for landscape smartphone and small tablet layout */

    body {
        -webkit-text-size-adjust: none; /* Without this iPhone messes around with font sizes in portrait/landscape. */
        /*font-size: 87.5%;*/
    }

    #TemplateWrapper {
    }

    #Template {
        width: 100%;
        border: 0;
    }
	#Header #Quicklinks {
		width: 50%;
	}
		#Header #Quicklinks p a#header-fundraise, #Header #Quicklinks p a#header-volunteer {
			display: none;
		}
	#Footer {
    }
		#Footer #FooterMenu .threeCol {
			width: 50%;
		}
/* Responsive DIV tags */
.fullWidth{ 
}
	.col20Width,.col25Width,.col33Width,.col33Width.colMargin,.col50Width,.col50Width.colMargin,.col75Width,.col80Width{ 
		width:100%;
		margin:1% 0;
	}
	/* Call to actions */
	.CallsToAction {
	}
		.Call {
			width:48%;
			margin:1% 0;
		}

}
@media screen and (max-width: 685px) {
	#ContentInner {
		padding: 0;
	}
	#Page #PageContentInner {
		/*0 2%;*/
	}
}
@media screen and (max-width: 600px) {
	#Header #Quicklinks p a#header-shop {
		display: none;
	}
	#PageBanner, #PageBannerContent {
		height: 300px;
	}
	/* Main Menu */
	.menuIcon span {
	  width: 70%;
	  left: 15%;
	}

    div.fourCols .col1, div.fourCols .col3,
    div.fiveCols .col1, div.fiveCols .col3, div.fiveCols .col5 {
        float: left !important;
        clear: left !important;
        width: 50% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    div.twoCols .col1, div.twoCols .col2,
    div.twoCols.customLayout1 .col1, div.twoCols.customLayout1 .col2,
    div.twoCols.customLayout2 .col1, div.twoCols.customLayout2 .col2,
    div.threeCols .col1, div.threeCols .col2, div.threeCols .col3,
    div.fourCols .col1, div.fourCols .col2, div.fourCols .col3, div.fourCols .col4,
    div.fiveCols .col1, div.fiveCols .col2, div.fiveCols .col3, div.fiveCols .col4, div.fiveCols .col5,
    div.sixCols .col1, div.sixCols .col2, div.sixCols .col3, div.sixCols .col4, div.sixCols .col5, div.sixCols .col6 {
		width:100%;
        float: left !important;
        clear: left !important;
        /*width: auto !important;*/
        width: 100% !important;
        margin:0.75em 0;
    }
}

@media screen and (max-width: 480px) {
/* Plenty of newer smartphones in portrait. Older/smaller devices in landscape - iPhone 3G/S, small HTCs, Palm, Blackberry */
	#Header{
	}
		#Header #Quicklinks{width:100px}
	/*SubContainers*/
	#Primary .container{
		width:96%;
		margin: 0 2% 4%;
	}
}

@media screen and (max-width: 440px) {
    /* Older/smaller devices in portrait - iPhone 3G/S, small HTCs, Palm, Blackberry */
	#AccessibilityToolbar li {
		margin-right:15px;
	}
	#Footer {
    }
		#FooterInner {
			width: 100%;     
		}
			#Footer #FooterMenu .threeCol {
				width: 100%;
				text-align:center;
			}
				#Footer #FooterMenu .threeCol:last-child {
					text-align:center;
				}
		#CharityABN {
			padding: 0 4%;
			text-align: center;
		}

}
@media screen and (max-width: 400px) {
body{
	/*font-size:80%;*/
}
	#Header{}
		#Header #HeaderContent{margin-top:5px;}
		#Header #HeaderContent,#Header #Logo{width:140px;}
		#Header #Quicklinks{}
			#Header #Quicklinks p a{width:70px;font-size:98%;}
		#Header #SearchSite{
			width:150px;
		}
/* Call to actions */
.CallsToAction {
}
	.Call {
		width:98%;
		margin:1% 0;
	}
}
@media screen and (max-width: 318px) {
	#HeaderInner{padding:10px 0;}
	#Header #HeaderContent,#Header #Quicklinks,#Header #SearchSite{
		width:100%;
		height:auto;
		margin:0 0 5px 0;
		padding:0;
		text-align:center;
		float:none;
		clear:both;
	}
		#Header #Logo {width:100%;height:auto;}
			#Header #Logo a img {width: 80px;}
		#Header #Quicklinks{width:50%;display:inline-block;}
			#Header #Quicklinks p{height:auto;}
			#Header #Quicklinks p a{ width:70px;height:auto;padding:10px;font-size:90%;}
		#Header #MobileMenu{width:50%;float:left;text-align:center;}
		#Header #SearchSite {width:100%;padding:0 40px 0 0;margin:5px 0;background:none;}
			#Header #SearchSite .keywords,#Header #SearchSite .submit{height:30px;}
			#Header #SearchSite .submit{background-size: 30%;}
			#Header #SearchSite fieldset,#Header #SearchSite .formFields li{margin:0;}
	#MainMenu{top:140px;}
	#SiteWideAlert{margin-top:10px;}
}