/*!
* www.KNACSS.com V3.0.3 (2014-05-19) @author: Raphael Goetter, Alsacreations
* Licence WTFPL http://www.wtfpl.net/
*/

/* ----------------------------- */

/* == soft reset                 */

/* ----------------------------- */

/* switching box model for all elements */

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
/* soft reset */

html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
	width: 100%;
}
ul,
ol {
	padding-left: 2em;
}
ul.unstyled {
	list-style: none;
}
img {
	height: auto;
	vertical-align: middle;
	border: 0;
}
audio,
canvas,
video {
	display: inline-block;
}
svg:not(:root) {
	overflow: hidden;
}
/* ----------------------------- */

/* == typography                 */

/* ----------------------------- */

html {
	/* set base font-size to equiv "10px", which is adapted to rem unit */
	font-size: 62.5%;
	/* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */
	/* thanks to @guardian, @victorbritopro and @eQRoeil */
	font-size: calc(1em * 0.625);
	/* disallow text zooming on orientation change (non standard property) */
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
body {
	/* set body font-size in em (1.4em equiv "14px") */
	font-size: 1.8em;
	line-height: 1.6;
}

/* font-sizing for content */
p,
.p-like,
ul,
ol,
dl,
blockquote,
pre,
td,
th,
label,
textarea,
caption,
details,
figure {
	margin-top: 0.75em;
	margin-bottom: 0;
	/*line-height: 1.5;*/
}

h1,
.h1-like {
	font-size: 3.2rem;
}
h2,
.h2-like {
	font-size: 2.4rem;
}
h3,
.h3-like {
	font-size: 1.6rem;
}

/* alternate font-sizing */

.smaller {
	font-size: 0.77777em;
}
.small {
	font-size: 0.8888em;
}
.big {
	font-size: 1.1111em;
}
.bigger {
	font-size: 1.22222em;
}
.biggest {
	font-size: 1.33333em;
}
code,
pre,
samp,
kbd {
	/* IE fix */
	white-space: pre-line;
	white-space: pre-wrap;
	font-family: Consolas, 'DejaVu Sans Mono', Courier, monospace;
	line-height: normal;
}
em,
.em,
address,
cite,
dfn,
i,
var {
	font-style: italic;
}
.no-em {
	font-style: normal;
}
strong,
.strong {
	font-weight: bold;
}
.no-strong {
	font-weight: normal;
}
small,
sub,
sup {
	font-size: smaller;
}

/* ----------------------------- */

/* == hiding content             */

/* ----------------------------- */

/* hidden but not for assistance tools, Yahoo! method */

.visually-hidden {
	position: absolute !important;
	border: 0 !important;
	height: 1px !important;
	width: 1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
}
body > script {
	display: none !important;
}
@media (max-width: 480px) {
	.no-small-screen {
		display: none;
	}
}
@media (min-width: 1024px) {
	.no-large-screen {
		display: none;
	}
}
/* ----------------------------- */

/* == browsers consistency       */

/* ----------------------------- */

/* avoid top margins on first content element */

p:first-child,
.p-like:first-child,
ul:first-child,
ol:first-child,
dl:first-child,
blockquote:first-child,
pre:first-child,
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
	margin-top: 0;
}
/* avoid margins on nested elements */

li p,
li .p-like,
li ul,
li ol {
	margin-top: 0;
	margin-bottom: 0;
}
/* max values */

img,
table,
td,
blockquote,
code,
pre,
textarea,
input,
video {
	max-width: 100%;
}
/* margin-bottom on tables */

table {
	margin-bottom: 2em;
}
/* ----------------------------- */

/* ==layout and modules          */

/* ----------------------------- */

/* float layout */

/* module, gains superpower "BFC" Block Formating Context */

.mod {
	overflow: hidden;
}
/* blocks that needs to be placed under floats */

.clear,
.line,
.row {
	clear: both;
}
/* blocks that must contain floats */

