/*

	Query CSS
	Copyright (C) 2020 OwlTree Web Solutions.

*/

@media only screen and (min-width: 480px) and (max-width: 640px)
	{
		
		.logo-container img
		{
			/*width: 200px;*/
		}
		
		p.menu-symbol
		{
			font-size: 2.5em;
			line-height: 0.9em;
		}
		
		a.category-grid h3
		{
			font-size: 1.4em;
		}
		
		
		
		.banner-caption h1, .banner-caption h2
		{
			/*width: 38vw;*/
			/*max-width: 330px;*/
			font-size: 1.5em;
		}
		
		.news-grid
		{
			width: 45%;
		}
		
		.docs-grid
		{
			width: 29%;
		}
						
	}


@media only screen and (min-width: 640px) and (max-width: 1024px)
	{
		
		header
		{
			height: 140px;
		}
		
		.phone-number-header, .logo-container, .nav
		{
			display: block;
			/*width: 31%;*/
		}
		
		p.menu-symbol
		{
			font-size: 3em;
			line-height: 0.8em;
		}
		
		.sidenav a
		{
			font-size: 1.6em;
		}
		
		a.submenu
		{
			font-size: 1em;
		}
		
		a.header-phone
		{
			font-size: 1.4em;
		}
		
		a.header-email
		{
			font-size: 0.8em;
		}
		
		.banner-caption
		{
			margin: 8vw 0 0 0;
		}
		
		h1
		{
			font-size: 2em;
		}
		
		h2, h2.section-title
		{
			font-size: 2em;
		}
		
		.banner-caption h1, .banner-caption h2
		{
			/*width: 32vw;*/
			/*max-width: 330px;*/
			font-size: 1.8em;
		}
		
		.col
		{
			width: 40%;
		}
		
		.col-thirds:nth-child(1)
		{
			float: left;
			width: 46%;
			margin: 0em 2% 0em 0%;
			padding: 0.5em 1%;
		}
		
		.col-thirds:nth-child(2)
		{
			float: left;
			width: 46%;
			margin: 0em 1% 0em 1%;
			padding: 0.5em 1%;
		}
		
		.col-thirds:nth-child(3)
		{
			float: left;
			width: 46%;
			margin: 0em 0% 0em 2%;
			padding: 0.5em 1%;
		}
		
		.service-grid, .product-category-grid, .team-grid
		{
			width: 31%;
		}
		
		.usp-grid
		{
			width: 40%;
			margin: 1em 5% 0 5%;
		}
		
		.knowledge-section
		{
			width: 46%;
		}
		
		a.category-grid h3
		{
			font-size: 2em;
		}
		
		.cta-col:nth-child(1)
		{
			float: left;
			width: 30%;
			margin: 0em 2% 1em 0%;
			padding: 1em 0%;
			text-align: right;
		}
		
		.cta-col:nth-child(2)
		{
			float: left;
			width: 30%;
			margin: 0em 1% 1em 1%;
			padding: 1em 0%;
		}
		
		.cta-col:nth-child(3)
		{
			float: left;
			width: 30%;
			margin: 0em 0% 1em 2%;
			padding: 1em 0%;
			text-align: left;
		}
		
		.cta-col h3
		{
			font-size: 2em;
		}
		
		.cta-col p
		{
			font-size: 1.7em;
		}
		
		.cta-col a
		{
			font-size: 2.5vw;	
		}
		
		.product-col
		{
			width: 50%;
		}
		
		.product-col img
		{
			margin-top: -5.5em;	
		}
		
		.link-section
		{
			width: 31%;
		}
		
		.news-grid
		{
			width: 28%;
		}
		
		.docs-grid
		{
			width: 21%;
		}
		
		.footer-col
		{
			width: 31%;
		}
		
		div.block
		{
			width: 29%;
		}		
				
	}


@media only screen and (min-width: 1024px) and (max-width: 1280px)
	{
		
		header
		{
			height: 140px;
		}
		
		.logo-container
		{
			width: 50%;	
		}
		
		.logo-container img
		{
			width: 50%;
			max-width: 200px;
			/*min-width: 130px;*/
			margin: 0 20% 0 20%;
			padding: 0;
		}
		
		.header-contact
		{
			width: 27%;
			padding-right: 3%;
		}
		
		/*.nav-horizontal
		{
			display: inline-block;
		}
		
		.nav
		{
			display: none;
		}*/
		
		p.menu-symbol
		{
			font-size: 3em;
			line-height: 0.8em;
		}
		
		a.header-phone
		{
			font-size: 1.6em;
		}
		
		a.header-email
		{
			font-size: 1.3em;
		}
		
		.sidenav a
		{
			font-size: 1.7em;
		}
		
		a.submenu
		{
			font-size: 1em;
		}
		
		.banner-section-home, .banner-section, .banner-section-static
		{
			margin-top: 140px;
		}
		
		.banner-gradients
		{
			top: -140px;
			height: calc(100% + 140px);
		}
		
		.banner-caption
		{
			margin: 7vw 0 0 0;
		}
		
		h1
		{
			font-size: 2em;
		}
		
		h2, h2.section-title
		{
			font-size: 2em;
		}
		
		.banner-caption h1, .banner-caption h2
		{
			/*width: 30vw;*/
			/*max-width: 320px;*/
			font-size: 4vw;
		}
		
		.col
		{
			width: 40%;
		}
		
		.col-thirds:nth-child(1)
		{
			float: left;
			width: 29%;
			margin: 0em 2% 0em 0%;
			padding: 0.5em 1%;
		}
		
		.col-thirds:nth-child(2)
		{
			float: left;
			width: 29%;
			margin: 0em 1% 0em 1%;
			padding: 0.5em 1%;
		}
		
		.col-thirds:nth-child(3)
		{
			float: left;
			width: 29%;
			margin: 0em 0% 0em 2%;
			padding: 0.5em 1%;
		}
		
		.service-grid, .product-category-grid, .team-grid
		{
			width: 31%;
		}
		
		.service-prod-col
		{
			width: 48%;
		}
		
		.service-product-grid
		{
			width: 29%;
		}
		
		.usp-grid
		{
			width: 40%;
			margin: 1em 5% 0 5%;
		}
		
		.knowledge-section
		{
			width: 29%;
		}
		
		a.category-grid h3
		{
			font-size: 2em;
		}
		
		.cta-col:nth-child(1)
		{
			float: left;
			width: 30%;
			margin: 0em 2% 1em 0%;
			padding: 1em 0%;
			text-align: right;
		}
		
		.cta-col:nth-child(2)
		{
			float: left;
			width: 30%;
			margin: 0em 1% 1em 1%;
			padding: 1em 0%;
		}
		
		.cta-col:nth-child(3)
		{
			float: left;
			width: 30%;
			margin: 0em 0% 1em 2%;
			padding: 1em 0%;
			text-align: left;
		}
		
		.cta-col h3
		{
			font-size: 2em;
		}
		
		.cta-col p
		{
			font-size: 1.7em;
		}
		
		.product-col
		{
			width: 50%;
		}
		
		.product-col img
		{
			margin-top: -5.5em;	
		}
		
		.link-section
		{
			width: 31%;
		}
		
		.news-grid
		{
			width: 20%;
		}
		
		.docs-grid
		{
			width: 16%;
		}
		
		.footer-col
		{
			width: 31%;
		}
		
		div.block
		{
			width: 16%;
		}
		
	}


