/*

	Query CSS
	Copyright (C) 2020 OwlTree Web Solutions.

*/

@media only screen and (min-width: 480px) and (max-width: 800px)
	{
		
		.cb-slideshow
		{
			height: 67vw;
		}
		
		.job, .story 
		{
			width: 47%;
		}
		
		.gallery
		{
			width:  46%;
		}
		
		.location
		{
			width: 42%;
		}
		
		.blog-grid
		{
			width: 44%;
		}
		
		h2.sold-out
		{
			transform: translateY(-700%) rotate(-20deg);
		}
				
	}




@media only screen and (min-width: 800px) and (max-width: 1024px)
	{
		
		.header-tel p
		{
			font-size: 1.5em;
			
		}
		
		.header-cta p
		{
			font-size: 1.5em;
		}
		
		.sidenav a
		{
			font-size: 2em;
		}
		
		a.submenu
		{
			font-size: 1.2em;
		}
		
		pre
		{
			font-size: 1em;
		}
		
		.h1-strip
		{
			margin-top: 18vw;
		}
		
		h1
		{
			font-size: 3.5em;
		}
		
		h2
		{
			font-size: 2em;
		}
		
		h2.section-strip-heading
		{
			/*font-size: 12vw;*/
		}
		
		.cb-slideshow
		{
			height: 72vw;
		}
		
		.banner-caption h2
		{
			font-size: 2.5em;
			line-height: 1em;
			margin: 0.4em 0;
		}
		
		.banner-caption h3
		{
			font-size: 2.2em;
			line-height: 1em;
			margin: 0.4em 0;
		}

		.banner-caption h4
		{
			font-size: 2em;
			line-height: 1em;
			margin: 0.4em 0;
		}
				
		.col
		{
			width: 44%;
			margin: 1em 2% 0 2%;
			padding: 1em 1% 1em 1%;
		}
		
		.col60
		{
			width: 60%;
		}
		
		.col40
		{
			width: 40%;
		}
		
		.cta-col h3
		{
			font-size: 3.7em;
		}
		
		.cta-col p
		{
			font-size: 1.5em;
		}
		
		p.emergency-number
		{
			font-size: 6vw;
		}
		
		.support-services
		{
			width: 46%;
			height: auto;
		}
		
		.support-services:nth-child(4n+1), .support-services:nth-child(4n+4)
		{
			background-color: #f07f3c;
			border: none;
		}
		
		.support-services:nth-child(4n+2), .support-services:nth-child(4n+3)
		{
			background-color: #2a265a;
		}
		
		.support-services div
		{
			width: 19%;
		}
		
		.support-services img
		{
			margin: 10px;
		}
		
		.support-services h4
		{
			padding: 9% 10px;
			font-size: 3.5vw;
		}
		
		a.fundraising-links
		{
			width: 21%;
			padding-bottom: 21%;
			margin: 0.5em 1%;
		}
		
		a.fundraising-links h3
		{
			font-size: 4vw;
		}
		
		.fundraising-pack-link p a, .fundraising-pack-link p a:visited
		{
			font-size: 1.5em;	
		}
		
		button.button
		{
			width: 46%;
		}
		
		.team, .award
		{
			width: 48%;
			margin: 1em 1%;
		}
		
		.gallery
		{
			width:  46%;
		}
		
		.gallery-photos
		{
			width: 32%;
		}
		
		.job, .story
		{
			width: 47%;
		}
		
		.blog-link, .work-with-us-link
		{
			width: 46%;
		}
		
		.blog-grid
		{
			width: 44%;
		}
		
		.event-link
		{
			width: 46%;
			padding: 1em 1%;
		}
		
		h2.sold-out
		{
			transform: translateY(-600%) rotate(-20deg);
		}
		
		.location
		{
			width: 42%;
		}
		
	}