.clearfix:after,
.line:after {
	content: "";
	display: table;
	clear: both;
}
/* table layout */

.row {
	display: table;
	table-layout: fixed;
	width: 100%;
}
.row > *,
.col {
	display: table-cell;
	vertical-align: top;
}
/* inline-block */

.inbl {
	display: inline-block;
	vertical-align: top;
}
/* alignments (blocks and inline) */

/* ------------------------------ */

/* left (or starting) elements */

.left,
.start {
	float: left;
}
img.left,
img.start {
	margin-right: 1em;
}
/* right (or ending) elements */

.right,
.end {
	float: right;
}
img.right,
img.end {
	margin-left: 1em;
}
img.left,
img.right,
img.start,
img.end {
	margin-bottom: 0.5em;
}
.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.txtleft {
	text-align: left;
}
.txtright {
	text-align: right;
}
.txtcenter {
	text-align: center;
}

.wauto {
	width: auto;
}

/* Centrage (pour des listes et des formulaires) */
.centrage { width: 100%; overflow: hidden; }
	.centrage ul,
	.centrage fieldset { position: relative; float: left; left: 50%; }
		.centrage li,
		.centrage input { position: relative; display: inline; float: left; right: 50%; }

/*** Custom CSS by K ***/
/* Ratio Box */
/* --------- */
.ratio { 
	overflow: hidden;
	position: relative;
}

.ratio:before{
	content: "";
	display: block;
}

