﻿.menu-toggle	{display:none;}

@media (max-width: 1380px)
{
	.padded			{padding:35px}
	.logo			{left: 20px}
	
	/** HEADER **/
	header			{height:70px;}
	header ul li a	{height:70px; font-size:16px;}
	header ul li ul	{top:70px; width: 200%;}
	
	/** HOME PANEL **/
	.home-buttons .col-2	{width:100%; padding-bottom: 0}
	
	/** FOOTER **/
	footer			{padding:10px 20px; font-size: 0}
	footer p		{font-size:13px; transform: translateY(2px)}
	footer ul		{padding-top:2px;}
	
	/* CONTACT PAGE */
	.contact-page	{padding-top:70px;}
	
	
}
@media (max-width: 1240px)
{
	/* MAIN NAV */
	header ul li 			{padding-left: 5px; padding-right: 5px;}
	header ul li a			{font-size:14px;}
	header ul li ul			{width:250%;}
	header ul li ul li a	{padding-left:10px;}

}
@media (max-width: 1100px)
{
	section.footer-links,
	
	.btn	{padding: 15px 20px 17px 20px;}
	
	
	
	/** FOOTER **/
	.footer-links ul li			{font-size:12px;}
	.footer-links ul li ul li	{font-size:10px;}

	/** SERVICES **/
	section.services .col-row-services .col-3 h3				{font-size:16px;}
	section.services .col-row-services .col-3 p					{font-size:12px;}
	section.services .col-row-services .col-3 .panel .btn		{font-size:12px;}
	section.services .col-row-services .col-3 .panel .btn span	{transform: translateY(1px);}
	
	/* CONTENT PAGE */
	.article-left	{width:65%; padding-right: 50px;}
	.article-right	{width:35%;}
	
	.invoice-left-col	{width:100%}
	
	/* PEOPLE */
	.people .col-4	{width:33.333%;}
	
}

@media (max-width: 1000px)
{
	
	h1	{font-size:60px;}
	
	/* INTRO SECTION */
	.intro-section h1	{font-size:60px;}
	.intro-section h2	{font-size:40px;}
	.intro-left p		{font-size:18px;}	
	
	.intro-right .col-2						{width:100%;}
	.intro-right .listing-panel-image		{display: none;}
	.intro-right .listing-panel-text span	{opacity:1;}
	.intro-right .listing-panel-text		{font-size:13px;}
	
	/* FOOTER */
	.footer-right				{float:none; margin: 0}
	footer p					{margin-left:0; margin-right: 5px; margin-top: 10px;}
	
	.btn span	{margin-top:0}
	
	
}