@media only screen and (min-width: 1024px) and (max-width: 1280px)
	{
		
		.header-tel p
		{
			font-size: 1.5em;
			padding: 1em 0% 1em 0%;
		}
		
		.header-cta p
		{
			font-size: 1.5em;
		}
		
		.sidenav a
		{
			font-size: 2em;
		}
		
		a.submenu
		{
			font-size: 1.2em;
		}
		
		pre
		{
			font-size: 1.3em;
		}
		
		.h1-strip
		{
			margin-top: 18vw;
		}
		
		h1
		{
			font-size: 3.3em;
		}
		
		h2.section-strip-heading
		{
			/*font-size: 8em;*/
		}
		
		h2
		{
			font-size: 3em;
		}
		
		.cb-slideshow
		{
			height: 67vw;
		}
		
		.banner-caption h2
		{
			font-size: 2.5em;
			line-height: 1em;
			margin: 0.4em 0;
		}
		
		.banner-caption h3
		{
			font-size: 2.2em;
			line-height: 1em;
			margin: 0.4em 0;
		}

		.banner-caption h4
		{
			font-size: 2em;
			line-height: 1em;
			margin: 0.4em 0;
		}
		
		.col
		{
			width: 44%;
			margin: 1em 2% 0 2%;
			padding: 1em 1% 1em 1%;
		}
		
		.col60
		{
			width: 60%;
		}
		
		.col40
		{
			width: 40%;
		}
		
		.cta-col
		{
			width: 40%;
			padding: 2em 10% 2em 0%;
			text-align: right;	
		}
		
		.cta-col:nth-child(2)
		{
			width: 50%;
			padding: 2em 0% 2em 0%;
		}
		
		p.emergency-number
		{
			font-size: 6vw;
		}
		
		.support-services
		{
			width: 46%;
		}
		
		.support-services:nth-child(4n+1), .support-services:nth-child(4n+4)
		{
			background-color: #f07f3c;
			border: none;
		}
		
		.support-services:nth-child(4n+2), .support-services:nth-child(4n+3)
		{
			background-color: #2a265a;
		}
		
		.support-services img
		{
			margin: 10px;
		}
		
		.support-services h4
		{
			font-size: 1.6em;
		}
		
		.mobile-align
		{
			text-align: right;
		}
		
		.cta-col h3
		{
			font-size: 3em;
		}
		
		.cta-col p
		{
			font-size: 1.4em;
		}
		
		.explore-links
		{
			font-size: 1.3em;
		}
		
		a.fundraising-links
		{
			width: 17%;
			padding-bottom: 17%;
		}
		
		a.fundraising-links h3
		{
			font-size: 1.5em;
		}
		
		.fundraising-pack-link p a, .fundraising-pack-link p a:visited
		{
			font-size: 1.5em;	
		}
		
		button.button
		{
			width: 21%;
		}
		
		.team, .award
		{
			width: 31%;
			margin: 1em 1%;
		}
		
		.job, .story
		{
			width: 30%;
		}
		
		.blog-link, .work-with-us-link
		{
			width: 46%;
		}
		
		.blog-grid
		{
			width: 27%;
		}
		
		.event-link
		{
			width: 46%;
			padding: 1em 1%;
		}
		
		h2.sold-out
		{
			transform: translateY(-550%) rotate(-20deg);
		}
		
		h3.newsletter-button
		{
			font-size: 4em;
		}
		
		.gallery
		{
			width:  29%;
		}
		
		.gallery-photos
		{
			width: 32%;
		}
		
		.location
		{
			width: 18%;
		}
		
		footer
		{
			text-align: left;
		}
		
		.footer-left
		{
			width: 33%;
		}
		
		.footer-centre
		{
			width: 33%
		}
		
		.footer-right
		{
			width: 33%;
			text-align: right;
		}
		
	}