.ratioContent {
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
.r-1_1:before { padding-top: 100%;}
.r-2_1:before { padding-top: 50%;}
.r-1_2:before { padding-top: 200%;}
.r-4_3:before { padding-top: 75%;}
.r-3_4:before { padding-top: 133.3333%;}
.r-5_4:before { padding-top: 80%;}
.r-4_5:before { padding-top: 125%;}
.r-16_9:before { padding-top: 56.25%;}

/*** Specific CSS to the site ***/

/* log in */
.loginBox {
	max-width: 280px;
}
	.loginBox label { display: block;}

.alert { padding: 5px;}

input[type=text],
input[type=password],
textarea {
	padding: 5px;
	width: 100%;
}

.button {
	cursor: pointer;
	min-width: 50%;
	padding: 5px;
}
/* --- */

/** LAYOUT **/
/************/
h1,
h2,
h3 {
	line-height: 1.4;
	margin-bottom: 0.5em;
}

.highlightSection h1,
.intro h1 { margin: 0.25em 0;}

h3 { margin: 0.5em 0 0;}

a {text-decoration: none;}

header {
	overflow: hidden;
	padding: 1em 0;
	position: relative;
	text-align: center;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.page { min-height: 80%;}

.mainNav {
	font-size: 1.1111em;
	height: 120px;
	margin-top: -120px;
	overflow: hidden;
}

.mainNav li {
	float: left;
	line-height: 120px;
	width: 50%;

	text-align: right;
}
	.mainNav li a {
		margin: 0 4em 0 0;
	}

.mainNav li + li {
	text-align: left;
}
	.mainNav li + li a {
		margin: 0 0 0 4em; 
	}

.inner { margin: auto;}

.mixMediaMaxW,
.textMaxW,
p {
	margin-left: auto;
	margin-right: auto;
}
.mixMediaMaxW { max-width: 1100px;}
.textMaxW,
p { max-width: 664px;}

.cover { width: 100%;}
.projectBox { display: block;}

.prevNext {
	padding: 1em;
	position: fixed;
}

.prevPage { left: 0;}
.nextPage { right: 0;}

.prevNextGlyph {
	font-family: serif;
	font-size: 3em;
	position: relative; top: 6px;
}

.prevPage .prevNextPageTitle,
.nextPage .prevNextPageTitle { visibility: hidden;}
.prevPage:hover .prevNextPageTitle,
.nextPage:hover .prevNextPageTitle { visibility: visible;}

.titleLabelLeft,
.titleLabelRight
 {
	display: inline-block;
	font-size: 1.6rem;
	line-height: 1.6;
	position: relative;
}

.titleLabelLeft {
	padding: 2px 6px 0 20px;
	z-index: 10;
}
	.titleLabelLeft:after {
		content: url(../images/white-corner-top.png);
		left: 100%;
		position: absolute;
		top: -7px;
	}

.titleLabelRight {
	bottom: -10px;
	left: -10px;
	padding: 2px 20px 0 10px;
	z-index: 1;
}
	.titleLabelRight:before {
		content: url(../images/white-corner-bottom.png);
		position: absolute;
		right: 100%;
		top: 10px;
	}

.mosaic {
	position: relative;
}
.mosaic img {
	width: 100%;
}

/** footer **/
footer { 
	overflow: hidden;
	padding-top: 2em;
	text-align: center;
	width: 100%;

}
	.footerLinks {
		position: relative;
		float: left;
		left: 50%;
		margin-bottom: 0.5em;
	}
		.contactMe,
		.socialLinks {
			position: relative;
			display: inline;
			float: left;
			right: 50%;
		}

footer p {clear: both;}

.tab {
	padding: 0.5em 1em;
}

/* contact me */
.contactMe {
	background: url(../images/mail-icon.png) 100% 0 no-repeat;
	display: inline-block;
	float: left;
	line-height: 30px;
	margin: 0 30px 1em 0;
	padding-right: 35px;
}

.contactMe:hover {background-position: 100% -40px;}

/* social icons */
.socialLinks {overflow: hidden;}
.socialLinks span,
.socialIcons {
	float: left;
}
.socialLinks span {
	display: inline-block;
	line-height: 30px;
}

.socialIcons { margin: 0 0 0 0.5em;}

.socialIcons li {
	float: left;
	margin: 0 0.5em 0 0;
}
	.socialIcons li a {
		display: block;
		height: 30px;
		overflow: hidden;
		text-indent: 40px;
		width: 30px;
	}
	
	.socialFlickr a {
		background: url(../images/social-icons.png) -40px 0;
	}

	.socialFlickr a:hover {
		background-position: -40px -40px;
	}

	.socialPinterest a {
		background: url(../images/social-icons.png) -80px 0;
	}

	.socialPinterest a:hover {
		background-position: -80px -40px;
	}

	.socialTumblr a {
		background: url(../images/social-icons.png) -120px 0;
	}

	.socialTumblr a:hover {
		background-position: -120px -40px;
	}

/** STYLES **/
/************/

/* Font-family */
body {
	font-family: "adelle",sans-serif;
	font-style: normal;
	font-weight: 300;
}

h1,
h2 {
	font-family: "adelle",sans-serif;
	font-style: italic;
	font-weight: 400;
}

h3,
.h3-like,
.mainNav,
.footerMenu,
.titleLabelLeft,
.titleLabelRight,
.tab {
	font-family: "proxima-nova","Verdana",sans-serif;
	font-style: normal;
	text-transform: uppercase;
}

/* Colors */
body {
	color: #565158; /* dark grey */
}

a,
.mainNav .active {
	color: #d2963b; /* orange */
}

h1,
a:hover,
.mainNav a:hover {
	color: #ecb753; /* lighter orange */
}

.mainNav a {
	color: #353038; /* dark blue */
}

.alert {
	color: #7e0a0a; /* dark red */
}

.highlightSection,
.tab,
.footerMenu .active {
	color: #d6d5e0; /* light grey */
}

.projectBox p {
	color: #898c93; /* middle grey */
}

h2,
.prevNextPageTitle {
	color: #616773; /* dark blueish grey */
}

/* Background colors */
body,
.pageSection {
	background-color: #EFE5E4; /* beige */
}

.alert {
	background-color: #f9cccc; /* light red */
}

.highlightSection,
.tab,
.footerMenu {
	background-color: #353038; /* dark blue */
}

.lightSection,
header,
footer,
.projectBox,
.titleLabelLeft,
.titleLabelRight,
.projectPage .pageSection {
	background-color: #fff;
}

/* Borders */
input[type=text],
input[type=submit],
input[type=password],
textarea,
.loginBox,
.pageSection img {
	border: 1px solid;
}

footer {
	border-top: 1px solid;
}

.projectBox {
	border: 10px solid;
}

/* Border-color */
.projectBox {
	border-color: #fff;
}

footer {
	border-color: #ccc;
}

/* Border-radius */
/* 3px */
input[type=text],
input[type=submit],
input[type=password],
textarea {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

/* all round */
.roundImg {
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

/* shadow */
.pageSection img {
	-webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
}

/** responsive **/
/* orientation iOS font-size fix */
@media (orientation: landscape) and (max-device-width: 768px) {
	html,
	body {
		-webkit-text-size-adjust: 100%;
	}
}

/* grid system */
/* ----------- */
.oneWhole { width: 100%;}

.oneHalf,
.twoQuarters { width: 50%;}

.oneThird { width: 33.333%;}
.twoThirds { width: 66.666%;}

.oneQuarter { width: 25%;}
.threeQuarters { width: 75%;}

.oneFifth { width: 20%;}
.twoFifths { width: 40%;}
.threeFifhts { width: 60%;}
.fourFifths { width: 80%;}

/* helpers */
.pa0 { padding: 0;}
.pas { padding: 0.5em;}
.pam { padding: 1em;}
.pal { padding: 2em;}

.pt0 { padding-top: 0;}
.pts { padding-top: 0.5em;}
.ptm { padding-top: 1em;}
.ptl { padding-top: 2em;}

.pr0 { padding-right: 0;}
.prs { padding-right: 0.5em;}
.prm { padding-right: 1em;}
.prl { padding-right: 2em;}

.pb0 { padding-bottom: 0;}
.pbs { padding-bottom: 0.5em;}
.pbm { padding-bottom: 1em;}
.pbl { padding-bottom: 2em;}

.pl0 { padding-left: 0;}
.pls { padding-left: 0.5em;}
.plm { padding-left: 1em;}
.pll { padding-left: 2em;}

.ma0 { margin: 0;}
.mas { margin: 0.5em;}
.mam { margin: 1em;}
.mal { margin: 2em;}

.mt0 { margin-top: 0;}
.mts { margin-top: 0.5em;}
.mtm { margin-top: 1em;}
.mtl { margin-top: 2em;}

.mr0 { margin-right: 0;}
.mrs { margin-right: 0.5em;}
.mrm { margin-right: 1em;}
.mrl { margin-right: 2em;}

.mb0 { margin-bottom: 0;}
.mbs { margin-bottom: 0.5em;}
.mbm { margin-bottom: 1em;}
.mbl { margin-bottom: 2em;}

.ml0 { margin-left: 0;}
.mls { margin-left: 0.5em;}
.mlm { margin-left: 1em;}
.mll { margin-left: 2em;}


/* break points */
/* 0 < S < 700px < M < 1260px < L  */

.smallBox { max-width: 700px; background-color: blue;}
.mediumBox { max-width: 1100px; background-color: red;}

/* small */
@media only screen and (max-width: 700px) {
	.s-oneWhole { width: 100%;}

	.s-oneHalf,
	.s-twoQuarters { width: 50%;}

	.s-oneThird { width: 33.333%;}
	.s-twoThirds { width: 66.666%;}

	.s-oneQuarter { width: 25%;}
	.s-threeQuarters { width: 75%;}

	.s-oneFifth { width: 20%;}
	.s-twoFifths { width: 40%;}
	.s-threeFifhts { width: 60%;}
	.s-fourFifths { width: 80%;}

	/* unfloat */
	.s-unfloat {
		display: block;
		float: none;
	}

	img.left.s-unfloat {
		margin-right: auto;
	}

	img.right.s-unfloat {
		margin-left: auto;
	}

	/* text-align */
	.s-txtleft   { text-align: left; }
	.s-txtright  { text-align: right; }
	.s-txtcenter { text-align: center; }

	/* helpers */
	.s-pa0 { padding: 0;}
	.s-pas { padding: 0.5em;}
	.s-pam { padding: 1em;}
	.s-pal { padding: 2em;}

	.s-pt0 { padding-top: 0;}
	.s-pts { padding-top: 0.5em;}
	.s-ptm { padding-top: 1em;}
	.s-ptl { padding-top: 2em;}

	.s-pr0 { padding-right: 0;}
	.s-prs { padding-right: 0.5em;}
	.s-prm { padding-right: 1em;}
	.s-prl { padding-right: 2em;}

	.s-pb0 { padding-bottom: 0;}
	.s-pbs { padding-bottom: 0.5em;}
	.s-pbm { padding-bottom: 1em;}
	.s-pbl { padding-bottom: 2em;}

	.s-pl0 { padding-left: 0;}
	.s-pls { padding-left: 0.5em;}
	.s-plm { padding-left: 1em;}
	.s-pll { padding-left: 2em;}

	.s-ma0 { margin: 0;}
	.s-mas { margin: 0.5em;}
	.s-mam { margin: 1em;}
	.s-mal { margin: 2em;}

	.s-mt0 { margin-top: 0;}
	.s-mts { margin-top: 0.5em;}
	.s-mtm { margin-top: 1em;}
	.s-mtl { margin-top: 2em;}

	.s-mr0 { margin-right: 0;}
	.s-mrs { margin-right: 0.5em;}
	.s-mrm { margin-right: 1em;}
	.s-mrl { margin-right: 2em;}

	.s-mb0 { margin-bottom: 0;}
	.s-mbs { margin-bottom: 0.5em;}
	.s-mbm { margin-bottom: 1em;}
	.s-mbl { margin-bottom: 2em;}

	.s-ml0 { margin-left: 0;}
	.s-mls { margin-left: 0.5em;}
	.s-mlm { margin-left: 1em;}
	.s-mll { margin-left: 2em;}

	.prevNextPageTitle { display: none;}
	.prevNextGlyph { opacity: 0.5;}
}
/* medium */
@media only screen and (min-width: 701px) and (max-width: 1100px) {
	.m-oneWhole { width: 100%;}

	.m-oneHalf,
	.m-twoQuarters { width: 50%;}

	.m-oneThird { width: 33.333%;}
	.m-twoThirds { width: 66.666%;}

	.m-oneQuarter { width: 25%;}
	.m-threeQuarters { width: 75%;}

	.m-oneFifth { width: 20%;}
	.m-twoFifths { width: 40%;}
	.m-threeFifhts { width: 60%;}
	.m-fourFifths { width: 80%;}

	/* unfloat */
	.m-unfloat {
		display: block;
		float: none;
	}

	img.left.m-unfloat {
		margin-right: auto;
	}

	img.right.m-unfloat {
		margin-left: auto;
	}

	/* helpers */
	.m-pa0 { padding: 0;}
	.m-pas { padding: 0.5em;}
	.m-pam { padding: 1em;}
	.m-pal { padding: 2em;}

	.m-pt0 { padding-top: 0;}
	.m-pts { padding-top: 0.5em;}
	.m-ptm { padding-top: 1em;}
	.m-ptl { padding-top: 2em;}

	.m-pr0 { padding-right: 0;}
	.m-prs { padding-right: 0.5em;}
	.m-prm { padding-right: 1em;}
	.m-prl { padding-right: 2em;}

	.m-pb0 { padding-bottom: 0;}
	.m-pbs { padding-bottom: 0.5em;}
	.m-pbm { padding-bottom: 1em;}
	.m-pbl { padding-bottom: 2em;}

	.m-pl0 { padding-left: 0;}
	.m-pls { padding-left: 0.5em;}
	.m-plm { padding-left: 1em;}
	.m-pll { padding-left: 2em;}

	.m-ma0 { margin: 0;}
	.m-mas { margin: 0.5em;}
	.m-mam { margin: 1em;}
	.m-mal { margin: 2em;}

	.m-mt0 { margin-top: 0;}
	.m-mts { margin-top: 0.5em;}
	.m-mtm { margin-top: 1em;}
	.m-mtl { margin-top: 2em;}

	.m-mr0 { margin-right: 0;}
	.m-mrs { margin-right: 0.5em;}
	.m-mrm { margin-right: 1em;}
	.m-mrl { margin-right: 2em;}

	.m-mb0 { margin-bottom: 0;}
	.m-mbs { margin-bottom: 0.5em;}
	.m-mbm { margin-bottom: 1em;}
	.m-mbl { margin-bottom: 2em;}

	.m-ml0 { margin-left: 0;}
	.m-mls { margin-left: 0.5em;}
	.m-mlm { margin-left: 1em;}
	.m-mll { margin-left: 2em;}
}

/* large */
@media only screen and (min-width: 1101px) {
	.l-oneWhole { width: 100%;}

	.l-oneHalf,
	.l-twoQuarters { width: 50%;}

	.l-oneThird { width: 33.333%;}
	.l-twoThirds { width: 66.666%;}

	.l-oneQuarter { width: 25%;}
	.l-threeQuarters { width: 75%;}

	.l-oneFifth { width: 20%;}
	.l-twoFifths { width: 40%;}
	.l-threeFifhts { width: 60%;}
	.l-fourFifths { width: 80%;}

	/* helpers */
	.l-pa0 { padding: 0;}
	.l-pas { padding: 0.5em;}
	.l-pam { padding: 1em;}
	.l-pal { padding: 2em;}

	.l-pt0 { padding-top: 0;}
	.l-pts { padding-top: 0.5em;}
	.l-ptm { padding-top: 1em;}
	.l-ptl { padding-top: 2em;}

	.l-pr0 { padding-right: 0;}
	.l-prs { padding-right: 0.5em;}
	.l-prm { padding-right: 1em;}
	.l-prl { padding-right: 2em;}

	.l-pb0 { padding-bottom: 0;}
	.l-pbs { padding-bottom: 0.5em;}
	.l-pbm { padding-bottom: 1em;}
	.l-pbl { padding-bottom: 2em;}

	.l-pl0 { padding-left: 0;}
	.l-pls { padding-left: 0.5em;}
	.l-plm { padding-left: 1em;}
	.l-pll { padding-left: 2em;}

	.l-ma0 { margin: 0;}
	.l-mas { margin: 0.5em;}
	.l-mam { margin: 1em;}
	.l-mal { margin: 2em;}

	.l-mt0 { margin-top: 0;}
	.l-mts { margin-top: 0.5em;}
	.l-mtm { margin-top: 1em;}
	.l-mtl { margin-top: 2em;}

	.l-mr0 { margin-right: 0;}
	.l-mrs { margin-right: 0.5em;}
	.l-mrm { margin-right: 1em;}
	.l-mrl { margin-right: 2em;}

	.l-mb0 { margin-bottom: 0;}
	.l-mbs { margin-bottom: 0.5em;}
	.l-mbm { margin-bottom: 1em;}
	.l-mbl { margin-bottom: 2em;}

	.l-ml0 { margin-left: 0;}
	.l-mls { margin-left: 0.5em;}
	.l-mlm { margin-left: 1em;}
	.l-mll { margin-left: 2em;}
}

/* micro responsive adjustements */

/* very small screen */
@media only screen and (max-width: 400px) {
	.contactMe,
	.socialLinks {
		display: block;
		float: none;
		margin-bottom: 1em;
	}

	.contactMe {
		padding-right: 0;
	}
}

/* medium size screen */
@media only screen and (min-width: 600px) and (max-width: 980px) {
	.mAdjust-oneHalf { width: 50%;}
}