@media all and (max-width: 1250px) {
	
	.panel.blocks .grid {
		grid-gap: 30px;
	}	

}


/* =========================================================
   MOBILE NAVIGATION
   ========================================================= */

@media all and (max-width: 1020px) {

	.mobile-menu {
		display: flex;
	}

	/* =====================================================
		 MENU PANEL
		 ===================================================== */

	.navigation .mobile-menu-wrapper {
			display: none;

			position: absolute;
			top: calc(100% + 20px);
			right: 20px;

			width: min(420px, calc(100vw - 30px));

			padding: 20px;

			background: rgba(255, 255, 255, 0.98);

			border: 1px solid rgba(12, 33, 65, 0.10);
			border-radius: 20px;

			box-shadow:
					0 20px 60px rgba(12, 33, 65, 0.18),
					0 5px 15px rgba(12, 33, 65, 0.06);

			z-index: 1000;
	}


	/* little arrow above menu */
	.navigation .mobile-menu-wrapper::before {
			content: "";

			position: absolute;
			top: -8px;
			right: 30px;

			width: 16px;
			height: 16px;

			background: #fff;

			border-top: 1px solid rgba(12, 33, 65, 0.10);
			border-left: 1px solid rgba(12, 33, 65, 0.10);

			transform: rotate(45deg);
	}


	/* =====================================================
		 MAIN MENU
		 ===================================================== */

	.navigation .mobile-menu-wrapper #nav {
			display: flex;
			flex-direction: column;
			align-items: stretch;

			width: 100%;

			margin: 0;
			padding: 0;

			gap: 4px;
	}

	.navigation .mobile-menu-wrapper #nav > li {
			width: 100%;
			margin: 0;
			padding: 0;
	}
	
	.navigation li.mobile-only{
		display:block;
	}	

	.navigation .mobile-menu-wrapper #nav > li:last-child {
			border-bottom: 0;
	}


	/* Main links */
	.navigation .mobile-menu-wrapper #nav > li > a {
			position: relative;

			display: flex;
			align-items: center;

			width: 100%;

			padding: 12px 16px;

			color: #0c2141;
			background: transparent;

			border: 0;
			border-radius: 10px;

			font-size: 17px;
			line-height: 1.3;
			font-weight: 600;

			text-decoration: none;

			transition:
					color 0.2s ease,
					background 0.2s ease,
					padding-left 0.2s ease;
	}

	.navigation .mobile-menu-wrapper #nav > li > a:hover {
			color: #ff6a00;
			background: rgba(255, 106, 0, 0.06);
			padding-left: 17px;
	}


	/* Current page */
	.navigation .mobile-menu-wrapper #nav > li.current-menu-item > a,
	.navigation .mobile-menu-wrapper #nav > li.current_page_item > a {
			color: #ff6a00;
			background: rgba(255, 106, 0, 0.08);
	}


	/* =====================================================
		 ITEMS WITH SUB MENUS
		 ===================================================== */

	.navigation .mobile-menu-wrapper li.menu-item-has-children > a {
			padding-right: 50px;
	}

	.navigation .mobile-menu-wrapper li.menu-item-has-children > a::after {
			content: "+";

			position: absolute;
			right: 12px;
			top: 50%;

			width: 30px;
			height: 30px;

			display: flex;
			align-items: center;
			justify-content: center;

			transform: translateY(-50%);

			background: #f3f5f7;
			border-radius: 50%;

			color: #0c2141;

			font-size: 21px;
			font-weight: 400;

			transition:
					transform 0.25s ease,
					background 0.25s ease,
					color 0.25s ease;
	}

	.navigation .mobile-menu-wrapper li.menu-item-has-children.is-active > a::after {
			content: "-";

			background: #ff6a00;
			color: #fff;

			transform: translateY(-50%) rotate(180deg);
	}


	/* =====================================================
		 SUB MENU
		 ===================================================== */

	.navigation .mobile-menu-wrapper .sub-menu {
			display: none;

			position: static;

			width: 100%;

			margin: 0 0 10px 0;
			padding: 6px;

			background: #f6f7f9;

			border: 0;
			border-radius: 12px;

			box-shadow: none;
	}

	.navigation .mobile-menu-wrapper .sub-menu li {
			width: 100%;
			margin: 0;
	}

	.navigation .mobile-menu-wrapper .sub-menu li a {
			display: block;

			padding: 11px 14px;

			color: #405069;
			background: transparent;

			border: 0;
			border-radius: 8px;

			font-size: 15px;
			font-weight: 500;

			transition:
					color 0.2s ease,
					background 0.2s ease,
					padding-left 0.2s ease;
	}

	.navigation .mobile-menu-wrapper .sub-menu li a:hover {
			color: #ff6a00;
			background: #fff;
			padding-left: 18px;
	}

}


@media all and (max-width: 980px) {

	.post-content h1,
	.banner-text .post-content h2,
	.panel h2{
		font-size: 36px;
	}
	
	#banner .titles, .panel .titles {
		padding: 0 0 20px 0;
	}	

	.banner-map {
		height: 350px;
	}

	.panel {
		margin: 20px 0;
	}

	.panel .btn {
		margin: 50px 0 0 0;
	}

	.btn-wrapper,
	.logo-wrapper .strapline{
		text-align:center
	}


	#banner .table,
	#banner .table-cell{
		display:block;
		width:100%;
	}

	.banner-text,
	.panel.text-image .item.text {
		padding: 30px 0;
	}
	
	.banner-image {
		height:500px;
	}	

	.panel.blocks .grid.col-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.panel .grid.col-2 {
		grid-template-columns: repeat(1, 1fr);
		grid-gap: 0;
	}
	
	.panel.image-image  .grid.col-2 {
		grid-gap: 30px;
	}	
	
	.panel.blocks .post-content {
		padding: 0 0 30px 0;
	}
	
	.enquiries-panel .form{
		margin-top:20px;
	}	
	
	.enquiries-panel {
		padding: 0 20px 50px 20px;
		margin:0 0 50px 0;
	}
	

	.panel.map .text {
		padding: 60px 0 0 0;
	}
	
	#footer{
		margin-top:80px;
		text-align:center;
	}
	
	#footer .logo-wrapper{
		text-align:center;
		display:block;
		width:100%;
	}	

	#footer ul.footer-actions {
		grid-gap: 20px;
		grid-template-columns: repeat(1, 1fr);
		max-width:500px;
		margin:0 auto;
	}
	
	#footer img.registered {
		float: none;
		margin: 0 auto 40px auto;
	}
	
	#footer .contact-details-wrapper .contact-details .item {
		float: none;
		padding: 0 0 0 0;
	}	
	
	#footer .contact-details-wrapper {
		grid-template-columns: repeat(1, 1fr);
		grid-gap: 40px;
		text-align:center;
	}	

	#footer .contact-details-wrapper > :first-child {
			order: 2;
	}

	#footer .contact-details-wrapper > :last-child {
			order: 1;
	}

}


@media all and (max-width: 690px) {

	.banner-image {
		height: 400px;
	}

	.navigation .actions{
		display:none;
	}

	.logo-wrapper .logo h1 {
		font-size: 18px;
	}
	
	.logo-wrapper .strapline h5 {
		font-size: 13px;
	}	

}	


@media all and (max-width: 590px) {

	.banner-image {
		height: 360px;
	}


	.panel.blocks .grid.col-4 {
		grid-template-columns: repeat(1, 1fr);
	}
	
	#footer .contact-details-wrapper .contact-details .item.email a {
		font-size: 18px;
	}	

}