/*
	Static layout and responsive grid for the Interphase template.
	Keeps the original grid class names, but uses normal CSS media queries.
*/

/* Reset (based on the original template reset) */
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;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;-webkit-text-size-adjust:none;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}

/* Box model */
*, *:before, *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/* Container */
body {
	min-width: 320px;
}

.container {
	margin-left: auto;
	margin-right: auto;
	width: 1400px;
	max-width: calc(100% - 4em);
}

.container[class~="125%"] {
	width: 100%;
	max-width: 1750px;
}

.container[class~="75%"] {
	width: 1050px;
}

.container[class~="50%"] {
	width: 700px;
}

.container[class~="25%"] {
	width: 350px;
}

@media screen and (max-width: 1680px) {
	.container {
		width: 1200px;
	}

	.container[class~="125%"] { max-width: 1500px; }
	.container[class~="75%"] { width: 900px; }
	.container[class~="50%"] { width: 600px; }
	.container[class~="25%"] { width: 300px; }
}

@media screen and (max-width: 1280px) {
	.container {
		width: 960px;
	}

	.container[class~="125%"] { max-width: 1200px; }
	.container[class~="75%"] { width: 720px; }
	.container[class~="50%"] { width: 480px; }
	.container[class~="25%"] { width: 240px; }
}

@media screen and (max-width: 980px) {
	.container {
		width: 90%;
		max-width: none;
	}

	.container[class~="125%"],
	.container[class~="75%"],
	.container[class~="50%"],
	.container[class~="25%"] {
		width: 90%;
		max-width: none;
	}
}

/* Grid */
.row {
	border-bottom: solid 1px transparent;
	margin: 0 0 0 -2em;
}

.row:before,
.row:after {
	content: '';
	display: block;
	clear: both;
	height: 0;
}

.row > * {
	float: left;
	padding: 0 0 0 2em;
}

.row.uniform > * {
	padding-top: 2em;
}

.row.uniform {
	margin-top: -2em;
}

.row.uniform > * > :first-child {
	margin-top: 0;
}

.row.uniform > * > :last-child {
	margin-bottom: 0;
}

.row[class~="200%"] { margin-left: -4em; }
.row[class~="200%"] > * { padding-left: 4em; }
.row.uniform[class~="200%"] { margin-top: -4em; }
.row.uniform[class~="200%"] > * { padding-top: 4em; }

.row[class~="150%"] { margin-left: -1.5em; }
.row[class~="150%"] > * { padding-left: 1.5em; }
.row.uniform[class~="150%"] { margin-top: -1.5em; }
.row.uniform[class~="150%"] > * { padding-top: 1.5em; }

.row[class~="50%"] { margin-left: -1em; }
.row[class~="50%"] > * { padding-left: 1em; }
.row.uniform[class~="50%"] { margin-top: -1em; }
.row.uniform[class~="50%"] > * { padding-top: 1em; }

.row[class~="25%"] { margin-left: -0.5em; }
.row[class~="25%"] > * { padding-left: 0.5em; }
.row.uniform[class~="25%"] { margin-top: -0.5em; }
.row.uniform[class~="25%"] > * { padding-top: 0.5em; }

.row[class~="0%"] { margin-left: 0; }
.row[class~="0%"] > * { padding-left: 0; }
.row.uniform[class~="0%"] { margin-top: 0; }
.row.uniform[class~="0%"] > * { padding-top: 0; }

[class~="12u"], [class~="12u$"] { width: 100%; clear: none; }
[class~="11u"], [class~="11u$"] { width: 91.6666666667%; clear: none; }
[class~="10u"], [class~="10u$"] { width: 83.3333333333%; clear: none; }
[class~="9u"], [class~="9u$"] { width: 75%; clear: none; }
[class~="8u"], [class~="8u$"] { width: 66.6666666667%; clear: none; }
[class~="7u"], [class~="7u$"] { width: 58.3333333333%; clear: none; }
[class~="6u"], [class~="6u$"] { width: 50%; clear: none; }
[class~="5u"], [class~="5u$"] { width: 41.6666666667%; clear: none; }
[class~="4u"], [class~="4u$"] { width: 33.3333333333%; clear: none; }
[class~="3u"], [class~="3u$"] { width: 25%; clear: none; }
[class~="2u"], [class~="2u$"] { width: 16.6666666667%; clear: none; }
[class~="1u"], [class~="1u$"] { width: 8.3333333333%; clear: none; }

[class~="12u$"] + *, [class~="11u$"] + *, [class~="10u$"] + *, [class~="9u$"] + *,
[class~="8u$"] + *, [class~="7u$"] + *, [class~="6u$"] + *, [class~="5u$"] + *,
[class~="4u$"] + *, [class~="3u$"] + *, [class~="2u$"] + *, [class~="1u$"] + * {
	clear: left;
}

