/*-- Media Queries --*/

.menu-wrapper,
#mobile-navigation,
.mobile {
	display:none;
}

@media (max-width: 1800px) {
	.logo {
		left:40px;
	}
}

@media (max-width: 1750px) {
	.container {
		width:100%;
		margin:0;
		padding:120px 40px;
	}

	header .two-columns .col:nth-child(1) {
		padding:260px 40px 120px 40px;
	}

	header .two-columns .col:nth-child(2) .photo .insert {
		width:100%;
		padding-right:40px;
	}

	.full-width .two-columns .col .content {
		width:100%;
	}

	.full-width .col:nth-child(2) .content {
		float:none;
		padding:110px 40px 110px 60px;
	}

	.full-width .col:nth-child(1) .content {
		float:none;
	}

	#call-out .two-columns .col:nth-child(1) {
		background:#cec3bb url("../images/jk-pattern.svg") repeat-y top right / 120px 904px;
	}

	#call-out .two-columns .col:nth-child(1) .content {
		padding:110px 170px 110px 40px;
	}

	#our-services .two-columns {
		grid-template-columns:repeat(2, 1fr);
	}

	footer .four-columns {
		grid-template-columns:35% 20% 20% 25%;
	}
}


@media (max-width:1525px) {
	h1 {
		font-size:90px;
    	line-height:90px;
	}
}

@media (max-width:1400px) {
	h1 {
		font-size:100px;
    	line-height:100px;
	}

	h1 br {
		display:none !important;
	}

	h1 .line {
		display:inline !important;
	}

	header .two-columns {
		display:block;
	}

	header .two-columns .col:nth-child(1) {
		padding-top:240px;
		padding-bottom:100px;
	}

	header .two-columns .col:nth-child(2) {
		height:800px;
	}

	#home header .two-columns .col:nth-child(2) .photo {
		background-position:top -250px center !important;
		margin:0;
	}

	header .two-columns .col:nth-child(2) .photo {
		margin:0;
	}

	.background-texture {
		display:none;
	}

	nav {
		display:none;
	}	

	.menu-wrapper {
		width:65px;
		height:65px;
		border-radius:50%;
		border:1px solid #9cb2ab;
		display:flex;
		align-items:center;
		justify-content:center;
		cursor:pointer;
		position:absolute;
		top:30px;
		right:40px;
		z-index:1;
	}

	.menu-wrapper:hover {
		background:#9cb2ab;
	}

	#nav-button {
		position:relative;
		transform:translateY(0);
		transition:all 0ms 200ms;
	}

	#nav-button span {
		width:32px;
		height:2px;
		display:block;
		background:rgba(250, 251, 240, 1);
	}

	#nav-button.active .line2 {
		background:rgba(250, 251, 240, 0); 
	}

	#nav-button .line1 {
		position:absolute;
		left:0;
		bottom:8px;
		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:8px;
		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);
	}

	#mobile-navigation {
		width:500px;
		position:absolute;
		right:-500px;
		z-index:4;
		padding:100px 70px 0 70px;
		display:none;
	}

	#navigation-overlay {
		width:500px;
		height:100%;
		background:#fff;
		position:fixed;
		right:-600px;
		z-index:3;
		display:none;
	}

	#mobile-navigation ul {
		list-style:none;
	}

	#mobile-navigation li {
		margin:0;
	}

	#mobile-navigation li a {
		font-size:25px;
		line-height:30px;
		font-family:"inter-tight-variable", sans-serif;
		font-variation-settings:"wght" 500;
		color:#004c43;
		display:block;
		padding:15px 0;
		transition:all 0.3s ease;
	}

	#mobile-navigation li.social {
		display:inline-block;
		margin-top:50px;
		margin-right:15px;
	}

	#mobile-navigation li.social a {
		display:inline-block;
		border:1px solid #9cb2ab;
		border-radius:50%;
		padding:15px;
	}

	#mobile-navigation li.social a:hover {
		background:#9cb2ab;
	}

	#mobile-navigation li.social a img {
		width:15px;
		display:block;
	}


	.full-width .two-columns {
		width:100%;
		display:flex;
		flex-direction:column-reverse;
	}

	.full-width .two-columns .col {
		width:100%;
	}

	.full-width .col:nth-child(2) .content {
		padding:100px 40px;
	}

	#intro .two-columns .col:nth-child(1) .content:before {
		left:40px;
	}

	#intro .two-columns .col:nth-child(1) .content p {
		left:40px;
	}

	#intro .two-columns .col:nth-child(1) .testimonial {
		width:800px;
		margin:0 auto;
	}

	.two-columns {
		grid-template-columns:repeat(1, 1fr);
	}

	#subpage-intro .two-columns .col:nth-child(1) {
		padding-right:0;
		margin:0 0 60px 0;
	}

	#subpage-intro .two-columns .col:nth-child(2) {
		padding-left:0;
	}

	#subpage-intro h2 {
		margin:0 0 40px 0;
	}
}


