@media only screen and (min-width: 1020px) and (max-width: 1599px) {

	#mid h2 {left: 60px;}
	#mid p {right: 60px;}

}


@media only screen and (min-width: 1020px) and (max-width: 1399px) {

	.container {width:100%; padding-left:40px; padding-right:40px;}
	
	/* home */
	#top-hero h1 {margin-left: 40px;}
	
	#home-intro {padding: 40px 0 80px 0;}
		#home-intro .container .left-column {padding-right: 20px;}
			#home-intro .slider ul.slides li {height: 640px;}
			#home-intro .slider .flex-control-nav {left: 0;}
		#home-intro .container .right-column {padding-left: 20px;}
			#home-intro .icon-white {margin: 20px 0;}
			
	#clients li img {max-width: 207px; max-height: 149px;}
	
	/* your story */
	ul.team-grid li {width: calc(33.333% - 20px);}
	
}


@media only screen and (min-width: 1020px) and (max-width: 1199px) {

	/* your story */
	#values ul li {width: calc(50% - 20px);}
	ul.team-grid li {width: calc(50% - 20px);}
	
}


/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 1023px) { 

	h1 { font-size:54px; line-height: 54px; }
	.container { width:100%; padding-left:40px; padding-right:40px; }
	
	.container .left-column {width: 100% !important;}
	.container .right-column {width: 100% !important;}

	#footer { padding: 20px 0; }
	#footer-top {}
		.footer-row {margin: 0 0 20px 0;}
		#footer-row-1 {width: 100%; max-width: 400px;}
		#footer-row-2 {width: 100%; max-width: 400px;}
			#footer-row-2 h2 {font-size: 24px; line-height: 1.25;}
		#footer-row-3 {width: 100%;}
		#footer-row-4 {width: 100%;} 
	#clutch-link {margin: auto; display: flex; justify-content: center;}
	#footer-bottom {display: block; padding-top: 40px;}
		#footer-bottom p {display: flex; justify-content: center;}
		#footer-bottom ul {display: flex; justify-content: center;}
			#footer-bottom ul li {margin: 0 14px;}
	
	/* shared */
	#page-hero h1 {margin-left: 40px;}
	.intro h2 br, #bottom-cta h2 br {display: none;}
	#bottom-cta h2 {font-size: 48px;}
	
	/* home */
	#top-hero h1 {margin-left: 40px;}
	
	#home-intro {padding: 40px 0;}
		#home-intro .container .left-column {padding-right: 0;}
			#home-intro .slider ul.slides li {height: 480px;}
			#home-intro .slider .flex-control-nav {left: 0;}
		#home-intro .container .right-column {padding-left: 0;}
			#home-intro .icon-white {margin: 60px 0 20px 0;}

	#clients li {width: calc(33.333% - 40px);}
		#clients li img {max-width: 184px; max-height: 130px;}
	#stats ul {width: 100%; margin: 0;}
		#stats ul li {width: 100%; margin: 20px auto;}
	.work ul {}
		.work ul li {width: calc(50% - 40px); margin: 20px;}
	
	/* your story */
	#story-intro .container .left-column {margin-right: 0; width: 100%;}
	#story-intro .container .right-column {padding: 50px 0;}
	#values ul {width: 100%; margin: 0;}
		#values ul li {width: 100%; margin: 10px 0;}
	#mid h2 {position: absolute; left: 40px; bottom: 310px; max-width: calc(100% - 80px);}
	#mid p {position: absolute; right: 40px; bottom: 110px; width: calc(100% - 80px);}
	#team .section-top h2 {width: 100%;}
	#team .section-top-right {width: 100%; padding: 30px 0 0 0;}
	ul.team-grid li {width: calc(50% - 20px);}
	
	/* work */
	#case-studies-slider .slider ul.slides {height: 840px;}
		#case-studies-slider .left-column {width: 100%; height: 507px; padding-right: 0;}
			#case-studies-slider .image-panel {height: 507px;}
		#case-studies-slider .right-column {width: 300px; height: auto;}
			#case-studies-slider .right-column .case-study-text-top {position: relative; top: inherit; padding: 40px 0 0 40px; }
			#case-studies-slider .right-column .case-study-text-bottom {position: relative; bottom: inherit; padding: 20px 40px 40px 40px; }
	#case-studies-slider .slider .flex-control-nav {bottom: -50px;}
			
	/* services */
	.content-block {display: block; padding: 40px 20px;}
	.content-block .photo-column {width: 100%; height: 400px;}
	.content-block .text-column {width: 100%;}
		.content-block .text-column .text-column-inner {max-width: 100%;}
	.content-block:nth-child(odd) .photo-column, 
	.content-block:nth-child(even) .photo-column {order: 1; padding: 0; margin: 0 0 30px 0;}
	.content-block:nth-child(odd) .text-column,
	.content-block:nth-child(even) .text-column {order: 2; padding: 0;}
	
	/* contact */
	#contact-left {margin: 0 -20px 20px -20px; width: calc(100% + 40px) !important; padding: 40px 20px;}
	form .field-50 {flex-wrap: wrap;}
		form .field-left  {width: 100%; margin-right: 0;}
		form .field-right {width: 100%; margin-left: 0;}
	
}


