@charset "UTF-8";
/* CSS Document */

body {margin:0;  color: #646464; font-size: 22px;}
.container { width: 1920px; margin:0 auto;}

body {font-family:'Didot eText W01 Regular';}
i, em {font-family:'Didot eText W01 Italic'; font-style: normal;}
b, strong {font-family:'Didot eText W01 Bold'; font-weight: normal; }
b i, strong i, b em, strong em, i b, i strong, em b, em strong { font-family:'DidotETW01-BoldItalic';  font-weight: normal; }
p, .thumbs a {font-family: "Gotham SSm A", "Gotham SSm B"; font-style: normal; font-weight: 300; font-size: .8em;}

header { padding: 30px 50px 20px; position: fixed; top: 0; z-index: 9999; -webkit-transition: linear .25s; transition: linear .25s; width: 100%; background-color: #fff; }
header.scroll {border-bottom: 1px solid rgba(0,0,0,0.25);}
#logo { background-image: url(/i/logo.svg); background-repeat: no-repeat; background-size: contain; background-position: center; height: 65px; width: 350px; display: inline-block; -webkit-transition: linear .25s; transition: linear .25s;}
.scrolled-nav { padding: 8px 0;}
.scrolled-nav #logo { background-size: 177px; height: 40px; width: 177px; margin-top:5px; }
.scrolled-nav nav { padding: 6px 0 0 0;}
#footer_logo { background-image: url(/i/logo.svg); background-repeat: no-repeat; background-size: 177px; height: 40px; width: 177px; display: inline-block; vertical-align: middle;  margin-right: 40px;}
nav { float: right; padding: 18px 0 0 0; margin-top: -5px; }
nav ul, nav ul li { list-style: none; margin: 0; padding: 0;}
nav ul li, nav ul li a { float: left; display: inline-block; color: #646464;}
nav ul li a { font-family: 'Didot eText W01 Bold', serif; margin: 5px 10px 0; font-size: 0.9em; padding: 0 10px; -webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px; text-decoration: none; font-weight: normal; }
nav ul li a.h { color: #000;}
nav ul li:after { content: " – ";  /* padding-top: 5px; */
vertical-align: top;
opacity: 0.5;}
nav ul li:last-child:after { content: "";}
nav ul li:last-child a { margin: 5px 0 0 10px;}

a, .blu { color: #000;}
a { text-decoration: underline; transition: ease 0.25s;}
a:hover{ background-color: #efefef; text-decoration: none; color: #000 !important; -moz-border-radius:3px ;-webkit-border-radius: 3px; border-radius:3px ; }
a#logo:hover { background-color: transparent;}
a.tc:hover  { background-color: rgba(0,90,185,0.80);}
.yel { color: #646464;}
div p.first{ margin-top: -0.5em;}
p { margin: 0 0 1.5em; line-height: 1.5;  }
p.lge {margin: 0 ;}
p a.tk-flood-std { font-size: 1.25em;}
p a.tk-flood-std.btn { font-size: 1em;}
.nu { text-decoration: none;}
h1, h2 { font-weight: normal; font-size: 28px;}
b, strong { font-weight: 500;}
.bg_1 {background-color: #000;}
.bg_2 {background-color: #646464;}

#intro, #contact{ padding:0 0 100px;}
footer { padding:60px 50px 70px;}
#hero footer { position: absolute; bottom: 20px; padding: 0 50px; width: 100%; z-index: 999; color: #fff; border: none;}
#hero footer a { color: #fff; text-decoration: none;}
#usps, #testimonials { padding:50px 0; }
#together { padding:0px 0 100px;}
#address { padding: 20px 0 0 0;}
#usps { background-color: #000;}
#contact { background-color: #646464; padding-top: 50px;}
#usps p, #usps h3, #contact p, #contact h3 { color: #FFF;}

#work, #page { padding-top:120px; padding-bottom:100px; }
#work > h1, #page > h1 { text-align: center; margin: 0 0 40px; text-transform: uppercase;}

#desc { padding-bottom: 50px; margin-bottom: 50px !important; border-bottom: 1px solid rgba(0,0,0,0.25);}
#desc h1 { font-size: 20px; text-align: left;font-family: "Gotham SSm A", "Gotham SSm B"; font-style: normal; font-weight: 300; }
#desc h3 { font-size: 18px; margin-bottom: 25px;font-family: "Gotham SSm A", "Gotham SSm B"; font-style: normal; font-weight: 300;}
#desc p { font-size: 16px; margin-bottom: 25px;}

footer { border-top: 1px solid rgba(0,0,0,0.1); font-size: 80%;}

.one_half { width:50%; float: left;}
.one_third { width:33.33%; float: left; margin-bottom: 30px;}
.one_half p, .one_half h3, .one_third p, .one_third h3,  .one_third blockquote { padding: 0 10%;}
.one_third hr {margin: 0 10% 15px;}
.one_third blockquote { margin:0 0 1em 10%; padding: 0 10% 0 3%; font-size: 22px; border-left: 5px solid rgba(135,110,135,0.5); color: rgba(135,110,135,1)}

.fl { float: left;}
.lge { font-size:200px; }
.med { font-size:50px; }
.sml { font-size:24px; }

.space { display: inline-block; padding: 0 20px;}
.pt { padding-top: 100px;}
.pb { padding-bottom: 100px;}
.mb { margin-bottom: 200px;}
.ml { margin-left: 50px;}
.mr { margin-right: 50px;}

#intro { position: relative;}
.caption { position: absolute; top: 200px; width: 100%; z-index: 999; }
.caption h3, .caption h2 { text-align: center; font-weight: 300; color: #fff; font-size: 80px;}
.caption h2 { font-size: 40px; line-height: 1.5;}

#portfolio {padding-top: 160px;}
#portfolio .pb { padding-bottom: 60px;}
#portfolio h1 { font-size: 30px; margin-bottom: 0.75em;}
#intro h2 { font-size: 40px; margin: 0.5em 0 1.5em;}
#intro h3, #usps h3 { font-size: 30px;  margin: 0 0 1.5em;}
#intro p { font-size: 25px;}
#portfolio h3.services { padding-top: 0.5em;}

.usp { width:25%; float: left; padding: 30px 0;}
.usp img, .one_half img { width: 100%; max-height: 150px; margin-bottom: 30px;}
.usp p { font-size: 25px;}

hr { height: 1px; color: #646464; background-color: #646464; margin: 20px 0 40px; }

.group:after {content: ""; display: table; clear: both;}

.animation_container, .dom_overlay_container, canvas { width: 250px; height: 250px;}
canvas,.dom_overlay_container { position: absolute; right: 40px;top: 0px; display: block;}
.dom_overlay_container { pointer-events:none; overflow:hidden;}
#canvas3,#dom_overlay_container3{ right: calc(50% - 250px/2) !important;}

.work { margin-bottom: 60px; }
.work .col-2 { width:48.5%; margin-left: 2.9%; float: left;}
.work .col-1 { width:22.8%; margin-left: 2.9%; float: left;}
.work div {position: relative; cursor: pointer;}
.work div:first-child {margin-left: 0;}
.work div .caption {  opacity: 0; position: absolute; left:0px; top:0px; width: 100%; height: 100%; padding: 10px; background: rgba(170,160,120,0.80); transition: ease 0.5s;cursor: pointer;}
.work div .caption a {  text-decoration: none;}
.work div:hover .caption { opacity: 1;}
.work div .caption p { text-align: center; color:#fff;}
.work div .caption p:first-child { padding-bottom: 10px; margin: 0 0 10px; border-bottom: solid 1px rgba(255,255,255, 0.75);}
.work div .caption p:nth-child(2) { color: #ffffff; }
.work div .caption p span { font-size: 0.8em; font-family: 'Didot eText W01 Regular', serif; font-style: italic; }
.work.section .col-2:nth-child(odd) { clear:both; margin:0 0 60px 0;}

.t { display: table; height: 100%; width: 100%; cursor: pointer;}
.tr {display: table-row;}
.tc {display: table-cell; vertical-align: middle;}


.testimonials { padding:50px 20% 0;}
.testimonials div p:first-child { font-size: 30px;}
.testimonials div p:nth-child(2) { font-size: 24px;}
.testimonials span { font-size: 1.5em;}

.btns-home { display: inline-block;}
.btns-home { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 50px; position: fixed; left: 25%; z-index: 999; top: 30%; width:50%;}
@supports not (display: grid) {
  .btns-home > div { width: 47%; margin-right: 6%; }
  .btns-home > div:last-child { margin-right:0;}
}
.btn-home { width: 100%; display: table;}
.btn-home a { display: table-cell; vertical-align: middle; border: 1px solid rgb(255,255,255); -moz-border-radius:10px ;-webkit-border-radius: 10px; border-radius:10px ; color: #FFF; height: 310px; text-align: center; text-decoration: none; background-size: cover; background-image: url('/i/b.png');
  transition: all .25s ease-in-out; font-size: 30px;}
.btn-home a:hover { background-color: transparent; color: #FFF !important; }
.btn-home:first-child a:hover, .btn-home:first-child a:focus { background-image: url('/i/bespoke.jpg');}
.btn-home:last-child a:hover, .btn-home:last-child a:focus { background-image: url('/i/projects.jpg');}



ul.no, ul.no li { margin: 0; padding: 0; list-style: none;}
ul.no {margin-bottom: 1em;}
ul.no li i { margin-right: 0.5em; color: #000;}

#contact_form { width:80%; padding-left:20%;}

.form-group { margin-bottom:20px;}
.form-group input[type="text"], .form-group textarea { padding:10px 10px 12px; font-size: 80%; border:1px solid #646464; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px ; width: -moz-calc(100% - 10px);	width: -webkit-calc(100% - 10px);	width: -o-calc(100% - 10px); width: calc(100% - 10px); background: rgba(235,235,235,1); }
.form-group input#company, .form-group input#position { width: -moz-calc(50% - 15px);	width: -webkit-calc(50% - 15px);	width: -o-calc(50% - 15px); width: calc(50% - 15px);}
.form-group input#company { margin-right: 2%;}
.form-group textarea { height:12em;}

.btn, .btn-sm { font-family:'Didot eText W01 Regular', serif; text-decoration:none; display:inline-block; -moz-border-radius:5px; -webkit-border-radius: 5px; border-radius:5px; border: 1px solid #646464;}
.btn:hover, .btn-sm:hover { background:#646464; color:#FFF;  }
#contact .btn:hover, #contact .btn-sm:hover { background:#FFF; color:#646464;  }

.btn { padding:8px 30px 10px;  font-size:20px; }
.btn-sm { padding:5px 20px 6px;  font-size:16px;}

#map { height:500px; border-bottom: 1px solid #646464;  border-top: 1px solid #646464 }

.scroll_down { position: fixed; text-align:center; bottom: 120px; left: calc(50% - 25px); width:50px; height:50px; z-index:9999; -webkit-animation: mousepulse 1s; animation: mousepulse 1s; -webkit-animation-iteration-count: 5; animation-iteration-count: 5; transition: all .4s ease-out; -webkit-transition: all .4s ease-out; background:#646464 url(/i/arr-d.svg) no-repeat center center ; background-size: 50px;}
.scroll_down, .scroll_down:hover {-moz-border-radius:30px; -webkit-border-radius: 30px; border-radius:30px ;}
.scroll_down:hover {background-color:#646464;}

.dn { display: none;}

footer p { float: left; width:50%; font-size: 80%; }
footer p:nth-child(2) {text-align: right;}
footer p:nth-child(2) a { padding:0 5px; margin-left: 5px;}
footer p a.du { padding:0; margin-left: 0;}
footer p a.du:hover { background: 0; color:#646464;}
footer p a.du img { margin-right: 8px;}

.alert {  padding: 15px;  margin-bottom: 15px;  border: 1px solid transparent;	-moz-border-radius:5px ;-webkit-border-radius: 5px; border-radius:5px ;}
.alert-success, .form-group input[type="text"].correct {  color: #3c763d;  background-color: #dff0d8;  border-color: #d6e9c6;}
.alert-warning {  color: #8a6d3b;  background-color: #fcf8e3;  border-color: #faebcc;}
.alert-danger, .form-group input[type="text"].error {  color: #a94442;  background-color: #f2dede;  border-color: #ebccd1;}


@-webkit-keyframes mousepulse {  from { bottom:120px;}  to { bottom:80px;}}
@keyframes mousepulse {  from { bottom:120px;}  to { bottom:80px; }}
@-webkit-keyframes imousepulse {  from { bottom:80px;}  to { bottom:60px;}}
@keyframes imousepulse {  from { bottom:80px;}  to { bottom:60px; }}





.fa-users { padding: 11px 0 0 11px;}
.fa-file { padding: 10px 0 0 15px;}
.fa-address-card { padding: 10px 0 0 10px;}
.fa-refresh { padding: 12px 0 0 14px;}
.fa-copy { padding: 10px 0 0 12px;}

.pg-hd h1, .pg-hd h2, .pg-intro h3 { margin: 0.5em 0 1em; color: #FFF; z-index: 2; position: relative;}
.pg-hd h1 { font-size: 60px;}
.pg-intro h3 { color:#646464;}
.pg-intro h3:first-child { padding-top: 1.5em;}
.pg-hd {    position: relative; overflow: hidden; padding: 170px 0 50px; background-color: rgb(135,100,135);}
.pg-hd.kl:before { background-image: url('../i/hero_4.jpg');}
.pg-hd.london:before { background-image: url('../i/hero_1.jpg');}
.pg-hd.rio:before { background-image: url('../i/hero_3.jpg');}
.pg-hd.nyc:before { background-image: url('../i/hero_2.jpg');}
.pg-hd.sydney:before { background-image: url('../i/hero_5.jpg');}
.pg-hd.paris:before { background-image: url('../i/hero_6.jpg');}
.pg-hd.sing:before { background-image: url('../i/hero_7.jpg');}

.pg-hd.kl:before,.pg-hd.london:before,.pg-hd.nyc:before,.pg-hd.rio:before,.pg-hd.sydney:before,.pg-hd.paris:before,.pg-hd.sing:before {    content: ' ';    display: block;    position: absolute;    left: 0;    top: 0;    width: 100%;     height: 100%;    z-index: 1;    opacity: 0.25;        background-repeat: no-repeat;    background-position: center; -ms-background-size: cover;    -o-background-size: cover;    -moz-background-size: cover;    -webkit-background-size: cover;    background-size: cover;
}


.cycle-slideshow {     width: 100%; max-width: 100%; height: 100%; margin: 0; padding: 0;}

.cycle-slideshow img {  /* forced big images */    width: 2000px; height: 1500px;
                        /* height drives width */    width: auto; height: 100%;
                        /* width drives height */    width: 100%; height: auto;
                        /* fill screen and maintain aspect ratio */    width: auto; height: auto;
                        min-width: 100%; min-height: 100%; }

.thumbs > div, #cf_controls span { display: inline-block; vertical-align: top;}
@supports not (display: grid) {
  .thumbs > div { width: 30%;}
  .thumbs > div:nth-child(3n+2)  { margin:0 4%;}
  #cf_controls span { width: 22%;}
  #cf_controls span:first-child  { margin:0 3.25% 0 0;}
  #cf_controls span:nth-child(3)  { margin:0 3.25%;}
}
.thumbs { border-spacing: 5%;}
.thumbs { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 5%;}
.thumb { margin-bottom: 70px;}

.thumb a { text-align: left; text-decoration: none; display: block; -moz-border-radius:0;-webkit-border-radius:0; border-radius:0; background-color: transparent;}
.thumb a span { padding: 5px 0; display: inline-block;}
.thumb a:hover { background-color: transparent;}

/* WORK SLIDE SHOW */

#cf, #controls, #desc { width:80%; margin:0 auto 10px;}
#cf.projects, #controls.projects, #desc.projects { width:70%;}
#cf.projects { padding-bottom: 53.5%; }
p#cf_controls {  text-align:center;  display: grid;  grid-template-columns: 1fr 1fr 1fr 1fr;  grid-gap: 2.5%;}
#cf_controls span img {  width: 100%;}
#cf_controls span  {  cursor: pointer;}
#cf {  position:relative;  height:auto;  padding-bottom: 46%;}
#cf img {  position:absolute;  left:0;  -webkit-transition: opacity 1s ease-in-out;  -moz-transition: opacity 1s ease-in-out;  -o-transition: opacity 1s ease-in-out;  transition: opacity 1s ease-in-out;  opacity:0;  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  filter: alpha(opacity=0);  width: 100%;}
#cf img.opaque {  opacity:1;  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";  filter: alpha(opacity=1);}

.intro { font-size: 0.9em; padding-bottom: 30px; margin-bottom: 0;}
hr { height: 1px; border: none; background:  rgba(0,0,0,0.25); margin-bottom: 50px; color:rgba(0,0,0,0.25); margin-top: 25px; }
hr.last { margin-top: 20px; }
.quote { font-size: 110%; padding-bottom: 30px;}
.article-image, .article-images { float: right; max-width: 50%; margin-bottom: 12px; margin-left: 8%;}
.article-images img { float: left; max-width: 49%; margin-bottom: 50px; margin-right: 2%;}
.article-images img:last-child { margin-right: 0;}

.right { float: right; clear: right;}

@media only screen and (max-width: 768px) {
	.pg-hd.london:before {	background-image: url('../i/hero_1-s.jpg');}
	.pg-hd.nyc:before {	background-image: url('../i/hero_2-s.jpg');}
	.pg-hd.rio:before {	background-image: url('../i/hero_3-s.jpg');}
	.pg-hd.kl:before {	background-image: url('../i/hero_4-s.jpg');}
	.pg-hd.sydney:before {	background-image: url('../i/hero_5-s.jpg');}
	.pg-hd.paris:before {	background-image: url('../i/hero_6-s.jpg');}
	.pg-hd.sing:before {	background-image: url('../i/hero_7-s.jpg');}
}


#mobile { display: none;}

#nav > a { display: none;}

@media (max-width: 1920px) {
	.container { width: 1600px; }
	body { font-size:20px;}
	.testimonials { padding:25px 12%;}
	.caption { top: 150px;	}
	.usp img { max-height: 125px; margin-bottom: 25px;}
  .btns-home { left: 15%; width: 70%; }
  .thumb { margin-bottom: 50px;}
}

@media (max-width: 1600px) {
	.container { width: 1366px; }
	.lge { font-size:150px; }
	.mb { margin-bottom: 100px;}
	.pg-hd { padding-top: 125px;  padding-bottom:30px; }
  .thumb { margin-bottom: 40px;}
}

@media (max-width: 1440px) {
  header { padding-left: 30px; padding-right: 30px;}
	.container { width: 1200px; }
	.lge { font-size:100px; }
	#logo { background-size: 200px; height: 45px; width: 200px; }
  #work, #page { padding-top:100px;}

	footer { padding:50px 0;}
	.work { margin-bottom: 35px; }
	#together { padding:50px 0 50px;}
	body, .one_third blockquote { font-size: 18px;}
	#contact_form { width:100%; padding-left:0;}
	#portfolio { padding-top: 130px;}
	#portfolio h3, #portfolio h1 { font-size: 150%;}
	#portfolio .pb { padding-bottom: 25px;}
	#portfolio h2 { margin: 1em 0 1.25em;}
	nav {padding: 5px 0 0 0;}
	#nav ul li a {margin-left: 5px; margin-right: 5px; }
	#map { height:300px;}
	.caption h3, .caption h2, .pg-hd h1 { font-size: 60px;}
	.pg-hd h1, .pg-hd h2, .pg-intro h3 { margin: 0.25em 0 1em;}
	.caption h2 { font-size: 30px;}
	.pg-hd h2 {  font-size: 24px;}	
  .btns-home { left: 12.5%; width: 75%; }
  .btn-home a { height: 250px; font-size: 24px; }
  .thumb { margin-bottom: 30px;}
  #work h1 { margin: 0 0 25px;}
  .quote { margin-top: 30px;  font-size: 120%;}
  #nav ul li:after {   }

}

@media (max-width: 1280px) {
	body { font-size: 14px;}
  .container { width: 1000px; }
  .thumb a span { font-size: 14px;}
  p.intro { font-size: 14px; padding-bottom:0;}
  p, #desc p { font-size: 14px;}
  #desc h1 { font-size: 120%;}
  #desc h3 { font-size: 100%;}
  h1, h2 { font-size: 20px}
  hr { margin: 30px 0;}
}

@media (max-width: 1170px) {
	.fa-users { padding: 10px 0 0 10px;}
	.fa-file { padding: 9px 0 0 14px;}
	.fa-address-card { padding: 10px 0 0 9px;}
	.fa-refresh { padding: 10px 0 0 12px;}
	.fa-copy { padding: 8px 0 0 10px;}

}



@media (max-width: 1112px) {
  header { padding-left: 15px; padding-right: 15px;}
	.container { width: 100%; }
	.testimonials div p:first-child { font-size: 24px;}
	.testimonials div p:nth-child(2) { font-size: 20px;}
	#together { padding: 0;}
	.lge { font-size:75px;}
	.pb { padding-bottom: 50px;	}
	canvas,.animation_container, .dom_overlay_container { width: 180px !important; height: 180px !important; margin-bottom:20px;  }
	#canvas3,#dom_overlay_container3 { right: calc(50% - 180px/2) !important;}
	#portfolio h2 { font-size: 100%;}
	#scroll_down { width:40px; height:40px; background-size: 40px; bottom: -50px; -webkit-animation: imousepulse 1s; animation: imousepulse 1s; -webkit-animation-iteration-count: 5; animation-iteration-count: 5; transition: all .4s ease-out; -webkit-transition: all .4s ease-out;}
	.btn { padding: 4px 20px 5px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px;}
	.caption { top: 110px;	}
	.caption h3, .caption h2, .pg-hd h1 { font-size: 50px;}
	.caption h2 { font-size: 25px;}
	#nav ul li a {margin: 0px 5px; padding: 5px; }
  #nav ul li:after { line-height: 2; }
  .article-image {  margin-bottom: 12px; margin-left: 30px;}
  hr { margin: 20px 0;}
  @supports not (display: grid) {
    .btn-home { width: 47%; float: left;}
    .btn-home:first-child { margin-right: 6%;}
  }
}

@media (max-width: 768px) { 
	#logo, .scrolled-nav #logo { background-size: 160px; height: 36px; width: 160px; margin-top: 9px; }
}

@media only screen and (min-width: 768px) and (max-width: 768px) and (orientation : portrait){
  
}


@media (max-width: 736px) {	
	body { font-size: 14px; line-height: 1.3;}
	header { padding: 8px 15px;}
	p.lge { padding: 0;}
	#mobile {display: block; font-size: 75%; padding: 5px 0 0; opacity: 0.5; filter: alpha(opacity=50);}
	nav ul li a { margin-left: 0px; -webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}
	.testimonials { padding:15px 3%;}
	.testimonials div p:first-child { font-size: 18px;}
	.testimonials div p:nth-child(2) { font-size: 16px;}
	#together br { display: none;}
	.pb { padding-bottom: 30px;	}
	#logo, .scrolled-nav #logo, #footer_logo { background-size: 150px; width: 150px; margin-top: 9px; }
	nav { padding: 10px 0 0 0;}
	#work, #page { padding-top:70px; padding-bottom:20px;}
	footer { padding-top: 30px;}
	.lge { font-size:50px; text-align: center !important; float:none !important; }
	canvas,.animation_container, .dom_overlay_container { width: 80px !important; height: 80px !important; margin-bottom:20px;  }
	canvas,.dom_overlay_container, #canvas3,#dom_overlay_container3 { right: calc(50% - 80px/2) !important;}
	p { padding: 0; margin: 0 0 0.75em;}
	.cd-timeline-content p { text-align: left; padding: 0;}
	.work { margin-bottom: 20px; }
	#portfolio { padding-top: 80px;}
	#portfolio h3, #portfolio h1 { font-size: 150%;}
	#portfolio .pb { padding-bottom: 15px;}
	#portfolio p { text-align: left;}
	footer p, footer p:nth-child(2) { width: 100%; text-align: center;}
	footer p:nth-child(2) { padding: 5px 0}
	#footer_logo { width: 50%; margin-right: 0;}
	.form-group { margin-bottom: 5px;}
	.caption h3, .caption h2, .pg-hd h1 { font-size: 30px;}
	.caption h2, h2 { font-size: 15px;}
	.ml, .mr { margin: 0;}
	.h1, .h2, .h3, h1, h2, h3 {margin-top: 10px; line-height: 1.5;}
	.pg-hd { padding: 70px 0 30px; }
	.one_half, .one_third{ width: 100%; float: none;}
	.usp { width: 50%;} 
	.one_third.text-left p { text-align: left;}
	.one_half p, .one_half h3, .one_third p, .one_third h3{ padding: 0;}
	.one_third blockquote, .one_third hr {margin: 0 0 1em 0;}
	.one_half img { margin-bottom: 0;}
	#nav {		position: relative;		top: -5px;		left: auto;		text-align:right; width: 40%;	}
	#nav > a { 	position: relative;		margin:0 auto; color:#646464; font-size: 16px;		padding:6px 8px; text-decoration:none; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; border: 1px solid #646464;}
	#nav:not( :target ) > a:first-of-type,
	#nav:target > a:last-of-type	{ 	display: inline-block;	}
	/* first level */
	#nav > ul	{	height: auto;		display: none;		position: relative;		left: 0;		right: 0;		}
	#nav:target > ul { display: block; }
	#nav > ul > li{ float: none; width: 100%;}
	#nav > ul > li > a {  			}
	#nav > ul > li:not( :last-child ) > a	{				}
	/* second level */
	#nav li ul { 	position: static;			padding-top: 0;		}
	#nav ul li { margin:0; padding: 0;}
	#nav ul li a { width:100%; }
	#nav ul li:first-child a {margin: 5px 0 0 0;}
  #nav ul li:after { content: "";}
  .btn-home{ margin-bottom: 20px;}
  .btn-home a { height: 180px; font-size: 20px;}
  .thumbs { grid-template-columns: 1fr 1fr;}
  footer { font-size: 11px; padding:15px 0 0;}
  #hero footer { bottom:0; padding:0px;}
}

@media (max-width: 475px) {
	.work .col-2 { width:100%; margin-left: 0; float: left; margin-bottom: 20px;}
	.work .col-1 { width:47.5%; margin-left: 5%; float: left; margin-bottom: 20px;}
	.work div:nth-child(2) { margin-left: 0;}
	.work div:first-child.col-1 { margin-right: 5%;}
	.work { margin-bottom: 0;}
	.pb {padding-bottom: 15px;}
	#scroll_down { bottom: -50px; -webkit-transform: translateX(-50%); transform: translateX(-50%); left:50%; -webkit-animation: imousepulse 1s; animation: imousepulse 1s; -webkit-animation-iteration-count: 5; animation-iteration-count: 5; transition: all .4s ease-out; -webkit-transition: all .4s ease-out;}
	.caption {position: relative; background-color:#646464; top: 0px; padding: 20px 0 15px;	}
	h3, h2, .caption h3, #intro h2, #intro h3, h1 { font-size: 22px;}
	.pg-hd h2 { font-size: 20px;}
	#intro span {display: block; padding: 10px 0}
  .article-image, .article-images { float: none; max-width: 100%; margin-bottom: 15px; margin-left:0;}
   
  #cf, #controls, #desc, #cf.projects, #controls.projects, #desc.projects { width:98%;}
  #cf { padding-bottom: 56%;}
  #cf.projects { padding-bottom: 74%;}
  p#cf_controls{ grid-template-columns: 1fr 1fr;}
  p#cf_controls span { margin-bottom: 10px;}
  .btns-home { display: block; left: 10%; width: 80%; top: 19%;}
  .thumb a span { font-size: 11px;}

}

@media (max-width: 400px) {
  .btns-home { top: 15%;}
  .btn-home a { height: 160px; font-size: 20px;}
}

@media (max-width: 320px) {
	body { font-size: 12px;}
}