/* 
..............................................................

  Colophon

..............................................................

- Build by Hofstede
- http://hofstede.com.au
- @hofstededesign
.................................
	
- Lyon Black & Text
  by Atelier Carvalho Bernau
- http://www.carvalho-bernau.com/
- @at_cb
.................................
	
- Fonts served by Commercial
- http://commercialtype.com/
- @commercialtype
    
..............................................................*/


/* 
--------------------------------------------------------------
	Responsive Resets
--------------------------------------------------------------*/


@-o-viewport {
  width: device-width;
}
@-ms-viewport {
  width: device-width;
}
@viewport {
  width: device-width;
}

html {
  overflow-y: auto;
}

img,
audio,
video,
canvas,
object,
embed {
  max-width: 100%;
  height: auto;
}

object,embed{height:100%;}

img{-ms-interpolation-mode:bicubic;display:inline-block; border: 0; clear: left;}

/* 
---------------------------------------------------------------
	Global Resets
---------------------------------------------------------------*/

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure{position:relative}figure img{width:100%}


/* 
---------------------------------------------------------------
	Default Stuff
---------------------------------------------------------------*/

html {
	height: 101%;
 	font-size:100%;
 	font-weight:normal;
 	text-rendering: optimizeLegibility;
 	-webkit-font-smoothing: antialiased;
}
body {
	font-family: 'Lyon Text';
	background: #F0F8FF;
	color: #191970;

}
#wrap {
	width: 20em;
	height: 43.500em;
	position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -21.75em;
  margin-left: -10em;
	text-align: center;
}
#top, #bottom, #left, #right { background: #191970; position: fixed; }
#left, #right { top: 0; bottom: 0; width: 0em; }
#left { left: 0; }
#right { right: 0; }
#top, #bottom { left: 0; right: 0; height: 0em; }
#top { top: 0; }
#bottom { bottom: 0; }
span {display: inline-block;}
img { padding-bottom: 2.5em;}
/* 
---------------------------------------------------------------
	Fonts
---------------------------------------------------------------*/

@font-face {
	font-family: 'Lyon Text';
	src: url('/assets/fonts/Lyon Text Web-Regular.eot');
	src: url('/assets/fonts/Lyon Text Web-Regular.eot?#iefix') format('embedded-opentype'),
		   url('/assets/fonts/Lyon Text Web-Regular.woff') format('woff'),
		   url('/assets/fonts/Lyon Text Web-Regular.ttf') format('truetype'),
		   url('/assets/fonts/Lyon Text Web-Regular.svg#Lyon Text Web') format('svg');
	font-weight: normal;
	font-style: normal;
	font-stretch: normal;
}
@font-face {
	font-family: 'Tiempos Text Bold';
	src: url('/assets/fonts/TiemposText-Bold.eot');
	src: url('/assets/fonts/TiemposText-Bold.eot?#iefix') format('embedded-opentype'),
		   url('/assets/fonts/TiemposText-Bold.woff') format('woff'),
		   url('/assets/fonts/TiemposText-Bold.ttf') format('truetype'),
		   url('/fonts/TiemposText-Bold.svg#Tiempos Text Bold') format('svg');
	font-weight: normal;
	font-style: normal;
	font-stretch: normal;
}
/* 
---------------------------------------------------------------
	Typography
---------------------------------------------------------------*/

h1 {
	font-family: 'Tiempos Text Bold';
	font-size: 1.85em;
	line-height: 1;
	/*border-bottom: 6px solid #191970;*/
	margin-bottom: 1em;
	font-weight: normal;
}

p {
	font-size: 0.85em;
	line-height: 1.5;
}

p:first-of-type{
	padding-bottom: 2.5em;
	text-decoration: underline;
}

a {
	font-size: 0.85em;
	line-height: 1.5;
	color: #191970;
}

a:hover {
	color: #0000EE;
}

/* 
---------------------------------------------------------------
	Media Queries
---------------------------------------------------------------*/

@media only screen 
and (max-width : 480px)
and (min-width : 320px) {
#wrap {
	width: 100%;
	max-width: 320px;
	margin-top: -31.5em;
	margin-left: -11.5em;
  padding: 0 1.125em;
}
}

@media only screen 
and (max-device-width : 480px)
and (min-device-width : 320px) {
	width: 80%;
	max-width: 300px;
	margin: 0 auto;
  padding: 0 1.25em;
  border: 1px solid red;
}