@media (max-width: 860px)
{
	
	.logo	{left:10px;}
	
	/* MOBILE MENU */
	#mobile-menu 				{width:320px; height:100%; background:#5693b8; position:fixed; top:0; bottom:0; left:100%; z-index:99999; padding:40px 35px 60px 35px; transition: all 0.5s; border:none; overflow: scroll;}
	#mobile-menu.open 			{margin-left:-320px;}
	#mobile-menu 				{margin-bottom:0px;}
	
	#mobile-menu .menu-close 	{position: absolute; width: 26px; height: 26px; top: 15px; right: 15px; display: block; background-image: url(/_assets/icon-close-white.png); background-size: cover}
	.menu-toggle				{display:inline-block; position: absolute; right: 0px; top: 50%; margin-top: -9.5px;}	

	header ul li				{height:auto; display: block; margin-bottom: 10px;}
	header ul li:before			{display:none;}
	header ul li a				{text-align:left; height: auto; padding: 5px; font-weight: 700;}
	header ul li a:hover		{background-color:#2f3a73}
	header ul li ul				{background-color:transparent; position: relative; left: auto; margin-left: 0; top: auto; width: auto; float: none; margin-top: 10px; margin-bottom: 0; box-shadow: none}
	header ul li ul li			{margin-bottom:5px;}
	header ul li ul li a		{padding:5px; padding-left: 10px; font-weight: 400}
	header ul li:hover a span	{color:#ffffff; transform: translateY(0)}
	header ul li:hover			{overflow:hidden;}
	
	/* INTRO SECTION */
	.intro-section .col-2.intro-left	{width:100%;}
	.intro-section .col-2.intro-left .table.padded	{padding-top:40px; padding-bottom: 40px;}
	.intro-section .col-2.intro-right	{width:100%;}
	.intro-section.fill-height			{height:auto;}
	.intro-section.fill-height			{padding-top:70px;}
	
	.intro-right .col-2						{width:50%;}
	.intro-right .listing-panel-image		{display: block;}
	
	/** CONTACT **/
	.contact-col .col-2	{width:100%;}

	/** FOOTER **/
	section.footer-links		{padding-bottom:50px;}
	.footer-links ul	{width:25%}
	
}

@media (max-width: 768px)
	
{	
	
	/* PULLOUT */
	.pullout-quote blockquote	{font-size:16px; width:100%;}
	
	/* SERVICES */
	section.services .col-3	{width:50%;}
	section.services .col-row-services .col-3 .panel	{padding:25px 15px;}
	
	/* PEOPLE */
	.people-sort			{font-size:0; margin-bottom: 15px;}
	.people-sort li.sort	{width:100%; display: block; text-align: center; margin-bottom: 15px;}
	.people-sort li			{margin-bottom:10px; width:33%; padding: 0 1%; margin-left: 0; margin-right: 0; vertical-align: top;}
	.people-sort li a		{display:block;}
	.article-container .inner	{padding-left:35px; padding-right: 35px;}
	
	.article-container	{margin-bottom:0}
	
}

@media (max-width: 767px)
	
{	
	/* HOME ABOUT SECTION */
	#aboutUs .col-row,
	#aboutUs				{min-height:auto;}
	#aboutUs .col-2			{width:100%; height:auto !important; min-height: unset !important; display: block;}
	#aboutUs .table			{min-height:unset}
	#aboutUs .pullout-quote	{position:relative; left: auto;}
	#aboutUs .col-2.about-col	{padding-bottom:60px; padding-top: 40px;}
	
	/* FOOTER */
	footer	{position:relative; padding-bottom: 20px; padding-top: 20px;}
	
	/* CONTENT PAGE */
	.article-left			{padding-left:30px;}
	.key-contacts-container	{padding-left:30px; padding-right: 30px;}
	
	section#aboutUs		{height:100%; min-height:inherit;}
	section.fill-height	{height:100%;}

	
}
	
@media (max-width: 680px)
{
	/* CONTENT PAGE */
	.article-left	{width:100%; padding-bottom: 30px; padding-left: 35px;}
	.article-right	{width:100%; padding-bottom: 50px;}
	.key-contacts-container	{padding-left:35px; padding-right: 35px;}
	.right-nav-container	{padding-left:35px; padding-right: 35px;}
	article .pullout-quote	{padding-left:35px;	}
	article .pullout-quote:after	{left:35px;}
	
	/* PEOPLE */
	.people .col-4	{width:50%;}
	
	/* PAYMENT */
	.invoice-container .form-cell.sp img	{display:block; margin: auto;}
	.invoice-container .form-cell	{width:100%;}
	.invoice-container .form-cell.submit	{text-align:center;}
	

}

@media (max-width: 500px)
{
	
	h1				{font-size:40px;}
	.fill-height	{height:auto;}

	/* INTRO SECTION */
	.intro-section h1	{font-size:40px;}
	.intro-section h2	{font-size:30px;}
	.intro-left p		{font-size:16px;}
	
	.intro-right .col-2						{width:100%;}
	.intro-right .listing-panel-image		{display: none;}
	
	/* SERVICES */
	section.services .col-3	{width:100%;}
	section.services .col-row-services .col-3 h3	{font-size:20px;}
	section.services .col-row-services .col-3 p		{font-size:14px;}
	section.services .col-row-services .col-3		{padding-left:0; padding-right: 0;}
	section.services .col-row-services .col-3 .panel	{padding:25px;}
	
	/** CONTACT **/
	.contact-container,	
	.contact-details	{padding:25px;}
	.contact-details p	{font-size:16px;}
	
	/** FOOTER **/
	section.footer-links	{padding-top:30px;}
	.footer-links ul		{width:100%; padding-right: 0;}
	
	/* PULLOUT QUOTE */
	.pullout-quote blockquote	{font-size:16px; width:100%;}
	
	/* FOOTER */
	.footer-links				{padding-left:35px;}
	.footer-links ul			{width:100%;}
	.footer-links ul li			{font-size:14px; display: block;}
	.footer-links ul li ul li	{font-size:12px}
	footer ul 					{margin-bottom:20px;}
	footer ul li				{display:block; border:none; margin-bottom: 10px;}
	footer ul li a				{border:none; padding-left: 0;}
	footer						{padding-left:30px;}
	
	/* CONTENT PAGE */
	article h1				{padding-left:20px; padding-right:20px; font-size: 30px; line-height: 1.4em;}
	article p.intro			{font-size:20px;}
	.article-left			{padding-right:35px;}
	article .pullout-quote:after	{width:60px; height: 60px;}
	article .pullout-quote-container .pullout-quote	{padding-top:40px;}

}

@media (max-width: 414px)
{
	
	.parallax	{background-attachment: unset; background-size: cover; background-position: center !important;}
	
	/* PEOPLE */
	.people .col-4		{width:100%; padding-bottom: 0}
	.people .col-4 img	{width:30%; display: inline-block;}
	.person				{font-size:0;}
	.person-text		{width:70%; display: inline-block; padding-left: 20px;}
	.people-sort li		{width:100%; margin-bottom: 5px; padding:0}
	
	#contactUs .table-cell.padded	{padding-left:0; padding-right:0;}

}
























/*********************/
/****** HEIGHT *******/
/*********************/


@media (max-height: 800px)

{
	section.footer-links	{padding:50px 30px}
	.padded					{padding:40px 30px}
	
	/** INTRO SECTION **/
	.intro-section .texture-blue .table-cell	{padding-left:50px;}
	
	/** HEADER **/
	.intro-section h1	{font-size:46px;}
	.intro-section h2	{font-size:30px;}
	.intro-section p	{font-size:16px;}
	.scroll-down		{bottom:90px;}
	
	.panel-listing .listing-panel p		{font-size:14px;}
	.panel-listing .listing-panel h4	{font-size:15px;}
	.panel-listing .listing-panel .btn	{font-size:18px;}
	
	
	/** SERVICES **/
	section#services	{min-height:100vh; height:auto;}
	
	/** ABOUT US **/
	#aboutUs p.intro			{font-size:16px}
	#aboutUs p					{font-size:14px;}
	.pullout-quote blockquote	{font-size:16px;}
	.pullout-quote 				{padding-bottom: 75px}
	
	/** CONTACT **/
	.contact-details p	{font-size:14px;}
	
	
}












