/* For Desktop and Tablet Browsers */
@media only screen and (min-width : 1001px)
{

	/* GENERAL & TYPOGRAPHY */

	@font-face
	{
		font-family: "Hybrea";
		src: url('/otf/hybrea.otf');
	}

	@font-face
	{
		font-family: "Hybrea Light";
		src: url('/otf/hybrealight.otf');
	}

	body
	{
		margin: 0px;
		padding: 0px;
		background-color: #eee;
		font-family: "Open Sans", Arial, Helvetica, sans-serif;
		font-size: 16px;
		line-height: 1.5em;
		letter-spacing: 0.1ex;
		color: #333;
	}

	h1, h2, h3, h4
	{
		font-family: "Hybrea", "Open Sans", Arial, Helvetica, sans-serif;
		font-weight: normal;
		margin: 0px;
		padding: 0px;
		color: #333;
		line-height: 1.8ex;
	}

	h5 {
		font-weight: normal;
	}

	h1
	{
		float: left;
		width: 123px;
		height: 59px;
		margin: 25px 0px 25px 0px;
	}

	h1 a
	{
		display: block;
		width: 123px;
		height: 59px;
		background-image: url(../img/logo.png);
		text-indent: -9999px;
		margin: 0px;
	}

	h2, hr
	{
		display: none;
	}

	a
	{
		color: inherit;
		text-decoration: none;
	}

	p, address {
		font-style: normal;
		margin: 0px;
	}

	pre {
		font-family: "Cascadia code", monospace;
		src: url('/otf/CascadiaMono-Regular.otf');
		font-size: 14px;
		background-color: inherit;
	}

	.purple {
		color: #702963;
	}

	.orange {
		color: #CD7F32;
	}

	.teal {
		color: #008080;
	}

	.grey {
		color:#818589;
	}

	.content
	{
		position: relative;
		width: 1000px;
		margin: 0px auto 0px auto;
		overflow: hidden;
	}

	/* HEADER */

	#header
	{
		background-color: #333;
		overflow: hidden;
		color: #fff;
		text-transform: uppercase;
	}

	#header ol#navigation
	{
		position: absolute;
		bottom: 25px;
		left: 235px;
		float: left;
		margin: 0px;
		padding: 0px;
		list-style-type: none;
		overflow: hidden;
	}

	#header ol#navigation li
	{
		float: left;
	}

	#header ol#navigation li a
	{
		display: block;
		padding: 0px 15px 0px 15px;
		border-bottom: solid 1px #fff;
	}

	#header ol#navigation li a:hover
	{
		color: #ee2148;
		border-color: #ee2148;
	}

	#header ol#navigation li a.currentPage
	{
		color: #ee2148;
		border-color: #ee2148;
	}

	#header ol#navigation li:last-of-type a
	{
		padding-right: 0px;
	}

	#header ol#navigation li:first-of-type a
	{
		padding-left: 0px;
	}

	#header ol#sociallinks
	{
		position: absolute;
		bottom: 25px;
		right: 0px;
		float: left;
		margin: 0px;
		padding: 0px;
		list-style-type: none;
		overflow: hidden;
	}

	#header ol#sociallinks li
	{
		float: left;
	}

	#header ol#sociallinks li a
	{
		display: block;
		width: 32px;
		height: 32px;
		text-indent: -9999px;
		margin-left: 5px;
	}

	#header ol#sociallinks li:first-of-type a
	{
		background-image: url(../img/twitter.png);
	}

	#header ol#sociallinks li:last-of-type a
	{
		background-image: url(../img/facebook.png);
	}

	/* CONTENT */

	#content
	{
		background-color: #d3dce6;
		background-image: url(../img/bg.jpg);
		background-position: 0% 100%;
		background-repeat: no-repeat;
		overflow: hidden;
	}

	#content h2#webelieve
	{
		display: block;
		text-align: center;
		font-family: "Hybrea", "Open Sans", Arial, Helvetica, sans-serif;
		font-size: 300%;
		padding: 225px 0px 55px 0px;
		color: #fff;
		background: transparent url(../img/fogeli.png) no-repeat 70% 60px;
	}

	#content .instance
	{
		width: 308px;
		float: left;
		text-align: justify;
	}

	#content #statement
	{
		background-color: #fff;
		overflow: hidden;
		padding: 25px;
		margin-bottom: 200px;
		opacity: 0.9;
	}

	#content #statement .instance
	{
		margin-right: 25px;
	}

	#content #statement .instance p
	{
		margin: 25px 25px 0px 25px;
	}

	#content #statement .instance h3
	{
		font-size: 200%;
		border-bottom: solid 5px #21b2ee;
		padding: 0px 0px 15px 25px;
	}

	#content #statement .instance:first-of-type h3
	{
		border-color: #ee2148;
	}

	#content #statement .instance:last-of-type h3
	{
		border-color: #c3f323;
	}


	/* PRODUCT */

	#product .instance
	{
		width: 487px;
		background-color: #333;
		color: #fff;
		margin: 50px 25px 50px 0px;
	}

	#product .instance:last-of-type
	{
		margin-right: 0px;
	}

	#product .instance p
	{
		margin: 25px;
	}

	#product .instance h3
	{
		font-family: "Hybrea", "Open Sans", Arial, Helvetica, sans-serif;
		background-color: #fff;
		padding: 15px 25px 15px 25px;
	}

	/* SUBJECT CONTENT */

	#subjectcontent
	{
		background-color: #fff;
		background-position: 0% 100%;
		background-repeat: no-repeat;
		overflow: hidden;
		padding: 0px 0px 50px 0px;
	}

	#subjectcontent.nomenu
	{
		padding: 50px 0px 50px 0px;
	}

	#subjectcontent ol#pagenavigation
	{
		margin: 0px auto 25px auto;
		padding: 15px 0px 15px 0px;
		list-style-type: none;
		overflow: hidden;
		background-color: #d3dce6;
		font-size: 85%;
		/*width: 450px;*/
		text-align: center;
	}

	#subjectcontent ol#pagenavigation li
	{
		display: inline;
	}

	#subjectcontent ol#pagenavigation li.title
	{
		font-family: "Hybrea", "Open Sans", Arial, Helvetica, sans-serif;
		margin-left: 50px;
	}

	#subjectcontent ol#pagenavigation li.title:first-of-type
	{
		margin-left: 0px;
	}

	#subjectcontent ol#pagenavigation li a
	{
		text-transform: uppercase;
		margin: 0px 5px 0px 5px;
		padding: 5px;
	}

	#subjectcontent h3
	{
		font-family: "Hybrea", "Open Sans", Arial, Helvetica, sans-serif;
		font-size: 200%;
		margin-bottom: 5px;
	}

	#subjectcontent h4
	{
		font-size: 150%;
		margin-bottom: 15px;
		color: #789;
	}

	#subjectcontent .instance strong
	{
		display: block;
		font-size: 100%;
		margin-bottom: 15px;
		color: #789;
		font-family: "Hybrea Light", "Open Sans", Arial, Helvetica, sans-serif;
		font-weight: normal;
	}

	#subjectcontent .blog strong
	{
		display: block;
		font-size: 125%;
		margin-bottom: 15px;
		margin-left: 25px;
		color: #789;
		font-family: "Hybrea", "Open Sans", Arial, Helvetica, sans-serif;
		font-weight: normal;
	}

	#subjectcontent .instance
	{
		background-color: #eee;
		padding: 25px;
		margin-bottom: 25px;
		overflow: hidden;
	}

	#subjectcontent .instance.industrial
	{
		background-color: #d3dce6;
		padding: 25px;
		margin-bottom: 25px;
	}

	#subjectcontent .instance.creative
	{
		background-color: #d3dce6;
		padding: 25px;
		margin-bottom: 25px;
	}

	#subjectcontent .instance.team
	{
		background-color: #d3dce6;
		padding: 25px;
		margin-bottom: 25px;
	}

	#subjectcontent p
	{
		margin-bottom: 0px;
		overflow: hidden;
	}

	#subjectcontent .instance .illustration
	{
		width: 200px;
		height: 200px;
		background-color: #fff;
		float: left;
		margin-right: 25px;
		border-radius: 100px;
	}

	#subjectcontent .blog .illustration
	{
		width: 200px;
		height: 200px;
		background-color: #fff;
		float: left;
		margin-right: 25px;
		margin-left: 25px;
		border-radius: 100px;
	}

	#subjectcontent .instance#strix .illustration
	{
		background-image: url(../img/i-strix.jpg);
	}

	#subjectcontent .instance#olvaldi .illustration
	{
		background-image: url(../img/i-olvaldi.jpg);
	}

	#subjectcontent .instance#peregrine .illustration
	{
		background-image: url(../img/i-peregrine.jpg);
	}

	#subjectcontent .instance#osprey .illustration
	{
		background-image: url(../img/i-development.jpg);
	}

	#subjectcontent .instance#arge .illustration
	{
		background-image: url(../img/i-development.jpg);
	}

	#subjectcontent .instance .logo
	{
		width: 200px;
		height: 200px;
		background-color: #fff;
		float: left;
		margin-right: 25px;
		background-repeat: no-repeat;
		background-position: 50% 50%;
		border-radius: 100px;
	}

	#subjectcontent .instance.reference {
		width: 441px;
		float: left;
		margin-right: 15px;
		margin-bottom: 15px;
	}

	#subjectcontent .instance.reference.even {
		margin-right: 0px;
	}

	#subjectcontent .instance.reference.large {
		margin-right: 0px;
		width: 947px;
	}


	#subjectcontent .instance.reference.creative {
		margin-right: 0px;
		width: 947px;
		height: 250px;
		position: relative;
	}

	/*
	#subjectcontent .instance.reference.creative h3 {
	}
	*/

	#subjectcontent .instance.reference.creative .textholder {
		width: 400px;
		color: #000;
		position: absolute;
		background-color: #fff;
		padding: 15px;
		box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
		opacity: 0.9;
	}

	#subjectcontent .instance.reference.creative .textholder strong {
		font-family: "Open Sans", Arial, Helvetica, sans-serif;
	}


	#subjectcontent #crea_wood { background: transparent url(../img/portfolio/woodpecker.png) no-repeat 0px 0px; }
	#subjectcontent #crea_wood  .textholder { left: 25px; top: 25px;}
	#subjectcontent #crea_spirit { background: transparent url(../img/portfolio/noblespirit.png) no-repeat 0px 0px; }
	#subjectcontent #crea_spirit  .textholder { right: 25px; bottom: 25px;}
	#subjectcontent #crea_kimchi { background: transparent url(../img/portfolio/mariachis.png) no-repeat 0px 0px; }
	#subjectcontent #crea_kimchi  .textholder { left: 25px; top: 25px;}
	#subjectcontent #crea_cali { background: transparent url(../img/portfolio/californicator.png) no-repeat 0px 0px; }
	#subjectcontent #crea_cali  .textholder { right: 25px; bottom: 25px; }
	#subjectcontent #crea_synd { background: transparent url(../img/portfolio/syndicator.png) no-repeat 0px 0px; }
	#subjectcontent #crea_synd  .textholder { left: 25px; bottom: 25px;}
	#subjectcontent #crea_film_what { background: transparent url(../img/portfolio/whatsthedifference.png) no-repeat 0px 0px; }
	#subjectcontent #crea_film_what  .textholder { right: 25px; bottom: 25px;}
	#subjectcontent #crea_film_mom { background: transparent url(../img/portfolio/yourmom.png) no-repeat 0px 0px; }
	#subjectcontent #crea_film_mom  .textholder { left: 25px; top: 25px;}
	#subjectcontent #crea_film_sas { background: transparent url(../img/portfolio/sas.png) no-repeat 0px 0px; }
	#subjectcontent #crea_film_sas  .textholder { right: 25px; bottom: 25px;}


	#subjectcontent .instance#vtt .logo
	{
		background-image: url(../img/l-vtt.png);
	}

	#subjectcontent .instance#meedoc .logo
	{
		background-image: url(../img/l-meedoc.png);
	}


	#subjectcontent .instance#mikes .logo
	{
		background-image: url(../img/l-mikes.png);
	}

	#subjectcontent .instance#metso .logo
	{
		background-image: url(../img/l-metso.png);
	}

	#subjectcontent .instance#holvi .logo
	{
		background-image: url(../img/l-holvi.png);
	}
