* {
  -moz-appearance: none;
  -moz-border-radius: 0;
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  margin: 0;
  padding: 0; }

.cf {
  zoom: 1; }

.cf:after,
.cf:before {
  content: ' ';
  display: table; }

.cf:after {
  clear: both; }

a:link,
a:visited {
  color: inherit; }

a:hover,
a:active {
  outline: 0; }

a:focus {
  outline: thin dotted; }

h1, h2, h3, h4, h5, h6 {
  font-size: 100%; }

img {
  border-style: none;
  vertical-align: bottom; }

fieldset {
  border-style: none; }

html, body {
  height: 100%; }

body {
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  background-color: #f8f8f8;
  font: normal normal 62.5%/1em 'Source Sans Pro', sans-serif;
  font-size: 62.5%; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block; }

audio, canvas, video {
  display: inline-block; }

#no-script{background-color:#212328;color:#80807e;display:none;left:0;height:130px;position:fixed;top:0;width:100%;z-index:10000}
#no-script div{font-size:14px;font-weight:300;line-height:1em;padding:60px;text-align:left;width:100%;}
#no-script a{color:#fff;text-decoration:underline;}
#no-script a:active,#no-script a:hover{color:#80807e;text-decoration:none;}

.no-js #no-script{display:block;}
.no-js body{margin-top:75px;}

#container{min-height:100%;position:relative;}

section#content{padding-bottom:194px;}
section#content .strong{color:#212328;}
section#content header{padding:0 60px 60px;}
section#content #pfd{padding:60px 0}
section#content #pfd img{height:213px;width:250px}

section#content #preamble,
section#content article{max-width:1200px}
section#content #preamble h1,
section#content article h1{color:#212328;font:300 22px/1.2em Source Sans Pro,sans-serif;padding-bottom:1em}
section#content #preamble h2,
section#content article h2{color:#80807e;font:300 15px/1.4em museo-sans,sans-serif;padding-bottom:1em}
section#content #preamble h3,
section#content article h3{color:#212328;font:300 15px/1.4em museo-sans,sans-serif}
section#content #preamble p,
section#content article p{color:#80807e;font:300 15px/1.2em Source Sans Pro,sans-serif;padding-bottom:1em}
section#content #preamble p.space-after,
section#content article p.space-after{padding-bottom:50px}
section#content #preamble .em,
section#content article .em{color:#80807e;font:300 22px/1.2em Source Sans Pro,sans-serif;padding-bottom:1em}
section#content #preamble a,
section#content article a{border-bottom:1px solid #212328;color:#212328;text-decoration:none}
section#content #preamble a:hover,
section#content article a:hover{border-bottom-color:#80807e;color:#80807e}
section#content #preamble.home h1{color:#80807e}

