/*

	Query CSS
	Copyright (C) 2020 OwlTree Web Solutions.

*/

@media only screen and (min-width: 480px) and (max-width: 640px)
	{
		
		.solution-col
		{
			/*width: 46%;*/
		}
		
		.blog-grid
		{
			width: 46%;
		}
		
		.blog-grid h2
		{
			font-size: 1.4em;
		}
		
		.blog-grid h3
		{
			font-size: 1.1em;
			line-height: 1em;
		}
		
		.team-member
		{
			float: left;
			width: 44%;
		}
				
	}




@media only screen and (min-width: 640px) and (max-width: 1024px)
	{
		

		.phone-number-header, .logo-container, .nav
		{
			display: block;
			/*width: 31%;*/
		}
		
		h1
		{
			font-size: 2.5em;
		}
		
		h2
		{
			font-size: 2em;
		}
		
		a.submenu
		{
			display: block;
			font-size: 1.3em;
			margin-right: 0px;
		}
		
		.col
		{
			width: 98%;
		}
		
		.col-3, .col-3:last-child
		{
			width: 29%;
		}
		
		button.see-features a, button.see-features a:visited
		{
			font-size: 1.5em;
		}
		
		.cta-col, .col-contact
		{
			width: 60%;
		}
		
		.cta-col:first-child, .col-contact:first-child
		{
			width: 32%;
		}
		
		.solution-col
		{
			width: 41%;
			border-right: 2px solid #acced7;
		}
		
		.solution-col:nth-child(even)
		{
			border-right: none;
		}
		
		.solution-col:last-child, .solution-col:nth-last-child(2)
		{
			border-bottom: none;
		}
		
		.cta-col h3
		{
			font-size: 2em;
		}
		
		.cta-col p
		{
			font-size: 1.7em;
		}
		
		.blog-grid
		{
			width: 46%;
		}
		
		.blog-grid h2
		{
			font-size: 1.6em;
		}
		
		.blog-grid h3
		{
			font-size: 1.1em;
			line-height: 1em;
		}
		
		.logo-grid
		{
			width: 31%;
		}
		
		.team-member
		{
			float: left;
			width: 27%;
		}
		
		.brochure-col
		{
			width: 29%;
		}
		
	}




@media only screen and (min-width: 1024px) and (max-width: 1280px)
	{
		
		.logo-container
		{	
			width: 20%;
		}
		
		.nav-horizontal
		{
			display: none;
		}
		
		.header-cta
		{
			display: block;
		}
		
		.nav
		{
			display: block;
		}
		
		.sidenav a
		{
			font-size: 2em;
		}
		a.submenu
		{
			display: block;
			font-size: 1.3em;
			margin-right: 0px;
		}
		
		h1
		{
			font-size: 3em;
		}
		
		h2
		{
			font-size: 2em;
		}
		
		.col
		{
			width: 48%;
		}
		
		.col-3, .col-3:last-child
		{
			width: 29%;
		}
		
		.cta-col, .col-contact
		{
			width: 60%;
		}
		
		.cta-col:first-child, .col-contact:first-child
		{
			width: 32%;
		}
		
		button.see-features a, button.see-features a:visited
		{
			font-size: 1.9em;
		}
		
		.solution-col
		{
			width: 41%;
			border-right: 2px solid #acced7;
		}
		
		.solution-col:nth-child(even)
		{
			border-right: none;
		}
		
		.solution-col:last-child, .solution-col:nth-last-child(2)
		{
			border-bottom: none;
		}
		
		.cta-col h3
		{
			font-size: 2em;
		}
		
		.cta-col p
		{
			font-size: 1.7em;
		}
		
		.service-col-1
		{
			float: left;
			width: 32.2%;
			padding: 1em 4% 1em 0;
		}
		
		.service-col-2
		{
			float: left;
			width: 57.8%;
			padding: 1em 0% 1em 4%;
		}
		
		.box-style
		{
			width: 50%;
		}
		
		.blog-grid
		{
			width: 29%;
		}
		
		.blog-grid h2
		{
			font-size: 1.6em;
		}
		
		.blog-grid h3
		{
			font-size: 1.1em;
			line-height: 1em;
		}
		
		h3.newsletter-button
		{
			font-size: 4em;
		}
		
		.logo-grid
		{
			width: 23%;
		}
		
		.team-member
		{
			float: left;
			width: 27%;
		}
		
		.brochure-col
		{
			width: 29%;
		}
		
		.plan-card
		{
			width: 29%;
		}
		
		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
		{
			padding: 0 10px 10px 0;
			background-image: linear-gradient(180deg, #0d6179 70%, transparent 70%);
		}
		
		h1
		{
			font-size: 3em;
		}
		
		h2
		{
			font-size: 2.5em;
			line-height: 1.2em;
		}
		
		.logo-container
		{	
			width: 20%;
		}
		
		.nav-horizontal, .header-cta, nav
		{
			display: block;
		}
		
		button.header-demo
		{
			margin: 25px 20px 0 0;
		}
		
		.nav
		{
			display: none;
		}
		
		.sidenav a
		{
			font-size: 5em;
		}
		
		.banner-section-home
		{
			
		}
		
		img.laptop
		{
			
		}
		
		.extra-padding2
		{
			padding: 15em 0 3em 0;
		}
		
		.caption
		{
			
		}
		
		.col
		{
			width: 48%;
		}
		
		.col-3, .col-3:last-child
		{
			width: 29%;
		}
		
		button.see-features a, button.see-features a:visited
		{
			font-size: 1.9em;
		}
		
		.cta-col, .col-contact
		{
			width: 60%;
		}
		
		.cta-col:first-child, .col-contact:first-child
		{
			width: 32%;
		}
		
		.service-col-1
		{
			float: left;
			width: 32.2%;
			padding: 1em 4% 1em 0;
		}
		
		.service-col-2
		{
			float: left;
			width: 57.8%;
			padding: 1em 0% 1em 4%;
		}
		
		.solution-col
		{
			width: 41%;
			border-right: 2px solid #acced7;
		}
		
		.solution-col:nth-child(even)
		{
			border-right: none;
		}
		
		.solution-col:last-child, .solution-col:nth-last-child(2)
		{
			border-bottom: none;
		}
		
		.cta-col h3
		{
			font-size: 2em;
		}
		
		.cta-col p
		{
			font-size: 1.7em;
		}
		
		.box-style
		{
			/*width: 40%;*/
		}
		
		.blog-grid
		{
			width: 21%;
		}
		
		.blog-grid h2
		{
			font-size: 1.6em;
		}
		
		.blog-grid h3
		{
			
			font-size: 1.1em;
			line-height: 1em;
		}
		
		h3.newsletter-button
		{
			font-size: 4em;
		}
		
		.logo-grid
		{
			width: 23%;
		}
		
		.team-member
		{
			float: left;
			width: 27%;
		}
		
		.brochure-col
		{
			width: 29%;
		}
		
		.plan-card
		{
			width: 21%;
			max-width: 400px;
		}
				
		footer
		{
			text-align: left;
		}
		
		.footer-left
		{
			width: 33%;
		}
		
		.footer-centre
		{
			width: 33%
		}
		
		.footer-right
		{
			width: 33%;
			text-align: right;
		}
		
		
		
}