/*
// CSS3 Flexbox Flexible Box Layouts
// Made with ❤ by @Pawan_Mall
// http://www.pawanmall.net
*/
@import url(https://fonts.googleapis.com/css?family=Architects+Daughter|Open+Sans|Raleway);

body{
  margin:auto;
  width:98%;
  height:100%;
  font-family: 'Open Sans', sans-serif;
  background: #031927 url("http://www.bloodrites.net/images/custom/charcoal-hush2.png") repeat scroll 0 0;
}
body > div{
  /*background: rgba(16, 16, 16, 0.5) none repeat scroll 0 0;*/
}

body > div > header, nav, main, aside, footer{
  color: #f0f0f0;
  font-size: 1.3em;
  /*text-shadow: 2px 2px 6px #000;*/
  text-align: center;
  background: #11162a;
  /*background: linear-gradient(#999, #333);*/
  border-radius:7px;
  margin:10px;
  padding:20px;
  border: 3px rgba(16,16,16,.5) solid;
}

h1, h2, h3, h4, h5 {
  font-family:'Raleway', cursive;
  font-weight:600; /*semi-bold*/
}
h1 {display:block; font-size: 2em;}
h2 {display:block; font-size: 1.8em;}
h3 {display:block; font-size: 1.6em;}
h4 {display:block; font-size: 1.5em;}
h5 {display:block; font-size: 1.4em;}

header {
  line-height: 1em;
}
header h1 {
  margin:.2em;
}
header div{
  font-size:.8em;
  font-style: italic;
}

main {
  width: 77%;
  float: right;
}
aside {
  font-size:1.1em;
  width: 13%;
  float: left;
  position: fixed;
}
footer {
  clear:both;
}

ul {
  list-style-type:α
}
li:before {
  /*content:"\u03b1";*/
  /*https://css-tricks.com/snippets/html/glyphs/*/
  content: '\0398\a0';
  font-size: .5em;
}
li {
  list-style:none;
  text-indent: -2em;
}

ul#filter {
  float: left;
  font-size: 16px;
  list-style: none;
  margin-left: 0;
  width: 90%;
  word-wrap: normal;
}
ul#filter li {
  border-right: 1px solid #dedede;
  float: left;
  line-height: 16px;
  margin-right: 10px;
  padding-right: 10px;
  text-indent: 0;
}
ul#filter li:before {
  content: '';
}
ul#filter li:last-child { border-right: none; margin-right: 0; padding-right: 0; }
/*ul#filter a { color: #999; text-decoration: none; }*/
ul#filter li.current a, ul#filter a:hover { text-decoration: underline; }
ul#filter li.current a { color: #3b585d; font-weight: bold; }

a, a:visited {
  color: #b9cdc4;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  color: #989898;
}

#main-content {
  min-height: 600px;
  text-align: center;
}

.clear {
  clear:both;
}

.flex-grid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.inner-award {
	margin: 20px;
}

@media (max-width: 400px) {
  .flex-grid {
    display: block;
  }
}

