
/*-- Media Queries --*/

.menu-wrapper,
#mobile-navigation,
#navigation {
	display:none;
}


@media (max-width: 1600px) {
	.container {
		width:100%;
		padding-left:40px;
		padding-right:40px;
	}

	nav .line {
		padding:0 40px;
	}

	nav ul {
		padding-right:10px;
	}

	.logo {
		left:40px;
	}

	header .content {
		left:0;
		padding:0 40px;
	}

	#services-buttons a {
		padding-left:40px;
		padding-right:40px;
	}

	#stats h2 br {
		display:none;
	}

	#testimonials br {
		display:none;
	}

	.title .container {
		padding-left:40px;
		padding-right:40px;
	}

	footer .two-columns .col:nth-child(1) .content {
		width:100%;
		float:none;
		padding:80px 40px 40px 40px;
	}

	footer .two-columns .col:nth-child(2) .content {
		width:100%;
		padding:80px 40px 40px 40px;
	}

}

@media (max-width: 1450px) {
	h2 {
		font-size:55px;
		line-height:58px;
	}

	#home-services .col:nth-child(1) {
		padding-right:50px;
	}

	#services-buttons a:nth-child(1) span {
		width:250px;
	}

	#services-buttons a {
		padding-left:25px;
		padding-right:25px;
	}
}

@media (max-width: 1350px) {
	nav ul ul {
		padding:0 40px 30px 40px;
	}

	nav ul ul .columns {
		margin-left:-30px;
		padding:20px 0;
	}

	nav ul ul li {
		width:33.3%;
		padding:0 30px;
		margin:0;
	}

	.three-columns {
		grid-template-columns: 30% 30% 30%;
		column-gap:0;
		justify-content:space-between;
	}
}

@media (max-width: 1250px) {

	footer .two-columns {
		display:block;
	}

	footer .two-columns .col:nth-child(1),
	footer .two-columns .col:nth-child(2) {
		width:100%;
		flex:none;
		display:block;
	}

	footer p.copyright {
		padding:0;
	}

	footer ul li {
		width:50%;
	}

	footer ul li:nth-child(1) {
		margin-bottom:20px;
	}
}

@media (max-width: 1150px) {
	h2 {
		font-size:45px;
		line-height:48px;
	}

	.title h2 {
		font-size:50px;
		line-height:56px;
	}

	h3 {
		font-size:30px;
		line-height:35px;
	}

	.container {
		padding:100px 25px;
	}

	.two-columns .col {
		width:100%;
		padding:0;
	}

	.two-columns .col:nth-child(odd) {
		margin-bottom:60px;
	}

	nav {
		height:100px;
	}

	nav .container {
		height:80px;
	}

	nav .line {
		padding-left:25px;
		padding-right:25px;
	}

	nav ul {
		padding:0;
	}

	nav ul li {
		margin:0;
	}

	nav ul ul {
		padding:0 20px 30px 20px;
	}

	nav ul ul .columns {
		margin-left:-10px;
		padding:20px 0;
	}

	nav ul ul li {
		width:33.3%;
		padding:0 15px;
		margin:0;
	}

	nav ul ul li h5 {
		font-size: 22px;
    	line-height: 28px;
	}

	nav ul ul li p {
		font-size:16px;
		line-height:22px;
	}

	.logo {
		width:200px;
		left:25px;
	}

	header {
		height:650px;
		margin-top:100px;
	}

	header .content {
		padding:0 25px;
	}

	#intro p br {
		display:none;
	}

	#services-buttons a:nth-child(1) span,
	#services-buttons a:nth-child(3) span {
		width:220px;
	}

	#services-buttons a:after {
		margin-left:20px;
	}

	#how-we-get-it-right .col:nth-child(1),
	#how-we-get-it-right .col:nth-child(2) {
		width:100%;
	}

	#home-services .col:nth-child(1) {
		margin:0 0 40px 0;
	}

	#home-services .two-columns .col {
		padding:0;
	}

	#home-services .col:nth-child(1),
	#home-services .col:nth-child(2) {
		width:100%;
	}

	#home-services .col:nth-child(2) {
		border:0;
		margin-bottom:130px;
	}

	#home-services .container {
		padding-bottom:20px;
	}

	.services-two-columns .col:nth-child(1),
	.services-two-columns .col:nth-child(2) {
		width:100%;
		padding:0;
	}

	.title .container {
		padding-left:25px;
		padding-right:25px;
	}

	.services-content .container {
		padding-top:100px;
		padding-bottom:20px;
	}

	.services-content p {
		font-size:25px;
		line-height:32px;
	}

	header .container {
		padding:50px 25px;
	}

	header #white-box {
		padding-left:25px;
		padding-right:25px;
	}

	footer .two-columns .col:nth-child(1) .content ul li a,
	footer .two-columns .col:nth-child(2) .content h4 {
		font-size:22px;
		line-height:24px;
	}

	footer .two-columns .col:nth-child(1) .content ul li {
		margin-right:40px;
	}

	footer .two-columns .col:nth-child(1) .content {
		padding:60px 25px 0 25px;
	}

	footer .two-columns .col:nth-child(2) .content {
		padding:60px 25px 40px 25px;
	}
}

@media (max-width: 1000px) {
	header #white-box .two-columns .col {
		width:50%;
	}


	footer ul li:nth-child(4) .flex {
		justify-content:center;
	}
	
	footer ul li:nth-child(4) img:first-child {
		margin:4px 10px 0 5px;
	}
	
	footer .col2:nth-child(1) {
		text-align:center;
		width:100%;
		padding:40px;
	}

	footer .col2:nth-child(2) {
		width:100%;
	}
}