section#content #our-work{zoom:1}
section#content #our-work:after,
section#content #our-work:before{content:' ';display:table}
section#content #our-work:after{clear:both}
section#content #our-work{margin-bottom:0}
section#content #our-work ul{list-style:none}
section#content #our-work ul li{display:block;float:left;height:335px;width:419px;position:relative}
section#content #our-work ul li a{text-decoration:none}
section#content #our-work ul li img{width:100%}
section#content #our-work ul li .overlay{background-color:rgba(2,254,193,.5);height:100%;left:0;position:absolute;top:0;width:100%;opacity:0;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
section#content #our-work ul li .overlay:hover{background-color:rgba(2,254,193,.5);height:100%;left:0;position:absolute;top:0;width:100%;opacity:3;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
section#content #our-work ul li .overlay summary{bottom:30px;left:60px;padding-right:30px;position:absolute}
section#content #our-work ul li .overlay summary h2{background:url(../images/pfd-sprites.png) repeat left bottom;color:#262626;font:400 20px/1em Source Sans Pro,sans-serif;padding-bottom:15px; font-weight:bold;}
section#content #our-work ul li .overlay summary h3{color:#ffffff;font:300 15px/0.9em Source Sans Pro,sans-serif;padding-top:12px; font-weight:bold;}
section#content #our-work ul li .overlay .loves{-moz-borderradius:40px;-webkit-borderradius:40px;background-color:#fff;border-radius:40px;height:80px;position:absolute;right:60px;text-align:center;top:60px;width:80px}
section#content #our-work ul li .overlay .loves span{background:transparent url(../images/pfd-sprites.png) no-repeat right -121px;color:#ff0000;font:300 15px/1.4em museo-sans,sans-serif;line-height:80px;padding-right:25px}
section#content #pfd-work{position:relative;zoom:1}
section#content #pfd-work footer{bottom:-80px;padding:50px 60px 0;position:absolute;right:0}
section#content #pfd-work footer #other-projects{float:right;list-style:none}
section#content #pfd-work footer #other-projects li{float:left;margin-left:12px}
section#content #pfd-work footer #other-projects a{background:#f8f8f8 url(../images/pfd-sprites.png) no-repeat;display:block;height:30px;text-indent:-8000px;width:34px}
section#content #pfd-work footer #other-projects a.previous-work{background-position:0 -30px}
section#content #pfd-work footer #other-projects a.next-work{background-position:0 -60px}
section#content #pfd-work:after,section#content #pfd-work:before{content:' ';display:table}
section#content #pfd-work:after{clear:both}

section#content #work-bio{left:0;position:fixed;top:0;width:40%}
section#content #work-bio #preamble h1{line-height:1em;padding-bottom:0}
section#content #work-bio #preamble h2,section#content #work-bio #preamble p.space-after{padding-bottom:50px}
section#content #work-bio #links{height:80px;list-style:none;margin:40px 0}
section#content #work-bio #links li{float:left;margin-right:40px}

section#content #work-bio #links #ilovethis{-moz-borderradius:40px;-webkit-borderradius:40px;background-color:#02fec1;border-radius:40px;cursor:pointer;display:block;height:80px;text-align:center;width:80px}

section#content #work-bio #links #ilovethis span{background:transparent url(../images/pfd-sprites.png) no-repeat right -201px;color:#fff;font:300 15px/1.4em museo-sans,sans-serif;line-height:80px;padding-right:25px}
section#content #work-bio #links #ilovethis.unloved,section#content #work-bio #links #ilovethis:hover{background:#212328 url(../images/pfd-sprites.png) no-repeat 10px -170px}
section#content #work-bio #links #ilovethis.unloved span,section#content #work-bio #links #ilovethis:hover span{display:none}
section#content #work-bio #links #ilovethis.loved:hover{background-image:none}
section#content #work-bio #links #ilovethis.loved:hover span{display:inline}
section#content #work-bio #links #home{-moz-borderradius:40px;-webkit-borderradius:40px;background:#02fec1 url(../images/pfd-sprites.png) no-repeat 50% -250px;border-radius:40px;cursor:pointer;display:block;height:80px;text-indent:-8000px;width:80px}

section#content #work-visuals{float:right;width:60%}
section#content #work-visuals ul{list-style:none}
section#content #work-visuals ul li{line-height:0;margin-bottom:10px}
section#content #work-visuals ul li img{width:100%}

section#content #preamble a.read-more{border-style:none;color:#212328;font:300 15px/1.4em Source Sans Pro,sans-serif;text-decoration:none}
section#content #preamble a.read-more:hover{color:#80807e}

section #what-we-do header{background:transparent url(../images/robonights.webp) no-repeat 0% top fixed;padding:0 100px}
section#content #what-we-do header #preamble{padding-bottom:120px}
section #what-we-do article{padding:120px 60px}
section #what-we-do article h2{color:#212328;font:300 22px/1.2em Source Sans Pro,sans-serif}
section#content footer#msf{bottom:0;left:0;position:absolute;width:100%}

