---
---
{% include base.html %}
/*! Index page */
@font-face {
 font-family: futura;
 src: url('{{ base }}/assets/fonts/free_avantgarde.woff');
}
@font-face {
 font-family: futurabold;
 src: url('{{ base }}/assets/fonts/free_avantgardeBOLD.woff');
}
html{
 -webkit-transition:.5s background;
 transition:.5s background;
 font-family: futurabold, Helvetica, Arial, sans-serif, sans;
 font-size: 1em;
 background: rgba(0,76,255,1);
}
body, p{
 margin:0;
 background: rgba(0,76,255,1);
}
h1,
h2,
h3,
h4 {
 font-weight:bold;
 text-transform: uppercase;
}

b,
strong {
 font-weight:bold;
}
a:link,
a:visited,
a:hover,
a:active,
a:focus {
 text-decoration: none;
  -webkit-transition:.6s background;
  transition:.6s background;
}
a,
a:link,
a:visited {
  color: #fff;
 -webkit-transition-property: hover;
 -webkit-transition: color 0.15s ease-in-out;
 -moz-transition: color 0.15s linear 0s; /* firefox 4 */
 -o-transition-property: color; /* opera 10.5 */
 -o-transition-duration: 0.15s;
}
a:hover {
 color: rgba(0,76,255,0.9);
}
a:active {
 color: #f00;
}
.vignette {
float: left;
width:320px;
min-width:320px;
height:320px;
background:no-repeat;
background-size: 370px;
 background-color: rgba(255,0,76,.0);
 box-shadow: 1px 0px 37px rgba(255,0,76,.1),
	    -1px 0px 37px rgba(255,0,76,.1),
             0px -1px 37px rgba(255,0,76,.1),
	     0px 1px 37px rgba(255,0,76,.1);
}
#picker {

}
#picker p {
 position:relative;
width:77%;
 height: 77%;
 margin: auto;
 padding: 17px;
 border-radius: 2px;
 background: rgba(0,76,255,0);
 color:rgba(215,215,215,0.3);
 -webkit-transition-property: hover;
 -webkit-transition: background 0.15s ease-in-out;
 -moz-transition: background 0.15s linear 0s; /* firefox 4 */
 -o-transition-property: background; /* opera 10.5 */
 -o-transition-duration: 0.15s;

 line-height: 1.3em;
 letter-spacing: -0.1em;
}
#picker p:hover{
 background: rgba(255,0,0,.7);
 color: #d7d7d7;
}
strong {
font-size:2em;
}
.title{
  text-shadow: 1px 0px 2px rgba(0,76,255,.5),
	    -1px 0px 2px rgba(0,76,255,.5),
             0px -1px 2px rgba(0,76,255,.5),
	     0px 1px 2px rgba(0,76,255,.5);
}
#pagetitle {
 z-index: 100;
 text-transform: none;
 position: fixed; bottom: 10px; left:17px;
 font-size:2.5em;
 letter-spacing:-.05em;
 line-height: .95em;
 color:rgba(119,119,119,0);
 background-color:rgba(255,0,76,.5);
 box-shadow: 1px 0px 27px rgba(255,0,76,.1),
	    -1px 0px 27px rgba(255,0,76,.1),
             0px -1px 27px rgba(255,0,76,.1),
	     0px 1px 27px rgba(255,0,76,.1);
 padding:7px;
 border-radius: 2px;
}
h1:hover{
  text-shadow: 1px 0px 0px rgba(0,76,255,.5),
	    -1px 0px 0px rgba(0,76,255,.5),
             0px -1px 0px rgba(0,76,255,.5),
	     0px 1px 0px rgba(0,76,255,.5);
 -webkit-transition-property: hover;
 -webkit-transition: text-shadow 0.3s ease-in-out;
 -moz-transition: text-shadow 0.3s linear 0s; /* firefox 4 */
 -o-transition-property: text-shadow; /* opera 10.5 */
 -o-transition-duration: 0.3s;

}
#navigation {
 position: fixed; bottom: 130px; left:17px;
 z-index: 10;
}
{% include navmenu.css %}