@charset "UTF-8";

/* DOCUMENT SETUP */
html {font-size:67.5%;}

@-moz-document url-prefix() { 
  html {font-size:62.5%;}
}

body {font-family:'CallunaRegular','Times New Roman', Times, serif; background:url(../images/static-kraft.png) no-repeat 0% 0; margin: 0px; overflow:hidden; /*word-spacing:-0.45em;*/ }

.kraft-with-colour {background:url(../images/static-kraft-with-colour.png) no-repeat -93px 0;}
.kraft-with-colour-projects {background:url(../images/static-kraft-with-colour-projects.png) no-repeat -93px 0;}
.kraft-with-colour-projects-on {background:url(../images/static-kraft-with-colour-projects-on.png) no-repeat -93px 0;}
.kraft-gallery {background:url(../images/static-kraft-galerie.png) no-repeat 0 0;}
.kraft-gallery-on {background:url(../images/static-kraft-galerie-on.png) no-repeat 0 0;}
.kraft-sketch {background:url(../images/static-kraft-croquis.png) no-repeat 0 0;}
.kraft-sketch-on {background:url(../images/static-kraft-croquis-on.png) no-repeat 0 0;}

@media screen and (max-width: 1024px) {
	body {min-width: 320px; overflow: visible;}
	#home {overflow: hidden; position: fixed; width: 100%; height: 100%;}
	
	.kraft-with-colour {background:url(../images/static-kraft-with-colour.png) no-repeat 55% 0;}
	.kraft-with-colour-projects {background:url(../images/static-kraft-with-colour-projects.png) no-repeat 15% 0;}
	.kraft-with-colour-projects-on {background:url(../images/static-kraft-with-colour-projects-on.png) no-repeat -93px 0;}
	.kraft-gallery {background:url(../images/static-kraft-galerie.png) no-repeat -226px 0; overflow: visible;}
}