*
	#subjectcontent .instance#momentti .logo
	{
		background-image: url(../img/l-momentti.png);
	}

	#subjectcontent .instance#aalto .logo
	{
		background-image: url(../img/l-aalto.png);
	}

	#subjectcontent .instance#helsinki .logo
	{
		background-image: url(../img/l-helsinkiuni.png);
	}

	#subjectcontent .instance#woodpecker .logo
	{
		background-image: url(../img/l-woodpecker.png);
	}

	#subjectcontent .instance#codeex .logo
	{
		background-image: url(../img/l-codeex.png);
	}

	#subjectcontent .instance#analysis .illustration
	{
		background-image: url(../img/i-analysis.jpg);
	}

	#subjectcontent .instance#automation .illustration
	{
		background-image: url(../img/i-automation.jpg);
	}

	#subjectcontent .instance#development .illustration
	{
		background-image: url(../img/i-development.jpg);
	}

	#subjectcontent .instance#conceptual .illustration
	{
		background-image: url(../img/i-conceptual.jpg);
	}

	#subjectcontent .instance#machining .illustration
	{
		background-image: url(../img/i-implementation.jpg);
	}

	#subjectcontent .instance#assembly .illustration
	{
		background-image: url(../img/i-peregrine.jpg);
	}

	#subjectcontent .instance#imaging .illustration
	{
		background-image: url(../img/i-imaging.jpg);
	}

	/* Design Rules */
	#subjectcontent .instance#icr .illustration
	{
		background-image: url(../img/designrules/icr.jpg);
	}

	#subjectcontent .instance#slotwidth .illustration
	{
		background-image: url(../img/designrules/slotwidth.jpg);
	}

	#subjectcontent .instance#aspectratio .illustration
	{
		background-image: url(../img/designrules/aspectratio.jpg);
	}

	#subjectcontent .instance#wallthickness .illustration
	{
		background-image: url(../img/designrules/wallthickness.jpg);
	}

	#subjectcontent .instance#holesize .illustration
	{
		background-image: url(../img/designrules/holesize.jpg);
	}

	#subjectcontent .instance#threading .illustration
	{
		background-image: url(../img/designrules/threading.jpg);
	}

	#subjectcontent .instance#overallsize .illustration
	{
		background-image: url(../img/designrules/overallsize.jpg);
	}

	#subjectcontent .instance#edgechamfer .illustration
	{
		background-image: url(../img/designrules/edgechamfer.jpg);
	}

	#subjectcontent .instance#tolerances .illustration
	{
		background-image: url(../img/designrules/tolerances.jpg);
	}

	/* Design Rules end */

	#subjectcontent .instance .individual
	{
		width: 200px;
		height: 200px;
		float: left;
		margin-right: 25px;
		background-repeat: no-repeat;
		border-radius: 100px;

	}

	#subjectcontent .instance#markus .individual
	{
		background-image: url(../img/p-markus.png);
	}

	#subjectcontent .blog h3
	{
		display: block;
		margin: 0px 25px 25px 25px;
	}

	#subjectcontent .blog h4
	{
		display: block;
		margin: 0px 25px 25px 25px;
	}

	#subjectcontent .blog p
	{
		margin: 0px 25px 25px 25px;
		text-align: justify;
	}

	#subjectcontent .blog
	{
		padding: 50px 0px 50px 0px;
	}

	#subjectcontent .blog ol#blogmenu
	{
		float: right;
		width: 200px;
		margin: 0px 25px 25px 25px;
		background-color: #d3dce6;
		list-style-type: none;
		padding: 25px;
	}

	#subjectcontent .blog ol#blogmenu li
	{
		margin-bottom: 25px;
	}

	#subjectcontent .blog ol#blogmenu li strong
	{
		margin: 0px;
		font-size: 65%;
	}

	#subjectcontent .blog ol#blogmenu li.title
	{
		font-family: "Hybrea", "Open Sans", Arial, Helvetica, sans-serif;
	}

	#subjectcontent.license .content
	{
		width: 950px;
	}

	#subjectcontent.license .content h3
	{
		margin-bottom: 25px;
	}

	#subjectcontent.license .content h4
	{
		margin-bottom: 25px;
	}

	#subjectcontent.license .content p
	{
		margin-bottom: 25px;
	}

	/* FOOTER */

	#footer
	{
		font-size: 85%;
		overflow: hidden;
	}

	#footer h5 {
		font-size: 100%;
	}

	#footer .instance
	{
		margin-top: 25px;
		width: 200px;
		float: left;
		margin-bottom: 50px;
	}

	#footer .license
	{
		clear: both;
		text-align: center;
		padding-bottom: 50px;
	}

	#pagenavigation li a:hover
	{
		text-decoration: underline;
	}

	.hoverable:hover
	{
		text-decoration: underline;
	}

}

