/*!
* 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 {
	margin: 0;
	padding: 0;
}
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.4em;
	background-color: #ffffff;
	color: #000000;
	font-family: Helvetica, Arial, sans-serif;
	line-height: 1.5;
}

/* 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.8rem;
}
h3,
.h3-like {
	font-size: 2.4rem;
}
h4,
.h4-like {
	font-size: 2rem;
}
h5,
.h5-like {
	font-size: 1.8rem;
}
h6,
.h6-like {
	font-size: 1.6rem;
}
/* alternate font-sizing */

.smaller {
	font-size: 0.71em;
}
.small {
	font-size: 0.86em;
}
.big {
	font-size: 1.14em;
}
.bigger {
	font-size: 1.29em;
}
.biggest {
	font-size: 1.43em;
}
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;
}

/*** Custom CSS by K ***/

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

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

/* 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%;}

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

/* small */
@media only screen and (max-width: 37em) {
	.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;}
}
/* medium */
@media only screen and (min-width: 37.06em) and (max-width: 55em) {
	.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: 55.06em) {
	.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;}
}

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

/** LAYOUT **/

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

	.loginBox label { display: block;}

.alert { padding: 5px;}

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

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

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

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