[class~="-11u"] { margin-left: 91.6666666667%; }
[class~="-10u"] { margin-left: 83.3333333333%; }
[class~="-9u"] { margin-left: 75%; }
[class~="-8u"] { margin-left: 66.6666666667%; }
[class~="-7u"] { margin-left: 58.3333333333%; }
[class~="-6u"] { margin-left: 50%; }
[class~="-5u"] { margin-left: 41.6666666667%; }
[class~="-4u"] { margin-left: 33.3333333333%; }
[class~="-3u"] { margin-left: 25%; }
[class~="-2u"] { margin-left: 16.6666666667%; }
[class~="-1u"] { margin-left: 8.3333333333%; }

@media screen and (max-width: 1280px) {
	.row {
		margin-left: -1.5em;
	}

	.row > * {
		padding-left: 1.5em;
	}

	.row.uniform {
		margin-top: -1.5em;
	}

	.row.uniform > * {
		padding-top: 1.5em;
	}

	.row[class~="200%"] { margin-left: -3em; }
	.row[class~="200%"] > * { padding-left: 3em; }
	.row.uniform[class~="200%"] { margin-top: -3em; }
	.row.uniform[class~="200%"] > * { padding-top: 3em; }

	.row[class~="150%"] { margin-left: -2.25em; }
	.row[class~="150%"] > * { padding-left: 2.25em; }
	.row.uniform[class~="150%"] { margin-top: -2.25em; }
	.row.uniform[class~="150%"] > * { padding-top: 2.25em; }

	.row[class~="50%"] { margin-left: -0.75em; }
	.row[class~="50%"] > * { padding-left: 0.75em; }
	.row.uniform[class~="50%"] { margin-top: -0.75em; }
	.row.uniform[class~="50%"] > * { padding-top: 0.75em; }

	.row[class~="25%"] { margin-left: -0.375em; }
	.row[class~="25%"] > * { padding-left: 0.375em; }
	.row.uniform[class~="25%"] { margin-top: -0.375em; }
	.row.uniform[class~="25%"] > * { padding-top: 0.375em; }
}

@media screen and (max-width: 980px) {
	[class~="12u(medium)"], [class~="12u$(medium)"] { width: 100%; clear: none; }
	[class~="11u(medium)"], [class~="11u$(medium)"] { width: 91.6666666667%; clear: none; }
	[class~="10u(medium)"], [class~="10u$(medium)"] { width: 83.3333333333%; clear: none; }
	[class~="9u(medium)"], [class~="9u$(medium)"] { width: 75%; clear: none; }
	[class~="8u(medium)"], [class~="8u$(medium)"] { width: 66.6666666667%; clear: none; }
	[class~="7u(medium)"], [class~="7u$(medium)"] { width: 58.3333333333%; clear: none; }
	[class~="6u(medium)"], [class~="6u$(medium)"] { width: 50%; clear: none; }
	[class~="5u(medium)"], [class~="5u$(medium)"] { width: 41.6666666667%; clear: none; }
	[class~="4u(medium)"], [class~="4u$(medium)"] { width: 33.3333333333%; clear: none; }
	[class~="3u(medium)"], [class~="3u$(medium)"] { width: 25%; clear: none; }
	[class~="2u(medium)"], [class~="2u$(medium)"] { width: 16.6666666667%; clear: none; }
	[class~="1u(medium)"], [class~="1u$(medium)"] { width: 8.3333333333%; clear: none; }

	[class~="12u$(medium)"] + *, [class~="11u$(medium)"] + *, [class~="10u$(medium)"] + *, [class~="9u$(medium)"] + *,
	[class~="8u$(medium)"] + *, [class~="7u$(medium)"] + *, [class~="6u$(medium)"] + *, [class~="5u$(medium)"] + *,
	[class~="4u$(medium)"] + *, [class~="3u$(medium)"] + *, [class~="2u$(medium)"] + *, [class~="1u$(medium)"] + * {
		clear: left;
	}
}