/*jewel gradients*/
.white.rose {
  background-image: linear-gradient(
      to bottom right,
      #f2f4f4 10%,
      #8e2c5f 15%,
      transparent 40%
    );
}
.yellow.tigereye{
  background-image: linear-gradient(
      to bottom right,
      #c5cf4b 10%,
      #7d3f03 15%,
      transparent 40%
    );
}
.yellow.summersky{
  background-image: linear-gradient(
      to bottom right,
      #c5cf4b 10%,
      #66a2b8 15%,
      transparent 40%
    );
}
.tigereye.rose{
  background-image: linear-gradient(
      to bottom right,
      #7d3f03 10%,
      #8e2c5f 15%,
      transparent 40%
    );
}
.rose.bloodopal{
  background-image: linear-gradient(
      to bottom right,
      #8e2c5f 10%,
      #e25904 15%,
      transparent 40%
    );
}
.summersky.purpledusk{
  background-image: linear-gradient(
      to bottom right,
      #66a2b8 10%,
      #3e267b 15%,
      transparent 40%
    );
}
.summersky.opal{
  background-image: linear-gradient(
      to bottom right,
      #66a2b8 10%,
      #4e957b 15%,
      transparent 40%
    );
}
.summersky.bloodopal{
  background-image: linear-gradient(
      to bottom right,
      #66a2b8 10%,
      #e25904 15%,
      transparent 40%
    );
}
.summersky.green{
  background-image: linear-gradient(
      to bottom right,
      #66a2b8 10%,
      #34622e 15%,
      transparent 40%
    );
}
.purpledusk.green{
  background-image: linear-gradient(
      to bottom right,
      #3e267b 10%,
      #34622e 15%,
      transparent 40%
    );
}
.purpledusk.sapphire{
  background-image: linear-gradient(
      to bottom right,
      #3e267b 10%,
      #0a0a52 15%,
      transparent 40%
    );
}
.opal.sapphire{
  background-image: linear-gradient(
      to bottom right,
      #4e957b 10%,
      #0a0a52 15%,
      transparent 40%
    );
}
.opal.red{
  background-image: linear-gradient(
      to bottom right,
      #4e957b 10%,
      #7a0000 15%,
      transparent 40%
    );
}
.bloodopal.red{
  background-image: linear-gradient(
      to bottom right,
      #e25904 10%,
      #7a0000 15%,
      transparent 40%
    );
}
.green.sapphire {
  background-image: linear-gradient(
      to bottom right,
      #34622e 10%,
      #0a0a52 15%,
      transparent 40%
    );
}
.green.red {
  background-image: linear-gradient(
      to bottom right,
      #34622e 10%,
      #7a0000 15%,
      transparent 40%
    );
}
.green.gray {
  background-image: linear-gradient(
      to bottom right,
      #34622e 10%,
      #5c5c5c 15%,
      transparent 40%
    );
}
.sapphire.red {
  background-image: linear-gradient(
      to bottom right,
      #0a0a52 10%,
      #7a0000 15%,
      transparent 40%
    );
}
.sapphire.gray {
  background-image: linear-gradient(
      to bottom right,
      #0a0a52 10%,
      #5c5c5c 15%,
      transparent 40%
    );
}
.sapphire.ebongray {
  background-image: linear-gradient(
      to bottom right,
      #0a0a52 10%,
      #2a2b2b 15%,
      transparent 40%
    );
}
.red.ebongray {
  background-image: linear-gradient(
      to bottom right,
      #7a0000 10%,
      #2a2b2b 15%,
      transparent 40%
    );
}

.character {
  width: 30%;
  border: 3px #10131d solid;
  border-radius:7px;
  float:left;
  margin: 10px;
  padding-bottom:10px;
}

.character h4 {
  padding: 5px;
  margin: 5px;
  text-shadow: 2px 2px 6px #000;
}

.character .avatar {
  min-height: 260px;
}


@media screen and (max-width: 599px) {
/*@media (max-width: 400px) {*/
  main, aside {
    float: none;
    width: auto;
    position: relative;
  }
  ul#filter{
    clear:both;
    width: auto;
    float: none;
    height: 100;
  }
  .character {
    float:none;
    width: auto;
  }
  img {
    max-width: 250px;
  }
}
@media screen and (min-width: 600px) and (max-width: 1200px){
  main, aside {
    float: none;
    width: auto;
    position: relative;
  }
  img {
    max-width: 300px;
  }
  ul#filter{
    clear:both;
    width: auto;
    float: none;
    height: 100;
  }
  .character {
    width: 45%;
  }
}
/*@media screen and (min-width: 1000px) {*/
  /*main, aside {
    float: none;
    width: auto;
    position: relative;
  }
  img {
    max-width: 400px;
  }*/
/*}*/
/*@media screen and (min-width: 1400px) {}*/