* {
    -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: #fff;
   
}

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;
    
}

#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: 28px;
    width: 140px
}

section#content #preamble,section#content article {
    padding-top: 30%;
	max-width: 1200px
}

section#content #preamble h1,section#content article h1 {
    font-family: 'Noto Sans', sans-serif;

	font-size: 36px;
    
    padding-bottom: 2em
}

section#content #preamble h2,section#content article h2 {
    color: #000;
  font-family: 'Noto Sans', sans-serif;
    padding-bottom: 3em
}

section#content #preamble h3,section#content article h3 {
    color: #000;
   font-family: 'Noto Sans', sans-serif;
}

section#content #preamble p,section#content article p {
    color: #000;
	
    font-family: 'Noto Sans', sans-serif;
    padding-bottom: 1em;
	line-height: 2em;
}

section#content #preamble p.space-after,section#content article p.space-after {
    padding-bottom: 50px;
	
}

section#content #preamble .em,section#content article .em {
    color: #000;
  font-family: 'Noto Sans', sans-serif;
	
    padding-bottom: 1em
}

section#content #preamble a,section#content article a {
    border-bottom: 1px solid #000;
    color: #000;
    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: 359px;
    width: 449px;
    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(248,129,75,.9);
    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(248,129,75,.9);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    opacity: 1;
    -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) no-repeat left bottom;
    color: #fff;
    font: 400 20px/1em Source Sans Pro,sans-serif;
    padding-bottom: 15px
}

section#content #our-work ul li .overlay summary h3 {
    color: #813815;
    font: 300 15px/0.9em Source Sans Pro,sans-serif;
    padding-top: 12px
}

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: #ed7b47;
    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 {
    font-family: 'Noto Sans', sans-serif;
   text-decoration-line: none;
    text-indent: -8000px;
   
}

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;
	color: #000000;
}

section#content #work-bio #preamble h2,section#content #work-bio #preamble p.space-after {
    padding-bottom: 15px
}

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: #fc3e3c;
    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: #000 url(../images/pfd-sprites.png) no-repeat 50% -250px;
    border-radius: 40px;
    cursor: pointer;
    display: block;
    height: 80px;
    text-indent: -8000px;
    width: 80px
}

.video-container {
	margin-top: 15%;
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	
}


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 #work-info {
    float: right;
    margin-right: 40px;
	margin-left: 40px
	
}


section#content #work-info ul {
  font-family: 'Noto Sans', sans-serif;
	list-style: none;
	
	
}

section#content #wwork-info ul li {
    line-height: 0;
    margin-bottom: 10px;
	
	
}





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/grass.jpg) no-repeat 50% top fixed;
    padding: 0 60px
}

section#content #what-we-do header #preamble {
    padding-bottom: 60px
}

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#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: 300px
}

footer#msf div#legal span {
    padding-right: 36px
}

footer#msf li a,footer#msf span {
    line-height: 73px
}

footer#msf #legal span {
    line-height: 20px;
    margin-top: 20px;
    display: block
}

footer#msf a {
    font: 300 14px museo-sans,sans-serif;
    text-decoration: none
}

footer#msf a:hover {
    color: #80807e
}

nav#toc {
    background-color: #212328;
    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
}



/* Nav Bar */
nav .logo {
    float: left;
    margin-left: 30px;
}

nav .logo a {
	font-family: "Kanit", sans-serif;
    font-size: 30px;
    font-weight: 500;
    line-height: 80px;
    text-transform: uppercase;
	letter-spacing: 0.5px;
    text-decoration: none;
    color: #000000;
}

nav .logo em {
    font-style: normal;
    font-weight: 200;
    color: #000000;
}

nav {
    height: 80px;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 300;
}

.container-fluid {
    width: 100%;
    padding-bottom: 10%;
    background-color: #f2f2f2;
}

.container-fluid p {
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
    text-align: left;
    color: #000;
    font-weight: 200;
    font-size: 18px;
   
   
    letter-spacing: 0.5px;
}

.container-fluid h1 {
    font-size: 36px;
    text-align: left;
    color: #333;
    font-weight: 500;
   
    padding-bottom: 10px;
    letter-spacing: 0.5px;
    font-family: "Kanit";
    font-style: inherit;
}

.container-fluid a {
    color: #000;
    font-size: 20px;
    padding-top: 10px;
    letter-spacing: 0.5px;
    text-decoration: none;
}

.container-fluid a:hover {
    text-decoration: none;
    color: #000;
}

.info-box {
    float: left;
    width: 15%;
    margin-left: 40px;
    margin-top: 20px;
   
    padding-left: 40px;
}



#run {
    height: 80px;
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 300;
}












@media screen and (max-width: 1200px) {
    footer#msf .wrapper {
        margin:0 30px
    }

    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 #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 #pfd-work #links {
        display: none
    }
    section#content {
        padding-bottom:234px
    }

    section#content #what-we-do #photography #example-photographs li {
        min-height: 50px
    }

    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
    }
	
	.container-fluid {
 
  padding-bottom: 10%;
 
	
}
	
.info-box {
  float: left; 
  width: 100%;
  margin-left: 10px;
  padding-right: 10px;
  padding-left: 10px;
	
}

#run{
   height: 5%;
  
opacity: 80%;
 
}	
}

@media (max-width: 530px) {
	
	 section#content #pfd-work #links {
        display: none
    }
	
    .container-fluid {
 
  padding-bottom: 90%;
 
	
}
	
.info-box {
  float: left; 
  width: 100%;
  margin-left: 10px;
  padding-right: 10px;
  padding-left: 10px;
	
}

#run{
   height: 5%;
  
opacity: 80%;
 
}	
}