/* Mobile Browsers */
@media only screen and (min-width : 0px) and (max-width : 1000px)
{

	@font-face
	{
		font-family: "Hybrea";
		src: url('/otf/hybrea.otf');
	}

	@font-face
	{
		font-family: "Hybrea Light";
		src: url('/otf/hybrealight.otf');
	}

	body
	{
		margin: 0px;
		padding: 0px;
		background-color: #eee;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 100%;
		line-height: 1.5em;
		letter-spacing: 0.1ex;
		color: #333;
	}

	h1
	{
		width: 123px;
		height: 59px;
		margin: 15px 0px 15px 15px;
	}

	h1 a
	{
		display: block;
		width: 123px;
		height: 59px;
		background-image: url(../img/logo.png);
		text-indent: -9999px;
		margin: 0px;
	}

	a
	{
		color: inherit;
		text-decoration: none;
	}

	hr, h2
	{
		display: none;
	}

	h1, h2, h3, h4
	{
		font-family: "Hybrea", "Open Sans", Arial, Helvetica, sans-serif;
		font-weight: normal;
		color: #333;
	}

	pre {
		font-family: "Cascadia code", monospace;
		font-size: 14px;
		background-color: inherit;
		overflow-x:scroll;
	}

	.purple {
		color: #702963;
	}

	.orange {
		color: #CD7F32;
	}

	.teal {
		color: #008080;
	}

	.grey {
		color:#818589;
	}

	#header
	{
		background-color: #333;
		overflow: hidden;
		color: #fff;
		text-transform: uppercase;
		overflow: hidden;
	}

	#header ol
	{
		list-style-type: none;
		margin: 15px 0px 15px 15px;
		padding: 0px;
		overflow: hidden;
	}

	#header li {
		float: left;
		margin-right: 15px;
	}

	#subjectcontent, #content
	{
		padding: 0px 15px 25px 15px;
		background-color: #fff;
		overflow: hidden;
	}

	#product
	{
		border-top: solid 3px #d3dce6;
	}

	#subjectcontent strong
	{
		color: #789;
	}

	#subjectcontent ol
	{
		list-style-type: none;
		margin: 0px 0px 15px 0px;
		padding: 0px 0px 15px 0px;
		border-bottom: solid 3px #d3dce6;
	}

	#subjectcontent ol li
	{
		list-style-type: none;
	}

	ol li.title
	{
		font-family: "Hybrea Light", "Open Sans", Arial, Helvetica, sans-serif;
		margin-top: 15px;
	}

	#header #sociallinks
	{
		display: none;
	}

	.instance h3
	{
		margin-bottom: 0px;
	}

	#blogmenu strong
	{
		display: block;
		margin-top: 15px;
	}

	#footer
	{
		font-size: 85%;
		overflow: hidden;
		padding: 25px 25px 25px 25px;
	}

	#footer h5 {
		font-size: 100%;
		margin: 15px 0px 15px 0px;
		padding: 0px;
	}

	#footer .instance
	{
		margin-top: 0px;
		width: 200px;
	}

	#footer p, #footer address
	{
		margin-bottom: 0px;
		margin-top: 15px;
		font-style: normal;
	}

}