@media (max-width: 950px) {
	h2 {
		font-size:40px;
		line-height:43px;
	}

	h5 {
		font-size:28px;
		line-height:36px;
	}

	#intro p {
		font-size:20px;
		line-height:28px;
	}

	#services-buttons {
		display:block;
	}

	#services-buttons a {
		width:100%;
		height:auto;
		padding-top:40px;
		padding-bottom:40px;
	}

	#services-buttons a:nth-child(1) span,
	#services-buttons a:nth-child(3) span {
		width:auto;
	}

	.three-columns {
		grid-template-columns:47% 47%;
	}

	.title .container {
		padding-top:30px;
		padding-bottom:30px;
	}

	.title h2 {
		font-size:40px;
		line-height:43px;
	}
}

@media (max-width: 800px) {
	footer ul li {
		width:100% !important;
	}

	#footer-logo {
		margin:0 auto 15px auto;
	}
}

@media (max-width: 750px) {
	h1 br {
		display:none;
	}

	h1 {
		font-size:45px;
		line-height:48px;
	}

	nav ul {
		display:none;
	}

	nav .line {
		width:100%;
		position:absolute;
		bottom:0;
		left:0;
	}

	/* MOBILE NAV */


	.menu-wrapper {
		width:60px;
		height:60px;
		display:flex;
		align-items:center;
		justify-content:center;
		cursor:pointer;
		position:absolute;
		top:10px;
		right:12px;
		padding:20px;
	}

	#nav-button {
		position:relative;
		transform:translateY(0);
		transition:all 0ms 200ms;
	}

	#nav-button span {
		width:34px;
		height:3px;
		display:block;
		background:rgba(21, 22, 27, 1);
	}

	#nav-button.active .line2 {
		background:rgba(21, 22, 27, 0);
	}

	#nav-button .line1 {
		position:absolute;
		left:0;
		bottom:9px;
		transition:bottom 200ms 200ms cubic-bezier(0.23, 1, 0.32, 1), transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
	}

	#nav-button .line3 {
		position:absolute;
		left:0;
		top:9px;
		transition:top 200ms 200ms cubic-bezier(0.23, 1, 0.32, 1), transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
	}

	#nav-button.active .line3 {
		top:0;
		transform:rotate(45deg);
		transition:top 200ms cubic-bezier(0.23, 1, 0.32, 1), transform 200ms 200ms cubic-bezier(0.23, 1, 0.32, 1);
	}

	#nav-button.active .line1 {
		bottom:0;
		transform:rotate(-45deg);
		transition:bottom 200ms cubic-bezier(0.23, 1, 0.32, 1), transform 200ms 200ms cubic-bezier(0.23, 1, 0.32, 1);
	}

	#navigation {
		width:500px;
		height:100vh;
		position:fixed;
		top:0;
		right:-500px;
		z-index:4;
		padding:160px 40px 0 40px;
		display:none;
	}

	#navigation-overlay {
		width:500px;
		height:100%;
		background:#9c0a29;
		position:fixed;
		top:0;
		right:-600px;
		z-index:4;
		display:none;
		/*padding:20px 20px 20px 20px;*/
	}

	/*
	#navigation-overlay:after {
		content:"";
		width:100%;
		height:100%;
		border:2px solid #04295a;
		display:block;
	}*/

	#navigation ul {
		list-style:none;
	}

	#navigation li {
		margin:0;
	}

	#navigation li a {
		font:300 30px/33px "gotham", sans-serif;
		color:#fff;
		text-decoration:none;
		display:block;
		padding:20px 0;
	}

	header {
		height:auto;
	}

	header:after {
		content:"";
		background:rgba(0, 0, 0, 0.3);
		width:100%;
		height:100%;
		position:absolute;
		top:0;
		left:0;
	}

	header #white-box {
		position:relative;
		bottom:auto;
	}

	header #white-box .two-columns .col {
		width:100%;
		padding:0;
	}

	header .content {
		position:relative;
		bottom:auto;
		padding-top:100px;
		padding-bottom:0;
	}
}

@media (max-width: 550px) {
	#navigation,
	#navigation-overlay {
		width:100%;
		padding-left:20px;
		padding-right:20px;
	}

	.container {
		padding-left:20px;
		padding-right:20px;
	}

	.three-columns {
		grid-template-columns:100%;
	}

	#team .col {
		margin:0 0 50px 0;
	}

	header #white-box h2 {
		font-size:30px;
		line-height:35px;
	}

	.services-content p {
		font-size:22px;
		line-height:30px;
	}

	.icon {
		width:75px;
		height:75px;
		top:-100px;
	}

	.services-two-columns .content {
		padding:0;
		margin:0 0 160px 0;
	}

	.title .container {
		padding-left:20px;
		padding-right:20px;
	}

	.footer-form {
		padding:80px 0;
	}

	.footer-form input {
		width:100%;
	}
}

@media (max-width: 450px) {
	h1 {
		font-size:40px;
		line-height:43px;
	}

	h2 {
		font-size:30px;
		line-height:35px;
	}

	h3 {
		font-size:25px;
		line-height:30px;
	}

	h5 {
		font-size:24px;
        line-height:32px;
	}

	header .container {
		padding-left:0;
		padding-right:0;
	}

	header .content {
		padding-left:20px;
		padding-right:20px;
	}

	#services-buttons a:nth-child(1) span,
	#services-buttons a:nth-child(3) span {
		width:225px;
	}

	footer .two-columns .col:nth-child(1) .content ul li {
		display:block;
		margin:0 0 15px 0;
	}

	.footer-form p br {
		display:none;
	}
}

@media (max-width: 350px) {
	h1 {
		font-size:35px;
		line-height:38px;
	}
}

/* HEIGHT MEDIA QUERIES */

@media (max-height: 700px) {
	#navigation {
		position:absolute;
	}
}