@media (max-width:1300px) {
	.popup {
		width:100%;
		padding:70px 40px;
	}

	footer .four-columns {
	  display:grid;
	  grid-template-columns:40% 30% 30%;
	}

	footer .four-columns > div:nth-child(4) {
	  grid-column:1 / -1; /* span full width */
	}

	footer .four-columns .col:nth-child(4) {
		justify-content:left;
		padding-right:0;
		padding-left:87px;
		padding-top:40px;
	}

	footer .social {
		margin-left:0;
		margin-right:15px;
	}
}


@media (max-width:1200px) {
	h3 {
		font-size:45px;
		line-height:50px;
	}

	#our-services .two-columns .col:nth-child(1) {
		padding-right:60px;
	}

	#our-services h3 {
		padding-left:40px;
		margin:0 0 30px 0;
	}

	#our-services .two-columns {
	    padding-bottom:60px;
	    margin-bottom:60px;
	}
}


@media (max-width:1050px) {
	#home header .two-columns .col:nth-child(2) .photo {
		background-position:top -150px center !important;
	}

	#our-services .two-columns {
		grid-template-columns:repeat(1, 1fr);
	}

	#our-services .two-columns .col:nth-child(1) {
		padding:0;
	}

	#our-services .two-columns .col:nth-child(2) {
		padding-left:40px;
	}

	#our-services .two-columns {
	    padding-bottom:40px;
	    margin-bottom:40px;
	}

	footer .four-columns {
		display:grid;
		grid-template-columns:100%;
		column-gap:0;
		row-gap:0;
	}

	footer .four-columns .col {
		padding-top:40px;
		padding-left:87px;
	}

	footer .four-columns .col:nth-child(1) {
		padding:0;
	}
}


@media (max-width:950px) {
	#intro .two-columns .col:nth-child(1) .testimonial {
		width:100%;
	}
}


@media (max-width:850px) {
	h1 {
		font-size:85px;
		line-height:85px;
		margin:0 0 40px 0;
	}

	h2 {
		font-size:60px;
		line-height:65px;
	}

	p,
	.list li {
		font-size:18px;
		line-height:25px;
	}

	.button {
		font-size:15px;
		line-height:23px;
	}

	.logo {
		top:25px;
		left:25px;
	}

	.menu-wrapper {
		top:25px;
		right:25px;
	}

	.container {
		padding:100px 25px;
	}

	.popup {
		padding:60px 25px;
	}

	header .two-columns .col:nth-child(2) {
		height:500px;
	}

	#home header .two-columns .col:nth-child(2) {
		height:650px;
	}

	#home header .two-columns .col:nth-child(2) .photo {
		background-position:top -100px center !important;
	}

	header .two-columns .col:nth-child(2) .photo .insert img {
		width:350px;
	}

	header .two-columns .col:nth-child(1) {
		padding-top:220px;
		padding-left:25px;
		padding-right:25px;
	}

	header p {
		font-size:22px;
		line-height:32px;
		margin:0 0 40px 0;
	}

	.full-width .col:nth-child(2) .content {
		padding:90px 25px;
	}

	#intro .two-columns .col:nth-child(1) .content:before,
	#intro .two-columns .col:nth-child(1) .content p {
		left:25px;
	}

	#intro .col:nth-child(1) .content {
		padding-left:40px;
		padding-right:40px;
	}

	#intro .two-columns .col:nth-child(1) .testimonial h3 {
		width:100%;
		padding-left:20px;
		padding-right:20px;
	}

	#cta h2 br {
		display:none;
	}

	#call-out .two-columns .col:nth-child(1) .content {
		padding:100px 130px 100px 25px;
	}

	#call-out .two-columns .col:nth-child(1) {
        background: #cec3bb url("../images/jk-pattern.svg") repeat-y top right / 100px 753px;
    }
}


@media (max-width:750px) {
	#call-out .two-columns .col:nth-child(1) .content {
		padding-right:100px;
	}

	#call-out .two-columns .col:nth-child(1) {
        background: #cec3bb url("../images/jk-pattern.svg") repeat-y top right / 80px 603px;
    }

    .three-columns {
		grid-template-columns:repeat(2, 1fr);
	}
}


