/* GLOBAL STYLES */

@font-face {
    font-family: Maison Neue;
    src: url(fonts/maisonneuebook.ttf);
    font-weight: 400;
}

@font-face {
    font-family: Maison Neue;
    src: url(fonts/maisonneuebold.ttf);
    font-weight: 600;
}

html {
	background: #000;
	-webkit-font-smoothing: antialiased;
	-webkit-backface-visibility: hidden;
}

body {
	margin: 0;
	font-family: "Maison Neue", -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', 'Segoe UI', Arial, sans-serif;
	-webkit-text-size-adjust: none;
}

#container {
	width: auto;
	max-width: 960px;
	margin: auto;
	color: #fff;
	padding: 0px 96px;
}

.fourth {
	width: 20%;
	max-width: 192px;
}

.half {
	max-width: 480px
}

.threefourths {
	width: 73.333%;
	max-width: 704px;
}

.project {
	overflow: auto;
	border-bottom: solid 1.5px rgba(255,255,255,0.2);
	margin-top: 72px;
	padding-bottom: 72px;
}

#pastclients {
	padding-bottom: 64px;
}

/*
.client {
	width: 33.333%;
	display: inline-block;
}
*/

.client {
	width: auto;
	display: inline-block;
	margin-right: 42px;
}

.project, .project img {
	width: 100%;
}

.project .client:last-child {
	margin-right: 0 !important;
}


/* TEXT STYLES */

h1 {
	font-size: 24px;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	line-height: 26px;
	font-weight: inherit;
}

h2 {
	font-size: 18px;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	line-height: 26px;
	font-weight: inherit;
}

p {
	font-size: 13px;
	line-height: 20px;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	font-weight: inherit;
}

a {
	color: inherit;
	text-decoration: none;
	display: inline-block;
	-webkit-transition-duration: 150ms;
	-webkit-backface-visibility: hidden;
	transform: scale(1);
	-webkit-transform: scale(1);
}

a:active {
	opacity: 0.6;
	-webkit-transition-duration: 50ms;
	transform: scale(0.95);
	-webkit-transform: scale(0.95);
}

#about a {
    font-weight: 600;
}

.project .fourth p a {
	display: block;
	margin-top: 18px;
	text-transform: uppercase;
	font-weight: 600;
	width: intrinsic;
}

#header h1, .project h2 {
	font-weight: 700;
}

.project h2 {
	line-height: 22px;
}

/* UNIQUE STYLES */

#header {
	margin-top: 96px;
	border-bottom: solid 1.5px rgba(255,255,255,0.2);
	padding-bottom: 64px;
	overflow: auto;
}

#about {
	margin-top: 3px;
}

#contact {
	overflow: auto;
	border-bottom: solid 1.5px rgba(255,255,255,0.2);
	padding: 36px 0px;
}

#footer {
	overflow: auto;
	padding: 72px 0px 72px 0px;
}

.date {
	margin-top: 18px;
}

@media screen and (max-width: 1150px) {
	
	  #container {
		  width: 740px;
		  padding: 0;
	  }
	  
	  .project .client:last-child {
		  margin-top: 16px;
	  }
	  
	  #pastclients {
			margin-top: 56px;
			padding-bottom: 48px;
	  }
	  
	  #header {
		  padding-bottom: 48px;
	  }
	}


/* SMALL PHONES */

@media only screen 
	and (max-width: 374px) {
    
   .client img {
	  width: auto !important;
	  height: 40px !important;
  }
  
  .client {
	  width: auto;
	  margin-right: 24px !important;
	  margin-bottom: 16px !important;
  }
	
}

/* IPHONE 11 PRO */

@media only screen 
	and (device-width: 375px)
	and (device-height: 812px)
	and (-webkit-device-pixel-ratio : 3) {
	    
	#footer {
	  padding: 40px 0px 48px 0px !important;
  	}
	    
}

/* IPHONE 11 PRO MAX */

@media only screen 
	and (device-width: 414px) 
    and (device-height: 896px) 
    and (-webkit-device-pixel-ratio: 3) {
	    
	#footer {
	  padding: 40px 0px 48px 0px !important;
  	}
	    
}

/* MOBILE */

@media screen and (max-width: 932px) {
  #container {
	  width: 88%;
	  padding: 0px;
  }
  
  .fourth, .half, .threefourths {
	  width: auto;
	  max-width: none;
	  float: inherit;
  }
  
  #header {
	  margin-top: 10%;
	  padding-bottom: 32px;
  }
  
  #about {
	  margin-top: 22px;
  }
  
  h2 {
	  font-size: 16px;
	  line-height: 23px;
  }
  
  #contact {
	  padding: 22px 0px;
  }
  
  #contact .fourth {
	  float: left;
  }
  
  #contact .threefourths {
	  float: right;
  }
  
  .project {
	  margin-top: 40px;
	  padding-bottom: 40px;
  }
  
  #pastclients {
	  margin-top: 40px;
	  padding-bottom: 40px;
  }
  
  p {
	  font-size: 14px;
	  line-height: 20px;
  }
  
  .project .fourth {
	  margin-bottom: 32px;
  }
  
  .project .fourth h2 {
	  display: inline-block;
  }
  
  .date {
	  opacity: 0.5;
	  display: inline;
	  margin-top: 0;
	  margin-left: 8px; 
  }
  
  .project img {
	  width: 100%;
  }
  
  .client img {
	  width: auto !important;
	  height: 46px;
  }

  #footer {
	  padding: 40px 0px 40px 0px;
  }
  
  #footer h2 {
	  font-size: 14px;
  }
  
  #pastclients .threefourths{
	  width: 100%;
  }
  
  #pastclients .fourth {
	  margin-bottom: 24px;
  }
  
  .client {
	  width: auto;
	  margin-right: 32px;
  }
 
  .project .client:last-child {
		margin-top: 0px;
	}
}

@media screen and (max-width: 714px) {
  .project .client:last-child {
	  margin-top: 16px;
  }
}