@media only screen and (min-width: 1280px)
	{
		
		.header-tel p
		{
			font-size: 1.5em;
			padding: 1em 0% 1em 0%;
		}
		
		.header-cta p
		{
			font-size: 1.5em;
			padding: 1em 0% 1em 4%;
		}
		
		.symbol-holder p.menu-symbol
		{
			font-size: 3em;
			padding: 30px 0;
		}
		
		.sidenav a
		{
			font-size: 2em;
		}
		
		a.submenu
		{
			font-size: 1.2em;
		}
		
		pre
		{
			font-size: 1.6em;
		}
		
		.h1-strip
		{
			margin-top: 240px;
		}
		
		h1
		{
			font-size: 3.5em;
		}
		
		h2.section-strip-heading
		{
			font-size: 7em;
		}
		
		h2
		{
			font-size: 3em;
		}
		
		.banner-section-home
		{
			margin-top: 0px;
		}
		
		.cb-slideshow
		{
			height: 67vw;
		}
		
		.banner-caption h2
		{
			font-size: 2.5em;
			line-height: 1em;
			margin: 0.4em 0;
		}
		
		.banner-caption h3
		{
			font-size: 2.2em;
			line-height: 1em;
			margin: 0.4em 0;
		}

		.banner-caption h4
		{
			font-size: 2em;
			line-height: 1em;
			margin: 0.4em 0;
		}
		
		.col
		{
			width: 44%;
			margin: 1em 2% 0 2%;
			padding: 1em 1% 1em 1%;
		}
		
		.col60
		{
			width: 60%;
		}
		
		.col40
		{
			width: 40%;
		}
		
		.cta-col
		{
			width: 40%;
			padding: 2em 10% 2em 0%;
			text-align: right;
		}
		
		.cta-col:nth-child(2)
		{
			width: 50%;
			padding: 2em 0% 2em 0%;
		}
		
		p.emergency-number
		{
			font-size: 3em;
		}
		
		.support-services
		{
			width: 46%;
		}
		
		.support-services:nth-child(4n+1), .support-services:nth-child(4n+4)
		{
			background-color: #f07f3c;
			border: none;
		}
		
		.support-services:nth-child(4n+2), .support-services:nth-child(4n+3)
		{
			background-color: #2a265a;
		}
		
		.support-services img
		{
			margin: 10px;
		}
		
		.support-services
		{
			font-size: 1.1em;
		}
		
		.support-services h4
		{
			font-size: 1.6em;
		}
		
		.mobile-align
		{
			text-align: right;
		}
		
		.cta-col h3
		{
			font-size: 3.5em;
		}
		
		.cta-col p
		{
			font-size: 1.9em;
		}
		
		.explore-links
		{
			font-size: 1.5em;
		}
		
		a.fundraising-links
		{
			width: 18%;
			padding-bottom: 18%;
		}
		
		a.fundraising-links h3
		{
			font-size: 1.9em;
		}
		
		.fundraising-pack-link p a, .fundraising-pack-link p a:visited
		{
			font-size: 1.5em;	
		}
		
		button.button
		{
			width: 21%;
		}
		
		.team, .award
		{
			width: 31%;
			margin: 1em 1%;
		}
		
		.funders h2
		{
			font-size: 2.2em;
		}
		
		.job, .story
		{
			width: 30%;
		}
		
		.blog-link, .work-with-us-link
		{
			width: 46%;
		}
		
		.blog-grid
		{
			width: 27%;
		}
		
		.event-link
		{
			width: 46%;
			padding: 1em 1%;
		}
		
		.news-grid
		{
			width: 50%;
			margin: 1em 0%;
		}
		
		.news-grid h2, .news-grid h3
		{
			font-size: 3em;
		}
		
		h3.newsletter-button
		{
			font-size: 4em;
		}
		
		.gallery
		{
			width:  29%;
		}
		
		.gallery-photos
		{
			width: 24%;
		}
		
		.location
		{
			width: 18%;
		}
				
		footer
		{
			text-align: left;
		}
		
		.footer-left
		{
			width: 33%;
		}
		
		.footer-centre
		{
			width: 33%
		}
		
		.footer-right
		{
			width: 34%;
			text-align: right;
		}
		
		
		
}