@media (max-width:650px) {
	h1 {
		font-size:75px;
		line-height:75px;
	}

	h2 {
		font-size:55px;
		line-height:60px;
		margin:0 0 50px 0;
	}

	p {
		margin:0 0 30px 0;
	}

	.logo {
		left:20px;
	}

	.menu-wrapper {
		right:20px;
	}

	.container {
		padding:80px 20px;
	}

	.popup {
		padding:60px 20px;
	}

	header p br {
		display:none;
	}

	header .two-columns .col:nth-child(1) {
		padding:220px 20px 80px 20px;
	}

	header .two-columns .col:nth-child(2) {
		height:600px;
		padding-left:60px;
	}

	#home header .two-columns .col:nth-child(2) .photo {
		background-position:top -70px center !important;
	}

	header .two-columns .col:nth-child(2) .pattern {
		width:60px;
	}

	header .two-columns .col:nth-child(2) .pattern {
    	background:url(../images/header-pattern.svg) top left / 280px 1330px;
	}

	header .two-columns .col:nth-child(2) .photo .insert {
		padding-right:25px;
		bottom:50px;
	}

	header .two-columns .col:nth-child(2) .photo .insert img {
		width:280px;
		margin-right:20px;
	}

	.full-width .col:nth-child(2) .content {
		padding:80px 20px;
	}

	#intro .two-columns .col:nth-child(1) .content:before,
	#intro .two-columns .col:nth-child(1) .content p {
		left:20px;
	}

	#intro .two-columns .col:nth-child(1) .content:before {
		top:40px;
	}

	#intro .two-columns .col:nth-child(1) .content p {
		bottom:50px;
	}

	#intro .two-columns .col:nth-child(1) .testimonial h3 {
		font-size:35px;
		line-height:35px;
		text-shadow:0px 0px 5px rgba(0,0,0,0.5);
	}

	#cta .container {
		padding:90px 20px;
	}

	#call-out .two-columns .col:nth-child(1) {
		background:#cec3bb;
	}

	#call-out .two-columns .col:nth-child(1) .content {
		padding:90px 20px 90px 20px;
	}

	

	footer .container {
		padding-top:80px;
		padding-bottom:80px;
	}
}


@media (max-width:550px) {
	h1 {
		font-size:65px;
		line-height:65px;
	}

	h2 {
		font-size:50px;
        line-height:55px;
	}

	h5 {
		font-size:22px;
		line-height:30px;
	}

	.logo {
		width:220px;
	}

	.menu-wrapper {
		width:55px;
		height:55px;
	}

	#nav-button span {
		width:28px;
	}

	#navigation-overlay {
		width:100%;
	}

	#mobile-navigation {
		width:100%;
		padding:80px 20px 0 20px;
	}

	header .two-columns .col:nth-child(1) {
		padding-top:200px;
	}

	header p {
		font-size:20px;
		line-height:28px;
	}

	header .two-columns .col:nth-child(2) .photo .insert p {
		display:none;
	}

	#home header .two-columns .col:nth-child(2) {
		height:550px;
	}

	header .two-columns .col:nth-child(2) {
		height:450px;
	}

	#intro .two-columns .col:nth-child(1) .content:before {
		width:80px;
		height:64px;
	}

	#intro .two-columns .col:nth-child(1) .testimonial h3 {
		font-size:30px;
		line-height:32px;
	}

	h3 {
        font-size:40px;
        line-height:45px;
    }

	#our-services h3 {
		padding-left:35px;
	}

	.one:before {
		font-size:15px;
		line-height:18px;
		top:7px;
	}

	.two:before {
		font-size:15px;
		line-height:18px;
		top:7px;
	}

	.three:before {
		font-size:15px;
		line-height:18px;
		top:7px;
	}

	#our-services .two-columns .col:nth-child(2) {
		padding-left:35px;
	}
}


@media (max-width:500px) {
	#home header .two-columns .col:nth-child(2) .photo {
		background-position: bottom center !important;
	}

	#intro .two-columns .col:nth-child(1) .testimonial h3 {
		font-size:25px;
		line-height:28px;
	}

	#intro .col:nth-child(1) .content {
		padding-left:20px;
		padding-right:20px;
	}

	.three-columns {
		grid-template-columns:repeat(1, 1fr);
		column-gap:0;
	}
}


@media (max-width:400px) {
	header .two-columns .col:nth-child(2) {
		height:480px;
	}

	#intro .two-columns .col:nth-child(1) .content:before {
		width:70px;
		height:56px;
	}

	header .two-columns .col:nth-child(2) .photo .insert {
		display:none;
	}

	header .two-columns .col:nth-child(2) {
		height:400px;
	}

	.footer-logo {
		width:100%;
	}

	.copyright,
	footer .four-columns .col {
		padding-left:0;
	}
}

@media (max-width:350px) {
	h1 {
		font-size:55px;
		line-height:55px;
	}

	h2 {
		font-size:45px;
        line-height:50px;
	}

	h5 {
		font-size:20px;
        line-height:28px;
	}

	header .two-columns .col:nth-child(2) .photo .insert img {
		width:250px;
	}
}