html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

body { line-height: 1; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }

a img { border: none; }

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

.serif, body { font-family: skolar-1, skolar-2, Georgia, serif; }

.sans, #header ul, #header nav, #header li, #header h2, footer h4, #carousel figure figcaption h2, .index_list #work h5, .index_list li h3, .portfolio h1, .portfolio .details h4, textarea, #formed h4, #formed #form label { font-family: omnes-pro-1, omnes-pro-2, sans-serif; }

.clearfix, footer, .index_list ul, .portfolio, .portfolio .details, #formed { *zoom: 1; }
.clearfix:after, footer:after, .index_list ul:after, .portfolio:after, .portfolio .details:after, #formed:after { content: ""; display: table; clear: both; }

/* Global styles
-----------------------------------------------------------*/
.wf-loading header ul, .wf-loading header nav, .wf-loading header li, .wf-loading header h1 { font-size-adjust: 0.495; word-spacing: -3px; }

body { font-size: 100%; color: #b3bfc5; background: url(../img/display/bkg.jpg) #111111 repeat top center; font-synthesis: none; font-variant-ligatures: common ligatures; -moz-font-feature-settings: "liga=1,dlig=1"; font-kerning: normal; text-rendering: optimizeLegibility; -webkit-text-size-adjust: none; overflow-x: hidden; }

a { color: #ff3651; -moz-transition-property: color; -webkit-transition-property: color; -o-transition-property: color; transition-property: color; -moz-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -moz-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; word-wrap: break-word; text-decoration: none; }
a:hover, a:focus, a:active { color: #5e7f8c; }

p { hyphenate: auto; hyphenate-lines: 3; hyphens: auto; hyphenate-character: "-"; hyphenate-limit-chars: auto 3; hyphenate-limit-last: page; line-height: 1.375em; margin-top: 1.375em; }

strong, b { font-weight: 600; }

em, i, q { font-style: italic; }

html[lang="en-GB"] blockquote { quotes: "\2018" "\2019"; color: #b3bfc5; }

blockquote { display: block; }
blockquote p { display: inline; line-height: 1.375em; margin-top: 1.375em; font-style: italic; }
blockquote p:before { content: open-quote; }
blockquote p:after { content: close-quote; }
blockquote cite { display: block; line-height: 1.375em; margin-top: 1.375em; }

figure { margin: 0; }

ul, ol { list-style-position: outside; list-style-type: none; }

::-moz-selection { color: #fff; background: #ff3651; }

::selection { color: #fff; background: #ff3651; }

/* Begin site styles 
-----------------------------------------------------------*/
body.desktop .wrapp { min-width: 800px; max-width: 1040px; _width: 80%; margin: 0 auto; padding: 0 20px; }
body.iphone .wrapp { width: 90%; margin: 0 auto; }
body.iphone #header { margin: 12px 0; }
body.iphone .portfolio h1 { font-size: 1.375em; line-height: 1em; margin-top: 1em; width: 95%; }
body.iphone .portfolio a.button { top: auto; bottom: 13px; }
body.ipad .wrapp { width: 90%; margin: 0 auto; padding: 0 20px; }

.grad { background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(20%, #8c111b), color-stop(20.01%, #c21e32), color-stop(40%, #8c111b), color-stop(40.1%, #c21e32), color-stop(60%, #8c111b), color-stop(60.01%, #c21e32), color-stop(80%, #8c111b), color-stop(80.01%, #c21e32), color-stop(100%, #8c111b)); background-image: -webkit-linear-gradient(left, #8c111b 20%, #c21e32 20.01%, #8c111b 40%, #c21e32 40.1%, #8c111b 60%, #c21e32 60.01%, #8c111b 80%, #c21e32 80.01%, #8c111b 100%); background-image: -moz-linear-gradient(left, #8c111b 20%, #c21e32 20.01%, #8c111b 40%, #c21e32 40.1%, #8c111b 60%, #c21e32 60.01%, #8c111b 80%, #c21e32 80.01%, #8c111b 100%); background-image: -o-linear-gradient(left, #8c111b 20%, #c21e32 20.01%, #8c111b 40%, #c21e32 40.1%, #8c111b 60%, #c21e32 60.01%, #8c111b 80%, #c21e32 80.01%, #8c111b 100%); background-image: -ms-linear-gradient(left, #8c111b 20%, #c21e32 20.01%, #8c111b 40%, #c21e32 40.1%, #8c111b 60%, #c21e32 60.01%, #8c111b 80%, #c21e32 80.01%, #8c111b 100%); background-image: linear-gradient(left, #8c111b 20%, #c21e32 20.01%, #8c111b 40%, #c21e32 40.1%, #8c111b 60%, #c21e32 60.01%, #8c111b 80%, #c21e32 80.01%, #8c111b 100%); height: 6px; }

#header { padding: 1em 0 0.63em 0; border-bottom: 1px solid #444; width: 100%; margin-top: 2em; }
#header .inner { position: relative; }
#header ul, #header nav, #header li, #header h2 { display: inline; text-transform: uppercase; font-size: 0.813rem; letter-spacing: 3px; }
#header h2 { color: #eee; }
#header h2:after { content: " //"; color: #444; }
#header h2 a { color: #eee; }
#header li { margin-left: 10px; }
#header a { color: #aaa; }
#header a:hover, #header a:focus, #header a:active { color: #ff3651; }
#header a[href*="dribbble"] { text-indent: -999em; display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: middle; *vertical-align: auto; background: url(../img/display/dribbble.png) transparent no-repeat 0 0; height: 16px; width: 60px; position: absolute; top: 0px; right: 0; -moz-transition-property: opacity; -webkit-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; -moz-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -moz-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30); opacity: 0.3; }
#header a[href*="dribbble"] { *display: inline; }
#header a[href*="dribbble"]:hover, #header a[href*="dribbble"]:focus, #header a[href*="dribbble"]:active { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; }

footer { padding: 1.375em 0 2.75em 0; margin: 1.375em 0 1.375em 0; border-top: 1px solid #444; border-bottom: 1px solid #444; position: relative; }
footer p { width: 98%; }
footer h4 { font-size: 1.625em; line-height: 1.6923em; margin-top: 0.8462em; color: #fff; padding-top: 0.8462em; }
footer .col, footer .ser { width: 28%; display: inline; float: left; text-align: right; }
footer .ser { text-align: left; }
footer .ser li { line-height: 1.375em; margin-top: 1.375em; border-bottom: 1px dotted #555; position: relative; top: -1px; }
footer aside { display: inline; float: left; width: 36%; margin-left: 4%; margin-right: 4%; }
footer aside img { display: block; margin-top: 22px; }
footer aside h4 { text-align: center; }
@media only screen and (min-width: 767px) and (max-width: 1140px) { footer { padding-top: 0.688em; }
  footer h4 { padding-top: 0; }
  footer aside { display: none; }
  footer .col { width: 48%; text-align: left; }
  footer .ser { margin-left: 4%; width: 48%; } }
@media only screen and (max-width: 767px) { footer { padding-top: 0.688em; }
  footer h4 { padding-top: 0; }
  footer aside { display: none; }
  footer .col { width: 100%; text-align: left; float: none; }
  footer .ser { margin-left: 0; width: 100%; } }

.legal { margin-bottom: 1.375em; margin-left: auto; margin-right: auto; text-align: center; font-size: 0.85em; line-height: 1.675em; margin-top: 1.675em; color: #777; width: 66%; }
@media only screen and (max-width: 767px) { .legal { width: 95%; text-align: left; } }

/* Homepage
----------------------------------------------------------- */
#carousel { overflow: hidden !important; position: relative; width: 100%; height: auto; margin: 1.375em 0 0 0; padding-bottom: 2.063em; border-bottom: 1px solid #444; overflow: hidden; }
#carousel #car { overflow: hidden; }
#carousel .next, #carousel .prev { position: absolute; top: 52%; margin-top: -48px; right: 80px; z-index: 3; width: 48px; height: 48px; text-indent: -999em; display: block; background: url(../img/display/la.png) transparent no-repeat 0 0; overflow: hidden; }
#carousel .next:hover, #carousel .next:focus, #carousel .next:active, #carousel .prev:hover, #carousel .prev:focus, #carousel .prev:active { background-position: 0 -48px; }
#carousel .next.carousel-disabled, #carousel .prev.carousel-disabled { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10); opacity: 0.1; cursor: default; }
#carousel .next { left: auto; right: 24px; background: url(../img/display/ra.png) transparent no-repeat 0 0; }
#carousel figure { display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: middle; *vertical-align: auto; position: relative; }
#carousel figure { *display: inline; }
#carousel figure img { display: block; position: relative; z-index: 1; }
#carousel figure figcaption { position: absolute; bottom: 60px; left: 5%; width: 45%; z-index: 2; }
@media only screen and (min-width: 481px) and (max-width: 767px) { #carousel figure figcaption { width: 65%; bottom: 30px; } }
@media only screen and (min-device-width: 767px) and (max-device-width: 1140px) { #carousel figure figcaption { width: 58%; bottom: 30px; } }
#carousel figure figcaption h2 { font-size: 2.3125em; line-height: 1.1892em; margin-top: 0.5946em; color: #fff; }
@media only screen and (min-device-width: 767px) and (orientation:portrait) { #carousel figure figcaption h2 { font-size: 1.625em; line-height: 1.6923em; margin-top: 0.8462em; line-height: 1em; } }
@media only screen and (min-device-width: 767px) and (orientation:landscape) { #carousel figure figcaption h2 { font-size: 2.3125em!important; line-height: 1.1892em!important; margin-top: 0.5946em!important; } }
@media only screen and (min-width: 481px) and (max-width: 1080px) { #carousel figure figcaption h2 { font-size: 1.625em; line-height: 1.6923em; margin-top: 0.8462em; line-height: 1em; } }
#carousel figure figcaption p { line-height: 1.375em; margin-top: 1.375em; color: #fff; }
@media only screen and (min-width: 481px) and (max-width: 1080px) { #carousel figure figcaption p { font-size: 0.85em; line-height: 1.675em; margin-top: 1.675em; } }

.index_list #work h5 { text-transform: uppercase; font-size: 0.813em; letter-spacing: 3px; text-align: center; position: relative; top: -9px; background: url(../img/display/bkg.jpg) #191915 repeat top center; padding: 2px 12px; margin: 0 auto; width: 18%; }
@media only screen and (min-device-width: 767px) and (max-device-width: 1140px) { .index_list #work h5 { width: 22%; } }
.index_list ul { margin-bottom: 1.375em; padding-bottom: 1%; }
.index_list li { display: inline; float: left; width: 18.4%; height: auto; margin: 2% 2% 0 0; position: relative; z-index: 2; }
.index_list li:nth-of-type(5n) { margin-right: 0; }
.index_list li.nr { margin-right: 0; }
@media only screen and (min-device-width: 767px) and (max-device-width: 1140px) { .index_list li { width: 32%; }
  .index_list li:nth-of-type(3n) { margin-right: 0; }
  .index_list li:nth-of-type(5n) { margin-right: 2%; }
  .index_list li:last-of-type { display: none; } }
@media only screen and (max-device-width: 767px) { .index_list li { width: 49%; }
  .index_list li:nth-of-type(2n) { margin-right: 0; }
  .index_list li:nth-of-type(5n) { margin-right: 2%; }
  .index_list li:last-of-type { margin-right: 0; } }
.index_list li img { display: block; -moz-background-clip: border; -webkit-background-clip: border; -o-background-clip: border-box; -ms-background-clip: border-box; -khtml-background-clip: border-box; background-clip: border-box; -moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px; position: relative; z-index: 3; -moz-transition-property: all; -webkit-transition-property: all; -o-transition-property: all; transition-property: all; -moz-transition-duration: 0.1s; -webkit-transition-duration: 0.1s; -o-transition-duration: 0.1s; transition-duration: 0.1s; -moz-transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-backface-visibility: hidden; }
.index_list li a { display: block; }
.index_list li a:hover img { -moz-transform: scale(1.03, 1.03); -webkit-transform: scale(1.03, 1.03); -o-transform: scale(1.03, 1.03); -ms-transform: scale(1.03, 1.03); transform: scale(1.03, 1.03); }
.index_list li h3 { font-size: 1.375em; line-height: 1em; margin-top: 1em; color: #fff; }
.index_list li p { margin-bottom: 1.375em; }

/* Single projects
------------------------------------------------------------*/
.portfolio { margin: 0 0 2.75em 0; position: relative; }
.portfolio #main { width: 41%; display: inline; float: left; padding-top: 1em; }
.portfolio #main img { margin: 2.75em 0 1.375em 0; }
.portfolio aside { width: 54%; margin-right: 5%; display: inline; float: left; padding-top: 0.5em; }
.portfolio aside img { display: block; margin-top: 1.375em; }
@media only screen and (min-device-width: 767px) and (max-device-width: 1140px) { .portfolio { margin-bottom: 0; }
  .portfolio aside { width: 35%; margin-right: 7%; }
  .portfolio aside .pad { margin-top: 2em; }
  .portfolio #main { width: 55%; }
  .portfolio #main img { display: none; }
  .portfolio #main img.ov { display: block; float: right; margin-left: 5%; width: 44%; margin-top: 1.375em; } }
@media only screen and (max-device-width: 767px) { .portfolio { margin-bottom: 0; }
  .portfolio aside { display: none; }
  .portfolio #main { width: 90%; float: none; }
  .portfolio #main img { display: none; }
  .portfolio #main .iphoneim img { display: block; margin-top: 1.618em; }
  .portfolio #main #did { width: 100%; margin-right: 0%; float: none; }
  .portfolio #main #wdw { width: 100%; float: none; }
  .portfolio #main b { display: block; }
  .portfolio #main h1 { padding-right: 40%; width: 60%; } }
.portfolio header { position: relative; }
.portfolio h1 { font-size: 2.3125em; line-height: 1.1892em; margin-top: 0.5946em; color: #fff; border-bottom: 1px dotted #ddd; padding-bottom: 0.688em; width: 80%; padding-right: 20%; }
.portfolio .button { line-height: 1.375em; margin-top: 1.375em; display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: middle; *vertical-align: auto; color: #fff; background: #ff3651; padding: 3px 6px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; position: absolute; right: 0; top: -8px; }
.portfolio .button { *display: inline; }
.portfolio .details { border-top: 1px dotted #ddd; padding-top: 0.688em; margin-top: 2.75em; }
.portfolio .details h4 { line-height: 1.375em; margin-top: 1.375em; color: #fff; }
.portfolio .details ul { margin: 1.375em 0 2.75em 0; }
.portfolio .details li { font-size: 0.85em; line-height: 1.675em; margin-top: 1.675em; margin-top: 0; }
.portfolio .details li b { color: #fff; font-weight: 400; display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: middle; *vertical-align: auto; width: 32%; }
.portfolio .details li b { *display: inline; }
.portfolio .details li span { display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: middle; *vertical-align: auto; }
.portfolio .details li span { *display: inline; }
.portfolio #vid { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; margin: 2.75em 0; background: url(../img/display/loading.gif) #222222 no-repeat center center; }
.portfolio #vid iframe, .portfolio #vid object, .portfolio #vid embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Contact
------------------------------------------------------------*/
form { margin: 0; }

fieldset { border: 0; padding: 0; }

label { display: block; }

textarea { overflow: auto; vertical-align: top; font-size: 0.85em; }

legend { *margin-left: -7px; }

button, input, select, textarea { display: block; vertical-align: baseline; *vertical-align: middle; /* IE7 and older */ }

button, input { line-height: normal; *overflow: visible; }

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }

input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }

input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

.suphomie { padding-bottom: 2.75em; background: url(../img/display/sam.gif) transparent no-repeat -2% 100%; }

#formed { padding: 2.75em 0 0 0; }
#formed h1 { font-size: 2.3125em; line-height: 1.1892em; margin-top: 0.5946em; color: #fff; border-bottom: 1px solid #333; padding-bottom: 0.775em; }
#formed h1 i { opacity: 0.7; }
#formed h1 i + i { opacity: 0.3; }
#formed h1 i + i + i { opacity: 0.1; }
#formed h4 { font-size: 1.375em; line-height: 1em; margin-top: 1em; color: #fff; }
#formed h2 { font-size: 1.625em; line-height: 1.6923em; margin-top: 0.8462em; color: #fff; }
#formed ol { font-size: 0.85em; line-height: 1.675em; margin-top: 1.675em; list-style-position: outside; list-style-type: decimal; }
#formed #form { width: 44%; padding-left: 56%; }
#formed #form input[type="text"], #formed #form input[type="email"], #formed #form input[type="name"], #formed #form textarea { width: 75%; padding: 1.6em; background: #333; background: rgba(255, 255, 255, 0.2); border: none; margin-bottom: 1.375em; }
#formed #form input[type="text"]:focus, #formed #form input[type="email"]:focus, #formed #form input[type="name"]:focus, #formed #form textarea:focus { background: #eee; color: #111; background: rgba(255, 255, 255, 0.9); }
#formed #form textarea { padding: 1.2em; width: 85%; }
#formed #form label { display: block; line-height: 1.375em; margin-top: 1.375em; margin-bottom: 7px; }
#formed #form input[type="submit"] { font-size: 1.375em; line-height: 1em; margin-top: 1em; display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: middle; *vertical-align: auto; color: #fff; background: #ff3651; padding: 2px 12px 4px 12px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; border: 0; margin-top: 0; }
#formed #form input[type="submit"] { *display: inline; }
#formed form { padding: 1.375em 1.375em 2.75em 2.75em; background: rgba(0, 0, 0, 0.2); }

#content.suphomie + footer { margin-top: 0; }

.echo { position: fixed; bottom: 0; left: 0; margin-top: 0; padding: 1em; font-size: 2.3125em; line-height: 1.1892em; margin-top: 0.5946em; text-align: center; background: #fff; background: rgba(255, 255, 255, 0.8); color: #111; width: 100%; }

img, object, embed, video { max-width: 100%; _width: 100%; }

img { border: 0; -ms-interpolation-mode: bicubic; image-rendering: optimizeQuality; }

html.ie7 .index_list { overflow: hidden; }
html.ie7 .index_list li.nr { margin-left: -1px; }