@media only screen and (max-width: 768px) { 

	h1 { font-size:48px; line-height: 48px; }
	h2 { font-size:36px;}

	.container { width:100%; padding-left:20px; padding-right:20px; }

	.logo img {width: 200px; height: auto;}
	#header #menu-open, #menu #menu-close {font-size: 28px;}
		#header #menu-open svg, #menu #menu-close svg {width: 28px; height: auto;}
	#menu #menu-middle ul li a {font-size: 60px; line-height: 60px;}

	/* shared */
	#titlebar {margin-top: 100px;}
		#titlebar h1 {padding: 20px 0 50px 0;}
	
	/* home */
	#top-hero h1 {margin-left: 20px;}
	#clients li {width: calc(50% - 40px);}
	
	/* your story */
	#story-intro .button {margin-bottom: 20px;}
	#story-intro .container .right-column {padding-bottom: 0;}
	#mid {height: auto; min-height: 1px;}
		#mid .container {height: auto; min-height: 1px; padding: 50px 20px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap;}
			#mid h2 {position: relative; left: inherit; bottom: inherit; max-width: 100%; margin: 10px auto;}
			#mid p {position: relative; right: inherit; bottom: inherit; font-size: 18px; width: 100%; max-width: 100%; margin: 10px auto; padding: 0;}
	
	/* work */
	.work ul {}
		.work ul li {width: calc(100% - 20px); margin: 20px 10px;}
			.work ul li img {width: 100%; max-width: 100%; height: auto;}
	
}


@media only screen and (max-width: 639px) { 

	h1 {font-size: 48px; line-height: 48px;}
	
	#menu #menu-middle ul li a {font-size: 48px; line-height: 48px;}
	
	#clients li {width: calc(100% - 40px); margin: 0 20px; height: 160px;}
	
	/* footer */
	#footer-row-1 #footer-addresses {flex-wrap: wrap;}
		#footer-row-1 #footer-addresses li {width: 100%; margin: 0 0 20px 0;}
	
	/* shared */
	#titlebar {margin-top: 103px;}
	
	.image-panel {height: 50vh;}
	#bottom-cta {height: 480px;}
		#bottom-cta h2 {font-size: 36px;}
	
	/* your story */
	#story-intro .container .left-column {height: 480px;}
		#story-intro p {font-size: 18px;}
		
	#team {padding: 50px 0;}
		#team .section-top h2 {font-size: 32px;}
		#team .section-top-right p {font-size: 21px;}
	ul.team-grid{width: 100%; margin: 0;}
		ul.team-grid li {width: 100%; margin: 10px auto; max-width: 480px;}
			ul.team-grid li a {display: block; width: 100%;}
			ul.team-grid li .bio-photo-holder { min-height: 600px;}
				ul.team-grid li .bio-photo-holder img {width: 100%; height: 100%; object-fit: cover;}
	
	/* work */
	#case-studies-slider .slider ul.slides {background: #fff;}
		#case-studies-slider .right-column .case-study-text-top {padding: 20px 0 0 20px; }
		#case-studies-slider .right-column .case-study-text-bottom {padding: 15px 20px 20px 20px; }
			#case-studies-slider .right-column p {font-size: 18px; margin: 0 0 15px 0;}
	
	/* contact */
	#contact-left dl dt {width: 100%;}
	#contact-left dl dd {width: 100%; margin-left: 0;}
	
}


@media only screen and (max-width: 499px) { 

	/* story */
	ul.team-grid li .bio-photo-holder { min-height: 480px;}
	#values ul li .value-text {top: 120px;}
	.popup .popup-content { width:100%; height: 100%; left: 0; top: 0; margin:0 auto; padding-top: 50px; }
	
}


@media only screen and (max-width: 375px) { 

	h2, #latest-posts-section h2 { font-size:24px; }
	h3 { font-size:21px; }
	
	#header .menu { width:320px; right:-321px; padding-left: 20px; padding-left: 35px; }
		#header .menu nav {margin: 0 0 25px 0;}
			#header .menu nav li a {font-size: 24px;}
		#header .menu .contact-information p {font-size: 15px;}
	
	/* services *******************/
	#images-panel .image-holder {height: 200px;}
	
	/* story */
	ul.team-grid li .bio-photo-holder {height: 320px;}
	
}