@media screen and (max-width: 736px) {
	.row {
		margin-left: -1.25em;
	}

	.row > * {
		padding-left: 1.25em;
	}

	.row.uniform {
		margin-top: -1.25em;
	}

	.row.uniform > * {
		padding-top: 1.25em;
	}

	.row[class~="200%"] { margin-left: -2.5em; }
	.row[class~="200%"] > * { padding-left: 2.5em; }
	.row.uniform[class~="200%"] { margin-top: -2.5em; }
	.row.uniform[class~="200%"] > * { padding-top: 2.5em; }

	.row[class~="150%"] { margin-left: -1.875em; }
	.row[class~="150%"] > * { padding-left: 1.875em; }
	.row.uniform[class~="150%"] { margin-top: -1.875em; }
	.row.uniform[class~="150%"] > * { padding-top: 1.875em; }

	.row[class~="50%"] { margin-left: -0.625em; }
	.row[class~="50%"] > * { padding-left: 0.625em; }
	.row.uniform[class~="50%"] { margin-top: -0.625em; }
	.row.uniform[class~="50%"] > * { padding-top: 0.625em; }

	.row[class~="25%"] { margin-left: -0.3125em; }
	.row[class~="25%"] > * { padding-left: 0.3125em; }
	.row.uniform[class~="25%"] { margin-top: -0.3125em; }
	.row.uniform[class~="25%"] > * { padding-top: 0.3125em; }

	[class~="12u(small)"], [class~="12u$(small)"] { width: 100%; clear: none; }
	[class~="11u(small)"], [class~="11u$(small)"] { width: 91.6666666667%; clear: none; }
	[class~="10u(small)"], [class~="10u$(small)"] { width: 83.3333333333%; clear: none; }
	[class~="9u(small)"], [class~="9u$(small)"] { width: 75%; clear: none; }
	[class~="8u(small)"], [class~="8u$(small)"] { width: 66.6666666667%; clear: none; }
	[class~="7u(small)"], [class~="7u$(small)"] { width: 58.3333333333%; clear: none; }
	[class~="6u(small)"], [class~="6u$(small)"] { width: 50%; clear: none; }
	[class~="5u(small)"], [class~="5u$(small)"] { width: 41.6666666667%; clear: none; }
	[class~="4u(small)"], [class~="4u$(small)"] { width: 33.3333333333%; clear: none; }
	[class~="3u(small)"], [class~="3u$(small)"] { width: 25%; clear: none; }
	[class~="2u(small)"], [class~="2u$(small)"] { width: 16.6666666667%; clear: none; }
	[class~="1u(small)"], [class~="1u$(small)"] { width: 8.3333333333%; clear: none; }

	[class~="12u$(small)"] + *, [class~="11u$(small)"] + *, [class~="10u$(small)"] + *, [class~="9u$(small)"] + *,
	[class~="8u$(small)"] + *, [class~="7u$(small)"] + *, [class~="6u$(small)"] + *, [class~="5u$(small)"] + *,
	[class~="4u$(small)"] + *, [class~="3u$(small)"] + *, [class~="2u$(small)"] + *, [class~="1u$(small)"] + * {
		clear: left;
	}
}

@media screen and (max-width: 480px) {
	[class~="12u(xsmall)"], [class~="12u$(xsmall)"] { width: 100%; clear: none; }
	[class~="11u(xsmall)"], [class~="11u$(xsmall)"] { width: 91.6666666667%; clear: none; }
	[class~="10u(xsmall)"], [class~="10u$(xsmall)"] { width: 83.3333333333%; clear: none; }
	[class~="9u(xsmall)"], [class~="9u$(xsmall)"] { width: 75%; clear: none; }
	[class~="8u(xsmall)"], [class~="8u$(xsmall)"] { width: 66.6666666667%; clear: none; }
	[class~="7u(xsmall)"], [class~="7u$(xsmall)"] { width: 58.3333333333%; clear: none; }
	[class~="6u(xsmall)"], [class~="6u$(xsmall)"] { width: 50%; clear: none; }
	[class~="5u(xsmall)"], [class~="5u$(xsmall)"] { width: 41.6666666667%; clear: none; }
	[class~="4u(xsmall)"], [class~="4u$(xsmall)"] { width: 33.3333333333%; clear: none; }
	[class~="3u(xsmall)"], [class~="3u$(xsmall)"] { width: 25%; clear: none; }
	[class~="2u(xsmall)"], [class~="2u$(xsmall)"] { width: 16.6666666667%; clear: none; }
	[class~="1u(xsmall)"], [class~="1u$(xsmall)"] { width: 8.3333333333%; clear: none; }

	[class~="12u$(xsmall)"] + *, [class~="11u$(xsmall)"] + *, [class~="10u$(xsmall)"] + *, [class~="9u$(xsmall)"] + *,
	[class~="8u$(xsmall)"] + *, [class~="7u$(xsmall)"] + *, [class~="6u$(xsmall)"] + *, [class~="5u$(xsmall)"] + *,
	[class~="4u$(xsmall)"] + *, [class~="3u$(xsmall)"] + *, [class~="2u$(xsmall)"] + *, [class~="1u$(xsmall)"] + * {
		clear: left;
	}
}

/* Mobile navigation */
#navButton,
#navPanel,
#navPanelOverlay {
	display: none;
}

@media screen and (max-width: 980px) {
	#navButton {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 6em;
		height: 4em;
		z-index: 10001;
	}

	#navPanel {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 250px;
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		-webkit-transform: translateX(-250px);
		-ms-transform: translateX(-250px);
		transform: translateX(-250px);
		-webkit-transition: -webkit-transform 0.35s ease;
		transition: transform 0.35s ease;
		z-index: 10002;
	}

	#navPanelOverlay {
		background: rgba(0, 0, 0, 0.35);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10000;
	}

	body.navPanel-visible {
		overflow: hidden;
	}

	body.navPanel-visible #navPanel {
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}

	body.navPanel-visible #navPanelOverlay {
		display: block;
	}
}