@media only screen and (min-width: 1280px)
	{
		
		header
		{
			height: 140px;
		}
		
		
		.logo-container
		{
			width: 50%;	
		}
		
		.logo-container img
		{
			width: 50%;
			max-width: 200px;
			/*min-width: 130px;*/
			margin: 0 20% 0 20%;
			padding: 0;
		}
		
		.header-contact
		{
			width: 27%;
			padding-right: 3%;
		}
		
		/*.nav-horizontal
		{
			display: inline-block;
		}
		
		.nav
		{
			display: none;
		}*/
		
		p.menu-symbol
		{
			font-size: 3em;
			line-height: 0.8em;
		}
		
		.sidenav a
		{
			font-size: 1.7em;
		}
		
		a.submenu
		{
			font-size: 1em;
		}
		
		a.header-phone
		{
			font-size: 2em;
		}
		
		a.header-email
		{
			font-size: 1.3em;
		}
		
		a.header-phone
		{
			font-size: 1.6em;
		}
		
		
		.logo-container img
		{
			width: 40%;
		}
		
		
		.banner-gradients
		{
			top: -140px;
			height: calc(100% + 140px);
		}
		
		h1
		{
			font-size: 2em;
		}
		
		h2, h2.section-title
		{
			font-size: 2em;
			line-height: 1.2em;
		}
		
		.banner-section-home, .banner-section, .banner-section-static
		{
			margin-top: 140px;
		}
		
		.banner-caption
		{
			margin: 5em 0 0 0;
		}
		
		.banner-caption h1, .banner-caption h2
		{
			/*width: 30vw;*/
			/*max-width: 380px;*/
			font-size: 3em;
		}
		
		.col
		{
			width: 40%;
		}
		
		.col-thirds:nth-child(1)
		{
			float: left;
			width: 29%;
			margin: 0em 2% 0em 0%;
			padding: 0.5em 1%;
		}
		
		.col-thirds:nth-child(2)
		{
			float: left;
			width: 29%;
			margin: 0em 1% 0em 1%;
			padding: 0.5em 1%;
		}
		
		.col-thirds:nth-child(3)
		{
			float: left;
			width: 29%;
			margin: 0em 0% 0em 2%;
			padding: 0.5em 1%;
		}
		
		.service-grid, .product-category-grid, .team-grid
		{
			width: 21%;
		}
		
		.service-prod-col
		{
			width: 48%;
		}
		
		.service-product-grid
		{
			width: 29%;
		}
		
		.usp-grid
		{
			width: 40%;
			margin: 1em 5% 0 5%;
		}
		
		.knowledge-section
		{
			width: 29%;
		}
		
		button.button
		{
			width: 23%;
		}
		
		a.category-grid h3
		{
			font-size: 2em;
		}
		
		.cta-col:nth-child(1)
		{
			float: left;
			width: 30%;
			margin: 0em 2% 1em 0%;
			padding: 1em 0%;
			text-align: right;
		}
		
		.cta-col:nth-child(2)
		{
			float: left;
			width: 30%;
			margin: 0em 1% 1em 1%;
			padding: 1em 0%;
		}
		
		.cta-col:nth-child(3)
		{
			float: left;
			width: 30%;
			margin: 0em 0% 1em 2%;
			padding: 1em 0%;
			text-align: left;
		}
		
		.cta-col h3
		{
			font-size: 2em;
		}
		
		.cta-col p
		{
			font-size: 1.7em;
		}
		
		.link-section
		{
			width: 31%;
		}
		
		.product-col
		{
			width: 50%;
		}
		
		.product-col img
		{
			margin-top: -5.5em;	
		}
		
		.news-grid
		{
			width: 20%;
		}
		
		.docs-grid
		{
			width: 16%;
		}
		
		.footer-col
		{
			width: 31%;
		}
		
		div.block
		{
			width: 16%;
		}
		
}