/* LINK SETUP */
a:link {	text-decoration: none;	color: #000;}
a:visited {text-decoration: underline; color: #000;}
a:active {text-decoration: underline; color: #000;}
a:hover {text-decoration: underline; color: #000;}
a:visited:hover {text-decoration: underline; color: #4b4b4b;}

/*TYPOGRAPHY*/
#homeBtn, #nav { font-family:'CallunaSansRegular', Verdana, Arial, Helvetica, sans-serif;}
.orange { color:#d55200;}
.sans {font-family:'CallunaSansRegular',Arial, Helvetica, sans-serif;}
span.suppInfo {color:#636363; font-family:'CallunaRegular','Times New Roman', Times, serif; text-transform:lowercase; margin-left:5px;word-spacing: -0.10em; font-weight:normal;}
span.suppInfoNumerals {color:#636363; font-family:'calluna_regular','Times New Roman', Times, serif;}
span.suppSansNumerals {font-family:'calluna_sansregular',Arial, Helvetica, sans-serif;}
sup { font-size:55%;}
span.small-c {font-size:82%; font-weight:400;}
li a.on span.small-c, li a.clicked span.small-c {font-size:82%; font-weight:600;}

.content.galleryLayout {padding:150px 0 80px 44px;}
.content.galleryLayout p { font-size:1.6em !important;}
.content.galleryLayout h3 {font-family:'CallunaRegular','Times New Roman', Times, serif; color:#d55200; font-size:1.4em; margin-top:65px;}
.content.galleryLayout h1 {margin-bottom:12px !important;}
.content h1 span.small-c { font-weight:bold;}
.content h1 { color:#000; text-transform:uppercase; font-family:'CallunaSansRegular',Arial, Helvetica, sans-serif; font-size:1.4em; font-weight: normal; width:595px; margin:0; word-spacing:0;}
.kraft-gallery .content h1 { margin-bottom:50px; font-weight:normal;}
.kraft-gallery .content h1.openingHeader{ font-size:1.7em; color:#636363;}

@media screen and (max-width: 1024px) {
	.content.galleryLayout p {font-size: 1.4em !important; width:640px;}
	.kraft-gallery .mCSB_container {overflow: visible;}
	.kraft-gallery-on #menuContainer {float: none !important;}
}

/*STRUCTURE*/
#page {position:absolute; top:60px; z-index:2; margin-left:auto;margin-right:auto; width: 98%; min-width:35%; max-width:1224px; height:auto;}
/*Scrollbar v2*/

/*#images { background:transparent; margin-left:470px; padding:140px 0 80px 100px; height:auto; width:51%;}
#images.projects { background:#fff;}
#images img { width:600px; margin-bottom:50px; font-size:1.2em;}
#images p.loader {text-align:center !important;}
#images a.up { font-family:'CallunaSansRegular', Verdana, Arial, Helvetica, sans-serif; font-size:2.8em; color:#d55200; float:none; text-transform:uppercase; text-decoration:none;}*/
#mCSB_1{overflow:visible !important;}
#content_1{width:620px; height:600px;}
.content { margin:0 0 0 470px; width:41%;/*if not working put px*/ height:600px; padding:140px 0 80px 100px; overflow:visible;}
#content_1.projects { background:#fff;}
.content img { width:600px; margin-bottom:50px; font-size:1.2em; word-spacing:0em;}
.content p.loader {text-align:center !important;}
.content a.up { font-family:'CallunaSansRegular', Verdana, Arial, Helvetica, sans-serif; padding: 0.33em; font-size:1.125em; background: #000; color:#fff; float:none; text-transform:uppercase; text-decoration:none;}
/*IMPORTED FROM Scrollbar CSS V1*/
.content p {padding:0; margin:0 0 50px 0; color:#636363; font-family:'CallunaRegular','Times New Roman', Times, serif; font-size: 1.4em; line-height:1.4; width:100%; text-align:left;}
.content p.up { text-align:center; margin-bottom: 3em; display: inline-block;}
.mCustomScrollBox .mCSB_scrollTools {opacity:1.0 !important;}

/*Draggable movable*/
.orangeLayer { background:url(../images/orange_layer_v4.png) no-repeat 0px 0px; width:3499px; height:4000px; opacity:0.85;}
#draggable { cursor:move; position:absolute !important; top:16px; left:-780px; z-index:1; opacity:1.0;}
#draggable.hide { display:none; cursor:default;}

#contactInfo {font-size:0.85em; line-height:1.1; display:none; text-transform: none; margin:10px 0 0 6px; color:#636363;}
#contactInfo p {margin:0;}
#contactInfo span.nonLining {font-family: 'calluna_sansregular', Arial, Helvetica, sans-serif; display: block; margin-bottom: 5px;}
#contactInfo span.nonLining .phoneHack { display:block; margin-bottom:-13px; }
#contactInfo a { color:#D55200; text-decoration:none; display: block; line-height: 0.85; white-space:nowrap; padding:0 !important;}
/*#contactInfo h1 { line-height:0.5;}
#contactInfo h1, #contactInfo p { padding:0; margin:0;}
#contactInfo a.orange { color:#d55200;}*/
#bioContainer {font-family:'CallunaRegular','Times New Roman', Times, serif; color:#636363; margin:215px 0 0 735px; padding:16px; font-size:1.7em; line-height:1.5; background: #fff;}
#bioContainer p {margin: 0;}
#croquisContainer {font-family:'CallunaRegular','Times New Roman', Times, serif; width:466px; color:#636363; font-size:1.7em; line-height:1.5; margin: 0; padding:100px 0 112px 125px; background:url(../images/static-kraft-croquis-left.png) no-repeat 0px -70px #fff;}
#croquisContainer.enContainer { background:url(../images/static-kraft-croquis-left.png) no-repeat 0px -98px;}
/*#contactInfo h1, #bioContainer h1 {font-family:'CallunaSansRegular', Verdana, Arial, Helvetica, sans-serif; font-size:1.8em;}*/

@media screen and (max-width: 1024px) {
	#bioContainer {margin:215px 0 0 54%; background: none;}
	
	.kraft-with-colour #bioContainer {background: #fff;}
	
	#croquisContainer {background-position: 0 0;}
	.kraft-sketch {overflow: visible;}
	.kraft-sketch .content {padding-top: 245px;}
	.kraft-sketch #mCSB_1 {background: #fff;}
	
	.content {margin:0; padding-top: 70px;}
}

/* NAVIGATION */
#homeBtn {float:right; text-transform:uppercase; padding:5px 10px; background: #fff; font-size:1.5em;}
#homeBtn a {text-decoration:none; padding:0 5px;}
#homeBtn a:hover { color:#fff; background:#000; text-decoration:none; padding:0 5px;}

#homeBtn.on a, #homeBtn.on a:hover { color:#d55200; background:#fff;}

#navWrapper { position:absolute right; z-index:2; word-spacing:0;}
#nav {float:right; margin-top:3px;}
#nav a {text-decoration:none; padding:0 5px; font-size:1.7em;}
#nav.initialState a {display:none;}
#nav a.selected { color:#d55200;}

#returnTop {width: 25px; height: 25px; background-color: #ccc; float:right;}

/*MENU*/
#menuContainer {margin:220px 0 0 135px; z-index:10; text-transform:uppercase; word-spacing:0; float:left;}
.kraft-gallery #menuContainer {margin:335px 0 0 326px;}

@media screen and (max-width: 1024px) {
	.kraft-gallery #menuContainer {margin:335px 98px 0 111px; float:left; position: relative;}
}

.kraft-gallery .content h1#top {margin-top:50px;} 
#menuContainer h3 {margin-bottom:5px;}
#menuContainer ul { font-family:'CallunaSansRegular',Arial, Helvetica, sans-serif; padding: 0; margin:0 0 15px 0;}
#menuContainer li, #menuContainer li a, #menuContainer li a:hover { color:#000; text-decoration:none}
#menuContainer ul .nested { padding: 0 0 0 10px;}
#menuContainer li { list-style:none; line-height:1.55; font-size:1.4em;}
#menuContainer li a.on.clicked {color:#d55200; font-weight:normal;}
#menuContainer li a.clicked {color: #000; font-weight: normal;} /*BUY FONT HERE*/
#menuContainer li a img {border:0;position:absolute;}

.kraft-with-colour-projects #menuContainer li a, .kraft-gallery #menuContainer li a {color: #fff;}
.kraft-gallery #menuContainer li a.on.clicked {color:#42250e;}

#menu { float:none;}

@media screen and (max-width: 1024px) {
	#menuContainer {/*position: relative;*/ height:530px; float: none;}
	.kraft-with-colour #menuContainer {height: 0;}
}

/*IMAGES CONTAINER*/
.hidden { display:none; }
.visible { display:block; }
.loader { margin:0 auto; width:32px;}

/*PROJECTS CONTAINER*/
/*Loaded externally*/
#duo-load { text-align:center;}
#duo-load p { width:530px; margin-left: auto; margin-right:auto; font-size: 1.6em; line-height:1.1; text-align:left;}
#duo-load p.french { color:#dd2121;}
#duo-load p.english { color:#af763d;} 
#project-load { text-align:center; padding-top:20px;}
#project-load img { margin-bottom:10px;}

/*VIDEOS*/
#duoVid {margin-top:75px;}

/*UTILITIES*/
.hide-for-medium {display: block;}

.lining-numerals-sans {font-family: "calluna_sansregular";}
.lining-numerals-serif {font-family: "calluna_regular";}
.lowercase {text-transform: lowercase;}

@media screen and (max-width: 1024px) {
	.hide-for-medium {display: none;}
}

/*Web Fonts*/

/*
 * Web Fonts from fontspring.com
 *
 * All OpenType features and all extended glyphs have been removed.
 * Fully installable fonts can be purchased at http://www.fontspring.com
 *
 * The fonts included in this stylesheet are subject to the End User License you purchased
 * from Fontspring. The fonts are protected under domestic and international trademark and 
 * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
 * distributing this font software.
 *
 * (c) 2010-2012 Fontspring
 *
 * The fonts included are copyrighted by the vendor listed below.
 *
 * Vendor:      exljbris
 * License URL: http://www.fontspring.com/fflicense/exljbris
 *
 *
 */
 
 /* Dear lawyers, I just wanted some lining numerals, please don't sue me - Ed */

@font-face {
    font-family: "CallunaSansRegular";
    src: url("../fonts/CallunaSansRegular-webfont.eot");
    src: url("../fonts/CallunaSansRegular-webfont.eot?#iefix") format("embedded-opentype"),
         url("../fonts/CallunaSansRegular-webfont.woff") format("woff"),
         url("../fonts/CallunaSansRegular-webfont.ttf") format("truetype"),
         url("../fonts/CallunaSansRegular-webfont.svg#CallunaSansRegular") format("svg");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "calluna_sansregular";
    src: url("../fonts/calluna-sans-numerals.eot");
    src: url("../fonts/calluna-sans-numerals.eot?#iefix") format("embedded-opentype"),
         url("../fonts/calluna-sans-numerals.woff") format("woff"),
         url("../fonts/calluna-sans-numerals.ttf") format("truetype"),
         url("../fonts/calluna-sans-numerals.svg#calluna_sansregular") format("svg");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "calluna_regular";
    src: url("../fonts/calluna-regular-numerals-webfont.eot");
    src: url("../fonts/calluna-regular-numerals-webfont.eot?#iefix") format("embedded-opentype"),
         url("../fonts/calluna-regular-numerals-webfont.woff") format("woff"),
         url("../fonts/calluna-regular-numerals-webfont.ttf") format("truetype"),
         url("../fonts/calluna-regular-numerals-webfont.svg#calluna_regular") format("svg");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'CallunaRegular';
    src: url('../fonts/calluna-regular.eot');
    src: url('../fonts/calluna-regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/calluna-regular.woff') format('woff'),
         url('../fonts/calluna-regular.ttf') format('truetype'),
         url('../fonts/calluna-regular.svg#callunaregular') format('svg');
    font-weight: normal;
    font-style: normal;
}