#mobile-nav,
#overlay,
#mobile-menu,
.mobile {
	display:none;
}


@media (max-width: 1550px) {

	nav .container {
		width: 100%;
	}

	#homepage header .container {
	  width: 100%;
	}

	#homepage header .content {
		padding-left:40px;
	}

	header .video {
	  width: -webkit-calc(100% - 190px);
	  width: -moz-calc(100% - 190px);
	  width: calc(100% - 190px);
	  left: 110px;
	}

	#main {
		padding: 0 35px;
	}

	#main .container {
		width: 100%;
	}

	#main .content {
		padding: 0 70px;
	}

	#work img {
		width: 100%;
	}

	footer .container {
		width: 100%;
		padding-left: 80px;
	}

	#copyright {
	  right: 80px;
	}

}


@media (max-width: 1250px) {

	.three-columns .col {
		width: 50%;
	}

	nav  ul,
	nav .button {
		display:none;
	}
	
	#mobile-menu {
		display:block;
	}

	/* Mobile Nav */

	#mobile-nav {
		width:70px;
		height:70px;
		border: 2px solid #9c7b67;
		display:flex;
		justify-content:center;
		flex-direction:column;
		position:absolute;
		top:15px;
		right:20px;
		z-index:999;
	}

	#mobile-nav span {
		width:35px;
		height:30px;
		position: relative;
		display:inline-block;
		margin:0 auto;
	}

	#mobile-nav span:after,
	#mobile-nav span:before {
		content:"";
		position:absolute;
		left:0;
		top:-9px;
	}

	#mobile-nav span:after{
		top:9px;
	}

	#mobile-nav span,
	#mobile-nav span:after,
	#mobile-nav span:before {
		width:35px;
		height:2px;
		background-color:#9c7b67;
		transition: all 0.3s;
		backface-visibility: hidden;
	}

	/* on activation */

	#mobile-nav.on span {
		background-color: transparent;
	}

	#mobile-nav.on span:before {
		transform: rotate(45deg) translate(5px, 5px);
	}

	#mobile-nav.on span:after {
		transform: rotate(-45deg) translate(7px, -8px);
	}

	#mobile-nav.on + #overlay {
		opacity: 1;
		visibility: visible;
		top:0;
	}

	/* menu appearance*/

	#overlay {
		width:100%;
		height:100%;
		background:#01213a;
		display:flex;
		opacity:1;
		visibility:hidden;
		-webkit-transition:0.4s cubic-bezier(0.86, 0, 0.07, 1);
		-moz-transition:0.4s cubic-bezier(0.86, 0, 0.07, 1);
		-o-transition:0.4s cubic-bezier(0.86, 0, 0.07, 1);
		transition:0.4s cubic-bezier(0.86, 0, 0.07, 1);
		z-index:998;
		position:fixed;
		top:0;
		left:-100%;
	}

	#overlay.on {
		opacity: 1;
		visibility: visible;
		left:0;
	}

	#mobile-menu {
		width:100%;
		height:100%;
		display:block;
		opacity:0;
		visibility:hidden;
		transition:opacity 1s;
		z-index:4;
		position:absolute;
		top:0;
		left:0;
		z-index: 998;
	}

	#mobile-menu.on {
		opacity:1;
		visibility:visible;
	}

	#mobile-menu ul {
		display:block;
		padding: 100px 0 0 12px;
		margin:0;
	}

	#mobile-menu ul li {
		display:block;
		padding:0 0 0 60px;
		margin:0 0 20px 0;
		position: relative;
	}

	#mobile-menu ul li a {
		font:600 16px/26px "area-extended", sans-serif;
		text-transform: uppercase;
  		letter-spacing:0.05em;
		color: #fcfbf2;
	}

	#main .content {
		width:100%;
	}

	#clients .col {
		width:25%;
	}

}


@media (max-width: 1050px) {

	header .container {
		width: 100%;
		height: auto;
	}

	header .content {
	  width: 100%;
	  padding-bottom: 40vw;
	}

	header .photo {
	  width: -webkit-calc(100% - 40px);
	  width: -moz-calc(100% - 40px);
	  width: calc(100% - 40px);
	  height: 40vw;
	  top: -webkit-calc(100% - 40vw);
	  top: -moz-calc(100% - 40vw);
	  top: calc(100% - 40vw);
	  right: 40px;
	}

	header .video-subheader {
	  width: -webkit-calc(100% - 35px);
	  width: -moz-calc(100% - 35px);
	  width: calc(100% - 35px);
	  height: 40vw;
	  top: -webkit-calc(100% - 40vw);
	  top: -moz-calc(100% - 40vw);
	  top: calc(100% - 40vw);
	  right: 0;
	}

	header:after,
	#homepage header:after {
		background: url("../images/pattern-blue.jpg") center center repeat;
		background-size: 70px;
	  	left: -webkit-calc(100% - 40px);
	  	left: -moz-calc(100% - 40px);
	  	left: calc(100% - 40px);
	  	width: 40px;
	  	height: 40vw;
	}

	header .video {
	 	width: 100%;
	 	height: 40vw;
	 	left: -40px;
	}

	#homepage header .container {
		padding-bottom: 0;
	}

	#homepage #main {
		margin-top: 0;
	}

	#homepage #main .container {
    	padding-top: 40px;
	}

	#main .container:before {
		display: none;
	}

	#clients .col {
		width:33.3%;
	}

	footer .container {
		width: 100%;
		padding-left: 40px;
	}

	footer .content {
		padding: 0;
	}

	#copyright {
	  position: relative;
	  text-align: left;
	  right: 0;
	  margin-top: 30px;
	}

}


@media (max-width: 950px) {

	h1 {
	  font-size: 55px;
	  line-height: 60px;
	}

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

	h3 {
	  font-size: 14px;
	  line-height: 24px;
	}

	#main {
		padding: 0;
	}

	#main .content {
		padding: 0;
	}

	#main .container {
		padding: 40px;
	}

	.flex {
		flex-wrap: wrap;
	}

	#content {
		width: 100%;
		padding-right: 0;
	}

	#sidebar {
		width: 100%;
		padding-top: 80px;
	}

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

	.three-columns .col {
		width: 100%;
		padding: 0;
	}

	#contact .two-columns .col:nth-child(1),
	#contact .two-columns .col:nth-child(2) {
		width:100%;
		padding:0;
	}

}


@media (max-width: 700px) {

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

	/*
	header .content {
		padding-bottom: 60vw;
	}*/

	header .photo {
	  height: 60vw;
	  top: -webkit-calc(100% - 60vw);
	  top: -moz-calc(100% - 60vw);
	  top: calc(100% - 60vw);
	}

	header:after,
	#homepage header:after {
	  	height: 60vw;
	}

	header .video {
	 	height: 60vw;
	}

	#clients .col {
		width:50%;
	}
}


@media (max-width: 450px) {
	.logo {
		width:160px;
		top:21px;
		left:25px;
	}

	#clients .col {
		width:100%;
	}
}