<!-- footer -->
footer#msf .wrapper{border-top:1px solid #e4e4e4;height:73px;margin:0 60px}
footer#msf ul#lets-be-social{float:left;width:230px;list-style:none}
footer#msf ul#lets-be-social li{float:left;padding-right:8px}
footer#msf div#legal{float:right;font:400 15px/1em Source Sans Pro,sans-serif;text-align:right;width:400px}
footer#msf div#legal span{padding-right:55px;text-align:right}
footer#msf li a,footer#msf span{line-height:80px}
footer#msf #legal span{line-height:20px;margin-top:20px;display:block;background:url(../images/footer-roborat.png) right center no-repeat}
footer#msf a{font:300 14px museo-sans,sans-serif;text-decoration:none}
footer#msf a:hover{color:#80807e}nav#toc{background-color:#242424;height:100%;position:fixed;right:-240px;top:0;width:240px}nav#toc ul{list-style:none;padding:60px 40px 0}nav#toc ul li{border-top:1px solid #424650;padding:4px 0 5px}nav#toc ul li a{color:#80807e;font:300 15px/2em museo-sans,sans-serif;text-decoration:none}nav#toc ul li a.active,nav#toc ul li a:hover{color:#fff}nav#toc ul li:first-child{border-top:none}nav#toc a#toc-actuator{background:#f8f8f8 url(../images/pfd-sprites.png) no-repeat left top;cursor:pointer;display:block;height:30px;left:-94px;position:absolute;text-indent:-8000px;top:60px;width:34px;z-index:5000}
<!-- footer -->

@media screen and (max-width:1200px){
	footer#msf .wrapper{margin:0 20px}
	section#content header{padding:0 30px 60px}
	section#content #pfd{padding-top:30px}
	section#content #our-work ul li .overlay summary{left:30px}
	section#content #our-work ul li .overlay .loves{right:30px;top:30px}
	section#content #pfd-work footer{padding:50px 30px 0}
	section#content #what-we-do header{padding:0 30px}
	section#content #what-we-do article{padding:120px 30px}
	section#content #what-we-do #web-design .parallax{background:#ededeb url(/images/web-development-med.jpg) no-repeat 50% 0!important;height:750px}
	section#content #what-we-do #identity article{padding:120px 30px}nav#toc ul{padding-top:30px}nav#toc a#toc-actuator{left:-64px;top:30px}
}

@media screen and (max-width:768px){
	section#content #work-bio{float:none;position:relative;width:auto}
	section#content #work-visuals{float:none;width:auto}
	section#content #pfd-work #links{display:none}
	section#content #what-we-do section{height:auto!important}
	section#content #what-we-do section article{padding:60px 30px}
	section#content #what-we-do #web-design .parallax{background:#ededeb url(/images/web-development-sm.jpg) no-repeat 50% 0!important;height:460px}
	section#content #what-we-do #identity{border-bottom:none}
	section#content #what-we-do #identity article{padding:60px 30px}
	section#content #pfd-about #example-photographs li,
	section#content #what-we-do #photography #example-photographs li{width:100%!important}
	section#content p.em{font:300 15px/1.4em museo-sans,sans-serif!important}
}

@media screen and (max-width:460px){
	section#content{padding-bottom:234px}
	section#content #what-we-do #photography #example-photographs li{min-height:50px}	
	<!-- footer -->
	footer#msf .wrapper{padding:20px 0}
	footer#msf ul#lets-be-social{float:none;width:auto;zoom:1}
	footer#msf ul#lets-be-social:after,
	footer#msf ul#lets-be-social:before{content:' ';display:table}
	footer#msf ul#lets-be-social:after{clear:both}
	footer#msf div#legal{float:none;width:auto}
	footer#msf div#legal span{display:block;padding-left:0;text-align:left}
	footer#msf li a,
	footer#msf span{line-height:2em}
	<!-- footer -->
}